2021-09-01

king

2021-09-01 31ec63f0419895876cbaba99637a884a32d33d0d

 src/templates/formtabconfig/actionform/index.jsx

@@ -2,152 +2,101 @@
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Select, Icon, Radio, notification, Tooltip, InputNumber } from 'antd'
import { btnIcons, btnClasses, formRule } from '@/utils/option.js'
import Utils from '@/utils/utils.js'
// import Utils from '@/utils/utils.js'
import './index.scss'

const { TextArea } = Input

class MainSearch extends Component {
  static propTpyes = {
    dict: PropTypes.object,  // 字典项
    formlist: PropTypes.any, // 表单信息
    card: PropTypes.any,     // 按钮信息
    tabs: PropTypes.array    // 所有标签页
    dict: PropTypes.object,      // 字典项
    formlist: PropTypes.any,     // 表单信息
    card: PropTypes.any,         // 按钮信息
    tabs: PropTypes.array,       // 所有标签页
    inputSubmit: PropTypes.any   // 回车提交事件
  }

  state = {
    formlist: null,  // 表单信息
    openType: null,  // 打开方式
    interType: null, // 接口类型：内部、外部
    position: null,  // 按钮位置
    reqOptionSgl: [{
      value: 'requiredSgl',
      text: this.props.dict['header.form.requiredSgl']
    }],
    reqOptions: [{
      value: 'notRequired',
      text: this.props.dict['header.form.notRequired']
    }, {
      value: 'requiredSgl',
      text: this.props.dict['header.form.requiredSgl']
    }],
    reqOptionsMutil: [{
      value: 'notRequired',
      text: this.props.dict['header.form.notRequired']
    }, {
      value: 'requiredSgl',
      text: this.props.dict['header.form.requiredSgl']
    }, {
      value: 'required',
      text: this.props.dict['header.form.required']
    }, {
      value: 'requiredOnce',
      text: this.props.dict['header.form.requiredOnce']
    }],
    insertUpdateOptions: [{
      value: '',
      text: this.props.dict['header.form.empty']
      text: this.props.dict['model.empty']
    }, {
      value: 'insert',
      text: this.props.dict['header.form.action.insert']
    }, {
      value: 'update',
      text: this.props.dict['header.form.action.update']
    }, {
      value: 'insertOrUpdate',
      text: this.props.dict['header.form.action.insertOrUpdate']
    }],
    deleteOptions: [{
      value: '',
      text: this.props.dict['header.form.empty']
    returnoptions: [{ // 返回后-不刷新、刷新页面、刷新表格
      value: 'never',
      text: this.props.dict['header.form.refresh.never']
    }, {
      value: 'LogicDelete',
      text: this.props.dict['header.form.action.LogicDelete']
      value: 'grid',
      text: this.props.dict['header.form.refresh']
    }],
    currentoptions: [{ // 不返回时-不刷新、刷新
      value: 'never',
      text: this.props.dict['header.form.refresh.never']
    }, {
      value: 'delete',
      text: this.props.dict['header.form.action.delete']
      value: 'refresh',
      text: this.props.dict['header.form.refresh']
    }]
  }

  
  UNSAFE_componentWillMount () {
    let _opentype = ''
    const { card } = this.props
    let _intertype = ''
    let _position = ''
    let _tabType = ''
    let _linkTab = ''
    let _options = null

    this.props.formlist.forEach(form => {
      if (form.key === 'OpenType') {
        _opentype = form.initVal
      } else if (form.key === 'intertype') {
      if (form.key === 'intertype') {
        _intertype = form.initVal
      } else if (form.key === 'position') {
        _position = form.initVal
      } else if (form.key === 'tabType') {
        _tabType = form.initVal
      } else if (form.key === 'linkTab') {
        _linkTab = form.initVal
        if (card.btnType !== 'confirm') {
          form.options = form.options.filter(op => op.value !== 'system')
        }
      }
    })

    let _tabs = this.props.tabs.filter(tab => tab.type === _tabType)
    let initTab = _tabs.filter(tab => tab.uuid === _linkTab)[0]
    let _options = this.getOptions(card.btnType, _intertype)

    if (_opentype === 'innerpage') {                                     // 新页面（内部），可选模板
      _options = ['label', 'Ot', 'OpenType', 'pageTemplate', 'icon', 'class', 'position']
    } else if (_opentype === 'outerpage') {                              // 新页面（外部），需要页面地址
      _options = ['label', 'Ot', 'OpenType', 'url', 'icon', 'class', 'position']
    } else if (_opentype === 'blank' || _opentype === 'tab') {           // 新标签或当前页面替换
      _options = ['label', 'Ot', 'OpenType', 'icon', 'class', 'position']
    } else if (_opentype === 'popview') {                                // 模态框标签页
      _options = ['label', 'Ot', 'OpenType', 'icon', 'class', 'position', 'tabType', 'linkTab', 'popClose']
    } else if (_opentype === 'excelIn' || _opentype === 'excelOut') {    // 导入导出
      if (_intertype === 'outer') {
        _options = ['label', 'OpenType', 'intertype', 'innerFunc', 'interface', 'outerFunc', 'callbackFunc', 'icon', 'class', 'execSuccess', 'execError', 'method']
      } else {
        _options = ['label', 'OpenType', 'intertype', 'innerFunc', 'icon', 'class', 'execSuccess', 'execError']
      }
    } else {
      if (_intertype === 'outer') {
        _options = ['label', 'position', 'OpenType', 'intertype', 'innerFunc', 'interface', 'outerFunc', 'callbackFunc', 'Ot', 'icon', 'class', 'execSuccess', 'execError', 'method']
      } else {
        _options = ['label', 'position', 'OpenType', 'intertype', 'innerFunc', 'Ot', 'icon', 'class', 'execSuccess', 'execError', 'sql', 'sqlType']
      }
    }
    this.setState({
      openType: _opentype,
      interType: _intertype,
      position: _position,
      formlist: this.props.formlist.map(item => {
        if (item.key === 'class') {
          item.options = btnClasses
        } else if (item.key === 'icon') {
          item.options = btnIcons
        } else if (item.key === 'Ot') {
          if (_opentype === 'innerpage' || _position === 'grid') {
            item.options = this.state.reqOptionSgl
          } else if (['outerpage', 'blank', 'tab', 'popview'].includes(_opentype)) {
            item.options = this.state.reqOptions
          } else {
            item.options = this.state.reqOptionsMutil
          }
        } else if (item.key === 'resetPageIndex') {
          item.tooltip = '页面关闭，且执行刷新时生效'
        } 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 = this.state.insertUpdateOptions
        } else if (item.key === 'OpenType') {
          item.options = [
            {
              value: '',
              text: '新建'
            },
            ..._tabs
              value: 'prompt',
              text: this.props.dict['model.form.prompt']
            }, {
              value: 'exec',
              text: this.props.dict['model.form.exec']
            }
          ]
          if (!initTab) {
            item.initVal = ''
          if (card.btnType === 'cancel') {
            item.readonly = true
          }
        } else if (item.key === 'execSuccess' && card.btnType === 'cancel') {
          item.label = '关闭后'
          item.options[1].text = '刷新'
        } else if (item.key === 'execSuccess' || item.key === 'execError') {
          item.options[1].text = '刷新'
        } else if (item.key === 'innerFunc' && card.btnType !== 'confirm' && _intertype === 'inner') {
          item.required = true
        }

        item.hidden = !_options.includes(item.key)
        return item
      })
@@ -161,158 +110,87 @@
      try {
        let _form = document.getElementById('label')
        _form.select()
      } catch {
      } catch (e) {
        console.warn('表单focus失败！')
      }
    }
  }

  // 打开方式或显示位置变化
  openTypeChange = (key, value) => {
    if (key === 'OpenType') {
      let _options = null
      if (value === 'innerpage') {
        _options = ['label', 'Ot', 'OpenType', 'pageTemplate', 'icon', 'class', 'position']
      } else if (value === 'outerpage') {
        _options = ['label', 'Ot', 'OpenType', 'url', 'icon', 'class', 'position']
      } else if (value === 'blank' || value === 'tab') {
        _options = ['label', 'Ot', 'OpenType', 'icon', 'class', 'position']
      } else if (value === 'popview') {
        _options = ['label', 'Ot', 'OpenType', 'icon', 'class', 'position', 'tabType', 'linkTab', 'popClose']
      } else if (value === 'excelIn' || value === 'excelOut') {
        if (this.state.interType === 'outer') {
          _options = ['label', 'OpenType', 'intertype', 'innerFunc', 'interface', 'outerFunc', 'callbackFunc', 'icon', 'class', 'execSuccess', 'execError', 'method']
        } else {
          _options = ['label', 'OpenType', 'intertype', 'innerFunc', 'icon', 'class', 'execSuccess', 'execError']
        }
  getOptions = (btnType, intertype) => {
    let _options = []

    if (btnType === 'cancel') {
      _options = ['label', 'OpenType', 'icon', 'class', 'execSuccess', 'resetPageIndex']
    } else if (btnType === 'confirm') {
      if (intertype === 'outer') {
        _options = ['label', 'OpenType', 'intertype', 'innerFunc', 'interface', 'outerFunc', 'callbackFunc', 'sysInterface', 'icon', 'class', 'execSuccess', 'execError', 'afterExecSuccess', 'afterExecError', 'resetPageIndex']
      } else if (intertype === 'system') {
        _options = ['label', 'OpenType', 'intertype', 'icon', 'class', 'execSuccess', 'execError', 'sql', 'sqlType', 'afterExecSuccess', 'afterExecError', 'resetPageIndex']
      } else {
        if (this.state.interType === 'inner') {
          _options = ['label', 'position', 'OpenType', 'intertype', 'innerFunc', 'Ot', 'icon', 'class', 'execSuccess', 'execError', 'sql', 'sqlType']
        } else {
          _options = ['label', 'position', 'OpenType', 'intertype', 'innerFunc', 'Ot', 'icon', 'class', 'execSuccess', 'execError', 'interface', 'outerFunc', 'callbackFunc', 'method']
        }
        _options = ['label', 'OpenType', 'intertype', 'innerFunc', 'icon', 'class', 'execSuccess', 'execError', 'afterExecSuccess', 'afterExecError', 'resetPageIndex']
      }
    } else {
      if (intertype === 'outer') {
        _options = ['label', 'OpenType', 'intertype', 'innerFunc', 'interface', 'outerFunc', 'callbackFunc', 'sysInterface', 'icon', 'class', 'execSuccess', 'execError', 'afterExecSuccess', 'afterExecError', 'resetPageIndex']
      } else {
        _options = ['label', 'OpenType', 'intertype', 'innerFunc', 'icon', 'class', 'execSuccess', 'execError', 'afterExecSuccess', 'afterExecError', 'resetPageIndex']
      }
    }

    return _options
  }

  onChange = (e, key) => {
    const { card } = this.props

    let value = e.target.value

    if (key === 'intertype') {
      let _options = this.getOptions(card.btnType, value)

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

          if (item.key === 'interface') {
            item.readonly = false
          } else if (item.key === 'sysInterface') {
            item.initVal = 'false'
          } else if (item.key === 'innerFunc' && value === 'inner') {
            item.required = true
          } else if (item.key === 'innerFunc' && value === 'outer') {
            item.required = false
          }

          return item
        })
      })
    } else if (key === 'sysInterface') {
      if (value === 'true') {
        this.props.form.setFieldsValue({
          interface: window.GLOB.mainSystemApi || ''
        })
      }
      this.setState({
        openType: value,
        formlist: this.state.formlist.map(item => {
          if (_options) {
            item.hidden = !_options.includes(item.key)
            if (item.key === 'intertype') {
              item.initVal = this.state.interType
            }
          if (item.key === 'interface' && value === 'true') {
            item.readonly = true
          } else if (item.key === 'interface') {
            item.readonly = false
          }
          if (item.key === 'Ot') {
            if (value === 'innerpage' || this.state.position === 'grid') {
              item.options = this.state.reqOptionSgl
              item.initVal = 'requiredSgl'
            } else if (['outerpage', 'blank', 'tab', 'popview'].includes(value)) {
              item.options = this.state.reqOptions
              item.initVal = 'requiredSgl'
            } else {
              item.options = this.state.reqOptionsMutil
            }
            item.hidden = true
          } else if (item.key === 'sqlType') {
            if (['prompt', 'exec'].includes(value)) {
              item.options = this.state.deleteOptions
            } else {
              item.options = this.state.insertUpdateOptions
            }
            item.initVal = ''
            item.hidden = true
          }
          return item
        })
      }, () => {
        if (['excelIn', 'excelOut'].includes(value)) return

        this.setState({
          formlist: this.state.formlist.map(item => {
            if (item.key === 'Ot') {
              item.hidden = false
            } else if (item.key === 'sqlType' && ['prompt', 'exec', 'pop'].includes(value)) {
              item.hidden = false
            }
            return item
          })
        })
      })
    } else if (key === 'position') {
      this.setState({
        position: value,
        formlist: this.state.formlist.map(item => {
          if (item.key === 'Ot') {
            if (this.state.openType === 'innerpage' || value === 'grid') {
              item.options = this.state.reqOptionSgl
              item.initVal = 'requiredSgl'
              item.hidden = true
            } else if (['outerpage', 'blank', 'tab', 'popview'].includes(this.state.openType)) {
              item.options = this.state.reqOptions
              item.initVal = 'requiredSgl'
              item.hidden = true
            } else {
              item.options = this.state.reqOptionsMutil
            }
          }
          return item
        })
      }, () => {
        this.setState({
          formlist: this.state.formlist.map(item => {
            if (item.key === 'Ot') {
              item.hidden = false
            }
            return item
          })
        })
      })
    } else if (key === 'tabType') {
      let _tabs = this.props.tabs.filter(tab => tab.type === value)

      this.setState({
        formlist: this.state.formlist.map(item => {
          if (item.key === 'linkTab') {
            item.options = [
              {
                value: '',
                text: '新建'
              },
              ..._tabs
            ]
            item.initVal = ''
            item.hidden = true
          }
          return item
        })
      }, () => {
        this.setState({
          formlist: this.state.formlist.map(item => {
            if (item.key === 'linkTab') {
              item.hidden = false
            }
            return item
          })
        })
      })
    }
  }

  onChange = (e, key) => {
    let value = e.target.value
    if (key === 'intertype') {
      let _options = null
      if (value === 'inner') {
        _options = ['label', 'position', 'OpenType', 'intertype', 'innerFunc', 'Ot', 'icon', 'class', 'execSuccess', 'execError', 'sql', 'sqlType']
      } else {
        _options = ['label', 'position', 'OpenType', 'intertype', 'innerFunc', 'Ot', 'icon', 'class', 'execSuccess', 'execError', 'interface', 'outerFunc', 'callbackFunc', 'method']
      }
      this.setState({
        interType: value,
        formlist: this.state.formlist.map(item => {
          item.hidden = !_options.includes(item.key)
          return item
        })
      })
  handleSubmit = (e) => {
    e.preventDefault()

    if (this.props.inputSubmit) {
      this.props.inputSubmit()
    }
  }

@@ -366,7 +244,7 @@
                  },
                  ..._rules
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} />)}
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col>
        )
@@ -406,8 +284,8 @@
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  onChange={(value) => {this.openTypeChange(item.key, value)}}
                  getPopupContainer={() => document.getElementById('winter')}
                  disabled={!!item.readonly}
                >
                  {item.options.map((option, index) =>
                    <Select.Option id={`${index}`} title={option.text} key={`${index}`} value={option.value}>
@@ -422,7 +300,12 @@
      } else if (item.type === 'radio') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
@@ -450,8 +333,14 @@
          <Col span={24} key={index}>
            <Form.Item label={item.label} className="textarea">
              {getFieldDecorator(item.key, {
                initialValue: item.initVal
              })(<TextArea rows={4} />)}
                initialValue: item.initVal,
                rules: [
                  {
                    required: item.readonly ? false : !!item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<TextArea rows={4} readOnly={item.readonly}/>)}
            </Form.Item>
          </Col>
        )
@@ -465,34 +354,25 @@
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.id = this.props.card.id
          values.uuid = this.props.card.uuid
          values.verify = this.props.card.verify || null
          values.btnType = this.props.card.btnType || 'tabFormBtn'

