import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Form, Tabs, Table, Popconfirm, notification, Modal, Spin } from 'antd'
|
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import ColForm from './columnform'
|
import SettingForm from './settingform'
|
import SettingUtils from './utils'
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
|
const CustomScript = asyncComponent(() => import('@/templates/zshare/customscript'))
|
const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))
|
|
class VerifyCard extends Component {
|
static propTpyes = {
|
config: PropTypes.object, // 数据源信息
|
menuId: PropTypes.string, // 菜单Id
|
searches: PropTypes.array, // 搜索条件
|
}
|
|
state = {
|
columns: [],
|
activeKey: 'setting',
|
loading: false,
|
usefulfields: '',
|
defaultsql: '', // 默认Sql
|
colColumns: [
|
{
|
title: '名称',
|
dataIndex: 'label',
|
width: '25%'
|
},
|
{
|
title: '字段',
|
dataIndex: 'field',
|
width: '25%'
|
},
|
{
|
title: '数据类型',
|
dataIndex: 'datatype',
|
width: '25%',
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '25%',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(<div>
|
<span className="operation-btn" title="编辑" onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><EditOutlined /></span>
|
<Popconfirm
|
overlayClassName="popover-confirm"
|
title="确定删除吗?"
|
onConfirm={() => this.deleteColumn(record)
|
}>
|
<span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span>
|
</Popconfirm>
|
</div>)
|
}
|
]
|
}
|
|
UNSAFE_componentWillMount() {
|
const { config } = this.props
|
|
let _setting = fromJS(config.setting).toJS()
|
let _scripts = fromJS(config.scripts).toJS()
|
|
if (window.GLOB.funcs && window.GLOB.funcs.length > 0) {
|
window.GLOB.funcs.forEach(m => {
|
let reg = new RegExp(`\\/\\*\\$ex@${m.func_code}-begin\\*\\/[\\s\\S]+\\/\\*@ex\\$-end\\*\\/`, 'ig')
|
_scripts.forEach(item => {
|
item.sql = item.sql.replace(reg, `$ex@${m.func_code}@ex$`)
|
})
|
if (_setting.dataresource) {
|
_setting.dataresource = _setting.dataresource.replace(reg, `$ex@${m.func_code}@ex$`)
|
}
|
})
|
}
|
|
this.setState({
|
setting: _setting,
|
columns: fromJS(config.columns).toJS(),
|
scripts: _scripts
|
})
|
}
|
|
columnChange = (values) => {
|
let columns = fromJS(this.state.columns).toJS()
|
|
if (values.uuid) {
|
columns = columns.map(item => {
|
if (item.uuid === values.uuid) {
|
return values
|
} else {
|
return item
|
}
|
})
|
} else {
|
values.uuid = Utils.getuuid()
|
columns.push(values)
|
}
|
|
this.setState({ columns })
|
}
|
|
deleteColumn = (record) => {
|
this.setState({ columns: this.state.columns.filter(item => item.uuid !== record.uuid) })
|
}
|
|
handleEdit = (record) => {
|
this.contrastForm.edit(record)
|
}
|
|
changeTab = (val) => {
|
const { activeKey, setting } = this.state
|
|
if (activeKey === 'setting') {
|
this.settingForm.handleConfirm().then(res => {
|
if (res.interType !== 'system' && val === 'scripts') {
|
notification.warning({
|
top: 92,
|
message: '使用系统接口时，才可以设置自定义脚本！',
|
duration: 5
|
})
|
return
|
}
|
|
this.setState({
|
setting: res
|
}, () => {
|
if (res.interType === 'system') { // 系统接口，sql验证
|
this.setState({loading: true})
|
|
this.sqlverify(() => { // 验证成功
|
this.setState({
|
activeKey: val,
|
loading: false
|
})
|
}, () => { // 验证失败
|
this.setState({
|
activeKey: val,
|
loading: false
|
})
|
}, activeKey)
|
} else {
|
this.setState({
|
activeKey: val
|
})
|
}
|
})
|
})
|
} else if (activeKey === 'columns') {
|
if (setting.interType !== 'system' && val === 'scripts') {
|
notification.warning({
|
top: 92,
|
message: '使用系统接口时，才可以设置自定义脚本！',
|
duration: 5
|
})
|
return
|
}
|
|
this.setState({
|
activeKey: val
|
})
|
} else if (activeKey === 'scripts') {
|
let _loading = false
|
if (this.scriptsForm && this.scriptsForm.state.editItem) {
|
_loading = true
|
} else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.scriptsForm.props.form.getFieldValue('sql'))) {
|
_loading = true
|
}
|
|
if (_loading) {
|
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
|
})
|
}, activeKey)
|
}
|
}
|
|
submitDataSource = () => {
|
const { activeKey, setting, columns, scripts } = this.state
|
|
return new Promise((resolve, reject) => {
|
if (activeKey === 'setting') {
|
this.settingForm.handleConfirm().then(res => {
|
this.setState({
|
setting: res
|
}, () => {
|
this.sqlverify(() => { resolve({setting: res, columns, scripts }) }, reject, 'submit')
|
})
|
}, () => {
|
reject()
|
})
|
} else if (activeKey === 'columns') {
|
this.sqlverify(() => { resolve({setting, columns, scripts }) }, reject, 'submit')
|
} else if (activeKey === 'scripts') {
|
let _loading = false
|
if (this.scriptsForm && this.scriptsForm.state.editItem) {
|
_loading = true
|
} else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.scriptsForm.props.form.getFieldValue('sql'))) {
|
_loading = true
|
}
|
|
if (_loading) {
|
notification.warning({
|
top: 92,
|
message: '存在未保存脚本，请点击确定保存，或点击取消放弃修改！',
|
duration: 5
|
})
|
reject()
|
return
|
}
|
|
this.sqlverify(() => { resolve({setting, columns, scripts }) }, reject, 'submit')
|
}
|
})
|
}
|
|
sqlverify = (resolve, reject, type, testScripts) => {
|
const { searches, config } = this.props
|
const { columns, setting, scripts } = this.state
|
|
if (setting.interType !== 'system') { // 不使用系统接口时，不需要sql验证
|
resolve()
|
return
|
}
|
|
let _scripts = []
|
|
if (testScripts) {
|
_scripts = testScripts.filter(item => item.status !== 'false')
|
} else {
|
_scripts = scripts.filter(item => item.status !== 'false')
|
}
|
|
if (type === 'submit' && setting.execute === 'false' && _scripts.length === 0) {
|
notification.warning({
|
top: 92,
|
message: '不执行默认sql时，请添加自定义脚本！',
|
duration: 5
|
})
|
reject()
|
return
|
}
|
|
// 不使用默认sql切换
|
if (type === 'setting' && setting.execute === 'false') {
|
resolve()
|
} else if (type === 'scripts' && _scripts.length === 0) {
|
resolve()
|
} else if (setting.execute !== 'false' || _scripts.length > 0) {
|
let timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
let param = {
|
func: 's_debug_sql',
|
exec_type: 'y',
|
LText: SettingUtils.getDebugSql(setting, _scripts, columns, this.getRegOptions(searches), config.calendar, config.urlFields, timestamp)
|
}
|
param.LText = Utils.formatOptions(param.LText)
|
param.timestamp = timestamp
|
param.secretkey = Utils.encrypt('', timestamp)
|
|
Api.genericInterface(param).then(result => {
|
if (result.status) {
|
resolve()
|
} else {
|
reject()
|
Modal.error({
|
title: result.message
|
})
|
}
|
})
|
} else {
|
resolve()
|
}
|
}
|
|
getRegOptions = (searches) => {
|
if (!searches || searches.length === 0) return []
|
|
let options = []
|
let fieldmap = new Map()
|
searches.forEach(search => {
|
let item = {
|
key: search.field,
|
value: '0'
|
}
|
|
if (fieldmap.has(item.key)) {
|
item.key = item.key + '1'
|
}
|
|
fieldmap.set(item.key, true)
|
|
if (search.type === 'group') {
|
options.push({
|
key: search.field,
|
value: '0'
|
})
|
options.push({
|
key: search.datefield,
|
value: '0'
|
})
|
options.push({
|
key: search.datefield + '1',
|
value: '0'
|
})
|
options.push(item)
|
} else if (['datemonth', 'dateweek', 'daterange'].includes(search.type)) {
|
options.push(item)
|
options.push({
|
key: item.key + '1',
|
value: '0'
|
})
|
} else if (search.type === 'text' || search.type === 'select') {
|
item.key.split(',').forEach(field => {
|
let cell = JSON.parse(JSON.stringify(item))
|
cell.key = field
|
|
options.push(cell)
|
})
|
} else {
|
options.push(item)
|
}
|
})
|
|
return options
|
}
|
|
updatefields = (columns) => {
|
this.setState({
|
columns: columns
|
})
|
}
|
|
// 自定义脚本修改
|
scriptsChange = (scripts) => {
|
return new Promise((resolve, reject) => {
|
this.sqlverify(resolve, reject, 'verify', scripts)
|
})
|
}
|
|
// 自定义脚本更新
|
scriptsUpdate = (scripts) => {
|
this.setState({scripts})
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
render() {
|
const { config } = this.props
|
const { columns, setting, scripts, colColumns, activeKey, loading } = this.state
|
|
return (
|
<div className="model-verify-card-box-tab">
|
{loading && <Spin size="large" />}
|
<Tabs activeKey={activeKey} className="verify-card-box" onChange={this.changeTab}>
|
<TabPane tab="数据源" key="setting">
|
<SettingForm
|
menuId={this.props.menuId}
|
columns={columns}
|
setting={setting}
|
scripts={scripts}
|
wrappedComponentRef={(inst) => this.settingForm = inst}
|
/>
|
</TabPane>
|
<TabPane tab="字段集" key="columns">
|
<ColForm
|
columnChange={this.columnChange}
|
wrappedComponentRef={(inst) => this.contrastForm = inst}
|
/>
|
<FieldsComponent
|
config={{...config, columns}}
|
type="fields"
|
updatefield={this.updatefields}
|
/>
|
<Table
|
bordered
|
rowKey="uuid"
|
className="custom-table"
|
dataSource={columns}
|
columns={colColumns}
|
pagination={false}
|
/>
|
</TabPane>
|
<TabPane tab={
|
<span>
|
自定义脚本
|
{scripts.length ? <span className="count-tip">{scripts.length}</span> : null}
|
</span>
|
} key="scripts" id="mk-setting-scripts">
|
<CustomScript
|
setting={setting}
|
scripts={scripts}
|
urlFields={config.urlFields}
|
defaultSql={this.state.defaultsql}
|
searches={this.props.searches}
|
scriptsChange={this.scriptsChange}
|
scriptsUpdate={this.scriptsUpdate}
|
wrappedComponentRef={(inst) => this.scriptsForm = inst}
|
/>
|
</TabPane>
|
</Tabs>
|
</div>
|
)
|
}
|
}
|
|
export default Form.create()(VerifyCard)
|
