From e36eb1999794bd71e76482b92a0b0b20f49d0032 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 05 三月 2021 19:37:03 +0800
Subject: [PATCH] 2021-03-05
---
src/pc/components/navbar/normal-navbar/menusetting/menutable/index.jsx | 462 ++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 405 insertions(+), 57 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
index 6d38929..bd6a4ce 100644
--- a/src/pc/components/navbar/normal-navbar/menusetting/menutable/index.jsx
+++ b/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="缂栬緫"
--
Gitblit v1.8.0