import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Form, Tabs, Row, Col, Button, Table, Popconfirm, Icon, 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 './index.scss'
|
|
const { TabPane } = Tabs
|
const { confirm } = Modal
|
|
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',
|
width: '25%'
|
},
|
{
|
title: this.props.dict['model.name'],
|
dataIndex: 'Text',
|
width: '25%'
|
},
|
{
|
title: this.props.dict['model.form.columnWidth'],
|
dataIndex: 'Width',
|
width: '25%'
|
},
|
{
|
title: '操作',
|
align: 'center',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(
|
<div>
|
<span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record, 'columns')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
|
<span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'columns', 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
|
<span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'columns', 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
|
<Popconfirm
|
overlayClassName="popover-confirm"
|
title={this.props.dict['model.query.delete']}
|
onConfirm={() => this.handleDelete(record, 'columns')
|
}>
|
<span style={{color: '#ff4d4f', cursor: 'pointer'}}><Icon type="delete" /></span>
|
</Popconfirm>
|
</div>
|
)
|
}
|
]
|
}
|
|
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 (!_verify.columns || _verify.columns.length === 0) {
|
// _verify.columns = []
|
// config.columns.forEach(item => {
|
// if (!item.field) return
|
|
// _verify.columns.push({
|
// Column: item.field,
|
// Text: item.label,
|
// Width: 20,
|
// uuid: Utils.getuuid()
|
// })
|
// })
|
// }
|
|
if (card.intertype !== 'system') {
|
_verify.enable = 'false'
|
}
|
|
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))
|
|
if (values.uuid) {
|
verify.columns = verify.columns.map(item => {
|
if (item.uuid === values.uuid) {
|
return values
|
} else {
|
return item
|
}
|
})
|
} else {
|
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()
|
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 })
|
}
|
|
handleEdit = (record, type) => {
|
this.columnForm.edit(record)
|
|
let node = document.getElementById('verify-excelout-box-tab').parentNode
|
|
if (node && node.scrollTop) {
|
let inter = Math.ceil(node.scrollTop / 10)
|
|
let timer = setInterval(() => {
|
if (node.scrollTop - inter > 0) {
|
node.scrollTop = node.scrollTop - inter
|
} else {
|
node.scrollTop = 0
|
clearInterval(timer)
|
}
|
}, 10)
|
}
|
}
|
|
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',
|
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.LText, 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,
|
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}
|
wrappedComponentRef={(inst) => this.columnForm = inst}
|
/>
|
<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>
|
<Table
|
bordered
|
rowKey="uuid"
|
className="custom-table"
|
dataSource={verify.columns}
|
columns={excelColumns}
|
pagination={false}
|
/>
|
</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)
|
