2024-02-04

king

2024-02-04 0bbaa727cdfc65622e33e91c4bf694c83f184535

 src/views/design/sidemenu/editsecmenu/index.jsx

@@ -3,23 +3,15 @@
import { is, fromJS } from 'immutable'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { notification, Modal, Button, Spin } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { notification, Modal, Button } from 'antd'
import moment from 'moment'
import TransferForm from '@/templates/zshare/basetransferform'

import Utils from '@/utils/utils.js'
import DragElement from '../menuelement'
import MenuForm from '../menuform'
import Api from '@/api'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import MKEmitter from '@/utils/events.js'
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

@@ -28,53 +20,47 @@
    menulist: PropTypes.any,      // 二级菜单列表
    menuTree: PropTypes.array,    // 一级菜单列表
    supMenu: PropTypes.object,    // 二级菜单所对应的一级菜单
    reload: PropTypes.func,       // 刷新二级菜单数据
    exitEdit: PropTypes.func      // 退出编辑
  }

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    menulist: null,        // 菜单列表
    type: '',              // 编辑类型，add or edit
    title: '',             // 模态框标题
    visible: null,         // 模态框是否可见
    formlist: null,        // 表单信息
    editMenu: null,        // 编辑菜单
    thawmenulist: null,    // 已冻结的二级菜单
    thawMvisible: false,   // 解除冻结模态框
    confirmLoading: false, // 提交中。。。
    targetKeys: []         // 解冻菜单列表 
    loading: false,        // 提交中。。。
    change: false
  }

  handlePreviewList = (List) => {
    this.setState({
      menulist: List
      menulist: List,
      change: !is(fromJS(List), fromJS(this.props.menulist))
    })
  }

  handleMenu = (menu) => {
    const { dict } = this.state

    // 菜单编辑：修改、删除，如菜单顺序已改变，提示保存菜单顺序
    const _this = this
    if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
    if (this.state.change) {
      notification.warning({
        top: 92,
        message: dict['model.menu.presave'],
        message: '菜单顺序已调整，请保存！',
        duration: 5
      })
    } else if (menu.type === 'close') {
      return
    }
    if (menu.type === 'close') {
      confirm({
        title: dict['model.menu.close'].replace('@M', menu.card.MenuName),
        title: `确定删除菜单《${menu.card.MenuName}》吗？`,
        content: '',
        onOk() {
          let param = {
            func: 'sPC_MainMenu_Del',
            MenuID: menu.card.MenuID
          }
          return Api.getSystemConfig(param).then(res => {
          return Api.getCloudConfig(param).then(res => {
            if (res.status) {
              _this.props.reload()
              MKEmitter.emit('mkUpdateMenuList')
            } else {
              notification.warning({
                top: 92,
@@ -89,14 +75,12 @@
    } else if (menu.type === 'edit') {
      this.setState({
        visible: true,
        title: dict['model.edit'] + dict['model.menu'],
        type: 'edit',
        editMenu: menu.card,
        formlist: [
          { // 父级菜单
            type: 'select',
            key: 'parentId',
            label: dict['model.super'] + dict['model.menu'],
            label: '上级菜单',
            initVal: this.props.supMenu.MenuID,
            required: true,
            options: this.props.menuTree
@@ -104,7 +88,7 @@
          { // 菜单名称
            type: 'text',
            key: 'menuName',
            label: dict['model.menu'] + dict['model.name'],
            label: '菜单名称',
            initVal: menu.card.MenuName,
            required: true,
            readonly: false
@@ -112,7 +96,7 @@
          { // 菜单图标
            type: 'icon',
            key: 'icon',
            label: dict['model.icon'],
            label: '图标',
            initVal: menu.card.PageParam.Icon || 'folder',
            required: true
          }
@@ -122,112 +106,47 @@
  }

  handleSubBtn = (type) => {
    const { dict } = this.state

    // 操作按钮
    if (type === 'add') { // 添加新菜单
      this.setState({
        visible: true,
        title: dict['model.add'] + dict['model.menu'],
        type: 'add',
        formlist: [
          { // 父级菜单
            type: 'select',
            key: 'parentId',
            label: dict['model.super'] + dict['model.menu'],
            initVal: this.props.supMenu.MenuID,
            required: true,
            options: this.props.menuTree
          },
          { // 菜单名称
            type: 'text',
            key: 'menuName',
            label: dict['model.menu'] + dict['model.name'],
            initVal: '',
            required: true,
            readonly: false
          },
          { // 菜单图标
            type: 'icon',
            key: 'icon',
            label: dict['model.icon'],
            initVal: 'folder',
            required: true
          }
        ]
      })
    } else if (type === 'thaw') { // 解冻已有菜单
      this.setState({
        thawMvisible: true,
        targetKeys: []
      })
      Api.getSystemConfig({
        func: 'sPC_Get_FrozenMenu',
        ParentID: this.props.supMenu.MenuID,
        TYPE: 20
      }).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 if (type === 'confirm') { // 确定时入顺序改变，则提示保存，否则退出编辑
      if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
        let _this = this
        let param  = {
          func: 'sPC_Menu_SortUpt',
          LText: this.state.menulist.map((item, index) => {
            return 'select \'' + item.MenuID + '\' as Menuid,' + (index + 1) * 10 + ' as sort'
          })
        }

        param.LText = param.LText.join(' union ') // sql拼接
        param.LText = Utils.formatOptions(param.LText) // 关键字符替换，base64加密
        param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') // 时间戳
        param.secretkey = Utils.encrypt(param.LText, param.timestamp) // md5密钥

        confirm({
          title: this.state.dict['model.menu.resetorder'],
          content: '',
          onOk() {
            return Api.getSystemConfig(param).then(res => {
              if (res.status) {
                _this.props.reload()
              } else {
                notification.warning({
                  top: 92,
                  message: res.message,
                  duration: 5
                })
              }
            })
          },
          onCancel() {}
    const that = this
    if (type === 'confirm') { // 保存调整后的顺序
      let param  = {
        func: 'sPC_Menu_SortUpt',
        exec_type: 'x',
        LText: this.state.menulist.map((item, index) => {
          return 'select \'' + item.MenuID + '\' as Menuid,' + (index + 1) * 10 + ' as sort'
        })
      } else {
        this.props.exitEdit()
      }
    } else if (type === 'close') { // 退出编辑
      if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
        let _this = this

      param.LText = param.LText.join(' union ')
      param.LText = Utils.formatOptions(param.LText, 'x')
      param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
      param.secretkey = Utils.encrypt('', param.timestamp)

      confirm({
        title: '确认调整菜单顺序吗？',
        content: '',
        onOk() {
          return Api.getCloudConfig(param).then(res => {
            if (res.status) {
              that.setState({ change: false })
              MKEmitter.emit('mkUpdateMenuList')
            } else {
              notification.warning({
                top: 92,
                message: res.message,
                duration: 5
              })
            }
          })
        },
        onCancel() {}
      })
    } else if (type === 'close') { // 退出编辑
      if (this.state.change) {
        confirm({
          title: '菜单顺序已调整，放弃保存吗？',
          content: '',
          onOk() {
            _this.props.exitEdit()
            that.props.exitEdit()
          },
          onCancel() {}
        })
@@ -238,138 +157,45 @@
  }

  memuHandleSubmit = () => {
    if (this.state.type === 'add') { // 新建菜单：提交
      this.menuFormRef.handleConfirm().then(values => {
        let param = {
          ParentID: values.parentId,
          MenuID: Utils.getuuid(),
          MenuName: values.menuName,
          PageParam: JSON.stringify({
            Icon: values.icon
    this.menuFormRef.handleConfirm().then(values => {
      let param = {
        func: 'sPC_SndMenu_Upt',
        ParentID: values.parentId,
        MenuID: this.state.editMenu.MenuID,
        MenuName: values.menuName,
        PageParam: JSON.stringify({
          Icon: values.icon
        })
      }
      this.setState({
        loading: true
      })
      Api.getCloudConfig(param).then(res => {
        if (res.status) {
          this.setState({
            loading: false,
            visible: false
          })
          MKEmitter.emit('mkUpdateMenuList')
        } else {
          this.setState({
            loading: false
          })
          notification.warning({
            top: 92,
            message: res.message,
            duration: 5
          })
        }
        param.func = 'sPC_SndMenu_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,
              visible: false
            })
            this.props.reload()
          } else {
            this.setState({
              confirmLoading: false
            })
            notification.warning({
              top: 92,
              message: res.message,
              duration: 5
            })
          }
        })
      }, () => {})
    } else if (this.state.type === 'edit') { // 编辑菜单：提交
      this.menuFormRef.handleConfirm().then(values => {
        let param = {
          func: 'sPC_SndMenu_Upt',
          ParentID: values.parentId,
          MenuID: this.state.editMenu.MenuID,
          MenuName: values.menuName,
          PageParam: JSON.stringify({
            Icon: values.icon
          })
        }
        this.setState({
          confirmLoading: true
        })
        Api.getSystemConfig(param).then(res => {
          if (res.status) {
            this.setState({
              confirmLoading: false,
              visible: false
            })
            this.props.reload()
          } else {
            this.setState({
              confirmLoading: false
            })
            notification.warning({
              top: 92,
              message: res.message,
              duration: 5
            })
          }
        })
      }, () => {})
    }
      })
    }, () => {})
  }

  memuHandleCancel = () => { // 取消操作，关闭模态框
    this.setState({
      visible: false,
      type: '',
      formlist: null,
      editMenu: null
    })
  }

  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
    })
  }

@@ -382,80 +208,44 @@
  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.menulist), fromJS(nextProps.menulist))) {
      this.setState({
        menulist: nextProps.menulist
        menulist: nextProps.menulist,
        change: false
      })
    }
  }

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

    return (
      <div className="second-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}>
          {this.state.menulist && this.state.menulist.length > 0 ? <DragElement
          <DragElement
            list={this.state.menulist}
            handlePreviewList={this.handlePreviewList}
            handleMenu={this.handleMenu}
          /> : null}
          />
        </DndProvider>
        <div className="menu-add" onClick={() => {this.handleSubBtn('add')}}>
          <PlusOutlined />
        </div>
        <div className="menu-btn">
          <Button type="primary" onClick={() => {this.handleSubBtn('thaw')}}>{dict['model.thaw'] + dict['model.menu']}</Button>
          <Button type="primary" onClick={() => {this.handleSubBtn('confirm')}}>{dict['model.confirm']}</Button>
          <Button onClick={() => {this.handleSubBtn('close')}}>{dict['model.close']}</Button>
          <Button type="primary" className="mk-save-menu" disabled={!change} onClick={() => {this.handleSubBtn('confirm')}}>保存</Button>
          <Button onClick={() => {this.handleSubBtn('close')}}>关闭</Button>
        </div>
        <Modal
          title={this.state.title}
          title="修改菜单"
          visible={this.state.visible}
          onOk={this.memuHandleSubmit}
          confirmLoading={this.state.confirmLoading}
          confirmLoading={loading}
          onCancel={this.memuHandleCancel}
          destroyOnClose
        >
          {this.state.formlist ?
            <MenuForm
              dict={dict}
              inputSubmit={this.memuHandleSubmit}
              formlist={this.state.formlist}
              wrappedComponentRef={(inst) => this.menuFormRef = inst}
            /> : null}
        </Modal>
        <Modal
          title={dict['model.thaw'] + dict['model.menu']}
          width={600}
          visible={this.state.thawMvisible}
          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>
      </div>
      </>
    )
  }
}