| | |
| | | import PropTypes from 'prop-types' |
| | | import {connect} from 'react-redux' |
| | | import { is, fromJS } from 'immutable' |
| | | import { BackTop, notification, Spin, Tabs, Icon, Modal, Button} from 'antd' |
| | | import { BackTop, notification, Spin, Tabs, Icon} from 'antd' |
| | | import moment from 'moment' |
| | | |
| | | import Api from '@/api' |
| | |
| | | import Utils from '@/utils/utils.js' |
| | | |
| | | import FormGroup from './formgroup' |
| | | import MainAction from '@/tabviews/tableshare/actionList' |
| | | import FormAction from './actionList' |
| | | import SubTable from '@/tabviews/subtable' |
| | | import NotFount from '@/components/404' |
| | | import asyncComponent from '@/utils/asyncLoadComponent' |
| | | import {refreshTabView} from '@/store/action' |
| | | import './index.scss' |
| | | |
| | | const SubTabTable = asyncComponent(() => import('@/tabviews/subtabtable')) |
| | | const { TabPane } = Tabs |
| | | |
| | | class NormalTable extends Component { |
| | |
| | | viewlost: false, // 页面丢失:1、未获取到配置-页面丢失;2、页面未启用 |
| | | lostmsg: '', // 页面丢失时的提示信息 |
| | | config: {}, // 页面配置信息,包括按钮、表单、标签等 |
| | | groups: null, // 表单组 |
| | | actions: null, // 按钮集 |
| | | arr_field: '', // 使用 sPC_Get_TableData 时的查询字段集 |
| | | setting: null, // 页面全局设置:数据源、按钮及显示列固定、主键等 |
| | | data: null, // 列表数据集 |
| | | loading: false, // 列表数据加载中 |
| | | pageIndex: 1, // 页码 |
| | | pageSize: 10, // 每页数据条数 |
| | | orderColumn: '', // 排序字段 |
| | | orderType: 'asc', // 排序方式 |
| | | search: '', // 搜索条件数组,使用时需分场景处理 |
| | | configMap: {}, // 页面配置信息:下拉、按钮等 |
| | | BIDs: {}, // 上级表id |
| | | setsingle: false, // 主表单选多选切换 |
| | | pickup: false, // 主表数据隐藏显示切换 |
| | | isLinkMain: false, // 是否存在与主表关联的子表 |
| | | popAction: false, // 弹框页面,按钮信息 |
| | | popData: false, // 弹框页面,所选的表格数据 |
| | | visible: false // 弹框显示隐藏控制 |
| | | } |
| | |
| | | }) |
| | | _arrField = _arrField.join(',') |
| | | } |
| | | console.log(config) |
| | | |
| | | // 权限过滤 |
| | | config.action = config.action.filter(item => permAction[item.uuid]) |
| | | // config.tabgroups.forEach(group => { |
| | |
| | | } |
| | | }) |
| | | |
| | | let _data = null |
| | | let _isCustomData = false |
| | | |
| | | if (this.props.param && this.props.param.data) { |
| | | _data = this.props.param.data |
| | | } |
| | | |
| | | if ((config.setting.interType === 'inner' && config.setting.innerFunc) || (config.setting.interType === 'outer' && config.setting.interface)) { |
| | | _isCustomData = true |
| | | _data = null |
| | | } |
| | | |
| | | |
| | | this.setState({ |
| | | loadingview: false, |
| | | config: config, |
| | | setting: config.setting, |
| | | actions: config.action, |
| | | isLinkMain: _isLinkMain, |
| | | arr_field: _arrField, |
| | | search: Utils.initMainSearch(config.search), // 搜索条件初始化(含有时间格式,需要转化) |
| | | loading: true |
| | | data: _data, |
| | | BIDs: { |
| | | mainTable: (!_isCustomData && _data && _data[0] && _data[0][config.setting.primaryKey]) || '' |
| | | } |
| | | }, () => { |
| | | this.improveSearch() |
| | | this.improveSelectOption(config.groups) |
| | | |
| | | if (config.setting.onload !== 'false') { |
| | | if (_isCustomData) { |
| | | this.loadmaindata() |
| | | } |
| | | }) |
| | |
| | | } |
| | | |
| | | /** |
| | | * @description 搜索条件下拉选项预加载 |
| | | * @description 表单下拉选项加载 |
| | | */ |
| | | improveSearch = () => { |
| | | let searchlist = JSON.parse(JSON.stringify(this.state.searchlist)) |
| | | improveSelectOption = (groups) => { |
| | | let deffers = [] |
| | | searchlist.forEach(item => { |
| | | if (item.type !== 'multiselect' && item.type !== 'select' && item.type !== 'link') return |
| | | groups.forEach(group => { |
| | | group.sublist = group.sublist.map(item => { |
| | | if (item.type !== 'multiselect' && item.type !== 'select' && item.type !== 'link') return item |
| | | |
| | | if (item.setAll === 'true') { |
| | | item.options.unshift({ |
| | | key: Utils.getuuid(), |
| | |
| | | if (item.resourceType === '1' && item.dataSource) { |
| | | let _option = Utils.getSelectQueryOptions(item) |
| | | let _sql = Utils.formatOptions(_option.sql) |
| | | let isSSO = item.database === 'sso' |
| | | |
| | | let param = { |
| | | func: 'sPC_Get_SelectedList', |
| | |
| | | param.secretkey = Utils.encrypt(param.LText, param.timestamp) |
| | | |
| | | let defer = new Promise(resolve => { |
| | | Api.getSystemCacheConfig(param).then(res => { |
| | | Api.getSystemCacheConfig(param, isSSO).then(res => { |
| | | res.search = item |
| | | resolve(res) |
| | | }) |
| | |
| | | duration: 10 |
| | | }) |
| | | } |
| | | |
| | | return item |
| | | }) |
| | | }) |
| | | |
| | | if (deffers.length === 0) { |
| | | this.setState({searchlist: JSON.parse(JSON.stringify(searchlist))}) |
| | | this.setState({ |
| | | loadingview: false, |
| | | groups: groups |
| | | }) |
| | | return |
| | | } |
| | | |
| | | Promise.all(deffers).then(result => { |
| | | let _result = {} |
| | | result.forEach(res => { |
| | | if (res.status) { |
| | | searchlist = searchlist.map(item => { |
| | | if (item.uuid === res.search.uuid) { |
| | | res.data.forEach(cell => { |
| | | let _options = res.data.map(cell => { |
| | | let _item = { |
| | | key: Utils.getuuid(), |
| | | Value: cell[res.search.valueField], |
| | |
| | | |
| | | if (res.search.type === 'link') { |
| | | _item.parentId = cell[res.search.linkField] |
| | | } else if (res.search.type === 'select' && res.search.linkSubField && res.search.linkSubField.length > 0) { |
| | | res.search.linkSubField.forEach(_field => { |
| | | _item[_field] = (cell[_field] || cell[_field] === 0) ? cell[_field] : '' |
| | | }) |
| | | } |
| | | |
| | | item.options.push(_item) |
| | | return _item |
| | | }) |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | _result[res.search.uuid] = _options |
| | | } else { |
| | | notification.warning({ |
| | | top: 92, |
| | |
| | | } |
| | | }) |
| | | |
| | | this.setState({searchlist}) |
| | | groups.forEach(group => { |
| | | group.sublist = group.sublist.map(item => { |
| | | if (item.type === 'select' || item.type === 'link' || item.type === 'multiselect') { |
| | | if (_result[item.uuid]) { |
| | | item.options = [...item.options, ..._result[item.uuid]] |
| | | } |
| | | item.oriOptions = JSON.parse(JSON.stringify(item.options)) |
| | | } |
| | | |
| | | return item |
| | | }) |
| | | }) |
| | | |
| | | this.setState({ |
| | | loadingview: false, |
| | | groups: groups |
| | | }) |
| | | }) |
| | | } |
| | | |
| | |
| | | * @description 主表数据加载 |
| | | */ |
| | | async loadmaindata () { |
| | | const { setting, BIDs } = this.state |
| | | let param = '' |
| | | |
| | | if (setting.interType !== 'inner' || (setting.interType === 'inner' && setting.innerFunc)) { |
| | | param = this.getCustomParam() |
| | | } else { |
| | | param = this.getDefaultParam() |
| | | } |
| | | |
| | | this.setState({ |
| | | pickup: false |
| | | }) |
| | | |
| | | this.handleTableId('mainTable', '') |
| | | const { setting } = this.state |
| | | let param = this.getCustomParam() |
| | | |
| | | let result = await Api.genericInterface(param) |
| | | if (result.status) { |
| | | this.setState({ |
| | | data: result.data.map((item, index) => { |
| | | item.key = index |
| | | return item |
| | | }), |
| | | loading: false, |
| | | data: result.data, |
| | | BIDs: { |
| | | ...BIDs, |
| | | mainTable: '' |
| | | mainTable: (result.data[0] && result.data[0][setting.primaryKey]) || '' |
| | | } |
| | | }) |
| | | } else { |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | notification.error({ |
| | | top: 92, |
| | | message: result.message, |
| | |
| | | * @description 获取用户自定义存储过程传参 |
| | | */ |
| | | getCustomParam = () => { |
| | | const { pageIndex, pageSize, orderColumn, orderType, search, setting } = this.state |
| | | const { setting } = this.state |
| | | |
| | | let _search = Utils.formatCustomMainSearch(search) |
| | | |
| | | let param = { |
| | | PageIndex: pageIndex, |
| | | PageSize: pageSize, |
| | | OrderCol: orderColumn, |
| | | OrderType: orderType, |
| | | ..._search |
| | | } |
| | | let param = {} |
| | | |
| | | if (setting.interType === 'inner') { |
| | | param.func = setting.innerFunc |
| | | } else { |
| | | if (setting.sysInterface === 'true') { |
| | | param.rduri = window.GLOB.mainSystemApi || window.GLOB.subSystemApi |
| | | } else { |
| | | param.rduri = setting.interface |
| | | } |
| | | |
| | | param.appkey = window.GLOB.appkey || '' // 调用外部接口增加appkey |
| | | |
| | | if (setting.outerFunc) { |
| | | param.func = setting.outerFunc |
| | | } |
| | |
| | | } |
| | | |
| | | /** |
| | | * @description 获取系统存储过程 sPC_Get_TableData 的参数 |
| | | */ |
| | | getDefaultParam = () => { |
| | | const { arr_field, pageIndex, pageSize, orderColumn, orderType, search, setting } = this.state |
| | | |
| | | let _search = Utils.joinMainSearchkey(search) |
| | | |
| | | _search = _search ? 'where ' + _search : '' |
| | | |
| | | let param = { |
| | | func: 'sPC_Get_TableData', |
| | | obj_name: 'data', |
| | | arr_field: arr_field |
| | | } |
| | | |
| | | let orderBy = orderColumn ? (orderColumn + ' ' + orderType) : setting.order |
| | | let _dataresource = setting.dataresource |
| | | |
| | | if (/\s/.test(_dataresource)) { |
| | | _dataresource = '(' + _dataresource + ') tb' |
| | | } |
| | | |
| | | let LText = `select top ${pageSize} ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${orderBy}) as rows from ${_dataresource} ${_search}) tmptable where rows > ${pageSize * (pageIndex - 1)} order by tmptable.rows` |
| | | |
| | | param.LText = Utils.formatOptions(LText) |
| | | param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000' |
| | | param.secretkey = Utils.encrypt(param.LText, param.timestamp) |
| | | |
| | | return param |
| | | } |
| | | |
| | | /** |
| | | * @description 搜索条件改变时,重置表格数据 |
| | | * 含有初始不加载的页面,修改设置 |
| | | */ |
| | | refreshbysearch = (searches) => { |
| | | const { setting } = this.state |
| | | |
| | | if (setting.onload === 'false') { |
| | | this.setState({ |
| | | loading: true, |
| | | pageIndex: 1, |
| | | search: searches, |
| | | setting: {...setting, onload: 'true'} |
| | | }, () => { |
| | | this.loadmaindata() |
| | | }) |
| | | } else { |
| | | this.refs.mainTable.resetTable() |
| | | |
| | | this.setState({ |
| | | loading: true, |
| | | pageIndex: 1, |
| | | search: searches |
| | | }, () => { |
| | | this.loadmaindata() |
| | | }) |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * @description 表格条件改变时重置数据(分页或排序) |
| | | */ |
| | | refreshbytable = (pagination, filters, sorter) => { |
| | | if (sorter.order) { |
| | | let _chg = { |
| | | ascend: 'asc', |
| | | descend: 'desc' |
| | | } |
| | | sorter.order = _chg[sorter.order] |
| | | } |
| | | |
| | | this.setState({ |
| | | loading: true, |
| | | pageIndex: pagination.current, |
| | | pageSize: pagination.pageSize, |
| | | orderColumn: sorter.field || this.state.setting.orderColumn, |
| | | orderType: sorter.order || 'asc' |
| | | }, () => { |
| | | this.loadmaindata() |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 表格刷新 |
| | | */ |
| | | reloadtable = () => { |
| | | this.refs.mainTable.resetTable() |
| | | this.setState({ |
| | | loading: true, |
| | | pageIndex: 1 |
| | | }, () => { |
| | | this.loadmaindata() |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 页面刷新,重新获取配置 |
| | | */ |
| | | reloadview = () => { |
| | | this.setState({ |
| | | loadingview: true, |
| | | viewlost: false, |
| | | lostmsg: '', |
| | | config: {}, |
| | | searchlist: null, |
| | | actions: null, |
| | | arr_field: '', |
| | | setting: null, |
| | | data: null, |
| | | loading: false, |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | orderColumn: '', |
| | | orderType: 'asc', |
| | | search: '', |
| | | configMap: {}, |
| | | BIDs: {}, |
| | | setsingle: false, |
| | | pickup: false, |
| | | isLinkMain: false |
| | | }, () => { |
| | | this.loadconfig() |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 按钮操作完成后(成功或失败),页面刷新,重置页码及选择项 |
| | | */ |
| | | refreshbyaction = (btn, type) => { |
| | | if (btn.execSuccess === 'grid' && type === 'success') { |
| | | this.reloadtable() |
| | | |
| | | } else if (btn.execError === 'grid' && type === 'error') { |
| | | this.reloadview() |
| | | |
| | | } else if (btn.execSuccess === 'view' && type === 'success') { |
| | | this.reloadtable() |
| | | |
| | | } else if (btn.execError === 'view' && type === 'error') { |
| | | this.reloadview() |
| | | } else if (btn.popClose === 'view' && type === 'pop') { |
| | | this.reloadview() |
| | | } else if (btn.popClose === 'grid' && type === 'pop') { |
| | | this.reloadtable() |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * @description 子表操作完成后刷新主表 |
| | | */ |
| | | handleMainTable = () => { |
| | | this.reloadtable() |
| | | } |
| | | |
| | | /** |
| | | * @description 获取表格选择项 |
| | | */ |
| | | gettableselected = () => { |
| | | let data = [] |
| | | this.refs.mainTable.state.selectedRowKeys.forEach(item => { |
| | | data.push(this.refs.mainTable.props.data[item]) |
| | | }) |
| | | return data |
| | | } |
| | | |
| | | /** |
| | | * @description 表格中,按钮触发事件传递 |
| | | */ |
| | | buttonTrigger = (btn, record) => { |
| | | this.refs.mainButton.actionTrigger(btn, record) |
| | | } |
| | | |
| | | /** |
| | |
| | | [type]: id |
| | | } |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 表格单选多选切换 |
| | | */ |
| | | checkChange = () => { |
| | | const { setsingle, BIDs } = this.state |
| | | |
| | | let _BIDs = JSON.parse(JSON.stringify(BIDs)) |
| | | _BIDs.mainTable = '' |
| | | |
| | | this.setState({ |
| | | setsingle: !setsingle, |
| | | pickup: false, |
| | | BIDs: _BIDs |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 数据展开合并切换 |
| | | */ |
| | | pickupChange = () => { |
| | | const { pickup } = this.state |
| | | this.setState({ |
| | | pickup: !pickup |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 触发按钮弹窗(标签页) |
| | | */ |
| | | triggerPopview = (btn, data) => { |
| | | this.setState({ |
| | | popAction: btn, |
| | | popData: data[0] ? data[0] : null, |
| | | visible: true |
| | | }) |
| | | } |
| | | |
| | | popclose = () => { |
| | | this.setState({ |
| | | visible: false |
| | | }) |
| | | this.refreshbyaction(this.state.popAction, 'pop') |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { setting, actions, loadingview, viewlost, isLinkMain, config } = this.state |
| | | const { setting, actions, loadingview, viewlost, isLinkMain, config, groups, data } = this.state |
| | | |
| | | return ( |
| | | <div className={'commontable ' + (isLinkMain ? 'pick-control' : '')} id={'commontable' + this.props.MenuID}> |
| | | <div className={'formtab ' + (isLinkMain ? 'pick-control' : '')} id={'formtab' + this.props.MenuID}> |
| | | {loadingview && <Spin size="large" />} |
| | | {config ? |
| | | {groups && (groups.length > 1 || groups[0].sublist.length > 0) ? |
| | | <FormGroup |
| | | dict={this.state.dict} |
| | | groups={config.groups} |
| | | data={data} |
| | | groups={groups} |
| | | setting={setting} |
| | | wrappedComponentRef={(inst) => this.formGroupRef = inst} |
| | | /> : null |
| | | } |
| | | {actions && setting.onload !== 'false' ? |
| | | <MainAction |
| | | ref="mainButton" |
| | | BID="" |
| | | type="main" |
| | | {actions ? |
| | | <FormAction |
| | | setting={setting} |
| | | actions={actions} |
| | | dict={this.state.dict} |
| | | MenuID={this.props.MenuID} |
| | | logcolumns={[]} |
| | | refreshdata={this.refreshbyaction} |
| | | triggerPopview={this.triggerPopview} |
| | | gettableselected={this.gettableselected} |
| | | /> : null |
| | | } |
| | | {setting && setting.onload !== 'false' && |
| | |
| | | ) |
| | | }) |
| | | } |
| | | <Modal |
| | | className="popview-modal" |
| | | title={this.state.popAction.label} |
| | | width={'80vw'} |
| | | maskClosable={false} |
| | | visible={this.state.visible} |
| | | onCancel={this.popclose} |
| | | footer={[ |
| | | <Button key="cancel" onClick={this.popclose}>{this.state.dict['main.close']}</Button> |
| | | ]} |
| | | destroyOnClose |
| | | > |
| | | {<SubTabTable SupMenuID={this.props.MenuID} MenuID={this.state.popAction.linkTab} BID={''} ID={this.state.popData ? this.state.popData[setting.primaryKey] : ''} />} |
| | | </Modal> |
| | | <BackTop> |
| | | <div className="ant-back-top"> |
| | | <div className="ant-back-top-content"> |