2021-07-28

king

2021-07-28 137fb8ea6af2789b3238b22bac31d80bced41dfe

 src/mob/components/navbar/normal-navbar/menusetting/menutable/index.jsx

New file
@@ -0,0 +1,198 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Table, Button, Modal, Icon } from 'antd'

import MenuForm from '../menuform'
import Utils from '@/utils/utils.js'
// import MKEmitter from '@/utils/events.js'
import './index.scss'

const { confirm } = Modal

class MenuTable extends Component {
  static propTpyes = {
    menus: PropTypes.array,     // 卡片行信息
    cols: PropTypes.array,      // 字段集
  }

  state = {
    data: [],
    editMenu: null,
    columns: [
      { title: '菜单名称', dataIndex: 'name', key: 'name' },
      { title: '菜单参数', dataIndex: 'MenuNo', key: 'MenuNo' },
      { title: '菜单属性', dataIndex: 'property', key: 'property',  render: text => {
        const trans = {menu: '菜单', link: '链接', linkmenu: '关联菜单'}

        return trans[text]
      }},
      { title: '图标', dataIndex: 'icon', key: 'icon',  render: (text, record) => {
        return text ? <Icon type={text} /> : ''
      }},
      { title: '是否隐藏', dataIndex: 'hidden', key: 'hidden',  render: (text, record) => {
        const trans = {'true': '是', 'false': '否'}
        return trans[text] || '否'
      }},
      { title: '操作', key: 'operation', align: 'center', width: '190px', render: (text, record) =>
        (<div>
          <Button type="link" style={{padding: '0 5px', marginRight: '5px'}} onClick={() => this.editMenu(record)}>编辑</Button>
          <Button type="link" style={{color: '#ff4d4f', padding: '0 5px', marginRight: '5px'}} onClick={() => this.delMenu(record)}>删除</Button>
          <Icon type="arrow-up" style={{color: '#26C281', cursor: 'pointer', padding: '0 5px', marginRight: '5px'}} onClick={() => this.moveUp(record)}/>
          <Icon type="arrow-down" style={{color: '#ff4d4f', cursor: 'pointer', padding: '0 5px'}} onClick={() => this.moveDown(record)}/>
        </div>)
      }
    ]
  }

  UNSAFE_componentWillMount () {
    const { menus } = this.props

    this.setState({data: fromJS(menus).toJS()})
  }

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

  moveUp = (record) => {
    let data = fromJS(this.state.data).toJS()

    let dragIndex = data.findIndex(c => c.MenuID === record.MenuID)
    let hoverIndex = dragIndex - 1

    if (hoverIndex === -1) return

    data.splice(hoverIndex, 0, ...data.splice(dragIndex, 1))
    this.setState({data})
  }

  moveDown = (record) => {
    let data = fromJS(this.state.data).toJS()

    let dragIndex = data.findIndex(c => c.MenuID === record.MenuID)
    let hoverIndex = dragIndex + 1

    if (hoverIndex === data.length) return

    data.splice(hoverIndex, 0, ...data.splice(dragIndex, 1))
    this.setState({data})
  }

  delMenu = (record) => {
    const { data } = this.state
    const _this = this

    confirm({
      title: '确定删除吗？',
      content: '',
      onOk() {
        _this.setState({data: data.filter(item => item.MenuID !== record.MenuID)})
      },
      onCancel() {}
    })
  }

  editMenu = (record) => {
    this.setState({editMenu: record, visible: true})
  }

  plusMenu = () => {
    let _menu = {
      name: '菜单',
      property: 'menu'
    }

    this.setState({editMenu: _menu, visible: true})
  }

  menuSubmit = () => {
    const { editMenu, data } = this.state

    this.menuRef.handleConfirm().then(res => {
      let _menu = {...editMenu, ...res}
      let _data = fromJS(data).toJS()

      if (!_menu.MenuID) {
        _menu.MenuID = Utils.getuuid()
        _data.push(_menu)
      } else {
        _data = _data.map(item => {
          if (item.MenuID === _menu.MenuID) {
            return _menu
          } else {
            return item
          }
        })
      }

      if (editMenu.MenuID && editMenu.property === 'menu' && _menu.property !== 'menu') {
        const _this = this
        confirm({
          content: '菜单属性由“菜单”切换至其他类型时，菜单将被重置，即解除之前菜单的绑定关系，确定修改吗？',
          onOk() {
            _data = _data.map(item => {
              if (item.MenuID === _menu.MenuID) {
                item.MenuID = Utils.getuuid()
              }
              return item
            })
            _this.setState({data: _data, editMenu: null, visible: false})
          },
          onCancel() {}
        })
      } else {
        this.setState({data: _data, editMenu: null, visible: false})
      }
    })
  }

  menuUpdate = (res) => {
    const { data } = this.state

    this.setState({
      data: data.map(item => {
        if (item.MenuID === res.MenuID) {
          return res
        } else {
          return item
        }
      })
    })
  }

  render() {
    const { cols } = this.props
    const { columns, data, visible, editMenu } = this.state

    return (
      <div className="menu-control-wrap">
        <Button className="menu-plus mk-green" onClick={this.plusMenu}>添加</Button>
        <Table
          rowKey="MenuID"
          columns={columns}
          dataSource={data}
          pagination={false}
        />
        <Modal
          title="编辑"
          visible={visible}
          width={750}
          maskClosable={false}
          onOk={this.menuSubmit}
          onCancel={() => { this.setState({ visible: false }) }}
          destroyOnClose
        >
          <MenuForm
            menu={editMenu}
            cols={cols}
            inputSubmit={this.menuSubmit}
            wrappedComponentRef={(inst) => this.menuRef = inst}
          />
        </Modal>
      </div>
    )
  }
}

export default MenuTable