import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
// import { fromJS } from 'immutable'
|
import { Form, Row, Col, Input, Radio, Select, Tooltip, Icon, notification } from 'antd'
|
import moment from 'moment'
|
// import CodeMirror from '@uiw/react-codemirror'
|
|
// import 'codemirror/theme/monokai.css'
|
// import 'codemirror/theme/eclipse.css'
|
// import 'codemirror/addon/selection/active-line'
|
// import 'codemirror/addon/hint/javascript-hint'
|
// import 'codemirror/addon/hint/show-hint'
|
// import 'codemirror/addon/hint/show-hint.css'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
// import SettingUtils from './utils.jsx'
|
import './index.scss'
|
|
const { TextArea } = Input
|
|
class SettingForm extends Component {
|
static propTpyes = {
|
dict: PropTypes.object, // 字典项
|
menuId: PropTypes.string, // 菜单Id
|
setting: PropTypes.object, // 数据源配置
|
columns: PropTypes.array, // 列设置
|
scripts: PropTypes.array, // 自定义脚本
|
}
|
|
state = {
|
interType: this.props.setting.interType || 'inner',
|
structure: this.props.setting.structure || 'array'
|
}
|
|
handleConfirm = (otype) => {
|
const { setting } = this.props
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
// 数据源前端验证
|
if (values.interType === 'inner' && !values.innerFunc && values.execute !== 'false' && !values.dataresource) {
|
notification.warning({
|
top: 92,
|
message: '请填写内部函数或数据源！',
|
duration: 5
|
})
|
reject()
|
return
|
} else if (values.interType === 'inner' && !values.innerFunc && values.execute !== 'false' && values.dataresource) {
|
let _quot = values.dataresource.match(/'{1}/g)
|
let _lparen = values.dataresource.match(/\({1}/g)
|
let _rparen = values.dataresource.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: '数据源中\'必须成对出现',
|
duration: 5
|
})
|
reject()
|
return
|
} else if (_lparen !== _rparen) {
|
notification.warning({
|
top: 92,
|
message: '数据源中()必须成对出现',
|
duration: 5
|
})
|
reject()
|
return
|
} else if (/--/ig.test(values.dataresource)) {
|
notification.warning({
|
top: 92,
|
message: '数据源中，不可出现字符 -- ，注释请用 /*内容*/',
|
duration: 5
|
})
|
reject()
|
return
|
}
|
|
let error = Utils.verifySql(values.dataresource)
|
|
if (error) {
|
notification.warning({
|
top: 92,
|
message: '数据源中不可使用' + error,
|
duration: 5
|
})
|
reject()
|
return
|
}
|
}
|
|
// 数据源保存
|
if (
|
values.interType === 'inner' && !values.innerFunc && values.execute !== 'false' &&
|
/[^\s]+\s+[^\s]+/ig.test(values.dataresource) && setting.dataresource !== values.dataresource
|
) {
|
let param = {
|
func: 's_DataSrc_Save',
|
LText: values.dataresource,
|
MenuID: this.props.menuId
|
}
|
|
param.LText = Utils.formatOptions(param.LText)
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
|
param.secretkey = Utils.encrypt(param.LText, param.timestamp)
|
|
Api.getLocalConfig(param)
|
}
|
|
resolve(values)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
onRadioChange = (e, key) => {
|
let value = e.target.value
|
|
if (key === 'interType') {
|
this.setState({
|
interType: value
|
})
|
} else if (key === 'structure') {
|
this.setState({
|
structure: value
|
})
|
}
|
}
|
|
render() {
|
const { columns, setting } = this.props
|
const { getFieldDecorator } = this.props.form
|
const { interType, structure } = this.state
|
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<div className="mob-datasource-setting-form-box">
|
<Form {...formItemLayout} className="mob-setting-form">
|
<Row gutter={24}>
|
<Col span={8}>
|
<Form.Item label="名称">
|
{getFieldDecorator('name', {
|
initialValue: setting.name,
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['mob.required.input'] + '名称!'
|
},
|
]
|
})(<Input placeholder={''} autoComplete="off" />)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="表名">
|
{getFieldDecorator('tableName', {
|
initialValue: setting.tableName,
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['mob.required.input'] + '表名!'
|
},
|
]
|
})(<Input placeholder={''} autoComplete="off" />)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="数据结构">
|
{getFieldDecorator('structure', {
|
initialValue: structure,
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['mob.required.select'] + '表名!'
|
},
|
]
|
})(
|
<Radio.Group onChange={(e) => {this.onRadioChange(e, 'structure')}}>
|
<Radio value="array">数组</Radio>
|
<Radio value="field">字段</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="接口类型">
|
{getFieldDecorator('interType', {
|
initialValue: interType,
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['mob.required.select'] + '接口类型!'
|
},
|
]
|
})(
|
<Radio.Group onChange={(e) => {this.onRadioChange(e, 'interType')}}>
|
<Radio value="inner">内部</Radio>
|
<Radio value="outer">外部</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col>
|
{interType === 'inner' ? <Col span={8}>
|
<Form.Item label="内部函数">
|
{getFieldDecorator('innerFunc', {
|
initialValue: setting.innerFunc || '',
|
rules: [
|
|
]
|
})(<Input placeholder={''} autoComplete="off" />)}
|
</Form.Item>
|
</Col> : null}
|
{interType === 'outer' ? <Col span={8}>
|
<Form.Item label="接口地址">
|
{getFieldDecorator('interface', {
|
initialValue: setting.interface || '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['mob.required.input'] + '接口地址!'
|
},
|
]
|
})(<Input placeholder={''} autoComplete="off" />)}
|
</Form.Item>
|
</Col> : null}
|
{interType === 'outer' ? <Col span={8}>
|
<Form.Item label="外部函数">
|
{getFieldDecorator('outerFunc', {
|
initialValue: setting.outerFunc || '',
|
rules: [
|
|
]
|
})(<Input placeholder={''} autoComplete="off" />)}
|
</Form.Item>
|
</Col> : null}
|
{interType === 'inner' ? <Col span={24} className="data-source" style={{paddingLeft: '7px'}}>
|
<Form.Item labelCol={{xs: { span: 24 }, sm: { span: 2 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 22 }} } label={
|
<Tooltip placement="topLeft" title={'使用系统函数时，需填写数据源。注：数据权限替换符 $@ -> /* 或 \'\'、 @$ -> */ 或 \'\''}>
|
<Icon type="question-circle" />
|
数据源
|
</Tooltip>
|
}>
|
{getFieldDecorator('dataresource', {
|
initialValue: setting.dataresource || ''
|
})(<TextArea rows={4} />)}
|
{/* <CodeMirror
|
value={'code'}
|
options={{
|
theme: 'eclipse',
|
lineNumbers: false,
|
mode: 'SQL',
|
extraKeys: {"Ctrl": "autocomplete"},
|
styleActiveLine: true
|
}}
|
/> */}
|
</Form.Item>
|
</Col> : null}
|
{interType === 'inner' ? <Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title={'查询时，搜索条件以where条件拼接进入sql，统计时，将数据源中以“@+搜索字段+@”的内容，以搜索条件中的值进行替换后，提交查询，注：查询类型仅在使用系统函数时有效。'}>
|
<Icon type="question-circle" />
|
查询类型
|
</Tooltip>
|
}>
|
{getFieldDecorator('queryType', {
|
initialValue: setting.queryType || 'query'
|
})(
|
<Radio.Group>
|
<Radio value="query">查询</Radio>
|
<Radio value="statistics">统计</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col> : null}
|
{structure === 'array' ? <Col span={8}>
|
<Form.Item label="主键">
|
{getFieldDecorator('primaryKey', {
|
initialValue: setting.primaryKey || ''
|
})(
|
<Select onChange={(value) => {this.selectChange('primaryKey', value)}}>
|
{columns.map((option, i) =>
|
<Select.Option key={i} value={option.value}>
|
{option.text}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{structure === 'array' ? <Col span={8}>
|
<Form.Item label="默认排序">
|
{getFieldDecorator('order', {
|
initialValue: setting.order || ''
|
})(<Input placeholder={'ID asc, UID desc'} autoComplete="off" />)}
|
</Form.Item>
|
</Col> : null}
|
{structure === 'array' ? <Col span={8}>
|
<Form.Item label="分页">
|
{getFieldDecorator('laypage', {
|
initialValue: setting.laypage || 'true'
|
})(
|
<Radio.Group>
|
<Radio value="true">是</Radio>
|
<Radio value="false">否</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col> : null}
|
|
{interType === 'inner' ? <Col span={8}>
|
<Form.Item label="默认sql">
|
{getFieldDecorator('execute', {
|
initialValue: setting.execute || 'true'
|
})(
|
<Radio.Group>
|
<Radio value="true">执行</Radio>
|
<Radio value="false">不执行</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={8}>
|
<Form.Item label="搜索条件">
|
{getFieldDecorator('search', {
|
initialValue: setting.search || 'true'
|
})(
|
<Radio.Group>
|
<Radio value="true">接收</Radio>
|
<Radio value="false">不接收</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
</div>
|
)
|
}
|
}
|
|
export default Form.create()(SettingForm)
|
