import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Form, Tabs, Table, Row, Col, Button, notification, Modal, message, InputNumber } from 'antd'
|
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
|
class MegviiCard extends Component {
|
static propTpyes = {
|
columns: PropTypes.array, // 显示列
|
dict: PropTypes.object, // 字典项
|
card: PropTypes.object,
|
}
|
|
state = {
|
verify: {},
|
activeKey: 'excelcolumn',
|
excelColumns: [
|
{
|
title: '名称',
|
dataIndex: 'field',
|
width: '20%'
|
},
|
{
|
title: '数据类型',
|
dataIndex: 'datatype',
|
width: '20%'
|
},
|
{
|
title: '变量类型',
|
dataIndex: 'type',
|
width: '20%'
|
},
|
{
|
title: '是否必须',
|
dataIndex: 'required',
|
width: '15%'
|
},
|
{
|
title: '备注',
|
dataIndex: 'remark',
|
width: '25%',
|
}
|
],
|
excelData: [
|
{field: 'id', datatype: 'string', type: 'nvarchar(50)', required: '必须', remark: '人员id'},
|
{field: 'person_name', datatype: 'string', type: 'nvarchar(50)', required: '必须', remark: '人员名称'},
|
{field: 'group_list', datatype: 'string', type: 'nvarchar(50)', required: '必须', remark: '绑定人员组的列表，多个使用逗号分隔，示例：\'1,2\''},
|
{field: 'face_data', datatype: 'string', type: 'text', required: '必须', remark: 'Base64编码的照片数据（人脸信息）'},
|
{field: 'face_idx', datatype: 'integer', type: 'int', required: '非必须', remark: '照片索引，默认为0'},
|
{field: 'is_admin', datatype: 'string', type: 'nvarchar(50)', required: '非必须', remark: '是否启用管理员权限，默认为\'false\''},
|
{field: 'recognition_type', datatype: 'string', type: 'nvarchar(50)', required: '非必须', remark: '人员类型，staff – 普通人员（默认），visitor – 访客，blacklist – 黑名单'},
|
{field: 'password', datatype: 'string', type: 'nvarchar(50)', required: '非必须', remark: '密码使用6位数字（AES加密）'},
|
{field: 'id_number', datatype: 'string', type: 'nvarchar(50)', required: '非必须', remark: '身份证号码（AES加密）'},
|
{field: 'person_code', datatype: 'string', type: 'nvarchar(50)', required: '非必须', remark: '人员编号'},
|
{field: 'card_number', datatype: 'string', type: 'nvarchar(50)', required: '非必须', remark: '卡号，最大20位数字'},
|
]
|
}
|
|
UNSAFE_componentWillMount() {
|
const { card } = this.props
|
let _verify = fromJS(card.verify || {}).toJS()
|
|
this.setState({
|
verify: _verify
|
})
|
}
|
|
componentDidMount () {
|
|
}
|
|
handleConfirm = () => {
|
const { verify } = this.state
|
|
return Promise.resolve(verify)
|
}
|
|
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}
|
})
|
}
|
|
tabchange = (val) => {
|
this.setState({activeKey: val})
|
}
|
|
render() {
|
const { verify, excelColumns, excelData, activeKey } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<div>
|
<Tabs activeKey={activeKey} className="megvii-verify-card-box" onChange={this.tabchange}>
|
<TabPane tab={
|
<span>
|
列设置
|
</span>
|
} key="excelcolumn">
|
<Table
|
bordered
|
rowKey="field"
|
className="custom-table"
|
dataSource={excelData}
|
columns={excelColumns}
|
pagination={false}
|
/>
|
</TabPane>
|
<TabPane tab="信息提示" key="tip">
|
<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()(MegviiCard)
|
