2021-03-05

king

2021-03-05 e36eb1999794bd71e76482b92a0b0b20f49d0032

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

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

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

class SubTable extends Component {
const { confirm } = Modal

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

  state = {
    data: [],
    editMenu: null,
    columns: [
      { title: 'Date', dataIndex: 'date', key: 'date' },
      { title: 'Name', dataIndex: 'name', key: 'name' },
      {
        title: 'Status',
        key: 'state',
        render: () => (
          <span>
            Finished
          </span>
        ),
      },
      { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
      {
        title: 'Action',
        dataIndex: 'operation',
        key: 'operation',
        render: () => (
          <span className="table-operation">
            <a href>Pause</a>
            <a href>Stop</a>
          </span>
        ),
      },
      { title: '菜单名称', dataIndex: 'name', key: 'name' },
      { 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: '操作', 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 { data } = this.props

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

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

  handleSubmit = (e) => {
    e.preventDefault()
  moveUp = (record) => {
    const { menu } = this.props
    let data = fromJS(this.state.data).toJS()

    if (this.props.inputSubmit) {
      this.props.inputSubmit()
    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})
      },
      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 } = this.state
    const { columns, data, visible, editMenu } = this.state

    return (
      <Table
        className="components-table-demo-nested"
        columns={columns}
        dataSource={data}
      />
      <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: '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: '操作', 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})
      },
      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>
    )
  }
}
@@ -81,14 +355,26 @@
    editMenu: null,
    columns: [
      { title: '菜单名称', dataIndex: 'name', key: 'name' },
      { title: '属性', dataIndex: 'property', key: 'property',  render: text => {
        if (text === 'menu') {
          return '菜单'
        } else {
          return '分类'
        }
      { title: '菜单属性', dataIndex: 'property', key: 'property',  render: text => {
        const trans = {menu: '菜单', link: '链接', linkmenu: '关联菜单', classify: '分类'}

        return trans[text]
      }},
      { title: 'Action', key: 'operation', render: () => <a href="#d">Publish</a> },
      { title: '打开方式', dataIndex: 'open', key: 'open',  render: (text, record) => {
        if (record.property === 'classify') return ''

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

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

@@ -102,12 +388,54 @@
    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)})
      },
      onCancel() {}
    })
  }

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

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

    this.setState({editMenu: _menu, visible: true})
@@ -118,18 +446,36 @@

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

@@ -140,10 +486,12 @@
      <div className="menu-control-wrap">
        <Button className="menu-plus mk-green" onClick={this.plusMenu}>添加</Button>
        <Table
          className="components-table-demo-nested"
          rowKey="MenuID"
          columns={columns}
          expandedRowRender={<SubTable />}
          rowClassName={record => record.property}
          expandedRowRender={record => <SubTable menu={record} menuUpdate={this.menuUpdate} />}
          dataSource={data}
          pagination={false}
        />
        <Modal
          title="编辑"