import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Tabs, Row, Col, Radio, Table, Icon, Select, notification } from 'antd'
|
|
import Utils from '@/utils/utils.js'
|
|
import ActionForm from './actionform'
|
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 // 页面配置
|
}
|
|
state = {
|
colColumns: [
|
{
|
title: '字段名',
|
dataIndex: 'field',
|
width: '35%'
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '25%',
|
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>
|
<span className="operation-btn" title="状态切换" onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><Icon type="swap" /></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: '打印机',
|
dataIndex: 'printer',
|
width: '30%'
|
},
|
{
|
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() {
|
const { config } = this.props
|
|
this.setState({
|
config: JSON.parse(JSON.stringify(config))
|
})
|
}
|
|
componentDidMount() {
|
let printbtns = this.state.config.action.filter(item => item.OpenType === 'funcbutton' && item.funcType === 'print')
|
|
printbtns.forEach(item => {
|
if (!item.verify || !item.verify.linkUrl) {
|
notification.warning({
|
top: 92,
|
message: '打印按钮《' + item.label + '》设置错误!',
|
duration: 10
|
})
|
} 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))
|
|
let _config = JSON.parse(JSON.stringify(this.state.config))
|
|
_config.action = _config.action.map(cell => {
|
if (item.uuid === cell.uuid) {
|
|
cell.printer = cell.printer || data.defaultPrinter
|
cell.printers = printers.map(print => {
|
return {
|
value: print,
|
text: print
|
}
|
})
|
}
|
return cell
|
})
|
|
this.setState({
|
config: _config
|
})
|
} else if (data && data.cmd === 'getPrinters' && !data.status) {
|
notification.warning({
|
top: 92,
|
message: data.message,
|
duration: 10
|
})
|
}
|
}
|
|
socket.onerror = () => {
|
notification.warning({
|
top: 92,
|
message: '无法连接到:' + item.verify.linkUrl,
|
duration: 10
|
})
|
}
|
}
|
})
|
}
|
|
columnChange = (values) => {
|
let verify = JSON.parse(JSON.stringify(this.state.verify))
|
|
if (values.uuid) {
|
verify.uniques = verify.uniques.map(item => {
|
if (item.uuid === values.uuid) {
|
return values
|
} else {
|
return item
|
}
|
})
|
} else {
|
values.uuid = Utils.getuuid()
|
verify.uniques.push(values)
|
}
|
|
this.setState({
|
verify: verify
|
})
|
}
|
|
actionChange = (values) => {
|
let config = JSON.parse(JSON.stringify(this.state.config))
|
|
config.action = config.action.map(item => {
|
if (values.uuid === item.uuid) {
|
item = {...item, ...values}
|
}
|
|
return item
|
})
|
|
this.setState({
|
config: config
|
})
|
}
|
|
handleEdit = (record, type) => {
|
if (type === 'action') {
|
this.actionForm.edit(record)
|
} else if (type === 'column') {
|
this.uniqueForm.edit(record)
|
}
|
|
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)
|
}
|
}
|
|
handleStatus = (record) => {
|
let verify = JSON.parse(JSON.stringify(this.state.verify))
|
record.status = record.status === 'false' ? 'true' : 'false'
|
|
verify.scripts = verify.scripts.map(item => {
|
if (item.uuid === record.uuid) {
|
return record
|
} else {
|
return item
|
}
|
})
|
|
this.setState({
|
verify: verify
|
})
|
}
|
|
handleUpDown = (record, type, direction) => {
|
let verify = JSON.parse(JSON.stringify(this.state.verify))
|
let index = 0
|
|
verify.customverifys = verify.customverifys.filter((item, i) => {
|
if (item.uuid === record.uuid) {
|
index = i
|
}
|
|
return item.uuid !== record.uuid
|
})
|
if ((index === 0 && direction === 'up') || (index === verify.customverifys.length && direction === 'down')) {
|
return
|
}
|
|
if (direction === 'up') {
|
verify.customverifys.splice(index - 1, 0, record)
|
} else {
|
verify.customverifys.splice(index + 1, 0, record)
|
}
|
|
this.setState({
|
verify: verify
|
})
|
}
|
|
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 || '',
|
shortcutkey: item.shortcutkey || '',
|
printer: item.printer || ''
|
}
|
})
|
|
resolve(_config)
|
}
|
})
|
})
|
}
|
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
const { actionColumns, config } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<div id="verify-card-box-tab">
|
<Tabs defaultActiveKey="1" className="verify-card-box">
|
<TabPane tab="基础设置" key="1">
|
<Form {...formItemLayout}>
|
<Row gutter={24}>
|
<Col span={8}>
|
<Form.Item label="固定按钮">
|
{getFieldDecorator('actionfixed', {
|
initialValue: config.setting.actionfixed ? 'true' : 'false'
|
})(
|
<Radio.Group>
|
<Radio value="true">是</Radio>
|
<Radio value="false">否</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="固定表头">
|
{getFieldDecorator('columnfixed', {
|
initialValue: config.setting.columnfixed ? 'true' : 'false'
|
})(
|
<Radio.Group>
|
<Radio value="true">是</Radio>
|
<Radio value="false">否</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="表格属性">
|
{getFieldDecorator('tableType', {
|
initialValue: config.setting.tableType || 'checkbox'
|
})(
|
<Select>
|
<Select.Option value="">不可选</Select.Option>
|
<Select.Option value="radio">单选</Select.Option>
|
<Select.Option value="checkbox">多选</Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
</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={config.action}
|
columns={actionColumns}
|
pagination={false}
|
/>
|
</TabPane>
|
</Tabs>
|
</div>
|
)
|
}
|
}
|
|
export default Form.create()(VerifyCard)
|
