| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Icon, Button, Modal, notification } from 'antd' |
| | | import { Button, Modal, notification, Spin, Empty } from 'antd' |
| | | |
| | | import Api from '@/api' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import UtilsUpdate from '@/utils/utils-update.js' |
| | | import options from '@/store/options.js' |
| | | import asyncComponent from '@/utils/asyncSpinComponent' |
| | | import './index.scss' |
| | | |
| | | const VerifyCard = asyncComponent(() => import('@/tabviews/zshare/verifycard')) |
| | | const EditTable = asyncComponent(() => import('./editTable')) |
| | | |
| | | class CustomSetting extends Component { |
| | | static propTpyes = { |
| | | dict: PropTypes.any, // 字典表 |
| | | reloadview: PropTypes.func, // 页面刷新 |
| | | dict: PropTypes.object, // 字典表 |
| | | config: PropTypes.object, // 页面配置信息 |
| | | shortcuts: PropTypes.any, // 自定义设置 |
| | | permAction: PropTypes.object, // 按钮权限 |
| | | } |
| | | |
| | | state = { |
| | | userParam: null, // 保存用户编辑中的配置 |
| | | visible: false, // 模态框控制 |
| | | components: null, // 组件集合 |
| | | revertLoading: false, // 恢复默认设置 |
| | | confirmLoading: false, // 自定义设置模态框加载中 |
| | | } |
| | |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | controlCustomSetting = () => { |
| | | trigger = () => { |
| | | const { config } = this.props |
| | | |
| | | this.setState({ |
| | | visible: true, |
| | | confirmLoading: false, |
| | | revertLoading: false |
| | | }) |
| | | |
| | | if (config.Template === 'CommonTable' || config.Template === 'TreePage') { |
| | | this.getPageConfig() |
| | | } else if (config.Template === 'CustomPage') { |
| | | this.getCustomPageConfig() |
| | | } else { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '配置信息格式错误!', |
| | | duration: 5 |
| | | }) |
| | | } |
| | | } |
| | | |
| | | changeMenuParam = (param) => { |
| | | this.setState({userParam: param}) |
| | | getCustomPageConfig = () => { |
| | | const { shortcuts } = this.props |
| | | let config = fromJS(this.props.config).toJS() |
| | | let userConfig = {} |
| | | let printbtns = [] |
| | | let _components = [] |
| | | |
| | | shortcuts.forEach(item => { |
| | | userConfig[item.uuid] = item |
| | | }) |
| | | |
| | | let filterComponent = (components) => { |
| | | components.forEach(item => { |
| | | if (item.type === 'tabs') { |
| | | item.subtabs.forEach(tab => { |
| | | filterComponent(tab.components) |
| | | }) |
| | | return |
| | | } else if (item.type === 'group') { |
| | | filterComponent(item.components) |
| | | return |
| | | } |
| | | |
| | | let _comp = {title: item.name, uuid: item.uuid, action: []} |
| | | |
| | | item.action && item.action.forEach(cell => { |
| | | cell.$expanded = false |
| | | if (cell.OpenType === 'funcbutton' && cell.funcType === 'print') { |
| | | |
| | | cell.$port = cell.verify ? cell.verify.linkUrl : '' |
| | | if (cell.verify && cell.verify.printerTypeList) { |
| | | cell.verify.printerTypeList = cell.verify.printerTypeList.map(_cell => { |
| | | _cell.parentId = cell.uuid |
| | | _cell.$port = cell.$port |
| | | |
| | | return _cell |
| | | }) |
| | | cell.$expanded = true |
| | | } |
| | | printbtns.push(cell) |
| | | } |
| | | |
| | | _comp.action.push({...cell, ...(userConfig[cell.uuid] || {})}) |
| | | }) |
| | | |
| | | if (item.type === 'card' || (item.type === 'table' && item.subtype === 'tablecard')) { |
| | | item.subcards.forEach(card => { |
| | | card.elements && card.elements.forEach(cell => { |
| | | if (cell.eleType !== 'button') return |
| | | cell.$expanded = false |
| | | if (cell.OpenType === 'funcbutton' && cell.funcType === 'print') { |
| | | |
| | | cell.$port = cell.verify ? cell.verify.linkUrl : '' |
| | | if (cell.verify && cell.verify.printerTypeList) { |
| | | cell.verify.printerTypeList = cell.verify.printerTypeList.map(_cell => { |
| | | _cell.parentId = cell.uuid |
| | | _cell.$port = cell.$port |
| | | |
| | | return _cell |
| | | }) |
| | | cell.$expanded = true |
| | | } |
| | | printbtns.push(cell) |
| | | } |
| | | |
| | | _comp.action.push({...cell, ...(userConfig[cell.uuid] || {})}) |
| | | }) |
| | | card.backElements && card.backElements.forEach(cell => { |
| | | if (cell.eleType !== 'button') return |
| | | cell.$expanded = false |
| | | if (cell.OpenType === 'funcbutton' && cell.funcType === 'print') { |
| | | |
| | | cell.$port = cell.verify ? cell.verify.linkUrl : '' |
| | | if (cell.verify && cell.verify.printerTypeList) { |
| | | cell.verify.printerTypeList = cell.verify.printerTypeList.map(_cell => { |
| | | _cell.parentId = cell.uuid |
| | | _cell.$port = cell.$port |
| | | |
| | | return _cell |
| | | }) |
| | | cell.$expanded = true |
| | | } |
| | | printbtns.push(cell) |
| | | } |
| | | |
| | | _comp.action.push({...cell, ...(userConfig[cell.uuid] || {})}) |
| | | }) |
| | | }) |
| | | } else if (item.type === 'table' && item.subtype === 'normaltable') { |
| | | item.cols && item.cols.forEach(col => { |
| | | if (col.type !== 'action') return |
| | | col.elements && col.elements.forEach(cell => { |
| | | cell.$expanded = false |
| | | if (cell.OpenType === 'funcbutton' && cell.funcType === 'print') { |
| | | |
| | | cell.$port = cell.verify ? cell.verify.linkUrl : '' |
| | | if (cell.verify && cell.verify.printerTypeList) { |
| | | cell.verify.printerTypeList = cell.verify.printerTypeList.map(_cell => { |
| | | _cell.parentId = cell.uuid |
| | | _cell.$port = cell.$port |
| | | |
| | | return _cell |
| | | }) |
| | | cell.$expanded = true |
| | | } |
| | | printbtns.push(cell) |
| | | } |
| | | |
| | | _comp.action.push({...cell, ...(userConfig[cell.uuid] || {})}) |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | if (_comp.action.length > 0) { |
| | | _components.push(_comp) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | filterComponent(config.components) |
| | | |
| | | this.setState({components: _components}) |
| | | this.getPrinter(printbtns) |
| | | } |
| | | |
| | | getPageConfig = () => { |
| | | const { shortcuts, permAction } = this.props |
| | | let config = fromJS(this.props.config).toJS() |
| | | let userConfig = {} |
| | | let components = [] |
| | | let _component = { title: '主表', uuid: config.MenuID, action: [] } |
| | | let printbtns = [] |
| | | |
| | | shortcuts.forEach(item => { |
| | | userConfig[item.uuid] = item |
| | | }) |
| | | |
| | | config.action && config.action.forEach(item => { |
| | | item.$expanded = false |
| | | if (item.OpenType === 'funcbutton' && item.funcType === 'print') { |
| | | item.$port = item.verify ? item.verify.linkUrl : '' |
| | | printbtns.push(item) |
| | | if (item.verify && item.verify.printerTypeList && item.verify.printerTypeList.length > 0) { |
| | | item.verify.printerTypeList = item.verify.printerTypeList.map(cell => { |
| | | cell.parentId = item.uuid |
| | | cell.$port = item.$port |
| | | return cell |
| | | }) |
| | | item.$expanded = true |
| | | } |
| | | } |
| | | _component.action.push({...item, ...(userConfig[item.uuid] || {})}) |
| | | }) |
| | | |
| | | if (_component.action.length > 0) { |
| | | components.push(_component) |
| | | } |
| | | |
| | | let deffers = [] |
| | | config.tabgroups && config.tabgroups.forEach(group => { |
| | | group.sublist.forEach(tab => { |
| | | deffers.push(new Promise(resolve => { |
| | | let param = { |
| | | func: 'sPC_Get_LongParam', |
| | | MenuID: tab.linkTab |
| | | } |
| | | Api.getCacheConfig(param).then(res => { |
| | | res.tab = tab |
| | | resolve(res) |
| | | }) |
| | | })) |
| | | }) |
| | | }) |
| | | |
| | | if (deffers.length > 0) { |
| | | Promise.all(deffers).then(result => { |
| | | let errors = result.filter(res => !res.status) |
| | | if (errors.length > 0) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: errors[0].message, |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | result.forEach(res => { |
| | | if (!res.LongParam) return |
| | | |
| | | let subconfig = '' |
| | | try { |
| | | subconfig = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam))) |
| | | } catch (e) { |
| | | console.warn('Parse Failure') |
| | | subconfig = '' |
| | | } |
| | | |
| | | if (!subconfig || !subconfig.enabled) return |
| | | |
| | | subconfig = UtilsUpdate.updateSubTable(subconfig) |
| | | |
| | | let _comp = {title: res.tab.label, uuid: res.tab.uuid, action: []} |
| | | |
| | | subconfig.action.forEach(item => { |
| | | if (!permAction[item.uuid]) return |
| | | |
| | | item.$expanded = false |
| | | if (item.OpenType === 'funcbutton' && item.funcType === 'print') { |
| | | let _item = window.GLOB.UserCacheMap.get(res.tab.uuid + item.uuid) |
| | | |
| | | item.printer = _item ? (_item.printer || '') : '' |
| | | item.$port = item.verify ? item.verify.linkUrl : '' |
| | | if (item.verify && item.verify.printerTypeList) { |
| | | item.verify.printerTypeList = item.verify.printerTypeList.map(cell => { |
| | | cell.parentId = item.uuid |
| | | cell.$port = item.$port |
| | | cell.printer = _item && _item.printerList ? (_item.printerList[cell.Value] || '') : '' |
| | | |
| | | return cell |
| | | }) |
| | | item.$expanded = true |
| | | } |
| | | printbtns.push(item) |
| | | } |
| | | |
| | | _comp.action.push({...item, ...(userConfig[item.uuid] || {})}) |
| | | }) |
| | | |
| | | if (_comp.action.length > 0) { |
| | | components.push(_comp) |
| | | } |
| | | }) |
| | | |
| | | this.setState({components}) |
| | | this.getPrinter(printbtns) |
| | | }) |
| | | } else { |
| | | this.setState({components}) |
| | | this.getPrinter(printbtns) |
| | | } |
| | | } |
| | | |
| | | getPrinter = (printbtns) => { |
| | | let links = [] |
| | | printbtns.forEach(item => { |
| | | if (!item.verify || !item.verify.linkUrl) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '按钮《' + item.label + '》设置错误!', |
| | | duration: 5 |
| | | }) |
| | | } else if (!links.includes(item.verify.linkUrl)) { |
| | | links.push(item.verify.linkUrl) |
| | | |
| | | let socket = null |
| | | socket = new WebSocket('ws://' + item.verify.linkUrl) |
| | | // 打开Socket |
| | | socket.onopen = () =>{ |
| | | let request = { |
| | | requestID: '', |
| | | version: '', |
| | | cmd: 'getPrinters' |
| | | } |
| | | socket.send(JSON.stringify(request)) |
| | | } |
| | | // 监听消息 |
| | | socket.onmessage = (event) => { |
| | | let data = '' |
| | | try { |
| | | data = JSON.parse(event.data) |
| | | } catch { |
| | | data = '' |
| | | } |
| | | |
| | | if (data && data.cmd === 'getPrinters' && (data.status === true || data.status === 'success')) { |
| | | let _printers = [] |
| | | let _printer = data.printers[0] |
| | | |
| | | if (_printer && typeof(_printer) === 'string') { |
| | | _printers = Array.from(new Set(data.printers)) |
| | | _printers = _printers.map(print => { |
| | | return { |
| | | value: print, |
| | | text: print |
| | | } |
| | | }) |
| | | } else if (_printer && typeof(_printer) === 'object') { |
| | | _printers = data.printers.map(p => p.name) |
| | | _printers = Array.from(new Set(_printers)) |
| | | _printers = _printers.map(print => { |
| | | return { |
| | | value: print, |
| | | text: print |
| | | } |
| | | }) |
| | | } |
| | | |
| | | window.GLOB.UserCacheMap.set(item.verify.linkUrl, _printers) |
| | | } else if (data && data.cmd === 'getPrinters') { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: data.message, |
| | | duration: 5 |
| | | }) |
| | | } |
| | | } |
| | | |
| | | socket.onerror = () => { |
| | | let tool = item.verify.linkUrl |
| | | if (item.verify.linkUrl === '127.0.0.1:13529') { |
| | | tool = '明科通讯组件' |
| | | } else if (item.verify.linkUrl === '127.0.0.1:13528') { |
| | | tool = 'CAINIAO打印组件' |
| | | } |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '无法连接到: ' + tool, |
| | | duration: 5 |
| | | }) |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | settingRevert = () => { |
| | | const { config } = this.props |
| | | let param = { |
| | | func: 's_TrdMenu_UserParam_del', |
| | | MenuID: this.props.MenuID |
| | | MenuID: config.MenuID |
| | | } |
| | | this.setState({ |
| | | revertLoading: true |
| | |
| | | }) |
| | | return |
| | | } |
| | | this.setState({ |
| | | visible: false, |
| | | revertLoading: false |
| | | }, () => { |
| | | window.GLOB.CacheMap = new Map() |
| | | this.props.reloadview() |
| | | |
| | | Api.deleteMenuStorage(config.MenuID).then(() => { |
| | | this.setState({ |
| | | visible: false, |
| | | revertLoading: false |
| | | }, () => { |
| | | window.GLOB.CacheMap = new Map() |
| | | MKEmitter.emit('reloadMenuView', config.MenuID) |
| | | }) |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | settingSubmit = () => { |
| | | const { userParam } = this.state |
| | | let _LongParam = '' |
| | | const { config } = this.props |
| | | const { components } = this.state |
| | | let _LongParam = {version: '1.0', action: [], printers: []} |
| | | |
| | | components.forEach(com => { |
| | | com.action.forEach(item => { |
| | | if (item.shortcut && item.shortcut.length > 0) { |
| | | _LongParam.action.push({uuid: item.uuid, parentId: com.uuid, shortcut: item.shortcut, $shortcut: item.shortcut.join('+')}) |
| | | } |
| | | if (item.funcType === 'print' && (item.printer || item.verify.printerTypeList)) { |
| | | let printerList = {} |
| | | |
| | | if (item.verify.printerTypeList) { |
| | | item.verify.printerTypeList.forEach(cell => { |
| | | printerList[cell.Value] = cell.printer || '' |
| | | }) |
| | | } |
| | | |
| | | _LongParam.printers.push({ |
| | | uuid: item.uuid, |
| | | parentId: com.uuid, |
| | | printer: item.printer || '', |
| | | printerList |
| | | }) |
| | | } |
| | | }) |
| | | }) |
| | | |
| | | try { |
| | | _LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(userParam))) |
| | | _LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_LongParam))) |
| | | } catch (e) { |
| | | notification.warning({ |
| | | top: 92, |
| | |
| | | return |
| | | } |
| | | |
| | | let easyCode = userParam[this.props.MenuID] ? userParam[this.props.MenuID].easyCode : '' |
| | | |
| | | let param = { |
| | | func: 'sPC_TrdMenu_UserParam', |
| | | MenuID: this.props.MenuID, |
| | | EasyCode: easyCode || '', |
| | | MenuID: config.MenuID, |
| | | EasyCode: config.easyCode || '', |
| | | LongParam: _LongParam |
| | | } |
| | | |
| | |
| | | return |
| | | } |
| | | |
| | | Api.deleteMenuStorage(this.props.MenuID).then(() => { |
| | | Api.deleteMenuStorage(config.MenuID).then(() => { |
| | | this.setState({ |
| | | visible: false, |
| | | confirmLoading: false |
| | | }, () => { |
| | | window.GLOB.CacheMap = new Map() |
| | | this.props.reloadview() |
| | | MKEmitter.emit('reloadMenuView', config.MenuID) |
| | | }) |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | onChange = (list, parentId) => { |
| | | const { components } = this.state |
| | | |
| | | this.setState({ |
| | | components: components.map(item => { |
| | | if (item.uuid === parentId) { |
| | | item.action = list |
| | | } |
| | | return item |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | render() { |
| | | const { components, visible } = this.state |
| | | |
| | | return ( |
| | | <div> |
| | | <Icon className="custom-control" type="setting" onClick={this.controlCustomSetting} /> |
| | | <div className="page-setting-wrap"> |
| | | {options.sysType === 'local' ? <Button |
| | | icon="setting" |
| | | shape="circle" |
| | | className="page-setting" |
| | | onClick={this.trigger} |
| | | /> : null} |
| | | <Modal |
| | | wrapClassName="common-table-custom-modal" |
| | | wrapClassName="custom-setting-modal" |
| | | title={'自定义设置'} |
| | | maskClosable={false} |
| | | width={950} |
| | | visible={this.state.visible} |
| | | visible={visible} |
| | | onCancel={() => { this.setState({ visible: false }) }} |
| | | footer={[ |
| | | <Button key="revert" type="danger" loading={this.state.revertLoading} onClick={this.settingRevert}>{this.props.dict['main.revert.default']}</Button>, |
| | |
| | | ]} |
| | | destroyOnClose |
| | | > |
| | | {this.state.visible ? |
| | | <VerifyCard |
| | | MenuID={this.props.MenuID} |
| | | MenuName={this.props.MenuName} |
| | | permAction={this.props.permAction} |
| | | config={this.props.config} |
| | | userConfig={this.props.userConfig} |
| | | columns={this.props.columns} |
| | | handleParam={this.changeMenuParam} |
| | | /> : null |
| | | } |
| | | {components && components.length > 0 ? components.map(item => ( |
| | | <div key={item.uuid}> |
| | | <p className="component-title">{item.title}</p> |
| | | <EditTable data={item.action} onChange={(list) => this.onChange(list, item.uuid)}/> |
| | | </div> |
| | | )) : null} |
| | | {components && components.length === 0 ? <Empty /> : null} |
| | | {!components ? <Spin size="large" /> : null} |
| | | </Modal> |
| | | </div> |
| | | ) |