2020-01-16

king

2020-01-16 1a67732f77de8afd138b6e75235edcc4c0e9a166

 src/templates/formtabconfig/index.jsx

@@ -4,23 +4,26 @@
import { is, fromJS } from 'immutable'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { Button, Card, Modal, Collapse, notification, Spin, Select, List, Icon, Empty, Switch, Tooltip } from 'antd'
import moment from 'moment'
import ActionForm from './actionform'
import SettingForm from './settingform'
import TabForm from './tabform'
import TabDragElement from './tabdragelement'
import { Button, Card, Modal, Collapse, notification, Spin, Select, List, Icon, Empty, Switch, Tooltip } from 'antd'

import Api from '@/api'
import SearchForm from './modalform'
import DragElement from './dragelement'
import GroupForm from './groupform'
import EditCard from '@/templates/tableshare/editcard'
import VerifyCard from '@/templates/tableshare/verifycard'
import MenuForm from '@/templates/tableshare/menuform'
import SourceElement from '@/templates/tableshare/dragelement/source'
import zhCN from '@/locales/zh-CN/comtable.js'
import enUS from '@/locales/en-US/comtable.js'
import Utils from '@/utils/utils.js'
import { getModalForm, getActionForm } from '@/templates/tableshare/formconfig'

import ActionForm from './actionform'
import SettingForm from './settingform'
import ModalForm from './modalform'
import DragElement from './dragelement'
import GroupForm from './groupform'
import TabForm from '@/templates/tableshare/tabform'
import EditCard from '@/templates/tableshare/editcard'
import VerifyCard from '@/templates/tableshare/verifycard'
import MenuForm from '@/templates/tableshare/menuform'
import TabDragElement from '@/templates/tableshare/tabdragelement'
import SourceElement from '@/templates/tableshare/dragelement/source'
import Source from './source'
import './index.scss'

