From 5046d0d13dc6a8563b8e54e31913bc44cfa1072f Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 26 四月 2022 19:23:18 +0800 Subject: [PATCH] 2022-04-26 --- src/tabviews/custom/components/table/edit-table/index.jsx | 298 ++++++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 213 insertions(+), 85 deletions(-) diff --git a/src/tabviews/custom/components/table/edit-table/index.jsx b/src/tabviews/custom/components/table/edit-table/index.jsx index 083affa..613acf2 100644 --- a/src/tabviews/custom/components/table/edit-table/index.jsx +++ b/src/tabviews/custom/components/table/edit-table/index.jsx @@ -1,6 +1,6 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import {connect} from 'react-redux' +import { connect } from 'react-redux' import { is, fromJS } from 'immutable' import { notification } from 'antd' @@ -9,18 +9,17 @@ import UtilsDM from '@/utils/utils-datamanage.js' import asyncComponent from '@/utils/asyncComponent' import MKEmitter from '@/utils/events.js' +import MainTable from './normalTable' import './index.scss' // 閫氱敤缁勪欢 const MainSearch = asyncComponent(() => import('@/tabviews/zshare/topSearch')) const MainAction = asyncComponent(() => import('@/tabviews/zshare/actionList')) -const MainTable = asyncComponent(() => import('./normalTable')) const NormalHeader = asyncComponent(() => import('@/tabviews/custom/components/share/normalheader')) class EditableTable extends Component { static propTpyes = { BID: PropTypes.any, // 鐖剁骇Id - data: PropTypes.array, // 缁熶竴鏌ヨ鏁版嵁 config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅 mainSearch: PropTypes.any, // 澶栧眰鎼滅储鏉′欢 menuType: PropTypes.any, // 鑿滃崟绫诲瀷 @@ -36,13 +35,15 @@ arr_field: '', // 浣跨敤 sPC_Get_TableData 鏃剁殑鏌ヨ瀛楁闆� setting: null, // 椤甸潰鍏ㄥ眬璁剧疆锛氭暟鎹簮銆佹寜閽強鏄剧ず鍒楀浐瀹氥�佷富閿瓑 data: [], // 鍒楄〃鏁版嵁闆� + selectedData: [], // 宸查�夎〃鏍兼暟鎹� total: 0, // 鎬绘暟 loading: false, // 鍒楄〃鏁版嵁鍔犺浇涓� pageIndex: 1, // 椤电爜 pageSize: 10, // 姣忛〉鏁版嵁鏉℃暟 orderBy: '', // 鎺掑簭 search: '', // 鎼滅储鏉′欢鏁扮粍锛屼娇鐢ㄦ椂闇�鍒嗗満鏅鐞� - statFValue: [] // 鍚堣鍊� + statFValue: [], // 鍚堣鍊� + lock: false } /** @@ -50,48 +51,86 @@ * 1銆� initdata 涓烘墦鍗版椂浣跨敤鐨勬暟鎹泦 */ UNSAFE_componentWillMount () { - const { data, initdata, BID, BData } = this.props + const { BID, BData } = this.props let _config = fromJS(this.props.config).toJS() let _cols = new Map() - let _data = null - let _sync = _config.setting.sync === 'true' let setting = {..._config.setting, ..._config.wrap, style: {}} + setting.tableId = Utils.getuuid() - if (_config.setting.sync === 'true' && data) { - _data = data[_config.dataName] || [] - _sync = false - } else if (_config.setting.sync === 'true' && initdata) { - _data = initdata || [] - _sync = false + _config.submit.style = _config.submit.style || {} + _config.submit.wrapStyle = {} + _config.submit.hasAction = _config.action.length > 0 + if (!_config.submit.hasAction) { + if (_config.submit.style.marginTop) { + _config.submit.wrapStyle.paddingTop = _config.submit.style.marginTop + } + if (_config.submit.style.marginBottom) { + _config.submit.wrapStyle.paddingBottom = _config.submit.style.marginBottom + } + } else { + _config.submit.wrapStyle.paddingTop = '15px' } - if (_data) { - _data = _data.map((item, index) => { - item.key = index - item.$$uuid = item[_config.setting.primaryKey] || '' - item.$$BID = BID || '' - item.$$BData = BData || '' - item.$Index = index + 1 + '' - return item - }) + if (setting.height) { + setting.operType = 'btnMode' } _config.columns.forEach(item => { + if (item.type !== 'number') return _cols.set(item.field, item) }) + let _columns = [] + let signAdd = false _config.cols.forEach(column => { + if (column.Hide === 'true') return + if (column.type === 'index') { + column.field = '$Index' + column.type = 'text' + } + + if (setting.addable === 'true' && setting.operType === 'buoyMode' && column.type !== 'action' && !signAdd) { + column.addable = true + signAdd = true + } + + if (column.marks && column.marks.length === 0) { + column.marks = '' + } + + column.tableId = setting.tableId + + if (column.type === 'text' && column.editable === 'true' && column.editType === 'select') { + column.options = column.options || [] + column.options = column.options.filter(cell => { + cell.value = cell.Value + cell.label = cell.Text + + return !cell.Hide + }) + } + 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 }) } else if (column.type === 'action') { column.operations = column.elements } + + _columns.push(column) }) + + if (setting.delable !== 'false' && setting.operType === 'buoyMode') { + if (_columns[_columns.length - 1] && _columns[_columns.length - 1].type !== 'action') { + _columns[_columns.length - 1].delable = true + } else if (_columns[_columns.length - 2] && _columns[_columns.length - 2].type !== 'action') { + _columns[_columns.length - 2].delable = true + } + } if (setting.color) { setting.style.color = setting.color @@ -109,21 +148,19 @@ BID: BID || '', BData: BData || '', title: _config.wrap.title, - sync: _sync, - data: _data, config: _config, setting: setting, searchlist: _config.search, actions: _config.action, - columns: _config.cols, + columns: _columns, arr_field: _config.columns.map(col => col.field).join(','), search: Utils.initMainSearch(_config.search) // 鎼滅储鏉′欢鍒濆鍖栵紙鍚湁鏃堕棿鏍煎紡锛岄渶瑕佽浆鍖栵級 }, () => { - if (_config.setting.sync !== 'true' && _config.setting.onload === 'true') { - this.loadmaindata() - this.getStatFieldsValue() - } else if (_config.setting.onload === 'true') { - this.getStatFieldsValue() + if (_config.setting.onload === 'true') { + setTimeout(() => { + this.loadmaindata() + this.getStatFieldsValue() + }, _config.setting.delay || 0) } }) } @@ -140,6 +177,7 @@ if (setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� this.setState({ data: [], + selectedData: [], total: 0 }) reset && MKEmitter.emit('resetTable', config.uuid, repage) // 鍒楄〃閲嶇疆 @@ -176,17 +214,105 @@ if (setting.laypage) { start = pageSize * (pageIndex - 1) + 1 } + let data = result.data.map((item, index) => { + item.key = index + item.$$uuid = item[setting.primaryKey] || '' + item.$$BID = BID || '' + item.$$BData = BData || '' + item.$Index = start + index + '' + item.$type = 'upt' + item.$origin = true + return item + }) this.setState({ - data: result.data.map((item, index) => { - item.key = index - item.$$uuid = item[setting.primaryKey] || '' - item.$$BID = BID || '' - item.$$BData = BData || '' - item.$Index = start + index + '' - return item - }), + data: data, + selectedData: [], total: result.total, + loading: false + }) + + MKEmitter.emit('transferData', config.uuid, data) + } else { + this.setState({ + loading: false + }) + notification.error({ + top: 92, + message: result.message, + duration: 10 + }) + } + } + + /** + * @description 鑾峰彇鍗曡鏁版嵁 + */ + async loadmainLinedata (id, line) { + 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, this.props.menuType, id) + + let result = await Api.genericInterface(param) + if (result.status) { + let data = fromJS(this.state.data).toJS() + let selectedData = fromJS(this.state.selectedData).toJS() + + let _data = result.data[0] || {} + _data.$$uuid = _data[setting.primaryKey] || '' + _data.$$BID = BID || '' + _data.$$BData = BData || '' + _data.$type = 'upt' + _data.$origin = true + + try { + data = data.map(item => { + if (item.$$uuid === _data.$$uuid) { + _data.key = item.key + _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('鏁版嵁鏌ヨ閿欒') + } + + if (line) { + if (line.$type === 'del' && !result.data[0]) { + data = data.filter(m => m.$$uuid === line.$$uuid) + } + MKEmitter.emit('transferData', config.uuid, _data, 'line') + } else { + MKEmitter.emit('resetSelectLine', config.uuid, _data.$$uuid || '', _data) + } + + this.setState({ + data, + selectedData, loading: false }) } else { @@ -359,12 +485,16 @@ }) } - reloadData = (menuId, id) => { + reloadData = (menuId, id, item) => { const { config } = this.state if (config.uuid !== menuId) return - this.reloadtable() + if (!id) { + this.reloadtable() + } else { + this.loadmainLinedata(id, item) + } } resetParentParam = (MenuID, id, data) => { @@ -389,44 +519,42 @@ * @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) + } + } else if (position === 'mainline' || position === 'popclose') { // 鍒锋柊婧愮粍浠舵椂锛岄檮甯﹀埛鏂颁笂绾ц涓庡綋鍓嶇粍浠� + if (supModule && BID) { + MKEmitter.emit('reloadData', supModule, BID) + } else { + this.reloadtable(btn) + } + } else { + this.reloadtable(btn) + } } - 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, BData } = this.state + const { config } = 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 || '' - item.$$BData = BData || '' - item.$Index = index + 1 + '' - return item - }) - } - - this.setState({sync: false, data: _data}) - } else if (config.setting.syncRefresh && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { + if (config.setting.syncRefresh && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { this.setState({pageIndex: 1}, () => { this.reloadtable() }) @@ -458,7 +586,7 @@ } render() { - const { BID, setting, searchlist, actions, config, columns, BData } = this.state + const { BID, setting, searchlist, actions, config, columns, BData, selectedData, lock } = this.state return ( <div className="custom-edit-table" style={config.style}> @@ -471,25 +599,25 @@ setting={setting} actions={actions} BData={BData} + lock={lock} columns={config.columns} - selectedData={[]} + selectedData={selectedData} /> - <div className={'main-table-box ' + (!actions || actions.length === 0 ? 'no-action' : '')}> - <MainTable - BID={BID} - setting={setting} - columns={columns} - MenuID={config.uuid} - data={this.state.data} - submit={config.submit} - fields={config.columns} - total={this.state.total} - lineMarks={config.lineMarks} - loading={this.state.loading} - refreshdata={this.refreshbytable} - statFValue={this.state.statFValue} - /> - </div> + <MainTable + BID={BID} + setting={setting} + columns={columns} + MenuID={config.uuid} + submit={config.submit} + fields={config.columns} + total={this.state.total} + lineMarks={config.lineMarks} + loading={this.state.loading} + refreshdata={this.refreshbytable} + chgSelectData={(selects) => this.setState({selectedData: selects})} + changeLock={(lock) => this.setState({lock: lock})} + statFValue={this.state.statFValue} + /> </div> ) } -- Gitblit v1.8.0