import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Input, Radio, Tooltip, notification, Select, InputNumber } from 'antd'
|
import { QuestionCircleOutlined } from '@ant-design/icons'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import { formRule } from '@/utils/option.js'
|
import Utils from '@/utils/utils.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
// import './index.scss'
|
|
const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror'))
|
const MKColor = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkColor'))
|
const { TextArea } = Input
|
|
class SettingForm extends Component {
|
static propTpyes = {
|
config: PropTypes.object, // 页面配置
|
menu: PropTypes.object, // 菜单信息
|
setting: PropTypes.object, // 数据源配置
|
columns: PropTypes.array, // 列设置
|
scripts: PropTypes.array, // 自定义脚本
|
updateStatus: PropTypes.func, // 状态更新
|
}
|
|
state = {
|
interType: 'system',
|
sysInterface: 'false',
|
controlField: '',
|
tableType: '',
|
funcTooltip: '',
|
funcRules: []
|
}
|
|
UNSAFE_componentWillMount () {
|
const { setting } = this.props
|
|
let usefulFields = sessionStorage.getItem('permFuncField')
|
if (usefulFields) {
|
try {
|
usefulFields = JSON.parse(usefulFields)
|
} catch (e) {
|
usefulFields = []
|
}
|
} else {
|
usefulFields = []
|
}
|
|
let tooltip = null
|
let rules = []
|
|
if (usefulFields.length > 0) {
|
tooltip = '开头可用字符：' + usefulFields.join(', ')
|
let str = '^(' + usefulFields.join('|') + ')'
|
let _patten = new RegExp(str + formRule.func.innerPattern + '$', 'g')
|
|
rules.push({
|
pattern: _patten,
|
message: formRule.func.innerMessage
|
})
|
}
|
|
this.setState({
|
interType: setting.interType || 'system',
|
controlField: setting.controlField || '',
|
sysInterface: setting.sysInterface || 'false',
|
tableType: setting.tableType,
|
funcTooltip: tooltip,
|
funcRules: rules
|
})
|
}
|
|
handleConfirm = () => {
|
const { setting } = this.props
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
// 数据源前端验证
|
if (values.interType === 'system' && values.default !== 'false' && !values.dataresource) {
|
notification.warning({
|
top: 92,
|
message: '请填写数据源！',
|
duration: 5
|
})
|
reject()
|
return
|
} else if (values.interType === 'system' && 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
|
})
|
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
|
} 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 === 'system' && values.default !== 'false' &&
|
/[^\s]+\s+[^\s]+/ig.test(values.dataresource) && setting.dataresource !== values.dataresource
|
) {
|
let param = {
|
func: 's_DataSrc_Save',
|
LText: values.dataresource,
|
MenuID: this.props.menu.MenuID
|
}
|
|
param.LText = Utils.formatOptions(param.LText)
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt(param.LText, param.timestamp)
|
|
Api.genericInterface(param)
|
}
|
|
resolve(values)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
onRadioChange = (e, key) => {
|
let value = e.target.value
|
|
if (key === 'interType') {
|
this.setState({
|
interType: value
|
})
|
} else if (key === 'sysInterface') {
|
this.setState({
|
sysInterface: value
|
})
|
if (value === 'true') {
|
this.props.form.setFieldsValue({
|
interface: window.GLOB.mainSystemApi || ''
|
})
|
}
|
}
|
this.props.updateStatus({[key]: value})
|
}
|
|
primaryKeyChange = (val) => {
|
if (val) {
|
this.props.form.setFieldsValue({
|
order: `${val} desc`
|
})
|
}
|
}
|
|
render() {
|
const { setting, menu, config, columns } = this.props
|
const { getFieldDecorator } = this.props.form
|
const { interType, funcRules, funcTooltip, tableType, controlField, sysInterface } = this.state
|
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<Form {...formItemLayout}>
|
<Row gutter={24}>
|
<Col span={8}>
|
<Form.Item label="表名">
|
{getFieldDecorator('tableName', {
|
initialValue: setting.tableName || '',
|
rules: [
|
{
|
required: true,
|
message: '请输入表名!'
|
},
|
{
|
max: 50,
|
message: '表名最长为50个字符!'
|
},
|
{
|
pattern: /^[a-zA-Z0-9@_]+$/,
|
message: '表名只可使用字母、数字以及_'
|
}
|
]
|
})(<Input placeholder={''} autoComplete="off" />)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="接口类型">
|
{getFieldDecorator('interType', {
|
initialValue: interType,
|
rules: [
|
{
|
required: true,
|
message: '请选择接口类型!'
|
},
|
]
|
})(
|
<Radio.Group onChange={(e) => {this.onRadioChange(e, 'interType')}}>
|
<Radio value="system">系统</Radio>
|
<Radio value="inner">内部</Radio>
|
<Radio value="outer">外部</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="表格属性">
|
{getFieldDecorator('tableType', {
|
initialValue: setting.tableType
|
})(
|
<Radio.Group onChange={(e) => this.setState({tableType: e.target.value})}>
|
<Radio value="">不可选</Radio>
|
<Radio value="radio">单选</Radio>
|
<Radio value="checkbox">多选</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
{interType === 'outer' ? <Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="单点登录系统">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
系统接口
|
</Tooltip>
|
}>
|
{getFieldDecorator('sysInterface', {
|
initialValue: sysInterface,
|
rules: [
|
{
|
required: true,
|
message: '请选择系统接口!'
|
},
|
]
|
})(
|
<Radio.Group onChange={(e) => {this.onRadioChange(e, 'sysInterface')}}>
|
<Radio value="true">是</Radio>
|
<Radio value="false">否</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col> : null}
|
{interType === 'outer' ? <Col className="mk-through-line3" span={24}>
|
<Form.Item label="接口地址">
|
{getFieldDecorator('interface', {
|
initialValue: setting.interface || (interType === 'outer' && sysInterface === 'true' ? window.GLOB.mainSystemApi : ''),
|
rules: [
|
{
|
required: interType === 'outer' && sysInterface === 'true' ? false : true,
|
message: '请输入接口地址!'
|
},
|
]
|
})(<TextArea rows={2} readOnly={interType === 'outer' && sysInterface === 'true'}/>)}
|
</Form.Item>
|
</Col> : null}
|
{interType === 'outer' && sysInterface !== 'true' ? <Col className="mk-through-line3" span={24}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="正式系统所使用的的接口地址。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
正式地址
|
</Tooltip>
|
}>
|
{getFieldDecorator('proInterface', {
|
initialValue: setting.proInterface || ''
|
})(<TextArea rows={2} />)}
|
</Form.Item>
|
</Col> : null}
|
{interType === 'inner' ? <Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title={funcTooltip}>
|
<QuestionCircleOutlined className="mk-form-tip" />
|
内部函数
|
</Tooltip>
|
}>
|
{getFieldDecorator('innerFunc', {
|
initialValue: setting.innerFunc || '',
|
rules: [
|
{
|
required: true,
|
message: '请输入内部函数!'
|
},
|
{
|
max: formRule.func.max,
|
message: formRule.func.maxMessage
|
},
|
...funcRules
|
]
|
})(<Input placeholder={''} autoComplete="off" />)}
|
</Form.Item>
|
</Col> : null}
|
{interType === 'outer' ? <Col span={8}>
|
<Form.Item label="外部函数">
|
{getFieldDecorator('outerFunc', {
|
initialValue: setting.outerFunc || '',
|
rules: [
|
{
|
pattern: formRule.func.pattern,
|
message: formRule.func.message
|
}, {
|
max: formRule.func.max,
|
message: formRule.func.maxMessage
|
}
|
]
|
})(<Input placeholder={''} autoComplete="off" />)}
|
</Form.Item>
|
</Col> : null}
|
{interType === 'system' ? <Col span={24} className="mk-through-line3">
|
<Form.Item help={'数据ID：' + menu.MenuID} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } label={
|
<Tooltip placement="topLeft" title={`使用系统函数时，需填写数据源。注：数据权限替换符 $@ -> /* 或 ''、 @$ -> */ 或 ''；查询替换符 $select@ -> /* 或 ''、 @select$ -> */ 或 ''；统计替换符 $sum@ -> /* 或 ''、 @sum$ -> */ 或 ''。`}>
|
<QuestionCircleOutlined className="mk-form-tip" />
|
数据源
|
</Tooltip>
|
}>
|
{getFieldDecorator('dataresource', {
|
initialValue: setting.dataresource || ''
|
})(<CodeMirror />)}
|
</Form.Item>
|
</Col> : null}
|
{interType === 'system' ? <Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title={'查询时，搜索条件以where条件拼接进入sql，统计时，将数据源中以“@+搜索字段+@”的内容，以搜索条件中的值进行替换后，提交查询，注：查询类型仅在使用系统函数时有效。'}>
|
<QuestionCircleOutlined className="mk-form-tip" />
|
查询类型
|
</Tooltip>
|
}>
|
{getFieldDecorator('queryType', {
|
initialValue: setting.queryType || 'query'
|
})(
|
<Radio.Group>
|
<Radio value="query">查询</Radio>
|
<Radio value="statistics">统计</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col> : null}
|
{interType === 'system' ? <Col span={8}>
|
<Form.Item label="默认sql">
|
{getFieldDecorator('default', {
|
initialValue: setting.default || 'true'
|
})(
|
<Radio.Group>
|
<Radio value="true">执行</Radio>
|
<Radio value="false">不执行</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={8}>
|
<Form.Item label="主键">
|
{getFieldDecorator('primaryKey', {
|
initialValue: setting.primaryKey || ''
|
})(
|
<Select onChange={this.primaryKeyChange}>
|
<Select.Option key="empty" value="">未设置</Select.Option>
|
{columns.map((option, i) =>
|
<Select.Option key={i} value={option.value}>
|
{option.text}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="默认排序">
|
{getFieldDecorator('order', {
|
initialValue: setting.order || 'ID desc',
|
rules: [
|
{
|
required: true,
|
message: '请输入默认排序!'
|
},
|
{
|
max: formRule.input.max,
|
message: formRule.input.message
|
}
|
]
|
})(<Input placeholder={'ID asc, UID desc'} autoComplete="off" />)}
|
</Form.Item>
|
</Col>
|
<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>
|
<Col span={8}>
|
<Form.Item label="初始化">
|
{getFieldDecorator('onload', {
|
initialValue: setting.onload || 'true'
|
})(
|
<Radio.Group>
|
<Radio value="true">加载数据</Radio>
|
<Radio value="false">不加载数据</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col>
|
{config.Template === 'CommonTable' ? <Col span={8}>
|
<Form.Item label="按钮固定">
|
{getFieldDecorator('actionfixed', {
|
initialValue: setting.actionfixed === 'true' || setting.actionfixed === true ? 'true' : 'false'
|
})(
|
<Radio.Group>
|
<Radio value="true">是</Radio>
|
<Radio value="false">否</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col> : null}
|
{/* {config.Template === 'CommonTable' ? <Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title={'含有合并列或表格出现横向滚动时会显示异常，请慎用！'}>
|
<QuestionCircleOutlined className="mk-form-tip" />
|
表头固定
|
</Tooltip>
|
}>
|
{getFieldDecorator('columnfixed', {
|
initialValue: setting.columnfixed === 'true' || setting.columnfixed === true ? 'true' : 'false'
|
})(
|
<Radio.Group>
|
<Radio value="true">是</Radio>
|
<Radio value="false">否</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col> : null} */}
|
<Col span={8}>
|
<Form.Item label="边框">
|
{getFieldDecorator('bordered', {
|
initialValue: setting.bordered || 'true'
|
})(
|
<Radio.Group>
|
<Radio value="true">有</Radio>
|
<Radio value="false">无</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title={'表格的内边距，从大到小依次递减。'}>
|
<QuestionCircleOutlined className="mk-form-tip" />
|
表格大小
|
</Tooltip>
|
}>
|
{getFieldDecorator('size', {
|
initialValue: setting.size || 'middle'
|
})(
|
<Radio.Group>
|
<Radio value="default">大</Radio>
|
<Radio value="middle">中</Radio>
|
<Radio value="small">小</Radio>
|
<Radio value="mini">迷你</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="使用急速模式时，表格中的标记、双击事件、格式化、行合并、前缀、后缀、字段透视等效果将无效，且数据都会以文本格式显示。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
模式
|
</Tooltip>
|
}>
|
{getFieldDecorator('tableMode', {
|
initialValue: setting.tableMode || 'compatible'
|
})(
|
<Radio.Group>
|
<Radio value="compatible">兼容</Radio>
|
<Radio value="fast">急速</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="数据加载时，是否显示加载中的遮罩。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
遮罩
|
</Tooltip>
|
}>
|
{getFieldDecorator('mask', {
|
initialValue: setting.mask || 'show'
|
})(
|
<Radio.Group>
|
<Radio value="show">显示</Radio>
|
<Radio value="hidden">隐藏</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col>
|
{tableType !== '' ? <Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="当按钮执行完成并返回主键值时，默认选中主键值对应行。注：在启用无人值守功能时无效。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
首行选中
|
</Tooltip>
|
}>
|
{getFieldDecorator('selected', {
|
initialValue: setting.selected || 'false'
|
})(
|
<Radio.Group>
|
<Radio value="false">无</Radio>
|
<Radio value="init">初始化</Radio>
|
<Radio value="always">数据加载</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="选择分页时有效，默认为10条。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
每页数量
|
</Tooltip>
|
}>
|
{getFieldDecorator('pageSize', {
|
initialValue: setting.pageSize || '',
|
})(<InputNumber min={1} max={500} precision={0} />)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="双击表格中行，触发的按钮。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
双击事件
|
</Tooltip>
|
}>
|
{getFieldDecorator('doubleClick', {
|
initialValue: setting.doubleClick || ''
|
})(
|
<Select allowClear>
|
{config.action.map(option =>
|
<Select.Option key={option.uuid} value={option.uuid}>{option.label}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="空值时高度自适应。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
table高度
|
</Tooltip>
|
}>
|
{getFieldDecorator('height', {
|
initialValue: setting.height
|
})(<InputNumber min={10} max={3000} precision={0}/>)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item className="mk-color-move" label={
|
<Tooltip placement="topLeft" title="默认值rgba(0, 0, 0, 0.65)">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
字体颜色
|
</Tooltip>
|
}>
|
{getFieldDecorator('color', {
|
initialValue: setting.color
|
})(<MKColor config={{initval: setting.color || 'rgba(0, 0, 0, 0.65)'}} />)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="字体大小">
|
{getFieldDecorator('fontSize', {
|
initialValue: setting.fontSize || 14
|
})(<InputNumber min={12} max={50} precision={0}/>)}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="用于控制行数据是否可选择。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
禁用字段
|
</Tooltip>
|
}>
|
{getFieldDecorator('controlField', {
|
initialValue: setting.controlField || ''
|
})(
|
<Select allowClear onChange={(val) => this.setState({controlField: val})}>
|
{columns.map((option, i) =>
|
<Select.Option key={i} value={option.value}>
|
{option.text}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
{controlField ? <Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="当字段值与控制值相等时，行数据会禁用，多个值用逗号分隔。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
控制值
|
</Tooltip>
|
}>
|
{getFieldDecorator('controlVal', {
|
initialValue: setting.controlVal || ''
|
})(<Input autoComplete="off" />)}
|
</Form.Item>
|
</Col> : null}
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(SettingForm)
|
