2022-09-06

king

2022-09-06 b8e1395f02c929eaa96b949cf6027ee2a43856a6

 src/templates/sharecomponent/columncomponent/index.jsx

@@ -1,10 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Icon, Tooltip, Modal, notification, Switch, message, Spin } from 'antd'
import { Modal, notification, Switch, message } from 'antd'
import { CopyOutlined } from '@ant-design/icons'

import Api from '@/api'
import options from '@/store/options.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import { getColumnForm } from '@/templates/zshare/formconfig'
@@ -14,6 +13,7 @@
import GridBtnForm from './gridbtnform'
import DragElement from './dragcolumn'
import MarkColumn from './markcolumn'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const { confirm } = Modal
@@ -22,16 +22,13 @@
  static propTpyes = {
    menu: PropTypes.object,          // 三级菜单信息
    config: PropTypes.object,        // 配置信息
    pasteContent: PropTypes.object,  // 粘贴配置信息
    sysRoles: PropTypes.array,       // 角色列表，权限分配
    updatecolumn: PropTypes.func     // 更新
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    columnlist: null,    // 显示列
    loading: false,      // 查询显示列联动菜单
    showField: false,    // 显示列字段
    showField: true,     // 显示列字段
    modaltype: '',       // 模态框控制
    card: null           // 编辑中元素
  }
