import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Tabs, Row, Col, Button, notification, Modal, message, InputNumber, Input, Select, Radio } from 'antd'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import CodeMirror from '@/templates/zshare/codemirror'
|
import EditTable from './editable'
|
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
|
class VerifyCard extends Component {
|
static propTpyes = {
|
floor: PropTypes.any, // 是否为子表
|
btnTab: PropTypes.any, // 表单标签页（按钮）参数
|
config: PropTypes.any, // 表单标签页参数
|
dict: PropTypes.object, // 字典项
|
card: PropTypes.object,
|
columns: PropTypes.array
|
}
|
|
state = {
|
verify: {},
|
templates: [],
|
selectimg: '',
|
printMode: 'normal'
|
}
|
|
UNSAFE_componentWillMount() {
|
let _verify = this.props.card.verify || {}
|
|
_verify.Template = _verify.Template || ''
|
_verify.printerTypeList = _verify.printerTypeList || []
|
_verify.linkType = _verify.linkType || 'system'
|
_verify.printMode = _verify.printMode || 'normal'
|
|
this.setState({
|
verify: _verify,
|
linkType: _verify.linkType,
|
printMode: _verify.printMode,
|
printFunc: _verify.printFunc || '// Function(data, form, printer, notification) data-打印数据列表，form-表单信息（不存在时为{}），printer-打印设置，notification-信息提示控件'
|
})
|
}
|
|
componentDidMount() {
|
let _sql = `select PrintTempNO,Images,PrintTempNO+PrintTempName as PN from sPrintTemplate
|
where appkey= @appkey@ and Deleted=0
|
union select ID,Images,a.PrintTempNO+PrintTempName as PN
|
from (select * from sPrintTemplate where appkey= '' and Deleted=0 ) a
|
left join (select PrintTempNO from sPrintTemplate where appkey= @appkey@ and Deleted=0 ) b
|
on a.PrintTempNO=b.PrintTempNO
|
left join (select Srcid from sPrintTemplate_Log where appkey='' and apicode= @appkey@ and Deleted=0 ) c
|
on a.ID=c.Srcid where b.PrintTempNO is null and c.Srcid is null`
|
|
let param = {
|
func: 'sPC_Get_SelectedList',
|
LText: Utils.formatOptions(_sql),
|
obj_name: 'data',
|
arr_field: 'PN,PrintTempNO,Images'
|
}
|
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
|
param.secretkey = Utils.encrypt(param.LText, param.timestamp)
|
|
param.open_key = Utils.encryptOpenKey(param.secretkey, param.timestamp) // 云端数据验证
|
|
Api.getSystemConfig(param).then(res => {
|
if (res.status) {
|
let temps = res.data.map(temp => {
|
return {
|
value: temp.PrintTempNO,
|
text: temp.PN,
|
img: temp.Images
|
}
|
})
|
|
let Template = this.state.verify.Template
|
let selectimg = ''
|
let selectTemp = temps.filter(temp => temp.value === Template)[0]
|
|
if (!selectTemp) {
|
Template = ''
|
} else {
|
selectimg = selectTemp.img
|
}
|
|
this.setState({
|
selectimg: selectimg,
|
templates: temps,
|
verify: {
|
...this.state.verify,
|
Template: Template
|
}
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
showError = (errorType) => {
|
if (errorType === 'S') {
|
notification.success({
|
top: 92,
|
message: '执行成功！',
|
duration: 2
|
})
|
} else if (errorType === 'Y') {
|
Modal.success({
|
title: '执行成功！'
|
})
|
} else if (errorType === 'F') {
|
notification.error({
|
className: 'notification-custom-error',
|
top: 92,
|
message: '执行失败！',
|
duration: 10
|
})
|
} else if (errorType === 'N') {
|
notification.error({
|
top: 92,
|
message: '执行失败！',
|
duration: 10
|
})
|
} else if (errorType === 'E') {
|
Modal.error({
|
title: '执行失败！'
|
})
|
} else if (errorType === 'NM') {
|
message.error('执行失败！')
|
}
|
}
|
|
timeChange = (val, type) => {
|
const { verify } = this.state
|
|
this.setState({
|
verify: {...verify, [type]: val}
|
})
|
}
|
|
changeTemplate = (val) => {
|
const { templates } = this.state
|
|
let temp = templates.filter(temp => temp.value === val)[0]
|
|
this.setState({
|
selectimg: temp.img
|
})
|
}
|
|
handleConfirm = () => {
|
const { verify } = this.state
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
let _verify = {...verify, ...values}
|
|
if (this.refs.editTable && this.refs.editTable.state) {
|
let printTypes = this.refs.editTable.state.dataSource
|
|
let emptys = printTypes.filter(item => !item.Value || !item.Text)
|
let valMap = new Map()
|
let isvalid = true
|
|
printTypes.forEach(item => {
|
if (valMap.has(item.Value)) {
|
isvalid = false
|
} else {
|
valMap.set(item.Value, item.Text)
|
}
|
})
|
|
if (emptys.length > 0) {
|
notification.warning({
|
top: 92,
|
message: '打印类型表格中Value、Text字段不可为空!',
|
duration: 5
|
})
|
return
|
} else if (!isvalid) {
|
notification.warning({
|
top: 92,
|
message: '打印类型表格中Value字段不可重复!',
|
duration: 5
|
})
|
return
|
}
|
|
_verify.printerTypeList = printTypes
|
}
|
|
resolve(_verify)
|
} else {
|
notification.warning({
|
top: 92,
|
message: '链接地址与打印模板不可为空!',
|
duration: 5
|
})
|
}
|
})
|
})
|
}
|
|
changePrintMode = (e) => {
|
let value = e.target.value
|
|
this.setState({
|
printMode: value
|
})
|
}
|
|
changeLinkType = (e) => {
|
let value = e.target.value
|
|
this.setState({
|
linkType: value
|
}, () => {
|
if (value === 'system') {
|
this.props.form.setFieldsValue({
|
linkUrl: '127.0.0.1:13529'
|
})
|
}
|
})
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
|
const { verify, linkType, printMode, printFunc } = 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-print-box" onChange={this.tabchange}>
|
<TabPane tab="打印验证" key="1">
|
<Form {...formItemLayout}>
|
<Row gutter={24}>
|
<Col span={8}>
|
<Form.Item label={'打印模式'}>
|
{getFieldDecorator('printMode', {
|
initialValue: printMode || 'normal'
|
})(
|
<Radio.Group onChange={this.changePrintMode}>
|
<Radio value="normal">标准</Radio>
|
<Radio value="custom">自定义</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label={'链接类型'}>
|
{getFieldDecorator('linkType', {
|
initialValue: linkType || 'system'
|
})(
|
<Radio.Group onChange={this.changeLinkType}>
|
<Radio value="system">系统</Radio>
|
<Radio value="custom">自定义</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label={'链接地址'}>
|
{getFieldDecorator('linkUrl', {
|
initialValue: verify.linkUrl || '127.0.0.1:13529',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.input'] + '链接地址!'
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" disabled={linkType === 'system'} />)}
|
</Form.Item>
|
</Col>
|
{printMode === 'custom' ? <Col span={24}>
|
<Form.Item label={'处理函数'} className="printFunc">
|
{getFieldDecorator('printFunc', {
|
initialValue: printFunc || '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.input'] + '处理函数!'
|
}
|
]
|
})(
|
<CodeMirror mode="text/javascript"/>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{printMode === 'normal' ? <Col span={8}>
|
<Form.Item label={'打印模板'}>
|
{getFieldDecorator('Template', {
|
initialValue: verify.Template || '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.select'] + '打印模板!'
|
}
|
]
|
})(
|
<Select dropdownClassName="print-template-setting" onChange={this.changeTemplate}>
|
{this.state.templates.map((option, key) =>
|
<Select.Option id={key} key={key} value={option.value}>
|
{option.text}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col> : null }
|
{printMode === 'normal' ? <Col span={8} offset={8}>
|
<img className="legend" src={this.state.selectimg} alt=""/>
|
</Col> : null }
|
</Row>
|
</Form>
|
</TabPane>
|
<TabPane tab={
|
<span>
|
打印类型
|
{verify.printerTypeList.length ? <span className="count-tip">{verify.printerTypeList.length}</span> : null}
|
</span>
|
} key="2">
|
<Form {...formItemLayout}>
|
<Row gutter={24}>
|
<Col span={24} className="print-tip">
|
<Form.Item label={'提示'}>
|
如果此按钮涉及多种数据类型的打印，需要设置不同的打印机时，请添加打印类型控制信息，用户在自定义设置中，可根据打印类型设置对应的打印机。
|
打印时，数据的打印类型取决于返回值（内部或外部接口）中的 printType 字段。
|
注：返回值中的 printCount、templateID 字段，可分别控制打印数量和打印模板。
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<EditTable data={verify.printerTypeList} dict={this.props.dict} ref="editTable"/>
|
</Col>
|
</Row>
|
</Form>
|
</TabPane>
|
<TabPane tab="信息提示" key="7">
|
<Form {...formItemLayout}>
|
<Row gutter={24}>
|
<Col offset={6} span={6}>
|
<Form.Item label={'提示编码'}>
|
<span className="errorval"> S </span>
|
<Button onClick={() => {this.showError('S')}} type="primary" size="small">
|
查看
|
</Button>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label={'停留时间'}>
|
<InputNumber defaultValue={verify.stime || 2} min={1} max={10000} precision={0} onChange={(val) => {this.timeChange(val, 'stime')}} />
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row gutter={24}>
|
<Col offset={6} span={6}>
|
<Form.Item label={'提示编码'}>
|
<span className="errorval"> Y </span>
|
<Button onClick={() => {this.showError('Y')}} type="primary" size="small">
|
查看
|
</Button>
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row gutter={24}>
|
<Col offset={6} span={6}>
|
<Form.Item label={'提示编码'}>
|
<span className="errorval"> N </span>
|
<Button onClick={() => {this.showError('N')}} type="primary" size="small">
|
查看
|
</Button>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label={'停留时间'}>
|
<InputNumber defaultValue={verify.ntime || 10} min={1} max={10000} precision={0} onChange={(val) => {this.timeChange(val, 'ntime')}} />
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row gutter={24}>
|
<Col offset={6} span={6}>
|
<Form.Item label={'提示编码'}>
|
<span className="errorval"> F </span>
|
<Button onClick={() => {this.showError('F')}} type="primary" size="small">
|
查看
|
</Button>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label={'停留时间'}>
|
<InputNumber defaultValue={verify.ftime || 10} min={1} max={10000} precision={0} onChange={(val) => {this.timeChange(val, 'ftime')}} />
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row gutter={24}>
|
<Col offset={6} span={6}>
|
<Form.Item label={'提示编码'}>
|
<span className="errorval"> E </span>
|
<Button onClick={() => {this.showError('E')}} type="primary" size="small">
|
查看
|
</Button>
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row gutter={24}>
|
<Col offset={6} span={6}>
|
<Form.Item label={'提示编码'}>
|
<span className="errorval"> NM </span>
|
<Button onClick={() => {this.showError('NM')}} type="primary" size="small">
|
查看
|
</Button>
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row gutter={24}>
|
<Col offset={6} span={6}>
|
<Form.Item label={'提示编码'}>
|
<span className="errorval"> -1 </span>
|
不提示
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
</TabPane>
|
</Tabs>
|
</div>
|
)
|
}
|
}
|
|
export default Form.create()(VerifyCard)
|
