perf: 更新账号发现

src/components/Table/TableFormatters/DiscoverConfirmFormatter.vue

@@ -1,9 +1,14 @@
 <template>
   <span class="conform-td">
     <span v-if="!iValue" class="confirm-action">
-      <el-tooltip :content="$tc('Add account to asset')" :open-delay="400">
+      <el-tooltip v-if="row.present" :content="$tc('Add account to asset')" :open-delay="400">
         <el-button class="confirm action" size="mini" @click="handleConfirm">
-          <i class="fa fa-check" />
+          <i class="fa fa-plus" />
+        </el-button>
+      </el-tooltip>
+      <el-tooltip v-else :content="$tc('Remove account ')" :open-delay="400">
+        <el-button class="remove action" size="mini" @click="handleRemove">
+          <i class="fa fa-minus" />
         </el-button>
       </el-tooltip>
       <el-tooltip :content="$tc('Ignore')" :open-delay="400">
@@ -37,7 +42,10 @@ export default {
           confirm: ({ row, cellValue }) => {
           },
           ignore: ({ row, cellValue }) => {
-          }
+          },
+          remove: ({ row, cellValue }) => {
+          },
+          confirmIcon: 'fa fa-check'
         }
       }
     }
@@ -61,6 +69,14 @@ export default {
       } else {
         return this.cellValue
       }
+    },
+    iConfirmIcon() {
+      const icon = this.formatterArgs.confirmIcon
+      if (typeof icon === 'function') {
+        return icon({ row: this.row, cellValue: this.cellValue })
+      } else {
+        return icon
+      }
     }
   },
   methods: {
@@ -69,6 +85,9 @@ export default {
     },
     handleIgnore() {
       this.formatterArgs.ignore({ row: this.row, cellValue: this.cellValue })
+    },
+    handleRemove() {
+      this.formatterArgs.remove({ row: this.row, cellValue: this.cellValue })
     }
   }
 }
@@ -86,6 +105,12 @@ export default {
     }
   }
 