@@ -43,29 +40,6 @@
    this.setState({
      columnlist: fromJS(this.props.config.columns).toJS()
    })
  }

  /**
   * @description 监听到显示列复制时，触发显示列编辑
   */
  UNSAFE_componentWillReceiveProps (nextProps) {
    const { config } = this.props
    const { columnlist } = this.state

    if (
      nextProps.pasteContent &&
      nextProps.pasteContent.columns &&
      nextProps.pasteContent.copyType === 'columns' &&
      nextProps.pasteContent.columns.length > 0
    ) {
      if (columnlist.filter(col => !col.origin).length === 0) {
        this.setState({columnlist: nextProps.pasteContent.columns}, () => {
          this.props.updatecolumn({...config, columns: nextProps.pasteContent.columns})
        })
      }
    } else if (!is(fromJS(nextProps.config.columns), fromJS(config.columns)) && !is(fromJS(nextProps.config.columns), fromJS(columnlist))) {
      this.setState({columnlist: fromJS(nextProps.config.columns).toJS()})
    }
  }

  /**
@@ -89,78 +63,48 @@
   */
  handleColumn = (card) => {
    const { menu } = this.props
    const { columnlist } = this.state

    if (card.type !== 'colspan') {
      let menulist = menu.fstMenuList.map(item => {
        return {
          value: item.MenuID,
          label: item.text,
          isLeaf: false
        }
      })
      let menulist = []

      if ((card.type === 'text' || card.type === 'number') && card.linkmenu && card.linkmenu.length > 0) {
        let _param = {
          func: 'sPC_Get_FunMenu',
          ParentID: card.linkmenu[0],
          systemType: options.sysType,
          debug: 'Y'
        }
      if (menu.fstMenuList) {
        let trees = fromJS(menu.fstMenuList).toJS()

        this.setState({
          loading: true
        })
    
        Api.getSystemConfig(_param).then(result => {
          if (result.status) {
            menulist = menulist.map(item => {
              if (item.value === card.linkmenu[0]) {
                item.children = result.data.map(item => {
                  let submenu = {
                    value: item.ParentID,
                    label: item.MenuNameP,
                    children: item.FunMenu.map(cell => {
                      return {
                        value: cell.MenuID,
                        label: cell.MenuName,
                        MenuID: cell.MenuID,
                        MenuName: cell.MenuName,
                        MenuNo: cell.MenuNo,
                        Ot: cell.Ot,
                        PageParam: cell.PageParam,
                        LinkUrl: cell.LinkUrl,
                        disabled: cell.MenuID === menu.MenuID
                      }
                    })
                  }
        menulist = trees.map(fst => {
          fst.value = fst.MenuID
          fst.label = fst.MenuName
          fst.isLeaf = false
          fst.children = fst.children.map(snd => {
            snd.value = snd.MenuID
            snd.label = snd.MenuName

                  return submenu
                })
              }
              return item
            snd.children = snd.children.map(thd => {
              thd.value = thd.MenuID
              thd.label = thd.MenuName
              thd.disabled = thd.MenuID === menu.MenuID
              return thd
            })
          } else {
            notification.warning({
              top: 92,
              message: result.message,
              duration: 5
            })
          }

          this.setState({
            loading: false,
            modaltype: 'columns',
            card: card,
            formlist: getColumnForm(card, this.props.sysRoles, menulist)
            return snd
          })
        })
      } else {
        this.setState({
          modaltype: 'columns',
          card: card,
          formlist: getColumnForm(card, this.props.sysRoles, menulist)
          return fst
        })
      }

      let fields = []
      columnlist.forEach(col => {
        if (!col.field) return
        fields.push({
          value: col.field,
          text: col.label
        })
      })
      
      this.setState({
        modaltype: 'columns',
        card: card,
        formlist: getColumnForm(card, menulist, fields)
      })
    } else {
      this.setState({
        modaltype: 'colspan',
@@ -228,16 +172,12 @@
    if (modaltype === 'columns' || modaltype === 'colspan') {
      this.columnFormRef.handleConfirm().then(res => {
        let fieldrepet = false // 字段重复
        let labelrepet = false // 提示文字重复

        _columnlist = _columnlist.filter(item => !item.origin || item.uuid === res.uuid) // 去除初始列

        _columnlist = _columnlist.map(item => {
          if (item.uuid !== res.uuid && res.field && item.field) {
            if (item.field === res.field) {
            if (item.field.toLowerCase() === res.field.toLowerCase()) {
              fieldrepet = true
            } else if (item.label === res.label) {
              labelrepet = true
            }
          }

@@ -251,14 +191,7 @@
        if (fieldrepet) {
          notification.warning({
            top: 92,
            message: this.state.dict['model.field.exist'] + ' !',
            duration: 5
          })
          return
        } else if (labelrepet) {
          notification.warning({
            top: 92,
            message: this.state.dict['model.name.exist'] + ' !',
            message: '字段已存在!',
            duration: 5
          })
          return
@@ -355,8 +288,6 @@

    confirm({
      content: dict['model.confirm'] + dict['model.delete'] + ` - ${card.label} ？`,
      okText: dict['model.confirm'],
      cancelText: this.state.dict['model.cancel'],
      onOk() {
        let _columnlist = fromJS(_this.state.columnlist).toJS()

@@ -446,6 +377,11 @@
      columns: columnlist
    }

    let srcid = localStorage.getItem(window.location.href.split('#')[0] + 'srcId')
    if (srcid) {
      val.$srcId = srcid
    }

    oInput.value = window.btoa(window.encodeURIComponent(JSON.stringify(val)))
    document.body.appendChild(oInput)
    oInput.select()
@@ -519,8 +455,38 @@
    })
  }

  plusColumns = (MenuId, items) => {
    const { config } = this.props
    const { columnlist } = this.state

    if (MenuId !== config.uuid) return

    let list = [...columnlist, ...items]

    if (list[0] && list[0].origin) {
      list = list.filter(col => !col.origin)
    }

    this.setState({
      columnlist: list
    }, () => {
      this.props.updatecolumn({...config, columns: list})
    })
  }

  revert = () => {
    this.setState({
      columnlist: fromJS(this.props.config.columns).toJS()
    })
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }

  componentDidMount () {
    MKEmitter.addListener('revert', this.revert)
    MKEmitter.addListener('plusColumns', this.plusColumns)
  }

  /**
@@ -530,6 +496,8 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('revert', this.revert)
    MKEmitter.removeListener('plusColumns', this.plusColumns)
  }

  render() {
@@ -538,12 +506,7 @@

    return (
      <div className="model-table-column-list">
        <Tooltip placement="bottomLeft" overlayClassName="middle" title={dict['model.tooltip.column.guide']}>
          <Icon type="question-circle" />
        </Tooltip>
        {columnlist && columnlist.length > 0 ?
          <Icon className="column-copy" title="copy" type="copy" onClick={this.copycolumn} /> : null
        }
        {columnlist && columnlist.length > 0 ? <CopyOutlined className="column-copy" title="copy" onClick={this.copycolumn} /> : null}
        <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={this.onFieldChange} />
        <DragElement
          list={columnlist}
@@ -555,13 +518,12 @@
          markMenu={this.markElement}
          handleGridBtn={this.handleGridBtn}
          showfield={this.state.showField}
          placeholder={this.state.dict['header.form.column.placeholder']}
        />
        {/* 显示列编辑 */}
        <Modal
          title={dict['header.modal.column.edit']}
          title="显示列-编辑"
          visible={modaltype === 'columns'}
          width={800}
          width={850}
          maskClosable={false}
          onOk={this.handleSubmit}
          onCancel={this.editModalCancel}
@@ -578,9 +540,9 @@
        </Modal>
        {/* 合并列编辑 */}
        <Modal
          title={dict['model.modal.colspan'] + '-' + dict['model.edit']}
          title={dict['model.form.colspan'] + '-' + dict['model.edit']}
          visible={modaltype === 'colspan'}
          width={800}
          width={850}
          maskClosable={false}
          onOk={this.handleSubmit}
          onCancel={this.editModalCancel}
@@ -596,9 +558,9 @@
        </Modal>
        {/* 操作列编辑 */}
        <Modal
          title={dict['header.modal.gridbtn.edit']}
          title="操作列-编辑"
          visible={modaltype === 'gridbtn'}
          width={800}
          width={850}
          maskClosable={false}
          onOk={this.handleSubmit}
          onCancel={this.editModalCancel}
@@ -618,7 +580,6 @@
          visible={modaltype === 'mark'}
          width={'75vw'}
          maskClosable={false}
          style={{minWidth: '900px', maxWidth: '1200px'}}
          okText={dict['model.submit']}
          onOk={this.markSubmit}
          onCancel={() => { this.setState({ modaltype: '' }) }}
@@ -631,7 +592,6 @@
            columns={columnlist}
          />
        </Modal>
        {this.state.loading && <Spin size="large" />}
      </div>
    )
  }