2022-07-26

king

2022-07-26 1e3e316b0d64a04fade0a006bec78475dddc06bd

 src/views/design/header/editfirstmenu/index.jsx

@@ -3,23 +3,14 @@
import { is, fromJS } from 'immutable'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { notification, Modal, Spin } from 'antd'
import { notification, Modal } from 'antd'
import moment from 'moment'

import TransferForm from '@/templates/zshare/basetransferform'
import DragElement from './dragelement'
import MenuForm from './menuform'
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import Api from '@/api'
import './index.scss'

import card1 from '@/assets/img/card-bg2.jpg'
import card2 from '@/assets/img/card-bg5.jpg'
import card3 from '@/assets/img/card-bg8.jpg'
import card4 from '@/assets/img/card-bg7.jpg'
import card5 from '@/assets/img/card-bg6.jpg'

const { confirm } = Modal

@@ -31,20 +22,16 @@
  }

  state = {
    thawmenulist: null, // 已冻结的一级菜单
    addMvisible: null,
    menulist: null,
    editMenu: null, // 编辑菜单
    editMvisible: false, // 编辑菜单模态框
    thawMvisible: false, // 解除冻结模态框
    confirmLoading: false, // 提交中。。。
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    targetKeys: [] // 解冻菜单列表
    visible: false,  // 编辑菜单模态框
    loading: false,  // 提交中。。。
    change: false
  }

  handlePreviewList = (List) => {
    // 菜单顺序改变时，保存中间状态
    this.setState({menulist: List})
    this.setState({menulist: List, change: !is(fromJS(List), fromJS(this.props.menulist))})
  }

  editMenuModal = (Menu) => {
@@ -53,13 +40,14 @@
    if (!is(fromJS(this.state.menulist), fromJS(this.props.menulist))) {
      notification.warning({
        top: 92,
        message: this.state.dict['model.menu.presave'],
        message: '菜单顺序已调整，请保存！',
        duration: 5
      })
    } else {
      this.setState({
        editMvisible: true,
        editMenu: menu.card
        visible: true,
        editMenu: menu.card,
        loading: false
      })
    }
  }
