From 5f1d67ee21535d0732a150f19f54f099a72fe85a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com>
Date: Mon, 29 Aug 2022 10:40:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/Asset/AssetList/PlatformDialog.vue | 35 +++++++++++++++----
 src/views/assets/Asset/AssetList/index.vue    |  5 ++-
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/views/assets/Asset/AssetList/PlatformDialog.vue b/src/views/assets/Asset/AssetList/PlatformDialog.vue
index 8990481c9..7dc162a83 100644
--- a/src/views/assets/Asset/AssetList/PlatformDialog.vue
+++ b/src/views/assets/Asset/AssetList/PlatformDialog.vue
@@ -12,10 +12,10 @@
       <el-row :gutter="20">
         <el-collapse v-model="activePlatform" accordion>
           <el-collapse-item
-            v-for="(ps, category) in sortedPlatforms"
-            :key="category"
-            :title="categoryMapper[category]"
-            :name="category"
+            v-for="(ps, categoryName) in sortedPlatforms"
+            :key="categoryName"
+            :title="categoryMapper[categoryName]"
+            :name="categoryName"
           >
             <el-col
               v-for="(platform, index) of ps"
@@ -49,6 +49,13 @@ export default {
     visible: {
       type: Boolean,
       default: false
+    },
+    category: {
+      type: String,
+      Validator: (value) => {
+        return ['all', 'host', 'networking', 'database', 'cloud', 'web'].includes(value)
+      },
+      default: 'all'
     }
   },
   data() {
@@ -77,7 +84,9 @@ export default {
       }
     },
     sortedPlatforms() {
-      return _.groupBy(this.platforms, (item) => item.category.value)
+      const { category, platforms } = this
+      const filterPlatforms = _.groupBy(platforms, (item) => item.category.value)
+      return category === 'all' ? filterPlatforms : { [category]: filterPlatforms[category] }
     },
     categoryMapper() {
       const mapper = {}
@@ -87,7 +96,19 @@ export default {
       return mapper
     }
   },
-  mounted() {
+  watch: {
+    category: {
+      handler(val) {
+        if (val === 'all') {
+          this.activePlatform = 'host'
+        } else {
+          this.activePlatform = val
+        }
+      },
+      immediate: true
+    }
+  },
+  created() {
     this.$axios.get('/api/v1/assets/platforms/').then(data => {
       this.platforms = data
     })
@@ -109,7 +130,7 @@ export default {
         cloud: 'CloudCreate',
         remote_app: 'RemoteAppCreate'
       }
-      const route = mapper[platform.category] || 'HostCreate'
+      const route = mapper[platform.category.value] || 'HostCreate'
       this.$router.push({ name: route, query: { platform: platform.id }})
       this.iVisible = false
     }
diff --git a/src/views/assets/Asset/AssetList/index.vue b/src/views/assets/Asset/AssetList/index.vue
index 1fd8f3cfe..cb32d08a1 100644
--- a/src/views/assets/Asset/AssetList/index.vue
+++ b/src/views/assets/Asset/AssetList/index.vue
@@ -21,7 +21,7 @@
       :visible.sync="updateSelectedDialogSetting.visible"
       v-bind="updateSelectedDialogSetting"
     />
-    <PlatformDialog :visible.sync="showPlatform" />
+    <PlatformDialog :visible.sync="showPlatform" :category="category" />
   </div>
 </template>
 
@@ -65,6 +65,7 @@ export default {
         ],
         activeMenu: 'all'
       },
+      category: '',
       treeSetting: {
         showMenu: true,
         showRefresh: true,
@@ -279,6 +280,8 @@ export default {
     },
     handleTabChange(item) {
       const category = item ? item.name : this.tab.activeMenu
+      this.category = category
+      console.log('category: ', category)
       this.show = false
       setTimeout(() => {
         let url = '/api/v1/assets/assets/'