From 5ac8a6bdba32541aed7a8ddcdaa10a9215d60a38 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Fri, 26 Nov 2021 15:16:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B5=84=E4=BA=A7=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TableFormatters/TagsFormatter.vue         | 50 +++++++++++++++++++
 src/components/TableFormatters/index.js       |  7 ++-
 src/views/assets/Asset/AssetList.vue          | 12 +++--
 3 files changed, 64 insertions(+), 5 deletions(-)
 create mode 100644 src/components/TableFormatters/TagsFormatter.vue

diff --git a/src/components/TableFormatters/TagsFormatter.vue b/src/components/TableFormatters/TagsFormatter.vue
new file mode 100644
index 000000000..9d96fc496
--- /dev/null
+++ b/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>
diff --git a/src/components/TableFormatters/index.js b/src/components/TableFormatters/index.js
index 178ff07a3..18413ed41 100644
--- a/src/components/TableFormatters/index.js
+++ b/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
 }
diff --git a/src/views/assets/Asset/AssetList.vue b/src/views/assets/Asset/AssetList.vue
index 91897d462..5e07e1771 100644
--- a/src/views/assets/Asset/AssetList.vue
+++ b/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: {