import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Form, Tabs, Row, Col, Button, Input, notification, Modal, message, InputNumber, Spin, Typography, Popconfirm } from 'antd'
|
import { EditOutlined, StopOutlined, CheckCircleOutlined, SwapOutlined, DeleteOutlined } from '@ant-design/icons'
|
import md5 from 'md5'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import SettingUtils from './utils.jsx'
|
import ColumnForm from './columnform'
|
import DataSource from './datasource'
|
import CustomScript from './customscript'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
const { confirm } = Modal
|
const { Search } = Input
|
const { Paragraph } = Typography
|
const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
|
|
class VerifyCard extends Component {
|
static propTpyes = {
|
config: PropTypes.object,
|
card: PropTypes.object,
|
}
|
|
state = {
|
verify: {},
|
debugId: '',
|
activeKey: 'setting',
|
searchKey: '',
|
excelColumns: [
|
{
|
title: '字段',
|
dataIndex: 'Column',
|
inputType: 'input',
|
editable: true,
|
unique: true,
|
searchable: true,
|
copy: true,
|
width: '16%'
|
},
|
{
|
title: '名称',
|
dataIndex: 'Text',
|
inputType: 'input',
|
editable: true,
|
searchable: true,
|
unique: true,
|
width: '16%'
|
},
|
{
|
title: '列宽',
|
dataIndex: 'Width',
|
inputType: 'number',
|
min: 5,
|
max: 200,
|
editable: true,
|
width: '10%',
|
render: (text) => text || 20
|
},
|
{
|
title: '类型',
|
dataIndex: 'type',
|
inputType: 'select',
|
editable: true,
|
required: false,
|
keyCol: true,
|
width: '8%',
|
render: (text) => {
|
if (text === 'image') {
|
return '图片'
|
} else if (text === 'number') {
|
return '数值'
|
} else {
|
return '文本'
|
}
|
},
|
options: [
|
{value: 'text', text: '文本'},
|
{value: 'number', text: '数值'},
|
{value: 'image', text: '图片'}
|
]
|
},
|
{
|
title: '导出',
|
dataIndex: 'output',
|
inputType: 'radio',
|
editable: true,
|
required: false,
|
width: '10%',
|
render: (text) => {
|
if (text !== 'false') {
|
return '是'
|
} else {
|
return '否'
|
}
|
},
|
options: [
|
{value: 'true', text: '是'},
|
{value: 'false', text: '否'}
|
]
|
},
|
{
|
title: '红色标题',
|
dataIndex: 'required',
|
width: '10%',
|
editable: true,
|
inputType: 'radio',
|
render: (text, record) => record.required === 'true' ? <span style={{color: 'red'}}>是</span> : '否',
|
options: [
|
{value: 'true', text: '是'},
|
{value: 'false', text: '否'}
|
]
|
},
|
{
|
title: '取绝对值',
|
dataIndex: 'abs',
|
inputType: 'radio',
|
editable: true,
|
required: false,
|
keyVals: ['number'],
|
width: '10%',
|
render: (text, record) => {
|
if (record.type !== 'number') return ''
|
|
if (text === 'true') {
|
return '是'
|
} else {
|
return '否'
|
}
|
},
|
options: [
|
{value: 'true', text: '是'},
|
{value: 'false', text: '否'}
|
]
|
},
|
{
|
title: '0值导出',
|
dataIndex: 'noValue',
|
inputType: 'radio',
|
editable: true,
|
required: false,
|
keyVals: ['number'],
|
width: '10%',
|
render: (text, record) => {
|
if (record.type !== 'number') return ''
|
|
if (text !== 'false') {
|
return '是'
|
} else {
|
return '否'
|
}
|
},
|
options: [
|
{value: 'true', text: '是'},
|
{value: 'false', text: '否'}
|
]
|
},
|
{
|
title: '小数位',
|
dataIndex: 'decimal',
|
inputType: 'number',
|
min: 0,
|
max: 18,
|
editable: true,
|
required: false,
|
keyVals: ['number'],
|
width: '12%',
|
render: (text, record) => record.type === 'number' ? text : ''
|
}
|
],
|
scriptsColumns: [
|
{
|
title: 'SQL',
|
dataIndex: 'sql',
|
width: '60%',
|
render: (text) => {
|
let title = text.match(/^\s*\/\*.+\*\//)
|
title = title && title[0] ? title[0] : ''
|
let _text = title ? text.replace(title, '') : text
|
|
return (
|
<div>
|
{title ? <span style={{color: '#a50'}}>{title}<span style={{fontSize: '12px', marginLeft: '5px'}}>{_text.length}</span></span> : null}
|
<Paragraph copyable={{ text: text }} ellipsis={{ rows: 4, expandable: true }}>{_text}</Paragraph>
|
</div>
|
)
|
}
|
},
|
{
|
title: '执行位置',
|
dataIndex: 'position',
|
width: '10%',
|
render: (text, record) => {
|
if (record.position === 'back') {
|
return <span style={{color: '#1890ff'}}>后置</span>
|
} else {
|
return <span style={{color: '#26C281'}}>前置</span>
|
}
|
}
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
width: '10%',
|
render: (text, record) => record.status === 'false' ?
|
(
|
<div style={{color: '#ff4d4f'}}>
|
禁用
|
<StopOutlined style={{marginLeft: '5px'}} />
|
</div>
|
) :
|
(
|
<div style={{color: '#26C281'}}>
|
启用
|
<CheckCircleOutlined style={{marginLeft: '5px'}}/>
|
</div>
|
)
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '140px',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(<div style={{textAlign: 'center'}}>
|
<span className="operation-btn" title="编辑" onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><EditOutlined /></span>
|
<span className="operation-btn" title="状态切换" onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><SwapOutlined /></span>
|
<Popconfirm
|
overlayClassName="popover-confirm"
|
title="确定删除吗?"
|
onConfirm={() => this.handleDelete(record)
|
}>
|
<span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span>
|
</Popconfirm>
|
</div>)
|
}
|
]
|
}
|
|
UNSAFE_componentWillMount() {
|
const { config, card } = this.props
|
let _verify = {}
|
|
if (card.verify) {
|
_verify = fromJS(card.verify).toJS()
|
}
|
|
_verify.dataType = _verify.dataType || 'default'
|
_verify.columns = _verify.columns || []
|
_verify.scripts = _verify.scripts || []
|
|
_verify.columns = _verify.columns.map(col => {
|
col.type = col.type || 'text'
|
col.output = col.output || 'true'
|
col.required = col.required || 'false'
|
col.noValue = col.noValue || 'true'
|
|
if (!['text', 'image', 'number'].includes(col.type)) {
|
if (/^Decimal/ig.test(col.type)) {
|
col.type = 'number'
|
} else {
|
col.type = 'text'
|
}
|
}
|
|
if (col.type !== 'number') {
|
col.decimal = ''
|
col.abs = 'false'
|
} else {
|
col.abs = col.abs || 'false'
|
}
|
|
return col
|
})
|
|
let appType = sessionStorage.getItem('appType')
|
let searches = []
|
|
if (appType === 'mob') {
|
let menu = fromJS(window.GLOB.customMenu).toJS()
|
let ms = null
|
let search = []
|
menu.components.forEach(item => {
|
if (item.type === 'topbar' && item.wrap.type !== 'navbar' && item.search) {
|
ms = item.search
|
} else if (item.type === 'search' && item.wrap.field) {
|
search.push({
|
type: 'text',
|
label: item.wrap.label,
|
field: item.wrap.field,
|
match: item.wrap.match,
|
required: item.wrap.required,
|
value: item.wrap.initval || ''
|
})
|
}
|
})
|
|
if (ms) {
|
if (ms.setting.type === 'search') {
|
search.push({
|
type: 'text',
|
label: '搜索栏',
|
field: ms.setting.field,
|
match: ms.setting.match,
|
required: ms.setting.required,
|
value: ms.setting.initval || ''
|
})
|
}
|
ms.fields.forEach(item => {
|
if (item.type === 'range') {
|
item.initval = `${item.minValue},${item.maxValue}`
|
}
|
search.push(item)
|
})
|
|
ms.groups.forEach(group => {
|
if (group.setting.type === 'search') {
|
search.push({
|
type: 'text',
|
label: group.wrap.name,
|
field: group.setting.field,
|
match: group.setting.match,
|
required: group.setting.required,
|
value: group.setting.initval || ''
|
})
|
}
|
|
group.fields.forEach(item => {
|
if (item.type === 'range') {
|
item.initval = `${item.minValue},${item.maxValue}`
|
}
|
search.push(item)
|
})
|
})
|
}
|
|
searches = search
|
} else {
|
searches = fromJS(config.search || []).toJS()
|
|
if (config.setting && config.setting.useMSearch === 'true' && window.GLOB.customMenu) {
|
let menu = fromJS(window.GLOB.customMenu).toJS()
|
let filterComponent = (box, mainSearch) => {
|
box.components.forEach(item => {
|
if (item.type !== 'search') return
|
mainSearch = item.search
|
})
|
let has = false
|
box.components.forEach(item => {
|
if (item.uuid === config.uuid) {
|
has = true
|
} else if (item.type === 'group') {
|
item.components.forEach(m => {
|
if (m.uuid !== config.uuid) return
|
has = true
|
})
|
}
|
})
|
|
if (has) {
|
if (mainSearch) {
|
let keys = searches.map(item => (item.field ? item.field.toLowerCase() : ''))
|
mainSearch.forEach(item => {
|
if (item.field && !keys.includes(item.field.toLowerCase())) {
|
searches.push(item)
|
}
|
})
|
}
|
} else {
|
box.components.forEach(item => {
|
if (item.type !== 'tabs') return
|
|
item.subtabs.forEach(tab => {
|
filterComponent(tab, mainSearch)
|
})
|
})
|
}
|
}
|
filterComponent(menu, null)
|
}
|
}
|
|
this.setState({
|
searchKey: '',
|
verify: _verify,
|
searches: searches,
|
activeKey: card.intertype === 'system' && _verify.dataType === 'custom' ? 'setting' : 'columns'
|
})
|
}
|
|
handleEdit = (record) => {
|
this.scriptsForm.edit(record)
|
let node = document.getElementById('mk-exout-script')
|
|
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)
|
}
|
}
|
|
handleStatus = (record) => {
|
let verify = JSON.parse(JSON.stringify(this.state.verify))
|
record.status = record.status === 'false' ? 'true' : 'false'
|
|
verify.scripts = verify.scripts.map(item => {
|
if (item.uuid === record.uuid) {
|
return record
|
} else {
|
return item
|
}
|
})
|
|
this.setState({
|
verify: verify
|
})
|
}
|
|
columnChange = (values, callback) => {
|
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
|
} else {
|
callback()
|
}
|
values.uuid = Utils.getuuid()
|
values.abs = 'false'
|
values.output = 'true'
|
values.required = 'false'
|
verify.columns.push(values)
|
|
this.setState({
|
verify: verify
|
})
|
}
|
|
handleDelete = (record) => {
|
let verify = JSON.parse(JSON.stringify(this.state.verify))
|
|
verify.scripts = verify.scripts.filter(item => item.uuid !== record.uuid)
|
|
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 = () => {
|
const { card, config } = this.props
|
const { activeKey, verify } = this.state
|
|
// 表单提交时检查输入值是否正确
|
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.dataType === 'custom') {
|
if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.scriptsForm.props.form.getFieldValue('sql'))) {
|
notification.warning({
|
top: 92,
|
message: '存在未保存脚本，请点击确定保存，或点击取消放弃修改！',
|
duration: 5
|
})
|
this.setState({activeKey: 'scripts'})
|
return
|
}
|
}
|
if (this.columnRef && this.columnRef.state.editingKey) {
|
notification.warning({
|
top: 92,
|
message: '字段未保存！',
|
duration: 5
|
})
|
return
|
}
|
|
if (card.intertype === 'system' && verify.dataType !== 'custom' && verify.columns.length > 0 && config.$c_ds && config.setting.interType === 'system' && config.columns && config.columns.length > 0) {
|
let cols = []
|
let columns = config.columns.map(c => c.field)
|
|
if (config.subtype === 'dualdatacard' && config.subColumns) {
|
config.subColumns.forEach(item => {
|
columns.push(item.field)
|
})
|
}
|
|
verify.columns.forEach(col => {
|
if (col.output === 'false' || col.Column === '$Index') return
|
if (!columns.includes(col.Column)) {
|
cols.push(col.Column)
|
}
|
})
|
if (cols.length) {
|
notification.warning({
|
top: 92,
|
message: `导出列（${cols.join('、')}）在字段集中不存在！`,
|
duration: 5
|
})
|
}
|
}
|
|
if (activeKey === 'setting') {
|
this.settingForm.handleConfirm().then(res => {
|
let _verify = {...verify, ...res}
|
|
if (res.dataType !== 'custom') {
|
delete _verify.tableName
|
delete _verify.dataresource
|
delete _verify.queryType
|
delete _verify.defaultSql
|
delete _verify.order
|
|
_verify.scripts = []
|
}
|
|
this.setState({
|
verify: _verify
|
}, () => {
|
this.setState({loading: true})
|
this.sqlverify(() => { // 验证成功
|
this.setState({
|
loading: false
|
})
|
resolve(_verify)
|
}, () => { // 验证失败
|
this.setState({
|
loading: false
|
})
|
reject()
|
}, verify.scripts, 'submit')
|
})
|
})
|
} else if (activeKey === 'columns') {
|
if (this.props.card.intertype !== 'system' || verify.dataType !== 'custom') {
|
resolve(verify)
|
} else {
|
this.setState({loading: true})
|
|
this.sqlverify(() => { // 验证成功
|
this.setState({
|
loading: false
|
})
|
resolve(verify)
|
}, () => { // 验证失败
|
this.setState({
|
loading: false
|
})
|
reject()
|
}, verify.scripts, 'submit')
|
}
|
} else if (activeKey === 'scripts') {
|
this.setState({loading: true})
|
this.sqlverify(() => { // 验证成功
|
this.setState({
|
loading: false
|
})
|
resolve(verify)
|
}, () => { // 验证失败
|
this.setState({
|
loading: false
|
})
|
reject()
|
}, verify.scripts, 'submit')
|
} else {
|
resolve(verify)
|
}
|
})
|
}
|
|
columnFieldInput = () => {
|
const { config } = this.props
|
const { verify } = this.state
|
|
let columns = fromJS(verify.columns).toJS()
|
let _names = {}
|
let fields = columns.map(item => {
|
let key = item.Column.toLowerCase()
|
_names[key] = item.Text
|
|
return key
|
})
|
let names = {$up: false}
|
|
config.columns.forEach(item => {
|
if (!item.field) return
|
let key = item.field.toLowerCase()
|
if (fields.includes(key)) {
|
if (_names[key] !== item.label) {
|
names.$up = true
|
names[key] = item.label
|
}
|
return
|
}
|
|
let cell = {
|
Column: item.field,
|
Text: item.label,
|
Width: 20,
|
abs: 'false',
|
output: 'true',
|
required: 'false',
|
type: 'text',
|
uuid: Utils.getuuid()
|
}
|
|
if (item.type === 'number') {
|
cell.type = 'number'
|
cell.decimal = item.decimal
|
}
|
|
columns.push(cell)
|
})
|
|
if (config.subtype === 'dualdatacard') {
|
config.subColumns.forEach(item => {
|
if (!item.field) return
|
let key = item.field.toLowerCase()
|
if (fields.includes(key)) {
|
if (_names[key] !== item.label) {
|
names.$up = true
|
names[key] = item.label
|
}
|
return
|
}
|
|
let cell = {
|
Column: item.field,
|
Text: item.label,
|
Width: 20,
|
abs: 'false',
|
output: 'true',
|
required: 'false',
|
type: 'text',
|
uuid: Utils.getuuid()
|
}
|
|
if (item.type === 'number') {
|
cell.type = 'number'
|
cell.decimal = item.decimal
|
}
|
|
columns.push(cell)
|
})
|
}
|
|
if (names.$up) {
|
const that = this
|
|
confirm({
|
content: '部分字段名称与显示列不一致，是否更新？',
|
okText: '更新',
|
cancelText: '不更新',
|
onOk() {
|
columns = columns.map(item => {
|
let key = item.Column.toLowerCase()
|
|
if (names[key]) {
|
item.Text = names[key]
|
}
|
|
return item
|
})
|
|
that.setState({
|
verify: {...verify, columns: columns}
|
})
|
},
|
onCancel() {
|
that.setState({
|
verify: {...verify, columns: columns}
|
})
|
}
|
})
|
} else {
|
this.setState({
|
verify: {...verify, columns: columns}
|
})
|
}
|
}
|
|
clearField = () => {
|
const { verify } = this.state
|
const _this = this
|
|
confirm({
|
content: `确定清空Excel列吗？`,
|
onOk() {
|
_this.setState({
|
verify: {
|
...verify,
|
columns: []
|
}
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
changeColumns = (columns) => {
|
const { verify } = this.state
|
|
columns = columns.map(col => {
|
col.type = col.type || 'text'
|
col.output = col.output || 'true'
|
col.required = col.required || 'false'
|
col.noValue = col.noValue || 'true'
|
col.Width = col.Width || 20
|
|
if (!['text', 'image', 'number'].includes(col.type)) {
|
if (/^Decimal/ig.test(col.type)) {
|
col.type = 'number'
|
} else {
|
col.type = 'text'
|
}
|
}
|
|
return col
|
})
|
// if (columns[0] && !['image', 'text', 'number'].includes(columns[0].type)) {
|
// columns = columns.map(col => {
|
// let _cell = {
|
// uuid: Utils.getuuid(),
|
// Column: col.Column,
|
// Text: col.Text,
|
// Width: 20,
|
// abs: 'false',
|
// output: col.output || 'true',
|
// required: col.required || 'false',
|
// type: 'text',
|
// }
|
|
// return _cell
|
// })
|
// }
|
|
this.setState({verify: {...verify, columns}})
|
}
|
|
// 标签切换
|
tabchange = (val) => {
|
const { card } = this.props
|
const { activeKey, verify } = this.state
|
|
if (activeKey === 'setting') {
|
this.settingForm.handleConfirm().then(res => {
|
if (card.intertype !== 'system' || verify.dataType !== 'custom') {
|
this.setState({activeKey: val, verify: {...verify, ...res}})
|
} else {
|
this.setState({
|
verify: {...verify, ...res}
|
}, () => {
|
this.setState({loading: true})
|
this.sqlverify(() => { // 验证成功
|
this.setState({
|
activeKey: val,
|
loading: false
|
})
|
}, () => { // 验证失败
|
this.setState({
|
activeKey: val,
|
loading: false
|
})
|
}, verify.scripts)
|
})
|
}
|
})
|
} else if (card.intertype !== 'system' || verify.dataType !== 'custom') {
|
this.setState({activeKey: val})
|
return
|
} else if (activeKey === 'columns') {
|
if (this.columnRef && this.columnRef.state.editingKey) {
|
notification.warning({
|
top: 92,
|
message: '字段未保存！',
|
duration: 5
|
})
|
return
|
}
|
|
this.setState({loading: true})
|
|
this.sqlverify(() => { // 验证成功
|
this.setState({
|
activeKey: val,
|
loading: false
|
})
|
}, () => { // 验证失败
|
this.setState({
|
activeKey: val,
|
loading: false
|
})
|
}, verify.scripts)
|
} else if (activeKey === 'scripts') {
|
if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.scriptsForm.props.form.getFieldValue('sql'))) {
|
notification.warning({
|
top: 92,
|
message: '存在未保存脚本！',
|
duration: 5
|
})
|
}
|
|
this.setState({loading: true})
|
this.sqlverify(() => { // 验证成功
|
this.setState({
|
activeKey: val,
|
loading: false
|
})
|
}, () => { // 验证失败
|
this.setState({
|
activeKey: val,
|
loading: false
|
})
|
}, verify.scripts)
|
} else {
|
this.setState({
|
activeKey: val
|
})
|
}
|
}
|
|
scriptsChange = (values, callback, skip) => {
|
let verify = JSON.parse(JSON.stringify(this.state.verify))
|
|
if (values.uuid) {
|
verify.scripts = verify.scripts.map(item => {
|
if (item.uuid === values.uuid) {
|
return values
|
} else {
|
return item
|
}
|
})
|
} else {
|
values.uuid = Utils.getuuid()
|
verify.scripts.push(values)
|
}
|
|
if (skip) {
|
this.setState({
|
verify: verify
|
})
|
callback(true)
|
} else {
|
this.setState({loading: true})
|
|
this.sqlverify(() => { // 验证成功
|
this.setState({
|
loading: false,
|
verify: verify
|
})
|
callback(true)
|
}, () => { // 验证失败
|
this.setState({
|
loading: false
|
})
|
callback(false)
|
}, verify.scripts)
|
}
|
}
|
|
sqlverify = (_resolve, _reject, scripts, type) => {
|
const { searches, verify, debugId } = this.state
|
|
if (verify.dataType !== 'custom') {
|
_resolve()
|
return
|
}
|
|
let sql = SettingUtils.getDebugSql(verify, scripts, (verify.useSearch === 'true' ? searches : []))
|
|
let _debugId = md5(sql)
|
|
if (debugId === _debugId) {
|
_resolve()
|
return
|
}
|
|
Api.sDebug(sql).then(result => {
|
if (result.status || result.ErrCode === '-2') {
|
this.setState({debugId: _debugId})
|
_resolve()
|
} else {
|
if (type === 'submit') {
|
Modal.confirm({
|
title: result.message,
|
okText: '知道了',
|
cancelText: '强制保存',
|
onOk: () => {
|
_reject()
|
},
|
onCancel() {
|
_resolve()
|
}
|
})
|
} else {
|
_reject()
|
Modal.error({
|
title: result.message
|
})
|
}
|
}
|
})
|
}
|
|
updateDataType = (val) => {
|
const { config } = this.props
|
|
let verify = {...this.state.verify, dataType: val}
|
if (val === 'custom' && config.setting) {
|
verify.tableName = verify.tableName || config.setting.tableName || ''
|
verify.dataresource = verify.dataresource || config.setting.dataresource || ''
|
verify.queryType = verify.queryType || config.setting.queryType || ''
|
verify.defaultSql = verify.defaultSql || config.setting.execute || ''
|
verify.order = verify.order || config.setting.order || ''
|
|
if (verify.scripts.length === 0 && config.scripts && config.scripts.length > 0) {
|
verify.scripts = fromJS(config.scripts).toJS()
|
}
|
}
|
|
this.setState({verify: verify})
|
}
|
|
render() {
|
const { card } = this.props
|
const { verify, excelColumns, scriptsColumns, activeKey, loading, searches, searchKey } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<div className="verify-excelout-box-tab">
|
{card.label ? <div className="mk-com-name">{card.label} - 验证信息</div> : null}
|
{loading && <Spin size="large" />}
|
<Tabs activeKey={activeKey} className="excelout-verify-card-box" onChange={this.tabchange}>
|
{card.intertype === 'system' ? <TabPane tab="基础验证" key="setting">
|
<DataSource setting={verify} updateDataType={this.updateDataType} wrappedComponentRef={(inst) => this.settingForm = inst}/>
|
</TabPane> : null}
|
<TabPane tab={
|
<span>
|
Excel导出列
|
{verify.columns.length ? <span className="count-tip">{verify.columns.length}</span> : null}
|
</span>
|
} key="columns">
|
<ColumnForm 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="excelcolumn" searchKey={searchKey} wrappedComponentRef={(inst) => this.columnRef = inst} data={verify.columns} columns={excelColumns} onChange={this.changeColumns}/>
|
</TabPane>
|
{card.intertype === 'system' ? <TabPane tab={
|
<span>
|
自定义脚本
|
{verify.scripts.length ? <span className="count-tip">{verify.scripts.length}</span> : null}
|
</span>
|
} key="scripts" disabled={verify.dataType !== 'custom'} id="mk-exout-script">
|
<CustomScript
|
btn={card}
|
sheet={verify.tableName}
|
searches={verify.useSearch === 'true' ? searches : []}
|
scriptsChange={this.scriptsChange}
|
wrappedComponentRef={(inst) => this.scriptsForm = inst}
|
/>
|
<EditTable actions={['move']} data={verify.scripts} columns={scriptsColumns} onChange={(scripts) => {this.setState({verify: {...verify, scripts}})}}/>
|
</TabPane> : null}
|
<TabPane tab={
|
<span>
|
信息提示
|
{activeKey === 'columns' ? <span onClick={(e) => {e.stopPropagation()}}><Search className="mk-search-fields" defaultValue={searchKey} allowClear onSearch={(val, e) => {e.stopPropagation();this.setState({searchKey: val})}} /></span> : null}
|
</span>
|
} key="message">
|
<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"> -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={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"> -2 </span>
|
执行失败无提示
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
</TabPane>
|
</Tabs>
|
</div>
|
)
|
}
|
}
|
|
export default Form.create()(VerifyCard)
|
