perf: 修改平台和资产

src/components/FormFields/ProtocolSelector.vue

@@ -2,9 +2,10 @@
   <div>
     <div v-for="(item, index) in items" :key="item.name" style="display: flex;margin-top: 8px;">
       <el-input v-model="item.port" class="input-with-select" v-bind="$attrs">
-        <el-select slot="prepend" v-model="item.name" @change="handleProtocolChange($event, item)">
+        <el-select slot="prepend" v-model="item.name" class="prepend" @change="handleProtocolChange($event, item)">
           <el-option v-for="p of remainProtocols" :key="p.name" :label="p.name" :value="p.name" />
         </el-select>
+        <el-button v-if="showSetting" slot="append" icon="el-icon-setting" @click="onSettingClick(item)" />
       </el-input>
       <div style="display: flex; margin-left: 20px" class="input-button">
         <el-button
@@ -43,6 +44,16 @@ export default {
     choices: {
       type: Array,
       default: () => ([])
+    },
+    showSetting: {
+      type: Boolean,
+      default: false
+    },
+    onSettingClick: {
+      type: Function,
+      default: (item) => {
+        alert('Click setting: ' + item.name + ', port: ' + item.port)
+      }
     }
   },
   data() {
@@ -130,4 +141,8 @@ export default {
   height: 25px;
   padding: 5px;
 }
+.el-input-group__append .el-button {
+  font-size: 14px;
+  color: #1a1a1a;
+}
 </style>

src/components/TableFormatters/ChoicesDisplayFormatter.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-tooltip v-if="shown" :disabled="!formatterArgs.hasTips" placement="bottom" effect="dark">
+    <div slot="content" v-html="tips" />
+    <span :class="classes">
+      <i v-if="formatterArgs.useIcon" :class="'fa ' + icon" />
+      <span v-if="formatterArgs.useText">{{ text }}</span>
+    </span>
+  </el-tooltip>
+</template>
+
+<script>
+import BaseFormatter from './base'
+export default {
+  name: 'ChoicesDisplayFormatter',
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          iconChoices: {
+          },
+          classChoices: {
+          },
+          hasTips: false,
+          useIcon: false,
+          useText: true,
+          getTips: ({ row, cellValue }) => {
+            return cellValue
+          }
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+    }
+  },
+  computed: {
+    key() {
+      return this.cellValue['value']
+    },
+    icon() {
+      return this.formatterArgs.iconChoices[this.key] || ''
+    },
+    classes() {
+      return this.formatterArgs.classChoices[this.key] || ''
+    },
+    text() {
+      return this.cellValue['label']
+    },
+    tips() {
+      return this.formatterArgs.getTips({ cellValue: this.cellValue, row: this.row })
+    },
+    shown() {
+      if (!this.formatterArgs.showFalse && !this.key) {
+        return false
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/TableFormatters/index.js

@@ -13,6 +13,7 @@ import EditableInputFormatter from './EditableInputFormatter'
 import StatusFormatter from './StatusFormatter'
 import TagsFormatter from './TagsFormatter'
 import NestedObjectFormatter from './NestedObjectFormatter'
+import ChoicesDisplayFormatter from './ChoicesDisplayFormatter'
 
 export default {
   DetailFormatter,
@@ -29,7 +30,8 @@ export default {
   EditableInputFormatter,
   StatusFormatter,
   TagsFormatter,
-  NestedObjectFormatter
+  NestedObjectFormatter,
+  ChoicesDisplayFormatter
 }
 
 export {
@@ -47,5 +49,6 @@ export {
   EditableInputFormatter,
   StatusFormatter,
   TagsFormatter,
-  NestedObjectFormatter
+  NestedObjectFormatter,
+  ChoicesDisplayFormatter
 }

src/views/assets/Asset/AssetList.vue

@@ -28,7 +28,8 @@ import {
   DetailFormatter,
   ActionsFormatter,
   TagsFormatter,
-  NestedObjectFormatter
+  NestedObjectFormatter,
+  ChoicesDisplayFormatter
 } from '@/components/TableFormatters'
 import $ from '@/utils/jquery-vendor'
 import { mapGetters } from 'vuex'
@@ -66,7 +67,7 @@ export default {
         url: '/api/v1/assets/assets/',
         hasTree: true,
         columns: [
-          'name', 'ip', 'protocols',
+          'name', 'ip',
           'category', 'type', 'platform',
           'labels', 'nodes',
           'is_active', 'connectivity',
@@ -81,6 +82,12 @@ export default {
           ]
         },
         columnsMeta: {
+          type: {
+            formatter: ChoicesDisplayFormatter
+          },
+          category: {
+            formatter: ChoicesDisplayFormatter
+          },
           hostname: {
             formatter: DetailFormatter,
             formatterArgs: {

src/views/assets/Platform/PlatformCreateUpdate.vue

@@ -34,7 +34,7 @@ export default {
           'name', 'category_type', 'charset'
         ]],
         [this.$t('assets.Protocol'), [
-          'protocols_enabled', 'protocols_default'
+          'protocols_enabled', 'protocols'
         ]],
         [this.$t('assets.Domain'), [
           'domain_enabled', 'domain_default'
@@ -109,8 +109,12 @@ export default {
             disabled: false
           }
         },
-        protocols_default: {
+        protocols: {
           ...assetMeta.protocols,
+          el: {
+            choices: [],
+            showSetting: true
+          },
           hidden: (formValue) => {
             return !formValue['protocols_enabled']
           }
@@ -163,7 +167,7 @@ export default {
 
       const protocols = constraints['protocols'] || []
       this.fieldsMeta.protocols_enabled.el.disabled = protocols.length === 0
-      this.fieldsMeta.protocols_default.el.choices = protocols
+      this.fieldsMeta.protocols.el.choices = protocols
 
       if (updateForm) {
         updateForm({

src/views/assets/Platform/PlatformList.vue

@@ -4,6 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
+import { ChoicesDisplayFormatter } from '@/components/TableFormatters'
 export default {
   components: {
     GenericListPage
@@ -22,6 +23,12 @@ export default {
           default: ['name', 'category', 'type', 'actions']
         },
         columnsMeta: {
+          type: {
+            formatter: ChoicesDisplayFormatter
+          },
+          category: {
+            formatter: ChoicesDisplayFormatter
+          },
           base: {
             width: '140px'
           },