2022-04-29

king

2022-04-29 eec619b6e3339e9999a7a1c2c5454cef5d763b24

 src/mob/modalconfig/index.jsx

@@ -4,7 +4,8 @@
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import moment from 'moment'
import { Button, Modal, Collapse, notification, Switch, Icon } from 'antd'
import { Button, Modal, Collapse, notification, Switch } from 'antd'
import { LeftOutlined } from '@ant-design/icons'

import Api from '@/api'
import Utils from '@/utils/utils.js'
@@ -64,6 +65,7 @@
  }

  componentDidMount () {
    MKEmitter.addListener('submitStyle', this.getStyle)
    MKEmitter.addListener('completeSave', this.completeSave)
  }

@@ -74,11 +76,30 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('submitStyle', this.getStyle)
    MKEmitter.removeListener('completeSave', this.completeSave)
  }

  completeSave = () => {
    this.setState({saving: false})
  }

  getStyle = (comIds, style) => {
    const { config } = this.state

    if (comIds[0] !== 'form') return

    let Index = config.fields.findIndex(n => n.uuid === comIds[1])

    if (Index === -1) return
    
    let _config = fromJS(config).toJS()

    _config.fields[Index].style = style

    this.setState({
      config: _config
    })
  }

  /**
@@ -91,8 +112,7 @@
    let _config = fromJS(this.state.config).toJS()

    if (list.length > _config.fields.length) {
      _config.fields = list.filter(item => !item.origin)

      _config.fields = list
      this.setState({
        config: _config
      }, () => {
@@ -117,37 +137,67 @@
    let _inputfields = []
    let _tabfields = []
    let _linkableFields = []
    let _linksupFields = [{
      value: '',
      text: '空'
    }]
    let _linksupFields = []
    let standardform = null

    _inputfields = config.fields.filter(item => ['text', 'number', 'textarea', 'color'].includes(item.type) && card.field !== item.field)
    _tabfields = config.fields.filter(item => card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type))
    _tabfields.unshift({field: '', text: '原表单'})

    let uniq = new Map()
    uniq.set(card.field, true)
    let index = null
    uniq.set(card.field, true)

    let _inputIndex = 1
    let _tabIndex = 1
    let _linkIndex = 1
    config.fields.forEach((item, i) => {
      if (card.uuid === item.uuid) {
        index = i
      }

      let label = item.label || ''
      if (item.field && item.field.toLowerCase() !== label.toLowerCase()) {
        label = label + ' (' + item.field + ')'
      }

      if (['text', 'number', 'textarea', 'color'].includes(item.type) && card.field !== item.field) {
        _inputfields.push({
          field: item.field,
          label: _inputIndex + '、' + label
        })
        _inputIndex++
      }
      if (card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) {
        _tabfields.push({
          field: item.field,
          label: _tabIndex + '、' + label
        })
        _tabIndex++
      }

      if (item.type === 'switch') {
        _linksupFields.push({
          field: item.field,
          label: _linkIndex + '、' + label
        })
      }

      if (!['select', 'link', 'radio', 'checkcard'].includes(item.type)) return
      if (item.type === 'checkcard' && item.multiple === 'true') return // 选项卡多选
      if (item.field && !uniq.has(item.field)) {
        uniq.set(item.field, true)

        _linkableFields.push({
          value: item.field,
          text: item.label + ' (表单)'
          field: item.field,
          label: _linkIndex + '、' + item.label + ' (表单)'
        })
        _linksupFields.push({
          value: item.field,
          text: item.label
          field: item.field,
          label: _linkIndex + '、' + label
        })
        _linkIndex++
      }
    })

    _tabfields.unshift({field: '', label: '原表单'})

    if (index !== null) {
      if (index === 0) {
        standardform = config.fields[index + 1] || null
@@ -161,9 +211,10 @@
        uniq.set(col.field, true)

        _linkableFields.push({
          value: col.field,
          text: col.label + ' (显示列)'
          field: col.field,
          label: _linkIndex + '、' + col.label + ' (显示列)'
        })
        _linkIndex++
      }
    })

@@ -172,16 +223,11 @@
      card.linkSubField = card.linkSubField.filter(item => fields.includes(item))
    }

    if (!card.span && standardform && standardform.span) {
      card.span = standardform.span
      card.labelwidth = standardform.labelwidth
    }

    this.setState({
      standardform,
      visible: true,
      card: card,
      formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields, !!this.props.editTab)
      formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields)
    })
  }

@@ -195,16 +241,16 @@
    this.formRef.handleConfirm().then(res => {
      let _config = fromJS(this.state.config).toJS()
      let fieldrepet = false // 字段重复
      let labelrepet = false // 提示文字重复

      _config.fields = _config.fields.map(item => {
        if (item.uuid !== res.uuid && res.field && item.field && item.field.toLowerCase() === res.field.toLowerCase()) {
          fieldrepet = true
        } else if (res.label && item.uuid !== res.uuid && item.label === res.label) {
          labelrepet = true
        }

        if (item.uuid === res.uuid) {
          if (item.style) {
            res.style = item.style
          }
          return res
        } else {
          return item
@@ -218,16 +264,7 @@
          duration: 10
        })
        return
      } else if (labelrepet) {
        notification.warning({
          top: 92,
          message: '名称已存在！',
          duration: 10
        })
        return
      }

      _config.fields = _config.fields.filter(item => !item.origin)

      if (['select', 'multiselect', 'link', 'checkbox', 'radio', 'checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) {
        this.setState({
@@ -369,9 +406,17 @@
  /**
   * @description 更新
   */
  updateConfig = (config) => {
  plusFields = (items) => {
    let _config = fromJS(this.state.config).toJS()

    _config.fields.push(...items)

    this.setState({
      config
      config: _config
    }, () => {
      if (items.length === 1 && items[0].focus) {
        this.handleForm(items[0])
      }
    })
  }

@@ -380,6 +425,19 @@
      config
    }, () => {
      this.handleForm(config.fields[config.fields.length - 1])
    })
  }

  clearConfig = () => {
    const _this = this
    let _config = {...this.state.config, fields: []}

    confirm({
      content: '确定清空表单吗？',
      onOk() {
        _this.setState({ config: _config })
      },
      onCancel() {}
    })
  }

