app-base-web/lib/library/select-tag/index.js

web development common base package.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _modal=require("antd/lib/modal"),_modal2=_interopRequireDefault(_modal),_table=require("antd/lib/table"),_table2=_interopRequireDefault(_table),_button=require("antd/lib/button"),_button2=_interopRequireDefault(_button),_row=require("antd/lib/row"),_row2=_interopRequireDefault(_row),_col=require("antd/lib/col"),_col2=_interopRequireDefault(_col),_tag=require("antd/lib/tag"),_tag2=_interopRequireDefault(_tag),_createClass=function(){function r(e,t){for(var a=0;a<t.length;a++){var r=t[a];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(e,t,a){return t&&r(e.prototype,t),a&&r(e,a),e}}();require("antd/lib/modal/style/css"),require("antd/lib/table/style/css"),require("antd/lib/button/style/css"),require("antd/lib/row/style/css"),require("antd/lib/col/style/css"),require("antd/lib/tag/style/css");var _react=require("react"),_react2=_interopRequireDefault(_react),_antd=require("antd"),_icons=require("@ant-design/icons");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _toConsumableArray(e){if(Array.isArray(e)){for(var t=0,a=Array(e.length);t<e.length;t++)a[t]=e[t];return a}return Array.from(e)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}require("./style");var SelectTag=function(){function t(e){_classCallCheck(this,t);var l=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return l.onOk=function(){var e=l.state.selectedRows.map(function(e){return e[l.props.targetKeys]});"radio"===l.props.selectionType&&(e=e[0]),console.log("value",e),l.setState({visible:!1,hasSelected:l.state.selected,hasSelectedRows:l.state.selectedRows,value:e})},l.onCancel=function(){l.setState({visible:!1,selected:l.state.hasSelected,selectedRows:l.state.hasSelectedRows})},l.colseTag=function(e){var t=l.state,a=t.selectedRows,r=t.selected;a.splice(e,1),r.splice(e,1),l.setState({selectedRows:[].concat(_toConsumableArray(l.state.selectedRows)),selected:[].concat(_toConsumableArray(l.state.selected))},function(){l.onOk()})},l.state={value:null,hasSelected:[],hasSelectedRows:[],selected:[],selectedRows:[],visible:!1},l}return _inherits(t,_react2.default.Component),_createClass(t,[{key:"render",value:function(){var i=this,e={scroll:{y:this.props.height},size:"middle",rowKey:"id",columns:this.props.columns,rowSelection:{type:this.props.selectionType,selectedRowKeys:this.state.selected,onChange:function(e,t){var a=[].concat(_toConsumableArray(e)),r=[].concat(_toConsumableArray(t));if("checkbox"===i.props.selectionType){for(var l=new Set(i.state.selected),n=Array.from(new Set(i.state.selected.concat(e).filter(function(e){return!l.has(e)}))),a=[].concat(_toConsumableArray(i.state.selected),_toConsumableArray(n)),s=[],o=0;o<t.length;o++)for(var c=0;c<n.length;c++)t[o].id===n[c]&&s.push(t[o]);r=[].concat(_toConsumableArray(i.state.selectedRows),s)}i.setState({selected:a,selectedRows:r})}},rowClassName:function(e){return e.id===i.state.selectedRowId?"row-selected":""},onRow:function(e){return{onClick:function(){i.setState({selectedRowId:e.id})}}},dataSource:this.props.data,pagination:this.props.pagination,loading:this.props.loading,onChange:this.props.onChange};return _react2.default.createElement("div",null,_react2.default.createElement("div",{className:"ant-select ant-select-multiple ant-select-show-search"},_react2.default.createElement("div",{className:"ant-select-selector",onClick:function(){return i.setState({visible:!i.state.visible})}},0<this.state.selectedRows.length?this.state.selectedRows.map(function(e,t){return _react2.default.createElement(_tag2.default,{className:"ant-select-selection-item",key:e.id,closable:!0,onClose:function(){i.colseTag(t)}},e[i.props.targetKeys])}):_react2.default.createElement("span",{className:"ant-select-selection-placeholder"},this.props.placeholder)),_react2.default.createElement("span",{className:"ant-select-arrow"},_react2.default.createElement(_icons.SearchOutlined,null))),_react2.default.createElement(_modal2.default,{title:[_react2.default.createElement(_row2.default,{className:"app-admin"},_react2.default.createElement(_col2.default,{className:"main-title",style:{marginBottom:"5px"}},_react2.default.createElement("i",{className:"iconfont icon-title"}),this.props.title?this.props.title:""))],centered:!0,visible:this.state.visible,onCancel:this.onCancel,width:800,footer:[_react2.default.createElement(_row2.default,{justify:"center"},_react2.default.createElement(_col2.default,{xs:24},_react2.default.createElement(_button2.default,{className:"btn-cancel",icon:_react2.default.createElement("i",{className:"iconfont icon-cancel"}),onClick:this.onCancel},"取消"),_react2.default.createElement(_button2.default,{className:"btn-submit",icon:_react2.default.createElement("i",{className:"iconfont icon-submit"}),onClick:this.onOk},"确定")))]},_react2.default.createElement(_table2.default,e)))}}]),t}();exports.default=SelectTag;