+  &.remove {
+    ::v-deep i {
+      color: var(--color-danger);
+    }
+  }
+
   &.ignore {
     ::v-deep svg.svg-icon {
     }

src/components/Table/TableFormatters/index.js

@@ -19,7 +19,7 @@ import TagChoicesFormatter from './TagChoicesFormatter.vue'
 import SwitchFormatter from './SwitchFormatter.vue'
 import AccountInfoFormatter from './AccountInfoFormatter.vue'
 import PlatformFormatter from './PlatformFormatter.vue'
-import ConfirmFormatter from './ConfirmOrIgnore.vue'
+import DiscoverConfirmFormatter from './DiscoverConfirmFormatter.vue'
 
 export default {
   DetailFormatter,
@@ -43,7 +43,7 @@ export default {
   SwitchFormatter,
   PlatformFormatter,
   AccountInfoFormatter,
-  ConfirmFormatter
+  DiscoverConfirmFormatter
 }
 
 export {
@@ -67,6 +67,6 @@ export {
   LabelsFormatter,
   SwitchFormatter,
   PlatformFormatter,
-  ConfirmFormatter,
+  DiscoverConfirmFormatter,
   AccountInfoFormatter
 }

src/views/accounts/AccountDiscover/AccountDiscoverList.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <RemoveAccount
-      v-if="showDeleteAccountDialog"
-      :accounts="gatherAccounts"
-      :visible.sync="showDeleteAccountDialog"
+    <DeleteDialog
+      v-if="deleteDialog.visible"
+      :account="deleteDialog.account"
+      :visible.sync="deleteDialog.visible"
     />
     <AssetTreeTable
       ref="AssetTreeTable"
@@ -18,17 +18,21 @@
 
 <script>
 import AssetTreeTable from '@/components/Apps/AssetTreeTable/index.vue'
-import RemoveAccount from '@/components/Apps/AccountListTable/RemoveAccount.vue'
+import DeleteDialog from '@/views/accounts/AccountDiscover/DeleteDialog.vue'
 import { gatherAccountHeaderActions, gatherAccountTableConfig } from '@/views/accounts/const'
 
 export default {
   components: {
     AssetTreeTable,
-    RemoveAccount
+    DeleteDialog
   },
   data() {
     return {
       showDeleteAccountDialog: false,
+      deleteDialog: {
+        visible: false,
+        account: {}
+      },
       gatherAccounts: [],
       treeSetting: {
         showMenu: false,

src/views/accounts/AccountDiscover/DeleteDialog.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <Dialog
+      :destroy-on-close="true"
+      :show-cancel="false"
+      :title="$tc('DeleteGatherAccountTitle')"
+      :visible.sync="iVisible"
+      v-bind="$attrs"
+      width="600px"
+      @confirm="handleConfirm"
+      v-on="$listeners"
+    >
+      <el-alert type="error">
+        是否要删除 发现账号 "{{ account.username }} - {{ account.asset.name }}" ?
+
+        <div class="extra-delete">
+          <div v-if="hasDeleteAccount && assetAccounts.length > 0" class="delete-item">
+            <el-checkbox v-model="iDeleteAccount">
+              发现资产账号列表中，存在该账号，是否同步删除 ?
+            </el-checkbox>
+            <ul>
+              <li v-for="item in assetAccounts" :key="item.id">
+                <a href="">
+                  {{ item.name }}({{ item.username }}) - {{ account.asset.name }}
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div v-if="hasDeleteRemote && account.present" class="delete-item">
+            <el-checkbox v-model="iDeleteRemote">
+              远端主机上存在该账号，是否要同步删除 ?
+            </el-checkbox>
+          </div>
+        </div>
+      </el-alert>
+    </Dialog>
+    <RemoveAccount
+      v-if="removeAccountTask.visible"
+      :accounts="removeAccountTask.accounts"
+      :visible.sync="removeAccountTask.visible"
+    />
+  </div>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+import RemoveAccount from '@/components/Apps/AccountListTable/RemoveAccount.vue'
+
+export default {
+  name: 'DeleteAccount',
+  components: {
+    Dialog,
+    RemoveAccount
+  },
+  props: {
+    account: {
+      type: Object,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    hasDeleteRemote: {
+      type: Boolean,
+      default: true
+    },
+    defaultDeleteRemote: {
+      type: Boolean,
+      default: false
+    },
+    hasDeleteAccount: {
+      type: Boolean,
+      default: true
+    },
+    defaultDeleteAccount: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      removeAccountTask: {
+        visible: false,
+        accounts: []
+      },
+      iDeleteRemote: this.defaultDeleteRemote,
+      iDeleteAccount: this.defaultDeleteAccount,
+      assetAccounts: []
+    }
+  },
+  computed: {
+    iVisible: {
+      set(item) {
+        this.$emit('update:visible', item)
+      },
+      get() {
+        return this.visible
+      }
+    }
+  },
+  mounted() {
+    if (this.account.id) {
+      this.getAssetAccount()
+    }
+  },
+  methods: {
+    getAssetAccount() {
+      const url = '/api/v1/accounts/accounts/'
+      this.$axios.get(url, {
+        params: {
+          username: this.account.username,
+          asset: this.account.asset.id,
+          fields_size: 'mini'
+        }
+      }).then(res => {
+        this.assetAccounts = res
+      })
+    },
+    handleConfirm() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.extra-delete {
+  .delete-item {
+    margin-top: 20px;
+  }
+
+  ::v-deep {
+    .el-checkbox__label {
+      font-size: 12px;
+    }
+  }
+}
+</style>

src/views/accounts/const.js

@@ -3,7 +3,7 @@ import i18n from '@/i18n/i18n'
 import InputWithUnit from '@/components/Form/FormFields/InputWithUnit.vue'
 import store from '@/store'
 import { toSafeLocalDateStr } from '@/utils/time'
-import { ActionsFormatter, ConfirmFormatter } from '@/components/Table/TableFormatters'
+import { ActionsFormatter, DiscoverConfirmFormatter } from '@/components/Table/TableFormatters'
 
 const validatorInterval = (rule, value, callback) => {
   if (parseInt(value) < 1) {
@@ -91,7 +91,8 @@ export const gatherAccountTableConfig = (vm, url) => {
         width: '150px'
       },
       status: {
-        formatter: ConfirmFormatter,
+        label: vm.$t('Pending'),
+        formatter: DiscoverConfirmFormatter,
         width: '100px',
         formatterArgs: {
           confirm: ({ row }) => {
@@ -113,6 +114,10 @@ export const gatherAccountTableConfig = (vm, url) => {
             }).catch(() => {
               row.status = vm.$t('Error')
             })
+          },
+          remove({ row }) {
+            vm.deleteDialog.visible = true
+            vm.deleteDialog.account = row
           }
         }
       },
@@ -122,11 +127,15 @@ export const gatherAccountTableConfig = (vm, url) => {
           hasClone: false,
           hasUpdate: false, // can set function(row, value)
           moreActionsTitle: vm.$t('More'),
+          onDelete: ({ row }) => {
+            vm.deleteDialog.visible = true
+            vm.deleteDialog.account = row
+          },
           extraActions: [
             {
               name: 'Sync',
               title: vm.$t('Sync'),
-              can: vm.$hasPerm('accounts.add_gatheredaccount') && !vm.$store.getters.currentOrgIsRoot,
+              can: vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot,
               type: 'primary',
               callback: ({ row }) => {
                 vm.$axios.post(
@@ -137,19 +146,6 @@ export const gatherAccountTableConfig = (vm, url) => {
                 }).catch(() => {
                 })
               }
-            },
-            {
-              name: 'SyncDelete',
-              title: vm.$t('SyncDelete'),
-              can: vm.$hasPerm('accounts.remove_account') && !vm.$store.getters.currentOrgIsRoot,
-              type: 'danger',
-              callback: ({ row }) => {
-                vm.gatherAccounts = [row]
-                vm.showDeleteAccountDialog = false
-                setTimeout(() => {
-                  vm.showDeleteAccountDialog = true
-                })
-              }
             }
           ]
         }