2024-05-23

king

2024-05-23 9a11e62adeb8d435b52a361eb62d5b59e1deef2a

 src/templates/modalconfig/index.jsx

@@ -1,19 +1,13 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { fromJS } from 'immutable'
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'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import { getModalForm } from '@/templates/zshare/formconfig'

import ModalForm from '@/templates/zshare/modalform'
import SourceElement from './dragelement/source'
import SettingForm from './settingform'
import MenuForm from './menuform'
@@ -24,8 +18,12 @@

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

// const Versions = asyncComponent(() => import('@/menu/versions'))
// const ReplaceField = asyncComponent(() => import('@/menu/replaceField'))
const StyleController = asyncComponent(() => import('@/menu/stylecontroller'))
const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform'))
// 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'))
@@ -46,7 +44,6 @@

  state = {
    menu: null,            // 上级菜单，三级菜单或标签
    dict: CommonDict,      // 字典
    config: null,          // 页面配置，包括模板类型、模态框设置、添加表名、表单列表
    visible: false,        // 表单编辑模态框，显示控制
    modalformlist: null,   // 基本信息表单字段
@@ -95,29 +92,19 @@

    // 主菜单已有选择的表名，模态框没有表名时，复制主菜单表名
    _config.tables = _config.tables.length === 0 ? _menu.tables : _config.tables

    let _source = fromJS(SearchItems).toJS()
    if (!!this.props.editTab) {
      _source.push({
        type: 'form',
        label: this.state.dict['header.form.linkMain'],
        subType: 'linkMain',
        url: ''
      })
    }
    
    _config = updateForm(_config)

    this.setState({
      openEdition: editAction.open_edition || '',
      menu: _menu,
      source: _source,
      config: _config,
      originConfig: fromJS(_config).toJS(),
      modalformlist: [
        {
          type: 'text',
          key: 'supMenu',
          label: this.state.dict['model.super'] + this.state.dict['model.menu'],
          label: '上级菜单',
          initVal: _menu.MenuName,
          required: true,
          readonly: true
@@ -134,6 +121,37 @@
    })
  }

  componentDidMount() {
    window.GLOB.formId = ''

    document.onkeydown = (event) => {
      let e = event || window.event
      let keyCode = e.keyCode || e.which || e.charCode
      let preKey = ''

      if (e.ctrlKey) {
        preKey = 'ctrl'
      }
      if (e.shiftKey) {
        preKey = 'shift'
      } else if (e.altKey) {
        preKey = 'alt'
      }
      
      if (!preKey || !keyCode) return
      
      let _shortcut = `${preKey}+${keyCode}`

      if (_shortcut === 'ctrl+83') {
        let node = document.getElementById('save-config')
        if (node && node.click) {
          node.click()
        }
        return false
      }
    }
  }

  /**
   * @description 组件销毁，清除state更新
   */
@@ -141,6 +159,7 @@
    this.setState = () => {
      return
    }
    document.onkeydown = () => {}
  }

  // 页面返回
@@ -197,183 +216,55 @@
  handleForm = (_card) => {
    const { menu, tabConfig, subTabConfig } = this.props
    const { config } = this.state
    
    let card = fromJS(_card).toJS()
    let _inputfields = []
    let _tabfields = []
    let _linkableFields = []
    let _linksupFields = [{
      value: '',
      text: '空'
    }]
    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
    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)

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

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

    let columns = []
    if (subTabConfig) {
      subTabConfig.columns.forEach(col => {
        if (col.field && !uniq.has(col.field)) {
          uniq.set(col.field, true)

          _linkableFields.push({
            value: col.field,
            text: col.label + ' (显示列)'
          })
        }
      })
      columns = subTabConfig.columns
    } else if (tabConfig) {
      tabConfig.columns.forEach(col => {
        if (col.field && !uniq.has(col.field)) {
          uniq.set(col.field, true)

          _linkableFields.push({
            value: col.field,
            text: col.label + ' (显示列)'
          })
        }
      })
      columns = tabConfig.columns
    } else if (menu.LongParam) {
      menu.LongParam.columns.forEach(col => {
        if (col.field && !uniq.has(col.field)) {
          uniq.set(col.field, true)

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

    if (card.linkSubField && card.linkSubField.length > 0) {
      let fields = _inputfields.map(item => item.field)
      card.linkSubField = card.linkSubField.filter(item => fields.includes(item))
    }

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

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

  /**
   * @description 编辑后提交
   * 1、获取编辑后的表单信息
   * 2、去除可能存在的示例表单
   * 3、通过loading刷新
   */
  handleSubmit = () => {
    this.formRef.handleConfirm().then(res => {
      let _config = fromJS(this.state.config).toJS()
      let fieldrepet = false // 字段重复
      let labelrepet = false // 提示文字重复
    let _config = fromJS(this.state.config).toJS()

    this.formRef.handleConfirm(_config.fields).then(res => {
      _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
        if (item.uuid === res.values.uuid) {
          return res.values
        } else {
          return item
        }
      })

      if (fieldrepet) {
        notification.warning({
          top: 92,
          message: '字段已存在！',
          duration: 10
        })
        return
      } else if (labelrepet) {
        notification.warning({
          top: 92,
          message: '名称已存在！',
          duration: 10
        })
        return
      }

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

      if ((res.type === 'select' || res.type === 'multiselect' || res.type === 'link') && res.resourceType === '1' && /\s/.test(res.dataSource)) {
      if (res.loading) {
        this.setState({
          sqlVerifing: true
        })

        let param = {
          func: 's_debug_sql',
          exec_type: 'y',
          LText: res.dataSource
        }

        param.LText = param.LText.replace(/@\$|\$@/ig, '')
        
        param.LText = Utils.formatOptions(param.LText)
        param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
        param.secretkey = Utils.encrypt('', param.timestamp)

        if (window.GLOB.mainSystemApi && res.database === 'sso') {
          param.rduri = window.GLOB.mainSystemApi
        }
        
        Api.getLocalConfig(param).then(result => {
          if (result.status) {
            this.setState({
              sqlVerifing: false,
              config: _config,
              card: null,
              visible: false
            })
          } else {
            this.setState({sqlVerifing: false})
            
            Modal.error({
              title: result.message
            })
          }
        res.promise().then(() => {
          this.setState({
            sqlVerifing: false,
            config: _config,
            card: null,
            visible: false
          })
        }, () => {
          this.setState({sqlVerifing: false})
        })
      } else {
        this.setState({
@@ -405,110 +296,110 @@
    })
  }

  submitConfig = () => {
    const { editAction } = this.props
    const { config, menu, openEdition } = this.state
  // submitConfig = () => {
  //   const { editAction } = this.props
  //   const { config, menu, openEdition } = this.state

    if (config.fields[0] && config.fields[0].origin) {
      notification.warning({
        top: 92,
        message: '请添加表单',
        duration: 10
      })
      return
    }
  //   if (config.fields[0] && config.fields[0].origin) {
  //     notification.warning({
  //       top: 92,
  //       message: '请添加表单',
  //       duration: 10
  //     })
  //     return
  //   }

    let _LongParam = ''
    let _config = fromJS(config).toJS()
  //   let _LongParam = ''
  //   let _config = fromJS(config).toJS()

    try {
      _LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_config)))
    } catch (e) {
      notification.warning({
        top: 92,
        message: '编译错误',
        duration: 10
      })
      return
    }
  //   try {
  //     _LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_config)))
  //   } catch (e) {
  //     notification.warning({
  //       top: 92,
  //       message: '编译错误',
  //       duration: 10
  //     })
  //     return
  //   }

    let param = {
      func: 'sPC_ButtonParam_AddUpt',
      ParentID: menu.MenuID,
      MenuID: editAction.uuid,
      MenuNo: menu.MenuNo,
      Template: 'Modal',
      MenuName: editAction.label,
      PageParam: JSON.stringify({Template: 'Modal'}),
      LongParam: _LongParam
    }
  //   let param = {
  //     func: 'sPC_ButtonParam_AddUpt',
  //     ParentID: menu.MenuID,
  //     MenuID: editAction.uuid,
  //     MenuNo: menu.MenuNo,
  //     Template: 'Modal',
  //     MenuName: editAction.label,
  //     PageParam: JSON.stringify({Template: 'Modal'}),
  //     LongParam: _LongParam
  //   }

    if (openEdition) {
      param.open_edition = openEdition
    }
  //   if (openEdition) {
  //     param.open_edition = openEdition
  //   }

    if (this.state.closeVisible) {
      this.setState({
        closeloading: true
      })
    } else {
      this.setState({
        menuloading: true
      })
    }
  //   if (this.state.closeVisible) {
  //     this.setState({
  //       closeloading: true
  //     })
  //   } else {
  //     this.setState({
  //       menuloading: true
  //     })
  //   }

    Api.getSystemConfig(param).then(response => {
      if (response.status) {
        this.setState({
          openEdition: response.open_edition || '',
          menuloading: false,
          closeloading: false,
          closeVisible: false,
          originConfig: _config,
          config: _config
        })
        notification.success({
          top: 92,
          message: '保存成功',
          duration: 2
        })
      } else {
        this.setState({
          closeloading: false,
          menuloading: false
        })
        notification.warning({
          top: 92,
          message: response.message,
          duration: 10
        })
      }
    })
  }
  //   Api.getCloudConfig(param).then(response => {
  //     if (response.status) {
  //       this.setState({
  //         openEdition: response.open_edition || '',
  //         menuloading: false,
  //         closeloading: false,
  //         closeVisible: false,
  //         originConfig: _config,
  //         config: _config
  //       })
  //       notification.success({
  //         top: 92,
  //         message: '保存成功',
  //         duration: 2
  //       })
  //     } else {
  //       this.setState({
  //         closeloading: false,
  //         menuloading: false
  //       })
  //       notification.warning({
  //         top: 92,
  //         message: response.message,
  //         duration: 10
  //       })
  //     }
  //   })
  // }

  cancelConfig = () => {
    const { config, originConfig } = this.state
    let _this = this
    // const { config, originConfig } = this.state
    // let _this = this

    let isOrigin = config.fields.filter(item => item.origin).length > 0
    if (isOrigin) {
      confirm({
        content: '尚未提交，确定放弃保存吗？',
        onOk() {
          _this.handleViewBack()
        },
        onCancel() {}
      })
    } else {

      if (!is(fromJS(config), fromJS(originConfig))) {
        this.setState({
          closeVisible: true
        })
      } else {
        this.handleViewBack()
      }
    }
    // let isOrigin = config.fields.filter(item => item.origin).length > 0
    // if (isOrigin) {
    //   confirm({
    //     content: '尚未提交，确定放弃保存吗？',
    //     onOk() {
    //       _this.handleViewBack()
    //     },
    //     onCancel() {}
    //   })
    // } else {
    //   if (!is(fromJS(config), fromJS(originConfig))) {
    //     this.setState({
    //       closeVisible: true
    //     })
    //   } else {
    //     this.handleViewBack()
    //   }
    // }
    this.handleViewBack()
  }

  /**
@@ -550,18 +441,6 @@
        card: null,
        visible: false
      })
    }
  }

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

@@ -608,19 +487,101 @@
    })
  }

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

    Api.getCloudConfig(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 } = this.state

    if (!config) return null
    
    return (
      <div className="modal-form-board">
        <DndProvider backend={HTML5Backend}>
          <div className="tools">
            <Collapse accordion defaultActiveKey="1" bordered={false}>
              <Panel forceRender={true} header={dict['header.menu.basedata']} key="0" id="modal-basedata">
                <MenuForm
                  dict={dict}
                  formlist={this.state.modalformlist}
                />
              <Panel forceRender={true} header="基本信息" key="0" id="modal-basedata">
                <MenuForm formlist={this.state.modalformlist}/>
                {/* 表名添加 */}
                <TableComponent
                  config={config}
@@ -628,37 +589,36 @@
                  updatetable={this.updateconfig}
                />
              </Panel>
              <Panel header={dict['header.menu.form']} key="1">
              <Panel header="表单" key="1">
                <div className="search-element">
                  {source.map((item, index) => {
                  {SearchItems.map((item, index) => {
                    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>
                <EditComponent dict={dict} options={['form']} config={this.state.config} refresh={this.updateEditConfig}/>
                <Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{dict['model.save']}</Button>
                <Button onClick={this.cancelConfig}>{dict['model.back']}</Button>
                {/* <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 options={['form']} type="formboard" config={this.state.config} plusFields={this.plusFields}/> */}
                {/* <Button type="primary" id="save-config" onClick={this.submitConfig} loading={this.state.menuloading}>保存</Button> */}
                <Button onClick={this.cancelConfig}>返回</Button>
              </div>
            } style={{ width: '100%' }}>
              <Icon type="setting" onClick={this.changeSetting} />
              <div className="ant-modal-content" style={{width: config.setting.width + '%'}}>
              <SettingOutlined onClick={this.changeSetting} />
              <div className="ant-modal-content" style={{width: config.setting.width > 100 ? config.setting.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})} />
                  <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} />
                </div>
                <div className="ant-modal-body">
                  <div className="modal-form">
@@ -666,7 +626,6 @@
                      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}
@@ -676,10 +635,10 @@
                <div className="ant-modal-footer">
                  <div>
                    <button type="button" className="ant-btn">
                      <span>{dict['model.cancel']}</span>
                      <span>取消</span>
                    </button>
                    <button type="button" className="ant-btn ant-btn-primary">
                      <span>{dict['model.confirm']}</span>
                      <span>确定</span>
                    </button>
                  </div>
                  <div className="action-mask"></div>
@@ -689,9 +648,9 @@
          </div>
        </DndProvider>
        <Modal
          title={dict['model.edit']}
          title="编辑"
          visible={this.state.visible}
          width={850}
          width={950}
          maskClosable={false}
          onCancel={this.editModalCancel}
          onOk={this.handleSubmit}
@@ -699,18 +658,17 @@
          destroyOnClose
        >
          <ModalForm
            dict={dict}
            card={this.state.card}
            formlist={this.state.formlist}
            inputSubmit={this.handleSubmit}
            standardform={this.state.standardform}
            fields={config.fields}
            wrappedComponentRef={(inst) => this.formRef = inst}
          />
        </Modal>
        <Modal
          title={dict['model.edit']}
          title="编辑"
          visible={this.state.settingVisible}
          width={850}
          width={900}
          maskClosable={false}
          onOk={this.settingSave}
          onCancel={() => { this.setState({ settingVisible: false }) }}
@@ -718,38 +676,30 @@
        >
          <SettingForm
            config={config}
            dict={dict}
            isSubTab={!!this.props.editTab}
            inputSubmit={this.settingSave}
            wrappedComponentRef={(inst) => this.settingRef = inst}
          />
        </Modal>
        <Modal
        {/* <Modal
          bodyStyle={{textAlign: 'center', color: '#000000', fontSize: '16px'}}
          closable={false}
          maskClosable={false}
          visible={this.state.closeVisible}
          onCancel={() => { this.setState({closeVisible: false}) }}
          footer={[
            <Button key="save" className="mk-btn mk-green" loading={this.state.closeloading} onClick={this.submitConfig}>{dict['model.save']}</Button>,
            <Button key="confirm" className="mk-btn mk-yellow" onClick={this.handleViewBack}>{dict['model.notsave']}</Button>,
            <Button key="cancel" onClick={() => { this.setState({closeVisible: false}) }}>{dict['model.cancel']}</Button>
            <Button key="save" className="mk-btn mk-green" loading={this.state.closeloading} onClick={this.submitConfig}>保存</Button>,
            <Button key="confirm" className="mk-btn mk-yellow" onClick={this.handleViewBack}>不保存</Button>,
            <Button key="cancel" onClick={() => { this.setState({closeVisible: false}) }}>取消</Button>
          ]}
          destroyOnClose
        >
          {dict['header.menu.config.placeholder']}
        </Modal>
          配置已修改，是否保存配置信息？
        </Modal> */}
        <StyleController />
      </div>
    )
  }
}

const mapStateToProps = () => {
  return {}
}

const mapDispatchToProps = () => {
  return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(ComModalConfig)
export default ComModalConfig