| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { fromJS } from 'immutable' |
| | | import { Form, Row, Col, Input, Select, Radio, notification, Tooltip, InputNumber, Cascader } from 'antd' |
| | | import { Form, Row, Col, Input, Select, Radio, Tooltip, InputNumber, Cascader, Checkbox, Typography } from 'antd' |
| | | import { QuestionCircleOutlined } from '@ant-design/icons' |
| | | import { formRule } from '@/utils/option.js' |
| | | |
| | |
| | | import './index.scss' |
| | | |
| | | const { TextArea } = Input |
| | | const { Paragraph } = Typography |
| | | const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) |
| | | const acTyOptions = { |
| | | pop: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width', 'openmenu', 'open', 'refreshTab', 'position', 'tipTitle'], |
| | | prompt: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width', 'openmenu', 'open', 'refreshTab', 'position', 'tipTitle'], |
| | | exec: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width', 'openmenu', 'open', 'refreshTab'], |
| | | excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'icon', 'class', 'color', 'sheet', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width'], |
| | | excelOut: ['label', 'OpenType', 'intertype', 'show', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'resetPageIndex', 'pagination', 'search', 'width'], |
| | | popview: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'color', 'popClose', 'resetPageIndex', 'width', 'display', 'ratio', 'syncComponent', 'clickouter'], |
| | | tab: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'color', 'linkmenu', 'width'], |
| | | innerpage: ['label', 'Ot', 'OpenType', 'pageTemplate', 'show', 'swipe', 'icon', 'class', 'color', 'width', 'open'], |
| | | funcbutton: ['label', 'OpenType', 'funcType', 'show', 'swipe', 'icon', 'class', 'color', 'width'], |
| | | form: ['label', 'OpenType', 'formType', 'intertype', 'Ot', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'width', 'open', 'refreshTab', 'title'] |
| | | pop: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'anchors', 'width', 'openmenu', 'refreshTab', 'position', 'tipTitle', 'hidden'], |
| | | prompt: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'anchors', 'width', 'openmenu', 'refreshTab', 'position', 'tipTitle', 'hidden'], |
| | | exec: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'anchors', 'width', 'openmenu', 'refreshTab', 'hidden'], |
| | | excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'icon', 'class', 'color', 'sheet', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'width', 'hidden'], |
| | | excelOut: ['label', 'OpenType', 'intertype', 'show', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'pagination', 'search', 'width', 'hidden'], |
| | | popview: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'color', 'popClose', 'width', 'display', 'ratio', 'syncComponent', 'clickouter', 'hidden'], |
| | | tab: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'color', 'linkmenu', 'width', 'hidden'], |
| | | innerpage: ['label', 'Ot', 'OpenType', 'pageTemplate', 'show', 'swipe', 'icon', 'class', 'color', 'width', 'hidden'], |
| | | funcbutton: ['label', 'OpenType', 'funcType', 'show', 'swipe', 'icon', 'class', 'color', 'width', 'hidden'], |
| | | form: ['label', 'OpenType', 'formType', 'intertype', 'Ot', 'execSuccess', 'execError', 'syncComponent', 'width', 'refreshTab', 'title', 'hidden'] |
| | | } |
| | | |
| | | class ActionForm extends Component { |
| | |
| | | setting: PropTypes.object, // 页面设置 |
| | | formlist: PropTypes.any, // 表单信息 |
| | | card: PropTypes.any, // 按钮信息 |
| | | inputSubmit: PropTypes.any // 回车提交事件 |
| | | inputSubmit: PropTypes.func, // 回车提交事件 |
| | | updRecord: PropTypes.func // 更新信息 |
| | | } |
| | | |
| | | state = { |
| | |
| | | }], |
| | | interTypeOptions: [{ |
| | | value: 'system', |
| | | text: this.props.dict['model.interface.system'] |
| | | text: '系统' |
| | | }, { |
| | | value: 'inner', |
| | | text: this.props.dict['model.interface.inner'] |
| | | text: '内部' |
| | | }, { |
| | | value: 'outer', |
| | | text: this.props.dict['model.interface.outer'] |
| | | text: '外部' |
| | | }, { |
| | | value: 'custom', |
| | | text: '自定义' |
| | |
| | | } |
| | | }, 100) |
| | | } |
| | | this.props.updRecord && this.props.updRecord(this.record) |
| | | } |
| | | |
| | | getMutilOptions = (requireOptions) => { |
| | |
| | | reOptions.intertype = this.state.interTypeOptions |
| | | |
| | | if (intertype === 'custom') { |
| | | shows.push('procMode', 'interface', 'callbackType', 'cbTable', 'proInterface', 'method', 'cross') |
| | | shows.push('procMode', 'interface', 'callbackType', 'proInterface', 'method', 'cross') |
| | | if (this.record.procMode === 'system') { |
| | | shows.push('sql', 'sqlType') |
| | | } else { |
| | | } else if (this.record.procMode === 'inner') { |
| | | reRequired.innerFunc = true |
| | | shows.push('innerFunc') |
| | | } |
| | | if (this.record.callbackType === 'func') { |
| | | shows.push('callbackFunc') |
| | | } else if (this.record.callbackType !== 'none') { |
| | | shows.push('cbTable') |
| | | } |
| | | reReadonly.interface = false |
| | | reRequired.interface = true |
| | | } else if (intertype === 'outer') { |
| | | shows.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc', 'output') |
| | | reRequired.innerFunc = false |
| | | shows.push('procMode', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackType', 'output') |
| | | if (this.record.procMode === 'system') { |
| | | shows.push('sql', 'sqlType') |
| | | } else if (this.record.procMode === 'inner') { |
| | | reRequired.innerFunc = true |
| | | shows.push('innerFunc') |
| | | } |
| | | if (this.record.callbackType === 'func') { |
| | | shows.push('callbackFunc') |
| | | } else if (this.record.callbackType !== 'none') { |
| | | shows.push('cbTable') |
| | | } |
| | | |
| | | if (this.record.sysInterface === 'false') { |
| | | reReadonly.interface = false |
| | |
| | | reRequired.innerFunc = true |
| | | } else { |
| | | shows.push('sql', 'sqlType', 'output') |
| | | } |
| | | |
| | | if (Ot === 'required') { |
| | | shows.push('progress') |
| | | } |
| | | if (this.record.openmenu && this.record.openmenu !== 'goback') { |
| | | shows.push('open') |
| | | } |
| | | if (this.record.execSuccess === 'grid' || this.record.execError === 'grid') { |
| | | shows.push('resetPageIndex') |
| | | } |
| | | |
| | | if (this.record.sqlType === 'insert') { |
| | |
| | | reOptions.intertype = this.state.interTypeOptions.filter(item => item.value !== 'custom') |
| | | |
| | | if (intertype === 'outer') { |
| | | shows.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') |
| | | reRequired.innerFunc = false |
| | | shows.push('procMode', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackType') |
| | | if (this.record.procMode === 'system') { |
| | | shows.push('sql', 'sqlType') |
| | | } else if (this.record.procMode === 'inner') { |
| | | reRequired.innerFunc = true |
| | | shows.push('innerFunc') |
| | | } |
| | | if (this.record.callbackType === 'func') { |
| | | shows.push('callbackFunc') |
| | | } else if (this.record.callbackType !== 'none') { |
| | | shows.push('cbTable') |
| | | } |
| | | |
| | | if (this.record.sysInterface === 'false') { |
| | | reReadonly.interface = false |
| | |
| | | if (this.record.execSuccess === 'goback') { |
| | | shows.push('reload') |
| | | } |
| | | if (this.record.execSuccess === 'grid' || this.record.execError === 'grid') { |
| | | shows.push('resetPageIndex') |
| | | } |
| | | |
| | | reOptions.Ot = requireOptions |
| | | reOptions.sqlType = [{ |
| | |
| | | if (this.record.intertype === 'outer') { |
| | | shows.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') |
| | | reRequired.innerFunc = false |
| | | reRequired.callbackFunc = false |
| | | |
| | | if (this.record.sysInterface === 'false') { |
| | | reReadonly.interface = false |
| | |
| | | } else if (this.record.intertype === 'inner') { |
| | | shows.push('innerFunc') |
| | | reRequired.innerFunc = true |
| | | } |
| | | if (this.record.execSuccess === 'grid' || this.record.execError === 'grid') { |
| | | shows.push('resetPageIndex') |
| | | } |
| | | } else if (openType === 'excelOut') { |
| | | reOptions.intertype = this.state.interTypeOptions.filter(op => op.value !== 'custom') |
| | |
| | | shows.push('innerFunc') |
| | | reRequired.innerFunc = true |
| | | } |
| | | if (this.record.execSuccess === 'grid' || this.record.execError === 'grid') { |
| | | shows.push('resetPageIndex') |
| | | } |
| | | } else if (openType === 'popview') { |
| | | reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) |
| | | |
| | | if (this.record.display === 'drawer') { |
| | | shows.push('placement') |
| | | } |
| | | if (this.record.popClose === 'grid') { |
| | | shows.push('resetPageIndex') |
| | | } |
| | | } else if (openType === 'tab') { |
| | | reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) |
| | |
| | | reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) |
| | | |
| | | if (this.record.pageTemplate === 'custom') { |
| | | shows.push('url', 'joint') |
| | | shows.push('url', 'joint', 'open') |
| | | } else if (this.record.pageTemplate === 'linkpage') { |
| | | shows.push('linkmenu') |
| | | shows.push('linkmenu', 'open') |
| | | |
| | | if (Ot === 'requiredSgl') { |
| | | shows.push('joint') |
| | |
| | | let _funcType = this.record.funcType |
| | | |
| | | if (_funcType === 'print') { |
| | | shows.push('execMode', 'intertype', 'Ot', 'execSuccess', 'execError', 'resetPageIndex') |
| | | shows.push('execMode', 'intertype', 'Ot', 'execSuccess', 'execError') |
| | | if (this.record.intertype === 'outer') { |
| | | shows.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') |
| | | reRequired.innerFunc = false |
| | | reRequired.callbackFunc = false |
| | | |
| | | if (this.record.sysInterface === 'false') { |
| | | reReadonly.interface = false |
| | |
| | | shows.push('innerFunc') |
| | | reRequired.innerFunc = true |
| | | } |
| | | if (this.record.execSuccess === 'grid' || this.record.execError === 'grid') { |
| | | shows.push('resetPageIndex') |
| | | } |
| | | } else if (_funcType === 'mkBinding' || _funcType === 'mkUnBinding') { |
| | | shows.push('execSuccess', 'execError') |
| | | } else if (_funcType === 'closetab') { |
| | |
| | | |
| | | reRequired.linkmenu = false |
| | | reTooltip.linkmenu = '使用扫码登录功能或菜单跳转功能时,需选择跳转的菜单。' |
| | | } else if (_funcType === 'copyurl') { |
| | | shows.push('linkmenu') |
| | | |
| | | reRequired.linkmenu = false |
| | | reTooltip.linkmenu = '可以指定分享的目标地址。' |
| | | |
| | | if (this.record.linkmenu) { |
| | | shows.push('Ot') |
| | | reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) |
| | | } |
| | | } else if (_funcType === 'goBack') { |
| | | shows.push('reload') |
| | | } else if (_funcType === 'megvii') { |
| | | shows.push('subFunc', 'progress') |
| | | } else if (_funcType === 'filezip') { |
| | | reOptions.Ot = requireOptions |
| | | reRequired.innerFunc = false |
| | | |
| | | shows.push('innerFunc', 'Ot', 'execSuccess', 'execError', 'urlkey') |
| | | } else if (_funcType === 'pay') { |
| | | shows.push('payType', 'Ot', 'execSuccess', 'execError', 'syncComponent', 'openmenu') |
| | | reOptions.Ot = requireOptions.filter(op => ['requiredSgl'].includes(op.value)) |
| | | } |
| | | } |
| | | |
| | |
| | | ] |
| | | if (this.record.control) { |
| | | shows.push('controlField', 'controlVal') |
| | | } |
| | | if (this.record.control === 'disabled') { |
| | | shows.push('reason') |
| | | } |
| | | } |
| | | } else { |
| | |
| | | } |
| | | if (this.record.control) { |
| | | shows.push('controlField', 'controlVal') |
| | | } |
| | | if (this.record.control === 'disabled') { |
| | | shows.push('reason') |
| | | } |
| | | } |
| | | |
| | |
| | | if (value === 'pop' || value === 'prompt' || value === 'exec') { |
| | | _fieldval.intertype = 'system' |
| | | _fieldval.sqlType = '' |
| | | |
| | | } else if (value === 'form') { |
| | | _fieldval.Ot = 'requiredSgl' |
| | | |
| | |
| | | _fieldval.intertype = 'system' |
| | | _fieldval.label = this.props.dict['model.form.excelOut'] |
| | | _fieldval.class = 'dgreen' |
| | | _fieldval.execSuccess = 'never' |
| | | this.record.Ot = 'notRequired' |
| | | this.record.label = this.props.dict['model.form.excelOut'] |
| | | this.record.class = 'dgreen' |
| | | this.record.execSuccess = 'never' |
| | | |
| | | } else if (value === 'popview') { |
| | | _fieldval.display = 'modal' |
| | |
| | | this.record.control = '' |
| | | _fieldval.control = '' |
| | | } |
| | | |
| | | this.props.updRecord && this.props.updRecord(this.record) |
| | | } else if (key === 'funcType') { |
| | | if (value === 'print') { |
| | | _fieldval.label = '打印' |
| | |
| | | } |
| | | } else if (value === 'audit') { |
| | | _fieldval.label = '审核' |
| | | _fieldval.Ot = 'requiredSgl' |
| | | _fieldval.Ot = 'required' |
| | | if (hasclass) { |
| | | _fieldval.class = 'primary' |
| | | } else { |
| | |
| | | } |
| | | } else if (value === 'LogicDelete' || value === 'delete') { |
| | | _fieldval.label = '删除' |
| | | _fieldval.Ot = 'requiredSgl' |
| | | _fieldval.Ot = 'required' |
| | | if (hasclass) { |
| | | _fieldval.class = 'danger' |
| | | } else { |
| | | _fieldval.color = 'danger' |
| | | } |
| | | } else if (value === 'custom') { |
| | | _fieldval.Ot = 'required' |
| | | } |
| | | |
| | | if (this.props.type === 'card' && _fieldval.Ot === 'required') { // 卡片中无多行选项 |
| | | _fieldval.Ot = 'requiredSgl' |
| | | } |
| | | |
| | | this.record.label = _fieldval.label || this.record.label || '' |
| | |
| | | } |
| | | } else if (key === 'intertype') { |
| | | this.record.sysInterface = 'false' |
| | | |
| | | this.props.updRecord && this.props.updRecord(this.record) |
| | | } else if (key === 'sysInterface') { |
| | | if (value === 'true') { |
| | | _fieldval.interface = window.GLOB.mainSystemApi || '' |
| | |
| | | ] |
| | | |
| | | if (item.key === 'innerFunc') { |
| | | let str = '^(' + item.fields.join('|') + ')' |
| | | let str = item.fields && item.fields.length ? '^(' + item.fields.join('|') + ')' : '^' |
| | | let _patten = new RegExp(str + formRule.func.innerPattern + '$', 'g') |
| | | rules.push( |
| | | { pattern: _patten, message: formRule.func.innerMessage }, |
| | |
| | | { pattern: formRule.func.pattern, message: formRule.func.message }, |
| | | { max: formRule.func.max, message: formRule.func.maxMessage } |
| | | ) |
| | | } else if (item.key === 'output') { |
| | | if (this.record.intertype === 'system') { |
| | | rules = [{ |
| | | pattern: /^@[0-9a-zA-Z_]+@?$/, |
| | | message: '变量以@符开头,可使用字母、数字以及_' |
| | | }, { |
| | | max: 100, |
| | | message: '最多100个字符。' |
| | | }] |
| | | } else { |
| | | rules = [{ |
| | | pattern: /^[0-9a-zA-Z_]*$/, |
| | | message: '字段可使用字母、数字以及_' |
| | | }, { |
| | | max: 100, |
| | | message: '最多100个字符。' |
| | | }] |
| | | } |
| | | } else { |
| | | rules.push({ max: formRule.input.max, message: formRule.input.message }) |
| | | } |
| | |
| | | { required: item.required, message: dict['form.required.input'] + item.label + '!' } |
| | | ] |
| | | |
| | | content = <InputNumber min={item.min} max={item.max} precision={item.precision} /> |
| | | content = <InputNumber min={item.min} max={item.max} precision={item.precision} onPressEnter={this.handleSubmit}/> |
| | | } else if (item.type === 'select') { |
| | | rules = [ |
| | | { required: item.required, message: dict['form.required.select'] + item.label + '!' } |
| | |
| | | if (item.extendName) { |
| | | content = <Select |
| | | showSearch |
| | | allowClear={item.allowClear === true} |
| | | allowClear={item.allowClear === true || !item.required} |
| | | filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 || |
| | | option.props.extend.toLowerCase().indexOf(input.toLowerCase()) >= 0} |
| | | onChange={(value) => {this.optionChange(item.key, value)}} |
| | |
| | | } else { |
| | | content = <Select |
| | | showSearch |
| | | allowClear={item.allowClear === true} |
| | | allowClear={item.allowClear === true || !item.required} |
| | | filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} |
| | | onChange={(value) => {this.optionChange(item.key, value)}} |
| | | getPopupContainer={() => document.getElementById('winter')} |
| | |
| | | content = <Radio.Group onChange={(e) => {this.optionChange(item.key, e.target.value)}}> |
| | | {item.options.map(option => <Radio key={option.value} value={option.value}>{option.text}</Radio>)} |
| | | </Radio.Group> |
| | | } else if (item.type === 'checkbox') { |
| | | rules = [ |
| | | { required: item.required, message: dict['form.required.select'] + item.label + '!' } |
| | | ] |
| | | |
| | | content = <Checkbox.Group> |
| | | {item.options.map(option => <Checkbox key={option.value} value={option.value}>{option.text}</Checkbox>)} |
| | | </Checkbox.Group> |
| | | } else if (item.type === 'cascader') { |
| | | initVal = item.initVal || [] |
| | | rules = [ |
| | |
| | | |
| | | fields.push( |
| | | <Col span={span} key={index}> |
| | | <Form.Item className={className} label={item.tooltip ? |
| | | <Form.Item className={className} help={item.help} label={item.tooltip ? |
| | | <Tooltip placement="topLeft" title={item.tooltip}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | {item.label} |
| | |
| | | </Col> |
| | | ) |
| | | }) |
| | | |
| | | if (window.debugger && this.props.card.uuid) { |
| | | fields.push( |
| | | <Col span={12} key="uuid"> |
| | | <Form.Item label="按钮ID"> |
| | | <Paragraph copyable>{this.props.card.uuid}</Paragraph> |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | | } |
| | | |
| | | return fields |
| | | } |
| | | |
| | | handleConfirm = () => { |
| | | const { setting, card } = this.props |
| | | const { card } = this.props |
| | | // 表单提交时检查输入值是否正确 |
| | | return new Promise((resolve, reject) => { |
| | | this.props.form.validateFieldsAndScroll((err, values) => { |
| | |
| | | values.closeVal = +values.closeVal |
| | | } |
| | | } else if (values.OpenType === 'excelOut') { |
| | | if (values.intertype === 'system' && setting.interType !== 'system') { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '表格数据查询未使用系统函数,导出Excel不可使用系统函数!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | values.Ot = 'notRequired' |
| | | } else if (['pop', 'prompt', 'exec'].includes(values.OpenType) && values.verify) { |
| | | if ((values.Ot === 'requiredOnce' || card.Ot === 'requiredOnce') && card.Ot !== values.Ot) { |