2024-05-23

king

2024-05-23 9a11e62adeb8d435b52a361eb62d5b59e1deef2a

 src/templates/modalconfig/index.jsx

@@ -1,33 +1,29 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
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, Switch } from 'antd'
import { SettingOutlined } from '@ant-design/icons'

import Api from '@/api'
import Utils from '@/utils/utils.js'
import { getModalForm } from '@/templates/zshare/formconfig'

import SourceElement from './dragelement/source'
import SettingForm from './settingform'
import MenuForm from './menuform'
import asyncComponent from '@/utils/asyncComponent'
import { BaseConfig, SearchItems } from './source'
import { updateForm } from '@/utils/utils-update.js'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const { Panel } = Collapse
const { confirm } = Modal

const Versions = asyncComponent(() => import('@/menu/versions'))
const ReplaceField = asyncComponent(() => import('@/menu/replaceField'))
// 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 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'))
@@ -126,7 +122,8 @@
  }

  componentDidMount() {
    MKEmitter.addListener('submitStyle', this.getStyle)
    window.GLOB.formId = ''

    document.onkeydown = (event) => {
      let e = event || window.event
      let keyCode = e.keyCode || e.which || e.charCode
@@ -159,7 +156,6 @@
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    MKEmitter.removeListener('submitStyle', this.getStyle)
    this.setState = () => {
      return
    }
@@ -186,24 +182,6 @@
    }

    this.props.handleView(param)
  }

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

  /**
@@ -238,213 +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 = []
    let standardform = null

    let uniq = new Map()
    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({
          field: item.field,
          label: _linkIndex + '、' + item.label + ' (表单)'
        })
        _linksupFields.push({
          field: item.field,
          label: _linkIndex + '、' + label
        })
        _linkIndex++
      }
    })

    _tabfields.unshift({field: '', 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({
            field: col.field,
            label: _linkIndex + '、' + col.label + ' (显示列)'
          })
          _linkIndex++
        }
      })
      columns = subTabConfig.columns
    } else if (tabConfig) {
      tabConfig.columns.forEach(col => {
        if (col.field && !uniq.has(col.field)) {
          uniq.set(col.field, true)

          _linkableFields.push({
            field: col.field,
            label: _linkIndex + '、' + col.label + ' (显示列)'
          })
          _linkIndex++
        }
      })
      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({
            field: col.field,
            label: _linkIndex + '、' + col.label + ' (显示列)'
          })
          _linkIndex++
        }
      })
    }

    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
    } else if (!card.span) {
      card.span = 12
      card.labelwidth = 33.3
      columns = menu.LongParam.columns
    }

    this.setState({
      standardform,
      visible: true,
      card: card,
      formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields)
      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 _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
        }

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

      if (fieldrepet) {
        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)) {
      if (res.loading) {
        this.setState({
          sqlVerifing: true
        })

        let param = {
          func: 's_debug_sql',
          exec_type: 'y',
          LText: `declare @mk_organization nvarchar(512)
            ${res.dataSource}`
        }

        param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
        param.LText = param.LText.replace(/@\$|\$@/ig, '').replace(/@(BID|ID|LoginUID|SessionUid|UserID|Appkey|time_id)@/ig, `'${param.timestamp}'`)
        param.LText = param.LText.replace(/\n/g, ' ')
        
        param.LText = Utils.formatOptions(param.LText)
        param.secretkey = Utils.encrypt('', param.timestamp)

        if (window.GLOB.mainSystemApi && res.database === 'sso') {
          param.rduri = window.GLOB.mainSystemApi
        }
        
        Api.genericInterface(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({
@@ -476,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()
  }

  /**
@@ -675,7 +495,7 @@
      MenuID: editAction.uuid
    }

    Api.getSystemConfig(param).then(res => {
    Api.getCloudConfig(param).then(res => {
      if (res.status) {
        let _config = ''
        if (res.LongParam) {
@@ -749,10 +569,9 @@
    })
  }


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

    if (!config) return null
    
@@ -783,11 +602,11 @@
          <div className="setting">
            <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 options={['form']} config={this.state.config} plusFields={this.plusFields}/>
                <Button type="primary" id="save-config" onClick={this.submitConfig} loading={this.state.menuloading}>保存</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%' }}>
@@ -842,7 +661,7 @@
            card={this.state.card}
            formlist={this.state.formlist}
            inputSubmit={this.handleSubmit}
            standardform={this.state.standardform}
            fields={config.fields}
            wrappedComponentRef={(inst) => this.formRef = inst}
          />
        </Modal>
@@ -862,7 +681,7 @@
            wrappedComponentRef={(inst) => this.settingRef = inst}
          />
        </Modal>
        <Modal
        {/* <Modal
          bodyStyle={{textAlign: 'center', color: '#000000', fontSize: '16px'}}
          closable={false}
          maskClosable={false}
@@ -876,7 +695,7 @@
          destroyOnClose
        >
          配置已修改，是否保存配置信息？
        </Modal>
        </Modal> */}
        <StyleController />
      </div>
    )