From 41c55c1f103658b997f7a828a7067bdb228f1df0 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 04 十月 2022 23:35:10 +0800
Subject: [PATCH] 2022-10-04

---
 src/menu/tablenodes/index.jsx |   85 +++++++++++++++++++++++++++++++++++-------
 1 files changed, 70 insertions(+), 15 deletions(-)

diff --git a/src/menu/tablenodes/index.jsx b/src/menu/tablenodes/index.jsx
index 10b38e2..0610c01 100644
--- a/src/menu/tablenodes/index.jsx
+++ b/src/menu/tablenodes/index.jsx
@@ -1,14 +1,15 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import { is, fromJS } from 'immutable'
-import { Modal, Button, notification, Spin } from 'antd'
+import { Modal, Button, notification, Spin, Input } from 'antd'
 import { ForkOutlined } from '@ant-design/icons'
 
 import Api from '@/api'
 import G6 from "@antv/g6"
 import Utils from '@/utils/utils.js'
-import MKEmitter from '@/utils/events.js'
 import './index.scss'
+
+const { Search } = Input
 
 class TableNodes extends Component {
   static propTpyes = {
@@ -18,6 +19,7 @@
   state = {
     visible: false,
     loading: false,
+    nodes: null,
     empty: false
   }
 
@@ -60,6 +62,8 @@
 
   trigger = () => {
     const { config } = this.props
+
+    if (!config) return
 
     this.setState({visible: true, loading: true, empty: false}, () => {
       let param = {
@@ -118,14 +122,31 @@
           })
         }
 
-        if (ptbs.length) {
-          ptbs.forEach((item, i) => {
+        if (result.tb_list) {
+          result.tb_list.sort((a, b) => a.tbname > b.tbname ? 1 : -1)
+          result.tb_list.forEach((item, i) => {
             let cell = {
-              label: item,
-              id: 'menu' + i,
+              label: item.tbname,
+              name: item.tbname.toLowerCase(),
+              id: 'table' + i,
               direction: 'right',
               color: '#1890ff',
-              // children: []
+              children: []
+            }
+
+            if (item[item.tbname]) {
+              item[item.tbname].forEach((m, i) => {
+                if (m.debug_url) {
+                  let _param = JSON.parse(window.decodeURIComponent(window.atob(m.debug_url)))
+                  cell.children.push({
+                    label: _param.MenuName,
+                    id: item.tbname + 'menu' + i,
+                    direction: 'right',
+                    color: '#1890ff',
+                    param: _param
+                  })
+                }
+              })
             }
 
             data.children.push(cell)
@@ -135,7 +156,7 @@
         if (data.children.length === 0) {
           this.setState({empty: true, loading: false})
         } else {
-          this.setState({loading: false})
+          this.setState({loading: false, nodes: data})
           this.getForks(data)
         }
       })
@@ -143,9 +164,42 @@
   }
 
   changeMenu = (menu) => {
-    if (menu.depth === 0) return
+    if (menu.direction !== 'right') return
 
-    MKEmitter.emit('changeEditMenu', menu)
+    if (menu.depth === 1) {
+      window.open('#/hs')
+    } else if (menu.param) {
+      if (menu.param.type === 'admin') {
+        if (menu.param.MenuType === 'custom') {
+          let _param = {...menu.param}
+          delete _param.type
+          _param = window.btoa(window.encodeURIComponent(JSON.stringify(_param)))
+          window.open(`#/menudesign/${_param}`)
+        }
+      }
+    }
+  }
+
+  resetNodes = (key) => {
+    let data = fromJS(this.state.nodes).toJS()
+    key = key ? key.toLowerCase() : ''
+
+    data.children.forEach(cell => {
+      if (cell.direction === 'right') {
+        cell.fontcolor = ''
+        if (key && cell.name.indexOf(key) > -1) {
+          cell.fontcolor = 'orange'
+        }
+      }
+    })
+    let _element = document.getElementById('mkTableNode')
+    if (_element) {
+      _element.innerHTML = ''
+    }
+
+    this.setState({}, () => {
+      this.getForks(data)
+    })
   }
 
   getForks = (data) => {
@@ -185,7 +239,7 @@
           return `
           <group>
             <rect draggable="true" style={{width: ${width}, height: 26, cursor: ${cfg.direction !== 'left' ? 'pointer' : 'default'}, fill: 'transparent' }}>
-              <text style={{ fontSize: 12, fill: black, cursor: ${cfg.direction !== 'left' ? 'pointer' : 'default'}, marginLeft: 12, marginTop: 6 }}>${cfg.label}</text>
+              <text style={{ fontSize: 12, fill: ${cfg.fontcolor ? cfg.fontcolor : 'black'}, cursor: ${cfg.direction !== 'left' ? 'pointer' : 'default'}, marginLeft: 12, marginTop: 6 }}>${cfg.label}</text>
             </rect>
             <rect style={{ fill: ${color}, width: ${width}, cursor: ${cfg.direction !== 'left' ? 'pointer' : 'default'}, height: 2, x: 0, y: 32 }} />
           </group>
@@ -278,7 +332,7 @@
     };
 
     const tree = new G6.TreeGraph({
-      container: 'mountNode',
+      container: 'mkTableNode',
       width: this.wrap.offsetWidth,
       height: this.wrap.offsetHeight,
       fitView: true,
@@ -337,11 +391,12 @@
           footer={[]}
           destroyOnClose
         >
-          <div className="header">椤甸潰鍏崇郴鍥�</div>
+          <div className="header">琛ㄥ叧绯诲浘</div>
+          <Search className="tb-search" placeholder="璇疯緭鍏ヨ〃鍚�" onSearch={value => this.resetNodes(value)} enterButton />
           <div className="wrap">
             {loading ? <Spin size="large" /> : null}
-            {empty ? <div className="empty">鏈煡璇㈠埌椤甸潰鍏宠仈鑿滃崟銆�</div> : null}
-            <div className="mountNode" id="mountNode" ref={ref => this.wrap = ref}></div>
+            {empty ? <div className="empty">鏈煡璇㈠埌琛ㄥ悕淇℃伅銆�</div> : null}
+            <div className="mountNode" id="mkTableNode" ref={ref => this.wrap = ref}></div>
           </div>
           <div className="footer">
             <Button key="cancel" onClick={() => { this.setState({ visible: false })}}>鍏抽棴</Button>

--
Gitblit v1.8.0