          if (values.OpenType === 'excelIn' || values.OpenType === 'excelOut') {
            values.position = 'toolbar'
            values.Ot = 'notRequired'
          } else if (values.OpenType === 'popview' && !values.linkTab) { // 没有关联标签（新建时），创建新标签Id
            values.linkTab = Utils.getuuid()
          }

          if (values.innerFunc === '' && values.sql === '') {
            notification.warning({
              top: 92,
              message: this.props.dict['header.form.actionhelp.datasource'],
              duration: 10
              message: '使用系统函数时，请填写表名，使用自定义函数时，可忽略。',
              duration: 5
            })
          } else if (values.innerFunc === '' && values.sql !== '' && values.sqlType === '') {
            notification.warning({
              top: 92,
              message: this.props.dict['header.form.actionhelp.sqlType'],
              duration: 10
              message: '使用系统函数时，请选择操作类型，使用自定义函数时，可忽略。',
              duration: 5
            })
          } else {
            resolve({
              type: 'action',
              values
            })
            resolve(values)
          }
        } else {
          reject(err)
@@ -513,7 +393,7 @@
      }
    }
    return (
      <Form {...formItemLayout} className="ant-advanced-search-form commontable-action-form" id="winter">
      <Form {...formItemLayout} className="formtab-action-list-form" id="winter">
        <Row gutter={24}>{this.getFields()}</Row>
      </Form>
    )