import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Tabs, Row, Col, Radio, Input, Button, Select, Table, Popconfirm, Icon, notification, Modal, message, InputNumber } from 'antd'
|
import Utils from '@/utils/utils.js'
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
const { TextArea } = Input
|
|
class VerifyCard extends Component {
|
static propTpyes = {
|
dict: PropTypes.object, // 字典项
|
card: PropTypes.object
|
}
|
|
state = {
|
verify: {}
|
}
|
|
UNSAFE_componentWillMount() {
|
let _verify = this.props.card.verify || {}
|
|
this.setState({
|
verify: {
|
invalid: _verify.invalid || 'false',
|
unique: _verify.unique || 'false',
|
accountdate: _verify.accountdate || 'false',
|
customverifys: _verify.customverifys || []
|
}
|
})
|
}
|
|
handleConfirm = () => {
|
let verify = JSON.parse(JSON.stringify(this.state.verify))
|
// 表单提交时检查输入值是否正确
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
values.uuid = Utils.getuuid()
|
verify.customverifys.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 = (uuid) => {
|
const { verify } = this.state
|
verify.customverifys = verify.customverifys.filter(item => item.uuid !== uuid)
|
|
this.setState({ verify: verify })
|
}
|
|
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
|
console.log(val)
|
console.log(type)
|
this.setState({
|
verify: {...verify, [type]: val}
|
})
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
const { verify } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
let columns = [
|
{
|
title: 'SQL',
|
dataIndex: 'sql',
|
width: '50%'
|
},
|
{
|
title: 'ErrorMessage',
|
dataIndex: 'errmsg',
|
width: '25%'
|
},
|
{
|
title: 'ErrorCode',
|
dataIndex: 'errorCode',
|
width: '10%'
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '15%',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(
|
<Popconfirm title="确定删除吗?" onConfirm={() => this.handleDelete(record.uuid)}>
|
<span style={{color: '#1890ff', cursor: 'pointer'}}><Icon type="delete" /></span>
|
</Popconfirm>
|
)
|
}
|
]
|
|
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.invalid} onChange={(e) => {this.onOptionChange(e, 'invalid')}}>
|
<Radio value="true">开启</Radio>
|
<Radio value="false">不开启</Radio>
|
</Radio.Group>
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label={'唯一性验证'}>
|
<Radio.Group value={verify.unique} onChange={(e) => {this.onOptionChange(e, 'unique')}}>
|
<Radio value="true">开启</Radio>
|
<Radio value="false">不开启</Radio>
|
</Radio.Group>
|
</Form.Item>
|
</Col>
|
<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>
|
</Row>
|
</Form>
|
</TabPane>
|
<TabPane tab="自定义验证" key="2">
|
<Form {...formItemLayout} className="custom-verify-form" id="verifycard1">
|
<Row gutter={24}>
|
<Col span={10} className="sql">
|
<Form.Item label={'sql'}>
|
{getFieldDecorator('sql', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.input'] + 'sql!'
|
}
|
]
|
})(<TextArea rows={3} />)}
|
</Form.Item>
|
</Col>
|
<Col span={6}>
|
<Form.Item label={'报错信息'}>
|
{getFieldDecorator('errmsg', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.input'] + '报错信息!'
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" />)}
|
</Form.Item>
|
</Col>
|
<Col span={6}>
|
<Form.Item label={'报错编码'}>
|
{getFieldDecorator('errorCode', {
|
initialValue: 'E',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.select'] + '报错编码!'
|
}
|
]
|
})(
|
<Select
|
getPopupContainer={() => document.getElementById('verifycard1')}
|
>
|
<Select.Option value="E"> E </Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={2} className="add">
|
<Button onClick={this.handleConfirm} type="primary" className="add-row">
|
添加
|
</Button>
|
</Col>
|
</Row>
|
</Form>
|
<Table
|
bordered
|
rowKey="uuid"
|
className="custom-table"
|
dataSource={verify.customverifys}
|
columns={columns}
|
pagination={false}
|
/>
|
</TabPane>
|
<TabPane tab="信息提示" key="3">
|
<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)
|
