pref: 修改 Applet Host 创建

src/components/ListTable/TableAction/ImportDialog.vue

@@ -22,8 +22,8 @@
         <div style="line-height: 1.5">
           <span class="el-upload__tip">
             {{ downloadTemplateTitle }}
-            <el-link type="success" :underline="false" style="padding-left: 10px" @click="downloadTemplateFile('csv')"> CSV </el-link>
-            <el-link type="success" :underline="false" style="padding-left: 10px" @click="downloadTemplateFile('xlsx')"> XLSX </el-link>
+            <el-link type="success" @click="downloadTemplateFile('csv')"> CSV </el-link>
+            <el-link type="success" @click="downloadTemplateFile('xlsx')"> XLSX </el-link>
           </span>
         </div>
       </el-form-item>
@@ -40,7 +40,9 @@
           accept=".csv,.xlsx"
         >
           <i class="el-icon-upload" />
-          <div class="el-upload__text">{{ $t('common.imExport.dragUploadFileInfo') }}</div>
+          <div class="el-upload__text">
+            {{ $t('common.imExport.dragUploadFileInfo') }}
+          </div>
           <div slot="tip" class="el-upload__tip">
             <span :class="{'hasError': hasFileFormatOrSizeError }">
               {{ $t('common.imExport.uploadCsvLth10MHelpText') }}
