pref: 优化一波 lina

src/components/AccountListTable/const.js

@@ -1,24 +1,25 @@
-import ChoicesFormatter from '@/components/TableFormatters/ChoicesFormatter'
 import i18n from '@/i18n/i18n'
+import { ChoicesFormatter } from '@/components/TableFormatters'
 
 export const connectivityMeta = {
-  label: i18n.t('assets.Reachable'),
+  label: i18n.t('assets.Connectivity'),
   formatter: ChoicesFormatter,
   formatterArgs: {
     faChoices: {
+      '-': '',
       ok: 'fa-check-circle',
-      failed: 'fa-times-circle',
-      unknown: 'fa fa-question-circle'
+      err: 'fa-times-circle'
     },
     classChoices: {
       ok: 'text-primary',
-      failed: 'text-danger',
-      unknown: 'fa fa-question-circle'
+      err: 'text-danger'
     },
-    textChoices: {
-      ok: 'Avail',
-      failed: 'Failed',
-      unknown: '-'
+    getText({ cellValue }) {
+      if (cellValue.value === '-') {
+        return '-'
+      } else {
+        return cellValue.label
+      }
     }
   },
   width: '100px',

src/components/TableFormatters/ChoicesFormatter.vue

@@ -1,6 +1,6 @@
 <template>
   <span>
-    <el-tooltip v-if="shown" :disabled="!formatterArgs.hasTips" placement="bottom" effect="dark">
+    <el-tooltip v-if="shown" :disabled="!formatterArgs.hasTips" effect="dark" placement="bottom">
       <div slot="content" v-html="tips" />
       <span :class="classes">
         <i v-if="formatterArgs.showIcon && icon" :class="'fa ' + icon" />
@@ -42,7 +42,8 @@ export default {
             return (cellValue && typeof cellValue === 'object') ? cellValue.label : this.textChoices[key] || cellValue
           },
           getIcon({ row, cellValue }) {
-            return this.faChoices[cellValue]
+            const key = this.getKey({ row, cellValue })
+            return this.faChoices[key]
           },
           hasTips: false,
           showIcon: true,
@@ -67,9 +68,10 @@ export default {
       )
     },
     icon() {
-      return this.formatterArgs.getIcon(
+      const icon = this.formatterArgs.getIcon(
         { row: this.row, cellValue: this.cellValue }
       )
+      return icon
     },
     classes() {
       return this.formatterArgs.classChoices[this.key]
@@ -89,6 +91,9 @@ export default {
       return true
     }
   },
+  mounted() {
+    console.log('ChoicesFormatter mounted: ', this.formatterArgs)
+  },
   methods: {}
 }
 </script>

src/components/TableFormatters/ProtocolsFormatter.vue

@@ -0,0 +1,43 @@
+<template>
+  <span class="protocol-cell">
+    <el-tag v-for="p of cellValue" :key="p.name" size="mini">
+      {{ p.name }}/{{ p.port }}
+    </el-tag>
+  </span>
+</template>
+
+<script>
+import BaseFormatter from './base'
+
+export default {
+  name: 'ProtocolsFormatter',
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    data() {
+      return {
+        formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs || {})
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.protocol-cell {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+
+  .el-tag {
+    margin-right: 2px;
+  }
+}
+
+</style>

src/components/TableFormatters/index.js

@@ -13,6 +13,7 @@ import StatusFormatter from './StatusFormatter'
 import TagsFormatter from './TagsFormatter'
 import ObjectRelatedFormatter from './ObjectRelatedFormatter'
 import TwoTabFormatter from './TwoTabFormatter'
+import ProtocolsFormatter from './ProtocolsFormatter.vue'
 
 export default {
   DetailFormatter,
@@ -29,7 +30,8 @@ export default {
   StatusFormatter,
   TagsFormatter,
   ObjectRelatedFormatter,
-  TwoTabFormatter
+  TwoTabFormatter,
+  ProtocolsFormatter
 }
 
 export {
@@ -47,5 +49,6 @@ export {
   StatusFormatter,
   TagsFormatter,
   ObjectRelatedFormatter,
-  TwoTabFormatter
+  TwoTabFormatter,
+  ProtocolsFormatter
 }

src/i18n/langs/en.json

@@ -249,7 +249,7 @@
     "PushSystemUserNow": "Push system user now",
     "PushAllSystemUsersToAsset": "Push all system users to asset",
     "QuickUpdate": "Quick update",
-    "Reachable": "Reachable",
+    "Connectivity": "Reachable",
     "Unreachable": "Unreachable",
     "Unknown": "Unknown",
     "Refresh": "Refresh",

src/i18n/langs/ja.json

@@ -249,7 +249,7 @@
     "PushSystemUserNow": "プッシュシステムユーザー",
     "PushAllSystemUsersToAsset": "すべてのシステムユーザーをアセットにプッシュ",
     "QuickUpdate": "クイックアップデート",
-    "Reachable": "接続可能",
+    "Connectivity": "接続可能",
     "Unreachable": "接続できません",
     "Unknown": "不明",
     "Refresh": "更新",

src/i18n/langs/zh.json

@@ -349,7 +349,7 @@
     "PushSystemUserNow": "推送系统用户",
     "PushAllSystemUsersToAsset": "推送所有系统用户到资产",
     "QuickUpdate": "快速更新",
-    "Reachable": "可连接",
+    "Connectivity": "可连接",
     "Unreachable": "不可连接",
     "Unknown": "未知",
     "Refresh": "刷新",

src/views/assets/Asset/AssetList/components/AssetBulkUpdateDialog.vue

@@ -1,8 +1,8 @@
 <template>
   <GenericUpdateFormDialog
     v-if="visible"
-    :selected-rows="selectedRows"
     :form-setting="formSetting"
+    :selected-rows="selectedRows"
     :visible="visible"
     v-on="$listeners"
   />
@@ -10,6 +10,7 @@
 
 <script>
 import { GenericUpdateFormDialog } from '@/layout/components'
+import { assetFieldsMeta } from '@/views/assets/const'
 
 export default {
   name: 'AssetBulkUpdateDialog',
@@ -27,33 +28,32 @@ export default {
     }
   },
   data() {
+    const meta = assetFieldsMeta(this)
     return {
       formSetting: {
         url: '/api/v1/assets/assets/',
         hasSaveContinue: false,
         initial: {},
         fields: [
-          'domain', 'labels', 'comment'
+          'nodes', 'domain', 'labels',
+          'is_active', 'comment'
         ],
         fieldsMeta: {
+          nodes: {
+            ...meta.nodes,
+            label: this.$t('assets.Node')
+          },
           domain: {
-            label: this.$t('assets.Domain'),
-            hidden: () => false,
-            el: {
-              multiple: false,
-              ajax: {
-                url: '/api/v1/assets/domains/'
-              }
-            }
+            ...meta.domain,
+            label: this.$t('assets.Domain')
           },
           labels: {
-            label: this.$t('assets.Label'),
-            hidden: () => false,
-            el: {
-              ajax: {
-                url: '/api/v1/assets/labels/'
-              }
-            }
+            ...meta.labels,
+            label: this.$t('assets.Label')
+          },
+          is_active: {
+            ...meta.is_active,
+            label: this.$t('common.Active')
           },
           comment: {
             label: this.$t('common.Comment'),

src/views/assets/Asset/AssetList/components/BaseList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <ListTable ref="ListTable" :table-config="iTableConfig" :header-actions="iHeaderActions" />
-    <PlatformDialog :visible.sync="showPlatform" :category="category" />
+    <ListTable ref="ListTable" :header-actions="iHeaderActions" :table-config="iTableConfig" />
+    <PlatformDialog :category="category" :visible.sync="showPlatform" />
     <AssetBulkUpdateDialog
       :visible.sync="updateSelectedDialogSetting.visible"
       v-bind="updateSelectedDialogSetting"
@@ -17,7 +17,7 @@
 <script>
 import { ListTable } from '@/components'
 import {
-  ActionsFormatter, ArrayFormatter, ChoicesFormatter, DetailFormatter, TagsFormatter
+  ActionsFormatter, ArrayFormatter, ChoicesFormatter, DetailFormatter, ProtocolsFormatter, TagsFormatter
 } from '@/components/TableFormatters'
 import AssetBulkUpdateDialog from './AssetBulkUpdateDialog'
 import { connectivityMeta } from '@/components/AccountListTable/const'
@@ -111,10 +111,7 @@ export default {
           },
           protocols: {
             showFullContent: true,
-            formatter: (row) => {
-              const data = row.protocols.map(p => <el-tag size='mini'>{p.name}/{p.port} </el-tag>)
-              return <div> {data} </div>
-            }
+            formatter: ProtocolsFormatter
           },
           nodes_display: {
             formatter: ArrayFormatter

src/views/assets/Label/LabelList.vue

@@ -1,5 +1,5 @@
 <template>
-  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListPage :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
@@ -17,7 +17,8 @@ export default {
         columnsShow: {
           min: ['name', 'actions'],
           default: [
-            'name', 'value', 'asset_count', 'date_created', 'comment', 'org_name', 'actions'
+            'name', 'value', 'asset_count', 'date_created',
+            'comment', 'org_name', 'actions'
           ]
         },
         columnsMeta: {

src/views/settings/Applet/AppletHost/AppletHostList.vue

@@ -5,6 +5,7 @@
 <script>
 import { ListTable } from '@/components'
 import { openTaskPage } from '@/utils/jms'
+import { ProtocolsFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'AppletHost',
@@ -67,11 +68,7 @@ export default {
           },
           protocols: {
             label: this.$t('assets.Protocols'),
-            formatter: (row) => {
-              return row.protocols.map((p, i) => {
-                return <el-tag size='mini' class='protocol'>{p.name}/{p.port}</el-tag>
-              })
-            }
+            formatter: ProtocolsFormatter
           },
           actions: {
             formatterArgs: {