import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Button, Modal, notification, Spin, Empty } from 'antd'
|
|
import Api from '@/api'
|
import MKEmitter from '@/utils/events.js'
|
import { updateSubTable } from '@/utils/utils-update.js'
|
import asyncComponent from '@/utils/asyncSpinComponent'
|
import './index.scss'
|
|
const EditTable = asyncComponent(() => import('./editTable'))
|
|
class CustomSetting extends Component {
|
static propTpyes = {
|
config: PropTypes.object, // 页面配置信息
|
shortcuts: PropTypes.any, // 自定义设置
|
}
|
|
state = {
|
visible: false, // 模态框控制
|
components: null, // 组件集合
|
revertLoading: false, // 恢复默认设置
|
confirmLoading: false, // 自定义设置模态框加载中
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
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' || config.Template === 'BaseTable') {
|
this.getCustomPageConfig()
|
} else {
|
notification.warning({
|
top: 92,
|
message: '配置信息格式错误！',
|
duration: 5
|
})
|
}
|
}
|
|
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.length > 0) {
|
cell.verify.printerTypeList = cell.verify.printerTypeList.map(_cell => {
|
_cell.uuid = _cell.uuid || _cell.key
|
_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.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.length > 0) {
|
cell.verify.printerTypeList = cell.verify.printerTypeList.map(_cell => {
|
_cell.uuid = _cell.uuid || _cell.key
|
_cell.parentId = cell.uuid
|
_cell.$port = cell.$port
|
|
return _cell
|
})
|
cell.$expanded = true
|
}
|
printbtns.push(cell)
|
}
|
|
_comp.action.push({...cell, $line: true, ...(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.length > 0) {
|
cell.verify.printerTypeList = cell.verify.printerTypeList.map(_cell => {
|
_cell.uuid = _cell.uuid || _cell.key
|
_cell.parentId = cell.uuid
|
_cell.$port = cell.$port
|
|
return _cell
|
})
|
cell.$expanded = true
|
}
|
printbtns.push(cell)
|
}
|
|
_comp.action.push({...cell, $line: true, ...(userConfig[cell.uuid] || {})})
|
})
|
})
|
} else if (item.type === 'table') {
|
let loopCol = (cols) => {
|
cols.forEach(col => {
|
if (col.type === 'colspan') {
|
loopCol(col.subcols)
|
} else if (col.type === 'custom') {
|
col.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.length > 0) {
|
cell.verify.printerTypeList = cell.verify.printerTypeList.map(_cell => {
|
_cell.uuid = _cell.uuid || _cell.key
|
_cell.parentId = cell.uuid
|
_cell.$port = cell.$port
|
|
return _cell
|
})
|
cell.$expanded = true
|
}
|
printbtns.push(cell)
|
}
|
|
_comp.action.push({...cell, $line: true, ...(userConfig[cell.uuid] || {})})
|
})
|
}
|
})
|
}
|
loopCol(item.cols)
|
}
|
|
if (_comp.action.length > 0) {
|
_components.push(_comp)
|
}
|
})
|
}
|
|
filterComponent(config.components)
|
|
this.setState({components: _components})
|
this.getPrinter(printbtns)
|
}
|
|
getPageConfig = () => {
|
const { shortcuts } = 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.uuid = cell.uuid || cell.key
|
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 = updateSubTable(subconfig)
|
|
let _comp = {title: res.tab.label, uuid: res.tab.uuid, action: []}
|
|
subconfig.action.forEach(item => {
|
if (!window.GLOB.mkActions[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.length > 0) {
|
item.verify.printerTypeList = item.verify.printerTypeList.map(cell => {
|
cell.uuid = cell.uuid || cell.key
|
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 (e) {
|
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: config.MenuID
|
}
|
this.setState({
|
revertLoading: true
|
})
|
|
Api.getSystemConfig(param).then(result => {
|
if (!result.status) {
|
this.setState({
|
revertLoading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
return
|
}
|
|
Api.deleteMenuStorage(config.MenuID).then(() => {
|
this.setState({
|
visible: false,
|
revertLoading: false
|
}, () => {
|
window.GLOB.CacheMap = new Map()
|
MKEmitter.emit('reloadMenuView', config.MenuID)
|
})
|
})
|
})
|
}
|
|
settingSubmit = () => {
|
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 && !item.$line) {
|
_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(_LongParam)))
|
} catch (e) {
|
notification.warning({
|
top: 92,
|
message: '编译错误',
|
duration: 5
|
})
|
return
|
}
|
|
let param = {
|
func: 'sPC_TrdMenu_UserParam',
|
MenuID: config.MenuID,
|
EasyCode: config.easyCode || '',
|
LongParam: _LongParam
|
}
|
|
this.setState({
|
confirmLoading: true
|
})
|
|
Api.getSystemConfig(param).then(result => {
|
if (!result.status) {
|
this.setState({
|
confirmLoading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
return
|
}
|
|
Api.deleteMenuStorage(config.MenuID).then(() => {
|
this.setState({
|
visible: false,
|
confirmLoading: false
|
}, () => {
|
window.GLOB.CacheMap = new Map()
|
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 className="page-setting-wrap">
|
{window.GLOB.sysType === 'local' ? <Button
|
icon="setting"
|
shape="circle"
|
className="page-setting"
|
onClick={this.trigger}
|
/> : null}
|
<Modal
|
wrapClassName="custom-setting-modal"
|
title={'自定义设置'}
|
maskClosable={false}
|
width={950}
|
visible={visible}
|
onCancel={() => { this.setState({ visible: false }) }}
|
footer={[
|
<Button key="revert" type="danger" loading={this.state.revertLoading} onClick={this.settingRevert}>恢复默认设置</Button>,
|
<Button key="cancel" onClick={() => { this.setState({ visible: false }) }}>取消</Button>,
|
<Button key="confirm" type="primary" loading={this.state.confirmLoading} onClick={this.settingSubmit}>提交</Button>
|
]}
|
destroyOnClose
|
>
|
<div className="tip">注：行级按钮快捷键设置无效。</div>
|
{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>
|
)
|
}
|
}
|
|
export default CustomSetting
|
