From f6626b05f1275cc2f8ca77f773d4f6a6af1b0a89 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 21 十一月 2022 16:11:55 +0800 Subject: [PATCH] 2022-11-21 --- src/tabviews/custom/components/table/base-table/index.jsx | 616 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 616 insertions(+), 0 deletions(-) diff --git a/src/tabviews/custom/components/table/base-table/index.jsx b/src/tabviews/custom/components/table/base-table/index.jsx new file mode 100644 index 0000000..c4753cc --- /dev/null +++ b/src/tabviews/custom/components/table/base-table/index.jsx @@ -0,0 +1,616 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import { is, fromJS } from 'immutable' +import { notification, Modal } from 'antd' + +import Api from '@/api' +import Utils from '@/utils/utils.js' +import UtilsDM from '@/utils/utils-datamanage.js' +import asyncComponent from '@/utils/asyncComponent' +import MKEmitter from '@/utils/events.js' +import './index.scss' + +// 閫氱敤缁勪欢 +const MainSearch = asyncComponent(() => import('@/tabviews/zshare/topSearch')) +const MainAction = asyncComponent(() => import('@/tabviews/zshare/actionList')) +const MainTable = asyncComponent(() => import('@/tabviews/custom/components/share/normalTable')) + +class MkBaseTable extends Component { + static propTpyes = { + data: PropTypes.array, // 缁熶竴鏌ヨ鏁版嵁 + config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅 + mainSearch: PropTypes.any, // 澶栧眰鎼滅储鏉′欢 + } + + state = { + BID: '', // 涓婄骇ID + BData: '', // 涓婄骇缁勪欢琛屾暟鎹� + config: {}, // 椤甸潰閰嶇疆淇℃伅锛屽寘鎷寜閽�佹悳绱€�佹樉绀哄垪銆佹爣绛剧瓑 + actions: null, // 鎸夐挳闆� + columns: null, // 鏄剧ず鍒� + arr_field: '', // 鏌ヨ瀛楁闆� + setting: null, // 椤甸潰鍏ㄥ眬璁剧疆锛氭暟鎹簮銆佹寜閽強鏄剧ず鍒楀浐瀹氥�佷富閿瓑 + data: [], // 鍒楄〃鏁版嵁闆� + selectedData: [], // 宸查�夎〃鏍兼暟鎹� + total: 0, // 鎬绘暟 + loading: false, // 鍒楄〃鏁版嵁鍔犺浇涓� + pageIndex: 1, // 椤电爜 + pageSize: 10, // 姣忛〉鏁版嵁鏉℃暟 + orderBy: '', // 鎺掑簭 + search: '', // 鎼滅储鏉′欢鏁扮粍锛屼娇鐢ㄦ椂闇�鍒嗗満鏅鐞� + statFValue: [] // 鍚堣鍊� + } + + /** + * @description 鍒濆鍖栧鐞� + */ + UNSAFE_componentWillMount () { + let _config = fromJS(this.props.config).toJS() + let _cols = new Map() + + let BID = '' + let BData = '' + + if (_config.setting.supModule) { + BData = window.GLOB.CacheData.get(_config.setting.supModule) + } else { + BData = window.GLOB.CacheData.get(_config.$pageId) + } + if (BData) { + BID = BData.$BID || '' + } + + 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} + + if (setting.selected !== 'always' && setting.selected !== 'init') { + setting.selected = 'false' + } else { + setting.orisel = true + } + + _config.columns.forEach(item => { + if (item.type !== 'number') return + _cols.set(item.field, item) + }) + + _config.cols.forEach(column => { + if (column.type === 'action') { + column.operations = column.elements + } + }) + + _config.style = _config.style || {} + + this.setState({ + pageSize: setting.pageSize || 10, + BID: BID || '', + BData: BData || '', + config: _config, + setting: setting, + actions: _config.action, + columns: _config.cols, + arr_field: _config.columns.map(col => col.field).join(','), + search: Utils.initMainSearch(_config.search) // 鎼滅储鏉′欢鍒濆鍖栵紙鍚湁鏃堕棿鏍煎紡锛岄渶瑕佽浆鍖栵級 + }, () => { + if (_config.setting.onload === 'true') { + setTimeout(() => { + this.loadmaindata() + this.getStatFieldsValue() + }, _config.setting.delay || 0) + } + }) + } + + /** + * @description 涓昏〃鏁版嵁鍔犺浇 + * @param { Boolean } reset 琛ㄦ牸鏄惁閲嶇疆 + * @param { String } repage 琛ㄦ牸鏄惁閲嶇疆椤电爜 + */ + async loadmaindata (reset, repage, id) { + const { mainSearch } = this.props + const { setting, config, arr_field, search, orderBy, BID, pageIndex, pageSize, BData } = this.state + + if (setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� + this.setState({ + data: [], + selectedData: [], + total: 0 + }) + + MKEmitter.emit('resetSelectLine', config.uuid, '', '') // 骞挎挱鏁版嵁鍒囨崲 + reset && MKEmitter.emit('resetTable', config.uuid, repage) // 鍒楄〃閲嶇疆 + if (setting.$hasSyncModule) { + MKEmitter.emit('syncBalconyData', config.uuid, [], false) + } + return + } + + let searches = fromJS(search).toJS() + 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({ + loading: true + }) + + let _orderBy = orderBy || setting.order + let param = UtilsDM.getQueryDataParams(setting, arr_field, searches, _orderBy, pageIndex, pageSize, BID) + + let result = await Api.genericInterface(param) + if (result.status) { + 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 (config.absFields) { + config.absFields.forEach(f => { + if (!isNaN(item[f])) { + item[f] = Math.abs(item[f]) + } + }) + } + if (setting.controlField) { + if (setting.controlVal.includes(item[setting.controlField])) { + item.$disabled = true + } + } + + return item + }), + selectedData: [], + total: result.total, + loading: false + }) + + if (config.autoMatic) { + if (result.data && result.data.length > 0) { + MKEmitter.emit('autoGetData', config.MenuID) + } else { + MKEmitter.emit('autoMaticOver', config.MenuID) + } + } + } else { + this.setState({ + loading: false + }) + + if (config.autoMatic) { + MKEmitter.emit('autoMaticError', config.MenuID) + } + + if (result.ErrCode === 'N') { + Modal.error({ + title: result.message, + }) + } else { + notification.error({ + top: 92, + message: result.message, + duration: 10 + }) + } + } + } + + /** + * @description 鑾峰彇鍗曡鏁版嵁 + */ + async loadmainLinedata (id) { + const { mainSearch } = this.props + const { setting, config, arr_field, search, orderBy, BID, pageIndex, pageSize, BData } = this.state + + let searches = fromJS(search).toJS() + 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) + } + }) + } + + this.setState({ + loading: true + }) + + let _orderBy = orderBy || setting.order + let param = UtilsDM.getQueryDataParams(setting, arr_field, searches, _orderBy, pageIndex, pageSize, BID, id) + + let result = await Api.genericInterface(param) + if (result.status) { + let data = fromJS(this.state.data).toJS() + let selectedData = fromJS(this.state.selectedData).toJS() + if (result.data && result.data[0]) { + let _data = result.data[0] || {} + _data.$$uuid = _data[setting.primaryKey] || '' + _data.$$BID = BID || '' + _data.$$BData = BData || '' + + if (config.absFields) { + config.absFields.forEach(f => { + if (!isNaN(_data[f])) { + _data[f] = Math.abs(_data[f]) + } + }) + } + + 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 + } + }) + selectedData = selectedData.map(item => { + if (_data.$$uuid === item.$$uuid) { + return _data + } + return item + }) + } catch (e) { + console.warn('鏁版嵁鏌ヨ閿欒') + } + + MKEmitter.emit('resetSelectLine', config.uuid, _data.$$uuid || '', _data) + } + + this.setState({ + data, + selectedData, + loading: false + }) + } else { + this.setState({ + loading: false + }) + notification.error({ + top: 92, + message: result.message, + duration: 10 + }) + } + } + + /** + * @description 鑾峰彇鍚堣瀛楁鍊� + */ + getStatFieldsValue = () => { + const { mainSearch } = this.props + const { setting, config, search, BID, orderBy } = this.state + + if (setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� + this.setState({ + statFValue: [] + }) + return + } + + if (config.statFields.length === 0 || setting.interType !== 'system' || !setting.dataresource) return + + let searches = fromJS(search).toJS() + 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 + } + + let _orderBy = orderBy || setting.order + let param = UtilsDM.getStatQueryDataParams(setting, config.statFields, searches, _orderBy, BID) + + Api.genericInterface(param).then(res => { + if (res.status) { + let _data = res.data[0] + let values = [] + + if (_data) { + config.statFields.forEach(item => { + if (_data[item.field] || _data[item.field] === 0) { + let val = +_data[item.field] + if (isNaN(val)) { + val = 0 + } + val = val.toFixed(item.decimal) + values.push({label: item.label, value: val}) + } + }) + } + this.setState({ + statFValue: values + }) + } else { + this.setState({ + statFValue: [] + }) + notification.error({ + top: 92, + message: res.message, + duration: 10 + }) + } + }) + } + + /** + * @description 鎼滅储鏉′欢鏀瑰彉鏃讹紝閲嶇疆琛ㄦ牸鏁版嵁 + * 鍚湁鍒濆涓嶅姞杞界殑椤甸潰锛屼慨鏀硅缃� + */ + refreshbysearch = (searches) => { + const { setting } = this.state + + if (setting.onload === 'false') { + this.setState({ + pageIndex: 1, + search: searches, + setting: {...setting, onload: 'true'} + }, () => { + this.loadmaindata() + this.getStatFieldsValue() + }) + } else { + this.setState({ + pageIndex: 1, + search: searches + }, () => { + this.loadmaindata(true, 'true') + this.getStatFieldsValue() + }) + } + } + + /** + * @description 琛ㄦ牸鏉′欢鏀瑰彉鏃堕噸缃暟鎹紙鍒嗛〉鎴栨帓搴忥級 + */ + refreshbytable = (pagination, filters, sorter) => { + if (!sorter) { // 鏃犱汉鍊煎畧 + this.setState({ + pageIndex: pagination.pageIndex + }, () => { + this.loadmaindata() + }) + } else { + if (sorter.order) { + let _chg = { + ascend: 'asc', + descend: 'desc' + } + sorter.order = _chg[sorter.order] + } + + this.setState({ + pageIndex: pagination.current, + pageSize: pagination.pageSize, + orderBy: (sorter.field && sorter.order) ? `${sorter.field} ${sorter.order}` : '' + }, () => { + this.loadmaindata() + }) + } + } + + /** + * @description 琛ㄦ牸鍒锋柊 + */ + reloadtable = (btn, id) => { + if (!btn || btn.resetPageIndex !== 'false') { + this.setState({ + pageIndex: 1 + }, () => { + this.loadmaindata(true, 'true', id) + this.getStatFieldsValue() + }) + } else { + this.loadmaindata(true, 'false', id) + this.getStatFieldsValue() + } + } + + /** + * @description 瀵煎嚭Excel鏃讹紝鑾峰彇椤甸潰鎼滅储鎺掑簭绛夊弬鏁� + */ + queryModuleParam = (menuId, callback) => { + 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 (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) + } + }) + } + + callback({ + arr_field: arr_field, + orderBy: orderBy || setting.order, + search: searches, + menuName: config.name + }) + } + + reloadData = (menuId, id) => { + const { config } = this.state + + if (config.uuid !== menuId) return + + if (!id) { + this.reloadtable() + } else { + this.loadmainLinedata(id) + } + } + + resetParentParam = (MenuID, id, data) => { + const { setting } = this.state + + if (!setting.supModule || setting.supModule !== MenuID) return + if (id !== this.state.BID || id !== '') { + this.setState({ + pageIndex: 1, + BID: id, + BData: data + }, () => { + this.loadmaindata(true, 'true') + this.getStatFieldsValue() + }) + } + } + + /** + * @description 鎸夐挳鎵ц瀹屾垚鍚庨〉闈㈠埛鏂� + * @param {*} menuId // 鑿滃崟Id + * @param {*} position // 鍒锋柊浣嶇疆 + * @param {*} btn // 鎵ц鐨勬寜閽� + */ + refreshByButtonResult = (menuId, position, btn, id, lines) => { + const { config, BID } = this.state + + if (config.uuid !== menuId) return + + if (position === 'line') { + if (lines && lines.length === 1) { + this.loadmainLinedata(lines[0].$$uuid) + } else { + this.reloadtable(btn, id) + } + } else if ((position === 'mainline' || position === 'popclose') && config.setting.supModule && BID) { // 鍒锋柊婧愮粍浠舵椂锛岄檮甯﹀埛鏂颁笂绾ц涓庡綋鍓嶇粍浠� + MKEmitter.emit('reloadData', config.setting.supModule, BID) + } else { + this.reloadtable(btn, id) + } + + if (position === 'popclose') { // 鎵ц鍚姩寮圭獥鐨勬寜閽墍閫夋嫨鐨勫埛鏂伴」 + btn.$tabId && MKEmitter.emit('refreshPopButton', btn.$tabId) + } + } + + UNSAFE_componentWillReceiveProps(nextProps) { + const { config } = this.state + + if (config.setting.useMSearch && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { + this.setState({pageIndex: 1}, () => { + this.reloadtable() + }) + } + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) + } + + componentDidMount () { + MKEmitter.addListener('reloadData', this.reloadData) + MKEmitter.addListener('resetSelectLine', this.resetParentParam) + MKEmitter.addListener('queryModuleParam', this.queryModuleParam) + MKEmitter.addListener('refreshByButtonResult', this.refreshByButtonResult) + } + + /** + * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆 + */ + componentWillUnmount () { + this.setState = () => { + return + } + MKEmitter.removeListener('reloadData', this.reloadData) + MKEmitter.removeListener('resetSelectLine', this.resetParentParam) + MKEmitter.removeListener('queryModuleParam', this.queryModuleParam) + MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) + } + + render() { + const { BID, setting, actions, config, columns, selectedData, BData, data } = this.state + + return ( + <div className="custom-base-table" style={config.style}> + {config.search.length ? + <MainSearch BID={BID} config={config} refreshdata={this.refreshbysearch}/> : null + } + {actions.length > 0 ? <MainAction + BID={BID} + setting={setting} + actions={actions} + BData={BData} + columns={config.columns} + selectedData={selectedData} + /> : <div style={{height: '25px'}}></div>} + <div className="main-table-box"> + <MainTable + data={data} + setting={setting} + columns={columns} + MenuID={config.uuid} + fields={config.columns} + total={this.state.total} + autoMatic={config.autoMatic} + lineMarks={config.lineMarks} + loading={this.state.loading} + refreshdata={this.refreshbytable} + statFValue={this.state.statFValue} + chgSelectData={(selects) => this.setState({selectedData: selects})} + /> + </div> + </div> + ) + } +} + +export default MkBaseTable \ No newline at end of file -- Gitblit v1.8.0