perf: 选择资产组件弹窗显示资产详情

src/components/AssetSelect/index.vue

@@ -31,7 +31,7 @@
 
 <script>
 import TreeTable from '@/components/TreeTable'
-import { DetailFormatter } from '@/components/TableFormatters'
+import { DialogDetailFormatter } from '@/components/TableFormatters'
 import Select2 from '@/components/FormFields/Select2'
 import Dialog from '@/components/Dialog'
 
@@ -109,9 +109,45 @@ export default {
             label: this.$t('assets.Name'),
             sortable: true,
             showOverflowTooltip: true,
-            formatter: DetailFormatter,
+            formatter: DialogDetailFormatter,
             formatterArgs: {
-              route: 'AssetDetail'
+              getDialogTitle: function({ col, row }) { this.$t('assets.AssetDetail') }.bind(this),
+              getDetailItems: function({ col, row }) {
+                return [
+                  {
+                    key: this.$t('assets.Name'),
+                    value: row.name
+                  },
+                  {
+                    key: this.$t('assets.AssetAddress'),
+                    value: row.address
+                  },
+                  {
+                    key: this.$t('assets.Protocols'),
+                    value: row.protocols.map(item => item.name).join(', ')
+                  },
+                  {
+                    key: this.$t('assets.Category'),
+                    value: row.category.label
+                  },
+                  {
+                    key: this.$t('assets.Type'),
+                    value: row.type.label
+                  },
+                  {
+                    key: this.$t('assets.Platform'),
+                    value: row.platform?.name || ''
+                  },
+                  {
+                    key: this.$t('common.Active'),
+                    value: row.is_active
+                  },
+                  {
+                    key: this.$t('assets.Comment'),
+                    value: row.comment
+                  }
+                ]
+              }.bind(this)
             }
           },
           {
@@ -233,5 +269,4 @@ export default {
 .page ::v-deep .treebox {
   height: inherit !important;
 }
-
 </style>

src/components/TableFormatters/DialogDetailFormatter.vue

@@ -68,7 +68,9 @@ export default {
 
 <style lang="scss" scoped>
 .card >>> .el-card__body {
-  padding: 0
+  padding: 0;
+}
+.el-card {
+  border: 0!important;
 }
-
 </style>

src/i18n/langs/en.json

@@ -103,6 +103,7 @@
     "NoSQLProtocol": "NoSQL Protocol"
   },
   "assets": {
+    "AssetAddress": "IP/Host",
     "sshkeyAccount": "ssh key account",
     "passwordAccount": "Password account",
     "SelectTemplate": "Select template",

src/i18n/langs/ja.json

@@ -108,6 +108,7 @@
     "NoSQLProtocol": "非リレーショナルデータベース"
   },
   "assets": {
+    "AssetAddress": "IP/ホスト名",
     "sshkeyAccount": "SSHキー",
     "passwordAccount": "パスワード",
     "SelectTemplate": "テンプレートの選択",

src/i18n/langs/zh.json

@@ -107,6 +107,7 @@
     "NoSQLProtocol": "非关系数据库"
   },
   "assets": {
+    "AssetAddress": "IP/主机名",
     "sshkeyAccount": "密钥账号",
     "passwordAccount": "密码账号",
     "Category": "类别",

src/views/myassets/index.vue

@@ -59,7 +59,7 @@ export default {
                     value: row.name
                   },
                   {
-                    key: this.$t('assets.Address'),
+                    key: this.$t('assets.AssetAddress'),
                     value: row.address
                   },
                   {
@@ -76,7 +76,7 @@ export default {
                   },
                   {
                     key: this.$t('assets.Platform'),
-                    value: row.platform
+                    value: row.platform?.name || ''
                   },
                   {
                     key: this.$t('common.Active'),