| | |
| | | class EditableTable extends Component { |
| | | static propTpyes = { |
| | | config: PropTypes.object, // 组件配置信息 |
| | | mainSearch: PropTypes.any, // 外层搜索条件 |
| | | } |
| | | |
| | | state = { |
| | |
| | | config: {}, // 页面配置信息,包括按钮、搜索、显示列、标签等 |
| | | actions: null, // 按钮集 |
| | | columns: null, // 显示列 |
| | | arr_field: '', // 查询字段集 |
| | | setting: null, // 页面全局设置:数据源、按钮及显示列固定、主键等 |
| | | data: [], // 列表数据集 |
| | | selectedData: [], // 已选表格数据 |
| | |
| | | pageIndex: 1, // 页码 |
| | | pageSize: 10, // 每页数据条数 |
| | | orderBy: '', // 排序 |
| | | search: '' // 搜索条件数组,使用时需分场景处理 |
| | | search: '', // 搜索条件数组,使用时需分场景处理 |
| | | allSearch: null |
| | | } |
| | | |
| | | /** |
| | |
| | | UNSAFE_componentWillMount () { |
| | | let _config = fromJS(this.props.config).toJS() |
| | | let setting = {..._config.setting, ..._config.wrap} |
| | | setting.tableId = Utils.getuuid() |
| | | |
| | | let BID = '' |
| | | let BData = '' |
| | | |
| | | setting.tableId = Utils.getuuid().substr(-6).toUpperCase() |
| | | |
| | | if (_config.setting.supModule) { |
| | | BData = window.GLOB.CacheData.get(_config.setting.supModule) |
| | |
| | | }) |
| | | |
| | | let _columns = [] |
| | | setting.initId = '' |
| | | let triMap = new Map() |
| | | let initId = '' |
| | | |
| | | setting.hasSubmit = false |
| | | if (setting.commit === 'change' || setting.commit === 'simple') { |
| | | setting.commit = 'change' |
| | | } |
| | | |
| | | let getColumns = (cols) => { |
| | | return cols.filter(item => { |
| | |
| | | } |
| | | |
| | | if (item.editable === 'true') { |
| | | setting.hasSubmit = true |
| | | if (!setting.initId) { |
| | | setting.initId = item.uuid |
| | | setting.hasSubmit = setting.commit !== 'change' |
| | | item.$ctrl = setting.commit === 'change' |
| | | |
| | | if (!initId) { |
| | | initId = item.uuid |
| | | } |
| | | if (item.type === 'text' && (item.editType === 'switch' || item.editType === 'select')) { |
| | | triMap.set(item.uuid, item.editType) |
| | | if (item.enter === '$sub') { |
| | | item.enter = '$noAct' |
| | | } else if (item.enter === '$next') { |
| | | item.enter = '$next_' + initId |
| | | } |
| | | if (item.type === 'text' && item.editType === 'select') { |
| | | |
| | | if (item.linkSubField && item.linkSubField.length === 0) { |
| | | item.linkSubField = null |
| | | } |
| | | |
| | | if (item.type === 'number') { |
| | | |
| | | } else if (item.editType === 'select') { |
| | | item.options = item.options || [] |
| | | item.options = item.options.filter(cell => { |
| | | cell.value = cell.Value |
| | |
| | | |
| | | return !cell.Hide |
| | | }) |
| | | } else if (item.editType === 'popSelect') { |
| | | if (item.pops) { |
| | | item.pops.forEach(cell => { |
| | | cell.linkSubField = item.linkSubField |
| | | this.resetPop(cell) |
| | | cell.tabName = cell.initval.replace(/^tab:/, '') |
| | | }) |
| | | } else { |
| | | this.resetPop(item) |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | _columns = getColumns(_config.cols) |
| | | |
| | | if (triMap.size > 0) { |
| | | let setColumns = (cols) => { |
| | | return cols.map(item => { |
| | | if (item.type === 'colspan') { |
| | | item.subcols = setColumns(item.subcols) |
| | | } else if (item.editable === 'true' && triMap.has(item.enter)) { |
| | | item.triType = 'click' |
| | | } |
| | | |
| | | return item |
| | | }) |
| | | } |
| | | |
| | | _columns = setColumns(_columns) |
| | | |
| | | if (setting.initId && triMap.has(setting.initId)) { |
| | | setting.triType = 'click' |
| | | } |
| | | } |
| | | setting.initId = initId |
| | | |
| | | if (!_config.lineMarks || _config.lineMarks.length === 0) { |
| | | _config.lineMarks = null |
| | | } |
| | | |
| | | let allSearch = null |
| | | if (_config.colsCtrls && _config.colsCtrls.length > 0) { |
| | | allSearch = [{key: 'BID', value: BID || ''}] |
| | | allSearch.push(..._config.$searches) |
| | | if (_config.setting.useMSearch) { |
| | | let mainSearch = window.GLOB.SearchBox.get(_config.$searchId) || [] |
| | | allSearch.push(...mainSearch) |
| | | } |
| | | } else { |
| | | _config.colsCtrls = null |
| | | } |
| | | |
| | | this.setState({ |
| | |
| | | setting: setting, |
| | | actions: _config.action, |
| | | columns: _columns, |
| | | arr_field: _config.columns.map(col => col.field).join(','), |
| | | search: Utils.initMainSearch(_config.search) // 搜索条件初始化(含有时间格式,需要转化) |
| | | search: _config.$searches, |
| | | allSearch |
| | | }, () => { |
| | | if (_config.setting.onload === 'true') { |
| | | setTimeout(() => { |
| | |
| | | }) |
| | | } |
| | | |
| | | resetPop = (config) => { |
| | | let arrfield = config.columns.map(f => f.field) |
| | | |
| | | if (config.linkSubField && config.linkSubField.length > 0) { |
| | | config.linkSubField.forEach(n => { |
| | | if (!arrfield.includes(n)) { |
| | | arrfield.push(n) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | if (sessionStorage.getItem('dataM') === 'true') { // 数据权限 |
| | | config.dataSource = config.dataSource.replace(/\$@/ig, '/*').replace(/@\$/ig, '*/').replace(/@datam@/ig, '\'Y\'') |
| | | } else { |
| | | config.dataSource = config.dataSource.replace(/@\$|\$@/ig, '').replace(/@datam@/ig, '\'\'') |
| | | } |
| | | |
| | | config.dataSource = config.dataSource.replace(/@LoginUID@/ig, `'${sessionStorage.getItem('LoginUID') || ''}'`) |
| | | config.dataSource = config.dataSource.replace(/@SessionUid@/ig, `'${localStorage.getItem('SessionUid') || ''}'`) |
| | | config.dataSource = config.dataSource.replace(/@UserID@/ig, `'${sessionStorage.getItem('UserID') || ''}'`) |
| | | config.dataSource = config.dataSource.replace(/@Appkey@/ig, `'${window.GLOB.appkey || ''}'`) |
| | | |
| | | if (/\s/.test(config.dataSource)) { // 拼接别名 |
| | | config.dataSource = '(' + config.dataSource + ') tb' |
| | | } |
| | | |
| | | let labels = {} |
| | | config.cols = [] |
| | | config.columns.forEach(col => { |
| | | labels[col.field] = col.label |
| | | |
| | | if (col.Hide === 'true') return |
| | | |
| | | config.cols.push({ |
| | | dataIndex: col.field, |
| | | title: col.label, |
| | | sorter: col.IsSort === 'true', |
| | | width: col.Width || 120 |
| | | }) |
| | | }) |
| | | |
| | | let placeholder = '' |
| | | if (!config.searchKey) { |
| | | config.onload = 'true' |
| | | } else { |
| | | placeholder = [] |
| | | config.searchKey.split(',').forEach(key => { |
| | | if (!labels[key]) { |
| | | placeholder = '' |
| | | } else if (placeholder) { |
| | | placeholder.push(labels[key]) |
| | | } |
| | | }) |
| | | |
| | | placeholder = placeholder ? placeholder.join('、') : '' |
| | | } |
| | | |
| | | config.placeholder = placeholder |
| | | config.arr_field = arrfield.join(',') |
| | | } |
| | | |
| | | /** |
| | | * @description 主表数据加载 |
| | | * @param { Boolean } reset 表格是否重置 |
| | | * @param { String } repage 表格是否重置页码 |
| | | */ |
| | | async loadmaindata (reset, repage) { |
| | | const { mainSearch } = this.props |
| | | const { setting, config, arr_field, search, orderBy, BID, pageIndex, pageSize, BData } = this.state |
| | | const { setting, config, search, orderBy, BID, pageIndex, pageSize, BData } = this.state |
| | | |
| | | if (setting.supModule && !BID) { // BID 不存在时,不做查询 |
| | | this.setState({ |
| | |
| | | } |
| | | |
| | | let searches = fromJS(search).toJS() |
| | | if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 主表搜索条件 |
| | | let keys = searches.map(item => item.key.toLowerCase()) |
| | | if (config.setting.useMSearch) { // 主表搜索条件 |
| | | let mainSearch = window.GLOB.SearchBox.get(config.$searchId) || [] |
| | | let keys = config.$s_keys || [] |
| | | mainSearch.forEach(item => { |
| | | if (!keys.includes(item.key.toLowerCase())) { |
| | | searches.push(item) |
| | | } |
| | | if (keys.includes(item.key.toLowerCase())) return |
| | | |
| | | searches.push(item) |
| | | }) |
| | | } |
| | | |
| | | let requireFields = searches.filter(item => item.required && item.value === '') |
| | | if (requireFields.length > 0) { |
| | | if (config.$s_req && searches.filter(item => item.required && item.value === '').length > 0) { |
| | | return |
| | | } |
| | | |
| | |
| | | }) |
| | | |
| | | let _orderBy = orderBy || setting.order |
| | | let param = UtilsDM.getQueryDataParams(setting, arr_field, searches, _orderBy, pageIndex, pageSize, BID) |
| | | let param = UtilsDM.getQueryDataParams(setting, searches, _orderBy, pageIndex, pageSize, BID) |
| | | |
| | | let result = await Api.genericInterface(param) |
| | | if (result.status) { |
| | |
| | | return item |
| | | }) |
| | | |
| | | let total = result.total || 0 |
| | | if (config.setting.custompage && data.length) { |
| | | total = data[data.length - 1].mk_total || 0 |
| | | } |
| | | |
| | | let allSearch = null |
| | | if (config.colsCtrls) { |
| | | allSearch = [{key: 'BID', value: BID || ''}] |
| | | allSearch.push(...searches) |
| | | } |
| | | |
| | | this.setState({ |
| | | data: data, |
| | | selectedData: [], |
| | | total: result.total, |
| | | allSearch: allSearch, |
| | | total: total, |
| | | loading: false |
| | | }) |
| | | |
| | | MKEmitter.emit('transferData', config.uuid, data) |
| | | MKEmitter.emit('transferData' + setting.tableId, data) |
| | | |
| | | if (result.message) { |
| | | if (result.ErrCode === 'Y') { |
| | | Modal.success({ |
| | | title: result.message |
| | | }) |
| | | } else if (result.ErrCode === 'S') { |
| | | notification.success({ |
| | | top: 92, |
| | | message: result.message, |
| | | duration: 2 |
| | | }) |
| | | } |
| | | } |
| | | } else { |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | |
| | | if (!result.message) return |
| | | if (result.ErrCode === 'N') { |
| | | Modal.error({ |
| | | title: result.message, |
| | | }) |
| | | } else { |
| | | } else if (result.ErrCode !== '-2') { |
| | | notification.error({ |
| | | top: 92, |
| | | message: result.message, |
| | |
| | | * @description 获取单行数据 |
| | | */ |
| | | async loadmainLinedata (id) { |
| | | const { mainSearch } = this.props |
| | | const { setting, config, arr_field, search, orderBy, BID, pageIndex, pageSize, BData } = this.state |
| | | const { setting, config, search, orderBy, BID, pageIndex, pageSize, BData } = this.state |
| | | |
| | | if (config.forbidLine) { |
| | | this.reloadtable() |
| | | return |
| | | } |
| | | |
| | | let searches = fromJS(search).toJS() |
| | | if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 主表搜索条件 |
| | | let keys = searches.map(item => item.key.toLowerCase()) |
| | | if (config.setting.useMSearch) { // 主表搜索条件 |
| | | let mainSearch = window.GLOB.SearchBox.get(config.$searchId) || [] |
| | | let keys = config.$s_keys || [] |
| | | mainSearch.forEach(item => { |
| | | if (!keys.includes(item.key.toLowerCase())) { |
| | | searches.push(item) |
| | | } |
| | | if (keys.includes(item.key.toLowerCase())) return |
| | | |
| | | searches.push(item) |
| | | }) |
| | | } |
| | | |
| | |
| | | }) |
| | | |
| | | let _orderBy = orderBy || setting.order |
| | | let param = UtilsDM.getQueryDataParams(setting, arr_field, searches, _orderBy, pageIndex, pageSize, BID, id) |
| | | let param = UtilsDM.getQueryDataParams(setting, searches, _orderBy, pageIndex, pageSize, BID, id) |
| | | |
| | | let result = await Api.genericInterface(param) |
| | | if (result.status) { |
| | |
| | | return item |
| | | }) |
| | | |
| | | MKEmitter.emit('transferData', config.uuid, _data, 'line') |
| | | MKEmitter.emit('transferData' + setting.tableId, _data, 'line') |
| | | MKEmitter.emit('resetSelectLine', config.uuid, _data.$$uuid, _data) |
| | | |
| | | this.setState({ |
| | |
| | | * @description 导出Excel时,获取页面搜索排序等参数 |
| | | */ |
| | | queryModuleParam = (menuId, callback) => { |
| | | const { mainSearch } = this.props |
| | | const { arr_field, config, orderBy, search, setting} = this.state |
| | | const { 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()) |
| | | if (config.setting.useMSearch) { // 主表搜索条件 |
| | | let mainSearch = window.GLOB.SearchBox.get(config.$searchId) || [] |
| | | let keys = config.$s_keys || [] |
| | | mainSearch.forEach(item => { |
| | | if (!keys.includes(item.key.toLowerCase())) { |
| | | searches.push(item) |
| | | } |
| | | if (keys.includes(item.key.toLowerCase())) return |
| | | |
| | | searches.push(item) |
| | | }) |
| | | } |
| | | |
| | | callback({ |
| | | arr_field: arr_field, |
| | | orderBy: orderBy || setting.order, |
| | | search: searches, |
| | | menuName: config.name |
| | | search: searches |
| | | }) |
| | | } |
| | | |
| | |
| | | } else { |
| | | this.reloadtable(btn) |
| | | } |
| | | |
| | | if (position === 'popclose') { // 执行启动弹窗的按钮所选择的刷新项 |
| | | btn.$tabId && MKEmitter.emit('refreshPopButton', btn.$tabId) |
| | | } |
| | | } |
| | | |
| | | refreshLineData = (menuId, btn, uuid, count) => { |
| | |
| | | |
| | | if (config.uuid !== menuId) return |
| | | |
| | | let _data = fromJS(this.state.data).toJS().forEach(item => { |
| | | let _data = fromJS(this.state.data).toJS().map(item => { |
| | | if (item.$$uuid === uuid) { |
| | | item[btn.field] = count |
| | | } |
| | | return item |
| | | }) |
| | | let _selectedData = fromJS(this.state.selectedData).toJS().forEach(item => { |
| | | let _selectedData = fromJS(this.state.selectedData).toJS().map(item => { |
| | | if (item.$$uuid === uuid) { |
| | | item[btn.field] = count |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | this.setState({ |
| | |
| | | }) |
| | | } |
| | | |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | searchRefresh = (searchId) => { |
| | | const { config } = this.state |
| | | |
| | | if (config.setting.useMSearch && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | this.setState({pageIndex: 1}, () => { |
| | | this.reloadtable() |
| | | }) |
| | | } |
| | | if (config.$searchId !== searchId) return |
| | | |
| | | this.setState({pageIndex: 1}, () => { |
| | | this.reloadtable() |
| | | }) |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | |
| | | } |
| | | |
| | | componentDidMount () { |
| | | const { config } = this.state |
| | | |
| | | MKEmitter.addListener('reloadData', this.reloadData) |
| | | MKEmitter.addListener('resetSelectLine', this.resetParentParam) |
| | | MKEmitter.addListener('queryModuleParam', this.queryModuleParam) |
| | | MKEmitter.addListener('refreshLineData', this.refreshLineData) |
| | | MKEmitter.addListener('refreshByButtonResult', this.refreshByButtonResult) |
| | | |
| | | if (config.setting.useMSearch) { |
| | | MKEmitter.addListener('searchRefresh', this.searchRefresh) |
| | | } |
| | | } |
| | | |
| | | /** |
| | |
| | | return |
| | | } |
| | | MKEmitter.removeListener('reloadData', this.reloadData) |
| | | MKEmitter.removeListener('searchRefresh', this.searchRefresh) |
| | | MKEmitter.removeListener('refreshLineData', this.refreshLineData) |
| | | MKEmitter.removeListener('resetSelectLine', this.resetParentParam) |
| | | MKEmitter.removeListener('queryModuleParam', this.queryModuleParam) |
| | | MKEmitter.removeListener('refreshLineData', this.refreshLineData) |
| | | MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) |
| | | } |
| | | |
| | | render() { |
| | | const { BID, setting, actions, config, columns, BData, data, selectedData } = this.state |
| | | const { BID, setting, actions, config, columns, BData, data, selectedData, allSearch } = this.state |
| | | |
| | | let style = {...config.style} |
| | | if (config.wrap.empty === 'hidden' && data.length === 0) { |
| | |
| | | setting={setting} |
| | | columns={columns} |
| | | MenuID={config.uuid} |
| | | allSearch={allSearch} |
| | | submit={config.submit} |
| | | fields={config.columns} |
| | | total={this.state.total} |
| | | colsCtrls={config.colsCtrls} |
| | | lineMarks={config.lineMarks} |
| | | loading={this.state.loading} |
| | | refreshdata={this.refreshbytable} |