2021-04-07

king

2021-04-07 f3167f8371d19d0ea8fe7d0e7af5517ff0b08cd2

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

New file
@@ -0,0 +1,549 @@
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 ThdTable extends Component {
  static propTpyes = {
    menus: PropTypes.object,    // 卡片行信息
    menuUpdate: PropTypes.func    // 卡片行信息
  }

  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: '关联菜单', classify: '分类'}

        return trans[text]
      }},
      { title: '打开方式', dataIndex: 'open', key: 'open',  render: (text, record) => {
        if (record.property === 'classify') return ''

        const trans = {blank: '新窗口', self: '当前窗口'}

        return trans[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 { menu } = this.props
    this.setState({data: menu.sublist ? fromJS(menu.sublist).toJS() : []})
  }

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

  moveUp = (record) => {
    const { menu } = this.props
    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})
    this.props.menuUpdate({...menu, sublist: data})
  }

  moveDown = (record) => {
    const { menu } = this.props
    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})
    this.props.menuUpdate({...menu, sublist: data})
  }

  delMenu = (record) => {
    const { menu } = this.props
    const _this = this
    
    confirm({
      title: '确定删除吗？',
      content: '',
      onOk() {
        let _data = _this.state.data.filter(item => item.MenuID !== record.MenuID)
        _this.setState({data: _data})
        _this.props.menuUpdate({...menu, sublist: _data})
        MKEmitter.emit('delButtons', [record.MenuID])
      },
      onCancel() {}
    })
  }

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

  plusMenu = () => {
    let _menu = {
      name: '菜单',
      property: 'menu',
      level: 3,
      sublist: []
    }

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

  menuSubmit = () => {
    const { menu } = this.props
    const { editMenu } = this.state

    this.menuRef.handleConfirm().then(res => {
      let _menu = {...editMenu, ...res}
      let _data = this.state.data
      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
          }
        })
      }
      this.setState({data: _data, editMenu: null, visible: false})
      this.props.menuUpdate({...menu, sublist: _data})
    })
  }

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

    return (
      <div className="thdmenu-control-wrap">
        <Icon type="plus" style={{color: '#26C281', padding: '5px', fontSize: '16px'}} onClick={this.plusMenu}/>
        <Table
          rowKey="MenuID"
          size="small"
          columns={columns}
          dataSource={data}
          pagination={false}
        />
        <Modal
          title="编辑"
          visible={visible}
          width={600}
          maskClosable={false}
          onOk={this.menuSubmit}
          onCancel={() => { this.setState({ visible: false }) }}
          destroyOnClose
        >
          <MenuForm
            menu={editMenu}
            inputSubmit={this.menuSubmit}
            wrappedComponentRef={(inst) => this.menuRef = inst}
          />
        </Modal>
      </div>
    )
  }
}

