2022-08-06

king

2022-08-06 cbeffcc0902631909c0373f274752a97ddaf2d4e

 src/templates/sharecomponent/actioncomponent/actionform/index.jsx

@@ -1,24 +1,28 @@
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 { Form, Row, Col, Input, Select, Radio, Tooltip, InputNumber, Cascader, Typography } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

import { btnIcons, btnClasses, formRule } from '@/utils/option.js'
import { formRule } from '@/utils/option.js'
import asyncComponent from '@/utils/asyncComponent'
import Utils from '@/utils/utils.js'
import './index.scss'

const MkEditIcon = asyncComponent(() => import('@/components/mkIcon'))

const { TextArea } = Input
const { Paragraph } = Typography
const actionTypeOptions = {
  pop: ['label', 'position', 'OpenType', 'intertype', 'Ot', 'icon', 'class', 'execSuccess', 'execError', 'openmenu', 'output'],
  prompt: ['label', 'position', 'OpenType', 'intertype', 'Ot', 'icon', 'class', 'execSuccess', 'execError', 'openmenu', 'output'],
  exec: ['label', 'position', 'OpenType', 'intertype', 'Ot', 'icon', 'class', 'execSuccess', 'execError', 'openmenu', 'output'],
  excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'icon', 'class', 'sheet', 'execSuccess', 'execError'],
  excelOut: ['label', 'OpenType', 'intertype', 'icon', 'class', 'execSuccess', 'execError', 'pagination', 'search'],
  popview: ['label', 'Ot', 'OpenType', 'icon', 'class', 'position', 'tabType', 'linkTab', 'popClose', 'display', 'ratio', 'placement', 'clickouter'],
  tab: ['label', 'Ot', 'OpenType', 'icon', 'class', 'position'],
  innerpage: ['label', 'Ot', 'OpenType', 'pageTemplate', 'icon', 'class', 'position'],
  funcbutton: ['label', 'OpenType', 'funcType', 'icon', 'class']
  pop: ['label', 'position', 'OpenType', 'intertype', 'Ot', 'icon', 'class', 'execSuccess', 'execError', 'openmenu', 'output', 'tipTitle', 'hidden'],
  prompt: ['label', 'position', 'OpenType', 'intertype', 'Ot', 'icon', 'class', 'execSuccess', 'execError', 'openmenu', 'output', 'tipTitle', 'hidden'],
  exec: ['label', 'position', 'OpenType', 'intertype', 'Ot', 'icon', 'class', 'execSuccess', 'execError', 'openmenu', 'output', 'hidden'],
  excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'icon', 'class', 'sheet', 'execSuccess', 'execError', 'hidden'],
  excelOut: ['label', 'OpenType', 'intertype', 'icon', 'class', 'execSuccess', 'execError', 'pagination', 'search', 'hidden'],
  popview: ['label', 'Ot', 'OpenType', 'icon', 'class', 'position', 'tabType', 'linkTab', 'popClose', 'display', 'ratio', 'clickouter', 'hidden'],
  tab: ['label', 'Ot', 'OpenType', 'icon', 'class', 'position', 'linkmenu', 'hidden'],
  innerpage: ['label', 'Ot', 'OpenType', 'pageTemplate', 'icon', 'class', 'position', 'hidden'],
  funcbutton: ['label', 'OpenType', 'funcType', 'icon', 'class', 'hidden']
}

