2023-07-16

king

2023-07-16 1f5c6ac307a134dfa45b64c5723f2481ead9f213

 src/templates/modalconfig/index.jsx

@@ -1,16 +1,14 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, 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 SourceElement from './dragelement/source'
@@ -19,14 +17,15 @@
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 CommonDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS

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'))
@@ -49,7 +48,6 @@

  state = {
    menu: null,            // 上级菜单，三级菜单或标签
    dict: CommonDict,      // 字典
    config: null,          // 页面配置，包括模板类型、模态框设置、添加表名、表单列表
    visible: false,        // 表单编辑模态框，显示控制
    modalformlist: null,   // 基本信息表单字段
@@ -110,7 +108,7 @@
        {
          type: 'text',
          key: 'supMenu',
          label: this.state.dict['model.super'] + this.state.dict['model.menu'],
          label: '上级菜单',
          initVal: _menu.MenuName,
          required: true,
          readonly: true
@@ -127,13 +125,46 @@
    })
  }

  componentDidMount() {
    window.GLOB.formId = ''
    MKEmitter.addListener('submitStyle', this.getStyle)
    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更新
   */
  componentWillUnmount () {
    MKEmitter.removeListener('submitStyle', this.getStyle)
    this.setState = () => {
      return
    }
    document.onkeydown = () => {}
  }

  // 页面返回
@@ -156,6 +187,24 @@
    }

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

  /**
@@ -194,56 +243,58 @@
    let _inputfields = []
    let _tabfields = []
    let _linkableFields = []
    let _linksupFields = [{
      field: '',
      label: '空'
    }]
    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
      }

      if (!item.field) return

      if (['text', 'number', 'textarea', 'color'].includes(item.type) && card.field !== item.field) {
        _inputfields.push({
          field: item.field,
          label: _inputIndex + '、' + item.label
          label: 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
          label: item.label
        })
        _tabIndex++
      }

      if (!['select', 'link', 'radio', ''].includes(item.type)) return
      if (item.field && !uniq.has(item.field)) {
      if (item.type === 'switch' || item.type === 'check') {
        _linksupFields.push({
          field: item.field,
          label: item.label
        })
      }

      if (!['select', 'link', 'radio', 'checkcard', 'multiselect'].includes(item.type)) return

      _linksupFields.push({
        field: item.field,
        label: item.label
      })

      if (item.type === 'multiselect' || (item.type === 'checkcard' && item.multiple === 'true')) return

      if (!uniq.has(item.field)) {
        uniq.set(item.field, true)

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

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

    if (index !== null) {
      if (index === 0) {
@@ -260,9 +311,8 @@

          _linkableFields.push({
            field: col.field,
            label: _linkIndex + '、' + col.label + ' (显示列)'
            label: col.label + '-显示列'
          })
          _linkIndex++
        }
      })
    } else if (tabConfig) {
@@ -272,9 +322,8 @@

          _linkableFields.push({
            field: col.field,
            label: _linkIndex + '、' + col.label + ' (显示列)'
            label: col.label + '-显示列'
          })
          _linkIndex++
        }
      })
    } else if (menu.LongParam) {
@@ -284,9 +333,8 @@

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

    this.setState({
@@ -326,6 +377,9 @@
        }

        if (item.uuid === res.uuid) {
          if (item.style) {
            res.style = item.style
          }
          return res
        } else {
          return item
@@ -343,6 +397,8 @@

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

      window.GLOB.formId = res.uuid

      if (['select', 'multiselect', 'link', 'checkbox', 'radio', 'checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) {
        this.setState({
          sqlVerifing: true
@@ -351,20 +407,22 @@
        let param = {
          func: 's_debug_sql',
          exec_type: 'y',
          LText: res.dataSource
          LText: `declare @mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20)
            ${res.dataSource}`
        }

        param.LText = param.LText.replace(/@\$|\$@/ig, '')
        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.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 => {
        Api.genericInterface(param).then(result => {
          if (result.status) {
            this.setState({
              sqlVerifing: false,
@@ -683,10 +741,9 @@
    })
  }


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

    if (!config) return null
    
@@ -695,11 +752,8 @@
        <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}
@@ -707,7 +761,7 @@
                  updatetable={this.updateconfig}
                />
              </Panel>
              <Panel header={dict['header.menu.form']} key="1">
              <Panel header="表单" key="1">
                <div className="search-element">
                  {SearchItems.map((item, index) => {
                    return (<SourceElement key={index} content={item}/>)
@@ -723,20 +777,20 @@
                <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} 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>
                <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">
@@ -744,7 +798,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}
@@ -754,10 +807,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>
@@ -767,9 +820,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}
@@ -777,7 +830,6 @@
          destroyOnClose
        >
          <ModalForm
            dict={dict}
            card={this.state.card}
            formlist={this.state.formlist}
            inputSubmit={this.handleSubmit}
@@ -786,7 +838,7 @@
          />
        </Modal>
        <Modal
          title={dict['model.edit']}
          title="编辑"
          visible={this.state.settingVisible}
          width={900}
          maskClosable={false}
@@ -808,25 +860,18 @@
          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>
        <StyleController />
      </div>
    )
  }
}

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

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

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