From 11745b05b3ecdd3a3dc6f64793dc83a095de2b09 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 12 五月 2022 10:19:52 +0800 Subject: [PATCH] 2022-05-12 --- src/tabviews/custom/components/table/normal-table/index.jsx | 362 +++++++++++++++++++++++++++++++++++---------------- 1 files changed, 247 insertions(+), 115 deletions(-) diff --git a/src/tabviews/custom/components/table/normal-table/index.jsx b/src/tabviews/custom/components/table/normal-table/index.jsx index 86035b3..b592956 100644 --- a/src/tabviews/custom/components/table/normal-table/index.jsx +++ b/src/tabviews/custom/components/table/normal-table/index.jsx @@ -2,12 +2,10 @@ import PropTypes from 'prop-types' import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import { notification } from 'antd' +import { notification, Collapse } from 'antd' import Api from '@/api' import Utils from '@/utils/utils.js' -import zhCN from '@/locales/zh-CN/main.js' -import enUS from '@/locales/en-US/main.js' import UtilsDM from '@/utils/utils-datamanage.js' import asyncComponent from '@/utils/asyncComponent' import MKEmitter from '@/utils/events.js' @@ -19,6 +17,8 @@ const MainTable = asyncComponent(() => import('@/tabviews/custom/components/share/normalTable')) const NormalHeader = asyncComponent(() => import('@/tabviews/custom/components/share/normalheader')) +const { Panel } = Collapse + class NormalTable extends Component { static propTpyes = { BID: PropTypes.any, // 鐖剁骇Id @@ -29,7 +29,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, BID: '', // 涓婄骇ID BData: '', // 涓婄骇缁勪欢琛屾暟鎹� config: {}, // 椤甸潰閰嶇疆淇℃伅锛屽寘鎷寜閽�佹悳绱€�佹樉绀哄垪銆佹爣绛剧瓑 @@ -46,7 +45,6 @@ pageSize: 10, // 姣忛〉鏁版嵁鏉℃暟 orderBy: '', // 鎺掑簭 search: '', // 鎼滅储鏉′欢鏁扮粍锛屼娇鐢ㄦ椂闇�鍒嗗満鏅鐞� - statFields: [], // 鍚堣瀛楁 statFValue: [] // 鍚堣鍊� } @@ -55,11 +53,27 @@ * 1銆� initdata 涓烘墦鍗版椂浣跨敤鐨勬暟鎹泦 */ UNSAFE_componentWillMount () { - const { data, initdata, BID } = this.props + const { data, initdata, BID, BData } = this.props let _config = fromJS(this.props.config).toJS() let _cols = new Map() let _data = null let _sync = _config.setting.sync === 'true' + + if (_config.wrap.controlField) { + if (_config.wrap.controlVal) { + _config.wrap.controlVal = _config.wrap.controlVal.split(',') + } else { + _config.wrap.controlVal = [''] + } + } + + let setting = {..._config.setting, ..._config.wrap, style: {}} + + if (setting.selected !== 'always' && setting.selected !== 'init') { + setting.selected = 'false' + } else { + setting.orisel = true + } if (_config.setting.sync === 'true' && data) { _data = data[_config.dataName] || [] @@ -73,20 +87,40 @@ _data = _data.map((item, index) => { item.key = index item.$$uuid = item[_config.setting.primaryKey] || '' + item.$$key = '' + item.key + item.$$uuid item.$$BID = BID || '' + item.$$BData = BData || '' + item.$Index = index + 1 + '' + + if (setting.controlField) { + if (setting.controlVal.includes(item[setting.controlField])) { + item.$disabled = true + } + } + return item }) + + if (setting.selected !== 'false' && _data && _data.length > 0) { + setTimeout(() => { + MKEmitter.emit('mkCheckTopLine', _config.uuid) + }, 200) + if (setting.selected === 'init') { + setting.selected = 'false' + } + } } _config.columns.forEach(item => { + if (item.type !== 'number') return _cols.set(item.field, item) }) _config.cols.forEach(column => { if (column.type === 'custom') { column.elements = column.elements.map(item => { - if (item.field && _cols.has(item.field)) { - item.col = _cols.get(item.field) + if (item.eleType === 'number' && item.field && _cols.has(item.field) && typeof(item.decimal) !== 'number') { + item.decimal = _cols.get(item.field).decimal || 0 } return item }) @@ -95,13 +129,28 @@ } }) + if (setting.color) { + setting.style.color = setting.color + } + if (setting.fontSize) { + setting.style.fontSize = setting.fontSize + } + + if (_config.wrap.collapse === 'true') { + _config.wrap.title = _config.wrap.title || ' ' + } + + _config.style = _config.style || {} + this.setState({ + pageSize: setting.pageSize || 10, BID: BID || '', + BData: BData || '', title: _config.wrap.title, sync: _sync, data: _data, config: _config, - setting: {..._config.setting, ..._config.wrap}, + setting: setting, searchlist: _config.search, actions: _config.action, columns: _config.cols, @@ -109,7 +158,11 @@ search: Utils.initMainSearch(_config.search) // 鎼滅储鏉′欢鍒濆鍖栵紙鍚湁鏃堕棿鏍煎紡锛岄渶瑕佽浆鍖栵級 }, () => { if (_config.setting.sync !== 'true' && _config.setting.onload === 'true') { - this.loadmaindata() + setTimeout(() => { + this.loadmaindata() + this.getStatFieldsValue() + }, _config.setting.delay || 0) + } else if (_config.setting.onload === 'true') { this.getStatFieldsValue() } }) @@ -120,41 +173,38 @@ * @param { Boolean } reset 琛ㄦ牸鏄惁閲嶇疆 * @param { String } repage 琛ㄦ牸鏄惁閲嶇疆椤电爜 */ - async loadmaindata (reset, repage) { + async loadmaindata (reset, repage, id) { const { mainSearch } = this.props - const { setting, config, arr_field, search, orderBy, BID, pageIndex, pageSize } = this.state - let requireFields = search.filter(item => item.required && (!item.value || item.value.length === 0)) + const { setting, config, arr_field, search, orderBy, BID, pageIndex, pageSize, BData } = this.state - if (setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� + if (setting.supModule && !BID && setting.supKey !== 'false') { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� this.setState({ data: [], selectedData: [], total: 0 }) + MKEmitter.emit('resetSelectLine', config.uuid, '', '') // 骞挎挱鏁版嵁鍒囨崲 reset && MKEmitter.emit('resetTable', config.uuid, repage) // 鍒楄〃閲嶇疆 - return - } - if (requireFields.length > 0) { - let labels = requireFields.map(item => item.label) - labels = Array.from(new Set(labels)) - - notification.warning({ - top: 92, - message: this.state.dict['form.required.input'] + labels.join('銆�') + ' !', - duration: 3 - }) + if (setting.$hasSyncModule) { + MKEmitter.emit('syncBalconyData', config.uuid, [], false) + } return } let searches = fromJS(search).toJS() - if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 + if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 let keys = searches.map(item => item.key.toLowerCase()) mainSearch.forEach(item => { if (!keys.includes(item.key.toLowerCase())) { searches.push(item) } }) + } + + let requireFields = searches.filter(item => item.required && item.value === '') + if (requireFields.length > 0) { + return } this.setState({ @@ -164,20 +214,44 @@ let _orderBy = orderBy || setting.order let param = UtilsDM.getQueryDataParams(setting, arr_field, searches, _orderBy, pageIndex, pageSize, BID, this.props.menuType) - if (param.func === 'sPC_Get_TableData') { - param.menuname = config.name || '' - } - let result = await Api.genericInterface(param) if (result.status) { - MKEmitter.emit('resetSelectLine', config.uuid, '', '') // 骞挎挱鏁版嵁鍒囨崲 + if ((setting.selected !== 'false' || (setting.orisel && id)) && result.data && result.data.length > 0) { + setTimeout(() => { + MKEmitter.emit('mkCheckTopLine', config.uuid, id) + }, 200) + if (setting.selected === 'init') { + this.setState({setting: {...setting, selected: 'false'}}) + } + } else { + MKEmitter.emit('resetSelectLine', config.uuid, '', '') // 骞挎挱鏁版嵁鍒囨崲 + if (setting.$hasSyncModule) { + MKEmitter.emit('syncBalconyData', config.uuid, [], false) + } + } + reset && MKEmitter.emit('resetTable', config.uuid, repage) // 鍒楄〃閲嶇疆 + + let start = 1 + if (setting.laypage) { + start = pageSize * (pageIndex - 1) + 1 + } this.setState({ data: result.data.map((item, index) => { item.key = index item.$$uuid = item[setting.primaryKey] || '' + item.$$key = '' + item.key + item.$$uuid item.$$BID = BID || '' + item.$$BData = BData || '' + item.$Index = start + index + '' + + if (setting.controlField) { + if (setting.controlVal.includes(item[setting.controlField])) { + item.$disabled = true + } + } + return item }), selectedData: [], @@ -201,10 +275,10 @@ */ async loadmainLinedata (id) { const { mainSearch } = this.props - const { setting, config, arr_field, search, orderBy, BID, pageIndex, pageSize } = this.state + const { setting, config, arr_field, search, orderBy, BID, pageIndex, pageSize, BData } = this.state let searches = fromJS(search).toJS() - if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 + if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 let keys = searches.map(item => item.key.toLowerCase()) mainSearch.forEach(item => { if (!keys.includes(item.key.toLowerCase())) { @@ -220,10 +294,6 @@ let _orderBy = orderBy || setting.order let param = UtilsDM.getQueryDataParams(setting, arr_field, searches, _orderBy, pageIndex, pageSize, BID, this.props.menuType, id) - if (param.func === 'sPC_Get_TableData') { - param.menuname = config.name || '' - } - let result = await Api.genericInterface(param) if (result.status) { let data = fromJS(this.state.data).toJS() @@ -232,10 +302,13 @@ let _data = result.data[0] || {} _data.$$uuid = _data[setting.primaryKey] || '' _data.$$BID = BID || '' + _data.$$BData = BData || '' try { data = data.map(item => { if (item.$$uuid === _data.$$uuid) { _data.key = item.key + _data.$$key = '' + item.key + item.$$uuid + _data.$Index = item.$Index return _data } else { return item @@ -247,9 +320,11 @@ } return item }) - } catch { + } catch (e) { console.warn('鏁版嵁鏌ヨ閿欒') } + + MKEmitter.emit('resetSelectLine', config.uuid, _data.$$uuid || '', _data) } this.setState({ @@ -274,24 +349,19 @@ */ getStatFieldsValue = () => { const { mainSearch } = this.props - const { setting, config, search, BID, orderBy, statFields } = this.state + const { setting, config, search, BID, orderBy } = this.state - if (setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� + if (setting.supModule && !BID && setting.supKey !== 'false') { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� this.setState({ statFValue: [] }) return } - if (statFields.length === 0 || setting.interType !== 'system' || !setting.dataresource) return - - let requireFields = search.filter(item => item.required && (!item.value || item.value.length === 0)) - if (requireFields.length > 0) { - return - } + if (config.statFields.length === 0 || setting.interType !== 'system' || !setting.dataresource) return let searches = fromJS(search).toJS() - if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 + if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 let keys = searches.map(item => item.key.toLowerCase()) mainSearch.forEach(item => { if (!keys.includes(item.key.toLowerCase())) { @@ -299,13 +369,13 @@ } }) } + let requireFields = searches.filter(item => item.required && item.value === '') + if (requireFields.length > 0) { + return + } let _orderBy = orderBy || setting.order - let param = UtilsDM.getStatQueryDataParams(setting, statFields, searches, _orderBy, BID, this.props.menuType) - - if (param.func === 'sPC_Get_TableData') { - param.menuname = config.name || '' - } + let param = UtilsDM.getStatQueryDataParams(setting, config.statFields, searches, _orderBy, BID, this.props.menuType) Api.genericInterface(param).then(res => { if (res.status) { @@ -313,7 +383,7 @@ let values = [] if (_data) { - statFields.forEach(item => { + config.statFields.forEach(item => { if (_data[item.field] || _data[item.field] === 0) { let val = +_data[item.field] if (isNaN(val)) { @@ -391,16 +461,16 @@ /** * @description 琛ㄦ牸鍒锋柊 */ - reloadtable = (btn) => { + reloadtable = (btn, id) => { if (!btn || btn.resetPageIndex !== 'false') { this.setState({ pageIndex: 1 }, () => { - this.loadmaindata(true, 'true') + this.loadmaindata(true, 'true', id) this.getStatFieldsValue() }) } else { - this.loadmaindata(true, 'false') + this.loadmaindata(true, 'false', id) this.getStatFieldsValue() } } @@ -408,14 +478,14 @@ /** * @description 瀵煎嚭Excel鏃讹紝鑾峰彇椤甸潰鎼滅储鎺掑簭绛夊弬鏁� */ - getexceloutparam = (menuId, btnId) => { + queryModuleParam = (menuId, btnId) => { const { mainSearch } = this.props const { arr_field, config, orderBy, search, setting} = this.state if (config.uuid !== menuId) return let searches = search ? fromJS(search).toJS() : [] - if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 + if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 let keys = searches.map(item => item.key.toLowerCase()) mainSearch.forEach(item => { if (!keys.includes(item.key.toLowerCase())) { @@ -424,7 +494,7 @@ }) } - MKEmitter.emit('execExcelout', config.uuid, btnId, { + MKEmitter.emit('returnModuleParam', config.uuid, btnId, { arr_field: arr_field, orderBy: orderBy || setting.order, search: searches, @@ -436,7 +506,6 @@ const { config } = this.state if (config.uuid !== menuId) return - if (id === 'empty') return if (!id) { this.reloadtable() @@ -449,7 +518,7 @@ const { setting } = this.state if (!setting.supModule || setting.supModule !== MenuID) return - if (id !== this.state.BID) { + if (id !== this.state.BID || id !== '') { this.setState({ pageIndex: 1, BID: id, @@ -467,47 +536,77 @@ * @param {*} position // 鍒锋柊浣嶇疆 * @param {*} btn // 鎵ц鐨勬寜閽� */ - refreshByButtonResult = (menuId, position, btn) => { + refreshByButtonResult = (menuId, position, btn, id, lines) => { const { config, BID } = this.state if (config.uuid !== menuId) return - this.reloadtable(btn) // 鏁版嵁鍒锋柊 + let supModule = config.setting.supModule - if (btn.syncComponentId && btn.syncComponentId !== config.uuid && btn.syncComponentId !== config.setting.supModule) { - MKEmitter.emit('reloadData', btn.syncComponentId) // 鍚岀骇鏍囩鍒锋柊 + btn.syncComponentId && MKEmitter.emit('reloadData', btn.syncComponentId) + + if (!btn.syncComponentId || btn.syncComponentId !== supModule) { + if (position === 'line') { + if (lines && lines.length === 1) { + this.loadmainLinedata(lines[0].$$uuid) + } else { + this.reloadtable(btn, id) + } + } else if (position === 'mainline' || position === 'popclose') { // 鍒锋柊婧愮粍浠舵椂锛岄檮甯﹀埛鏂颁笂绾ц涓庡綋鍓嶇粍浠� + if (supModule && BID) { + MKEmitter.emit('reloadData', supModule, BID) + } else { + this.reloadtable(btn, id) + } + } else { + this.reloadtable(btn, id) + } } - if (position === 'mainline' && config.setting.supModule) { // 涓昏〃琛屽埛鏂� - MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty')) - } else if (position === 'popclose') { // 鏍囩鍏抽棴鍒锋柊 - config.setting.supModule && MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty')) + if (position === 'popclose') { // 鎵ц鍚姩寮圭獥鐨勬寜閽墍閫夋嫨鐨勫埛鏂伴」 btn.$tabId && MKEmitter.emit('refreshPopButton', btn.$tabId) } } UNSAFE_componentWillReceiveProps(nextProps) { - const { sync, config, BID } = this.state + const { sync, config, setting, BID, BData } = 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.$$key = '' + item.key + item.$$uuid + item.$$BID = BID || '' + item.$$BData = BData || '' + item.$Index = index + 1 + '' + + if (setting.controlField) { + if (setting.controlVal.includes(item[setting.controlField])) { + item.$disabled = true + } + } + + return item + }) + + if (setting.selected !== 'false' && _data && _data.length > 0) { + setTimeout(() => { + MKEmitter.emit('mkCheckTopLine', config.uuid) + }, 200) + if (setting.selected === 'init') { + this.setState({setting: {...setting, selected: 'false'}}) + } + } } - _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 (nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { - if (config.setting.syncRefresh === 'true') { - this.setState({}, () => { - this.reloadtable() - }) - } + } else if (config.setting.syncRefresh && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { + this.setState({pageIndex: 1}, () => { + this.reloadtable() + }) } } @@ -518,7 +617,7 @@ componentDidMount () { MKEmitter.addListener('reloadData', this.reloadData) MKEmitter.addListener('resetSelectLine', this.resetParentParam) - MKEmitter.addListener('getexceloutparam', this.getexceloutparam) + MKEmitter.addListener('queryModuleParam', this.queryModuleParam) MKEmitter.addListener('refreshByButtonResult', this.refreshByButtonResult) } @@ -531,42 +630,78 @@ } MKEmitter.removeListener('reloadData', this.reloadData) MKEmitter.removeListener('resetSelectLine', this.resetParentParam) - MKEmitter.removeListener('getexceloutparam', this.getexceloutparam) + MKEmitter.removeListener('queryModuleParam', this.queryModuleParam) MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) } render() { - const { BID, setting, searchlist, actions, config, columns, selectedData } = this.state + const { BID, setting, searchlist, actions, config, columns, selectedData, BData, data } = this.state + + let style = {...config.style} + if (config.wrap.empty === 'hidden' && (!data || data.length === 0)) { + style.display = 'none' + } return ( - <div className="custom-normal-table" style={config.style}> - <NormalHeader config={config}/> - {searchlist && searchlist.length ? - <MainSearch BID={BID} searchlist={searchlist} menuType={this.props.menuType} refreshdata={this.refreshbysearch}/> : null - } - <MainAction - BID={BID} - setting={setting} - actions={actions} - BData={this.state.BData} - columns={config.columns} - selectedData={selectedData} - /> - <div className={'main-table-box ' + (!actions || actions.length === 0 ? 'no-action' : '')}> - <MainTable + <div className="custom-normal-table" id={'anchor' + config.uuid} style={style}> + {config.wrap.collapse === 'true' ? <Collapse bordered={false} defaultActiveKey="1" expandIconPosition="right"> + <Panel forceRender={true} header={<NormalHeader config={config}/>} key="1"> + {searchlist && searchlist.length ? + <MainSearch BID={BID} setting={config.wrap} searchlist={searchlist} menuType={this.props.menuType} refreshdata={this.refreshbysearch}/> : null + } + <MainAction + BID={BID} + setting={setting} + actions={actions} + BData={BData} + columns={config.columns} + selectedData={selectedData} + /> + <div className={'main-table-box ' + (!actions || actions.length === 0 ? 'no-action' : '')}> + <MainTable + setting={setting} + columns={columns} + MenuID={config.uuid} + data={data} + fields={config.columns} + total={this.state.total} + lineMarks={config.lineMarks} + loading={this.state.loading} + refreshdata={this.refreshbytable} + statFValue={this.state.statFValue} + chgSelectData={(selects) => this.setState({selectedData: selects})} + /> + </div> + </Panel> + </Collapse> : <> + <NormalHeader config={config}/> + {searchlist && searchlist.length ? + <MainSearch BID={BID} setting={config.wrap} searchlist={searchlist} menuType={this.props.menuType} refreshdata={this.refreshbysearch}/> : null + } + <MainAction + BID={BID} setting={setting} - columns={columns} - MenuID={config.uuid} - data={this.state.data} - fields={config.columns} - total={this.state.total} - lineMarks={config.lineMarks} - loading={this.state.loading} - refreshdata={this.refreshbytable} - statFValue={this.state.statFValue} - chgSelectData={(selects) => this.setState({selectedData: selects})} + actions={actions} + BData={BData} + columns={config.columns} + selectedData={selectedData} /> - </div> + <div className={'main-table-box ' + (!actions || actions.length === 0 ? 'no-action' : '')}> + <MainTable + setting={setting} + columns={columns} + MenuID={config.uuid} + data={this.state.data} + fields={config.columns} + total={this.state.total} + lineMarks={config.lineMarks} + loading={this.state.loading} + refreshdata={this.refreshbytable} + statFValue={this.state.statFValue} + chgSelectData={(selects) => this.setState({selectedData: selects})} + /> + </div> + </>} </div> ) } @@ -574,10 +709,7 @@ const mapStateToProps = (state) => { return { - menuType: state.editLevel, - tabviews: state.tabviews, - permAction: state.permAction, - permMenus: state.permMenus + menuType: state.editLevel } } -- Gitblit v1.8.0