From f3167f8371d19d0ea8fe7d0e7af5517ff0b08cd2 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 07 四月 2021 23:25:29 +0800
Subject: [PATCH] 2021-04-07
---
src/pc/components/navbar/normal-navbar/menusetting/menutable/index.jsx | 549 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 549 insertions(+), 0 deletions(-)
diff --git a/src/pc/components/navbar/normal-navbar/menusetting/menutable/index.jsx b/src/pc/components/navbar/normal-navbar/menusetting/menutable/index.jsx
new file mode 100644
index 0000000..92d751b
--- /dev/null
+++ b/src/pc/components/navbar/normal-navbar/menusetting/menutable/index.jsx
@@ -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
\ No newline at end of file
--
Gitblit v1.8.0