From 137fb8ea6af2789b3238b22bac31d80bced41dfe Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 28 七月 2021 11:39:39 +0800
Subject: [PATCH] 2021-07-28
---
src/mob/components/navbar/normal-navbar/menusetting/menutable/index.jsx | 198 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 198 insertions(+), 0 deletions(-)
diff --git a/src/mob/components/navbar/normal-navbar/menusetting/menutable/index.jsx b/src/mob/components/navbar/normal-navbar/menusetting/menutable/index.jsx
new file mode 100644
index 0000000..b17ff7d
--- /dev/null
+++ b/src/mob/components/navbar/normal-navbar/menusetting/menutable/index.jsx
@@ -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
\ No newline at end of file
--
Gitblit v1.8.0