From 106263ec10e60ce6c406e4fd5eb76d195772d0f0 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 18 十二月 2020 18:07:05 +0800 Subject: [PATCH] 2020-12-18 --- src/tabviews/custom/components/card/table-card/index.jsx | 91 +++++++++++++++++++++++++++++++++++---------- 1 files changed, 70 insertions(+), 21 deletions(-) diff --git a/src/tabviews/custom/components/card/table-card/index.jsx b/src/tabviews/custom/components/card/table-card/index.jsx index 6459618..cb76eae 100644 --- a/src/tabviews/custom/components/card/table-card/index.jsx +++ b/src/tabviews/custom/components/card/table-card/index.jsx @@ -3,13 +3,15 @@ import { is, fromJS } from 'immutable' import { Spin, notification, Col, Empty, Pagination } from 'antd' -import asyncComponent from '@/utils/asyncComponent' import Api from '@/api' +import Utils from '@/utils/utils.js' +import asyncComponent from '@/utils/asyncComponent' import UtilsDM from '@/utils/utils-datamanage.js' import MKEmitter from '@/utils/events.js' import './index.scss' const CardCellComponent = asyncComponent(() => import('../cardcellList')) +const NormalHeader = asyncComponent(() => import('@/tabviews/custom/components/share/normalheader')) class TableCard extends Component { static propTpyes = { @@ -18,19 +20,18 @@ config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅 mainSearch: PropTypes.any, // 澶栧眰鎼滅储鏉′欢 menuType: PropTypes.any, // 鑿滃崟绫诲瀷 - dataManager: PropTypes.any, // 鏁版嵁鏉冮檺 } state = { + BID: '', // 涓婄骇ID config: null, // 鍥捐〃閰嶇疆淇℃伅 loading: false, // 鏁版嵁鍔犺浇鐘舵�� + search: null, // 鎼滅储鏉′欢 preIndex: 0, // 寮�濮嬬储寮� pageIndex: 1, // 椤电爜 total: 0, // 鎬绘暟 sync: false, // 鏄惁缁熶竴璇锋眰鏁版嵁 data: null, // 鏁版嵁 - title: '', // 鏍囬 - showHeader: false // 瀛樺湪鏍囬銆佹悳绱� } /** @@ -38,7 +39,7 @@ * 1銆� initdata 涓烘墦鍗版椂浣跨敤鐨勬暟鎹泦 */ UNSAFE_componentWillMount () { - const { data, initdata } = this.props + const { data, initdata, BID } = this.props let _config = fromJS(this.props.config).toJS() let _cols = new Map() @@ -51,6 +52,15 @@ } else if (_config.setting.sync === 'true' && initdata) { _data = initdata || [] _sync = false + } + + if (_data) { + _data = _data.map((item, index) => { + item.key = index + item.$$uuid = item[_config.setting.primaryKey] || '' + item.$$BID = BID || '' + return item + }) } let showHeader = false @@ -78,11 +88,11 @@ }) this.setState({ - showHeader: showHeader, - title: _config.wrap.title, sync: _sync, + BID: BID || '', data: _data, config: _config, + search: Utils.initMainSearch(_config.search), arr_field: _config.columns.map(col => col.field).join(','), }, () => { if (_config.setting.sync !== 'true' && _config.setting.onload === 'true') { @@ -93,6 +103,7 @@ componentDidMount () { MKEmitter.addListener('syncRefreshComponentId', this.reload) + MKEmitter.addListener('resetSelectLine', this.resetParentParam) } shouldComponentUpdate (nextProps, nextState) { @@ -104,19 +115,27 @@ return } MKEmitter.removeListener('syncRefreshComponentId', this.reload) + MKEmitter.removeListener('resetSelectLine', this.resetParentParam) } /** * @description 鍥捐〃鏁版嵁鏇存柊锛屽埛鏂板唴瀹� */ UNSAFE_componentWillReceiveProps (nextProps) { - const { sync, config } = this.state + const { sync, config, BID } = this.state if (sync && !is(fromJS(this.props.data), fromJS(nextProps.data))) { let _data = [] if (nextProps.data && nextProps.data[config.dataName]) { _data = nextProps.data[config.dataName] || [] } + + _data = _data.map((item, index) => { + item.key = index + item.$$uuid = item[config.setting.primaryKey] || '' + item.$$BID = BID || '' + return item + }) this.setState({sync: false, data: _data}) } else if (!is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { @@ -125,6 +144,17 @@ this.loadData() }) } + } + } + + resetParentParam = (MenuID, id) => { + const { config } = this.state + + if (!config.setting.supModule || config.setting.supModule !== MenuID) return + if (id !== this.state.BID) { + this.setState({ BID: id }, () => { + this.loadData() + }) } } @@ -141,10 +171,19 @@ } async loadData () { - const { mainSearch, BID, menuType, dataManager } = this.props - const { config, arr_field, pageIndex } = this.state + const { mainSearch, menuType } = this.props + const { config, arr_field, pageIndex, search, BID } = this.state - let searches = [] + if (config.setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� + this.setState({ + data: [], + total: 0, + preIndex: 0 + }) + return + } + + let searches = fromJS(search).toJS() if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 let keys = searches.map(item => item.key) mainSearch.forEach(item => { @@ -159,7 +198,7 @@ }) let _orderBy = config.setting.order || '' - let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, pageIndex, config.setting.pageSize, BID, menuType, dataManager) + let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, pageIndex, config.setting.pageSize, BID, menuType) let result = await Api.genericInterface(param) if (result.status) { @@ -169,7 +208,12 @@ } this.setState({ - data: result.data, + data: result.data.map((item, index) => { + item.key = index + item.$$uuid = item[config.setting.primaryKey] || '' + item.$$BID = BID || '' + return item + }), total: result.total, preIndex: _preIndex, loading: false @@ -209,7 +253,6 @@ } getLines = (data, seq) => { - const { BID } = this.props const { config } = this.state let line = [] @@ -240,7 +283,7 @@ line.push( <Col key={index} span={24}> <div className="card-item-box" style={item.style}> - <CardCellComponent BID={BID} seq={seq} data={data} cards={config} cardCell={item} elements={item.elements} updateStatus={this.updateStatus}/> + <CardCellComponent seq={seq} data={data} cards={config} cardCell={item} elements={item.elements} updateStatus={this.updateStatus}/> </div> </Col> ) @@ -249,21 +292,27 @@ return line } + refreshSearch = (list) => { + this.setState({ + search: list, + pageIndex: 1 + }, () => { + this.loadData() + }) + } + render() { - const { config, loading, data, title, showHeader, pageIndex, preIndex, total } = this.state + const { config, loading, data, BID, pageIndex, preIndex, total } = this.state return ( <div className="custom-table-card-box" style={{...config.style, height: config.wrap.height}}> {loading ? <div className="loading-mask"> - <div className="ant-spin-blur"></div> + {data ? <div className="ant-spin-blur"></div> : null} <Spin /> </div> : null } - {showHeader ? <div className="table-header" style={config.headerStyle}> - <span className="table-title">{title}</span> - {/* <searchLine /> */} - </div> : null} + <NormalHeader config={config} BID={BID} menuType={this.props.menuType} refresh={this.refreshSearch} /> {data && data.length > 0 ? <div className="card-row-list" style={{height: config.wrap.contentHeight}}> {data.map((item, index) => this.getLines(item, preIndex + index + 1))} </div> : null} -- Gitblit v1.8.0