feat: 资产显示标签

src/components/TableFormatters/TagsFormatter.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <el-tag
+      v-for="tag of cellValue"
+      :key="tag"
+      :type="getTagType(tag)"
+      class="tag-formatter"
+      disable-transitions
+    >
+      <i class="fa fa-tag" /> {{ tag }}
+    </el-tag>
+  </div>
+</template>
+
+<script>
+import BaseFormatter from './base'
+export default {
+  name: 'TagsFormatter',
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          getTagType(tag) {
+            return 'primary'
+          }
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+    }
+  },
+  methods: {
+    getTagType(tag) {
+      return this.formatterArgs.getTagType(tag)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.tag-formatter {
+  margin: 2px 0;
+}
+</style>

src/components/TableFormatters/index.js

@@ -10,6 +10,7 @@ import ShowKeyFormatter from '@/components/TableFormatters/ShowKeyFormatter'
 import DialogDetailFormatter from './DialogDetailFormatter'
 import EditableInputFormatter from './EditableInputFormatter'
 import StatusFormatter from './StatusFormatter'
+import TagsFormatter from './TagsFormatter'
 
 export default {
   DetailFormatter,
@@ -23,7 +24,8 @@ export default {
   DialogDetailFormatter,
   ArrayFormatter,
   EditableInputFormatter,
-  StatusFormatter
+  StatusFormatter,
+  TagsFormatter
 }
 
 export {
@@ -38,5 +40,6 @@ export {
   DialogDetailFormatter,
   ArrayFormatter,
   EditableInputFormatter,
-  StatusFormatter
+  StatusFormatter,
+  TagsFormatter
 }

src/views/assets/Asset/AssetList.vue

@@ -51,7 +51,7 @@
 
 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
-import { DetailFormatter, ActionsFormatter } from '@/components/TableFormatters'
+import { DetailFormatter, ActionsFormatter, TagsFormatter } from '@/components/TableFormatters'
 import $ from '@/utils/jquery-vendor'
 import Dialog from '@/components/Dialog'
 import { mapGetters } from 'vuex'
@@ -89,12 +89,15 @@ export default {
           'cpu_model', 'cpu_cores', 'cpu_count', 'cpu_vcpus',
           'disk_info', 'disk_total', 'memory', 'os', 'os_arch',
           'os_version', 'number', 'vendor', 'sn',
-          'connectivity',
+          'connectivity', 'labels_display',
           'created_by', 'date_created', 'comment', 'org_name', 'actions'
         ],
         columnsShow: {
           min: ['hostname', 'ip', 'actions'],
-          default: ['hostname', 'ip', 'platform', 'protocols', 'hardware_info', 'connectivity', 'actions']
+          default: [
+            'hostname', 'ip', 'platform', 'protocols', 'hardware_info',
+            'connectivity', 'actions'
+          ]
         },
         columnsMeta: {
           hostname: {
@@ -130,6 +133,9 @@ export default {
             showOverflowTooltip: true
           },
           connectivity: connectivityMeta,
+          labels_display: {
+            formatter: TagsFormatter
+          },
           actions: {
             formatter: ActionsFormatter,
             formatterArgs: {