pref: 修改 dialog 布局

2026-01-13 11:24:17 +00:00 · 2022-10-26 16:04:38 +08:00
parent 4effc3c3b4
commit 7b6ccf3f30
16 changed files with 328 additions and 381 deletions
--- a/src/components/AutoDataTable/index.vue
+++ b/src/components/AutoDataTable/index.vue
@@ -27,7 +27,8 @@ import {
  DisplayFormatter,
  ActionsFormatter,
  ChoicesFormatter,
-  ObjectRelatedFormatter
+  ObjectRelatedFormatter,
+  ChoicesDisplayFormatter
 } from '@/components/TableFormatters'
 import i18n from '@/i18n/i18n'
 import ColumnSettingPopover from './components/ColumnSettingPopover'
@@ -136,6 +137,10 @@ export default {
          col.sortable = 'custom'
          col.formatter = DisplayFormatter
          break
+        case 'labeled_choice':
+          col.sortable = 'custom'
+          col.formatter = ChoicesDisplayFormatter
+          break
        case 'boolean':
          col.formatter = ChoicesFormatter
          col.align = 'center'
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -83,12 +83,24 @@ export default {
 </script>

 <style lang="scss" scoped>
-  .dialog >>> .el-dialog__header {
-    /*padding-top: 10px;*/
+  .dialog >>> .el-dialog {
+    padding: 30px 40px 35px;
+
+    &__header {
+      padding: 0 10px 0 0;
+    }
+
+    &__body {
+      padding: 15px 0 0;
+    }
+
+    &__footer {
+      padding: 0 0 10px 0;
+    }
  }

-  .dialog-footer {
-    padding-right: 20px;
+  .dialog-footer >>> button.el-button--small {
+    padding: 10px 21px;
+    font-size: 13px;
  }
-
 </style>
--- a/src/components/ListTable/TableAction/ImportDialog.vue
+++ b/src/components/ListTable/TableAction/ImportDialog.vue
@@ -5,14 +5,14 @@
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :loading-status="loadStatus"
-    width="80%"
+    width="60%"
    class="importDialog"
    :show-cancel="false"
    :show-confirm="false"
    @close="handleImportCancel"
  >
-    <el-form v-if="!showTable" label-position="left" style="padding-left: 50px">
-      <el-form-item :label="$t('common.Import' )" :label-width="'100px'">
+    <el-form v-if="!showTable" label-position="left">
+      <el-form-item :label="$tc('common.Import' )" :label-width="'100px'">
        <el-radio v-if="canImportCreate" v-model="importOption" class="export-item" label="create">
          {{ this.$t('common.Create') }}
        </el-radio>
@@ -27,7 +27,7 @@
          </span>
        </div>
      </el-form-item>
-      <el-form-item :label="$t('common.Upload' )" :label-width="'100px'" class="file-uploader">
+      <el-form-item :label="$tc('common.Upload' )" :label-width="'100px'" class="file-uploader">
        <el-upload
          ref="upload"
          drag
@@ -42,7 +42,9 @@
          <i class="el-icon-upload" />
          <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') }}</span>
+            <span :class="{'hasError': hasFileFormatOrSizeError }">
+              {{ $t('common.imExport.uploadCsvLth10MHelpText') }}
+            </span>
            <div v-if="renderError" class="hasError">{{ renderError }}</div>
          </div>
        </el-upload>
@@ -243,10 +245,6 @@ export default {
    overflow: auto
  }

-  .importDialog >>> .el-form-item.file-uploader {
-    padding-right: 150px;
-  }
-
  .file-uploader >>> .el-upload {
    width: 100%;
    //padding-right: 150px;
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -408,6 +408,7 @@
    "Update": "更新",
    "Revise": "修改",
    "Upload": "上传",
+    "OfflineUpload": "离线上传",
    "Clone": "克隆",
    "Username": "用户名",
    "Validity": "有效",
@@ -705,6 +706,7 @@
  },
  "route": {
    "": "",
+    "AppletCreate": "创建远程应用",
    "CreateEndpoint": "创建端点",
    "UpdateEndpoint": "更新端点",
    "CreateEndpointRule": "创建端点规则",
@@ -885,6 +887,11 @@
  "rbac": {
    "Permissions": "权限"
  },
+  "terminal": {
+    "Applets": "远程应用",
+    "AppletHosts": "应用发布机",
+    "uploadZipTips": "请上传zip格式的文件"
+  },
  "sessions": {
    "SetToDefaultStorage": "设置为默认存储",
    "SetToDefault": "设为默认",
@@ -966,6 +973,7 @@
    }
  },
  "setting": {
+    "Applets": "远程应用",
    "EndpointListHelpMessage": "服务端点是用户访问服务的地址(端口)，当用户在连接资产时，会根据端点规则和资产标签选择服务端点，作为访问入口建立连接，实现分布式连接资产",
    "EndpointRuleListHelpMessage": "对于服务端点选择策略，目前支持两种：<br>1、根据端点规则指定端点(当前页面)；<br>2、通过资产标签选择端点，标签名固定是 endpoint，值是端点的名称。<br>两种方式优先使用标签匹配，因为 IP 段可能冲突，标签方式是作为规则的补充存在的。",
    "EnableKoKoSSHHelpText": "开启时连接资产会显示 SSH Client 拉起方式",
--- a/src/router/settings/index.js
+++ b/src/router/settings/index.js
@@ -199,6 +199,38 @@ export default {
        }
      ]
    },
+    {
+      path: '/settings/applets',
+      component: empty,
+      redirect: '',
+      meta: {
+        title: i18n.t('setting.Applets'),
+        app: 'terminal',
+        permissions: ['settings.change_terminal']
+      },
+      children: [
+        {
+          path: '',
+          name: 'Applets',
+          component: () => import('@/views/settings/Applet'),
+          meta: {
+            title: i18n.t('setting.Applets'),
+            icon: 'tasks',
+            permissions: ['settings.change_terminal']
+          }
+        },
+        {
+          path: 'create',
+          name: 'AppletCreate',
+          component: () => import('@/views/settings/Applet/Applets/AppletCreateUpdate'),
+          meta: {
+            title: i18n.t('route.AppletCreate'),
+            permissions: ['settings.change_terminal']
+          },
+          hidden: true
+        }
+      ]
+    },
    {
      path: '/settings/security',
      name: 'Security',
--- a/src/router/workbench/index.js
+++ b/src/router/workbench/index.js
@@ -42,48 +42,6 @@ export default {
        permissions: ['perms.view_myassets']
      }
    },
-    {
-      path: '/workbench/apps',
-      name: 'Apps',
-      component: empty,
-      redirect: 'remoteapp',
-      alwaysShow: true,
-      meta: {
-        title: i18n.t('route.MyApps'),
-        icon: 'th',
-        permissions: ['perms.view_myapps']
-      },
-      children: [
-        {
-          path: 'remote-apps',
-          name: 'MyRemoteApps',
-          component: () => import('@/views/myapps/RemoteApp'),
-          meta: {
-            title: i18n.t('route.RemoteApp'),
-            permissions: [],
-            licenseRequired: true
-          }
-        },
-        {
-          path: 'databases',
-          name: 'MyDatabases',
-          component: () => import('@/views/myapps/DatabaseApp'),
-          meta: {
-            title: i18n.t('route.DatabaseApp'),
-            permissions: []
-          }
-        },
-        {
-          path: 'kubernetes',
-          name: 'MyKubernetes',
-          component: () => import('@/views/myapps/KubernetesApp'),
-          meta: {
-            title: i18n.t('route.KubernetesApp'),
-            permissions: []
-          }
-        }
-      ]
-    },
    {
      path: '/workbench/ops',
      component: empty,
--- a/src/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts.vue
+++ b/src/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts.vue
@@ -1,36 +1,37 @@
 <template>
-  <div v-if="isUpdate(this)">
-    在资产详情中更新账号信息
-  </div>
-  <div v-else class="accounts">
-    <el-table :data="accounts" style="width: 100%">
-      <el-table-column prop="username" label="用户名" width="180" />
-      <el-table-column prop="privileged" label="特权账号">
-        <template v-slot="scope">
-          <i class="fa text-primary" :class="scope.row['privileged'] ? 'fa-check' : ''" />
-        </template>
-      </el-table-column>
-      <el-table-column fixed="right" align="right" label="操作" width="135" class-name="buttons">
-        <template v-slot="scope">
-          <el-button type="danger" icon="el-icon-minus" size="mini" @click="removeAccount(scope.row)" />
-          <el-button type="primary" icon="el-icon-edit" size="mini" @click="onEditClick(scope.row)" />
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class="actions">
-      <el-button size="mini" type="primary" @click="onAddClick">添加</el-button>
-      <el-button size="mini" type="success" @click="onAddFromTemplateClick">模版添加</el-button>
+  <div>
+    <div v-if="isUpdate(this)">
+      在资产详情中更新账号信息
+    </div>
+    <div v-else class="accounts">
+      <el-table :data="accounts" style="width: 100%">
+        <el-table-column prop="username" label="用户名" width="180" />
+        <el-table-column prop="privileged" label="特权账号">
+          <template v-slot="scope">
+            <i class="fa text-primary" :class="scope.row['privileged'] ? 'fa-check' : ''" />
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" align="right" label="操作" width="135" class-name="buttons">
+          <template v-slot="scope">
+            <el-button type="danger" icon="el-icon-minus" size="mini" @click="removeAccount(scope.row)" />
+            <el-button type="primary" icon="el-icon-edit" size="mini" @click="onEditClick(scope.row)" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="actions">
+        <el-button size="mini" type="primary" @click="onAddClick">添加</el-button>
+        <el-button size="mini" type="success" @click="onAddFromTemplateClick">模版添加</el-button>
+      </div>
+      <AddAccountDialog
+        :visible.sync="addAccountDialogVisible"
+        :platform="platform"
+        :account="account"
+        :accounts="accounts"
+      />
+      <AccountTemplateDialog
+        :visible.sync="templateDialogVisible"
+      />
    </div>
-
-    <AddAccountDialog
-      :visible.sync="addAccountDialogVisible"
-      :platform="platform"
-      :account="account"
-      :accounts="accounts"
-    />
-    <AccountTemplateDialog
-      :visible.sync="templateDialogVisible"
-    />
  </div>
 </template>

@@ -61,11 +62,11 @@ export default {
  },
  data() {
    return {
-      addAccountDialogVisible: false,
-      templateDialogVisible: false,
      accounts: [],
      account: {},
-      initial: false
+      initial: false,
+      addAccountDialogVisible: false,
+      templateDialogVisible: false
    }
  },
  watch: {
@@ -91,7 +92,7 @@ export default {
    onEditClick(account) {
      this.account = account
      setTimeout(() => {
-        this.visible = true
+        this.addAccountDialogVisible = true
      })
    },
    onAddClick() {
--- a/src/views/assets/Platform/const.js
+++ b/src/views/assets/Platform/const.js
@@ -14,7 +14,7 @@ export const platformFieldsMeta = (vm) => {
        'ansible_enabled', 'ansible_config',
        'ping_enabled', 'ping_method',
        'gather_facts_enabled', 'gather_facts_method',
-        'create_account_enabled', 'create_account_method',
+        'push_account_enabled', 'push_account_method',
        'change_secret_enabled', 'change_secret_method',
        'verify_account_enabled', 'verify_account_method'
      ],
@@ -25,7 +25,7 @@ export const platformFieldsMeta = (vm) => {
        },
        ping_method: {},
        gather_facts_method: {},
-        create_account_method: {},
+        push_account_method: {},
        change_secret_method: {},
        verify_account_method: {}
      }
--- a/src/views/myapps/DatabaseApp.vue
+++ b/src/views/myapps/DatabaseApp.vue
@@ -1,96 +0,0 @@
-<template>
-  <Page>
-    <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-  </Page>
-
-</template>
-
-<script>
-import ListTable from '@/components/ListTable'
-import Page from '@/layout/components/Page'
-import { ActionsFormatter } from '@/components/TableFormatters'
-
-export default {
-  name: 'DatabaseApp',
-  components: {
-    ListTable,
-    Page
-  },
-  props: {
-  },
-  data() {
-    return {
-      tableConfig: {
-        url: `/api/v1/perms/users/applications/?category=db`,
-        columns: [
-          {
-            prop: 'name',
-            align: 'center',
-            label: this.$t('assets.Name'),
-            sortable: true
-          },
-          {
-            prop: 'type_display',
-            align: 'center',
-            label: this.$t('assets.Type')
-          },
-          {
-            prop: 'attrs.database',
-            align: 'center',
-            label: this.$t('assets.Database')
-          },
-          {
-            prop: 'comment',
-            align: 'center',
-            showOverflowTooltip: true,
-            label: this.$t('assets.Comment')
-          },
-          {
-            prop: 'id',
-            align: 'center',
-            label: this.$t('assets.Action'),
-            formatter: ActionsFormatter,
-            formatterArgs: {
-              hasDelete: false,
-              hasUpdate: false,
-              hasClone: false,
-              extraActions: [
-                {
-                  name: 'connect',
-                  fa: 'fa-terminal',
-                  type: 'primary',
-                  callback: function({ row }) {
-                    window.open(`/luna/?type=database_app&login_to=${row.id}`, '_blank')
-                  }
-                }
-              ]
-            }
-          }
-        ]
-      },
-      headerActions: {
-        hasExport: false,
-        hasImport: false,
-        hasRefresh: true,
-        hasCreate: false,
-        hasBulkDelete: false,
-        hasBulkUpdate: false,
-        hasLeftActions: false,
-        hasSearch: true,
-        hasRightActions: true
-      }
-    }
-  },
-  computed: {
-
-  },
-  mounted() {
-  },
-  methods: {
-  }
-}
-</script>
-
-<style lang='less' scoped>
-
-</style>
--- a/src/views/myapps/KubernetesApp.vue
+++ b/src/views/myapps/KubernetesApp.vue
@@ -1,96 +0,0 @@
-<template>
-  <Page>
-    <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-  </Page>
-
-</template>
-
-<script>
-import ListTable from '@/components/ListTable'
-import Page from '@/layout/components/Page'
-import { ActionsFormatter } from '@/components/TableFormatters'
-
-export default {
-  name: 'KubernetesApp',
-  components: {
-    ListTable,
-    Page
-  },
-  props: {
-  },
-  data() {
-    return {
-      tableConfig: {
-        url: `/api/v1/perms/users/applications/?category=cloud`,
-        columns: [
-          {
-            prop: 'name',
-            align: 'center',
-            label: this.$t('assets.Name'),
-            sortable: true
-          },
-          {
-            prop: 'type_display',
-            align: 'center',
-            label: this.$t('assets.Type')
-          },
-          {
-            prop: 'attrs.cluster',
-            align: 'center',
-            label: this.$t('applications.cluster')
-          },
-          {
-            prop: 'comment',
-            align: 'center',
-            showOverflowTooltip: true,
-            label: this.$t('assets.Comment')
-          },
-          {
-            prop: 'id',
-            align: 'center',
-            label: this.$t('assets.Action'),
-            formatter: ActionsFormatter,
-            formatterArgs: {
-              hasDelete: false,
-              hasUpdate: false,
-              hasClone: false,
-              extraActions: [
-                {
-                  name: 'connect',
-                  fa: 'fa-terminal',
-                  type: 'primary',
-                  callback: function({ row }) {
-                    window.open(`/luna/?type=k8s_app&login_to=${row.id}`, '_blank')
-                  }
-                }
-              ]
-            }
-          }
-        ]
-      },
-      headerActions: {
-        hasExport: false,
-        hasImport: false,
-        hasRefresh: true,
-        hasCreate: false,
-        hasBulkDelete: false,
-        hasBulkUpdate: false,
-        hasLeftActions: false,
-        hasSearch: true,
-        hasRightActions: true
-      }
-    }
-  },
-  computed: {
-
-  },
-  mounted() {
-  },
-  methods: {
-  }
-}
-</script>
-
-<style lang='less' scoped>
-
-</style>
--- a/src/views/myapps/RemoteApp.vue
+++ b/src/views/myapps/RemoteApp.vue
@@ -1,95 +0,0 @@
-<template>
-  <Page>
-    <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-  </Page>
-</template>
-
-<script>
-import ListTable from '@/components/ListTable'
-import Page from '@/layout/components/Page'
-import { ActionsFormatter } from '@/components/TableFormatters'
-
-export default {
-  name: 'RemoteApp',
-  components: {
-    ListTable,
-    Page
-  },
-  props: {
-  },
-  data() {
-    return {
-      tableConfig: {
-        url: `/api/v1/perms/users/applications/?category=remote_app`,
-        columns: [
-          {
-            prop: 'name',
-            align: 'center',
-            label: this.$t('assets.Name'),
-            sortable: true
-          },
-          {
-            prop: 'type_display',
-            align: 'center',
-            label: this.$t('assets.Type')
-          },
-          {
-            prop: 'attrs.asset_info.hostname',
-            align: 'center',
-            label: this.$t('assets.Asset')
-          },
-          {
-            prop: 'comment',
-            align: 'center',
-            showOverflowTooltip: true,
-            label: this.$t('assets.Comment')
-          },
-          {
-            prop: 'id',
-            align: 'center',
-            label: this.$t('assets.Action'),
-            formatter: ActionsFormatter,
-            formatterArgs: {
-              hasDelete: false,
-              hasUpdate: false,
-              hasClone: false,
-              extraActions: [
-                {
-                  name: 'connect',
-                  fa: 'fa-terminal',
-                  type: 'primary',
-                  callback: function({ row }) {
-                    window.open(`/luna/?type=remote_app&login_to=${row.id}`, '_blank')
-                  }
-                }
-              ]
-            }
-          }
-        ]
-      },
-      headerActions: {
-        hasExport: false,
-        hasImport: false,
-        hasRefresh: true,
-        hasCreate: false,
-        hasBulkDelete: false,
-        hasBulkUpdate: false,
-        hasLeftActions: false,
-        hasSearch: true,
-        hasRightActions: true
-      }
-    }
-  },
-  computed: {
-
-  },
-  mounted() {
-  },
-  methods: {
-  }
-}
-</script>
-
-<style lang='less' scoped>
-
-</style>
--- a/src/views/settings/Applet/AppletHosts.vue
+++ b/src/views/settings/Applet/AppletHosts.vue
@@ -0,0 +1,14 @@
+<template>
+  <span />
+
+</template>
+
+<script>
+export default {
+  name: 'AppletHosts'
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/settings/Applet/Applets/AppletCreateUpdate.vue
+++ b/src/views/settings/Applet/Applets/AppletCreateUpdate.vue
@@ -0,0 +1,34 @@
+<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>
--- a/src/views/settings/Applet/Applets/AppletList.vue
+++ b/src/views/settings/Applet/Applets/AppletList.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <ListTable v-bind="$data" />
+    <UploadDialog :visible.sync="uploadDialogVisible" />
+  </div>
+</template>
+
+<script>
+import { ListTable } from '@/components'
+import UploadDialog from './UploadDialog'
+export default {
+  name: 'Applets',
+  components: {
+    ListTable,
+    UploadDialog
+  },
+  data() {
+    return {
+      uploadDialogVisible: false,
+      tableConfig: {
+        url: '/api/v1/terminal/applets/',
+        columns: [
+          'name', 'display_name', 'icon', 'type', 'actions'
+        ],
+        columnsMeta: {
+          icon: {
+            formatter: (row) => {
+              return <img src={row.icon} width='32' height='32' alt='icon'></img>
+            }
+          }
+        }
+      },
+      headerActions: {
+        onCreate: () => {
+          this.uploadDialogVisible = true
+        }
+        // moreCreates: {
+        //   callback: (option) => {
+        //     this.uploadDialogVisible = true
+        //   },
+        //   dropdown: [
+        //     {
+        //       title: this.$t('common.OfflineUpload'),
+        //       name: 'ByUpload'
+        //     }
+        //     {
+        //       title: this.$t('common.Online'),
+        //       name: 'Online'
+        //     }
+        //    ]
+        // }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/settings/Applet/Applets/UploadDialog.vue
+++ b/src/views/settings/Applet/Applets/UploadDialog.vue
@@ -0,0 +1,72 @@
+<template>
+  <Dialog
+    title="离线上传"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <el-form label-position="top">
+      <el-form-item
+        :label="$tc('common.Upload' )"
+        :label-width="'100px'"
+        class="file-uploader"
+      >
+        <el-upload
+          ref="upload"
+          drag
+          action="string"
+          list-type="text/csv"
+          :limit="1"
+          :auto-upload="false"
+          :on-change="onFileChange"
+          :before-upload="beforeUpload"
+          accept=".zip"
+        >
+          <i class="el-icon-upload" />
+          <div class="el-upload__text">{{ $t('common.imExport.dragUploadFileInfo') }}</div>
+          <div slot="tip" class="el-upload__tip">
+            <span :class="{'hasError': hasFileFormatOrSizeError }">
+              {{ $t('terminal.uploadZipTips') }}
+            </span>
+            <div v-if="renderError" class="hasError">{{ renderError }}</div>
+          </div>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+  </Dialog>
+</template>
+
+<script>
+import { Dialog } from '@/components'
+export default {
+  name: 'UploadDialog',
+  components: {
+    Dialog
+  },
+  data() {
+    return {
+      hasFileFormatOrSizeError: false,
+      renderError: ''
+    }
+  },
+  methods: {
+    onFileChange(file, fileList) {
+    },
+    beforeUpload(file) {
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.file-uploader.el-form-item {
+  margin-bottom: 0;
+
+  >>> .el-upload {
+    width: 100%;
+    .el-upload-dragger {
+      width: 100%;
+    }
+  }
+}
+
+</style>
--- a/src/views/settings/Applet/index.vue
+++ b/src/views/settings/Applet/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <TabPage :submenu="submenu" :active-menu.sync="activeMenu">
+    <keep-alive>
+      <component :is="activeMenu" />
+    </keep-alive>
+  </TabPage>
+</template>
+
+<script>
+import { TabPage } from '@/layout/components'
+import Applets from './Applets/AppletList'
+import AppletHosts from './AppletHosts'
+export default {
+  name: 'Applet',
+  components: {
+    TabPage,
+    Applets,
+    AppletHosts
+  },
+  data() {
+    return {
+      activeMenu: 'Applets',
+      submenu: [
+        {
+          title: this.$t('terminal.Applets'),
+          name: 'Applets'
+        },
+        {
+          title: this.$t('terminal.AppletHosts'),
+          name: 'AppletHosts'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>