2021-12-22

king

2021-12-22 bd1dfc9e6c9b9f8076ca2783ce598e0936b4c664

 src/templates/modalconfig/index.jsx

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

import Api from '@/api'
import Utils from '@/utils/utils.js'
@@ -25,6 +26,7 @@
const { confirm } = Modal
const CommonDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS

const Versions = asyncComponent(() => import('@/menu/versions'))
const ReplaceField = asyncComponent(() => import('@/menu/replaceField'))
const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform'))
const EditComponent = asyncComponent(() => import('@/templates/zshare/editcomponent'))
@@ -194,36 +196,55 @@
    let _tabfields = []
    let _linkableFields = []
    let _linksupFields = [{
      value: '',
      text: '空'
      field: '',
      label: '空'
    }]
    let standardform = null

    _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)
    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
      }

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

      if (!['select', 'link', 'radio', ''].includes(item.type)) 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 + '、' + item.label
        })
        _linkIndex++
      }
    })

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

    if (index !== null) {
      if (index === 0) {
@@ -239,9 +260,10 @@
          uniq.set(col.field, true)

          _linkableFields.push({
            value: col.field,
            text: col.label + ' (显示列)'
            field: col.field,
            label: _linkIndex + '、' + col.label + ' (显示列)'
          })
          _linkIndex++
        }
      })
    } else if (tabConfig) {
@@ -250,9 +272,10 @@
          uniq.set(col.field, true)

          _linkableFields.push({
            value: col.field,
            text: col.label + ' (显示列)'
            field: col.field,
            label: _linkIndex + '、' + col.label + ' (显示列)'
          })
          _linkIndex++
        }
      })
    } else if (menu.LongParam) {
@@ -261,9 +284,10 @@
          uniq.set(col.field, true)

          _linkableFields.push({
            value: col.field,
            text: col.label + ' (显示列)'
            field: col.field,
            label: _linkIndex + '、' + col.label + ' (显示列)'
          })
          _linkIndex++
        }
      })
    }
@@ -282,7 +306,7 @@
      standardform,
      visible: true,
      card: card,
      formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields, !!this.props.editTab)
      formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields)
    })
  }

@@ -296,13 +320,10 @@
    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) {
@@ -316,13 +337,6 @@
        notification.warning({
          top: 92,
          message: '字段已存在！',
          duration: 10
        })
        return
      } else if (labelrepet) {
        notification.warning({
          top: 92,
          message: '名称已存在！',
          duration: 10
        })
        return
@@ -546,18 +560,6 @@
  }

  /**
   * @description 编辑功能完成更新，包括解冻按钮、粘贴、替换等
   */
  updateEditConfig = (res) => {
    if (res.type === 'paste') {
      this.setState({
        config: res.config
      })
      this.handleForm(res.newform)
    }
  }

  /**
   * @description 更新配置信息
   */
  updateconfig = (config) => {
@@ -600,9 +602,95 @@
    })
  }

  render () {
    const { config, dict } = this.state
  refreshConfig = () => {
    const { editAction } = this.props
    
    let param = {
      func: 'sPC_Get_LongParam',
      MenuID: editAction.uuid
    }

    Api.getSystemConfig(param).then(res => {
      if (res.status) {
        let _config = ''
        if (res.LongParam) {
          try {
            _config = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
          } catch (e) {
            console.warn('Parse Failure')
            _config = ''
          }
        }

        if (!_config) {
          notification.warning({
            top: 92,
            message: '未获取到配置信息！',
            duration: 5
          })
          return
        }

        // 版本兼容
        _config = updateForm(_config)

        this.setState({
          config: null
        }, () => {
          this.setState({
            config: _config,
            openEdition: res.open_edition || '',
            originConfig: fromJS(_config).toJS()
          })
        })
      } else {
        notification.warning({
          top: 92,
          message: res.message,
          duration: 5
        })
      }
    })
  }

  plusFields = (items) => {
    let _config = fromJS(this.state.config).toJS()

    if (_config.fields[0] && _config.fields[0].origin) {
      _config.fields = _config.fields.filter(item => !item.origin)
    }

    _config.fields.push(...items)

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

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

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


  render () {
    const { editAction } = this.props
    const { config, dict, openEdition } = this.state

    if (!config) return null
    
    return (
      <div className="modal-form-board">
        <DndProvider backend={HTML5Backend}>
@@ -626,24 +714,22 @@
                    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="setting">
            <Card title={dict['header.menu.form.configurable']} bordered={false} extra={
            <Card title="表单配置" bordered={false} extra={
              <div>
                <Button type="danger" onClick={this.clearConfig}>清空</Button>
                <Versions MenuId={editAction.uuid} open_edition={openEdition} updateConfig={this.refreshConfig}/>
                <ReplaceField type="form" config={config} updateConfig={this.updateconfig}/>
                <EditComponent dict={dict} options={['form']} config={this.state.config} refresh={this.updateEditConfig}/>
                <EditComponent dict={dict} options={['form']} config={this.state.config} plusFields={this.plusFields}/>
                <Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{dict['model.save']}</Button>
                <Button onClick={this.cancelConfig}>{dict['model.back']}</Button>
              </div>
            } style={{ width: '100%' }}>
              <Icon type="setting" onClick={this.changeSetting} />
              <SettingOutlined onClick={this.changeSetting} />
              <div className="ant-modal-content" style={{width: config.setting.width + '%'}}>
                <div className="ant-modal-header">
                  <div className="ant-modal-title">{config.setting.title}</div>
@@ -703,7 +789,7 @@
        <Modal
          title={dict['model.edit']}
          visible={this.state.settingVisible}
          width={850}
          width={900}
          maskClosable={false}
          onOk={this.settingSave}
          onCancel={() => { this.setState({ settingVisible: false }) }}
@@ -711,7 +797,6 @@
        >
          <SettingForm
            config={config}
            dict={dict}
            isSubTab={!!this.props.editTab}
            inputSubmit={this.settingSave}
            wrappedComponentRef={(inst) => this.settingRef = inst}