import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Form, Tabs, Table, Popconfirm, Icon, notification, Modal, Typography } from 'antd'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
|
import ColForm from './columnform'
|
import CustomScriptsForm from './customscript'
|
import SettingForm from './settingform'
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
const { confirm } = Modal
|
const { Paragraph } = Typography
|
|
class VerifyCard extends Component {
|
static propTpyes = {
|
dict: PropTypes.object, // 字典项
|
card: PropTypes.object, // 数据源信息
|
menuId: PropTypes.string, // 菜单Id
|
searches: PropTypes.array, // 搜索条件
|
}
|
|
state = {
|
columns: [],
|
activeKey: 'setting',
|
initsql: '', // sql验证时变量声明及赋值
|
usefulfields: '',
|
defaultsql: '', // 默认Sql
|
systemScripts: [],
|
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={this.props.dict['mob.edit']} onClick={() => this.handleEdit(record, 'columns')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
|
<Popconfirm
|
title={this.props.dict['mob.query.delete']}
|
okText={this.props.dict['mob.confirm']}
|
cancelText={this.props.dict['mob.cancel']}
|
onConfirm={() => this.deleteColumn(record)
|
}>
|
<span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
|
</Popconfirm>
|
</div>)
|
}
|
],
|
scriptsColumns: [
|
{
|
title: 'SQL',
|
dataIndex: 'sql',
|
width: '60%',
|
render: (text) => (
|
<Paragraph copyable ellipsis={{ rows: 5, expandable: true }}>{text}</Paragraph>
|
)
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
width: '20%',
|
render: (text, record) => record.status === 'false' ?
|
(
|
<div>
|
{this.props.dict['header.form.status.forbidden']}
|
<Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" />
|
</div>
|
) :
|
(
|
<div>
|
{this.props.dict['header.form.status.open']}
|
<Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
|
</div>
|
)
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '20%',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(<div>
|
<span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record, 'scripts')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
|
<span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
|
<span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
|
<span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><Icon type="swap" /></span>
|
<Popconfirm
|
title={this.props.dict['header.form.query.delete']}
|
okText={this.props.dict['model.confirm']}
|
cancelText={this.props.dict['header.cancel']}
|
onConfirm={() => this.deleteScript(record)
|
}>
|
<span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
|
</Popconfirm>
|
</div>)
|
}
|
]
|
}
|
|
UNSAFE_componentWillMount() {
|
const { card } = this.props
|
|
this.setState({
|
columns: fromJS(card.columns).toJS(),
|
setting: fromJS(card.setting).toJS(),
|
scripts: fromJS(card.scripts).toJS()
|
})
|
}
|
|
componentDidMount() {
|
|
}
|
|
getsysScript = () => {
|
const { defaultsql } = this.state
|
|
let _scriptSql = `Select distinct func+Remark as funcname,longparam, s.Sort from s_custom_script s inner join (select OpenID from sapp where ID=@Appkey@) p on s.openid = case when s.appkey='' then s.openid else p.OpenID end order by s.Sort`
|
|
_scriptSql = Utils.formatOptions(_scriptSql)
|
|
let _sParam = {
|
func: 'sPC_Get_SelectedList',
|
LText: _scriptSql,
|
obj_name: 'data',
|
arr_field: 'funcname,longparam'
|
}
|
|
_sParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
|
_sParam.secretkey = Utils.encrypt(_sParam.LText, _sParam.timestamp)
|
|
_sParam.open_key = Utils.encrypt(_sParam.secretkey, _sParam.timestamp, true) // 云端数据验证
|
|
Api.getSystemConfig(_sParam).then(res => {
|
if (res.status) {
|
let _scripts = []
|
|
if (defaultsql) {
|
_scripts.push({
|
name: '默认sql',
|
value: defaultsql
|
})
|
}
|
|
res.data.forEach(item => {
|
let _item = {
|
name: item.funcname,
|
value: Utils.formatOptions(item.longparam, true)
|
}
|
|
_scripts.push(_item)
|
})
|
|
this.setState({
|
systemScripts: _scripts
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
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 })
|
}
|
|
scriptsChange = (values) => {
|
let scripts = fromJS(this.state.scripts).toJS()
|
|
if (values.uuid) {
|
scripts = scripts.map(item => {
|
if (item.uuid === values.uuid) {
|
return values
|
} else {
|
return item
|
}
|
})
|
} else {
|
values.uuid = Utils.getuuid()
|
scripts.push(values)
|
}
|
|
this.setState({ scripts })
|
}
|
|
|
deleteColumn = (record) => {
|
this.setState({ columns: this.state.columns.filter(item => item.uuid !== record.uuid) })
|
}
|
|
deleteScript = (record) => {
|
this.setState({ scripts: this.state.scripts.filter(item => item.uuid !== record.uuid) })
|
}
|
|
handleEdit = (record, type) => {
|
if (type === 'scripts') {
|
this.scriptsForm.edit(record)
|
} else if (type === 'columns') {
|
this.contrastForm.edit(record)
|
}
|
|
let node = document.getElementById('mob-verify-card-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)
|
}
|
}
|
|
handleStatus = (record) => {
|
let scripts = fromJS(this.state.scripts).toJS()
|
record.status = record.status === 'false' ? 'true' : 'false'
|
|
scripts = scripts.map(item => {
|
if (item.uuid === record.uuid) {
|
return record
|
} else {
|
return item
|
}
|
})
|
|
this.setState({ scripts })
|
}
|
|
handleUpDown = (record, direction) => {
|
let scripts = fromJS(this.state.scripts).toJS()
|
let index = 0
|
|
scripts = scripts.filter((item, i) => {
|
if (item.uuid === record.uuid) {
|
index = i
|
}
|
|
return item.uuid !== record.uuid
|
})
|
if ((index === 0 && direction === 'up') || (index === scripts.length && direction === 'down')) {
|
return
|
}
|
|
if (direction === 'up') {
|
scripts.splice(index - 1, 0, record)
|
} else {
|
scripts.splice(index + 1, 0, record)
|
}
|
|
this.setState({ scripts })
|
}
|
|
handleConfirm = () => {
|
const { card } = this.props
|
const { setting, scripts, columns } = this.state
|
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
if (setting.default === 'false' && scripts.length === 0) {
|
notification.warning({
|
top: 92,
|
message: '不执行默认sql时，必须设置自定义脚本！',
|
duration: 5
|
})
|
return
|
}
|
|
let _loading = false
|
if (this.scriptsForm && this.scriptsForm.state.editItem) {
|
_loading = true
|
}
|
|
if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql')) {
|
_loading = true
|
}
|
|
if (_loading) {
|
confirm({
|
content: `存在未保存项，确定提交吗？`,
|
okText: this.props.dict['mob.confirm'],
|
cancelText: this.props.dict['mob.cancel'],
|
onOk() {
|
resolve({
|
uuid: card.uuid,
|
setting: setting,
|
columns: columns,
|
scripts: scripts
|
})
|
},
|
onCancel() {}
|
})
|
} else {
|
resolve({
|
uuid: card.uuid,
|
setting: setting,
|
columns: columns,
|
scripts: scripts
|
})
|
}
|
})
|
}
|
|
changeTab = (val) => {
|
const { activeKey } = this.state
|
|
if (activeKey === 'setting') {
|
this.settingForm.handleConfirm().then(res => {
|
console.log(res)
|
})
|
}
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
render() {
|
const { columns, setting, scripts, colColumns, scriptsColumns, activeKey } = this.state
|
|
return (
|
<div id="mob-verify-card-box-tab">
|
<Tabs activeKey={activeKey} className="verify-card-box" onChange={this.changeTab}>
|
<TabPane tab="数据源" key="setting">
|
<SettingForm
|
menuId={this.props.menuId}
|
dict={this.props.dict}
|
columns={columns}
|
setting={setting}
|
wrappedComponentRef={(inst) => this.settingForm = inst}
|
/>
|
</TabPane>
|
<TabPane tab="字段集" key="columns">
|
<ColForm
|
dict={this.props.dict}
|
columnChange={this.columnChange}
|
wrappedComponentRef={(inst) => this.contrastForm = inst}
|
/>
|
<Table
|
bordered
|
rowKey="uuid"
|
className="custom-table"
|
dataSource={columns}
|
columns={colColumns}
|
pagination={false}
|
/>
|
</TabPane>
|
<TabPane tab="自定义脚本" key="scripts">
|
<CustomScriptsForm
|
setting={setting}
|
searches={this.props.searches}
|
initsql={this.state.initsql}
|
dict={this.props.dict}
|
customScripts={scripts}
|
systemScripts={this.state.systemScripts}
|
scriptsChange={this.scriptsChange}
|
wrappedComponentRef={(inst) => this.scriptsForm = inst}
|
/>
|
<Table
|
bordered
|
rowKey="uuid"
|
className="custom-table"
|
dataSource={scripts}
|
columns={scriptsColumns}
|
pagination={false}
|
/>
|
</TabPane>
|
</Tabs>
|
</div>
|
)
|
}
|
}
|
|
export default Form.create()(VerifyCard)
|