@@ -41,18 +44,13 @@
  state = {
    dict: CommonDict,        // 字典
    config: null,            // 页面配置
    visible: false,          // 搜索条件、按钮、显示列，模态框显示控制
    modalTitle: '',          // 模态框的标题
    modaltype: '',           // 模态框类型，控制模态框显示
    tableVisible: false,     // 数据表字段模态框
    tableColumns: [],        // 表格显示列
    fields: null,            // 搜索条件及显示列，可选字段
    menuformlist: null,      // 基本信息表单字段
    formlist: null,          // 搜索条件、按钮、显示列表单字段
    formtemp: '',            // 表单类型，显示列、按钮、搜索条件
    card: null,              // 编辑元素
    searchloading: false,    // 搜索条件加载中
    actionloading: false,    // 按钮加载中
    tabloading: false,       // 标签页加载中
    menuloading: false,      // 菜单保存中
    menucloseloading: false, // 菜单关闭时，选择保存
    loading: false,          // 加载中，页面spin
@@ -78,21 +76,18 @@
    const { menu, editAction, config } = this.props
    console.log(menu)
    let _config = ''
    let _originMenu = ''

    if (!config) {
      _config = JSON.parse(JSON.stringify(Source.baseConfig))
    } else {
      _config = config
      _originMenu = JSON.parse(JSON.stringify(_config))
    }
    
    // _config.action = _config.action.map(item => {
    //   item.uuid = Utils.getuuid()
    //   return item
    // })

    this.setState({
      config: _config,
      originMenu: JSON.parse(JSON.stringify(menu)),
      originMenu: _originMenu,
      selectedTables: _config.tables,
      menuformlist: [
        {
@@ -239,92 +234,79 @@
  }

  handleList = (type, list, card, groupId, elementId) => {
    let config = JSON.parse(JSON.stringify(this.state.config))
    const { config } = this.state

    if (type === 'tabs') { // 标签页调整顺序或添加元素
      if (list.length > config[card.groupId].length) {
        list = list.filter(item => !item.origin)
  
        this.setState({
          tabloading: true,
          config: {...config, [card.groupId]: list }
        }, () => {
          // 刷新对应的配置信息
          this.setState({
            tabloading: false
          })
          this.handleTab(card)
        })
      } else {
        this.setState({config: {...config, [card.groupId]: list}})

        this.handleTab(card)
      }

      this.setState({config: {...config, [card.groupId]: list}})
    } else if (type === 'action') {
      if (list.length > config.action.length) {
        list = list.filter(item => !item.origin)
  
        this.setState({
          actionloading: true,
          config: {...config, action: list }
        }, () => {
          // 刷新对应的配置信息
          this.setState({
            actionloading: false
          })
  
          this.handleAction(card)
        })
      } else {
        this.setState({config: {...config, action: list}})
        this.handleAction(card)
      }
    } else if (type === 'search') {
      let _group = config.groups.filter(group => group.uuid === groupId)[0]
      let isChange = elementId && list.length > _group.sublist.length
      let isAdd = !elementId && list.length > _group.sublist.length

      if (isAdd) {
        _group.sublist = list.filter(item => !item.origin)
        this.handleSearch(card)
      } else if (isChange) {
        // 修改已有元素的分组
        let element = null
        config.groups.forEach(item => {
          item.sublist = item.sublist.filter(cell => {
            if (cell.uuid !== elementId) {
              return true
      this.setState({config: {...config, action: list}})
    } else if (type === 'search') {
      let _groups = null

      if (card) {
        // 元素添加
        if (config.groups.length === 1) {
          _groups = config.groups.map(group => {
            let _list = list.filter(item => !item.origin)
            return {...group, sublist: _list}
          })
        } else {
          _groups = config.groups.map(group => {
            if (group.uuid === groupId) {
              return {...group, sublist: list}
            } else {
              element = cell
              return false
              return group
            }
          })
        })
        _group.sublist.push(element)
      } else {
        _group.sublist = list
      }

      config.groups = config.groups.map(item => {
        if (item.uuid === _group.uuid) {
          return _group
        } else {
          return item
        }
      })

      if (isChange) {
        this.setState({
          searchloading: true,
          config: config
        }, () => {
          // 刷新对应的配置信息
          this.setState({
            searchloading: false
        this.handleSearch(card)
      } else if (elementId) {
        // 修改已有元素的分组
        let element = null
        _groups = config.groups.map(group => {
          group.sublist = group.sublist.filter(item => {
            if (item.uuid === elementId) {
              element = item
              return false
            } else {
              return true
            }
          })
          return group
        })

        _groups = _groups.map(group => {
          if (group.uuid === groupId) {
            group.sublist.push(element)
          }
          return group
        })
      } else {
        this.setState({
          config: config
        // 元素移动
        _groups = config.groups.map(group => {
          if (group.uuid === groupId) {
            return {...group, sublist: list}
          } else {
            return group
          }
        })
      }

      this.setState({
        config: {...config, groups: _groups}
      })
    }
  }

@@ -344,399 +326,23 @@
    }

    this.setState({
      visible: true,
      formtemp: 'search',
      modalTitle: '编辑-表单',
      modaltype: 'search',
      card: card,
      formlist: [
        {
          type: 'text',
          key: 'label',
          label: this.state.dict['header.form.name'],
          initVal: card.label,
          required: true,
          readonly: false
        },
        {
          type: 'text',
          key: 'field',
          label: this.state.dict['header.form.field'],
          initVal: card.field,
          required: true,
          readonly: false
        },
        {
          type: 'select',
          key: 'type',
          label: this.state.dict['header.form.type'],
          initVal: card.type,
          required: true,
          options: [{
            value: 'text',
            text: this.state.dict['header.form.text']
          }, {
            value: 'number',
            text: this.state.dict['header.form.number']
          }, {
            value: 'select',
            text: this.state.dict['header.form.select']
          }, {
            value: 'multiselect',
            text: this.state.dict['header.form.multiselect']
          }, {
            value: 'link',
            text: this.state.dict['header.form.link']
          }, {
            value: 'fileupload',
            text: this.state.dict['header.form.fileupload']
          }, {
            value: 'date',
            text: this.state.dict['header.form.dateday']
          }, {
            value: 'datemonth',
            text: this.state.dict['header.form.datemonth']
          }, {
            value: 'datetime',
            text: this.state.dict['header.form.datetime']
          }, {
            value: 'textarea',
            text: this.state.dict['header.form.textarea']
          }]
        },
        {
          type: 'text',
          key: 'initval',
          label: this.state.dict['header.form.initval'],
          initVal: card.initval,
          required: false
        },
        {
          type: 'radio',
          key: 'resourceType',
          label: this.state.dict['header.form.resourceType'],
          initVal: card.resourceType || '0',
          required: true,
          options: [{
            value: '0',
            text: this.state.dict['header.form.custom']
          }, {
            value: '1',
            text: this.state.dict['header.form.datasource']
          }]
        },
        {
          type: 'radio',
          key: 'setAll',
          label: this.state.dict['header.form.setAll'],
          initVal: card.setAll || 'false',
          options: [{
            value: 'true',
            text: this.state.dict['header.form.true']
          }, {
            value: 'false',
            text: this.state.dict['header.form.false']
          }]
        },
        {
          type: 'textarea',
          key: 'dataSource',
          label: this.state.dict['header.form.datasource'],
          initVal: card.dataSource || '',
          required: true,
          readonly: false
        },
        {
          type: 'options',
          key: 'options',
          label: '',
          initVal: card.options || [],
          required: true,
          readonly: false
        },
        {
          type: 'text',
          key: 'linkField',
          label: this.state.dict['header.form.linkField'],
          initVal: card.linkField || '',
          required: true,
          readonly: false
        },
        {
          type: 'text',
          key: 'valueField',
          label: this.state.dict['header.form.valueField'],
          initVal: card.valueField || '',
          required: true,
          readonly: false
        },
        {
          type: 'text',
          key: 'valueText',
          label: this.state.dict['header.form.valueText'],
          initVal: card.valueText || '',
          required: true,
          readonly: false
        },
        {
          type: 'text',
          key: 'orderBy',
          label: this.state.dict['header.form.orderBy'],
          initVal: card.orderBy || '',
          required: false,
          readonly: false
        },
        {
          type: 'select',
          key: 'orderType',
          label: this.state.dict['header.form.orderType'],
          initVal: card.orderType || 'asc',
          options: [{
            value: 'asc',
            text: this.state.dict['header.form.asc']
          }, {
            value: 'desc',
            text: this.state.dict['header.form.desc']
          }]
        },
        {
          type: 'number',
          key: 'decimal',
          label: this.state.dict['header.form.decimal'],
          initVal: card.decimal || 0,
          required: false
        },
        {
          type: 'number',
          key: 'min',
          label: '最小值',
          initVal: card.min || '',
          required: false
        },
        {
          type: 'number',
          key: 'max',
          label: '最大值',
          initVal: card.max || '',
          required: false
        },
        {
          type: 'radio',
          key: 'readonly',
          label: this.state.dict['header.form.readonly'],
          initVal: card.readonly || 'false',
          options: [{
            value: 'true',
            text: this.state.dict['header.form.true']
          }, {
            value: 'false',
            text: this.state.dict['header.form.false']
          }]
        },
        {
          type: 'radio',
          key: 'required',
          label: this.state.dict['header.form.field.required'],
          initVal: card.required || 'false',
          options: [{
            value: 'true',
            text: this.state.dict['header.form.true']
          }, {
            value: 'false',
            text: this.state.dict['header.form.false']
          }]
        },
        {
          type: 'multiselect',
          key: 'linkSubField',
          label: this.state.dict['header.form.linkForm'],
          initVal: card.linkSubField || [],
          options: _inputfields
        }
      ]
      formlist: getModalForm(card, _inputfields)
    })
  }

  handleAction = (card, type) => {
    let ableField = this.props.permFuncField.join(', ')
    let functip = <div>
      <p style={{marginBottom: '5px'}}>{this.state.dict['header.modal.func.innerface'].replace('@ableField', ableField)}</p>
      <p>{this.state.dict['header.modal.func.outface']}</p>
    </div>

    this.setState({
      visible: true,
      formtemp: 'action',
      modalTitle: type === 'copy' ? '复制-按钮' : '编辑-按钮',
      modaltype: type === 'copy' ? 'actionCopy' : 'actionEdit',
      card: card,
      formlist: [
        {
          type: 'text',
          key: 'label',
          label: this.state.dict['header.form.name'],
          initVal: card.label,
          required: true,
          readonly: false
        },
        {
          type: 'select',
          key: 'OpenType',
          label: this.state.dict['header.form.openType'],
          initVal: card.OpenType,
          required: true,
          options: [{
            value: 'prompt',
            text: this.state.dict['header.form.prompt']
          }, {
            value: 'exec',
            text: this.state.dict['header.form.exec']
          }]
        },
        {
          type: 'radio',
          key: 'intertype',
          label: this.state.dict['header.form.intertype'],
          initVal: card.intertype || 'inner',
          required: true,
          options: [{
            value: 'inner',
            text: this.state.dict['header.form.interface.inner']
          }, {
            value: 'outer',
            text: this.state.dict['header.form.interface.outer']
          }]
        },
        {
          type: 'text',
          key: 'innerFunc',
          label: this.state.dict['header.form.innerFunc'],
          initVal: card.innerFunc,
          tooltip: <div>
            <p>内部接口: 可自定义数据处理函数，函数名称需以{ableField}等字符开始；未设置时会调用系统函数，使用系统函数需完善数据源及操作类型;</p>
            <p>外部接口: 可自定义数据处理函数，提交数据经过内部函数处理后，传入外部接口，未设置时，数据会直接传入外部接口。</p>
          </div>,
          fields: this.props.permFuncField,
          tooltipClass: 'middle',
          required: false,
          readonly: false
        },
        {
          type: 'radio',
          key: 'sysInterface',
          label: this.state.dict['header.form.sysInterface'],
          initVal: card.sysInterface || 'false',
          required: true,
          options: [{
            value: 'true',
            text: this.state.dict['header.form.true']
          }, {
            value: 'false',
            text: this.state.dict['header.form.false']
          }]
        },
        {
          type: 'text',
          key: 'outerFunc',
          label: this.state.dict['header.form.outerFunc'],
          initVal: card.outerFunc,
          required: false,
          readonly: false
        },
        {
          type: 'text',
          key: 'interface',
          label: this.state.dict['header.form.interface'],
          initVal: card.sysInterface === 'true' ? (window.GLOB.mainSystemApi || window.GLOB.subSystemApi) : card.interface,
          required: true,
          readonly: card.sysInterface === 'true'
        },
        {
          type: 'text',
          key: 'callbackFunc',
          label: this.state.dict['header.form.callbackFunc'],
          initVal: card.callbackFunc,
          required: false,
          readonly: false
        },
        {
          type: 'select',
          key: 'execSuccess',
          label: this.state.dict['header.form.execSuccess'],
          initVal: card.execSuccess || 'never',
          required: true,
          options: [{
            value: 'never',
            text: this.state.dict['header.form.refresh.never']
          }, {
            value: 'grid',
            text: this.state.dict['header.form.refresh.grid']
          }, {
            value: 'view',
            text: this.state.dict['header.form.refresh.view']
          }]
        },
        {
          type: 'select',
          key: 'execError',
          label: this.state.dict['header.form.execError'],
          initVal: card.execError || 'never',
          required: true,
          options: [{
            value: 'never',
            text: this.state.dict['header.form.refresh.never']
          }, {
            value: 'grid',
            text: this.state.dict['header.form.refresh.grid']
          }, {
            value: 'view',
            text: this.state.dict['header.form.refresh.view']
          }]
        },
        {
          type: 'select',
          key: 'popClose',
          label: this.state.dict['header.form.popClose'],
          initVal: card.popClose || 'never',
          required: true,
          options: [{
            value: 'never',
            text: this.state.dict['header.form.refresh.never']
          }, {
            value: 'grid',
            text: this.state.dict['header.form.refresh.grid']
          }, {
            value: 'view',
            text: this.state.dict['header.form.refresh.view']
          }]
        },
        {
          type: 'select',
          key: 'icon',
          label: this.state.dict['header.form.icon'],
          initVal: card.icon,
          required: false,
          options: []
        },
        {
          type: 'select',
          key: 'class',
          label: this.state.dict['header.form.class'],
          initVal: card.class,
          required: false,
          options: []
        },
        {
          type: 'text',
          key: 'sql',
          label: this.state.dict['header.form.datasource'],
          initVal: card.sql || this.state.config.setting.tableName || '',
          tooltip: this.state.dict['header.form.actionhelp.datasource'],
          required: false
        },
        {
          type: 'select',
          key: 'sqlType',
          label: this.state.dict['header.form.action.type'],
          initVal: card.sqlType || '',
          tooltip: this.state.dict['header.form.actionhelp.sqlType'],
          required: false,
          options: []
        }
      ]
      formlist: getActionForm(card, functip, this.state.config, this.props.permFuncField)
    })
  }

@@ -782,9 +388,7 @@
    }

    this.setState({
      visible: true,
      formtemp: 'tabs',
      modalTitle: '编辑-标签页',
      modaltype: 'tabs',
      card: card,
      formlist: [
        {
@@ -855,101 +459,100 @@
   * 3、添加或编辑列，保存时，如按钮位置设置为表格，则修改操作列显示状态
   */
  handleSubmit = () => {
    const { menu } = this.props
    const { card } = this.state
    let _config = JSON.parse(JSON.stringify(this.state.config))
    const { config, modaltype } = this.state

    this.formRef.handleConfirm().then(res => {
      let isupdate = false

      if (res.type === 'action' && card.originCard && res.values.OpenType === 'pop') {
        Api.getSystemConfig({
          func: 'sPC_Get_LongParam',
          MenuID: card.originCard.uuid
        }).then(result => {
          if (result.status && result.LongParam) {
            let param = {
              func: 'sPC_ButtonParam_AddUpt',
              ParentID: menu.MenuID,
              MenuID: res.values.uuid,
              MenuNo: menu.MenuNo,
              Template: 'Modal',
              MenuName: res.values.label,
              PageParam: JSON.stringify({Template: 'Modal'}),
              LongParam: result.LongParam
            }
            Api.getSystemConfig(param).then(response => {
              if (!response.status) {
                notification.warning({
                  top: 92,
                  message: response.message,
                  duration: 10
                })
              }
            })
          }
        })
      }

      
      if (res.type === 'action') {
        _config.action = _config.action.map(item => {
          if (item.uuid === res.values.uuid) {
            isupdate = true
            return res.values
          } else {
            return item
          }
        })
        _config.action = _config.action.filter(item => !item.origin)
  
        if (!isupdate) { // 操作不是修改，添加元素至列表
          _config.action.push(res.values)
        }
      } else if (res.type === 'search') {
        _config.groups = _config.groups.map(item => {
          item.sublist = item.sublist.map(cell => {
            if (cell.uuid === res.values.uuid) {
              return res.values
    if (modaltype === 'search') {
      this.modalFormRef.handleConfirm().then(res => {
        let _groups = config.groups.map(group => {
          group.sublist = group.sublist.map(item => {
            if (item.uuid === res.uuid) {
              return res
            } else {
              return cell
              return item
            }
          })
          if (item.isDefault) {
            item.sublist = item.sublist.filter(cell => !cell.origin)
          if (group.isDefault) {
            group.sublist = group.sublist.filter(item => !item.origin)
          }
          return item
          return group
        })
      } else { // 标签页的添加与修改
        _config[res.values.groupId] = _config[res.values.groupId].map(item => {
          if (item.uuid === res.values.uuid) {
            isupdate = true
            return res.values

        this.setState({
          config: {...config, groups: _groups},
          modaltype: ''
        })
      })
    } else if (modaltype === 'actionEdit' || modaltype === 'actionCopy') {
      this.actionFormRef.handleConfirm().then(res => {
        let _action = config.action.map(item => {
          if (item.uuid === res.uuid) {
            return res
          } else {
            return item
          }
        })
        _config[res.values.groupId] = _config[res.values.groupId].filter(item => !item.origin)
  
        if (!isupdate) { // 操作不是修改，添加元素至列表
          _config[res.values.groupId].push(res.values)
        _action = _action.filter(item => !item.origin)

        if (modaltype === 'actionCopy') {
          _action.push(res)
        }

        this.setState({
          config: {...config, action: _action},
          modaltype: ''
        })
      })
    } else if (modaltype === 'tabs') {
      this.tabsFormRef.handleConfirm().then(res => {
        let _tabgroup = config[res.groupId].map(item => {
          if (item.uuid === res.uuid) {
            return res
          } else {
            return item
          }
        })
        _tabgroup = _tabgroup.filter(item => !item.origin)

        this.setState({
          config: {...config, [res.groupId]: _tabgroup},
          modaltype: ''
        })
      })
    }
  }

  editModalCancel = () => {
    const { config, card, modaltype } = this.state

    if (card.focus) {
      let _config = null
      if (modaltype === 'search') {
        let _groups = config.groups.map(group => {
          group.sublist = group.sublist.filter(item => item.uuid !== card.uuid)
          return group
        })
        _config = {...config, groups: _groups}
      } else if (modaltype === 'actionEdit') {
        let _action = config.action.filter(item => item.uuid !== card.uuid)
        _config = {...config, action: _action}
      } else if (modaltype === 'tabs') {
        let _tabgroup = config[card.groupId].filter(item => item.uuid !== card.uuid)
        _config = {...config, [card.groupId]: _tabgroup}
      } else {
        _config = config
      }

      this.setState({
        card: null,
        config: _config,
        searchloading: true,
        actionloading: true,
        tabloading: true,
        visible: false
      }, () => {
        this.setState({
          searchloading: false,
          actionloading: false,
          tabloading: false
        })
        modaltype: ''
      })
    })
    } else {
      this.setState({
        card: null,
        modaltype: ''
      })
    }
  }

  /**
@@ -1228,12 +831,7 @@

        this.setState({
          config: _config,
          actionloading: true,
          funcLoading: false
        }, () => {
          this.setState({
            actionloading: false
          })
        })
      })
    })
@@ -1468,6 +1066,7 @@
      cancelText: this.state.dict['header.cancel'],
      onOk() {
        let _config = JSON.parse(JSON.stringify(_this.state.config))
        let _delActions = _this.state.delActions

        if (element.type === 'tabs') {
          _config[element.card.groupId] = _config[element.card.groupId].filter(item => {
@@ -1477,6 +1076,11 @@
              return true
            }
          })
        } else if (element.type === 'search') {
          _config.groups = _config.groups.map(group => {
            group.sublist = group.sublist.filter(item => item.uuid !== element.card.uuid)
            return group
          })
        } else {
          _config[element.type] = _config[element.type].filter(item => {
            if (item.uuid === element.card.uuid) {
@@ -1485,22 +1089,12 @@
              return true
            }
          })
        }

        let refreshtype = element.type + 'loading'

        if (/^tab/.test(refreshtype)) {
          refreshtype = 'tabloading'
          _delActions.push(element.card.uuid)
        }

        _this.setState({
          config: _config,
          delActions: [..._this.state.delActions, element.card.uuid],
          [refreshtype]: true
        }, () => {
          _this.setState({
            [refreshtype]: false
          })
          delActions: _delActions
        })
      },
      onCancel() {}
@@ -1537,27 +1131,21 @@
      profileVisible: false,
      config: config,
      card: '',
      actionloading: true
    }, () => {
      this.setState({
        actionloading: false
      })
    })
  }

  /**
   * @description 三级菜单保存
   * @description 菜单保存
   */
  submitConfig = () => {
    const { menu } = this.props
    const { originMenu } = this.state
    const { menu, editAction } = this.props

    let config = JSON.parse(JSON.stringify(this.state.config))

    this.menuformRef.handleConfirm().then(res => {

      if (config.search[0] && config.search[0].origin) {
        config.search = config.search.filter(item => !item.origin)
      if (config.groups[0] && config.groups[0].sublist[0] && config.groups[0].sublist[0].origin) {
        config.groups[0].sublist = config.groups[0].sublist.filter(item => !item.origin)
      }
      if (config.action[0] && config.action[0].origin) {
        config.action = config.action.filter(item => !item.origin)
@@ -1568,21 +1156,15 @@

      let _LongParam = ''
      let _config = {...config, tables: this.state.selectedTables}
      let _pageParam = {...menu.PageParam, OpenType: res.opentype}

      // 未设置数据源或标签不合法时，启用状态为false
      if (_config.setting.interType === 'inner' && !_config.setting.innerFunc && !_config.setting.dataresource) {
        _config.enabled = false
      } else if (_config.tabgroups.length > 1) {
      // 标签不合法时，启用状态为false
      if (_config.tabgroups.length > 1) {
        _config.tabgroups.forEach(group => {
          if (_config[group].length === 0) {
            _config.enabled = false
          }
        })
      }

      // 保存时删除配置类型，system 、user
      delete _config.type

      try {
        _LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_config)))
@@ -1597,7 +1179,7 @@

      let btnParam = { // 添加菜单按钮
        func: 'sPC_Button_AddUpt',
        Type: 60, // 添加按钮表单页下的按钮
        Type: 60,      // 添加按钮表单页下的按钮
        ParentID: menu.MenuID,
        MenuNo: res.menuNo,
        Template: menu.PageParam.Template || '',
@@ -1615,9 +1197,9 @@
      
      let tabParam = { // 添加菜单tab页
        func: 'sPC_sMenusTab_AddUpt',
        MenuID: menu.MenuID,
        MenuID: editAction.uuid,
        LText: config.tabs.map((item, index) => {
          return `select '${menu.MenuID}' as MenuID ,'${item.linkTab}' as Tabid,'${item.label}' as TabName ,'${(index + 1) * 10}' as Sort`
          return `select '${editAction.uuid}' as MenuID ,'${item.linkTab}' as Tabid,'${item.label}' as TabName ,'${(index + 1) * 10}' as Sort`
        })
      }
      tabParam.LText = tabParam.LText.join(' union all ')
@@ -1626,14 +1208,13 @@
      tabParam.secretkey = Utils.encrypt(tabParam.LText, tabParam.timestamp)

      let param = {
        func: 'sPC_TrdMenu_AddUpt',
        ParentID: res.parentId,
        MenuID: menu.MenuID,
        MenuNo: res.menuNo,
        Template: menu.PageParam.Template || '',
        MenuName: res.menuName,
        Sort: (this.props.supMenuList.length + 1) * 10,
        PageParam: JSON.stringify(_pageParam),
        func: 'sPC_ButtonParam_AddUpt',
        ParentID: menu.MenuID,
        MenuID: editAction.uuid,
        MenuNo: menu.MenuNo,
        Template: 'FormTab',
        MenuName: editAction.label,
        PageParam: JSON.stringify({Template: 'FormTab'}),
        LongParam: _LongParam
      }
      
@@ -1651,25 +1232,9 @@
        if (response.status) {
          this.setState({
            config: _config,
            originMenu: {
              ...originMenu,
              LongParam: _config,
              PageParam: _pageParam,
              MenuName: res.menuName,
              MenuNo: res.menuNo,
              ParentID: res.parentId
            },
            searchloading: true,
            actionloading: true
          }, () => {
            this.setState({
              searchloading: false,
              actionloading: false
            })
            originMenu: _config
          })

          this.props.reloadmenu()
          
          this.submitAction(btnParam, tabParam)
        } else {
          this.setState({
@@ -1792,23 +1357,13 @@
  }

  cancelConfig = () => {
    const { menu } = this.props
    const { config, originMenu } = this.state

    let _this = this
    let isAdd = false

    if (
      (config.search[0] && config.search[0].origin) ||
      (config.action[0] && config.action[0].origin) ||
      (config.tabs[0] && config.tabs[0].origin)
    ) {
      isAdd = true
    }

    if (isAdd) {
    if (!originMenu) {
      confirm({
        content: '菜单尚未提交，确定放弃保存吗？',
        content: '按钮配置尚未提交，确定放弃保存吗？',
        okText: this.state.dict['header.confirm'],
        cancelText: this.state.dict['header.cancel'],
        onOk() {
@@ -1817,30 +1372,15 @@
        onCancel() {}
      })
    } else {
      this.menuformRef.handleConfirm().then(res => {
        let _config = {...config, tables: this.state.selectedTables}
        let _pageParam = {...menu.PageParam, OpenType: res.opentype}
        let _originMenu = {
          ...originMenu,
          LongParam: _config,
          PageParam: _pageParam,
          MenuName: res.menuName,
          MenuNo: res.menuNo,
          ParentID: res.parentId
        }
      let _config = {...config, tables: this.state.selectedTables}

        if (!is(fromJS(originMenu), fromJS(_originMenu))) {
          this.setState({
            closeVisible: true
          })
        } else {
          this.props.handleConfig('')
        }
      }, () => {
      if (!is(fromJS(_config), fromJS(originMenu))) {
        this.setState({
          closeVisible: true
        })
      })
      } else {
        this.props.handleConfig('')
      }
    }
  }

@@ -1899,7 +1439,6 @@
      columnsMap.set(card.field, card)
    })

    console.log(cards)
    let groups = config.groups.map(group => {
      group.sublist = group.sublist.map(item => {
        if (columnsMap.has(item.field)) {
@@ -1941,17 +1480,12 @@
    })

    this.setState({
      searchloading: true,
      config: {...config, groups: groups}
    }, () => {
      notification.success({
        top: 92,
        message: '操作成功',
        duration: 2
      })
      this.setState({
        searchloading: false
      })
    })
    notification.success({
      top: 92,
      message: '操作成功',
      duration: 2
    })
  }

@@ -2052,20 +1586,14 @@
      this.setState({
        config: {...config, setting: res},
        settingVisible: false,
        tabloading: true
      }, () => {
        this.setState({
          tabloading: false
        })
      })
    })
  }

  /**
   * @description 设置可配置按钮
   * @description 设置可配置标签
   */
  setSubConfig = (btn, type) => {
    const { menu } = this.props
    const { config, originMenu } = this.state

    let isAdd = false
@@ -2087,17 +1615,8 @@
    } else {
      this.menuformRef.handleConfirm().then(res => {
        let _config = {...config, tables: this.state.selectedTables}
        let _pageParam = {...menu.PageParam, OpenType: res.opentype}
        let _originMenu = {
          ...originMenu,
          LongParam: _config,
          PageParam: _pageParam,
          MenuName: res.menuName,
          MenuNo: res.menuNo,
          ParentID: res.parentId
        }

        if (!is(fromJS(originMenu), fromJS(_originMenu))) {
        if (!is(fromJS(originMenu), fromJS(_config))) {
          notification.warning({
            top: 92,
            message: '菜单配置已修改，请保存！',
@@ -2169,7 +1688,7 @@
    }
  }

  onEnabledChange = (val, e) => {
  onEnabledChange = () => {
    const { config } = this.state

    let tabinvalid = true
@@ -2216,11 +1735,6 @@

        _this.setState({
          config: _config,
          tabloading: true
        }, () => {
          _this.setState({
            tabloading: false
          })
        })
      },
      onCancel() {}
@@ -2241,12 +1755,7 @@
        delete _config[groupId]

        _this.setState({
          config: _config,
          tabloading: true
        }, () => {
          _this.setState({
            tabloading: false
          })
          config: _config
        })
      },
      onCancel() {}
@@ -2291,11 +1800,6 @@

        _this.setState({
          config: {...config, groups: groups},
          searchloading: true
        }, () => {
          _this.setState({
            searchloading: false
          })
        })
      },
      onCancel() {}
@@ -2316,22 +1820,17 @@
      groups = groups.sort((a, b) => {
        return a.sort - b.sort
      })
      

      this.setState({
        config: {...config, groups: groups},
        editgroup: '',
        groupVisible: false,
        searchloading: true
      }, () => {
        this.setState({
          searchloading: false
        })
      })
    })
  }

  render () {
    const { config } = this.state
    const { config, modaltype } = this.state
    let _length = config.groups.length

    let configTabs = []
@@ -2454,7 +1953,7 @@
                activeKey={config.groups.map(group => group.uuid)}
                expandIconPosition={'right'}
              >
                {!this.state.searchloading && config.groups.map((group, index) => (
                {config.groups.map((group, index) => (
                  <Panel showArrow={false} header={group.label} key={group.uuid} extra={(
                    <span>
                      {index === _length - 1 ? <Icon
@@ -2488,21 +1987,19 @@
                <Tooltip placement="bottomLeft" overlayClassName="middle" title="在左侧工具栏《按钮》中，选择对应类型的按钮拖至此处添加，如选择按钮类型为表单、新标签页等含有配置页面的按钮，可在左侧工具栏-按钮-可配置按钮处，点击按钮完成相关配置。注：当设置按钮显示位置为表格时，显示列会增加操作列。">
                  <Icon type="question-circle" />
                </Tooltip>
                {!this.state.actionloading ?
                  <DragElement
                    type="action"
                    list={this.state.config.action}
                    handleList={this.handleList}
                    handleMenu={this.handleAction}
                    copyElement={(val) => this.handleAction(val, 'copy')}
                    deleteMenu={this.deleteElement}
                    profileMenu={this.profileAction}
                    placeholder={this.state.dict['header.form.action.placeholder']}
                  /> : null
                }
                <DragElement
                  type="action"
                  list={this.state.config.action}
                  handleList={this.handleList}
                  handleMenu={this.handleAction}
                  copyElement={(val) => this.handleAction(val, 'copy')}
                  deleteMenu={this.deleteElement}
                  profileMenu={this.profileAction}
                  placeholder={this.state.dict['header.form.action.placeholder']}
                />
              </div>
              {/* 标签组 */}
              {!this.state.tabloading && this.state.config.tabgroups.map((groupId, index) => {
              {this.state.config.tabgroups.map((groupId, index) => {
                return (
                  <div key={index} className="tab-list">
                    {index === 0 ? <Tooltip placement="bottomLeft" overlayClassName="middle" title="在左侧工具栏《标签页》中，选择对应类型的标签页拖至此处添加。">
@@ -2524,47 +2021,60 @@
            </Card>
          </div>
        </DndProvider>
        {/* 编辑搜索条件、按钮、显示列 */}
        {/* 编辑搜索条件 */}
        <Modal
          title={this.state.modalTitle}
          visible={this.state.visible}
          title={this.state.dict['header.modal.form.edit']}
          visible={modaltype === 'search'}
          width={700}
          onCancel={() => { this.setState({ visible: false }) }}
          onOk={this.handleSubmit}
          onCancel={this.editModalCancel}
          destroyOnClose
        >
          <ModalForm
            dict={this.state.dict}
            card={this.state.card}
            formlist={this.state.formlist}
            wrappedComponentRef={(inst) => this.modalFormRef = inst}
          />
        </Modal>
        {/* 编辑按钮：复制、编辑 */}
        <Modal
          title={modaltype === 'actionEdit' ? this.state.dict['header.modal.action.edit'] : this.state.dict['header.modal.action.copy']}
          visible={modaltype === 'actionEdit' || modaltype === 'actionCopy'}
          width={700}
          onCancel={this.editModalCancel}
          footer={[
            this.state.formtemp === 'action' ?
            <Button key="delete" className="mk-btn mk-purple" onClick={this.creatFunc} loading={this.state.funcLoading}>{this.state.dict['header.menu.func.create']}</Button> : null,
            <Button key="cancel" onClick={() => { this.setState({ visible: false }) }}>{this.state.dict['header.cancel']}</Button>,
            modaltype === 'actionEdit' ? <Button key="delete" className="mk-btn mk-purple" onClick={this.creatFunc} loading={this.state.funcLoading}>{this.state.dict['header.menu.func.create']}</Button> : null,
            <Button key="cancel" onClick={this.editModalCancel}>{this.state.dict['header.cancel']}</Button>,
            <Button key="confirm" type="primary" onClick={this.handleSubmit}>{this.state.dict['header.confirm']}</Button>
          ]}
          destroyOnClose
        >
          {this.state.formtemp === 'search' ?
            <SearchForm
              dict={this.state.dict}
              formlist={this.state.formlist}
              card={this.state.card}
              wrappedComponentRef={(inst) => this.formRef = inst}
            /> : null
          }
          {this.state.formtemp === 'action' ?
            <ActionForm
              dict={this.state.dict}
              card={this.state.card}
              tabs={this.state.tabviews}
              formlist={this.state.formlist}
              wrappedComponentRef={(inst) => this.formRef = inst}
            /> : null
          }
          {this.state.formtemp === 'tabs' ?
            <TabForm
              type="tabs"
              tabs={this.state.tabviews}
              dict={this.state.dict}
              card={this.state.card}
              formlist={this.state.formlist}
              wrappedComponentRef={(inst) => this.formRef = inst}
            /> : null
          }
          <ActionForm
            dict={this.state.dict}
            card={this.state.card}
            tabs={this.state.tabviews}
            formlist={this.state.formlist}
            wrappedComponentRef={(inst) => this.actionFormRef = inst}
          />
        </Modal>
        {/* 标签编辑 */}
        <Modal
          title={this.state.dict['header.modal.tabs.edit']}
          visible={modaltype === 'tabs'}
          width={700}
          onOk={this.handleSubmit}
          onCancel={this.editModalCancel}
          destroyOnClose
        >
          <TabForm
            type="tabs"
            dict={this.state.dict}
            card={this.state.card}
            tabs={this.state.tabviews}
            formlist={this.state.formlist}
            wrappedComponentRef={(inst) => this.tabsFormRef = inst}
          />
        </Modal>
        {/* 根据字段名添加显示列及搜索条件 */}
        <Modal