feat: 同步删除远程机器账号

src/components/Apps/AccountListTable/RemoveAccount.vue

@@ -0,0 +1,112 @@
+<template>
+  <Dialog
+    :destroy-on-close="true"
+    :show-cancel="false"
+    :visible.sync="show"
+    :width="'50'"
+    v-bind="$attrs"
+    @confirm="accountConfirmHandle"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+import { openTaskPage } from '@/utils/jms'
+
+export default {
+  name: 'RemoveAccount',
+  components: {
+    Dialog
+  },
+  props: {
+    accounts: {
+      type: Array,
+      default: () => []
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      show: false,
+      mfaDialogVisible: true
+    }
+  },
+  computed: {},
+  mounted() {
+    const url = `/api/v1/accounts/accounts/tasks/`
+    this.$axios.post(
+      url, { disableFlashErrorMsg: true, action: 'remove' }
+    ).then(resp => {
+      this.$axios.post(
+        `/api/v1/accounts/accounts/tasks/`,
+        {
+          action: 'remove',
+          gather_accounts: this.accounts.map(account => account.id)
+        }
+      ).then(res => {
+        openTaskPage(res['task'])
+      })
+    })
+  },
+  methods: {
+    accountConfirmHandle() {
+      this.show = false
+      this.mfaDialogVisible = false
+    },
+    exit() {
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.item-textarea > > > .el-textarea__inner {
+  height: 110px;
+}
+
+.el-form-item {
+  border-bottom: 1px solid #EBEEF5;
+  padding: 5px 0;
+  margin-bottom: 0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  > > > .el-form-item__label {
+    padding-right: 20px;
+    line-height: 30px;
+  }
+
+  > > > .el-form-item__content {
+    line-height: 30px;
+
+    pre {
+      margin: 0;
+    }
+  }
+}
+
+ul {
+  margin: 0;
+}
+
+li {
+  display: block;
+  font-size: 13px;
+  margin-bottom: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .title {
+    color: #303133;
+    font-weight: 500;
+  }
+}
+</style>

src/i18n/langs/en.json

@@ -118,6 +118,8 @@
     "TaskID": "Task ID",
     "AccountTemplate": "Account template",
     "Sync": "Sync",
+    "SyncDelete": "Sync delete",
+    "BulkSyncDelete": "Bulk sync delete",
     "SyncUpdateAccountInfo": "Sync update account info",
     "AddAccountResult": "Add account result",
     "AutoPush": "Auto Push",

src/i18n/langs/ja.json

@@ -118,6 +118,8 @@
     "TaskID": "タスク ID",
     "AccountTemplate": "账号模版",
     "Sync": "同期",
+    "SyncDelete": "同期削除",
+    "BulkSyncDelete": "一括同期削除",
     "SyncUpdateAccountInfo": "アカウント情報の同期更新",
     "AddAccountResult": "账号批量添加结果",
     "AutoPush": "自動プッシュ",

src/i18n/langs/zh.json

@@ -11,6 +11,8 @@
     "GenerateAccounts": "重新生成账号",
     "UpdateSecret": "更新密文",
     "Sync": "同步",
+    "SyncDelete": "同步删除",
+    "BulkSyncDelete": "批量同步删除",
     "SyncUpdateAccountInfo": "同步更新账号信息",
     "AddAccountResult": "账号批量添加结果",
     "AccountPolicy": "账号策略",

src/views/accounts/AccountGather/AccountGatherList.vue

@@ -1,19 +1,34 @@
 <template>
-  <TreeTable :header-actions="headerActions" :table-config="tableConfig" :tree-setting="treeSetting" />
+  <div>
+    <RemoveAccount
+      v-if="showDeleteAccountDialog"
+      :accounts="gatherAccounts"
+      :visible.sync="showDeleteAccountDialog"
+    />
+    <TreeTable
+      :header-actions="headerActions"
+      :table-config="tableConfig"
+      :tree-setting="treeSetting"
+    />
+  </div>
 </template>
 
 <script>
 import TreeTable from '@/components/Table/TreeTable'
 import { toSafeLocalDateStr } from '@/utils/common'
 import { ActionsFormatter } from '@/components/Table/TableFormatters'
+import RemoveAccount from '@/components/Apps/AccountListTable/RemoveAccount.vue'
 
 export default {
   components: {
-    TreeTable
+    TreeTable,
+    RemoveAccount
   },
   data() {
     const vm = this
     return {
+      showDeleteAccountDialog: false,
+      gatherAccounts: {},
       treeSetting: {
         showMenu: false,
         showRefresh: true,
@@ -66,8 +81,8 @@ export default {
               moreActionsTitle: this.$t('common.More'),
               extraActions: [
                 {
-                  name: 'View',
+                  name: 'Sync',
-                  title: this.$t('common.Sync'),
+                  title: this.$t('accounts.Sync'),
                   can: this.$hasPerm('accounts.add_gatheredaccount') && !this.$store.getters.currentOrgIsRoot,
                   type: 'primary',
                   callback: ({ row }) => {
@@ -79,6 +94,19 @@ export default {
                     }).catch(() => {
                     })
                   }
+                },
+                {
+                  name: 'SyncDelete',
+                  title: this.$t('accounts.SyncDelete'),
+                  can: this.$hasPerm('accounts.remove_account') && !this.$store.getters.currentOrgIsRoot,
+                  type: 'danger',
+                  callback: ({ row }) => {
+                    vm.gatherAccounts = [row]
+                    vm.showDeleteAccountDialog = false
+                    setTimeout(() => {
+                      vm.showDeleteAccountDialog = true
+                    })
+                  }
                 }
               ]
             }
@@ -103,7 +131,9 @@ export default {
               return selectedRows.length > 0 && vm.$hasPerm('accounts.add_gatheredaccount')
             },
             callback: function({ selectedRows }) {
-              const ids = selectedRows.map(v => { return v.id })
+              const ids = selectedRows.map(v => {
+                return v.id
+              })
               this.$axios.post(
                 `/api/v1/accounts/gathered-accounts/sync-accounts/`,
                 { gathered_account_ids: ids }
@@ -113,6 +143,22 @@ export default {
                 this.$message.error(this.$tc('common.bulkSyncErrorMsg' + ' ' + err))
               })
             }.bind(this)
+          },
+          {
+            name: 'BulkSyncDelete',
+            title: this.$t('common.BulkSyncDelete'),
+            type: 'primary',
+            icon: 'fa fa-exchange',
+            can: ({ selectedRows }) => {
+              return selectedRows.length > 0 && vm.$hasPerm('accounts.remove_account')
+            },
+            callback: function({ selectedRows }) {
+              vm.gatherAccounts = selectedRows
+              vm.showDeleteAccountDialog = false
+              setTimeout(() => {
+                vm.showDeleteAccountDialog = true
+              })
+            }
           }
         ]
       }