@@ -69,19 +57,19 @@
    this.editMenuFormRef.handleConfirm().then(param => {
      param.func = 'sPC_MainMenu_Upt'
      this.setState({
        confirmLoading: true
        loading: true
      })
      Api.getSystemConfig(param).then(res => {
        if (res.status) {
          this.setState({
            confirmLoading: false,
            editMvisible: false,
            loading: false,
            visible: false,
            editMenu: null
          })
          this.props.reload()
        } else {
          this.setState({
            confirmLoading: false
            loading: false
          })
          notification.warning({
            top: 92,
@@ -91,58 +79,12 @@
        }
      })
    }, () => {})
  }

  editMemuCancel = () => {
    // 编辑菜单：取消
    this.setState({
      confirmLoading: false,
      editMvisible: false,
      editMenu: null
    })
  }

  addMemuSubmit = () => {
    // 新建菜单：提交
    this.addMenuFormRef.handleConfirm().then(param => {
      param.func = 'sPC_MainMenu_Add'
      param.Sort = (this.props.menulist.length + 1) * 10
      this.setState({
        confirmLoading: true
      })
      Api.getSystemConfig(param).then(res => {
        if (res.status) {
          this.setState({
            confirmLoading: false,
            addMvisible: false,
          })
          this.props.reload()
        } else {
          this.setState({
            confirmLoading: false
          })
          notification.warning({
            top: 92,
            message: res.message,
            duration: 5
          })
        }
      })
    }, () => {})
  }

  addMemuCancel = () => {
    // 新建菜单：取消
    this.setState({
      confirmLoading: false,
      addMvisible: false
    })
  }

  deleteMemu = (item) => {
    let _this = this
    confirm({
      title: this.state.dict['model.menu.close'].replace('@M', item.MenuName),
      title: `确定删除菜单《${item.MenuName}》吗？`,
      content: '',
      onOk() {
        let param = {
@@ -165,78 +107,11 @@
    })
  }

  thawMemuSubmit = () => {
    const { targetKeys } = this.state

    if (targetKeys.length === 0) {
      notification.warning({
        top: 92,
        message: this.state.dict['form.required.select'] + this.state.dict['model.menu'],
        duration: 5
      })
    } else {
      this.setState({
        confirmLoading: true
      })
      let defers = targetKeys.map(item => {
        return new Promise((resolve) => {
          Api.getSystemConfig({
            func: 'sPC_MainMenu_ReDel',
            MenuID: item
          }).then(res => {
            if (res.status) {
              resolve('')
            } else {
              resolve(res.message)
            }
          })
        })
      })
      Promise.all(defers).then(res => {
        let msg = res.filter(Boolean)[0]
        if (msg) {
          notification.error({
            top: 92,
            message: msg,
            duration: 10
          })
        } else {
          this.setState({
            confirmLoading: false,
            thawMvisible: false,
            targetKeys: [],
            thawmenulist: null
          })
          this.props.reload()
        }
      })
    }
  }

  thawMemuCancel = () => {
    this.setState({
      thawMvisible: false,
      targetKeys: [],
      thawmenulist: null
    })
  }

  
  handleButton = (type) => {
    // 菜单编辑：添加，确定，取消
    let _menuchange = !is(fromJS(this.state.menulist), fromJS(this.props.menulist))

    if ((type === 'add' || type === 'thawmenu') && _menuchange) {
      notification.warning({
        top: 92,
        message: this.state.dict['model.menu.presave'],
        duration: 5
      })
    } else if (type === 'add') {
      this.setState({
        addMvisible: true
      })
    } else if (type === 'confirm' && _menuchange) {
    if (type === 'confirm' && _menuchange) {
      let _this = this
      let param  = {
        func: 'sPC_Menu_SortUpt',
@@ -251,7 +126,7 @@
      param.secretkey = Utils.encrypt(param.LText, param.timestamp) // md5密钥

      confirm({
        title: this.state.dict['model.menu.resetorder'],
        title: '确认调整菜单顺序吗？',
        content: '',
        onOk() {
          return Api.getSystemConfig(param).then(res => {
@@ -279,33 +154,6 @@
        },
        onCancel() {}
      })
    } else if (type === 'thawmenu') {
      this.setState({
        thawMvisible: true,
        targetKeys: []
      })
      Api.getSystemConfig({
        func: 'sPC_Get_FrozenMenu',
        ParentID: '0',
        TYPE: 10
      }).then(res => {
        if (res.status) {
          this.setState({
            thawmenulist: res.data.map(menu => {
              return {
                key: menu.MenuID,
                title: menu.MenuName
              }
            })
          })
        } else {
          notification.warning({
            top: 92,
            message: res.message,
            duration: 5
          })
        }
      })
    } else {
      this.props.exitEdit()
    }
@@ -317,38 +165,18 @@

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.menulist), fromJS(nextProps.menulist))) {
      this.setState({menulist: fromJS(nextProps.menulist).toJS()})
      this.setState({menulist: fromJS(nextProps.menulist).toJS(), change: false})
    }
  }

  render () {
    const { dict, menulist } = this.state
    const { menulist, change } = this.state

    return (
      <div className="header-edit-box">
        <div className="mask">
          <div className="tipcard card1" style={{backgroundImage: 'url(' + card1 + ')'}}>
            拖动一级菜单可调整顺序，顺序调整后，请点击确定按钮保存。
          </div>
          <div className="tipcard card2" style={{backgroundImage: 'url(' + card2 + ')'}}>
            鼠标经过菜单时会显示编辑图标，点击编辑可修改和删除菜单。
          </div>
          <div className="tipcard card3" style={{backgroundImage: 'url(' + card3 + ')'}}>
            点击解除冻结按钮，可还原已删除的一级菜单。
          </div>
          <div className="tipcard card4" style={{backgroundImage: 'url(' + card4 + ')'}}>
            点击添加图标，可新增一级菜单。
          </div>
          <div className="tipcard card5" style={{backgroundImage: 'url(' + card5 + ')'}}>
            <p>编辑状态中，菜单之外区域会锁定，查看系统数据请点击。</p>
            <div>
              <span className="new-view" onClick={() => {window.open('#/main')}} >新页面</span>
            </div>
          </div>
        </div>
        <DndProvider backend={HTML5Backend}>
          <DragElement
            dict={dict}
            change={change}
            list={menulist}
            handlePreviewList={this.handlePreviewList}
            handleMenu={this.editMenuModal}
@@ -356,48 +184,16 @@
            handleButton={this.handleButton}
          />
        </DndProvider>
        {/* 新建菜单模态框 */}
        <Modal
          title={dict['model.add'] + dict['model.menu']}
          visible={this.state.addMvisible}
          onOk={this.addMemuSubmit}
          confirmLoading={this.state.confirmLoading}
          onCancel={this.addMemuCancel}
          destroyOnClose
        >
          <MenuForm
            dict={dict}
            type="add"
            menu={null}
            inputSubmit={this.addMemuSubmit}
            wrappedComponentRef={(inst) => this.addMenuFormRef = inst}
          />
        </Modal>
        {/* 解除冻结菜单模态框 */}
        <Modal
          title={dict['model.thaw'] + dict['model.menu']}
          visible={this.state.thawMvisible}
          width={600}
          onOk={this.thawMemuSubmit}
          confirmLoading={this.state.confirmLoading}
          onCancel={this.thawMemuCancel}
          destroyOnClose
        >
          {!this.state.thawmenulist && <Spin style={{marginLeft: 'calc(50% - 22px)', marginTop: '70px', marginBottom: '70px'}} size="large" />}
          {this.state.thawmenulist && <TransferForm onChange={(vals) => this.setState({targetKeys: vals})} menulist={this.state.thawmenulist}/>}
        </Modal>
        {/* 编辑菜单模态框 */}
        <Modal
          title={dict['model.edit'] + dict['model.menu']}
          visible={this.state.editMvisible}
          title="编辑菜单"
          visible={this.state.visible}
          onOk={this.editMemuSubmit}
          confirmLoading={this.state.confirmLoading}
          onCancel={this.editMemuCancel}
          confirmLoading={this.state.loading}
          onCancel={() => this.setState({visible: false})}
          destroyOnClose
        >
          <MenuForm
            dict={dict}
            type="edit"
            menu={this.state.editMenu}
            inputSubmit={this.editMemuSubmit}
            wrappedComponentRef={(inst) => this.editMenuFormRef = inst}