import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Form, Row, Col, Input, Radio, Select, Tooltip, Icon, notification, InputNumber } from 'antd'
|
import moment from 'moment'
|
|
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 = {
|
type: PropTypes.string, // 菜单类型
|
dict: PropTypes.object, // 字典项
|
menu: PropTypes.object, // 菜单信息
|
config: PropTypes.object, // 页面配置信息
|
formlist: PropTypes.array, // 表单信息
|
}
|
|
state = {
|
|
}
|
|
handleConfirm = (otype) => {
|
const { menu } = this.props
|
const { setting } = this.state
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
values = {...setting, ...values}
|
|
// 数据源前端验证
|
if (values.interType === 'inner' && !values.innerFunc && values.default !== 'false' && !values.dataresource) {
|
notification.warning({
|
top: 92,
|
message: '请填写内部函数或数据源！',
|
duration: 5
|
})
|
reject()
|
return
|
} else if (values.interType === 'inner' && !values.innerFunc && values.default !== '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
|
})
|
return
|
} else if (_lparen !== _rparen) {
|
notification.warning({
|
top: 92,
|
message: '数据源中()必须成对出现',
|
duration: 5
|
})
|
return
|
} else if (/--/ig.test(values.dataresource)) {
|
notification.warning({
|
top: 92,
|
message: '数据源中，不可出现字符 -- ，注释请用 /*内容*/',
|
duration: 5
|
})
|
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.default !== 'false' &&
|
/[^\s]+\s+[^\s]+/ig.test(values.dataresource) &&
|
this.props.config.setting.dataresource !== values.dataresource
|
) {
|
let param = {
|
func: 's_DataSrc_Save',
|
LText: values.dataresource,
|
MenuID: menu.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)
|
}
|
|
if (otype === 'change') {
|
this.setState({
|
setting: values,
|
}, () => {
|
resolve()
|
})
|
} else {
|
values.customScript = this.getCustomScript(values)
|
|
this.sqlverify(values, resolve, reject)
|
}
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
onRadioChange = (e, key) => {
|
let value = e.target.value
|
let _formlist = fromJS(this.state.formlist).toJS()
|
|
if (key === 'interType') {
|
this.setState({
|
formlist: _formlist.map(item => {
|
item.hidden = false
|
|
if (value === 'inner' && ['sysInterface', 'interface', 'outerFunc'].includes(item.key)) {
|
item.initVal = this.props.form.getFieldValue(item.key)
|
item.hidden = true
|
} else if (value === 'outer' && ['innerFunc', 'dataresource', 'queryType'].includes(item.key)) {
|
item.initVal = this.props.form.getFieldValue(item.key)
|
item.hidden = true
|
}
|
|
return item
|
})
|
})
|
} else if (key === 'sysInterface') {
|
if (value === 'true') {
|
this.props.form.setFieldsValue({
|
interface: window.GLOB.mainSystemApi || ''
|
})
|
}
|
this.setState({
|
formlist: _formlist.map(item => {
|
if (item.key === 'interface') {
|
item.readonly = value === 'true'
|
}
|
|
return item
|
})
|
})
|
}
|
}
|
|
getFields(formlist) {
|
const { getFieldDecorator } = this.props.form
|
const fields = []
|
|
formlist.forEach((item, index) => {
|
if (item.hidden || item.forbid) return
|
|
if (item.type === 'text') { // 文本搜索
|
let rules = item.rules || []
|
|
fields.push(
|
<Col span={8} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal || '',
|
rules: [
|
{
|
required: !!item.required,
|
message: this.props.dict['form.required.input'] + item.label + '!'
|
},
|
...rules
|
]
|
})(<Input placeholder={item.placeholder || ''} autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'number') {
|
fields.push(
|
<Col span={12} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal || 6,
|
rules: [
|
{
|
required: item.required,
|
message: this.props.dict['form.required.input'] + item.label + '!'
|
}
|
]
|
})(<InputNumber min={item.min} max={item.max} precision={0} />)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'select') { // 下拉搜索
|
fields.push(
|
<Col span={12} key={index}>
|
<Form.Item label={item.label}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal || '',
|
rules: [
|
{
|
required: !!item.required,
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
filterOption={(input, option) => {
|
return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
|
option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
}}
|
onChange={(value) => {this.selectChange(item.key, value)}}
|
getPopupContainer={() => document.getElementById('model-table-setting-form')}
|
>
|
{item.options.map((option, i) =>
|
<Select.Option id={i} key={i} value={option.value}>
|
{option.text}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'radio') {
|
fields.push(
|
<Col span={12} key={index}>
|
<Form.Item label={item.tooltip ?
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal,
|
rules: [
|
{
|
required: !!item.required,
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<Radio.Group onChange={(e) => {this.onRadioChange(e, item.key)}}>
|
{
|
item.options.map((option, i) => {
|
return (
|
<Radio key={i} value={option.value}>{option.text}</Radio>
|
)
|
})
|
}
|
</Radio.Group>,
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'datasource') {
|
fields.push(
|
<Col span={24} key={index} style={{paddingLeft: '7px'}}>
|
<Form.Item labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } help={item.help} label={
|
<Tooltip placement="topLeft" title={item.tooltip}>
|
<Icon type="question-circle" />
|
{item.label}
|
</Tooltip>
|
}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal
|
})(<TextArea rows={4} />)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'textarea') {
|
fields.push(
|
<Col span={20} offset={4} key={index}>
|
<Form.Item className="text-area">
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal,
|
rules: [
|
{
|
required: !!item.required,
|
message: this.props.dict['form.required.input'] + item.label + '!'
|
}
|
]
|
})(<TextArea rows={4} />)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'multiselect') { // 多选
|
fields.push(
|
<Col span={12} key={index}>
|
<Form.Item label={item.label}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal || []
|
})(
|
<Select
|
showSearch
|
mode="multiple"
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
>
|
{item.options.map((option, i) =>
|
<Select.Option id={i} key={i} value={option.value}>{option.text}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
}
|
})
|
|
return fields
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
// const { formlist } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<div className="model-table-setting-form-box">
|
<Form {...formItemLayout} className="model-table-setting-form">
|
<Row gutter={24}>
|
<Col span={8}>
|
<Form.Item label="名称">
|
{getFieldDecorator('label', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.input'] + '名称!'
|
},
|
]
|
})(<Input placeholder={''} autoComplete="off" />)}
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
</div>
|
)
|
}
|
}
|
|
export default Form.create()(SettingForm)
|