class MainSearch extends Component {
@@ -27,20 +31,12 @@
    setting: PropTypes.object,   // 页面设置
    formlist: PropTypes.any,     // 表单信息
    card: PropTypes.any,         // 按钮信息
    tabs: PropTypes.array,       // 所有标签页
    inputSubmit: PropTypes.any   // 回车提交事件
    inputSubmit: PropTypes.func, // 回车提交事件
    updRecord: PropTypes.func
  }

  state = {
    formlist: null,  // 表单信息
    openType: null,  // 打开方式
    interType: null, // 接口类型：内部、外部
    funcType: null,  // 功能类型
    position: null,  // 按钮位置
    procMode: null,  // 外部接口参数处理方式
    control: '',
    pageTemplate: null,
    Ot: null,
    requireOptions: [{
      value: 'notRequired',
      text: this.props.dict['header.form.notRequired']
@@ -89,77 +85,33 @@
    }]
  }

  record = {}
  
  UNSAFE_componentWillMount () {
    const { card } = this.props
    this.props.formlist.forEach(item => {
      this.record[item.key] = item.initVal
    })

    let _opentype = card.OpenType               // 打开方式
    // let _tabType = card.tabType || 'SubTable'   // 按钮为弹窗（标签）时，标签的类型
    let _intertype = card.intertype || 'system' // 接口类型
    let _procMode = card.procMode || 'system'   // 参数处理方式
    let _funcType = card.funcType || ''         // 功能按钮默认类型
    let _pageTemplate = card.pageTemplate       // 新页面类型
    let _Ot = card.Ot || 'requiredSgl'
    let control = card.control || ''
    let { shows, reOptions, reTypes, reRequired, reReadonly } = this.getMutilOptions()

    if (_opentype === 'outerpage') {
      card.pageTemplate = 'custom'
      _opentype = 'innerpage'
    }

    let _tabs = this.props.tabs.filter(tab => tab.type === 'SubTable')
    let _options = this.getOptions(_opentype, _intertype, _funcType, _pageTemplate, _procMode, _Ot, control)
    
    this.setState({
      control: control,
      Ot: _Ot,
      openType: _opentype,
      pageTemplate: _pageTemplate,
      interType: _intertype,
      procMode: _procMode,
      position: card.position || 'toolbar',
      funcType: _funcType,
      formlist: this.props.formlist.map(item => {
        if (item.key === 'class') {
          item.options = btnClasses
        } else if (item.key === 'innerFunc' && _procMode === 'inner') {
          item.required = true
        } else if (item.key === 'icon') {
          item.options = btnIcons
        } 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 === 'Ot') {
          if (card.position === 'grid' || _pageTemplate === 'pay') { // 行级按钮、支付按钮，只能选单行
            item.options = this.state.requireOptions.filter(op => ['requiredSgl'].includes(op.value))
          } else if (_opentype === 'innerpage' && _pageTemplate === 'billprint') {
            item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl', 'required'].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'].includes(op.value))
          } else {
            item.options = this.state.requireOptions
          }
        } else if (item.key === 'sqlType') {
          if (['prompt', 'exec'].includes(_opentype)) {
            item.options = this.state.deleteOptions
          } else {
            item.options = this.state.insertUpdateOptions
          }
        } else if (item.key === 'linkTab') {
          item.options = [
            {
              value: '',
              text: '新建'
            },
            ..._tabs
          ]
        } else if (item.key === 'OpenType') {
          item.initVal = _opentype
        item.hidden = !shows.includes(item.key)
        item.initVal = this.record[item.key]

        if (reOptions[item.key]) {
          item.options = reOptions[item.key]
        }
        if (reTypes[item.key]) {
          item.type = reTypes[item.key]
        }
        if (reRequired[item.key] !== undefined) {
          item.required = reRequired[item.key]
        }
        if (reReadonly[item.key] !== undefined) {
          item.readonly = reReadonly[item.key]
        }

        item.hidden = !_options.includes(item.key)
        return item
      })
    })