@@ -397,27 +455,25 @@
                    return (<SourceElement key={index} content={item}/>)
                  })}
                </div>
                <FieldsComponent
                  config={config}
                  type="form"
                  updatefield={this.updateConfig}
                />
                <FieldsComponent config={config} type="form" plusFields={this.plusFields}/>
              </Panel>
            </Collapse>
          </div>
          <div className="modal-control">
            <Button icon="setting" onClick={this.changeSetting}>设置</Button>
            <Button type="primary" loading={saving} onClick={this.submitConfig}>保存</Button>
            <Button type="primary" id="save-modal-config" loading={saving} onClick={this.submitConfig}>保存</Button>
            <Button onClick={this.cancelConfig}>返回</Button>
            <PasteComponent config={config} updateConfig={this.insert} />
            <Button type="danger" onClick={this.clearConfig}>清空</Button>
            <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} />
          </div>
          <div className="setting">
            <div className="mob-shell" style={{width: window.GLOB.shellWidth, height: window.GLOB.shellHeight}}>
              <div className="mob-shell-inner">
                <div className="am-navbar">
                  <Icon type="close" />
                  <LeftOutlined />
                  <div className="am-navbar-title">{config.setting.title}</div>
                  {config.setting.btnPosition === 'top' ? <Button className="modal-submit-top">{config.setting.btnName || '确定'}</Button> : null}
                </div>
                <DragElement
                  list={config.fields}
@@ -428,7 +484,8 @@
                  handleForm={this.handleForm}
                  closeForm={this.closeForm}
                />
                <Button className="modal-submit" type="primary">确定</Button>
                {config.setting.btnPosition !== 'top' ? 
                  <Button className="modal-submit" type="primary">{config.setting.btnName || '确定'}</Button> : null}
              </div>
            </div>
          </div>
@@ -436,7 +493,8 @@
        <Modal
          title={this.state.dict['model.edit']}
          visible={this.state.visible}
          width={850}
          width={950}
          maskClosable={false}
          onCancel={this.editModalCancel}
          onOk={this.handleSubmit}
          confirmLoading={this.state.sqlVerifing}
@@ -454,7 +512,7 @@
        <Modal
          title={this.state.dict['model.edit']}
          visible={this.state.settingVisible}
          width={850}
          width={900}
          maskClosable={false}
          onOk={this.settingSave}
          onCancel={() => { this.setState({ settingVisible: false }) }}