update

package.json

@@ -16,6 +16,8 @@
     "dayjs": "^1.11.1",
     "downloadjs": "^1.4.7",
     "element-plus": "^1.3.0-beta.8",
+    "less": "^4.1.2",
+    "less-loader": "^10.2.0",
     "vue": "^3.2.25",
     "vue-router": "^4.0.14"
   },

src/Layout/index.vue

@@ -7,7 +7,7 @@ import { ref } from "vue";
 const appname = 'mining-manager'
 const store = getStore(appname)
 const dialogVisible = ref(false)
-console.log('aaa',SideMenu)
+// console.log('aaa',SideMenu)
 const logout = ()=>{
     console.log(store?.token);
     if(store){
@@ -59,14 +59,30 @@ const toggleLogout = ()=>{
 
       </div>
     </div>
-    <div class="content bg-gray-100 py-10 ">
-      <div class="">
+    <div class="content bg-gray-100  ">
+      <div id="side-menu">
         <SideMenu></SideMenu>
       </div>
-      <div class="">
+      <div id="inner-content">
         <router-view></router-view>
       </div>
 
     </div>
   </div>
 </template>
+<style scoped lang="less">
+  .content{
+    min-height: calc(100vh - 56px);
+    padding: 15px;
+    display: flex;
+    margin: 0 auto;
+    #side-menu{
+      width: 300px;
+      background-color: white;
+    }
+    #inner-content{
+      box-sizing: border-box;
+      flex-grow: 1;
+    }
+  }
+</style>

src/api/index.ts

@@ -38,6 +38,12 @@ export const doLogin = async (data:LoginData) => {
 export const getPlatList = async()=>{
     return instance.get('/api/admin/plat-list',).then(res=> res.data)
 }
+export const getNodeList = async(params:{id:string})=>{
+    return instance.get('/api/admin/node-list',{params}).then(res=> res.data)
+}
+export const getPoolList = async(params:{id:string})=>{
+    return instance.get('/api/admin/pool-list',{params}).then(res=> res.data)
+}
 
 export interface GetTransListParams{
     platId?:number

src/assets/css/common.less

+.m-container{
+  box-sizing: border-box;
+  //width: 100%;
+  margin-left: 15px;
+}
\ No newline at end of file

src/components/common/SideMenu.vue

 <script lang="tsx">
 import {Menu} from '../../types/menu'
 
-function genSubMenu(data: Menu) {
-  return (
-      <el-sub-menu index={data.key} >
-        <template>{data.name}</template>
-        {(data.children || []).map(menu => {
-              if (menu.children) {
-                return genSubMenu(menu)
-              } else {
-                return (
-                    <el-menu-item index={menu.key}>
-                      {menu.name}
-                    </el-menu-item>
-                )
-              }
-            }
-        )}
-      </el-sub-menu>
 
-  )
-}
 
 import {defineComponent, onMounted, reactive, watch} from 'vue'
 import {menu} from '../../config/menu'
@@ -33,11 +14,34 @@ export default defineComponent( ()=> {
     selectedKeys:[] as string[],
     openKeys:[] as string[],
   });
+  function genSubMenu(data: Menu) {
+    return (
+        <el-sub-menu  index={data.key}v-slots={{
+          title:()=>(
+              <span>{data.name}</span>
+          )
+        }}>
+          {(data.children || []).map(menu => {
+                if (menu.children) {
+                  return genSubMenu(menu)
+                } else {
+                  return (
+                      <el-menu-item  onClick={gotoRoute} index={menu.key}>
+                        {menu.name}
+                      </el-menu-item>
+                  )
+                }
+              }
+          )}
+        </el-sub-menu>
+
+    )
+  }
   // onBeforeRouteUpdate(to=>{
   //   console.log('to',to)
   // })
   onMounted(()=>{
-    console.log(route)
+    // console.log(route)
     data.selectedKeys=[route.fullPath]
     if(route.matched.length>1){
       data.openKeys=route.matched.filter((v,i)=>i<route.matched.length-1).map(v=>v.path);
@@ -45,19 +49,19 @@ export default defineComponent( ()=> {
   })
 
 
-  const gotoRoute=({ item, key, keyPath }:any)=>{
-
-    router.push({path:key})
+  const gotoRoute=(item:any)=>{
+    console.log(item)
+    router.push({path:item.index})
   }
   return ()=>(
-      <el-menu default-active={data.selectedKeys} default-openeds={data.openKeys} onClick={gotoRoute} theme="dark" mode="inline">
+      <el-menu  default-active={data.selectedKeys} default-openeds={data.openKeys} >
         {
           menu.map(m => {
             if (m.children) {
               return genSubMenu(m)
             } else {
               return (
-                  <el-menu-item index={m.key}>
+                  <el-menu-item onClick={gotoRoute} index={m.key}>
                     {m.name}
                   </el-menu-item>
               )

src/config/menu.ts

@@ -41,6 +41,21 @@ export const routes:RouteRecordRaw[]=[
             // }
         ]
     },
+    {
+        path:'/data',
+        component:Layout,
+        name:'数据概览',
+        redirect:'/data/new-user',
+        children:[
+            {
+                path: 'new-user',
+                name:'新增用户',
+                component: () => {
+                    return import('../views/data/newUser.vue')
+                }
+            },
+        ]
+    }
 
 ]
 // console.log(getMenu(routes,excludePath,null))

src/main.ts

@@ -4,4 +4,5 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import router from './router/index';
 import './style.css'
+import './assets/css/common.less'
 createApp(App).use(ElementPlus).use(router).mount('#app')

src/views/data/newUser.vue

+<template>
+  <div class="m-container relative  py-6  bg-white">
+    <div class="right relative flex-grow px-3  pb-28 ">
+      <Tabs @fresh="initTable"></Tabs>
+      <el-cascader :show-all-levels="false" :props="cascaderProps" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Tabs from '../../components/tabs.vue';
+import {getNodeList, getPlatList, getPoolList} from "../../api";
+const initTable=()=>{
+
+}
+const getList=(level:number,id?:string)=>{
+  console.log(level)
+  const searchArray=[getNodeList,getPoolList]
+  if(level>0&&id){
+   return searchArray[level-1]({id})
+  }
+  return getPlatList()
+}
+let id=0
+const cascaderProps={
+  lazy: true,
+  lazyLoad(node:any, resolve:any) {
+    const { level } = node
+    console.log(level,node)
+    getList(level,node.value).then(res=>{
+      const nodes=res.data.list.map((da:any)=>{
+        return {
+          value:da.id,
+          label:da.name||da.addr,
+          leaf:level>=2
+        }
+      })
+      resolve(nodes)
+      // console.log('re',node)
+    })
+    // setTimeout(() => {
+    //   const nodes = Array.from({ length: level + 1 }).map((item) => ({
+    //     value: ++id,
+    //     label: `Option - ${id}`,
+    //     leaf: level >= 2,
+    //   }))
+    //   // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
+    //
+    // }, 1000)
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/user/info.vue

@@ -149,7 +149,7 @@ const requestDataChanged = (v:any)=>  reqData.page = v
           </span>
         </template>
       </el-dialog>
-    <div class="container relative  flex py-6 mx-auto min-h-full min-h-workspace bg-white">
+    <div class="m-container relative  py-6  bg-white">
         <div class="right relative flex-grow px-3  pb-28 ">
             <Tabs @fresh="initTable"></Tabs>
             <Controllbar @eventEmitted="childDataChange" @dodownload="downloadModal=true" :btnEnable="disableDownload"></Controllbar>
@@ -188,8 +188,9 @@ const requestDataChanged = (v:any)=>  reqData.page = v
     </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 .el-table__header{
     width:100%;
 }
+
 </style>