perf: 修改资产

src/router/console/assets.js

@@ -12,7 +12,7 @@ export default [
       {
         path: '',
         name: 'AssetList',
-        component: () => import('@/views/assets/Asset/AssetList.vue'),
+        component: () => import('@/views/assets/Asset/AssetList/index.vue'),
         meta: { title: i18n.t('route.AssetList') }
       },
       {

src/views/assets/Asset/AssetList/NodeAssetsUpdateDialog.vue

@@ -2,7 +2,7 @@
   <div class="asset-select-dialog">
     <Dialog
       v-if="iVisible"
-      :title="this.$t('assets.Assets')"
+      :title="$tc('assets.Assets')"
       :visible.sync="iVisible"
       width="70%"
       top="1vh"

src/views/assets/Asset/AssetList/PlatformDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <Dialog
     v-if="iVisible"
-    :title="this.$t('assets.SelectPlatforms')"
+    :title="$tc('assets.SelectPlatforms')"
     :visible.sync="iVisible"
     width="70%"
     top="1vh"
@@ -77,12 +77,12 @@ export default {
       }
     },
     sortedPlatforms() {
-      return _.groupBy(this.platforms, (item) => item.category)
+      return _.groupBy(this.platforms, (item) => item.category.value)
     },
     categoryMapper() {
       const mapper = {}
       for (const p of this.platforms) {
-        mapper[p.category] = p.category_display
+        mapper[p.category.value] = p.category.label
       }
       return mapper
     }

src/views/assets/Asset/AssetList/TreeMenu.vue

@@ -33,7 +33,7 @@
     />
     <Dialog
       width="50%"
-      :title="this.$t('assets.NodeInformation')"
+      :title="$tc('assets.NodeInformation')"
       :visible.sync="nodeInfoDialogSetting.dialogVisible"
       :show-cancel="false"
       :show-confirm="false"

src/views/assets/Asset/AssetList/index.vue

@@ -63,7 +63,7 @@ export default {
           { name: 'all', title: '所有' },
           ...Categories
         ],
-        activeMenu: 'host'
+        activeMenu: 'all'
       },
       treeSetting: {
         showMenu: true,
@@ -258,6 +258,7 @@ export default {
     this.treeSetting.showUpdate = this.$hasPerm('assets.change_node')
     this.treeSetting.showDelete = this.$hasPerm('assets.delete_node')
     this.treeRef = this.$refs.TreeList
+    this.handleTabChange()
   },
   methods: {
     decorateRMenu() {
@@ -277,12 +278,13 @@ export default {
       this.$refs.TreeList.$refs.TreeTable.handleUrlChange(url)
     },
     handleTabChange(item) {
+      const category = item ? item.name : this.tab.activeMenu
       this.show = false
       setTimeout(() => {
         let url = '/api/v1/assets/assets/'
-        const showTree = item.name === 'all'
-        if (item.name !== 'all') {
-          url = `${url}?category=${item.name}`
+        const showTree = category === 'all'
+        if (category !== 'all') {
+          url = `${url}?category=${category}`
         }
         this.treeSetting.url = url
         this.showTree = showTree

src/views/assets/Asset/components/Protocols/index.vue

@@ -1,166 +0,0 @@
-<template>
-  <div>
-    <div v-for="(item,index) in items" :key="index" style="display: flex;margin-top: 8px;">
-      <el-input v-model="item.value" class="input-with-select" v-bind="$attrs">
-        <el-select slot="prepend" v-model="item.select" @change="handleProtocolChange">
-          <el-option v-for="p of remainProtocols" :key="p.name" :label="p.name" :value="p.name" />
-        </el-select>
-      </el-input>
-      <div class="input-button">
-        <el-button type="danger" icon="el-icon-minus" style="flex-shrink: 0;" size="mini" :disabled="items.length===1" @click="handleDelete(index)" />
-        <el-button type="primary" icon="el-icon-plus" style="flex-shrink: 0;" size="mini" @click="handleAdd(index)" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: [Array],
-      default: () => []
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      select: '',
-      items: [
-        {
-          value: '',
-          select: ''
-        }
-      ],
-      protocols: [
-        {
-          name: 'ssh',
-          port: 22
-        },
-        {
-          name: 'rdp',
-          port: 3389
-        },
-        {
-          name: 'telnet',
-          port: 23
-        },
-        {
-          name: 'vnc',
-          port: 5901
-        }
-      ]
-    }
-  },
-  computed: {
-    values() {
-      const data = []
-      this.items.map(i => {
-        data.push(`${i.select}/${i.value}`)
-      })
-      return data
-    },
-    itemsMap() {
-      const mapper = {}
-      for (const item of this.items) {
-        mapper[item.select] = item
-      }
-      return mapper
-    },
-    remainProtocols() {
-      const remain = []
-      for (const item of this.protocols) {
-        if (!this.itemsMap[item.name]) {
-          remain.push(item)
-        }
-      }
-      return remain
-    }
-  },
-  watch: {
-    values: {
-      handler(value) {
-        this.$emit('input', value)
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-  mounted() {
-    if (this.value.length !== 0) {
-      this.items = []
-      this.value.forEach(v => {
-        const data = v.split('/')
-        this.items.push({
-          value: data[1],
-          select: data[0]
-        })
-      })
-    }
-  },
-  methods: {
-    onInput(val) {
-      this.$emit('input', 'my-input: ' + val)
-    },
-    handleDelete(index) {
-      this.items = this.items.filter((value, i) => {
-        return i !== index
-      })
-    },
-    handleAdd(index) {
-      this.items.push(
-        {
-          value: '',
-          select: ''
-        }
-      )
-    },
-    handleProtocolChange(val) {
-      let port = 22
-      switch (val) {
-        case 'rdp':
-          port = 3389
-          break
-        case 'telnet':
-          port = 23
-          break
-        case 'vnc':
-          port = 5901
-          break
-      }
-      this.itemsMap[val].value = port
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-  .el-select .el-input {
-    width: 130px;
-  }
-
-  .input-with-select {
-    flex-shrink: 1;
-    width: calc(100% - 80px);
-  }
-
-  .input-with-select .el-input-group__prepend {
-    background-color: #fff;
-  }
-
-  .el-select  ::v-deep  .el-input__inner {
-    width: 100px;
-  }
-
-  .input-button {
-    display: flex;
-    margin-top: 4px;
-    padding-left: 20px;
-  }
-  .input-button  ::v-deep  .el-button.el-button--mini {
-    height: 25px;
-    padding: 5px;
-  }
-</style>