Skip to content

Commit

Permalink
perf: 更新账号发现
Browse files Browse the repository at this point in the history
  • Loading branch information
ibuler committed Nov 1, 2024
1 parent 0e7c682 commit 9271cb2
Show file tree
Hide file tree
Showing 5 changed files with 193 additions and 28 deletions.
Original file line number Diff line number Diff line change
@@ -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">
Expand Down Expand Up @@ -37,7 +42,10 @@ export default {
confirm: ({ row, cellValue }) => {
},
ignore: ({ row, cellValue }) => {
}
},
remove: ({ row, cellValue }) => {
},
confirmIcon: 'fa fa-check'
}
}
}
Expand All @@ -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: {
Expand All @@ -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 })
}
}
}
Expand All @@ -86,6 +105,12 @@ export default {
}
}
&.remove {
::v-deep i {
color: var(--color-danger);
}
}
&.ignore {
::v-deep svg.svg-icon {
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/Table/TableFormatters/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -43,7 +43,7 @@ export default {
SwitchFormatter,
PlatformFormatter,
AccountInfoFormatter,
ConfirmFormatter
DiscoverConfirmFormatter
}

export {
Expand All @@ -67,6 +67,6 @@ export {
LabelsFormatter,
SwitchFormatter,
PlatformFormatter,
ConfirmFormatter,
DiscoverConfirmFormatter,
AccountInfoFormatter
}
16 changes: 10 additions & 6 deletions src/views/accounts/AccountDiscover/AccountDiscoverList.vue
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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,
Expand Down
140 changes: 140 additions & 0 deletions src/views/accounts/AccountDiscover/DeleteDialog.vue
Original file line number Diff line number Diff line change
@@ -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>
28 changes: 12 additions & 16 deletions src/views/accounts/const.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 }) => {
Expand All @@ -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
}
}
},
Expand All @@ -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(
Expand All @@ -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
})
}
}
]
}
Expand Down

0 comments on commit 9271cb2

Please sign in to comment.