| | |
| | | import PropTypes from 'prop-types' |
| | | import {connect} from 'react-redux' |
| | | import { is, fromJS } from 'immutable' |
| | | import { notification, Spin, Tabs, Icon, Switch, Modal, Button, message, Tree, Typography, Row, Col } from 'antd' |
| | | import { notification, Spin, Tabs, Icon, Switch, Row, Col } from 'antd' |
| | | |
| | | import Api from '@/api' |
| | | import options from '@/store/options.js' |
| | | import zhCN from '@/locales/zh-CN/main.js' |
| | | import enUS from '@/locales/en-US/main.js' |
| | | import Utils from '@/utils/utils.js' |
| | |
| | | const SubTable = asyncSpinComponent(() => import('@/tabviews/subtable')) |
| | | const CardComponent = asyncSpinComponent(() => import('@/tabviews/zshare/cardcomponent')) |
| | | const ChartComponent = asyncSpinComponent(() => import('@/tabviews/zshare/chartcomponent')) |
| | | const PagemsgComponent = asyncComponent(() => import('@/tabviews/zshare/pageMessage')) |
| | | |
| | | const { TabPane } = Tabs |
| | | const { TreeNode } = Tree |
| | | const { Paragraph } = Typography |
| | | |
| | | class NormalTable extends Component { |
| | | static propTpyes = { |
| | |
| | | viewlost: false, // 页面丢失:1、未获取到配置-页面丢失;2、页面未启用 |
| | | lostmsg: '', // 页面丢失时的提示信息 |
| | | config: {}, // 页面配置信息,包括按钮、搜索、显示列、标签等 |
| | | userConfig: null, // 用户自定义设置 |
| | | shortcuts: null, // 快捷键 |
| | | searchlist: null, // 搜索条件 |
| | | actions: null, // 按钮集 |
| | | columns: null, // 显示列 |
| | | arr_field: '', // 使用 sPC_Get_TableData 时的查询字段集 |
| | | setting: null, // 页面全局设置:数据源、按钮及显示列固定、主键等 |
| | | data: null, // 列表数据集 |
| | | data: [], // 列表数据集 |
| | | selectedData: [], // 已选表格数据 |
| | | total: 0, // 总数 |
| | | loading: false, // 列表数据加载中 |
| | |
| | | search: '', // 搜索条件数组,使用时需分场景处理 |
| | | BIDs: {}, // 上级表id |
| | | pickup: false, // 主表数据隐藏显示切换 |
| | | treevisible: false, // 菜单结构树弹框显示隐藏控制 |
| | | tabActive: null, // 标签页展开控制 |
| | | chartId: '', // 展开图表ID |
| | | statFields: [], // 合计字段 |
| | | statFValue: [], // 合计值 |
| | | absFields: [], // 绝对值字段 |
| | | debug: sessionStorage.getItem('debug') === 'true' |
| | | } |
| | | |
| | | /** |
| | |
| | | |
| | | if (result.status) { |
| | | let config = '' |
| | | let userConfig = null |
| | | let _curUserConfig = '' |
| | | let shortcuts = [] |
| | | |
| | | try { // 配置信息解析 |
| | | config = JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) |
| | | config.MenuID = this.props.MenuID |
| | | config.MenuName = MenuName |
| | | } catch (e) { |
| | | console.warn('Parse Failure') |
| | | config = '' |
| | |
| | | // HS不使用自定义设置 |
| | | if (result.LongParamUser && this.props.menuType !== 'HS') { |
| | | try { // 配置信息解析 |
| | | userConfig = JSON.parse(window.decodeURIComponent(window.atob(result.LongParamUser))) |
| | | _curUserConfig = userConfig[this.props.MenuID] |
| | | let userConfig = JSON.parse(window.decodeURIComponent(window.atob(result.LongParamUser))) |
| | | if (userConfig && !userConfig.version) { |
| | | Object.keys(userConfig).forEach(key => { |
| | | let component = userConfig[key] |
| | | |
| | | if (!component.action) return |
| | | |
| | | Object.keys(component.action).forEach(uuid => { |
| | | let item = {uuid: uuid, parentId: key, shortcut: component.action[uuid].shortcut} |
| | | let printer = component.action[uuid].printer |
| | | |
| | | if (item.shortcut) { |
| | | item.$shortcut = item.shortcut.join('+') |
| | | shortcuts.push(item) |
| | | } |
| | | if (printer) { |
| | | item.printer = printer.defaultPrinter || '' |
| | | item.printerList = printer.printerList || '' |
| | | window.GLOB.UserCacheMap.set(key + uuid, item) |
| | | } |
| | | }) |
| | | }) |
| | | } else if (userConfig) { |
| | | shortcuts = userConfig.action |
| | | userConfig.printers.forEach(item => { |
| | | window.GLOB.UserCacheMap.set(item.parentId + item.uuid, item) |
| | | }) |
| | | } |
| | | } catch (e) { |
| | | console.warn('Parse Failure') |
| | | userConfig = null |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | } |
| | | |
| | | if (_curUserConfig) { |
| | | config.easyCode = _curUserConfig.easyCode || config.easyCode || '' |
| | | |
| | | config.action = config.action.map(item => { |
| | | if (_curUserConfig.action[item.uuid]) { |
| | | delete _curUserConfig.action[item.uuid].label |
| | | item = {...item, ..._curUserConfig.action[item.uuid]} |
| | | } |
| | | |
| | | if (item.OpenType === 'funcbutton' && item.funcType === 'print' && item.verify && item.printer) { |
| | | item.verify.defaultPrinter = item.printer.defaultPrinter || '' |
| | | if (item.verify.printerTypeList && item.printer.printerList) { |
| | | item.verify.printerTypeList = item.verify.printerTypeList.map(cell => { |
| | | cell.printer = item.printer.printerList[cell.Value] || '' |
| | | |
| | | return cell |
| | | }) |
| | | } |
| | | } |
| | | |
| | | return item |
| | | }) |
| | | } |
| | | |
| | | let _tabActive = {} // 筛选展开的tab页 |
| | | |
| | | config.tabgroups.forEach(group => { |
| | | _tabActive[group.uuid] = group.sublist[0].uuid |
| | | }) |
| | | |
| | | let _arrField = [] // 字段集 |
| | | let _columns = [] // 显示列 |
| | | let _hideCol = [] // 隐藏及合并列中字段的uuid集 |
| | |
| | | config.action.forEach(item => { |
| | | item.logLabel = MenuName + '-' + item.label // 用于sPC_TableData_InUpDe记录操作按钮 |
| | | item.$menuId = this.props.MenuID |
| | | |
| | | if (item.OpenType === 'funcbutton' && item.funcType === 'print' && item.verify) { // 打印机设置 |
| | | let _item = window.GLOB.UserCacheMap.get(this.props.MenuID + item.uuid) |
| | | |
| | | if (_item) { |
| | | item.printer = _item.printer || '' |
| | | item.verify.defaultPrinter = _item.printer || '' |
| | | if (item.verify.printerTypeList && _item.printerList) { |
| | | item.verify.printerTypeList = item.verify.printerTypeList.map(cell => { |
| | | cell.printer = _item.printerList[cell.Value] || '' |
| | | |
| | | return cell |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | |
| | | if (item.position === 'toolbar') { |
| | | _actions.push(item) |
| | |
| | | subcols.push(colMap.get(sub)) |
| | | } |
| | | }) |
| | | _col.subcols = subcols |
| | | _columns.push(_col) |
| | | if (subcols.length > 0) { |
| | | _col.subcols = subcols |
| | | _columns.push(_col) |
| | | } |
| | | } else { |
| | | _columns.push(col) |
| | | } |
| | |
| | | return _item |
| | | }) |
| | | |
| | | if (_curUserConfig) { |
| | | _columns = _columns.map(item => { |
| | | if (_curUserConfig.columns[item.uuid]) { |
| | | delete _curUserConfig.columns[item.uuid].label |
| | | item = {...item, ..._curUserConfig.columns[item.uuid]} |
| | | } |
| | | |
| | | return item |
| | | }) |
| | | |
| | | _columns.sort((pre, next) => { |
| | | return pre.sort - next.sort |
| | | }) |
| | | } |
| | | |
| | | this.setState({ |
| | | loadingview: false, |
| | | absFields, |
| | | chartId, |
| | | config, |
| | | statFields, |
| | | userConfig, |
| | | tabActive: _tabActive, |
| | | shortcuts, |
| | | setting: config.setting, |
| | | searchlist: config.search, |
| | | actions: _actions, |
| | |
| | | } |
| | | |
| | | setShortcut = () => { |
| | | const { actions, userConfig, config } = this.state |
| | | if (!userConfig) return |
| | | const { shortcuts } = this.state |
| | | |
| | | if (!shortcuts || shortcuts.length === 0) { |
| | | document.onkeydown = () => {} |
| | | return |
| | | } |
| | | |
| | | document.onkeydown = (event) => { |
| | | let e = event || window.event |
| | |
| | | preKey = 'alt' |
| | | } |
| | | |
| | | if (!preKey) return |
| | | if (!preKey || !keyCode) return |
| | | |
| | | let triggerId = '' |
| | | let _shortcut = `${preKey}+${keyCode}` |
| | | |
| | | actions.some(item => { |
| | | if (Array.isArray(item.shortcut) && preKey === item.shortcut[0] && keyCode === item.shortcut[1]) { |
| | | e.preventDefault() |
| | | triggerId = item.uuid |
| | | shortcuts.some(item => { |
| | | if (item.$shortcut === _shortcut) { |
| | | MKEmitter.emit('triggerBtnId', item.uuid) |
| | | |
| | | let element = item.parentId && item.parentId !== this.props.MenuID ? document.getElementById(item.parentId) : '' // 标签切换 |
| | | if (element && element.click) { |
| | | element.click() |
| | | } |
| | | |
| | | return true |
| | | } |
| | | return false |
| | | }) |
| | | |
| | | if (triggerId) { |
| | | MKEmitter.emit('triggerBtnId', triggerId) |
| | | return |
| | | } |
| | | |
| | | Object.keys(userConfig).some(key => { |
| | | if (key === this.props.MenuID || !userConfig[key].action) return false |
| | | |
| | | let _actions = userConfig[key].action |
| | | |
| | | Object.keys(_actions).some(btnkey => { |
| | | let item = _actions[btnkey] |
| | | |
| | | if (Array.isArray(item.shortcut) && preKey === item.shortcut[0] && keyCode === item.shortcut[1]) { |
| | | e.preventDefault() |
| | | triggerId = btnkey |
| | | |
| | | let _groupId = '' |
| | | let _ActiveTabId = '' |
| | | config.tabgroups.forEach(group => { |
| | | let _tab = group.sublist.filter(tab => tab.uuid === key)[0] |
| | | |
| | | if (!_tab) return |
| | | |
| | | _groupId = group.uuid |
| | | _ActiveTabId = _tab.uuid |
| | | }) |
| | | |
| | | if (_ActiveTabId && this.state.tabActive[_groupId] === _ActiveTabId) { |
| | | MKEmitter.emit('triggerBtnId', triggerId) |
| | | return true |
| | | } |
| | | } |
| | | return false |
| | | }) |
| | | |
| | | if (triggerId) return true |
| | | return false |
| | | }) |
| | | } |
| | |
| | | } |
| | | |
| | | item.key = index |
| | | item.$$uuid = item[setting.primaryKey] || '' |
| | | item.$$BID = BID || '' |
| | | |
| | | return item |
| | | }), |
| | | total: result.total, |
| | |
| | | data = data.map(item => { |
| | | if (item[setting.primaryKey] === _data[setting.primaryKey]) { |
| | | _data.key = item.key |
| | | _data.$$uuid = _data[setting.primaryKey] || '' |
| | | _data.$$BID = BID || '' |
| | | |
| | | return _data |
| | | } else { |
| | | return item |
| | |
| | | */ |
| | | reloadview = () => { |
| | | this.setState({ loadingview: true, viewlost: false, config: {}, setting: null, |
| | | data: null, total: 0, loading: false, pageIndex: 1, |
| | | data: null, total: 0, loading: false, pageIndex: 1, shortcuts: null, |
| | | pageSize: 10, orderBy: '', search: '', BIDs: {}, pickup: false |
| | | }, () => { |
| | | this.loadconfig() |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 按钮操作完成后(成功或失败),页面刷新,重置页码及选择项 |
| | | */ |
| | | refreshbyaction = (position, btn) => { |
| | | if (position === 'grid' || position === 'view') { |
| | | this.reloadtable(btn) |
| | | } |
| | | } |
| | | |
| | | /** |
| | |
| | | }) |
| | | } |
| | | |
| | | handleviewconfig = (e) => { |
| | | e.stopPropagation() |
| | | |
| | | const { MenuNo } = this.props |
| | | const { config } = this.state |
| | | |
| | | if (config && config.funcs && config.funcs.length > 0) { |
| | | this.setState({ |
| | | treevisible: true |
| | | }) |
| | | } else { |
| | | let oInput = document.createElement('input') |
| | | oInput.value = MenuNo || '' |
| | | document.body.appendChild(oInput) |
| | | oInput.select() |
| | | document.execCommand('Copy') |
| | | document.body.removeChild(oInput) |
| | | message.success(this.state.dict['main.copy.success']) |
| | | } |
| | | } |
| | | |
| | | getTreeNode = (data) => { |
| | | let _type = { |
| | | view: '页面', |
| | | btn: '按钮', |
| | | tab: '标签' |
| | | } |
| | | |
| | | return data.map(item => { |
| | | let _title = _type[item.subtype] |
| | | let _others = [] |
| | | |
| | | _others.push( |
| | | (item.menuNo ? item.menuNo + '(菜单参数)' : ''), |
| | | (item.tableName ? item.tableName + '(表名) ' : ''), |
| | | (item.innerFunc ? item.innerFunc + '(内部函数) ' : ''), |
| | | (item.outerFunc ? item.outerFunc + '(外部函数)' : '') |
| | | ) |
| | | _others = _others.filter(Boolean) |
| | | _others = _others.join('、') |
| | | |
| | | if (item.label) { |
| | | _title = _title + '(' + item.label + ')' |
| | | } |
| | | if (_others) { |
| | | _title = _title + ': ' + _others |
| | | } |
| | | |
| | | if (item.subfuncs && item.subfuncs.length > 0) { |
| | | return ( |
| | | <TreeNode title={_title} key={item.uuid} dataRef={item} selectable={false}> |
| | | {this.getTreeNode(item.subfuncs)} |
| | | </TreeNode> |
| | | ) |
| | | } |
| | | return <TreeNode key={item.uuid} title={_title} isLeaf selectable={false} /> |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 图表视图切换 |
| | | */ |
| | |
| | | this.setShortcut() |
| | | } |
| | | |
| | | /** |
| | | * @description 按钮执行完成后页面刷新 |
| | | * @param {*} menuId // 菜单Id |
| | | * @param {*} position // 刷新位置 |
| | | * @param {*} btn // 执行的按钮 |
| | | */ |
| | | refreshByButtonResult = (menuId, position, btn) => { |
| | | const { MenuID } = this.props |
| | | |
| | | if (MenuID !== menuId) return |
| | | |
| | | this.reloadtable(btn) |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | // 组件加载时,获取菜单数据 |
| | | this.loadconfig() |
| | |
| | | MKEmitter.addListener('reloadMenuView', this.reloadMenuView) |
| | | MKEmitter.addListener('resetActiveMenu', this.resetActiveMenu) |
| | | MKEmitter.addListener('getexceloutparam', this.getexceloutparam) |
| | | MKEmitter.addListener('refreshByButtonResult', this.refreshByButtonResult) |
| | | } |
| | | |
| | | /** |
| | |
| | | MKEmitter.removeListener('reloadMenuView', this.reloadMenuView) |
| | | MKEmitter.removeListener('resetActiveMenu', this.resetActiveMenu) |
| | | MKEmitter.removeListener('getexceloutparam', this.getexceloutparam) |
| | | MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) |
| | | } |
| | | |
| | | render() { |
| | | const { menuType, MenuName } = this.props |
| | | const { debug, BID, setting, searchlist, pageSize, actions, columns, loadingview, viewlost, pickup, config, userConfig, tabActive, chartId, search, selectedData } = this.state |
| | | const { menuType } = this.props |
| | | const { BID, setting, searchlist, pageSize, actions, columns, loadingview, viewlost, pickup, config, chartId, search, selectedData, shortcuts } = this.state |
| | | |
| | | return ( |
| | | <div className="commontable" id={this.state.ContainerId}> |
| | | {loadingview && <Spin size="large" />} |
| | | {loadingview ? <Spin size="large" /> : null} |
| | | {searchlist && searchlist.length ? |
| | | <MainSearch BID={BID} searchlist={searchlist} menuType={this.props.menuType} refreshdata={this.refreshbysearch}/> : null |
| | | } |
| | | {setting && setting.onload !== 'false' ? <Row className="chart-view" gutter={16}> |
| | | {setting ? <Row className="chart-view" gutter={16}> |
| | | {/* 视图组 */} |
| | | {!config.expand ? <Tabs activeKey={chartId} onChange={this.changeChart}> |
| | | {config.charts.map(item => ( |
| | |
| | | MenuID={this.props.MenuID} |
| | | selectedData={selectedData} |
| | | ContainerId={this.state.ContainerId} |
| | | refreshdata={this.refreshbyaction} |
| | | /> |
| | | </div> |
| | | <div className="main-table-box"> |
| | | {this.props.menuType !== 'HS' ? <SettingComponent |
| | | config={config} |
| | | columns={columns} |
| | | MenuName={MenuName} |
| | | dict={this.state.dict} |
| | | MenuID={this.props.MenuID} |
| | | permAction={this.props.permAction} |
| | | userConfig={this.state.userConfig} |
| | | reloadview={this.reloadview} |
| | | /> : null} |
| | | {(setting.tableType === 'radio' || setting.tableType === 'checkbox') && this.state.data && this.state.data.length > 0 ? |
| | | <Switch title="收起" className="main-pickup" checkedChildren="开" unCheckedChildren="关" defaultChecked={pickup} onChange={this.pickupChange} /> : null |
| | | } |
| | | <MainTable |
| | | tableId="mainTable" |
| | | BID={BID} |
| | | pickup={pickup} |
| | | setting={setting} |
| | | columns={columns} |
| | |
| | | total={this.state.total} |
| | | MenuID={this.props.MenuID} |
| | | loading={this.state.loading} |
| | | refreshdata={this.refreshbytable} |
| | | statFValue={this.state.statFValue} |
| | | handleTableId={this.handleTableId} |
| | | ContainerId={this.state.ContainerId} |
| | | refreshbyaction={this.refreshbyaction} |
| | | refreshdata={this.refreshbytable} |
| | | handleTableId={this.handleTableId} |
| | | chgSelectData={this.changeSelectedData} |
| | | /> |
| | | </div> |
| | |
| | | MenuID={this.props.MenuID} |
| | | loading={this.state.loading} |
| | | ContainerId={this.state.ContainerId} |
| | | refreshdata={this.refreshbyaction} |
| | | handleTableId={this.handleTableId} |
| | | /> |
| | | </Col> |
| | |
| | | } |
| | | })} |
| | | </Row> : null } |
| | | {setting && setting.onload !== 'false' && |
| | | config.tabgroups.map(group => ( |
| | | <Tabs key={group.uuid} onChange={(key) => this.setState({tabActive: {...tabActive, [group.uuid]: key}})}> |
| | | {group.sublist.map(_tab => { |
| | | return ( |
| | | <TabPane tab={ |
| | | <span> |
| | | {_tab.icon ? <Icon type={_tab.icon} /> : null} |
| | | {_tab.label} |
| | | </span> |
| | | } key={_tab.uuid}> |
| | | <SubTable |
| | | Tab={_tab} |
| | | MenuID={_tab.linkTab} |
| | | mainSearch={_tab.searchPass === 'true' ? search : null} |
| | | userConfig={userConfig ? userConfig[_tab.uuid] : null} |
| | | SupMenuID={this.props.MenuID} |
| | | ContainerId={this.state.ContainerId} |
| | | BID={this.state.BIDs[_tab.supMenu] || ''} |
| | | BData={this.state.BIDs[_tab.supMenu + 'data'] || ''} |
| | | handleTableId={this.handleTableId} |
| | | /> |
| | | </TabPane> |
| | | ) |
| | | })} |
| | | </Tabs>) |
| | | ) |
| | | {setting && config.tabgroups.map(group => ( |
| | | <Tabs key={group.uuid}> |
| | | {group.sublist.map(_tab => { |
| | | return ( |
| | | <TabPane tab={ |
| | | <span id={_tab.uuid}> |
| | | {_tab.icon ? <Icon type={_tab.icon} /> : null} |
| | | {_tab.label} |
| | | </span> |
| | | } key={_tab.uuid}> |
| | | <SubTable |
| | | Tab={_tab} |
| | | MenuID={_tab.linkTab} |
| | | mainSearch={_tab.searchPass === 'true' ? search : null} |
| | | SupMenuID={this.props.MenuID} |
| | | ContainerId={this.state.ContainerId} |
| | | BID={this.state.BIDs[_tab.supMenu] || ''} |
| | | BData={this.state.BIDs[_tab.supMenu + 'data'] || ''} |
| | | handleTableId={this.handleTableId} |
| | | /> |
| | | </TabPane> |
| | | ) |
| | | })} |
| | | </Tabs>)) |
| | | } |
| | | {debug && options.sysType !== 'cloud' && menuType !== 'HS' ? <Button |
| | | icon="copy" |
| | | shape="circle" |
| | | className="common-table-copy" |
| | | onClick={this.handleviewconfig} |
| | | /> : null} |
| | | <Modal |
| | | className="menu-tree-modal" |
| | | title={'菜单结构树'} |
| | | width={'650px'} |
| | | maskClosable={false} |
| | | visible={this.state.treevisible} |
| | | onCancel={() => this.setState({treevisible: false})} |
| | | footer={[ |
| | | <Button key="close" onClick={() => this.setState({treevisible: false})}>{this.state.dict['main.close']}</Button> |
| | | ]} |
| | | destroyOnClose |
| | | > |
| | | <div className="menu-header"> |
| | | <span>菜单名称:{this.props.MenuName}</span> |
| | | <span>菜单参数:{<Paragraph copyable>{this.props.MenuNo}</Paragraph>}</span> |
| | | </div> |
| | | {this.state.treevisible ? <Tree defaultExpandAll showLine={true}> |
| | | {this.getTreeNode(config.funcs)} |
| | | </Tree> : null} |
| | | </Modal> |
| | | {menuType !== 'HS' ? <PagemsgComponent menu={{MenuName: this.props.MenuName, MenuNo: this.props.MenuNo}} config={config} dict={this.state.dict} /> : null} |
| | | {menuType !== 'HS' && shortcuts ? <SettingComponent config={config} dict={this.state.dict} shortcuts={shortcuts} permAction={this.props.permAction}/> : null} |
| | | {viewlost ? <NotFount msg={this.state.lostmsg} /> : null} |
| | | </div> |
| | | ) |