2024-05-23

king

2024-05-23 9a11e62adeb8d435b52a361eb62d5b59e1deef2a

 src/menu/modalconfig/index.jsx

@@ -3,14 +3,10 @@
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, Switch, message } from 'antd'
import { SettingOutlined, CopyOutlined } from '@ant-design/icons'
import { Button, Card, Modal, Collapse, Switch, message, Popover } from 'antd'
import { SettingOutlined, CopyOutlined, SwapOutlined, DeleteOutlined } from '@ant-design/icons'

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

import SourceElement from '@/templates/modalconfig/dragelement/source'
import SettingForm from '@/templates/modalconfig/settingform'
import asyncComponent from '@/utils/asyncComponent'
@@ -20,8 +16,12 @@

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

const MkIcon = asyncComponent(() => import('@/components/mk-icon'))
const TableComponent = asyncComponent(() => import('./tablecomponent'))
const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform'))
const EditComponent = asyncComponent(() => import('@/templates/zshare/editcomponent'))
const PasteForms = asyncComponent(() => import('@/menu/components/share/pasteforms'))
// const FormFork = asyncComponent(() => import('@/menu/modalconfig/formfork'))
const DragElement = asyncComponent(() => import('@/templates/modalconfig/dragelement'))
const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))

@@ -41,7 +41,6 @@
    originConfig: null,    // 原始菜单
    sqlVerifing: false,    // sql验证
    showField: false,      // 显示表单字段值
    standardform: null,
    saving: false
  }

@@ -62,7 +61,6 @@

  componentDidMount () {
    MKEmitter.addListener('completeSave', this.completeSave)
    MKEmitter.addListener('submitStyle', this.getStyle)
  }

  /**
@@ -73,7 +71,6 @@
      return
    }
    MKEmitter.removeListener('completeSave', this.completeSave)
    MKEmitter.removeListener('submitStyle', this.getStyle)
  }

  /**
@@ -101,124 +98,21 @@

  /**
   * @description 表单编辑
   * 1、显示编辑弹窗-visible
   * 2、保存编辑项-card
   * 3、设置编辑参数项-formlist
   */
  handleForm = (_card) => {
    const { componentConfig, btn } = 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)

    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: item.label
        })
      }
      if (card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) {
        _tabfields.push({
          field: item.field,
          label: item.label
        })
      }

      if (item.type === 'switch') {
        _linksupFields.push({
          field: item.field,
          label: item.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: item.label + '-表单'
        })
        _linksupFields.push({
          field: item.field,
          label: item.label
        })
      }
    })
    if (index !== null) {
      if (index === 0) {
        standardform = config.fields[index + 1] || null
      } else {
        standardform = config.fields[index - 1] || null
      }
    }

    let columns = componentConfig.columns
    if (btn.$sub) {
      columns = componentConfig.subColumns || []
    }

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

        _linkableFields.push({
          field: col.field,
          label: 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
    } else if (!card.span) {
      card.span = 12
      card.labelwidth = 33.3
    }

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

  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
      formlist: getModalForm(card, config.fields, columns)
    })
  }

@@ -229,72 +123,33 @@
   * 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
        }
        delete item.focus

        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
      }

      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({
@@ -456,44 +311,8 @@
    })
  }

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

    if (type === 'forms') {
      if (_config.fields.length > 0) {
        let that = this
        _config.fields = items.fields.map(item => {
          item.uuid = Utils.getuuid()
          return item
        })

        confirm({
          title: '确定替换表单吗？',
          content: '原表单将删除。',
          onOk() {
            that.setState({
              config: _config
            })
          },
          onCancel() {}
        })
      } else {
        _config.fields = items.fields.map(item => {
          item.uuid = Utils.getuuid()
          return item
        })

        this.setState({
          config: _config
        })
        notification.success({
          top: 92,
          message: '粘贴成功！',
          duration: 2
        })
      }
      return
    }

    _config.fields.push(...items)

@@ -503,6 +322,15 @@
      if (items.length === 1 && items[0].focus) {
        this.handleForm(items[0])
      }
    })
  }

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

    this.setState({
      config: _config
    })
  }

@@ -541,13 +369,16 @@

  render () {
    const { btn } = this.props
    const { config, saving } = this.state
    const { config, saving, card } = this.state

    return (
      <div className="modal-form-board">
        <DndProvider backend={HTML5Backend}>
          <div className="tools">
            <Collapse accordion defaultActiveKey="1" bordered={false}>
              <Panel header="基本信息" key="0">
                <TableComponent />
              </Panel>
              <Panel header="表单" key="1">
                <div className="search-element">
                  {SearchItems.map((item, index) => {
@@ -561,8 +392,7 @@
          <div className="setting">
            <Card title="表单配置" bordered={false} extra={
              <div>
                <Button type="danger" onClick={this.clearConfig}>清空</Button>
                <EditComponent options={['form', 'forms']} type="formboard" config={this.state.config} plusFields={this.plusFields}/>
                <PasteForms type="toolbar" config={config} update={this.pasteFields}/>
                <Button type="primary" id="save-modal-config" loading={saving} onClick={this.submitConfig}>保存</Button>
                <Button onClick={this.cancelConfig}>返回</Button>
              </div>
@@ -570,13 +400,23 @@
              <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">{btn.label}</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>
                  <CopyOutlined title="复制" onClick={this.triggerCopy} />
                  <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} />
                  <div className="ant-modal-title">{config.setting.icon ? <span className={'mk-modal-icon-' + config.setting.iconType} style={{background: config.setting.iconColor || 'unset', color: config.setting.iconColor || 'inherit'}}><MkIcon type={config.setting.icon}/></span> : null}{btn.label}</div>
                  <div className="mk-form-tool">
                    <DeleteOutlined title="清空" onClick={this.clearConfig} />
                    <Popover title="切换布局" overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
                      <>
                        <Button style={{marginRight: '10px'}} onClick={() => this.changecols(1)}>1列</Button>
                        <Button style={{marginRight: '10px'}} onClick={() => this.changecols(2)}>2列</Button>
                        <Button style={{marginRight: '10px'}} onClick={() => this.changecols(3)}>3列</Button>
                        <Button onClick={() => this.changecols(4)}>4列</Button>
                      </>
                    } trigger="hover">
                      <SwapOutlined />
                    </Popover>
                    {/* <FormFork forms={config.fields}/> */}
                    <CopyOutlined title="复制" onClick={this.triggerCopy} />
                    <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} />
                  </div>
                </div>
                <div className="ant-modal-body">
                  <div className="modal-form">
@@ -606,7 +446,8 @@
          </div>
        </DndProvider>
        <Modal
          title="编辑"
          title={card && card.$copy ? '复制' : '编辑'}
          wrapClassName="mk-scroll-modal"
          visible={this.state.visible}
          width={950}
          maskClosable={false}
@@ -616,10 +457,10 @@
          destroyOnClose
        >
          <ModalForm
            card={this.state.card}
            card={card}
            formlist={this.state.formlist}
            inputSubmit={this.handleSubmit}
            standardform={this.state.standardform}
            fields={config.fields}
            wrappedComponentRef={(inst) => this.formRef = inst}
          />
        </Modal>