import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Tabs, Row, Col, Radio, Table, Icon, Select, notification, Input } from 'antd'
|
|
import ActionForm from './actionform'
|
import ColumnForm from './columnform'
|
import PrintForm from './printform'
|
import PrintTypeForm from './printtypeform'
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
const keycode = {
|
65: 'A',
|
66: 'B',
|
67: 'C',
|
68: 'D',
|
69: 'E',
|
70: 'F',
|
71: 'G',
|
72: 'H',
|
73: 'I',
|
74: 'J',
|
75: 'K',
|
76: 'L',
|
77: 'M',
|
78: 'N',
|
79: 'O',
|
80: 'P',
|
81: 'Q',
|
82: 'R',
|
83: 'S',
|
84: 'T',
|
85: 'U',
|
86: 'V',
|
87: 'W',
|
88: 'X',
|
89: 'Y',
|
90: 'Z'
|
}
|
|
class VerifyCard extends Component {
|
static propTpyes = {
|
config: PropTypes.object, // 页面配置
|
handleconfig: PropTypes.func // 页面配置
|
}
|
|
state = {
|
config: null,
|
subconfig: null,
|
printbtns: null,
|
colColumns: [
|
{
|
title: '列名',
|
dataIndex: 'label',
|
width: '20%'
|
},
|
{
|
title: '列宽',
|
dataIndex: 'Width',
|
width: '20%'
|
},
|
{
|
title: '隐藏',
|
dataIndex: 'hidden',
|
width: '20%',
|
render: (text, record) => {
|
if (record.hidden) return '是'
|
return '否'
|
}
|
},
|
{
|
title: '固定',
|
dataIndex: 'fixed',
|
width: '20%',
|
render: (text, record) => {
|
if (record.fixed) return '是'
|
return '否'
|
}
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '20%',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(<div>
|
<span className="operation-btn" title="编辑" onClick={() => this.handleEdit(record, 'column')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
|
<span className="operation-btn" title="上移" onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
|
<span className="operation-btn" title="下移" onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
|
</div>)
|
}
|
],
|
printColumns: [
|
{
|
title: '名称',
|
dataIndex: 'label',
|
width: '25%'
|
},
|
{
|
title: '默认打印机',
|
dataIndex: 'print',
|
width: '45%',
|
render: (text, record) => {
|
if (!record.verify) return ''
|
|
return record.verify.defaultPrinter || ''
|
}
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '20%',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(<div>
|
<span className="operation-btn" title="编辑" onClick={() => this.handleEdit(record, 'print')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
|
</div>)
|
}
|
],
|
printTypeColumns: [
|
{
|
title: '打印类型',
|
dataIndex: 'Text',
|
width: '25%'
|
},
|
{
|
title: '打印机',
|
dataIndex: 'printer',
|
width: '45%'
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '20%',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(<div>
|
<span className="operation-btn" title="编辑" onClick={() => this.handleEdit(record, 'printtype')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
|
</div>)
|
}
|
],
|
actionColumns: [
|
{
|
title: '名称',
|
dataIndex: 'label',
|
width: '25%'
|
},
|
{
|
title: '快捷键',
|
dataIndex: 'shortcut',
|
width: '25%',
|
render: (text, record) => {
|
if (!record.shortcut || typeof(record.shortcut) !== 'object' || record.shortcut.length === 0) return ''
|
let _text = keycode[record.shortcut[1]]
|
|
return record.shortcut[0] + ' + ' + _text
|
}
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '20%',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(<div>
|
<span className="operation-btn" title="编辑" onClick={() => this.handleEdit(record, 'action')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
|
</div>)
|
}
|
]
|
}
|
|
UNSAFE_componentWillMount() {
|
let config = JSON.parse(JSON.stringify(this.props.config))
|
|
let _subconfig = {
|
label: config.label,
|
setting: config.setting,
|
action: {},
|
columns: {}
|
}
|
|
config.action.forEach(item => {
|
_subconfig.action[item.uuid] = {
|
printer: item.printer || '',
|
shortcut: item.shortcut
|
}
|
})
|
|
config.columns.forEach((item, index) => {
|
_subconfig.columns[item.uuid] = {
|
label: item.label,
|
Width: item.Width,
|
hidden: item.hidden,
|
fixed: item.fixed,
|
sort: index
|
}
|
})
|
|
this.setState({
|
subconfig: _subconfig,
|
config: config,
|
printbtns: config.action.filter(item => item.type === 'print')
|
})
|
}
|
|
componentDidMount() {
|
const { printbtns } = this.state
|
|
printbtns.forEach(item => {
|
if (!item.verify || !item.verify.linkUrl) {
|
notification.warning({
|
top: 92,
|
message: '按钮《' + item.label + '》设置错误!',
|
duration: 5
|
})
|
} else {
|
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) {
|
let _printers = Array.from(new Set(data.printers))
|
_printers = _printers.map(print => {
|
return {
|
value: print,
|
text: print
|
}
|
})
|
|
let _printparam = {
|
defaultPrinter: data.defaultPrinter,
|
printers: _printers
|
}
|
|
let _printbtns = JSON.parse(JSON.stringify(this.state.printbtns))
|
|
_printbtns = _printbtns.map(cell => {
|
if (item.uuid === cell.uuid) {
|
cell.printparam = _printparam
|
}
|
return cell
|
})
|
|
this.setState({
|
printbtns: _printbtns
|
})
|
} else if (data && data.cmd === 'getPrinters' && !data.status) {
|
notification.warning({
|
top: 92,
|
message: data.message,
|
duration: 5
|
})
|
}
|
}
|
|
socket.onerror = () => {
|
notification.warning({
|
top: 92,
|
message: '无法连接到:' + item.verify.linkUrl,
|
duration: 5
|
})
|
}
|
}
|
})
|
}
|
|
columnChange = (values) => {
|
let _config = JSON.parse(JSON.stringify(this.state.config))
|
let _subconfig = JSON.parse(JSON.stringify(this.state.subconfig))
|
|
_config.columns = _config.columns.map((item, index) => {
|
if (values.uuid === item.uuid) {
|
item = {...item, ...values}
|
}
|
|
_subconfig.columns[item.uuid] = {
|
label: item.label,
|
Width: item.Width,
|
hidden: item.hidden,
|
fixed: item.fixed,
|
sort: index
|
}
|
|
return item
|
})
|
|
this.setState({
|
config: _config,
|
subconfig: _subconfig
|
})
|
|
this.props.handleconfig(_config.uuid, _subconfig)
|
}
|
|
actionChange = (values) => {
|
let _config = JSON.parse(JSON.stringify(this.state.config))
|
let _subconfig = JSON.parse(JSON.stringify(this.state.subconfig))
|
|
_config.action = _config.action.map(item => {
|
if (values.uuid === item.uuid) {
|
item = {...item, ...values}
|
_subconfig.action[item.uuid].shortcut = item.shortcut || ''
|
}
|
|
return item
|
})
|
|
this.setState({
|
config: _config,
|
subconfig: _subconfig
|
})
|
|
this.props.handleconfig(_config.uuid, _subconfig)
|
}
|
|
printChange = (values) => {
|
const { config } = this.props
|
let _printbtns = JSON.parse(JSON.stringify(this.state.printbtns))
|
let _subconfig = JSON.parse(JSON.stringify(this.state.subconfig))
|
|
_printbtns = _printbtns.map(item => {
|
if (values.uuid === item.uuid) {
|
item.verify = item.verify || {}
|
item.verify.defaultPrinter = values.defaultPrinter || ''
|
|
_subconfig.action[item.uuid].printer = _subconfig.action[item.uuid].printer || {}
|
_subconfig.action[item.uuid].printer.defaultPrinter = values.defaultPrinter || ''
|
}
|
|
return item
|
})
|
|
this.setState({
|
printbtns: _printbtns,
|
subconfig: _subconfig
|
})
|
|
this.props.handleconfig(config.uuid, _subconfig)
|
}
|
|
printTypeChange = (record, values) => {
|
const { config } = this.props
|
let _printbtns = JSON.parse(JSON.stringify(this.state.printbtns))
|
let _subconfig = JSON.parse(JSON.stringify(this.state.subconfig))
|
|
_printbtns = _printbtns.map(item => {
|
if (record.uuid === item.uuid) {
|
item.verify.printerTypeList = item.verify.printerTypeList.map(cell => {
|
if (cell.key === values.key) {
|
cell.printer = values.printer
|
}
|
|
return cell
|
})
|
|
_subconfig.action[item.uuid].printer = _subconfig.action[item.uuid].printer || {}
|
_subconfig.action[item.uuid].printer.printerList = _subconfig.action[item.uuid].printer.printerList || {}
|
_subconfig.action[item.uuid].printer.printerList[values.Value] = values.printer
|
}
|
|
return item
|
})
|
|
this.setState({
|
printbtns: _printbtns,
|
subconfig: _subconfig
|
})
|
|
this.props.handleconfig(config.uuid, _subconfig)
|
}
|
|
handleEdit = (record, type) => {
|
if (type === 'action') {
|
this.actionForm.edit(record)
|
} else if (type === 'print') {
|
this.printForm.edit(record)
|
} else if (type === 'printtype') {
|
this.printTypeForm.edit(record)
|
} else if (type === 'column') {
|
this.columnForm.edit(record)
|
}
|
|
if (type === 'printtype') return
|
|
let node = document.getElementById('verify-card-box-tab').parentNode
|
|
if (node && node.scrollTop) {
|
let inter = Math.ceil(node.scrollTop / 10)
|
|
let timer = setInterval(() => {
|
if (node.scrollTop - inter > 0) {
|
node.scrollTop = node.scrollTop - inter
|
} else {
|
node.scrollTop = 0
|
clearInterval(timer)
|
}
|
}, 10)
|
}
|
}
|
|
handleUpDown = (record, direction) => {
|
let _config = JSON.parse(JSON.stringify(this.state.config))
|
let _subconfig = JSON.parse(JSON.stringify(this.state.subconfig))
|
let index = 0
|
|
_config.columns = _config.columns.filter((item, i) => {
|
if (item.uuid === record.uuid) {
|
index = i
|
}
|
|
return item.uuid !== record.uuid
|
})
|
if ((index === 0 && direction === 'up') || (index === _config.columns.length && direction === 'down')) {
|
return
|
}
|
|
if (direction === 'up') {
|
_config.columns.splice(index - 1, 0, record)
|
} else {
|
_config.columns.splice(index + 1, 0, record)
|
}
|
|
_config.columns = _config.columns.map((item, index) => {
|
_subconfig.columns[item.uuid] = {
|
label: item.label,
|
Width: item.Width,
|
hidden: item.hidden,
|
fixed: item.fixed,
|
sort: index
|
}
|
|
return item
|
})
|
|
this.setState({
|
config: _config,
|
subconfig: _subconfig
|
})
|
|
this.props.handleconfig(_config.uuid, _subconfig)
|
}
|
|
handleConfirm = () => {
|
const { config } = this.state
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
let _config = {}
|
_config.setting = values
|
_config.action = config.action.map(item => {
|
return {
|
uuid: item.uuid,
|
shortcut: item.shortcut || '',
|
printer: item.printer || ''
|
}
|
})
|
|
resolve(_config)
|
}
|
})
|
})
|
}
|
|
changebtnfix = (e) => {
|
let val = e.target.value
|
const { config } = this.props
|
let subconfig = JSON.parse(JSON.stringify(this.state.subconfig))
|
|
subconfig.setting.actionfixed = val === 'true'
|
|
this.setState({
|
subconfig: subconfig
|
})
|
this.props.handleconfig(config.uuid, subconfig)
|
}
|
|
changecolfix = (e) => {
|
let val = e.target.value
|
const { config } = this.props
|
let subconfig = JSON.parse(JSON.stringify(this.state.subconfig))
|
|
subconfig.setting.columnfixed = val === 'true'
|
|
this.setState({
|
subconfig: subconfig
|
})
|
this.props.handleconfig(config.uuid, subconfig)
|
}
|
|
changecheckbox = (val) => {
|
const { config } = this.props
|
let subconfig = JSON.parse(JSON.stringify(this.state.subconfig))
|
|
subconfig.setting.tableType = val
|
|
this.setState({
|
subconfig: subconfig
|
})
|
this.props.handleconfig(config.uuid, subconfig)
|
}
|
|
changeEasyCode = ({ target: { value } }) => {
|
const { config } = this.props
|
let subconfig = JSON.parse(JSON.stringify(this.state.subconfig))
|
|
subconfig.easyCode = value
|
|
this.setState({
|
subconfig: subconfig
|
})
|
this.props.handleconfig(config.uuid, subconfig)
|
}
|
|
render() {
|
const { config } = this.props
|
const { actionColumns, printColumns, colColumns, printTypeColumns, printbtns } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<Tabs defaultActiveKey="1" tabPosition="left" className="verify-card-box-vertical-tab">
|
<TabPane tab="基础设置" key="1">
|
<Form {...formItemLayout}>
|
<Row gutter={24}>
|
{config.type === 'main' ? <Col span={9}>
|
<Form.Item label="助记码">
|
<Input defaultValue={config.easyCode} placeholder="" autoComplete="off" onChange={this.changeEasyCode}/>
|
</Form.Item>
|
</Col> : null}
|
<Col span={9}>
|
<Form.Item label="表格属性">
|
<Select defaultValue={config.setting.tableType} onChange={this.changecheckbox}>
|
<Select.Option value="">不可选</Select.Option>
|
<Select.Option value="radio">单选</Select.Option>
|
<Select.Option value="checkbox">多选</Select.Option>
|
</Select>
|
</Form.Item>
|
</Col>
|
{config.type === 'main' ? <Col span={9}>
|
<Form.Item label="固定按钮">
|
<Radio.Group defaultValue={config.setting.actionfixed ? 'true' : 'false'} onChange={this.changebtnfix}>
|
<Radio value="true">是</Radio>
|
<Radio value="false">否</Radio>
|
</Radio.Group>
|
</Form.Item>
|
</Col> : null}
|
{config.type === 'main' ? <Col span={9}>
|
<Form.Item label="固定表头">
|
<Radio.Group defaultValue={config.setting.columnfixed ? 'true' : 'false'} onChange={this.changecolfix}>
|
<Radio value="true">是</Radio>
|
<Radio value="false">否</Radio>
|
</Radio.Group>
|
</Form.Item>
|
</Col> : null}
|
</Row>
|
</Form>
|
</TabPane>
|
<TabPane tab="按钮设置" key="action">
|
<ActionForm
|
dict={this.props.dict}
|
actionChange={this.actionChange}
|
wrappedComponentRef={(inst) => this.actionForm = inst}
|
/>
|
<Table
|
bordered
|
rowKey="uuid"
|
className="custom-table"
|
dataSource={this.state.config.action}
|
columns={actionColumns}
|
pagination={false}
|
/>
|
</TabPane>
|
<TabPane tab="显示列设置" key="column">
|
<ColumnForm
|
dict={this.props.dict}
|
columnChange={this.columnChange}
|
wrappedComponentRef={(inst) => this.columnForm = inst}
|
/>
|
<Table
|
bordered
|
rowKey="uuid"
|
className="custom-table"
|
dataSource={this.state.config.columns}
|
columns={colColumns}
|
pagination={false}
|
/>
|
</TabPane>
|
{printbtns && printbtns.length > 0 ? <TabPane tab="打印设置" key="print">
|
<PrintForm
|
dict={this.props.dict}
|
actionChange={this.printChange}
|
wrappedComponentRef={(inst) => this.printForm = inst}
|
/>
|
<Table
|
bordered
|
rowKey="uuid"
|
className="custom-table"
|
dataSource={printbtns}
|
columns={printColumns}
|
expandedRowRender={record => <div style={{marginTop: '-5px'}}>
|
{!record.verify || !record.verify.printerTypeList || record.verify.printerTypeList.length === 0 ?
|
<p>此按钮未添加打印类型</p> : null
|
}
|
{record.verify && record.verify.printerTypeList && record.verify.printerTypeList.length > 0 ?
|
<div>
|
<PrintTypeForm
|
dict={this.props.dict}
|
printers={record.printparam ? record.printparam.printers : []}
|
actionTypeChange={(values) => this.printTypeChange(record, values)}
|
wrappedComponentRef={(inst) => this.printTypeForm = inst}
|
/>
|
<Table
|
bordered
|
rowKey="key"
|
className="custom-table"
|
dataSource={record.verify.printerTypeList}
|
columns={printTypeColumns}
|
pagination={false}
|
/>
|
</div> : null
|
}
|
</div>}
|
pagination={false}
|
/>
|
</TabPane> : null}
|
</Tabs>
|
)
|
}
|
}
|
|
export default Form.create()(VerifyCard)
|
