import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Tabs, Row, Col, Radio, Button, Table, Popconfirm, Icon, notification, Modal, message, InputNumber } from 'antd'
|
import moment from 'moment'
|
import Utils from '@/utils/utils.js'
|
import UniqueForm from './uniqueform'
|
import CustomForm from './customform'
|
import BillcodeForm from './billcodeform'
|
import VoucherForm from './voucherform'
|
import Api from '@/api'
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
|
class VerifyCard extends Component {
|
static propTpyes = {
|
floor: PropTypes.any, // 是否为子表
|
dict: PropTypes.object, // 字典项
|
card: PropTypes.object,
|
columns: PropTypes.array
|
}
|
|
state = {
|
verify: {},
|
fields: [],
|
orderModular: [],
|
orderModularDetail: [],
|
voucher: [],
|
voucherDetail: [],
|
uniqueColumns: [
|
{
|
title: '字段名',
|
dataIndex: 'field',
|
width: '55%'
|
},
|
{
|
title: '报错编码',
|
dataIndex: 'errorCode',
|
width: '20%'
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '25%',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(<div>
|
<span className="operation-btn" onClick={() => this.handleEdit(record, 'unique')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
|
<Popconfirm title="确定删除吗?" onConfirm={() => this.handleDelete(record, 'unique')}>
|
<span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
|
</Popconfirm>
|
<span className="operation-btn" onClick={() => this.handleUpDown(record, 'unique', 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
|
<span className="operation-btn" onClick={() => this.handleUpDown(record, 'unique', 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
|
</div>)
|
}
|
],
|
customColumns: [
|
{
|
title: 'SQL',
|
dataIndex: 'sql',
|
width: '50%'
|
},
|
{
|
title: '结果处理',
|
dataIndex: 'resultName',
|
width: '10%'
|
},
|
{
|
title: '提示信息',
|
dataIndex: 'errmsg',
|
width: '15%'
|
},
|
{
|
title: '报错编码',
|
dataIndex: 'errorCode',
|
width: '10%'
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '15%',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(<div>
|
<span className="operation-btn" onClick={() => this.handleEdit(record, 'customverify')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
|
<Popconfirm title="确定删除吗?" onConfirm={() => this.handleDelete(record, 'customverify')}>
|
<span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
|
</Popconfirm>
|
<span className="operation-btn" onClick={() => this.handleUpDown(record, 'customverify', 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
|
<span className="operation-btn" onClick={() => this.handleUpDown(record, 'customverify', 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
|
</div>)
|
}
|
],
|
orderColumns: [
|
{
|
title: '函数变量',
|
dataIndex: 'fieldName',
|
width: '15%',
|
render: (text, record) => (`${record.fieldName || ''}(${record.field})`)
|
},
|
{
|
title: '类型',
|
dataIndex: 'billType',
|
width: '15%',
|
},
|
{
|
title: '凭证类型',
|
dataIndex: 'ModularCodeName',
|
width: '15%'
|
},
|
{
|
title: '凭证标识',
|
dataIndex: 'ModularDetailCode',
|
width: '15%'
|
},
|
{
|
title: '关联字段',
|
dataIndex: 'linkFieldName',
|
width: '15%',
|
render: (text, record) => (record.linkField ? `${record.linkFieldName || ''}(${record.linkField})` : '')
|
},
|
{
|
title: '位数',
|
dataIndex: 'Type',
|
width: '10%'
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '15%',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(<div>
|
<span className="operation-btn" onClick={() => this.handleEdit(record, 'ordercode')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
|
<Popconfirm title="确定删除吗?" onConfirm={() => this.handleDelete(record, 'ordercode')}>
|
<span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
|
</Popconfirm>
|
<span className="operation-btn" onClick={() => this.handleUpDown(record, 'ordercode', 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
|
<span className="operation-btn" onClick={() => this.handleUpDown(record, 'ordercode', 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
|
</div>)
|
}
|
]
|
}
|
|
UNSAFE_componentWillMount() {
|
let _verify = this.props.card.verify || {}
|
|
this.setState({
|
verify: {
|
invalid: _verify.invalid || 'false',
|
uniques: _verify.uniques || [],
|
accountdate: _verify.accountdate || 'false',
|
customverifys: _verify.customverifys || [],
|
billcodes: _verify.billcodes || [],
|
voucher: _verify.voucher || {enabled: false},
|
}
|
})
|
|
if (this.props.card.OpenType === 'pop') {
|
Api.getSystemConfig({
|
func: 'sPC_Get_LongParam',
|
MenuID: this.props.card.uuid
|
}).then(res => {
|
if (res.status) {
|
let _LongParam = ''
|
if (res.LongParam) {
|
_LongParam = window.decodeURIComponent(window.atob(res.LongParam))
|
try {
|
_LongParam = JSON.parse(_LongParam)
|
} catch (e) {
|
_LongParam = ''
|
}
|
}
|
|
if (!_LongParam) return
|
|
let _fields = []
|
if (_LongParam.groups.length > 0) {
|
_LongParam.groups.forEach(group => {
|
group.sublist.forEach(field => {
|
_fields.push(field)
|
})
|
})
|
} else {
|
_fields = _LongParam.fields
|
}
|
|
this.setState({
|
fields: _fields
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
}
|
}
|
|
componentDidMount() {
|
// 获取生成单号一级菜单
|
let defer1 = new Promise(resolve => {
|
let _orderSql = 'select ID,ModularCode+ModularName+ModularNo as NameNO from sModular where deleted=0 order by ID asc'
|
_orderSql = Utils.formatOptions(_orderSql)
|
|
let orderParam = {
|
func: 'sPC_Get_SelectedList',
|
LText: _orderSql,
|
obj_name: 'data',
|
arr_field: 'ID,NameNO'
|
}
|
|
orderParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
|
orderParam.secretkey = Utils.encrypt(orderParam.LText, orderParam.timestamp)
|
|
Api.getSystemConfig(orderParam).then(res => {
|
if (res.status) {
|
resolve(res)
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
})
|
|
// 获取生成单号二级菜单
|
let defer2 = new Promise(resolve => {
|
let _orderDetailSql = 'select ModularDetailCode,ModularDetailCode+ModularDetailName as CodeName,BID,Type from sModularDetail where Deleted=0'
|
_orderDetailSql = Utils.formatOptions(_orderDetailSql)
|
|
let orderDetailParam = {
|
func: 'sPC_Get_SelectedList',
|
LText: _orderDetailSql,
|
obj_name: 'data',
|
arr_field: 'ModularDetailCode,CodeName,BID,Type'
|
}
|
|
orderDetailParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
|
orderDetailParam.secretkey = Utils.encrypt(orderDetailParam.LText, orderDetailParam.timestamp)
|
|
Api.getSystemConfig(orderDetailParam).then(res => {
|
if (res.status) {
|
resolve(res)
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
})
|
|
Promise.all([defer1, defer2]).then(result => {
|
this.setState({
|
orderModular: result[0].data,
|
orderModularDetail: result[1].data
|
})
|
})
|
|
// 获取凭证二级菜单
|
let defer3 = new Promise(resolve => {
|
let _voucherSql = 'select ID,ModularCode+ModularName+ModularNo as NameNO,TypeCharOne from sModular where deleted=0'
|
_voucherSql = Utils.formatOptions(_voucherSql)
|
|
let voucherParam = {
|
func: 'sPC_Get_SelectedList',
|
LText: _voucherSql,
|
obj_name: 'data',
|
arr_field: 'ID,NameNO,TypeCharOne'
|
}
|
|
voucherParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
|
voucherParam.secretkey = Utils.encrypt(voucherParam.LText, voucherParam.timestamp)
|
|
Api.getSystemConfig(voucherParam).then(res => {
|
if (res.status) {
|
resolve(res)
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
})
|
|
// 获取凭证三级菜单
|
let defer4 = new Promise(resolve => {
|
let _voucherDetailSql = 'select ModularDetailCode,ModularDetailCode+ModularDetailName as CodeName,BID, VoucherTypeTwo, IDefine1 from sModularDetail where Deleted=0 and VoucherTypeTwo!=\'\''
|
_voucherDetailSql = Utils.formatOptions(_voucherDetailSql)
|
|
let voucherDetailParam = {
|
func: 'sPC_Get_SelectedList',
|
LText: _voucherDetailSql,
|
obj_name: 'data',
|
arr_field: 'ModularDetailCode,CodeName,BID,VoucherTypeTwo,IDefine1'
|
}
|
|
voucherDetailParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
|
voucherDetailParam.secretkey = Utils.encrypt(voucherDetailParam.LText, voucherDetailParam.timestamp)
|
|
Api.getSystemConfig(voucherDetailParam).then(res => {
|
if (res.status) {
|
resolve(res)
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
})
|
|
Promise.all([defer3, defer4]).then(result => {
|
this.setState({
|
voucher: result[0].data,
|
voucherDetail: result[1].data
|
})
|
})
|
}
|
|
uniqueChange = (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
|
})
|
}
|
|
customChange = (values) => {
|
let verify = JSON.parse(JSON.stringify(this.state.verify))
|
|
if (values.uuid) {
|
verify.customverifys = verify.customverifys.map(item => {
|
if (item.uuid === values.uuid) {
|
return values
|
} else {
|
return item
|
}
|
})
|
} else {
|
values.uuid = Utils.getuuid()
|
verify.customverifys.push(values)
|
}
|
|
this.setState({
|
verify: verify
|
})
|
}
|
|
orderChange = (values) => {
|
let verify = JSON.parse(JSON.stringify(this.state.verify))
|
|
if (values.uuid) {
|
verify.billcodes = verify.billcodes.map(item => {
|
if (item.uuid === values.uuid) {
|
return values
|
} else {
|
return item
|
}
|
})
|
} else {
|
values.uuid = Utils.getuuid()
|
verify.billcodes.push(values)
|
}
|
|
this.setState({
|
verify: verify
|
})
|
}
|
|
onOptionChange = (e, key) => {
|
const { verify } = this.state
|
let value = e.target.value
|
|
this.setState({
|
verify: {...verify, [key]: value}
|
})
|
}
|
|
handleDelete = (record, type) => {
|
const { verify } = this.state
|
|
if (type === 'customverify') {
|
verify.customverifys = verify.customverifys.filter(item => item.uuid !== record.uuid)
|
} else if (type === 'unique') {
|
verify.uniques = verify.uniques.filter(item => item.uuid !== record.uuid)
|
} else if (type === 'ordercode') {
|
verify.billcodes = verify.billcodes.filter(item => item.uuid !== record.uuid)
|
}
|
|
this.setState({ verify: verify })
|
}
|
|
handleEdit = (record, type) => {
|
if (type === 'customverify') {
|
this.customForm.edit(record)
|
} else if (type === 'unique') {
|
this.uniqueForm.edit(record)
|
} else if (type === 'ordercode') {
|
this.orderForm.edit(record)
|
}
|
}
|
|
handleUpDown = (record, type, direction) => {
|
let verify = JSON.parse(JSON.stringify(this.state.verify))
|
let index = 0
|
|
if (type === 'customverify') {
|
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
|
})
|
} else if (type === 'unique') {
|
verify.uniques = verify.uniques.filter((item, i) => {
|
if (item.uuid === record.uuid) {
|
index = i
|
}
|
|
return item.uuid !== record.uuid
|
})
|
if ((index === 0 && direction === 'up') || (index === verify.uniques.length && direction === 'down')) {
|
return
|
}
|
|
if (direction === 'up') {
|
verify.uniques.splice(index - 1, 0, record)
|
} else {
|
verify.uniques.splice(index + 1, 0, record)
|
}
|
|
this.setState({
|
verify: verify
|
})
|
} else if (type === 'ordercode') {
|
verify.billcodes = verify.billcodes.filter((item, i) => {
|
if (item.uuid === record.uuid) {
|
index = i
|
}
|
|
return item.uuid !== record.uuid
|
})
|
if ((index === 0 && direction === 'up') || (index === verify.billcodes.length && direction === 'down')) {
|
return
|
}
|
|
if (direction === 'up') {
|
verify.billcodes.splice(index - 1, 0, record)
|
} else {
|
verify.billcodes.splice(index + 1, 0, record)
|
}
|
|
this.setState({
|
verify: verify
|
})
|
}
|
}
|
|
voucherChange = (voucher) => {
|
const { verify } = this.state
|
|
this.setState({
|
verify: {
|
...verify,
|
voucher: voucher
|
}
|
})
|
}
|
|
showError = (errorType) => {
|
if (errorType === 'S') {
|
notification.success({
|
top: 92,
|
message: '执行成功！',
|
duration: 2
|
})
|
} else if (errorType === 'F') {
|
notification.error({
|
className: 'notification-custom-error',
|
top: 92,
|
message: '执行失败！',
|
duration: 15
|
})
|
} else if (errorType === 'N') {
|
notification.error({
|
top: 92,
|
message: '执行失败！',
|
duration: 15
|
})
|
} 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}
|
})
|
}
|
|
render() {
|
// const { getFieldDecorator } = this.props.form
|
const { verify, fields, uniqueColumns, customColumns, orderColumns, orderModular, orderModularDetail, voucher, voucherDetail } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<Tabs defaultActiveKey="1" className="verify-card-box" onChange={this.tabchange}>
|
<TabPane tab="基础验证" key="1">
|
<Form {...formItemLayout}>
|
<Row gutter={24}>
|
<Col span={12}>
|
<Form.Item label={'账期验证'}>
|
<Radio.Group value={verify.accountdate} onChange={(e) => {this.onOptionChange(e, 'accountdate')}}>
|
<Radio value="true">开启</Radio>
|
<Radio value="false">不开启</Radio>
|
</Radio.Group>
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label={'失效验证'}>
|
<Radio.Group value={verify.invalid} onChange={(e) => {this.onOptionChange(e, 'invalid')}}>
|
<Radio value="true">开启</Radio>
|
<Radio value="false">不开启</Radio>
|
</Radio.Group>
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
</TabPane>
|
<TabPane tab="唯一性验证" key="2">
|
<UniqueForm
|
fields={fields}
|
dict={this.props.dict}
|
uniqueChange={this.uniqueChange}
|
wrappedComponentRef={(inst) => this.uniqueForm = inst}
|
/>
|
<Table
|
bordered
|
rowKey="uuid"
|
className="custom-table"
|
dataSource={verify.uniques}
|
columns={uniqueColumns}
|
pagination={false}
|
/>
|
</TabPane>
|
<TabPane tab="自定义验证" key="3">
|
<CustomForm
|
dict={this.props.dict}
|
customChange={this.customChange}
|
wrappedComponentRef={(inst) => this.customForm = inst}
|
/>
|
<Table
|
bordered
|
rowKey="uuid"
|
className="custom-table"
|
dataSource={verify.customverifys}
|
columns={customColumns}
|
pagination={false}
|
/>
|
</TabPane>
|
<TabPane tab="单号生成" key="4">
|
<BillcodeForm
|
floor={this.props.floor}
|
fields={fields}
|
columns={this.props.columns}
|
dict={this.props.dict}
|
modular={orderModular}
|
modularDetail={orderModularDetail}
|
orderChange={this.orderChange}
|
wrappedComponentRef={(inst) => this.orderForm = inst}
|
/>
|
<Table
|
bordered
|
rowKey="uuid"
|
className="custom-table"
|
dataSource={verify.billcodes}
|
columns={orderColumns}
|
pagination={false}
|
/>
|
</TabPane>
|
<TabPane tab="创建凭证" key="5">
|
<VoucherForm
|
dict={this.props.dict}
|
voucher={voucher}
|
columns={this.props.columns}
|
voucherobj={verify.voucher}
|
voucherDetail={voucherDetail}
|
voucherChange={this.voucherChange}
|
wrappedComponentRef={(inst) => this.voucherForm = inst}
|
/>
|
</TabPane>
|
<TabPane tab="信息提示" key="6">
|
<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={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"> -1 </span>
|
不提示
|
</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={15} 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={15} 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>
|
</Form>
|
</TabPane>
|
</Tabs>
|
)
|
}
|
}
|
|
export default Form.create()(VerifyCard)
|