@@ -170,7 +172,10 @@ export default {
       this.$axios.post(
         renderToJsonUrl,
         file.raw,
-        { headers: { 'Content-Type': isCsv ? 'text/csv' : 'text/xlsx' }, disableFlashErrorMsg: true }
+        {
+          headers: { 'Content-Type': isCsv ? 'text/csv' : 'text/xlsx' },
+          disableFlashErrorMsg: true
+        }
       ).then(data => {
         this.jsonData = data
         this.showTable = true
@@ -207,9 +212,8 @@ export default {
       }
       return this.url.indexOf('?') === -1 ? `${this.url}?${query}` : `${this.url}&${query}`
     },
-    // eslint-disable-next-line handle-callback-err
-    catchError(error) {
-      // debug(error)
+    catchError(err) {
+      console.log(err)
     },
     onSuccess(msg) {
       this.errorMsg = ''
@@ -222,7 +226,7 @@ export default {
       window.URL.revokeObjectURL(url)
     },
     async handleImportConfirm() {
-      this.$refs['importTable'].performUpload()
+      await this.$refs['importTable'].performUpload()
     },
     handleImportCancel() {
       this.showImportDialog = false
@@ -285,5 +289,9 @@ export default {
   .el-upload__tip {
     line-height: 1.5;
     padding-top: 0;
+
+    .el-link {
+      margin-left: 10px;
+    }
   }
 </style>

src/i18n/langs/zh.json

@@ -98,6 +98,7 @@
     "NoSQLProtocol": "非关系数据库"
   },
   "assets": {
+    "Address": "地址",
     "PrivateKey": "密钥",
     "Secret": "密码",
     "Network": "网络",
@@ -706,6 +707,8 @@
   },
   "route": {
     "": "",
+    "AppletHostCreate": "添加远程应用发布机",
+    "AppletHostUpdate": "更新远程应用发布机",
     "AppletCreate": "创建远程应用",
     "CreateEndpoint": "创建端点",
     "UpdateEndpoint": "更新端点",

src/router/settings/index.js

@@ -220,14 +220,24 @@ export default {
           }
         },
         {
-          path: 'create',
-          name: 'AppletCreate',
-          component: () => import('@/views/settings/Applet/Applets/AppletCreateUpdate'),
+          path: 'hosts/create',
+          name: 'AppletHostCreate',
+          component: () => import('@/views/settings/Applet/AppletHosts/AppletHostCreateUpdate'),
+          hidden: true,
           meta: {
-            title: i18n.t('route.AppletCreate'),
+            title: i18n.t('route.AppletHostCreate'),
             permissions: ['settings.change_terminal']
-          },
-          hidden: true
+          }
+        },
+        {
+          path: 'hosts/:id/update',
+          name: 'AppletHostUpdate',
+          component: () => import('@/views/settings/Applet/AppletHosts/AppletHostCreateUpdate'),
+          hidden: true,
+          meta: {
+            title: i18n.t('route.AppletHostUpdate'),
+            permissions: ['settings.change_terminal']
+          }
         }
       ]
     },

src/views/assets/Asset/AssetCreateUpdate/BaseAssetCreateUpdate.vue

@@ -21,6 +21,14 @@ export default {
     addFieldsMeta: {
       type: Object,
       default: () => ({})
+    },
+    createSuccessNextRoute: {
+      type: Object,
+      default: () => ({ name: 'AssetList' })
+    },
+    updateSuccessNextRoute: {
+      type: Object,
+      default: () => ({ name: 'AssetList' })
     }
   },
   data() {
@@ -31,8 +39,8 @@ export default {
         initial: {},
         platform: {},
         url: '/api/v1/assets/hosts/',
-        createSuccessNextRoute: { name: 'AssetList' },
-        updateSuccessNextRoute: { name: 'AssetList' },
+        createSuccessNextRoute: this.createSuccessNextRoute,
+        updateSuccessNextRoute: this.updateSuccessNextRoute,
         hasDetailInMsg: false,
         fields: [
           [this.$t('common.Basic'), ['name', 'address', 'platform']],

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

@@ -110,8 +110,7 @@ export default {
           },
           protocols: {
             formatter: (row) => {
-              let data = row.protocols.map(item => item.name + '/' + item.port)
-              data = data.join(', ')
+              const data = row.protocols.map(p => <el-tag size='mini'>{p.name}/{p.port} </el-tag>)
               return <span> {data} </span>
             }
           },

src/views/settings/Applet/AppletHosts.vue

@@ -1,14 +0,0 @@
-<template>
-  <span />
-
-</template>
-
-<script>
-export default {
-  name: 'AppletHosts'
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/settings/Applet/AppletHosts/AppletHostCreateUpdate.vue

@@ -0,0 +1,48 @@
+<template>
+  <BaseAssetCreateUpdate v-if="!loading" v-bind="config" />
+</template>
+
+<script>
+import BaseAssetCreateUpdate from '@/views/assets/Asset/AssetCreateUpdate/BaseAssetCreateUpdate'
+export default {
+  components: {
+    BaseAssetCreateUpdate
+  },
+  data() {
+    return {
+      loading: true,
+      config: {
+        url: '/api/v1/terminal/applet-hosts/?oid=RemoteAppHost',
+        addFields: [
+          [this.$t('assets.Account'), ['account_automation']]
+        ],
+        addFieldsMeta: {
+          platform: {
+            hidden: () => true
+          },
+          nodes: {
+            hidden: () => true
+          },
+          labels: {
+            hidden: () => true
+          }
+        },
+        createSuccessNextRoute: { name: 'Applets' },
+        updateSuccessNextRoute: { name: 'Applets' }
+      }
+    }
+  },
+  async mounted() {
+    const platform = await this.$axios.get('/api/v1/assets/platforms/RemoteAppHost/')
+    this.$route.query.platform = platform['id']
+    this.$route.query.oid = 'SYSTEM'
+    this.loading = false
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,55 @@
+<template>
+  <ListTable class="applet-host" v-bind="$data" />
+</template>
+
+<script>
+import { ListTable } from '@/components'
+export default {
+  name: 'AppletHost',
+  components: {
+    ListTable
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/terminal/applet-hosts/',
+        columns: [
+          'name', 'address', 'protocols',
+          'comment', 'date_created', 'date_updated', 'actions'
+        ],
+        columnsShow: {
+          min: ['name', 'actions'],
+          default: [
+            'name', 'address', 'protocols',
+            'comment', 'actions'
+          ]
+        },
+        columnsMeta: {
+          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>)
+            }
+          },
+          actions: {
+            formatterArgs: {
+              updateRoute: 'AppletHostUpdate'
+            }
+          }
+        }
+      },
+      headerActions: {
+        createRoute: 'AppletHostCreate'
+      }
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.applet-host >>> .protocol {
+  margin-left: 3px;
+}
+
+</style>

src/views/settings/Applet/Applets/AppletCreateUpdate.vue

@@ -1,34 +0,0 @@
-<template>
-  <GenericCreateUpdatePage v-bind="config" />
-</template>
-
-<script>
-import { GenericCreateUpdatePage } from '@/layout/components'
-export default {
-  components: {
-    GenericCreateUpdatePage
-  },
-  data() {
-    return {
-      config: {
-        initial: {
-          users: []
-        },
-        url: '/api/v1/terminal/applets/',
-        fields: [
-          [this.$t('common.Basic'), ['name']],
-          [this.$t('common.Other'), ['comment']]
-        ],
-        fieldsMeta: {
-        }
-      }
-    }
-  },
-  methods: {
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>

src/views/settings/Applet/Applets/AppletList.vue

@@ -20,12 +20,38 @@ export default {
       tableConfig: {
         url: '/api/v1/terminal/applets/',
         columns: [
-          'name', 'display_name', 'icon', 'type', 'actions'
+          'icon', 'name', 'version', 'author', 'protocols',
+          'type', 'comment', 'date_created', 'date_updated', 'actions'
         ],
+        columnsShow: {
+          min: ['icon', 'name', 'version', 'author', 'protocols', 'actions'],
+          default: [
+            'icon', 'name', 'version', 'author', 'protocols',
+            'type', 'comment', 'actions'
+          ]
+        },
         columnsMeta: {
           icon: {
+            align: 'center',
+            width: '60px',
             formatter: (row) => {
-              return <img src={row.icon} width='32' height='32' alt='icon'></img>
+              return <img src={row.icon} width='30' height='30' alt='icon'></img>
+            }
+          },
+          name: {
+            formatterArgs: {
+              getTitle: ({ row }) => row['display_name']
+            }
+          },
+          version: {
+            width: '80px'
+          },
+          type: {
+            width: '80px'
+          },
+          protocols: {
+            formatter: (row) => {
+              return row.protocols.map(tag => <el-tag size='mini'>{tag}</el-tag>)
             }
           }
         }

src/views/settings/Applet/Applets/UploadDialog.vue

@@ -2,6 +2,7 @@
   <Dialog
     title="离线上传"
     v-bind="$attrs"
+    @confirm="onSubmit"
     v-on="$listeners"
   >
     <el-form label-position="top">
@@ -22,7 +23,9 @@
           accept=".zip"
         >
           <i class="el-icon-upload" />
-          <div class="el-upload__text">{{ $t('common.imExport.dragUploadFileInfo') }}</div>
+          <div class="el-upload__text">
+            {{ $t('common.imExport.dragUploadFileInfo') }}
+          </div>
           <div slot="tip" class="el-upload__tip">
             <span :class="{'hasError': hasFileFormatOrSizeError }">
               {{ $t('terminal.uploadZipTips') }}
@@ -45,13 +48,38 @@ export default {
   data() {
     return {
       hasFileFormatOrSizeError: false,
-      renderError: ''
+      renderError: '',
+      file: null
     }
   },
   methods: {
     onFileChange(file, fileList) {
+      if (file.status !== 'ready') {
+        return
+      }
+      this.file = file
     },
     beforeUpload(file) {
+    },
+    onSubmit() {
+      if (!this.file) {
+        return
+      }
+      const form = new FormData()
+      form.append('file', this.file.raw)
+      this.$axios.post(
+        '/api/v1/terminal/applets/upload/',
+        form,
+        {
+          headers: { 'Content-Type': 'multipart/form-data' },
+          disableFlashErrorMsg: true
+        }
+      ).then(res => {
+        this.$message.success('上传成功')
+        this.$emit('update:visible', false)
+      }).catch(err => {
+        this.$message.error(err)
+      })
     }
   }
 }

src/views/settings/Applet/index.vue

@@ -9,7 +9,7 @@
 <script>
 import { TabPage } from '@/layout/components'
 import Applets from './Applets/AppletList'
-import AppletHosts from './AppletHosts'
+import AppletHosts from './AppletHosts/AppletHostList'
 export default {
   name: 'Applet',
   components: {

src/views/users/User/UserList.vue

@@ -140,7 +140,7 @@ export default {
               return !this.currentOrgIsRoot && this.publicSettings.XPACK_LICENSE_IS_VALID
             },
             can: () => vm.$hasPerm('users.invite_user'),
-            callback: function() { this.InviteDialogSetting.InviteDialogVisible = true }.bind(this)
+            callback: () => { this.InviteDialogSetting.InviteDialogVisible = true }
           }
         ],
         extraMoreActions: [