| | |
| | | import PropTypes from 'prop-types' |
| | | import {connect} from 'react-redux' |
| | | import { is, fromJS } from 'immutable' |
| | | import { notification, Spin, Switch, Row, Col, Icon, Tabs} from 'antd' |
| | | import { notification, Spin, Switch, Row, Col, Tabs} from 'antd' |
| | | |
| | | import Api from '@/api' |
| | | import zhCN from '@/locales/zh-CN/main.js' |
| | |
| | | import { updateSubTable } from '@/utils/utils-update.js' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncSpinComponent from '@/utils/asyncSpinComponent' |
| | | import MkIcon from '@/components/mk-icon' |
| | | import NotFount from '@/components/404' |
| | | import MKEmitter from '@/utils/events.js' |
| | | |
| | |
| | | SupMenuID: PropTypes.string, // 上级菜单Id |
| | | mainSearch: PropTypes.any, // 主表搜索条件 |
| | | ContainerId: PropTypes.any, // 三级菜单Container(html) ID |
| | | handleTableId: PropTypes.func, // 控制表格数据切换时,更新在主表中的id |
| | | } |
| | | |
| | | state = { |
| | |
| | | statFValue: [], // 合计值 |
| | | absFields: [], // 绝对值字段 |
| | | loadCustomApi: true, // 加载外部资源 |
| | | hasReqFields: false |
| | | hasReqFields: false, |
| | | BID: '', |
| | | BData: '' |
| | | } |
| | | |
| | | /** |
| | | * @description 上级菜单id变化时,刷新数据 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | const { config, setting } = this.state |
| | | const { setting } = this.state |
| | | |
| | | if (config && setting && this.props.Tab.supMenu && !is(fromJS(this.props.BID), fromJS(nextProps.BID))) { |
| | | MKEmitter.emit('resetTable', this.props.MenuID + this.props.Tab.uuid) // 列表重置 |
| | | this.setState({ |
| | | pageIndex: 1 |
| | | }, () => { |
| | | this.loadData() |
| | | }) |
| | | } else if (setting && !this.props.Tab.supMenu && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | if (setting && !this.props.Tab.supMenu && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | this.setState({}, () => { |
| | | this.loadData() |
| | | }) |
| | |
| | | * @description 获取页面配置信息 |
| | | */ |
| | | async loadconfig () { |
| | | const { permAction, permMenus, Tab, BID } = this.props |
| | | const { permAction, permMenus, Tab } = this.props |
| | | |
| | | let param = { |
| | | func: 'sPC_Get_LongParam', |
| | |
| | | }) |
| | | } |
| | | |
| | | if (config.setting.selected === 'init' && config.setting.onload === 'false') { |
| | | if (config.setting.selected !== 'init' && config.setting.selected !== 'always') { |
| | | config.setting.selected = 'false' |
| | | } else if (config.setting.selected === 'init' && config.setting.onload === 'false') { |
| | | config.setting.selected = 'false' |
| | | } |
| | | |
| | | if (config.setting.controlField) { |
| | | if (config.setting.controlVal) { |
| | | config.setting.controlVal = config.setting.controlVal.split(',') |
| | | } else { |
| | | config.setting.controlVal = [''] |
| | | } |
| | | } |
| | | |
| | | this.setState({ |
| | | pageSize: config.setting.pageSize || 10, |
| | | BID: this.props.BID || '', |
| | | BData: this.props.BData || '', |
| | | loadingview: false, |
| | | chartId, |
| | | config, |
| | |
| | | search: Utils.initMainSearch(config.search), |
| | | hasReqFields |
| | | }, () => { |
| | | if (config.setting.onload !== 'false' && (!Tab.supMenu || BID || Tab.isTreeNode)) { // 初始化可加载 |
| | | if (config.setting.onload !== 'false' && (!Tab.supMenu || this.props.BID || Tab.isTreeNode)) { // 初始化可加载 |
| | | this.loadData() |
| | | } |
| | | }) |
| | |
| | | } |
| | | |
| | | loadData = () => { |
| | | const { mainSearch, BID } = this.props |
| | | const { setting, search, loadCustomApi, hasReqFields } = this.state |
| | | const { mainSearch } = this.props |
| | | const { setting, BID, search, loadCustomApi, hasReqFields } = this.state |
| | | |
| | | let searches = fromJS(search).toJS() |
| | | if (mainSearch && mainSearch.length > 0) { // 主表搜索条件 |
| | |
| | | return |
| | | } |
| | | } |
| | | |
| | | |
| | | if (this.props.Tab.supMenu && !BID) { // 主表ID不存在时,不查询子表 |
| | | this.setState({ |
| | | data: [], |
| | |
| | | statFValue: [], |
| | | total: 0 |
| | | }) |
| | | this.handleTableId() |
| | | MKEmitter.emit('changeTableLine', this.props.ContainerId, this.props.Tab.uuid, '', '') |
| | | return |
| | | } else if (window.GLOB.systemType === 'production' && setting.interType === 'custom' && !setting.proInterface) { |
| | | notification.warning({ |
| | |
| | | this.setState({ |
| | | selectedData: [] |
| | | }) |
| | | this.handleTableId() |
| | | MKEmitter.emit('changeTableLine', this.props.ContainerId, this.props.Tab.uuid, '', '') |
| | | |
| | | if (setting.interType === 'custom' && loadCustomApi) { |
| | | if (setting.execTime === 'once') { |
| | |
| | | } |
| | | |
| | | loadOutResource = (searches) => { |
| | | const { BID } = this.props |
| | | const { setting } = this.state |
| | | const { setting, BID } = this.state |
| | | |
| | | let param = UtilsDM.getPrevQueryParams(setting, searches, BID, this.props.menuType) |
| | | |
| | |
| | | } |
| | | |
| | | customCallbackRequest = (result) => { |
| | | const { setting } = this.state |
| | | const { setting, BID } = this.state |
| | | let errSql = '' |
| | | if (result.$ErrCode === 'E') { |
| | | errSql = ` |
| | |
| | | |
| | | param = UtilsDM.getCallBackQueryParams(setting, sql, errSql) |
| | | |
| | | if (this.props.BID) { |
| | | param.BID = this.props.BID |
| | | if (BID) { |
| | | param.BID = BID |
| | | } |
| | | |
| | | if (this.props.menuType === 'HS') { // 函数 sPC_TableData_InUpDe 云端验证 |
| | |
| | | * @description 子表数据加载 |
| | | */ |
| | | async loadmaindata () { |
| | | const { mainSearch, BID } = this.props |
| | | const { setting, arr_field, search, orderBy, pageIndex, pageSize, absFields } = this.state |
| | | const { mainSearch } = this.props |
| | | const { setting, BID, arr_field, search, orderBy, pageIndex, pageSize, absFields } = this.state |
| | | |
| | | let searches = fromJS(search).toJS() |
| | | if (mainSearch && mainSearch.length > 0) { // 主表搜索条件 |
| | |
| | | item.$$BID = BID || '' |
| | | item.$Index = start + index + '' |
| | | |
| | | if (setting.controlField) { |
| | | if (setting.controlVal.includes(item[setting.controlField])) { |
| | | item.$disabled = true |
| | | } |
| | | } |
| | | |
| | | return item |
| | | }), |
| | | total: result.total, |
| | |
| | | * @description 获取单行数据 |
| | | */ |
| | | async loadmainLinedata (id) { |
| | | const { mainSearch, BID } = this.props |
| | | const { setting, arr_field, search, orderBy, pageIndex, pageSize, absFields } = this.state |
| | | const { mainSearch } = this.props |
| | | const { setting, BID, arr_field, search, orderBy, pageIndex, pageSize, absFields } = this.state |
| | | |
| | | let searches = fromJS(search).toJS() |
| | | if (mainSearch && mainSearch.length > 0) { // 主表搜索条件 |
| | |
| | | * @description 获取合计字段值 |
| | | */ |
| | | getStatFieldsValue = (searches) => { |
| | | const { BID } = this.props |
| | | const { setting, orderBy, statFields } = this.state |
| | | const { setting, BID, orderBy, statFields } = this.state |
| | | |
| | | if (statFields.length === 0 || !(setting.interType === 'system' || (setting.interType === 'custom' && setting.requestMode === 'system')) || !setting.dataresource) return |
| | | |
| | |
| | | * 含有初始不加载的页面,修改设置 |
| | | */ |
| | | refreshbysearch = (searches) => { |
| | | MKEmitter.emit('resetTable', this.props.MenuID + this.props.Tab.uuid) // 列表重置 |
| | | MKEmitter.emit('resetTable', this.props.Tab.uuid) // 列表重置 |
| | | this.setState({ |
| | | pageIndex: 1, |
| | | search: searches, |
| | |
| | | */ |
| | | reloadtable = (btn) => { |
| | | if (!btn || btn.resetPageIndex !== 'false') { |
| | | MKEmitter.emit('resetTable', this.props.MenuID + this.props.Tab.uuid) // 列表重置 |
| | | MKEmitter.emit('resetTable', this.props.Tab.uuid) // 列表重置 |
| | | this.setState({ |
| | | pageIndex: 1 |
| | | }, () => { |
| | | this.loadData() |
| | | }) |
| | | } else { |
| | | MKEmitter.emit('resetTable', this.props.MenuID + this.props.Tab.uuid, 'false') // 列表重置 |
| | | MKEmitter.emit('resetTable', this.props.Tab.uuid, 'false') // 列表重置 |
| | | this.loadData() |
| | | } |
| | | } |
| | |
| | | */ |
| | | changeSelectedData = (selectedData) => { |
| | | this.setState({selectedData}) |
| | | } |
| | | |
| | | /** |
| | | * @description 表格Id变化 |
| | | */ |
| | | handleTableId = (type = this.props.Tab.uuid, id = '', data = '') => { |
| | | this.props.handleTableId(type, id, data) |
| | | } |
| | | |
| | | /** |
| | |
| | | * @param {*} position // 刷新位置 |
| | | * @param {*} btn // 执行的按钮 |
| | | */ |
| | | refreshByButtonResult = (menuId, position, btn) => { |
| | | refreshByButtonResult = (menuId, position, btn, id, lines) => { |
| | | const { MenuID } = this.props |
| | | |
| | | if (MenuID !== menuId) return |
| | | |
| | | const { Tab, SupMenuID, BID } = this.props |
| | | const { Tab, SupMenuID } = this.props |
| | | const { BID } = this.state |
| | | |
| | | if (position === 'grid' || position === 'view') { |
| | | if (position === 'line' && lines && lines.length === 1) { |
| | | this.loadmainLinedata(lines[0].$$uuid) |
| | | } else if (position === 'grid' || position === 'view') { |
| | | this.reloadtable(btn) |
| | | } else if (position === 'maingrid' || position === 'mainline') { |
| | | this.reloadtable(btn) |
| | | if (Tab.supMenu === 'mainTable') { |
| | | MKEmitter.emit('reloadData', SupMenuID, (BID || 'empty')) // 主表重置 |
| | | } else if (Tab.supMenu) { |
| | | if (Tab.supMenu) { |
| | | MKEmitter.emit('reloadData', Tab.supMenu, (BID || 'empty')) // 主表重置 |
| | | } else if (!Tab.supMenu && Tab.level === 0) { |
| | | MKEmitter.emit('reloadData', SupMenuID, (BID || 'empty')) // 树形结构,0级标签 |
| | |
| | | } |
| | | } |
| | | |
| | | changeTableLine = (ContainerId, tableId, id, data) => { |
| | | const { Tab } = this.props |
| | | const { setting } = this.state |
| | | |
| | | if (!Tab.supMenu || tableId !== Tab.supMenu) return |
| | | |
| | | this.setState({BData: data, BID: id}) |
| | | |
| | | if (!setting) return |
| | | |
| | | if (id !== this.state.BID || id !== '') { |
| | | MKEmitter.emit('resetTable', this.props.Tab.uuid) // 列表重置 |
| | | this.setState({ |
| | | pageIndex: 1 |
| | | }, () => { |
| | | this.loadData() |
| | | }) |
| | | } |
| | | } |
| | | |
| | | UNSAFE_componentWillMount() { |
| | | // 组件加载时,获取菜单数据 |
| | | this.loadconfig() |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { // handleTableId 函数判断时不相等 |
| | | return !is(fromJS({...this.props, handleTableId: ''}), fromJS({...nextProps, handleTableId: ''})) || !is(fromJS(this.state), fromJS(nextState)) |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('reloadData', this.reloadData) |
| | | MKEmitter.addListener('changeTableLine', this.changeTableLine) |
| | | MKEmitter.addListener('queryModuleParam', this.queryModuleParam) |
| | | MKEmitter.addListener('refreshByButtonResult', this.refreshByButtonResult) |
| | | } |
| | |
| | | return |
| | | } |
| | | MKEmitter.removeListener('reloadData', this.reloadData) |
| | | MKEmitter.removeListener('changeTableLine', this.changeTableLine) |
| | | MKEmitter.removeListener('queryModuleParam', this.queryModuleParam) |
| | | MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) |
| | | } |
| | | |
| | | render() { |
| | | const { config, setting, searchlist, pageSize, actions, columns, loadingview, viewlost, pickup, chartId, selectedData } = this.state |
| | | const { config, BID, BData, setting, searchlist, pageSize, actions, columns, loadingview, viewlost, pickup, chartId, selectedData } = this.state |
| | | |
| | | return ( |
| | | <div className="subtable" id={'subtable' + this.props.MenuID}> |
| | | {loadingview && <Spin />} |
| | | {searchlist && searchlist.length ? |
| | | <SubSearch BID={this.props.BID} setting={setting} searchlist={searchlist} menuType={this.props.menuType} refreshdata={this.refreshbysearch}/> : null |
| | | <SubSearch BID={BID} setting={setting} searchlist={searchlist} menuType={this.props.menuType} refreshdata={this.refreshbysearch}/> : null |
| | | } |
| | | {config ? <Row className="chart-view" gutter={16}> |
| | | {/* 视图组 */} |
| | | {!config.expand ? <Tabs activeKey={chartId} onChange={this.changeChart}> |
| | | {config.charts.map(item => ( |
| | | <TabPane tab={<Icon type={item.icon} />} key={item.uuid}></TabPane> |
| | | <TabPane tab={<MkIcon type={item.icon} />} key={item.uuid}></TabPane> |
| | | ))} |
| | | </Tabs> : null} |
| | | {config.charts.map(item => { |
| | |
| | | {config.charts.length > 1 ? <p className="chart-table chart-title">{item.title}</p> : null} |
| | | <div className="sub-action"> |
| | | <SubAction |
| | | BID={BID} |
| | | BData={BData} |
| | | setting={setting} |
| | | actions={actions} |
| | | columns={columns} |
| | | Tab={this.props.Tab} |
| | | BID={this.props.BID} |
| | | BData={this.props.BData} |
| | | MenuID={this.props.MenuID} |
| | | selectedData={selectedData} |
| | | ContainerId={this.props.ContainerId} |
| | |
| | | <Switch title="收起" className="subtable-pickup" checkedChildren="开" unCheckedChildren="关" checked={pickup} onChange={this.pickupChange} /> : null |
| | | } |
| | | <SubTable |
| | | BData={BData} |
| | | tableId={this.props.Tab.uuid} |
| | | pickup={pickup} |
| | | setting={setting} |
| | |
| | | pageSize={pageSize} |
| | | dict={this.state.dict} |
| | | data={this.state.data} |
| | | BData={this.props.BData} |
| | | total={this.state.total} |
| | | MenuID={this.props.MenuID} |
| | | loading={this.state.loading} |
| | | statFValue={this.state.statFValue} |
| | | ContainerId={this.props.ContainerId} |
| | | refreshdata={this.refreshbytable} |
| | | handleTableId={this.handleTableId} |
| | | chgSelectData={this.changeSelectedData} |
| | | /> |
| | | </div> |
| | |
| | | return ( |
| | | <Col className="card-view" span={item.width} key={item.uuid}> |
| | | <CardComponent |
| | | BID={BID} |
| | | plot={item} |
| | | BData={BData} |
| | | config={config} |
| | | columns={columns} |
| | | Tab={this.props.Tab} |
| | | BID={this.props.BID} |
| | | BData={this.props.BData} |
| | | data={this.state.data} |
| | | MenuID={this.props.MenuID} |
| | | loading={this.state.loading} |
| | | tableId={this.props.Tab.uuid} |
| | | handleTableId={this.handleTableId} |
| | | ContainerId={this.props.ContainerId} |
| | | /> |
| | | </Col> |
| | | ) |
| | |
| | | return ( |
| | | <Col span={item.width} key={item.uuid}> |
| | | <ChartComponent |
| | | BID={BID} |
| | | plot={item} |
| | | config={config} |
| | | BID={this.props.BID} |
| | | Tab={this.props.Tab} |
| | | data={this.state.data} |
| | | loading={this.state.loading} |