From 10bf358e33ef4303c629a19df370fae2d78d9464 Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Thu, 10 Feb 2022 16:00:17 +0800 Subject: [PATCH] refactor: refactoring the batch operation logic of attachment management (halo-dev/console#431) * refactor: refactoring the batch operation logic of attachment management Signed-off-by: Ryan Wang * feat: support select all Signed-off-by: Ryan Wang --- .../Attachment/AttachmentSelectModal.vue | 86 ++++--- src/views/attachment/AttachmentList.vue | 225 +++++++++--------- 2 files changed, 155 insertions(+), 156 deletions(-) diff --git a/src/components/Attachment/AttachmentSelectModal.vue b/src/components/Attachment/AttachmentSelectModal.vue index 6b634843c4..de78df0592 100644 --- a/src/components/Attachment/AttachmentSelectModal.vue +++ b/src/components/Attachment/AttachmentSelectModal.vue @@ -60,52 +60,50 @@ :loading="list.loading" class="attachments-group" > - -
-
- {{ item.suffix }} - + +
+
+ {{ item.suffix }} + +
+ + + + +
- - - - - -
- + + -
-
+
@@ -145,7 +161,6 @@ import { mixin, mixinDevice } from '@/mixins/mixin.js' import { PageView } from '@/layouts' import apiClient from '@/utils/api-client' -import { mapGetters } from 'vuex' import { attachmentTypes } from '@/core/constant' export default { @@ -166,14 +181,15 @@ export default { total: 0, hasNext: false, hasPrevious: false, - selected: {}, params: { page: 0, size: 18, keyword: undefined, mediaType: undefined, attachmentType: undefined - } + }, + selected: [], + current: {} }, mediaTypes: { @@ -190,19 +206,10 @@ export default { visible: false }, - detailVisible: false, - - supportMultipleSelection: false, - selectedAttachmentCheckbox: {}, - batchSelectedAttachments: [] + detailVisible: false } }, computed: { - selectedAttachmentStyle() { - return { - border: `2px solid ${this.color()}` - } - }, isImage() { return function (attachment) { if (!attachment || !attachment.mediaType) { @@ -211,6 +218,11 @@ export default { return attachment.mediaType.startsWith('image') } }, + isItemSelect() { + return function (attachment) { + return this.list.selected.findIndex(item => item.id === attachment.id) > -1 + } + }, pagination() { return { page: this.list.params.page + 1, @@ -219,11 +231,11 @@ export default { } }, selectPreviousButtonDisabled() { - const index = this.list.data.findIndex(attachment => attachment.id === this.list.selected.id) + const index = this.list.data.findIndex(attachment => attachment.id === this.list.current.id) return index === 0 && !this.list.hasPrevious }, selectNextButtonDisabled() { - const index = this.list.data.findIndex(attachment => attachment.id === this.list.selected.id) + const index = this.list.data.findIndex(attachment => attachment.id === this.list.current.id) return index === this.list.data.length - 1 && !this.list.hasNext } }, @@ -233,8 +245,6 @@ export default { this.handleListTypes() }, methods: { - ...mapGetters(['color']), - /** * List attachments */ @@ -293,8 +303,28 @@ export default { * Handle open attachment detail modal event */ handleOpenDetail(attachment) { - this.list.selected = attachment - this.detailVisible = !this.supportMultipleSelection + this.list.current = attachment + this.detailVisible = true + }, + + handleItemClick(attachment) { + if (this.list.selected.length <= 0) { + this.handleOpenDetail(attachment) + return + } + this.isItemSelect(attachment) ? this.handleUnselect(attachment) : this.handleSelect(attachment) + }, + + handleSelect(attachment) { + this.list.selected = [...this.list.selected, attachment] + }, + + handleUnselect(attachment) { + this.list.selected = this.list.selected.filter(item => item.id !== attachment.id) + }, + + handleSelectAll() { + this.list.selected = this.list.data }, /** @@ -347,6 +377,7 @@ export default { onOk: async () => { await apiClient.attachment.delete(item.id) await this.handleListAttachments() + this.handleUnselect(item) } }) } @@ -394,67 +425,37 @@ export default { handleQuery() { this.handlePageChange() }, + onUploadClose() { this.handlePageChange() this.handleListMediaTypes() this.handleListTypes() }, - getCheckStatus(key) { - return this.selectedAttachmentCheckbox[key] || false - }, - handleMultipleSelection() { - this.supportMultipleSelection = true - // 不允许附件详情抽屉显示 - this.detailVisible = false - this.list.data.forEach(item => { - this.$set(this.selectedAttachmentCheckbox, item.id, false) - }) - }, - handleCancelMultipleSelection() { - this.supportMultipleSelection = false - this.detailVisible = false - this.batchSelectedAttachments = [] - for (const key in this.selectedCheckbox) { - this.$set(this.selectedAttachmentCheckbox, key, false) - } - }, - handleAttachmentSelectionChanged(e, item) { - const isChecked = e.target.checked || false - if (isChecked) { - this.$set(this.selectedAttachmentCheckbox, item.id, true) - this.batchSelectedAttachments.push(item.id) - } else { - this.$set(this.selectedAttachmentCheckbox, item.id, false) - // 从选中id集合中删除id - const index = this.batchSelectedAttachments.indexOf(item.id) - this.batchSelectedAttachments.splice(index, 1) - } - }, /** * Deletes selected attachments */ handleDeleteAttachmentInBatch() { - const that = this - if (this.batchSelectedAttachments.length <= 0) { + const _this = this + if (this.list.selected.length <= 0) { this.$message.warn('你还未选择任何附件，请至少选择一个！') return } this.$confirm({ - title: '确定要批量删除选中的附件吗?', + title: '确定要批量删除选中的附件吗？', content: '一旦删除不可恢复，请谨慎操作', - onOk() { - apiClient.attachment - .deleteInBatch(that.batchSelectedAttachments) - .then(() => { - that.handleCancelMultipleSelection() - that.$message.success('删除成功') - }) - .finally(() => { - that.handleListAttachments() - }) - }, - onCancel() {} + async onOk() { + try { + const attachmentIds = _this.list.selected.map(attachment => attachment.id) + await apiClient.attachment.deleteInBatch(attachmentIds) + _this.list.selected = [] + _this.$message.success('删除成功') + } catch (e) { + _this.$log.error('Failed to delete selected attachments', e) + } finally { + await _this.handleListAttachments() + } + } }) }, @@ -462,16 +463,16 @@ export default { * Select previous attachment */ async handleSelectPrevious() { - const index = this.list.data.findIndex(item => item.id === this.list.selected.id) + const index = this.list.data.findIndex(item => item.id === this.list.current.id) if (index > 0) { - this.list.selected = this.list.data[index - 1] + this.list.current = this.list.data[index - 1] return } if (index === 0 && this.list.hasPrevious) { this.list.params.page-- await this.handleListAttachments() - this.list.selected = this.list.data[this.list.data.length - 1] + this.list.current = this.list.data[this.list.data.length - 1] } }, @@ -479,16 +480,16 @@ export default { * Select next attachment */ async handleSelectNext() { - const index = this.list.data.findIndex(item => item.id === this.list.selected.id) + const index = this.list.data.findIndex(item => item.id === this.list.current.id) if (index < this.list.data.length - 1) { - this.list.selected = this.list.data[index + 1] + this.list.current = this.list.data[index + 1] return } if (index === this.list.data.length - 1 && this.list.hasNext) { this.list.params.page++ await this.handleListAttachments() - this.list.selected = this.list.data[0] + this.list.current = this.list.data[0] } } }