class SubTable extends Component {
  static propTpyes = {
    menu: PropTypes.object,    // 卡片行信息
    menuUpdate: PropTypes.func    // 卡片行信息
  }

  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: '关联菜单', classify: '分类'}

        return trans[text]
      }},
      { title: '打开方式', dataIndex: 'open', key: 'open',  render: (text, record) => {
        if (record.property === 'classify') return ''

        const trans = {blank: '新窗口', self: '当前窗口'}

        return trans[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 { menu } = this.props

    this.setState({data: menu.sublist ? fromJS(menu.sublist).toJS() : []})
  }

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

  moveUp = (record) => {
    const { menu } = this.props
    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})
    this.props.menuUpdate({...menu, sublist: data})
  }

  moveDown = (record) => {
    const { menu } = this.props
    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})
    this.props.menuUpdate({...menu, sublist: data})
  }

  delMenu = (record) => {
    const { menu } = this.props
    const _this = this
    
    confirm({
      title: (record.property === 'classify' && record.sublist.length > 0 ? '菜单下含有子菜单，' : '') + '确定删除吗？',
      content: '',
      onOk() {
        let _data = _this.state.data.filter(item => item.MenuID !== record.MenuID)
        _this.setState({data: _data})
        _this.props.menuUpdate({...menu, sublist: _data})

        let uuids = [record.MenuID]
        record.sublist && record.sublist.forEach(item => {
          uuids.push(item.MenuID)
        })
        MKEmitter.emit('delButtons', uuids)
      },
      onCancel() {}
    })
  }

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

  plusMenu = () => {
    let _menu = {
      name: '菜单',
      property: 'classify',
      level: 2,
      sublist: []
    }

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

  menuSubmit = () => {
    const { menu } = this.props
    const { editMenu } = this.state

    this.menuRef.handleConfirm().then(res => {
      let _menu = {...editMenu, ...res}
      let _data = this.state.data
      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
          }
        })
      }
      this.setState({data: _data, editMenu: null, visible: false})
      this.props.menuUpdate({...menu, sublist: _data})
    })
  }

  menuUpdate = (res) => {
    const { menu } = this.props

    let _data = this.state.data.map(item => {
      if (item.MenuID === res.MenuID) {
        return res
      } else {
        return item
      }
    })

    this.setState({data: _data})
    this.props.menuUpdate({...menu, sublist: _data})
  }

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

    return (
      <div className="submenu-control-wrap">
        <Icon type="plus" style={{color: '#26C281', padding: '5px', fontSize: '16px'}} onClick={this.plusMenu}/>
        <Table
          size="middle"
          rowKey="MenuID"
          columns={columns}
          rowClassName={record => record.property}
          expandedRowRender={record => <ThdTable menu={record} menuUpdate={this.menuUpdate} />}
          dataSource={data}
          pagination={false}
        />
        <Modal
          title="编辑"
          visible={visible}
          width={600}
          maskClosable={false}
          onOk={this.menuSubmit}
          onCancel={() => { this.setState({ visible: false }) }}
          destroyOnClose
        >
          <MenuForm
            menu={editMenu}
            inputSubmit={this.menuSubmit}
            wrappedComponentRef={(inst) => this.menuRef = inst}
          />
        </Modal>
      </div>
    )
  }
}

class MenuTable extends Component {
  static propTpyes = {
    menus: PropTypes.object,    // 卡片行信息
  }

  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: '关联菜单', classify: '分类'}

        return trans[text]
      }},
      { title: '打开方式', dataIndex: 'open', key: 'open',  render: (text, record) => {
        if (record.property === 'classify') return ''

        const trans = {blank: '新窗口', self: '当前窗口'}

        return trans[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: (record.property === 'classify' && record.sublist.length > 0 ? '菜单下含有子菜单，' : '') + '确定删除吗？',
      content: '',
      onOk() {
        _this.setState({data: data.filter(item => item.MenuID !== record.MenuID)})

        let uuids = [record.MenuID]
        record.sublist && record.sublist.forEach(item => {
          uuids.push(item.MenuID)

          item.sublist && item.sublist.forEach(cell => {
            uuids.push(cell.MenuID)
          })
        })
        MKEmitter.emit('delButtons', uuids)
      },
      onCancel() {}
    })
  }

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

  plusMenu = () => {
    let _menu = {
      name: '菜单',
      property: 'classify',
      level: 1,
      sublist: []
    }

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

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

    this.menuRef.handleConfirm().then(res => {
      let _menu = {...editMenu, ...res}
      if (!_menu.MenuID) {
        _menu.MenuID = Utils.getuuid()
        this.setState({data: [...data, _menu], editMenu: null, visible: false})
      } else {
        this.setState({
          editMenu: null,
          visible: false,
          data: data.map(item => {
            if (item.MenuID === _menu.MenuID) {
              return _menu
            } else {
              return item
            }
          })
        })
      }
    })
  }

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

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

  render() {
    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}
          rowClassName={record => record.property}
          expandedRowRender={record => <SubTable menu={record} menuUpdate={this.menuUpdate} />}
          dataSource={data}
          pagination={false}
        />
        <Modal
          title="编辑"
          visible={visible}
          width={600}
          maskClosable={false}
          onOk={this.menuSubmit}
          onCancel={() => { this.setState({ visible: false }) }}
          destroyOnClose
        >
          <MenuForm
            menu={editMenu}
            inputSubmit={this.menuSubmit}
            wrappedComponentRef={(inst) => this.menuRef = inst}
          />
        </Modal>
      </div>
    )
  }
}

export default MenuTable