| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { fromJS } from 'immutable' |
| | | import { Form, Row, Col, Input, Select, Icon, Radio, notification, Tooltip, InputNumber, Cascader } from 'antd' |
| | | import { btnIcons, btnCustomClasses, formRule } from '@/utils/option.js' |
| | | import { Form, Row, Col, Input, Select, Radio, notification, Tooltip, InputNumber, Cascader } from 'antd' |
| | | import { QuestionCircleOutlined } from '@ant-design/icons' |
| | | import { btnCustomClasses, formRule } from '@/utils/option.js' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import './index.scss' |
| | | |
| | | const { TextArea } = Input |
| | | const MkIcon = asyncComponent(() => import('@/components/mkIcon')) |
| | | const actionTypeOptions = { |
| | | pop: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'width'], |
| | | prompt: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'width'], |
| | | exec: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'width'], |
| | | excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'icon', 'class', 'sheet', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'width'], |
| | | excelOut: ['label', 'OpenType', 'intertype', 'show', 'icon', 'class', 'execSuccess', 'execError', 'syncComponent', 'resetPageIndex', 'pagination', 'search', 'width'], |
| | | popview: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'popClose', 'resetPageIndex', 'width'], |
| | | pop: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width', 'openmenu', 'open', 'output', 'refreshTab', 'reload'], |
| | | prompt: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width', 'openmenu', 'open', 'output', 'refreshTab', 'reload'], |
| | | exec: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width', 'openmenu', 'open', 'output', 'refreshTab', 'reload'], |
| | | excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'icon', 'class', 'sheet', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width'], |
| | | excelOut: ['label', 'OpenType', 'intertype', 'show', 'icon', 'class', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'resetPageIndex', 'pagination', 'search', 'width'], |
| | | popview: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'popClose', 'resetPageIndex', 'width', 'display', 'ratio', 'placement'], |
| | | tab: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'linkmenu', 'width'], |
| | | innerpage: ['label', 'Ot', 'OpenType', 'pageTemplate', 'show', 'icon', 'class', 'width', 'open'], |
| | | funcbutton: ['label', 'OpenType', 'funcType', 'show', 'icon', 'class', 'width'] |
| | |
| | | interType: null, // 接口类型:内部、外部 |
| | | funcType: null, // 功能类型 |
| | | procMode: null, // 参数方式 |
| | | pageTemplate: null, |
| | | appType: sessionStorage.getItem('appType'), |
| | | Ot: null, |
| | | requireOptions: [{ |
| | | value: 'notRequired', |
| | |
| | | let _opentype = card.OpenType // 打开方式 |
| | | let _intertype = card.intertype || 'system' // 接口类型 |
| | | let _funcType = card.funcType || '' // 功能按钮默认类型 |
| | | let _procMode = card.procMode || 'system' // 参数请求方式 |
| | | let _Ot = card.Ot || 'requiredSgl' // 参数请求方式 |
| | | let _procMode = card.procMode || 'system' |
| | | let _Ot = card.Ot || 'requiredSgl' |
| | | let _pageTemplate = card.pageTemplate || '' |
| | | |
| | | let _options = this.getOptions(_opentype, _intertype, _funcType, card.pageTemplate, _procMode, _Ot) |
| | | let _options = this.getOptions(_opentype, _intertype, _funcType, _pageTemplate, _procMode, _Ot) |
| | | |
| | | this.setState({ |
| | | Ot: _Ot, |
| | |
| | | interType: _intertype, |
| | | procMode: _procMode, |
| | | funcType: _funcType, |
| | | pageTemplate: _pageTemplate, |
| | | formlist: this.props.formlist.map(item => { |
| | | if (item.key === 'class') { |
| | | item.options = btnCustomClasses |
| | | } else if (item.key === 'innerFunc' && _procMode === 'inner') { |
| | | item.required = true |
| | | } else if (item.key === 'linkmenu') { |
| | | if (_opentype === 'funcbutton' && _funcType === 'scan') { |
| | | item.required = false |
| | | item.tooltip = '使用扫码登录功能或菜单跳转功能时,需选择跳转的菜单。' |
| | | } else { |
| | | item.tooltip = '' |
| | | item.required = true |
| | | } |
| | | } else if (item.key === 'intertype') { |
| | | let iscustom = ['pop', 'prompt', 'exec'].includes(_opentype) |
| | | item.options = this.state.interTypeOptions.filter(op => (iscustom || op.value !== 'custom')) |
| | | } else if (item.key === 'icon') { |
| | | item.options = btnIcons |
| | | } else if (item.key === 'Ot') { |
| | | if (type === 'card') { |
| | | item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) |
| | | } else if (card.pageTemplate === 'pay') { // 行级按钮、支付按钮,只能选单行 |
| | | if (card.sqlType === 'insert') { |
| | | item.options = this.state.requireOptions.filter(op => ['notRequired'].includes(op.value)) |
| | | } else { |
| | | item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) |
| | | } |
| | | } else if (_pageTemplate === 'pay') { // 行级按钮、支付按钮,只能选单行 |
| | | item.options = this.state.requireOptions.filter(op => ['requiredSgl'].includes(op.value)) |
| | | } else if (['innerpage', 'tab', 'popview', 'excelIn'].includes(_opentype)) { |
| | | item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) |
| | | } else if (card.sqlType === 'insert') { |
| | | item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl', 'required'].includes(op.value)) |
| | | item.options = this.state.requireOptions.filter(op => ['notRequired'].includes(op.value)) |
| | | } else { |
| | | item.options = this.state.requireOptions |
| | | } |
| | |
| | | |
| | | getOptions = (_opentype, _intertype, _funcType, _pageTemplate, _procMode, _Ot) => { |
| | | let _options = actionTypeOptions[_opentype] ? fromJS(actionTypeOptions[_opentype]).toJS() : [] // 选项列表 |
| | | |
| | | |
| | | if (_opentype === 'innerpage') { // 新页面,可选模板(自定义时,可填入外部链接) |
| | | if (_pageTemplate === 'custom') { |
| | | _options.push('url', 'joint') |
| | |
| | | } |
| | | } else if (_opentype === 'funcbutton') { |
| | | if (_funcType === 'print') { |
| | | _options.push('execMode', 'intertype', 'Ot', 'execSuccess', 'execError', 'resetPageIndex') |
| | | _options.push('execMode', 'intertype', 'Ot', 'execSuccess', 'execError', 'resetPageIndex', 'controlField', 'controlVal') |
| | | if (_intertype === 'outer') { |
| | | _options.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') |
| | | } else if (_intertype === 'inner') { |
| | | _options.push('innerFunc') |
| | | } |
| | | } else if (_funcType === 'mkBinding' || _funcType === 'mkUnBinding') { |
| | | _options.push('execSuccess', 'execError') |
| | | } else if (_funcType === 'closetab') { |
| | | _options.push('refreshTab') |
| | | } else if (_funcType === 'scan') { |
| | | _options.push('linkmenu') |
| | | } else if (_funcType === 'goBack') { |
| | | _options.push('reload') |
| | | } |
| | | } else if (_opentype !== 'popview' && _opentype !== 'tab') { |
| | | if (_intertype === 'custom') { |
| | | _options = _options.filter(m => m !== 'output') |
| | | _options.push('procMode', 'interface', 'callbackType', 'cbTable', 'proInterface', 'method', 'cross') |
| | | if (_procMode === 'system') { |
| | | _options.push('sql', 'sqlType') |
| | |
| | | } |
| | | } |
| | | |
| | | if (_Ot !== 'notRequired' && _opentype !== 'excelOut') { |
| | | if (_Ot !== 'notRequired' && _opentype !== 'excelOut' && _opentype !== 'funcbutton') { |
| | | _options.push('controlField', 'controlVal') |
| | | } |
| | | if (_Ot === 'requiredSgl' && ['pop', 'prompt', 'exec'].includes(_opentype)) { |
| | |
| | | try { |
| | | let _form = document.getElementById('label') |
| | | _form && _form.select() |
| | | } catch { |
| | | } catch (e) { |
| | | console.warn('表单focus失败!') |
| | | } |
| | | } |
| | |
| | | */ |
| | | optionChange = (key, value) => { |
| | | const { card, type } = this.props |
| | | const { openType, procMode, Ot } = this.state |
| | | const { openType, procMode, Ot, pageTemplate } = this.state |
| | | |
| | | if (key === 'OpenType') { |
| | | let _options = this.getOptions(value, 'system', this.state.funcType, card.pageTemplate, 'system', Ot) |
| | | let _options = this.getOptions(value, 'system', this.state.funcType, '', 'system', Ot) |
| | | |
| | | let _fieldval = {} |
| | | |
| | | let _formlist = this.state.formlist.map(item => { |
| | | item.hidden = !_options.includes(item.key) |
| | | |
| | |
| | | item.options = this.state.insertUpdateOptions |
| | | } |
| | | _fieldval.sqlType = '' |
| | | } else if (item.key === 'pageTemplate') { |
| | | item.initVal = '' |
| | | } else if (item.key === 'linkmenu') { |
| | | if (value === 'funcbutton' && this.state.funcType === 'scan') { |
| | | item.required = false |
| | | item.tooltip = '使用扫码登录功能或菜单跳转功能时,需选择跳转的菜单。' |
| | | } else { |
| | | item.tooltip = '' |
| | | item.required = true |
| | | } |
| | | } |
| | | |
| | | return item |
| | |
| | | openType: value, |
| | | intertype: 'system', |
| | | procMode: 'system', |
| | | pageTemplate: '', |
| | | formlist: _formlist |
| | | }, () => { |
| | | if (value === 'excelIn') { |
| | |
| | | this.props.form.setFieldsValue(_fieldval) |
| | | }) |
| | | } else if (key === 'funcType') { |
| | | let _options = this.getOptions(openType, this.state.interType, value, card.pageTemplate, procMode, Ot) |
| | | let _options = this.getOptions(openType, this.state.interType, value, pageTemplate, procMode, Ot) |
| | | let _fieldval = {} |
| | | |
| | | if (value === 'print') { |
| | | _fieldval.label = '打印' |
| | | } else if (value === 'closetab') { |
| | | _fieldval.label = '关闭' |
| | | } |
| | | |
| | | this.setState({ |
| | | funcType: value, |
| | | formlist: this.state.formlist.map(item => { |
| | | item.hidden = !_options.includes(item.key) |
| | | |
| | |
| | | } else { |
| | | item.options = this.state.requireOptions |
| | | } |
| | | } else if (item.key === 'linkmenu') { |
| | | if (value === 'scan') { |
| | | item.required = false |
| | | item.tooltip = '使用扫码登录功能或菜单跳转功能时,需选择跳转的菜单。' |
| | | } else { |
| | | item.tooltip = '' |
| | | item.required = true |
| | | } |
| | | } |
| | | |
| | | return item |
| | |
| | | this.setState({ |
| | | formlist: this.state.formlist.map(item => { |
| | | if (item.key === 'Ot' && type === 'card') { |
| | | item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) |
| | | if (value === 'insert') { |
| | | item.options = this.state.requireOptions.filter(op => ['notRequired'].includes(op.value)) |
| | | } else { |
| | | item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) |
| | | } |
| | | } else if (item.key === 'Ot' && value === 'insert') { |
| | | item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl', 'required'].includes(op.value)) |
| | | item.options = this.state.requireOptions.filter(op => ['notRequired'].includes(op.value)) |
| | | } else if (item.key === 'Ot') { |
| | | item.options = this.state.requireOptions |
| | | } |
| | |
| | | _fieldval.Ot = 'requiredSgl' |
| | | } else if (value === 'audit') { |
| | | _fieldval.label = '审核' |
| | | _fieldval.class = 'purple' |
| | | _fieldval.class = 'primary' |
| | | _fieldval.Ot = 'requiredSgl' |
| | | } else if (value === 'LogicDelete' || value === 'delete') { |
| | | _fieldval.label = '删除' |
| | |
| | | let _options = this.getOptions(openType, this.state.interType, this.state.funcType, value, procMode, Ot) |
| | | |
| | | this.setState({ |
| | | pageTemplate: value, |
| | | formlist: this.state.formlist.map(item => { |
| | | item.hidden = !_options.includes(item.key) |
| | | |
| | |
| | | this.props.form.setFieldsValue(_fieldval) |
| | | }) |
| | | } else if (key === 'intertype') { |
| | | let _options = this.getOptions(openType, value, this.state.funcType, '', procMode, Ot) |
| | | let _options = this.getOptions(openType, value, this.state.funcType, pageTemplate, procMode, Ot) |
| | | |
| | | this.setState({ |
| | | interType: value, |
| | |
| | | }) |
| | | }) |
| | | } else if (key === 'procMode') { |
| | | let _options = this.getOptions(openType, this.state.interType, this.state.funcType, '', value, Ot) |
| | | let _options = this.getOptions(openType, this.state.interType, this.state.funcType, pageTemplate, value, Ot) |
| | | |
| | | this.setState({ |
| | | procMode: value, |
| | |
| | | }) |
| | | }) |
| | | } else if (key === 'Ot') { |
| | | let _options = this.getOptions(openType, this.state.interType, this.state.funcType, '', procMode, value) |
| | | let _options = this.getOptions(openType, this.state.interType, this.state.funcType, pageTemplate, procMode, value) |
| | | |
| | | this.setState({ |
| | | Ot: value, |
| | |
| | | <Col span={12} key={index}> |
| | | <Form.Item label={item.tooltip ? |
| | | <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> |
| | | <Icon type="question-circle" /> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | {item.label} |
| | | </Tooltip> : item.label |
| | | }> |
| | |
| | | <Col span={12} key={index}> |
| | | <Form.Item label={item.tooltip ? |
| | | <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> |
| | | <Icon type="question-circle" /> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | {item.label} |
| | | </Tooltip> : item.label |
| | | }> |
| | |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | | } else if (item.type === 'select') { // 下拉搜索 |
| | | } else if (item.type === 'select') { |
| | | fields.push( |
| | | <Col span={12} key={index}> |
| | | <Form.Item label={item.tooltip ? |
| | | <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> |
| | | <Icon type="question-circle" /> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | {item.label} |
| | | </Tooltip> : item.label |
| | | }> |
| | |
| | | })( |
| | | <Select |
| | | showSearch |
| | | filterOption={(input, option) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0} |
| | | allowClear={item.allowClear === true} |
| | | filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} |
| | | onChange={(value) => {this.optionChange(item.key, value)}} |
| | | getPopupContainer={() => document.getElementById('winter')} |
| | | > |
| | | {item.options.map((option, index) => |
| | | <Select.Option id={index} key={option.value || option.field} value={option.value || option.field}> |
| | | {item.key === 'icon' && option.value ? <Icon type={option.value} /> : ''} {option.text || option.label} |
| | | <Select.Option key={index} value={(option.value || option.field)}> |
| | | {(option.text || option.label)} |
| | | </Select.Option> |
| | | )} |
| | | </Select> |
| | |
| | | <Col span={12} key={index}> |
| | | <Form.Item label={item.tooltip ? |
| | | <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> |
| | | <Icon type="question-circle" /> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | {item.label} |
| | | </Tooltip> : item.label |
| | | }> |
| | |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | | } else if (item.type === 'cascader') { // 多选 |
| | | } else if (item.type === 'cascader') { |
| | | fields.push( |
| | | <Col span={12} key={index}> |
| | | <Form.Item label={item.label}> |
| | | <Form.Item label={item.tooltip ? |
| | | <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | {item.label} |
| | | </Tooltip> : item.label |
| | | }> |
| | | {getFieldDecorator(item.key, { |
| | | initialValue: item.initVal || [], |
| | | rules: [ |
| | |
| | | } |
| | | ] |
| | | })( |
| | | <Cascader options={item.options || []} placeholder=""/> |
| | | <Cascader options={item.options || []} expandTrigger="hover" placeholder=""/> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | | } else if (item.type === 'mcascader') { |
| | | } else if (item.type === 'icon') { |
| | | fields.push( |
| | | <Col span={12} key={index}> |
| | | <Form.Item label={item.label}> |
| | | {getFieldDecorator(item.key, { |
| | | initialValue: item.initVal |
| | | initialValue: item.initVal, |
| | | rules: [ |
| | | { |
| | | required: !!item.required, |
| | | message: this.props.dict['form.required.select'] + item.label + '!' |
| | | } |
| | | ] |
| | | })( |
| | | <Cascader options={item.options} expandTrigger="hover" placeholder="" /> |
| | | <MkIcon allowClear/> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | |
| | | values.verify.invalid = 'true' |
| | | } |
| | | } |
| | | } else if (values.OpenType === 'tab' && values.linkmenu) { |
| | | if (sessionStorage.getItem('thdMenuList')) { |
| | | let list = null |
| | | try { |
| | | list = JSON.parse(sessionStorage.getItem('thdMenuList')) || [] |
| | | } catch (e) { |
| | | list = [] |
| | | } |
| | | |
| | | let id = values.linkmenu[values.linkmenu.length - 1] |
| | | |
| | | list.forEach(item => { |
| | | if (item.MenuID === id) { |
| | | values.MenuID = id |
| | | values.MenuName = item.MenuName |
| | | values.MenuNo = item.MenuNo |
| | | values.tabType = item.type |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | |
| | | if (values.openmenu && Array.isArray(values.openmenu) && values.openmenu.length > 0) { |
| | | let list = null |
| | | try { |
| | | list = JSON.parse(sessionStorage.getItem('thdMenuList')) || [] |
| | | } catch (e) { |
| | | list = [] |
| | | } |
| | | |
| | | let id = values.openmenu[values.openmenu.length - 1] |
| | | |
| | | list.forEach(item => { |
| | | if (item.MenuID === id) { |
| | | values.MenuID = id |
| | | values.MenuName = item.MenuName |
| | | values.MenuNo = item.MenuNo |
| | | values.tabType = item.type |
| | | } |
| | | }) |
| | | } |
| | | |
| | | resolve(values) |