From 0c69ee2da86d88e5ab5ca7d30bb4f7873a72e43e Mon Sep 17 00:00:00 2001
From: gaoshuaixing <gaoshuaixing@bilibili.com>
Date: Thu, 13 Jul 2023 19:51:46 +0800
Subject: [PATCH] <a-list-item

---
 frontend/src/layouts/AppSider.vue             | 44 +++++++++++--------
 frontend/src/layouts/Menu.vue                 | 37 +++++++++-------
 frontend/src/views/hardware/printer/Index.vue | 14 +++---
 3 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/frontend/src/layouts/AppSider.vue b/frontend/src/layouts/AppSider.vue
index 7d3e5a0..26e0d2e 100644
--- a/frontend/src/layouts/AppSider.vue
+++ b/frontend/src/layouts/AppSider.vue
@@ -13,8 +13,8 @@
         class="menu-item" 
         theme="light" 
         mode="inline"
-        :selectedKeys="state.selectedKeys"
-        @click="handleClick"
+        :selectedKeys="[current]"
+        @click="menuHandle"
       >
         <a-menu-item v-for="(menuInfo, index) in menu" :key="index">
           <!-- <a-icon :type="menuInfo.icon" /> -->
@@ -30,7 +30,7 @@
   </a-layout>
 </template>
 <script>
-import { reactive } from 'vue';
+// import { reactive } from 'vue';
 // import { useRoute, useRouter } from 'vue-router'
 
 // const Router = useRouter()
@@ -39,22 +39,22 @@ import { reactive } from 'vue';
 
 export default {
   name: 'AppSider',
-  setup() {
-    const state = reactive({
-      selectedKeys: ['menu_1'],
-    });
+  // setup() {
+  //   const state = reactive({
+  //     selectedKeys: ['menu_1'],
+  //   });
     
-    const handleClick = e => {
-      state.selectedKeys = [e.key];
-      console.log('state.selectedKeys:', state.selectedKeys)
-      //menuHandle ()
-    };
+  //   const handleClick = e => {
+  //     state.selectedKeys = [e.key];
+  //     console.log('state.selectedKeys:', state.selectedKeys)
+  //     //menuHandle ()
+  //   };
 
-    return {
-      state,
-      handleClick,
-    };
-  },
+  //   return {
+  //     state,
+  //     handleClick,
+  //   };
+  // },
   data() {
     return {
       collapsed: true,
@@ -95,11 +95,19 @@ export default {
     this.menuHandle()
   },
   methods: {
-    menuHandle () {
+    menuHandle (e) {
+      console.log('sider menu e:', e);
+      this.current = e ? e.key : this.current;
+      console.log('sider menu current:', this.current);
+
       const linkInfo = this.menu[this.current]
       console.log('[home] load linkInfo:', linkInfo);
       this.$router.push({ name: linkInfo.pageName, params: linkInfo.params})
     },
+    changeMenu(e) {
+      console.log('sider menu e:', e);
+      //this.current = e.key;
+    }
   },
 };
 </script>
diff --git a/frontend/src/layouts/Menu.vue b/frontend/src/layouts/Menu.vue
index 3e297ad..aa5cab7 100644
--- a/frontend/src/layouts/Menu.vue
+++ b/frontend/src/layouts/Menu.vue
@@ -7,8 +7,8 @@
       <a-menu 
         theme="light" 
         mode="inline" 
-        :selectedKeys="state.selectedKeys"
-        @click="handleClick">
+        :selectedKeys="[current]"
+        @click="changeMenu">
         <a-menu-item v-for="(menuInfo, subIndex) in menu" :key="subIndex">
           <router-link :to="{ name: menuInfo.pageName, params: menuInfo.params}">
             <span>{{ menuInfo.title }}</span>
@@ -24,25 +24,25 @@
   </a-layout>
 </template>
 <script>
-import { reactive } from 'vue';
+// import { reactive } from 'vue';
 // :default-selected-keys="[default_key]" 
 import subMenu from '@/config/subMenu';
 
 export default {
-  setup() {
-    const state = reactive({
-      selectedKeys: ['menu_100'],
-    });
+  // setup() {
+  //   const state = reactive({
+  //     selectedKeys: ['menu_100'],
+  //   });
     
-    const handleClick = e => {
-      state.selectedKeys = [e.key];
-    };
+  //   const handleClick = e => {
+  //     state.selectedKeys = [e.key];
+  //   };
 
-    return {
-      state,
-      handleClick,
-    };
-  },
+  //   return {
+  //     state,
+  //     handleClick,
+  //   };
+  // },
   props: {
     id: {
       type: String,
@@ -52,12 +52,15 @@ export default {
   data() {
     return {
       menu:{},
+      //selectedKeys: ['menu_100'],
       current: 'menu_100',
       keys: []
     };
   },
   watch: {
     id: function () {
+      console.log('watch id ----- ', this.id);
+      this.current = 'menu_100';
       this.menuHandle();
     },
   },
@@ -76,6 +79,10 @@ export default {
       const linkInfo = this.menu[this.current];
       this.$router.push({ name: linkInfo.pageName, params: linkInfo.params});
     },
+    changeMenu(e) {
+      console.log('changeMenu e:', e);
+      this.current = e.key;
+    }
   }
 };
 </script>
diff --git a/frontend/src/views/hardware/printer/Index.vue b/frontend/src/views/hardware/printer/Index.vue
index 0f30aa3..4343eac 100644
--- a/frontend/src/views/hardware/printer/Index.vue
+++ b/frontend/src/views/hardware/printer/Index.vue
@@ -10,12 +10,14 @@
     </div>
     <div class="one-block-2">
       <a-list size="small" bordered :data-source="printerList">
-        <a-list-item slot="renderItem" slot-scope="item">
-          {{ item.displayName }} {{ defaultDevice(item) }}
-        </a-list-item>
-        <div slot="header">
-          设备列表
-        </div>
+        <template #renderItem="{ item }">
+          <a-list-item>
+            {{ item.displayName }} {{ defaultDevice(item) }}
+          </a-list-item>
+        </template>
+        <template #header>
+          <div>设备列表</div>
+        </template>
       </a-list>
     </div>
     <div class="one-block-1">