2024-05-23

king

2024-05-23 9a11e62adeb8d435b52a361eb62d5b59e1deef2a

 src/menu/modalconfig/index.jsx

@@ -3,8 +3,8 @@
import { is, fromJS } from 'immutable'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { Button, Card, Modal, Collapse, 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 { getModalForm } from '@/templates/zshare/formconfig'
import SourceElement from '@/templates/modalconfig/dragelement/source'
@@ -21,6 +21,7 @@
const TableComponent = asyncComponent(() => import('./tablecomponent'))
const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform'))
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'))

@@ -97,81 +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 = []

    config.fields.forEach((item, i) => {
      if (!item.field || card.field === item.field) return

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

      if (['switch', 'check', 'popSelect'].includes(item.type)) {
        _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

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

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

    let _fields = _linkableFields.map(cell => cell.field)
    columns.forEach(col => {
      if (col.field && !_fields.includes(col.field)) {
        _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))
    }

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

@@ -451,7 +392,6 @@
          <div className="setting">
            <Card title="表单配置" bordered={false} extra={
              <div>
                <Button type="danger" onClick={this.clearConfig}>清空</Button>
                <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>
@@ -461,13 +401,23 @@
              <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.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>
                  <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>
                  <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">
                    <DragElement