import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Form, Tabs, Row, Col, Button, Popconfirm, notification, Modal, message, InputNumber, Typography } from 'antd'
|
import { EditOutlined, StopOutlined, CheckCircleOutlined, SwapOutlined, DeleteOutlined } from '@ant-design/icons'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
|
import CustomScript from './customscript'
|
import asyncComponent from '@/utils/asyncComponent'
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
const { confirm } = Modal
|
const { Paragraph } = Typography
|
|
const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
|
const FullScripts = asyncComponent(() => import('@/templates/zshare/verifycard/fullScripts'))
|
|
class VerifyPay extends Component {
|
static propTpyes = {
|
columns: PropTypes.array, // 显示列
|
card: PropTypes.object,
|
}
|
|
state = {
|
verify: null,
|
oriVerify: null,
|
defaultSql: '',
|
systemScripts: [],
|
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: '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 { card, columns } = this.props
|
let _verify = fromJS(card.verify || {}).toJS()
|
|
_verify.scripts = _verify.scripts || []
|
|
let sysfields = ['UserName', 'FullName', 'RoleID', 'mk_departmentcode', 'mk_organization', 'mk_user_type', 'mk_nation', 'mk_province', 'mk_city', 'mk_district', 'mk_address', 'tbid', 'bid']
|
let _declare = ['@UserName nvarchar(50)', '@FullName nvarchar(50)', '@RoleID nvarchar(512)', '@mk_departmentcode nvarchar(512)', '@mk_organization nvarchar(512)', '@mk_user_type nvarchar(20)', '@mk_nation nvarchar(50)', '@mk_province nvarchar(50)', '@mk_city nvarchar(50)', '@mk_district nvarchar(50)', '@mk_address nvarchar(100)', '@ErrorCode nvarchar(50)', '@retmsg nvarchar(4000)', '@bid nvarchar(50)', '@tbid nvarchar(50)']
|
let _select = ['@UserName=\'\'', '@FullName=\'\'', '@RoleID=\'\'', '@mk_departmentcode=\'\'', '@mk_organization=\'\'', '@mk_user_type=\'\'', '@mk_nation=\'\'', '@mk_province=\'\'', '@mk_city=\'\'', '@mk_district=\'\'', '@mk_address=\'\'', '@ErrorCode=\'\'', '@retmsg=\'\'', '@bid=\'\'']
|
|
sysfields = sysfields.map(field => field.toLowerCase())
|
columns.forEach(_f => {
|
if (sysfields.includes(_f.field.toLowerCase())) return
|
|
if (/decimal|int/ig.test(_f.datatype)) {
|
_select.push(`@${_f.field}=1`)
|
} else if (/date/ig.test(_f.datatype)) {
|
_select.push(`@${_f.field}='1949-10-01'`)
|
} else {
|
_select.push(`@${_f.field}=''`)
|
}
|
|
_declare.push(`@${_f.field} ${_f.datatype}`)
|
})
|
|
let _sql = `Declare ${_declare.join(', ')}
|
Select ${_select.join(', ')}
|
`
|
|
this.setState({
|
defaultSql: _sql,
|
verify: _verify,
|
oriVerify: fromJS(_verify).toJS()
|
})
|
}
|
|
componentDidMount () {
|
this.getsysScript()
|
}
|
|
getsysScript = () => {
|
if (sessionStorage.getItem('mk_sys_scripts')) {
|
this.setState({
|
systemScripts: JSON.parse(sessionStorage.getItem('mk_sys_scripts'))
|
})
|
return
|
}
|
|
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, 'x')
|
|
let _sParam = {
|
func: 'sPC_Get_SelectedList',
|
LText: _scriptSql,
|
obj_name: 'data',
|
arr_field: 'funcname,longparam',
|
exec_type: 'x'
|
}
|
|
_sParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
_sParam.secretkey = Utils.encrypt('', _sParam.timestamp)
|
_sParam.open_key = Utils.encryptOpenKey(_sParam.secretkey, _sParam.timestamp) // 云端数据验证
|
|
Api.getCloudConfig(_sParam).then(res => {
|
if (res.status) {
|
let _scripts = res.data.map(item => {
|
return {
|
name: item.funcname,
|
value: window.decodeURIComponent(window.atob(item.longparam))
|
}
|
})
|
|
sessionStorage.setItem('mk_sys_scripts', JSON.stringify(_scripts))
|
|
this.setState({
|
systemScripts: _scripts
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
scriptsChange = (scripts, resolve, reject, values) => {
|
const { card } = this.props
|
const { defaultSql } = this.state
|
|
let verify = fromJS(this.state.verify).toJS()
|
verify.scripts = scripts
|
|
let sql = defaultSql
|
|
scripts.forEach(item => {
|
if (item.status === 'false') return
|
|
sql += `
|
${item.sql}
|
`
|
})
|
|
if (card.output) {
|
sql += `
|
aaa: select @ErrorCode as ErrorCode,@retmsg as retmsg,${card.output} as mk_b_id`
|
} else {
|
sql += `
|
aaa: select @ErrorCode as ErrorCode,@retmsg as retmsg`
|
}
|
|
sql = sql.replace(/@\$|\$@/ig, '')
|
sql = sql.replace(/@datam@/ig, `''`)
|
sql = sql.replace(/@typename@/ig, `'debug'`)
|
|
if (resolve) {
|
Api.sDebug(sql).then(res => {
|
if (res.status || res.ErrCode === '-2') {
|
resolve()
|
values && MKEmitter.emit('editLineId', values.uuid)
|
|
this.setState({ verify })
|
} else {
|
reject()
|
|
Modal.error({
|
title: res.message
|
})
|
}
|
})
|
} else {
|
values && MKEmitter.emit('editLineId', values.uuid)
|
|
this.setState({ verify })
|
}
|
}
|
|
handleDelete = (record) => {
|
const { verify } = this.state
|
|
verify.scripts = verify.scripts.filter(item => item.uuid !== record.uuid)
|
|
this.setState({ verify: verify })
|
}
|
|
handleEdit = (record) => {
|
this.scriptsForm.edit(record)
|
let node = document.getElementById('mk-pay-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 = fromJS(this.state.verify).toJS()
|
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
|
})
|
}
|
|
handleConfirm = () => {
|
const { verify } = this.state
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
if (verify.scripts.length === 0) {
|
notification.warning({
|
top: 92,
|
message: '使用系统函数，需要添加自定义脚本！',
|
duration: 5
|
})
|
return
|
}
|
|
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) {
|
confirm({
|
content: `存在未保存项，确定提交吗？`,
|
onOk() {
|
resolve(verify)
|
},
|
onCancel() {}
|
})
|
} else {
|
resolve(verify)
|
}
|
})
|
}
|
|
handleCancel = () => {
|
const { verify, oriVerify } = this.state
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
if (!is(fromJS(verify), fromJS(oriVerify))) {
|
confirm({
|
content: '验证信息已修改，确定取消吗？',
|
onOk() {
|
resolve()
|
},
|
onCancel() {}
|
})
|
} else {
|
resolve()
|
}
|
})
|
}
|
|
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}
|
})
|
}
|
|
render() {
|
const { card, columns } = this.props
|
const { verify, scriptsColumns } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<div>
|
{card.label ? <div className="mk-com-name">{card.label} - 验证信息</div> : null}
|
<Tabs className="pay-verify-card-box">
|
<TabPane tab={
|
<span>
|
自定义脚本
|
{verify.scripts.length ? <span className="count-tip">{verify.scripts.length}</span> : null}
|
</span>
|
} key="scripts" id="mk-pay-script">
|
<FullScripts
|
scripts={verify.scripts}
|
getScriptsFullForm={() => this.scriptsFullForm}
|
getScriptsForm={() => this.scriptsForm}
|
handleStatus={this.handleStatus}
|
handleDelete={this.handleDelete}
|
>
|
<CustomScript
|
type="fullscreen"
|
columns={columns}
|
scripts={verify.scripts}
|
systemScripts={this.state.systemScripts}
|
scriptsChange={this.scriptsChange}
|
wrappedComponentRef={(inst) => this.scriptsFullForm = inst}
|
/>
|
</FullScripts>
|
<CustomScript
|
columns={columns}
|
scripts={verify.scripts}
|
systemScripts={this.state.systemScripts}
|
scriptsChange={this.scriptsChange}
|
wrappedComponentRef={(inst) => this.scriptsForm = inst}
|
/>
|
<EditTable actions={['move']} data={verify.scripts} columns={scriptsColumns} onChange={(scripts) => {this.setState({verify: {...verify, scripts}})}}/>
|
</TabPane>
|
<TabPane tab="信息提示" key="tip">
|
<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()(VerifyPay)
|
