From a26b42fef8ce11852a43b14dd111ded4bf8b7811 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Wed, 2 Nov 2022 17:23:25 +0800
Subject: [PATCH] =?UTF-8?q?preff:=20=E4=BF=AE=E6=94=B9=20applets=20hosts?=
 =?UTF-8?q?=20=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AutoDataSearch/index.vue       |  2 +-
 .../components/ColumnSettingPopover.vue       |  2 +-
 src/components/DataTable/index.vue            |  4 ++
 src/components/ListTable/index.vue            |  2 +-
 .../TableFormatters/DetailFormatter.vue       |  1 -
 src/i18n/langs/zh.json                        |  4 +-
 src/router/settings/index.js                  | 11 +++--
 .../accounts/AccountBackupPlan/fields.js      |  2 +-
 .../AppletHost/AppletHostDetail/Applets.vue   | 44 +++++++++++--------
 .../AppletHostDetail/Devployments.vue         |  4 +-
 .../Applet/AppletHost/AppletHostList.vue      |  4 +-
 11 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/components/AutoDataSearch/index.vue b/src/components/AutoDataSearch/index.vue
index 953e1863a..080a3e2df 100644
--- a/src/components/AutoDataSearch/index.vue
+++ b/src/components/AutoDataSearch/index.vue
@@ -67,7 +67,7 @@ export default {
           type: field.type,
           value: name
         }
