2021-04-07

king

2021-04-07 f3167f8371d19d0ea8fe7d0e7af5517ff0b08cd2

 src/templates/modalconfig/index.jsx

@@ -5,7 +5,7 @@
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import moment from 'moment'
import { Button, Card, Modal, Collapse, notification, Icon, Popover, Switch } from 'antd'
import { Button, Card, Modal, Collapse, notification, Icon, Switch } from 'antd'

import Api from '@/api'
import Utils from '@/utils/utils.js'
@@ -14,19 +14,19 @@
import { getModalForm } from '@/templates/zshare/formconfig'

import ModalForm from '@/templates/zshare/modalform'
import DragElement from './dragelement'
import SourceElement from './dragelement/source'
import SettingForm from './settingform'
import GroupForm from './groupform'
import MenuForm from './menuform'
import asyncComponent from '@/utils/asyncComponent'
import { BaseConfig, SearchItems } from './source'
import { updateForm } from '@/utils/utils-update.js'
import './index.scss'

const { Panel } = Collapse
const { confirm } = Modal
const CommonDict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const CommonDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const EditComponent = asyncComponent(() => import('@/templates/zshare/editcomponent'))
const DragElement = asyncComponent(() => import('./dragelement'))
const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent'))
const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))

@@ -47,7 +47,6 @@
  state = {
    menu: null,            // 上级菜单，三级菜单或标签
    dict: CommonDict,      // 字典
    tableFields: [],       // 已选的常用表
    config: null,          // 页面配置，包括模板类型、模态框设置、添加表名、表单列表
    visible: false,        // 表单编辑模态框，显示控制
    modalformlist: null,   // 基本信息表单字段
@@ -58,8 +57,6 @@
    settingVisible: false, // 全局配置模态框
    closeVisible: false,   // 关闭模态框
    originConfig: null,    // 原始菜单
    groupVisible: false,   // 全局配置模态框
    curgroup: null,        // 当前组，新建或编辑
    sqlVerifing: false,    // sql验证
    openEdition: '',       // 编辑版本标记，防止多人操作
    showField: false       // 显示表单字段值
@@ -108,6 +105,7 @@
        url: ''
      })
    }
    _config = updateForm(_config)

    this.setState({
      openEdition: editAction.open_edition || '',
@@ -173,78 +171,20 @@
   * 2、表单移动后，保存移动后的顺序
   * 3、新增表单时，直接打开编辑框
   */
  handleList = (list, group, elementId, newcard) => {
  handleList = (list, newcard) => {
    let _config = fromJS(this.state.config).toJS()

    if (!group && !elementId) {
      // 没有分组时（拖拽添加）
      if (list.length > _config.fields.length) {
        _config.fields = list.filter(item => !item.origin)
  
        this.setState({
          config: _config
        }, () => {
          this.handleForm(newcard)
        })
      } else {
        _config.fields = list
        this.setState({config: _config})
      }
    } else if (group && !elementId) {
      // 存在分组时，拖拽添加
      if (list.length > group.sublist.length) {
        group.sublist = list
        _config.groups = _config.groups.map(item => {
          if (item.uuid === group.uuid) {
            return group
          } else {
            return item
          }
        })
  
        this.setState({
          config: _config
        }, () => {
          this.handleForm(newcard)
        })
      } else {
        group.sublist = list
        _config.groups = _config.groups.map(item => {
          if (item.uuid === group.uuid) {
            return group
          } else {
            return item
          }
        })
        this.setState({config: _config})
      }
    } else if (group && elementId) {
      // 修改已有元素的分组
      let element = null
      _config.groups.forEach(item => {
        item.sublist = item.sublist.filter(cell => {
          if (cell.uuid !== elementId) {
            return true
          } else {
            element = cell
            return false
          }
        })
      })

      group.sublist.push(element)

      _config.groups = _config.groups.map(item => {
        if (item.uuid === group.uuid) {
          return group
        } else {
          return item
        }
      })
    if (list.length > _config.fields.length) {
      _config.fields = list.filter(item => !item.origin)

      this.setState({
        config: _config
      }, () => {
        this.handleForm(newcard)
      })
    } else {
      _config.fields = list
      this.setState({config: _config})
    }
  }

@@ -256,8 +196,8 @@
   */
  handleForm = (_card) => {
    const { menu, tabConfig, subTabConfig } = this.props
    let card = fromJS(_card).toJS()
    const { config } = this.state
    let card = fromJS(_card).toJS()
    let _inputfields = []
    let _tabfields = []
    let _linkableFields = []
@@ -265,24 +205,19 @@
      value: '',
      text: '空'
    }]
    let _formfields = []
    let standardform = null

    // 设置下拉菜单可关联字段(上级与下级)
    if (config.groups.length > 0) {
      config.groups.forEach(group => {
        _formfields = [..._formfields, ...group.sublist]
      })
    } else {
      _formfields = config.fields
    }

    _inputfields = _formfields.filter(item => item.type === 'text' || item.type === 'number' || item.type === 'textarea' || item.type === 'color')
    _tabfields = _formfields.filter(item => card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type))
    _inputfields = config.fields.filter(item => item.type === 'text' || item.type === 'number' || item.type === 'textarea' || item.type === 'color')
    _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)
    _formfields.forEach(item => {
    let index = null
    config.fields.forEach((item, i) => {
      if (card.uuid === item.uuid) {
        index = i
      }
      if (item.type !== 'select' && item.type !== 'link' && item.type !== 'radio') return
      if (item.field && !uniq.has(item.field)) {
        uniq.set(item.field, true)
@@ -297,6 +232,14 @@
        })
      }
    })

    if (index !== null) {
      if (index === 0) {
        standardform = config.fields[index + 1] || null
      } else {
        standardform = config.fields[index - 1] || null
      }
    }

    if (subTabConfig) {
      subTabConfig.columns.forEach(col => {
@@ -338,7 +281,13 @@
      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)
@@ -357,37 +306,19 @@
      let fieldrepet = false // 字段重复
      let labelrepet = false // 提示文字重复

      if (_config.groups.length > 0) {
        _config.groups.forEach(group => {
          group.sublist = group.sublist.map(item => {
            if (item.uuid !== res.uuid && item.field.toLowerCase() === res.field.toLowerCase()) {
              fieldrepet = true
            } else if (item.uuid !== res.uuid && item.label === res.label) {
              labelrepet = true
            }
      _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) {
              return res
            } else {
              return item
            }
          })
        })
      } else {
        _config.fields = _config.fields.map(item => {
          if (item.uuid !== res.uuid && item.field.toLowerCase() === res.field.toLowerCase()) {
            fieldrepet = true
          } else if (item.uuid !== res.uuid && item.label === res.label) {
            labelrepet = true
          }

          if (item.uuid === res.uuid) {
            return res
          } else {
            return item
          }
        })
      }
        if (item.uuid === res.uuid) {
          return res
        } else {
          return item
        }
      })

      if (fieldrepet) {
        notification.warning({
@@ -461,17 +392,10 @@
    let _this = this

    confirm({
      content: `确定删除<<${card.label}>>吗？`,
      content: `确定删除${card.label ? `<<${card.label}>>` : ''}吗？`,
      onOk() {
        let _config = fromJS(_this.state.config).toJS()

        if (_config.groups.length > 0) {
          _config.groups.forEach(group => {
            group.sublist = group.sublist.filter(item => !(item.uuid === card.uuid))
          })
        } else {
          _config.fields = _config.fields.filter(item => !(item.uuid === card.uuid))
        }
        _config.fields = _config.fields.filter(item => !(item.uuid === card.uuid))

        _this.setState({
          config: _config,
@@ -485,7 +409,7 @@
    const { editAction } = this.props
    const { config, menu, openEdition } = this.state

    if ((!config.groups[0] && !config.fields[0]) || (config.fields[0] && config.fields[0].origin)) {
    if (config.fields[0] && config.fields[0].origin) {
      notification.warning({
        top: 92,
        message: '请添加表单',
@@ -588,18 +512,6 @@
  }

  /**
   * @description 更新常用表信息，快捷添加后更新配置信息
   */
  updatetable = (config, fields) => {
    const { tableFields } = this.state

    this.setState({
      config: config,
      tableFields: fields ? fields : tableFields
    })
  }

  /**
   * @description 全局设置模态框
   */
  changeSetting = () => {
@@ -621,115 +533,12 @@
    })
  }

  handleGroup = (group) => {
    let curgroup = ''

    if (group) {
      curgroup = group
    } else {
      curgroup = {
        isnew: true,
        label: '',
        default: false,
        uuid: Utils.getuuid(),
        sublist: []
      }
    }

    this.setState({
      groupVisible: true,
      curgroup: curgroup
    })
  }

  closeGroup = (group) => {
    let _this = this

    confirm({
      content: `确定删除分组<<${group.label}>>吗？`,
      onOk() {
        let _config = fromJS(_this.state.config).toJS()
        _config.groups = _config.groups.filter(item => !(item.uuid === group.uuid))
        let _length = _config.groups.length
        
        if (_length === 1) {
          _config.fields = [...group.sublist, ..._config.groups[0].sublist]
          _config.groups = []
        } else {
          _config.groups[_length - 1].sublist = [...group.sublist, ..._config.groups[_length - 1].sublist]
        }

        _this.setState({
          config: _config
        })
      },
      onCancel() {}
    })
  }

  handleGroupSave = () => {
    let _group = fromJS(this.state.curgroup).toJS()
    let config = fromJS(this.state.config).toJS()

    this.groupRef.handleConfirm().then(res => {
      _group = {..._group, ...res.target}

      if (_group.isnew) {
        delete _group.isnew
        config.groups.unshift(_group)

        if (config.groups.length > 1) {
          config.groups = config.groups.map(item => {
            if (item.default) {
              return res.default
            } else {
              return item
            }
          })
        } else {
          config.groups.push(res.default)
        }
      } else {
        config.groups = config.groups.map(item => {
          if (item.uuid === _group.uuid) {
            return _group
          } else if (item.default) {
            return res.default
          } else {
            return item
          }
        })
      }

      config.fields = []

      config.groups = config.groups.sort((a, b) => {
        return a.sort - b.sort
      })
      
      this.setState({
        groupVisible: false,
        curgroup: '',
        config: config
      })
    })
  }

  editModalCancel = () => {
    const { config, card } = this.state

    if (card.focus) {
      let _config = null
      if (config.groups.length > 0) {
        let _groups = config.groups.map(group => {
          group.sublist = group.sublist.filter(item => item.uuid !== card.uuid)
          return group
        })
        _config = {...config, groups: _groups}
      } else {
        let _fields = config.fields.filter(item => item.uuid !== card.uuid)
        _config = {...config, fields: _fields}
      }
      let _fields = config.fields.filter(item => item.uuid !== card.uuid)
      let _config = {...config, fields: _fields}

      this.setState({
        card: null,
@@ -765,6 +574,40 @@
    })
  }

  changecols = (type) => {
    let config = fromJS(this.state.config).toJS()
    let _this = this

    config.fields = config.fields.map(item => {
      item.labelwidth = 33.3
      item.span = 24
      if (['textarea','split','hint','checkcard','brafteditor'].includes(item.type)) {
        if (type === 2) {
          item.labelwidth = 16.3
        } else if (type === 3) {
          item.labelwidth = 10.5
        } else if (type === 4) {
          item.labelwidth = 8.3
        }
      } else if (type === 2) {
        item.span = 12
      } else if (type === 3) {
        item.span = 8
      } else if (type === 4) {
        item.span = 6
      }
      return item
    })
    
    confirm({
      content: `确定切换为${type}列吗？`,
      onOk() {
        _this.setState({config})
      },
      onCancel() {}
    })
  }

  render () {
    const { config, source, dict } = this.state

@@ -782,7 +625,7 @@
                <TableComponent
                  config={config}
                  containerId="modal-basedata"
                  updatetable={this.updatetable}
                  updatetable={this.updateconfig}
                />
              </Panel>
              <Panel header={dict['header.menu.form']} key="1">
@@ -794,10 +637,8 @@
                <FieldsComponent
                  config={config}
                  type="form"
                  tableFields={this.state.tableFields}
                  updatefield={this.updateconfig}
                />
                <Button type="primary" block onClick={() => this.handleGroup()}>{dict['header.menu.group.add']}</Button>
              </Panel>
            </Collapse>
          </div>
@@ -813,50 +654,23 @@
              <div className="ant-modal-content" style={{width: config.setting.width + '%'}}>
                <div className="ant-modal-header">
                  <div className="ant-modal-title">{config.setting.title}</div>
                  <Button className="mk-cols-change" onClick={() => this.changecols(1)}>1列</Button>
                  <Button className="mk-cols-change" onClick={() => this.changecols(2)}>2列</Button>
                  <Button className="mk-cols-change" onClick={() => this.changecols(3)}>3列</Button>
                  <Button className="mk-cols-change" onClick={() => this.changecols(4)}>4列</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="ant-modal-body">
                  <div className="modal-form">
                    {config.groups.length > 0 &&
                      config.groups.map(group => {
                        return (
                          <div key={group.uuid}>
                            <div className="group-title">
                              {!group.default ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
                                <div className="mk-popover-control">
                                  <Icon className="edit" type="edit" onClick={() => {this.handleGroup(group)}} />
                                  <Icon className="edit close" type="close" onClick={() => {this.closeGroup(group)}} />
                                </div>
                              } trigger="hover">
                                <span>{group.label}</span>
                              </Popover> : null}
                              {group.default ? <span style={{color: '#bcbcbc'}}>{group.label}</span> : null}
                            </div>
                            <DragElement
                              group={group}
                              list={group.sublist}
                              setting={config.setting}
                              showField={this.state.showField}
                              placeholder={dict['header.form.modal.placeholder']}
                              handleList={this.handleList}
                              handleForm={this.handleForm}
                              closeForm={this.closeForm}
                            />
                          </div>
                        )
                      })
                    }
                    {config.groups.length === 0 ?
                      <DragElement
                        list={config.fields}
                        setting={config.setting}
                        showField={this.state.showField}
                        placeholder={dict['header.form.modal.placeholder']}
                        handleList={this.handleList}
                        handleForm={this.handleForm}
                        closeForm={this.closeForm}
                      /> : null
                    }
                    <DragElement
                      list={config.fields}
                      setting={config.setting}
                      showField={this.state.showField}
                      placeholder={dict['header.form.modal.placeholder']}
                      handleList={this.handleList}
                      handleForm={this.handleForm}
                      closeForm={this.closeForm}
                    />
                  </div>
                </div>
                <div className="ant-modal-footer">
@@ -889,6 +703,7 @@
            card={this.state.card}
            formlist={this.state.formlist}
            inputSubmit={this.handleSubmit}
            standardform={this.state.standardform}
            wrappedComponentRef={(inst) => this.formRef = inst}
          />
        </Modal>
@@ -923,23 +738,6 @@
          destroyOnClose
        >
          {dict['header.menu.config.placeholder']}
        </Modal>
        <Modal
          title={dict['header.menu.group.manage']}
          visible={this.state.groupVisible}
          width={700}
          maskClosable={false}
          onOk={this.handleGroupSave}
          onCancel={() => { this.setState({ groupVisible: false }) }}
          destroyOnClose
        >
          <GroupForm
            dict={dict}
            config={config}
            group={this.state.curgroup}
            inputSubmit={this.handleGroupSave}
            wrappedComponentRef={(inst) => this.groupRef = inst}
          />
        </Modal>
      </div>
    )