app-base-react/lib/pages/config/CfgDynamicTable/CfgDynamicTableList.js

react development common base package.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _row=require("antd/lib/row"),_row2=_interopRequireDefault(_row),_button=require("antd/lib/button"),_button2=_interopRequireDefault(_button),_col=require("antd/lib/col"),_col2=_interopRequireDefault(_col),_message2=require("antd/lib/message"),_message3=_interopRequireDefault(_message2),_table=require("antd/lib/table"),_table2=_interopRequireDefault(_table),_tooltip=require("antd/lib/tooltip"),_tooltip2=_interopRequireDefault(_tooltip),_createClass=function(){function n(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}}(),_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r,n=arguments[t];for(r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_slicedToArray=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e)){var r=t,n=[],a=!0,t=!1,o=void 0;try{for(var l,i=e[Symbol.iterator]();!(a=(l=i.next()).done)&&(n.push(l.value),!r||n.length!==r);a=!0);}catch(e){t=!0,o=e}finally{try{!a&&i.return&&i.return()}finally{if(t)throw o}}return n}throw new TypeError("Invalid attempt to destructure non-iterable instance")},_react=(require("antd/lib/row/style/css"),require("antd/lib/button/style/css"),require("antd/lib/col/style/css"),require("antd/lib/message/style/css"),require("antd/lib/table/style/css"),require("antd/lib/tooltip/style/css"),require("react")),_react2=_interopRequireDefault(_react),_reactWindow=require("react-window"),_rcResizeObserver=require("rc-resize-observer"),_rcResizeObserver2=_interopRequireDefault(_rcResizeObserver),_antd=require("antd"),_api=require("@/api"),api=_interopRequireWildcard(_api);function _interopRequireWildcard(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function _interopRequireDefault(e){return e&&e.__esModule?e:{default: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)return!t||"object"!=typeof t&&"function"!=typeof t?e:t;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}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)}var title="动态查询结果",url="SysDynamicQuery/";function VirtualTable(e){function t(){c.current.resetAfterIndices({columnIndex:0,shouldForceUpdate:!0})}var r=e.columns,l=e.scroll,i=e.dataSource,n=(0,_react.useState)(0),n=_slicedToArray(n,2),u=n[0],a=n[1],o=r.filter(function(e){return!e.width}).length,s=r.map(function(e){return e.width?e:_extends({},e,{width:Math.floor(u/o)})}),c=(0,_react.useRef)(),n=(0,_react.useState)(function(){var e={};return Object.defineProperty(e,"scrollLeft",{get:function(){return null},set:function(e){c.current&&c.current.scrollTo({scrollLeft:e})}}),e}),d=_slicedToArray(n,1)[0];(0,_react.useEffect)(function(){return t},[u]);return _react2.default.createElement(_rcResizeObserver2.default,{onResize:function(e){e=e.width;a(e)}},_react2.default.createElement(_table2.default,_extends({},e,{className:"virtual-table",columns:s,pagination:!1,components:{body:function(a,e){var r=e.scrollbarSize,t=e.ref,n=e.onScroll,o=(t.current=d,60*a.length);return _react2.default.createElement(_reactWindow.VariableSizeGrid,{ref:c,columnCount:s.length,columnWidth:function(e){var t=s[e].width;return o>l.y&&e===s.length-1?t-r-1:t},height:l.y,rowCount:a.length,rowHeight:function(){return 60},width:u,onScroll:function(e){e=e.scrollLeft;n({scrollLeft:e})}},function(e){var t=e.columnIndex,r=e.rowIndex,e=e.style,n=a[r][s[t].dataIndex],e=_extends({},e,{display:"flex",alignItems:"center",justifyContent:"center",padding:"0 3px",border:"0.5px solid #999"}),e=_extends({},e);return 0==t&&(e=_extends({},e,{borderLeft:"1px solid #999"})),t==s.length-1&&(e=_extends({},e,{borderRight:"1px solid #999"})),0==r&&(e=_extends({},e,{borderTop:"1px solid #999"})),r==i.length-1&&(e=_extends({},e,{borderBottom:"1px solid #999"})),_react2.default.createElement(_tooltip2.default,{placement:"leftTop",title:n,overlayInnerStyle:{overflow:"auto",maxHeight:"600px",maxWidth:"400px"}},_react2.default.createElement("div",{style:e},(t=n)&&20<t.length?t.slice(0,20)+"...":t))})}}})))}var CfgDynamicTableList=function(){function r(e){_classCallCheck(this,r);var t=_possibleConstructorReturn(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return t.setExcelName=function(e){t.setState({excelName:e})},t.setColumns=function(e){var n,a=t;e&&0<e.length&&(e=e[0],n=[],e)&&(Object.keys(e).map(function(e,t){var r={};r.title=e,r.dataIndex=e,r.key=e,r.align="center",r.width=a.state.width,n.push(r)}),t.setState({columns:n}))},t.setDataSource=function(e){e&&0<e.length&&t.setState({dataSource:e})},t.setLoading=function(e){t.setState({loading:e})},t.onExport=function(n,e){var a,t,r,o;0==n.state.columns.length||0==n.state.dataSource.length?_message3.default.error("没有记录可以导出！"):(a=[],t=[],n.state.columns.map(function(e){t.push(e.title)}),a.push(t),n.state.dataSource.map(function(t,e){var r=[];n.state.columns.map(function(e){e=t[e.dataIndex];r.push(e)}),a.push(r)}),r=XLSX.utils.aoa_to_sheet(a),o=XLSX.utils.book_new(),window.XLSX.utils.book_append_sheet(o,r,"SheetJS"),window.XLSX.writeFile(o,e+".xlsx"),_message3.default.success("导出成功!"))},t.state={width:200,selected:[],columns:[],dataSource:[],loading:!1,excelName:"",id:e.dynamicTableId},t}return _inherits(r,_react2.default.Component),_createClass(r,[{key:"componentDidMount",value:function(){var t=this,e=this.state.id;e&&(t.setLoading(!0),api.post(url+"getDynamicTable",{id:e}).then(function(e){t.setLoading(!1),e.success?(_message3.default.info(e.msg),t.setColumns(e.data.list),t.setDataSource(e.data.list),t.setExcelName(e.data.name),console.log("rs:%o",e.data)):_message3.default.error(e.msg)}))}},{key:"render",value:function(){var e=this,t=this.state,r=t.dataSource,n=t.loading,a=t.columns,o=t.excelName,t=t.width,l=this.props.height;return _react2.default.createElement("div",{className:"app-admin"},_react2.default.createElement(_row2.default,{align:"center"},_react2.default.createElement(_col2.default,{className:"main-title",xs:20},_react2.default.createElement("i",{className:"iconfont icon-title"}),title),_react2.default.createElement(_col2.default,{xs:4,style:{textAlign:"right"}},_react2.default.createElement(_button2.default,{className:"btn-export",onClick:function(){return e.onExport(e,o)}},_react2.default.createElement("i",{className:"iconfont icon-export"}),"导出"))),_react2.default.createElement(VirtualTable,{style:{width:a.length*t},columns:a,dataSource:r,loading:n,scroll:{y:l-150}}))}}]),r}();exports.default=CfgDynamicTableList;