@@ -176,327 +128,385 @@
        console.warn('表单focus失败！')
      }
    }

    this.props.updRecord && this.props.updRecord(this.record)
  }

  getOptions = (_opentype, _intertype, _funcType, _pageTemplate, _procMode, _Ot, _control) => {
    let _options = fromJS(actionTypeOptions[_opentype]).toJS() // 选项列表
    
    if (_opentype === 'innerpage') {         // 新页面，可选模板(自定义时，可填入外部链接)
      if (_pageTemplate === 'custom') {
        _options.push('url', 'joint')
      } else if (_pageTemplate === 'billprint') {
        _options.push('printTemp')
  getMutilOptions = () => {
    const { requireOptions } = this.state

    let openType = this.record.OpenType
    let Ot = this.record.Ot
    let shows = fromJS(actionTypeOptions[openType] || []).toJS()
    let reOptions = {}
    let reTypes = {}
    let reRequired = {}
    let reReadonly = {}

    if (openType === 'pop' || openType === 'prompt' || openType === 'exec') {
      let intertype = this.record.intertype

      reOptions.intertype = this.state.interTypeOptions

      if (intertype === 'custom') {
        shows.push('procMode', 'interface', 'callbackType', 'proInterface', 'method', 'cross')
        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')
        }
        reReadonly.interface = false
        reRequired.interface = true
      } else if (intertype === 'outer') {
        shows.push('procMode', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackType', 'output')
        // reRequired.innerFunc = false
        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.interface = true
        } else {
          reReadonly.interface = true
          reRequired.interface = false
        }
      } else if (intertype === 'inner') { // preFunc 前置函数
        shows.push('innerFunc', 'output')
        reRequired.innerFunc = true
      } else {
        shows.push('sql', 'sqlType', 'output')
      }
    } else if (_opentype === 'tab') {         // 标签页
      if (this.props.card.tabTemplate !== 'FormTab') {
        _options.push('linkmenu')

      if (Ot === 'required') {
        shows.push('progress')
      }
    } else if (_opentype === 'excelOut') {    // 导入导出
      if (_intertype === 'outer') {
        _options.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc')
      } else if (_intertype === 'inner') {
        _options.push('innerFunc')

      if (this.record.sqlType === 'insert') {
        reOptions.Ot = requireOptions.filter(op => op.value === 'notRequired')
      } else {
        reOptions.Ot = requireOptions
      }
    } else if (_opentype === 'excelIn') {    // 导入导出
      if (_intertype === 'outer') {
        _options.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc')
      } else if (_intertype === 'inner') {
        _options.push('innerFunc')

      if (openType === 'prompt' || openType === 'exec') {
        reOptions.sqlType = this.state.deleteOptions
      } else {
        reOptions.sqlType = this.state.insertUpdateOptions
      }
    } else if (_opentype === 'funcbutton') {
    } else if (openType === 'excelIn') {
      reOptions.intertype = this.state.interTypeOptions.filter(op => op.value !== 'custom')
      reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value))

      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
          reRequired.interface = true
        } else {
          reReadonly.interface = true
          reRequired.interface = false
        }
      } else if (this.record.intertype === 'inner') {
        shows.push('innerFunc')
        reRequired.innerFunc = true
      }
    } else if (openType === 'excelOut') {
      reOptions.intertype = this.state.interTypeOptions.filter(op => op.value !== 'custom')

      if (this.record.intertype === 'outer') {
        shows.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc')
        reRequired.innerFunc = false

        if (this.record.sysInterface === 'false') {
          reReadonly.interface = false
          reRequired.interface = true
        } else {
          reReadonly.interface = true
          reRequired.interface = false
        }
      } else if (this.record.intertype === 'inner') {
        shows.push('innerFunc')
        reRequired.innerFunc = true
      }
    } else if (openType === 'popview') {
      reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value))

      if (this.record.display === 'drawer') {
        shows.push('placement')
      }
    } else if (openType === 'tab') {
      reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value))

      reRequired.linkmenu = true
    } else if (openType === 'innerpage') {
      reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value))

      if (this.record.pageTemplate === 'custom') {
        shows.push('url', 'joint')
      } else if (this.record.pageTemplate === 'billprint') {
        shows.push('printTemp')
        reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl', 'required'].includes(op.value))
      } else if (this.record.pageTemplate === 'pay' || this.record.pageTemplate === 'print' || this.record.pageTemplate === 'billprintTemp') {
        reOptions.Ot = requireOptions.filter(op => op.value === 'requiredSgl')
      }
    } else if (openType === 'funcbutton') {
      reOptions.intertype = this.state.interTypeOptions.filter(op => op.value !== 'custom')
      reOptions.Ot = requireOptions

      let _funcType = this.record.funcType

      if (_funcType === 'print') {
        _options.push('execMode', 'intertype', 'Ot', 'execSuccess', 'execError')
        if (_intertype === 'outer') {
          _options.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc')
        } else if (_intertype === 'inner') {
          _options.push('innerFunc')
        shows.push('execMode', 'intertype', 'Ot', 'execSuccess', 'execError', 'resetPageIndex')
        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
            reRequired.interface = true
          } else {
            reReadonly.interface = true
            reRequired.interface = false
          }
        } else if (this.record.intertype === 'inner') {
          shows.push('innerFunc')
          reRequired.innerFunc = true
        }
      } else if (_funcType === 'closetab') {
        _options.push('refreshTab')
      }
    } else if (_opentype !== 'popview') { // 打开方式不是弹窗页面时
      if (_intertype === 'custom') {
        _options.push('procMode', 'interface', 'callbackType', 'cbTable', 'proInterface', 'method', 'cross')
        if (_procMode === 'system') {
          _options.push('sql', 'sqlType')
        } else {
          _options.push('innerFunc')
        }
      } else if (_intertype === 'outer') {
        _options.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc')
      } else if (_intertype === 'inner') {
        _options.push('innerFunc', 'preFunc')
      } else {
        _options.push('sql', 'sqlType')
        shows.push('refreshTab')
      } 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')
      }
    }

    if (_options.includes('execSuccess') || _options.includes('popClose')) {
      _options.push('resetPageIndex')
    if (this.record.position === 'grid') { // 表格中按钮只能选单行
      reOptions.Ot = requireOptions.filter(op => op.value === 'requiredSgl')
    }
    
    if (Ot !== 'notRequired') {
      reOptions.control = [
        { value: '', text: '无' },
        { value: 'disabled', text: '禁用' },
        { value: 'hidden', text: '隐藏' },
        { value: 'parent', text: '上级' }
      ]
    } else {
      reOptions.control = [
        { value: '', text: '无' },
        { value: 'parent', text: '上级' }
      ]
    }
    shows.push('control')
    if (this.record.control === 'parent') {
      reTypes.controlField = 'text'
    } else {
      reTypes.controlField = 'select'
    }
    if (this.record.control) {
      shows.push('controlField', 'controlVal')
    }
    if (this.record.control === 'disabled') {
      shows.push('reason')
    }

    if (_Ot !== 'notRequired' && _opentype !== 'excelOut') {
      _options.push('control')
      if (_control) {
        _options.push('controlField', 'controlVal')
      }
    return {
      shows,
      reOptions,
      reTypes,
      reRequired,
      reReadonly
    }

    return _options
  }

  /**
   * @description 切换
   */
  optionChange = (key, value) => {
    const { openType, funcType, procMode, Ot, control } = this.state
    const { card } = this.props
    this.record[key] = value
    let _fieldval = {}

    if (key === 'OpenType') {
      let _options = this.getOptions(value, 'system', '', this.state.pageTemplate, 'system', Ot, control)
      let _fieldval = {}
      let _formlist = this.state.formlist.map(item => {
        item.hidden = !_options.includes(item.key)
      this.record.intertype = 'system'
      this.record.procMode = 'system'
      this.record.display = 'modal'
      this.record.position = 'toolbar'
      this.record.pageTemplate = ''
      this.record.funcType = ''
      this.record.sqlType = ''

        if (item.key === 'intertype') {
          let iscustom = ['pop', 'prompt', 'exec'].includes(value)
          item.options = this.state.interTypeOptions.filter(op => (iscustom || op.value !== 'custom'))
        } else if (item.key === 'control') {
          item.initVal = control
        }
      if (value === 'pop' || value === 'prompt' || value === 'exec') {
        _fieldval.intertype = 'system'
        _fieldval.sqlType = ''
      } else if (value === 'excelIn') {
        _fieldval.intertype = 'system'
        _fieldval.Ot = 'notRequired'
        
        _fieldval.label = this.props.dict['model.form.excelIn']
        _fieldval.class = 'dgreen'
        this.record.Ot = 'notRequired'
        this.record.label = this.props.dict['model.form.excelIn']
        this.record.class = 'dgreen'
      } else if (value === 'excelOut') {
        _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'
        _fieldval.Ot = 'requiredSgl'
        _fieldval.popClose = 'grid'
        this.record.display = 'modal'
        this.record.Ot = 'requiredSgl'
        this.record.popClose = 'grid'
  
      } else if (value === 'tab') {
        _fieldval.Ot = 'requiredSgl'
        this.record.Ot = 'requiredSgl'
  
      } else if (value === 'innerpage') {
        _fieldval.Ot = 'requiredSgl'
        this.record.Ot = 'requiredSgl'
        
      }
      
      if (value === 'excelIn') {
        _fieldval.label = this.props.dict['model.form.excelIn']
        _fieldval.class = 'border-dgreen'
      } else if (value === 'excelOut') {
        _fieldval.label = this.props.dict['model.form.excelOut']
        _fieldval.class = 'dgreen'
        _fieldval.control = ''
        this.record.control = ''
      }

        if (item.hidden) return item
      if (_fieldval.Ot === 'notRequired') {
        this.record.control = ''
        _fieldval.control = ''
      }

        if (item.key === 'intertype') {
          _fieldval.intertype = 'system'
        } else if (item.key === 'Ot') {
          if (this.state.position === 'grid' || this.state.pageTemplate === 'pay') {
            item.options = this.state.requireOptions.filter(op => ['requiredSgl'].includes(op.value))
            _fieldval.Ot = 'requiredSgl'
          } else if (value === 'innerpage' && this.state.pageTemplate === 'billprint') {
            item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl', 'required'].includes(op.value))
            _fieldval.Ot = 'requiredSgl'
          } else if (['innerpage', 'tab', 'popview'].includes(value)) {
            item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value))
            _fieldval.Ot = 'requiredSgl'
          } else if (value === 'excelIn') {
            item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value))
            _fieldval.Ot = 'notRequired'
          } else {
            item.options = this.state.requireOptions
          }
        } else if (item.key === 'sqlType') {
          if (['prompt', 'exec'].includes(value)) {
            item.options = this.state.deleteOptions
          } else {
            item.options = this.state.insertUpdateOptions
          }
          _fieldval.sqlType = ''
        }
      if (!['funcbutton', 'excelIn', 'excelOut'].includes(value)) {
        _fieldval.position = 'toolbar'
      }

        return item
      })

      this.setState({
        openType: value,
        funcType: '',
        intertype: 'system',
        procMode: 'system',
        formlist: _formlist
      }, () => {
        if (value === 'excelIn') {
          _fieldval.label = this.props.dict['model.form.excelIn']
          _fieldval.class = 'border-dgreen'
        } else if (value === 'excelOut') {
          _fieldval.label = this.props.dict['model.form.excelOut']
          _fieldval.class = 'dgreen'
        }

        this.props.form.setFieldsValue(_fieldval)
      })
      this.props.updRecord && this.props.updRecord(this.record)
    } else if (key === 'position') {
      let _fieldval = {}

      this.setState({
        position: value,
        formlist: this.state.formlist.map(item => {
          if (item.key === 'Ot') {
            if (value === 'grid' || this.state.pageTemplate === 'pay') {
              item.options = this.state.requireOptions.filter(op => ['requiredSgl'].includes(op.value))
              _fieldval.Ot = 'requiredSgl'
            } else if (openType === 'innerpage' && this.state.pageTemplate === 'billprint') {
              item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl', 'required'].includes(op.value))
              _fieldval.Ot = 'requiredSgl'
            } else if (['innerpage', 'tab', 'popview'].includes(openType)) {
              item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value))
              _fieldval.Ot = 'requiredSgl'
            } else {
              item.options = this.state.requireOptions
            }
          }
          return item
        })
      }, () => {
        this.props.form.setFieldsValue(_fieldval)
      })
      if (value === 'grid') {
        _fieldval.Ot = 'requiredSgl'
        this.record.Ot = 'requiredSgl'
      } else if (['pop', 'prompt', 'exec'].includes(this.record.OpenType) && this.record.sqlType === 'insert') {
        _fieldval.Ot = 'notRequired'
        this.record.Ot = 'notRequired'
      }
    } else if (key === 'funcType') {
      let _options = this.getOptions('funcbutton', this.state.interType, value, card.pageTemplate, procMode, Ot, control)
      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)

          if (item.hidden) return item

          if (item.key === 'intertype') {
            _fieldval.intertype = this.state.interType
          } else if (item.key === 'Ot' && value === 'print') {
            item.options = this.state.requireOptions
          }

          return item
        })
      }, () => {
        this.props.form.setFieldsValue(_fieldval)
      })
    } else if (key === 'sqlType') {
      let _fieldval = {}
      this.setState({
        formlist: this.state.formlist.map(item => {
          if (item.key === 'Ot' && value === 'insert') {
            item.options = this.state.requireOptions.filter(op => ['notRequired'].includes(op.value))
          } else if (item.key === 'Ot') {
            item.options = this.state.requireOptions
          }
          return item
        })
      }, () => {
        if (value === 'insert') {
          _fieldval.label = '添加'
          _fieldval.class = 'green'
          _fieldval.Ot = 'notRequired'
        } else if (value === 'update') {
          _fieldval.label = '修改'
          _fieldval.class = 'purple'
          _fieldval.Ot = 'requiredSgl'
        } else if (value === 'audit') {
          _fieldval.label = '审核'
          _fieldval.class = 'primary'
          _fieldval.Ot = 'requiredSgl'
        } else if (value === 'LogicDelete' || value === 'delete') {
          _fieldval.label = '删除'
          _fieldval.class = 'danger'
          _fieldval.Ot = 'required'
        }
      if (value === 'insert') {
        _fieldval.label = '添加'
        _fieldval.Ot = 'notRequired'
        _fieldval.class = 'green'
      } else if (value === 'update') {
        _fieldval.label = '修改'
        _fieldval.Ot = 'requiredSgl'
        _fieldval.class = 'purple'
      } else if (value === 'audit') {
        _fieldval.label = '审核'
        _fieldval.Ot = 'required'
        _fieldval.class = 'primary'
      } else if (value === 'LogicDelete' || value === 'delete') {
        _fieldval.label = '删除'
        _fieldval.Ot = 'required'
        _fieldval.class = 'danger'
      } else if (value === 'custom') {
        _fieldval.Ot = 'required'
      }

        this.props.form.setFieldsValue(_fieldval)
      })
      if (this.record.position === 'grid') {
        _fieldval.Ot = 'requiredSgl'
      }

      this.record.label = _fieldval.label
      this.record.Ot = _fieldval.Ot
      this.record.class = _fieldval.class || ''

      if (_fieldval.Ot === 'notRequired') {
        this.record.control = ''
        _fieldval.control = ''
      }
      
    } else if (key === 'pageTemplate') {
      let _options = this.getOptions('innerpage', this.state.interType, this.state.funcType, value, procMode, Ot, control)
      let _fieldval = {}

      this.setState({
        pageTemplate: value,
        formlist: this.state.formlist.map(item => {
          item.hidden = !_options.includes(item.key)

          if (item.key === 'Ot') {
            if (value === 'pay') {
              item.options = this.state.requireOptions.filter(op => ['requiredSgl'].includes(op.value))
              _fieldval.Ot = 'requiredSgl'
            } else if (value === 'billprint') {
              item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl', 'required'].includes(op.value))
              _fieldval.Ot = 'requiredSgl'
            } else {
              item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value))
            }
          }
  
          return item
        })
      }, () => {
        this.props.form.setFieldsValue(_fieldval)
      })
      if (value === 'pay') {
        _fieldval.Ot = 'requiredSgl'
      } else if (value === 'billprint') {
        _fieldval.Ot = 'requiredSgl'
      }
    } else if (key === 'intertype') {
      let _options = this.getOptions(openType, value, funcType, '', procMode, Ot, control)
      this.record.sysInterface = 'false'

      this.setState({
        interType: value,
        formlist: this.state.formlist.map(item => {
          item.hidden = !_options.includes(item.key)

          if (item.key === 'innerFunc') {
            item.required = value === 'inner'
          } else if (item.key === 'interface') {
            item.readonly = false
          } else if (item.key === 'sysInterface') {
            item.initVal = 'false'
          } else if (item.key === 'Ot') {
            item.options = this.state.requireOptions
          }
          return item
        })
      })
    } else if (key === 'procMode') {
      let _options = this.getOptions(openType, this.state.interType, funcType, '', value, Ot, control)

      this.setState({
        procMode: value,
        formlist: this.state.formlist.map(item => {
          item.hidden = !_options.includes(item.key)

          if (item.key === 'innerFunc') {
            item.required = true
          }
          return item
        })
      })
    } else if (key === 'Ot') {
      let _options = this.getOptions(openType, this.state.interType, funcType, this.state.pageTemplate, procMode, value, control)

      this.setState({
        Ot: value,
        formlist: this.state.formlist.map(item => {
          item.hidden = !_options.includes(item.key)
          return item
        })
      })
    } else if (key === 'control') {
      let _options = this.getOptions(openType, this.state.interType, funcType, this.state.pageTemplate, procMode, Ot, value)

      this.setState({
        control: value,
        formlist: this.state.formlist.map(item => {
          item.hidden = !_options.includes(item.key)
          return item
        })
      })
      this.props.updRecord && this.props.updRecord(this.record)
    } else if (key === 'sysInterface') {
      if (value === 'true') {
        this.props.form.setFieldsValue({
          interface: window.GLOB.mainSystemApi || ''
        })
        _fieldval.interface = window.GLOB.mainSystemApi || ''
        this.record.interface = window.GLOB.mainSystemApi || ''
      }
      this.setState({
        formlist: this.state.formlist.map(item => {
          if (item.key === 'interface' && value === 'true') {
            item.readonly = true
          } else if (item.key === 'interface') {
            item.readonly = false
          }

          return item
        })
      })
    }

    let { shows, reOptions, reTypes, reRequired, reReadonly } = this.getMutilOptions()

    this.setState({
      formlist: this.state.formlist.map(item => {
        item.hidden = !shows.includes(item.key)
        item.initVal = this.record[item.key]

        if (reOptions[item.key]) {
          item.options = reOptions[item.key]
        }
        if (reTypes[item.key]) {
          item.type = reTypes[item.key]
        }
        if (reRequired[item.key] !== undefined) {
          item.required = reRequired[item.key]
        }
        if (reReadonly[item.key] !== undefined) {
          item.readonly = reReadonly[item.key]
        }

        return item
      })
    }, () => {
      this.props.form.setFieldsValue(_fieldval)
    })
  }

  handleSubmit = (e) => {
@@ -508,217 +518,157 @@
  }

  getFields() {
    const { dict } = this.props
    const { getFieldDecorator } = this.props.form
    const fields = []

    this.state.formlist.forEach((item, index) => {
      if (item.hidden) return

      if (item.type === 'text') { // 文本搜索
        let _rules = []
        if (item.key === 'innerFunc' || item.key === 'preFunc') {
          let str = '^(' + item.fields.join('|') + ')'
      let span = 12
      let rules = []
      let className = ''
      let content = null
      let initVal = item.initVal || ''

      if (item.type === 'text') {
        rules = [
          { required: item.required, message: dict['form.required.input'] + item.label + '!' }
        ]
  
        if (item.key === 'innerFunc') {
          let str = item.fields && item.fields.length ? '^(' + item.fields.join('|') + ')' : '^'
          let _patten = new RegExp(str + formRule.func.innerPattern + '$', 'g')
          _rules = [{
            pattern: _patten,
            message: formRule.func.innerMessage
          }, {
            max: formRule.func.max,
            message: formRule.func.maxMessage
          }]
          rules.push(
            { pattern: _patten, message: formRule.func.innerMessage },
            { max: formRule.func.max, message: formRule.func.maxMessage }
          )
        } else if (item.key === 'outerFunc' || item.key === 'callbackFunc') {
          _rules = [{
            pattern: formRule.func.pattern,
            message: formRule.func.message
          }, {
            max: formRule.func.max,
            message: formRule.func.maxMessage
          }]
          rules.push(
            { 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 = [{
            max: formRule.input.max,
            message: formRule.input.message
          }]
          rules.push({ max: formRule.input.max, message: formRule.input.message })
        }
        fields.push(
          <Col span={12} key={index}>
            <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: [
                  {
                    required: item.readonly ? false : !!item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  },
                  ..._rules
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col>
        )

        content = <Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />
      } else if (item.type === 'number') {
        fields.push(
          <Col span={12} key={index}>
            <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: [
                  {
                    required: item.readonly ? false : !!item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<InputNumber min={0} max={10000} precision={0} onPressEnter={this.handleSubmit}/>)}
            </Form.Item>
          </Col>
        )
      } 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}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : 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) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  onChange={(value) => {this.optionChange(item.key, value)}}
                  allowClear={item.key === 'icon'}
                  getPopupContainer={() => document.getElementById('winter')}
                >
                  {item.options.map((option, index) =>
                    <Select.Option id={`${index}`} title={option.text} key={`${index}`} value={option.value || option.field}>
                      {item.key === 'icon' && option.value ? <Icon type={option.value} /> : null} {option.text || option.label}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
        )
        rules = [
          { required: item.required, message: dict['form.required.input'] + item.label + '!' }
        ]

        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 + '!' }
        ]

        content = <Select
          showSearch
          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 key={index} value={(option.value || option.field || '')}>
              {(option.text || option.label)}
            </Select.Option>
          )}
        </Select>
      } else if (item.type === 'radio') {
        fields.push(
          <Col span={12} key={index}>
            <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: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Radio.Group onChange={(e) => {this.optionChange(item.key, e.target.value)}} disabled={item.readonly}>
                  {
                    item.options.map(option => {
                      return (
                        <Radio key={option.value} value={option.value}>{option.text}</Radio>
                      )
                    })
                  }
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
        )
        rules = [
          { required: item.required, message: dict['form.required.select'] + item.label + '!' }
        ]

        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 === 'cascader') {
        initVal = item.initVal || []
        rules = [
          { required: item.required, message: dict['form.required.select'] + item.label + '!' }
        ]

        content = <Cascader options={item.options || []} expandTrigger="hover" placeholder=""/>
      } else if (item.type === 'icon') {
        rules = [
          { required: item.required, message: dict['form.required.select'] + item.label + '!' }
        ]

        content = <MkEditIcon options={['edit', 'hint', 'direction', 'normal', 'data']} allowClear/>
      } else if (item.type === 'textarea') {
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label} className="textarea">
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: item.readonly ? false : !!item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<TextArea rows={2} readOnly={item.readonly} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'cascader') { // 多选
        fields.push(
          <Col span={12} key={index}>
            <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: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Cascader allowClear options={item.options || []} placeholder="" />
              )}
            </Form.Item>
          </Col>
        )
        span = 24
        className = 'textarea'
        rules = [
          { required: item.readonly ? false : item.required, message: dict['form.required.input'] + item.label + '!' }
        ]

        content = <TextArea rows={2} readOnly={item.readonly}/>
      }

      fields.push(
        <Col span={span} key={index}>
          <Form.Item className={className} label={item.tooltip ?
            <Tooltip placement="topLeft" title={item.tooltip}>
              <QuestionCircleOutlined className="mk-form-tip" />
              {item.label}
            </Tooltip> : item.label
          }>
            {getFieldDecorator(item.key, {
              initialValue: initVal,
              rules: rules
            })(content)}
          </Form.Item>
        </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) => {
        if (!err) {
          values.uuid = card.uuid
          values.verify = card.verify || null
          values.position = values.position || 'toolbar'

          if (values.OpenType === 'excelIn') {
            values.position = 'toolbar'
          } else if (values.OpenType === 'excelOut') {
            if (values.intertype === 'system' && setting.interType !== 'system') { // 导出excel需使用查询数据源
              notification.warning({
                top: 92,
                message: '表格数据查询未使用系统函数，导出Excel不可使用系统函数！',
                duration: 5
              })
              return
            }
            
            values.position = 'toolbar'
          if (values.OpenType === 'excelOut') {
            values.Ot = 'notRequired'
          } else if (values.OpenType === 'popview' && !values.linkTab) { // 没有关联标签（新建时），创建新标签Id
            values.linkTab = Utils.getuuid()
          } else if (values.OpenType === 'funcbutton') { // 转换打印时打开方式
            values.position = 'toolbar'
          } else if (['pop', 'prompt', 'exec'].includes(values.OpenType) && values.verify) {
            if ((values.Ot === 'requiredOnce' || card.Ot === 'requiredOnce') && card.Ot !== values.Ot) {
              values.verify.uniques = []