-        if (field.type === 'choice' && field.choices) {
+        if (['choice', 'labeled_choice'].indexOf(field.type) > -1 && field.choices) {
           option.children = field.choices.map(item => {
             if (typeof (item.value) === 'boolean') {
               if (item.value) {
diff --git a/src/components/AutoDataTable/components/ColumnSettingPopover.vue b/src/components/AutoDataTable/components/ColumnSettingPopover.vue
index 3a00b3d7d..56e7fedb5 100644
--- a/src/components/AutoDataTable/components/ColumnSettingPopover.vue
+++ b/src/components/AutoDataTable/components/ColumnSettingPopover.vue
@@ -1,7 +1,7 @@
 <template>
   <Dialog
     v-if="showColumnSettingPopover"
-    :title="$t('common.CustomCol')"
+    :title="$tc('common.CustomCol')"
     :visible.sync="showColumnSettingPopover"
     :destroy-on-close="true"
     :show-cancel="false"
diff --git a/src/components/DataTable/index.vue b/src/components/DataTable/index.vue
index 5128abe79..0bd0e4346 100644
--- a/src/components/DataTable/index.vue
+++ b/src/components/DataTable/index.vue
@@ -169,6 +169,10 @@ export default {
     line-height: 1.5;
     padding: 6px 0;
     font-size: 13px;
+
+    * {
+      vertical-align: middle;
+    }
   }
   .el-table  ::v-deep  .el-table__row > td> div > span {
     text-overflow: ellipsis;
diff --git a/src/components/ListTable/index.vue b/src/components/ListTable/index.vue
index 65258a5e8..4d1af9031 100644
--- a/src/components/ListTable/index.vue
+++ b/src/components/ListTable/index.vue
@@ -107,7 +107,7 @@ export default {
       return config
     },
     tableUrl() {
-      return this.tableConfig.url
+      return this.tableConfig.url || ''
     },
     permissions() {
       // 获取 permissions，获取不到通过 url 解析
diff --git a/src/components/TableFormatters/DetailFormatter.vue b/src/components/TableFormatters/DetailFormatter.vue
index 004d2ca8e..c22f48d8b 100644
--- a/src/components/TableFormatters/DetailFormatter.vue
+++ b/src/components/TableFormatters/DetailFormatter.vue
@@ -120,6 +120,5 @@ export default {
 .icon {
   width: 28px;
   height: 28px;
-  vertical-align: middle;
 }
 </style>
diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json
index dc5deab9c..58b1364dd 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -289,6 +289,7 @@
     "ReLoginErr": "登录时长已超过 5 分钟，请重新登录"
   },
   "common": {
+    "Publish": "发布",
     "Icon": "图标",
     "DisplayName": "名称",
     "Automations": "自动化",
@@ -1000,7 +1001,8 @@
     }
   },
   "applets": {
-    "NoPublished": "未发布"
+    "NoPublished": "未发布",
+    "PublishStatus": "发布状态"
   },
   "setting": {
     "Applets": "远程应用",
diff --git a/src/router/settings/index.js b/src/router/settings/index.js
index 3c2abeab4..cf5081273 100644
--- a/src/router/settings/index.js
+++ b/src/router/settings/index.js
@@ -215,7 +215,7 @@ export default {
           component: () => import('@/views/settings/Applet'),
           meta: {
             title: i18n.t('setting.Applets'),
-            icon: 'tasks',
+            icon: 'windows',
             permissions: ['settings.change_terminal']
           }
         },
@@ -226,7 +226,8 @@ export default {
           hidden: true,
           meta: {
             title: i18n.t('route.AppletHostCreate'),
-            permissions: ['settings.change_terminal']
+            permissions: ['settings.change_terminal'],
+            activeMenu: '/settings/applets'
           }
         },
         {
@@ -236,7 +237,8 @@ export default {
           hidden: true,
           meta: {
             title: i18n.t('route.AppletHostDetail'),
-            permissions: ['settings.change_terminal']
+            permissions: ['settings.change_terminal'],
+            activeMenu: '/settings/applets'
           }
         },
         {
@@ -246,7 +248,8 @@ export default {
           hidden: true,
           meta: {
             title: i18n.t('route.AppletHostUpdate'),
-            permissions: ['settings.change_terminal']
+            permissions: ['settings.change_terminal'],
+            activeMenu: '/settings/applets'
           }
         }
       ]
diff --git a/src/views/accounts/AccountBackupPlan/fields.js b/src/views/accounts/AccountBackupPlan/fields.js
index 4b66d7795..01d2f44af 100644
--- a/src/views/accounts/AccountBackupPlan/fields.js
+++ b/src/views/accounts/AccountBackupPlan/fields.js
@@ -1,7 +1,7 @@
 import i18n from '@/i18n/i18n'
 import { CronTab } from '@/components'
 
-var validatorInterval = (rule, value, callback) => {
+const validatorInterval = (rule, value, callback) => {
   if (parseInt(value) < 1) {
     return callback(new Error(i18n.t('xpack.ChangeAuthPlan.validatorMessage.EnsureThisValueIsGreaterThanOrEqualTo1')))
   }
diff --git a/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue b/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
index 80f297e62..13347109b 100644
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="16" :sm="24">
-      <ListTable :table-config="config" />
+      <ListTable :table-config="config" :header-actions="headerConfig" />
     </el-col>
     <el-col :md="8" :sm="24">
       <QuickActions type="primary" :actions="quickActions" />
@@ -9,9 +9,10 @@
   </el-row>
 </template>
 
-<script>
+<script type="text/jsx">
 import { ListTable, QuickActions } from '@/components'
 import { openTaskPage } from '@/utils/jms'
+import { DetailFormatter } from '@/components/TableFormatters'
 export default {
   name: 'Publications',
   components: {
@@ -26,35 +27,40 @@ export default {
   },
   data() {
     return {
+      headerConfig: {
+        hasImport: false
+      },
       config: {
         url: `/api/v1/terminal/applet-publications/?host=${this.object.id}`,
         columns: [
-          'applet.icon', 'applet.display_name', 'date_updated', 'status',
+          'applet.display_name', 'date_updated', 'status',
           'actions'
         ],
         columnsMeta: {
-          'applet.icon': {
-            label: this.$t('common.Icon'),
-            align: 'center',
-            width: '60px',
-            formatter: (row) => {
-              return <img src={row.applet.icon} width='30' height='30' alt='icon'></img>
+          'applet.display_name': {
+            label: this.$t('common.DisplayName'),
+            formatter: DetailFormatter,
+            formatterArgs: {
+              getIcon: ({ row }) => row.applet?.icon,
+              getTitle: ({ row }) => row.applet.display_name
             }
           },
-          'applet.display_name': {
-            label: this.$t('common.DisplayName')
-          },
           status: {
-            label: this.$t('common.Status'),
+            label: this.$t('applets.PublishStatus'),
             formatter: (row) => {
-              if (!row.status) {
-                return <el-tag size='mini' type='danger'>{ this.$t('applets.NoPublished') }</el-tag>
+              const typeMapper = {
+                'ready': 'info',
+                'pending': 'info',
+                'running': 'success',
+                'success': 'success',
+                'failed': 'danger'
               }
-              return row.status.label
+              const tp = typeMapper[row.status.value] || 'info'
+              return <el-tag size='mini' type={tp}>{ row.status.label }</el-tag>
             }
           },
           date_updated: {
-            label: '发布日期'
+            label: '日期'
           },
           actions: {
             formatterArgs: {
@@ -82,10 +88,10 @@ export default {
           }
         },
         {
-          title: '同步所有应用',
+          title: '发布所有应用',
           attrs: {
             type: 'primary',
-            label: this.$t('common.Sync')
+            label: this.$t('common.Publish')
           },
           callbacks: {
             click: function() {
diff --git a/src/views/settings/Applet/AppletHost/AppletHostDetail/Devployments.vue b/src/views/settings/Applet/AppletHost/AppletHostDetail/Devployments.vue
index 42195b224..cd2066a7c 100644
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Devployments.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Devployments.vue
@@ -69,10 +69,10 @@ export default {
           }
         },
         {
-          title: '同步所有应用',
+          title: '发布所有应用',
           attrs: {
             type: 'primary',
-            label: this.$t('common.Sync')
+            label: this.$t('common.Publish')
           },
           callbacks: {
             click: function() {
diff --git a/src/views/settings/Applet/AppletHost/AppletHostList.vue b/src/views/settings/Applet/AppletHost/AppletHostList.vue
index 7bbab43e9..deda39504 100644
--- a/src/views/settings/Applet/AppletHost/AppletHostList.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostList.vue
@@ -38,7 +38,9 @@ export default {
           protocols: {
             label: this.$t('assets.Protocols'),
             formatter: (row) => {
-              return row.protocols.map(p => <el-tag size='mini' class='protocol'>{p.name}/{p.port} </el-tag>)
+              return row.protocols.map((p, i) => {
+                return <el-tag size='mini' class='protocol'>{p.name}/{p.port}</el-tag>
+              })
             }
           },
           actions: {