import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Form, Tabs, Row, Col, Button, notification, Modal, message, InputNumber, Radio } from 'antd'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
|
import ColumnForm from './columnform'
|
import CodeMirror from '@/templates/zshare/codemirror'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
const { confirm } = Modal
|
const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
|
|
class VerifyCard extends Component {
|
static propTpyes = {
|
dict: PropTypes.object, // 字典项
|
config: PropTypes.object,
|
card: PropTypes.object,
|
}
|
|
state = {
|
verify: {},
|
defaultscript: '', // 自定义脚本
|
excelColumns: [
|
{
|
title: this.props.dict['model.form.field'],
|
dataIndex: 'Column',
|
inputType: 'input',
|
editable: true,
|
unique: true,
|
width: '20%'
|
},
|
{
|
title: this.props.dict['model.name'],
|
dataIndex: 'Text',
|
inputType: 'input',
|
editable: true,
|
width: '20%'
|
},
|
{
|
title: this.props.dict['model.form.columnWidth'],
|
dataIndex: 'Width',
|
inputType: 'number',
|
min: 5,
|
max: 200,
|
editable: true,
|
width: '20%'
|
},
|
{
|
title: '类型',
|
dataIndex: 'type',
|
inputType: 'select',
|
editable: true,
|
required: false,
|
width: '20%',
|
render: (text) => {
|
if (text === 'image') {
|
return '图片'
|
} else {
|
return '文本'
|
}
|
},
|
options: [
|
{value: 'text', text: '文本'},
|
{value: 'image', text: '图片'}
|
]
|
},
|
{
|
title: '取绝对值',
|
dataIndex: 'abs',
|
inputType: 'select',
|
editable: true,
|
required: false,
|
width: '20%',
|
render: (text) => {
|
if (text === 'true') {
|
return '是'
|
} else {
|
return '否'
|
}
|
},
|
options: [
|
{value: 'true', text: '是'},
|
{value: 'false', text: '否'}
|
]
|
}
|
]
|
}
|
|
UNSAFE_componentWillMount() {
|
const { config, card } = this.props
|
let _verify = {}
|
|
if (card.verify) {
|
_verify = fromJS(card.verify).toJS()
|
}
|
|
_verify.enable = _verify.enable || 'false'
|
_verify.columns = _verify.columns || []
|
|
if (card.intertype !== 'system') {
|
_verify.enable = 'false'
|
}
|
if (_verify.columns[0] && !_verify.columns[0].type) {
|
_verify.columns = _verify.columns.map(col => {
|
col.type = col.type || 'text'
|
return col
|
})
|
}
|
|
let defaultscript = ''
|
if (!_verify.script && card.intertype === 'system') {
|
let search = this.formatSearch(config.search)
|
search = Utils.joinMainSearchkey(search)
|
search = search ? 'where ' + search : ''
|
|
defaultscript = `update ${config.setting.tableName || ''} set idefine5= idefine5+1 ,modifydate=getdate(),cdefine5='已导出',modifyuserid=@userid@ ${search}`
|
}
|
|
|
this.setState({
|
verify: _verify,
|
defaultscript: defaultscript
|
})
|
}
|
|
/**
|
* @description 获取全部搜索条件
|
* @param {Array} searches 搜索条件数组
|
*/
|
formatSearch (searches) {
|
if (!searches || searches.length === 0) return []
|
|
let newsearches = []
|
searches.forEach(search => {
|
let item = {
|
key: search.field,
|
match: search.match,
|
type: search.type,
|
label: search.label,
|
value: `@${search.field}@`,
|
required: search.required === 'true'
|
}
|
if (item.type === 'group') {
|
let copy = fromJS(item).toJS()
|
copy.key = search.datefield
|
|
item.value = `@${search.field}@`
|
item.match = '='
|
|
copy.type = 'daterange'
|
copy.match = 'between'
|
copy.value = [`@${search.datefield}@`, `@${search.datefield}1@`]
|
|
if (search.transfer === 'true') {
|
newsearches.push(item)
|
}
|
newsearches.push(copy)
|
return
|
} else if (item.type === 'dateweek') {
|
item.value = [`@${search.field}@`, `@${search.field}1@`]
|
} else if (item.type === 'daterange') {
|
item.value = [`@${search.field}@`, `@${search.field}1@`]
|
} else if (item.type === 'multiselect') {
|
item.value = [`@${search.field}@`]
|
}
|
newsearches.push(item)
|
})
|
|
return newsearches
|
}
|
|
columnChange = (values) => {
|
let verify = JSON.parse(JSON.stringify(this.state.verify))
|
|
let fields = verify.columns.map(item => item.Column)
|
if (fields.includes(values.Column)) {
|
notification.warning({
|
top: 92,
|
message: values.Column + '字段已存在！',
|
duration: 5
|
})
|
return
|
}
|
values.uuid = Utils.getuuid()
|
values.abs = 'false'
|
verify.columns.push(values)
|
|
this.setState({
|
verify: verify
|
})
|
}
|
|
handleDelete = (record, type) => {
|
const { verify } = this.state
|
|
verify.columns = verify.columns.filter(item => item.uuid !== record.uuid)
|
|
this.setState({ verify: verify })
|
}
|
|
handleUpDown = (record, type, direction) => {
|
let verify = JSON.parse(JSON.stringify(this.state.verify))
|
let index = 0
|
|
verify.columns = verify.columns.filter((item, i) => {
|
if (item.uuid === record.uuid) {
|
index = i
|
}
|
|
return item.uuid !== record.uuid
|
})
|
if ((index === 0 && direction === 'up') || (index === verify.columns.length && direction === 'down')) {
|
return
|
}
|
|
if (direction === 'up') {
|
verify.columns.splice(index - 1, 0, record)
|
} else {
|
verify.columns.splice(index + 1, 0, record)
|
}
|
|
this.setState({
|
verify: 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}
|
})
|
}
|
|
handleConfirm = () => {
|
let verify = fromJS(this.state.verify).toJS()
|
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
let _cols = verify.columns.map(col => col.Column)
|
let _vcols = Array.from(new Set(_cols))
|
|
if (_cols.length > _vcols.length) {
|
notification.warning({
|
top: 92,
|
message: 'Excel列字段名，不可重复!',
|
duration: 5
|
})
|
|
return
|
}
|
|
if (verify.enable === 'true') {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
values.sql = values.sql || ''
|
|
let _quot = values.sql.match(/'{1}/g)
|
let _lparen = values.sql.match(/\({1}/g)
|
let _rparen = values.sql.match(/\){1}/g)
|
|
_quot = _quot ? _quot.length : 0
|
_lparen = _lparen ? _lparen.length : 0
|
_rparen = _rparen ? _rparen.length : 0
|
|
if (_quot % 2 !== 0) {
|
notification.warning({
|
top: 92,
|
message: 'sql中\'必须成对出现',
|
duration: 5
|
})
|
return
|
} else if (_lparen !== _rparen) {
|
notification.warning({
|
top: 92,
|
message: 'sql中()必须成对出现',
|
duration: 5
|
})
|
return
|
} else if (/--/ig.test(values.sql)) {
|
notification.warning({
|
top: 92,
|
message: '自定义sql语句中，不可出现字符 -- ，注释请用 /*内容*/',
|
duration: 5
|
})
|
return
|
}
|
|
let error = Utils.verifySql(values.sql, 'customscript')
|
|
if (error) {
|
notification.warning({
|
top: 92,
|
message: 'sql中不可使用' + error,
|
duration: 5
|
})
|
return
|
}
|
|
let param = {
|
func: 's_debug_sql',
|
exec_type: 'y',
|
LText: values.sql
|
}
|
|
param.LText = param.LText.replace(/@\$|\$@/ig, '')
|
|
param.LText = Utils.formatOptions(param.LText)
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt('', param.timestamp)
|
|
Api.getLocalConfig(param).then(res => {
|
if (res.status) {
|
resolve({...verify, script: values.sql})
|
} else {
|
Modal.error({
|
title: res.message
|
})
|
}
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: '自定义脚本不可为空！',
|
duration: 5
|
})
|
}
|
})
|
} else {
|
resolve(verify)
|
}
|
})
|
}
|
|
changeEnable = (e) => {
|
const { verify } = this.state
|
|
this.setState({
|
verify: {...verify, enable: e.target.value}
|
})
|
}
|
|
columnFieldInput = () => {
|
const { config } = this.props
|
const { verify } = this.state
|
|
let columns = fromJS(verify.columns).toJS()
|
let fields = columns.map(item => item.Column)
|
|
config.columns.forEach(item => {
|
if (fields.includes(item.field) || !item.field) return
|
fields.push(item.field)
|
|
columns.push({
|
Column: item.field,
|
Text: item.label,
|
Width: 20,
|
abs: 'false',
|
type: 'text',
|
uuid: Utils.getuuid()
|
})
|
})
|
|
this.setState({
|
verify: {...verify, columns: columns}
|
})
|
}
|
|
clearField = () => {
|
const { verify } = this.state
|
const _this = this
|
|
confirm({
|
content: `确定清空Excel列吗？`,
|
onOk() {
|
_this.setState({
|
verify: {
|
...verify,
|
columns: []
|
}
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
render() {
|
const { card } = this.props
|
const { verify, excelColumns, defaultscript } = this.state
|
const { getFieldDecorator } = this.props.form
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<div id="verify-excelout-box-tab">
|
<Tabs defaultActiveKey="1" className="verify-card-box" onChange={this.tabchange}>
|
<TabPane tab={
|
<span>
|
Excel导出列
|
{verify.columns.length ? <span className="count-tip">{verify.columns.length}</span> : null}
|
</span>
|
} key="1">
|
<ColumnForm dict={this.props.dict} columnChange={this.columnChange}/>
|
<Button className="excel-col-add mk-green" title="添加显示列字段" onClick={this.columnFieldInput}>
|
同步显示列
|
</Button>
|
<Button className="excel-col-add mk-red" title="清空Excel列" onClick={this.clearField}>
|
清空Excel列
|
</Button>
|
<div style={{color: '#959595', fontSize: '13px', paddingLeft: '10px'}}>如需导出序号，请使用字段 $Index。</div>
|
<EditTable actions={['edit', 'move', 'copy', 'del']} type="exceloutcolumn" data={verify.columns} columns={excelColumns} onChange={(columns) => this.setState({verify: {...verify, columns}})}/>
|
</TabPane>
|
{card.intertype === 'system' ? <TabPane tab={
|
<span>
|
自定义脚本
|
{verify.enable === 'true' ? <span className="count-tip">1</span> : null}
|
</span>
|
} key="6">
|
<Form {...formItemLayout} className="verify-form">
|
<Row gutter={24}>
|
<Col span={8}>
|
<Form.Item style={{marginBottom: 10}} label={'启用'}>
|
<Radio.Group defaultValue={verify.enable || 'false'} onChange={this.changeEnable}>
|
<Radio value="true">是</Radio>
|
<Radio value="false">否</Radio>
|
</Radio.Group>
|
</Form.Item>
|
</Col>
|
<Col span={24} className="sql">
|
<Form.Item label={'sql'}>
|
{getFieldDecorator('sql', {
|
initialValue: verify.script || defaultscript,
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.input'] + 'sql!'
|
}
|
]
|
})(<CodeMirror />)}
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
</TabPane> : null}
|
<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)
|
