From e3af538b59a94cb3666b7d8c789dbe7c8ea3873c Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Wed, 9 Feb 2022 17:56:42 +0800 Subject: [PATCH 1/2] refactor: refactoring the batch operation logic of attachment management Signed-off-by: Ryan Wang --- .../Attachment/AttachmentSelectModal.vue | 86 ++++--- src/views/attachment/AttachmentList.vue | 220 +++++++++--------- 2 files changed, 149 insertions(+), 157 deletions(-) diff --git a/src/components/Attachment/AttachmentSelectModal.vue b/src/components/Attachment/AttachmentSelectModal.vue index 6b634843c..de78df059 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 +158,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 +178,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 +203,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 +215,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 +228,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 +242,6 @@ export default { this.handleListTypes() }, methods: { - ...mapGetters(['color']), - /** * List attachments */ @@ -293,8 +300,24 @@ 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) }, /** @@ -347,6 +370,7 @@ export default { onOk: async () => { await apiClient.attachment.delete(item.id) await this.handleListAttachments() + this.handleUnselect(item) } }) } @@ -394,67 +418,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 +456,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 +473,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] } } } From b5cd25d5cf9e04cc25287372e0e50e6c01d6e3eb Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Wed, 9 Feb 2022 18:10:57 +0800 Subject: [PATCH 2/2] feat: support select all Signed-off-by: Ryan Wang --- src/views/attachment/AttachmentList.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/views/attachment/AttachmentList.vue b/src/views/attachment/AttachmentList.vue index cf6a817f9..521fedcc8 100644 --- a/src/views/attachment/AttachmentList.vue +++ b/src/views/attachment/AttachmentList.vue @@ -52,6 +52,9 @@
上传 + + 全选 + 删除 @@ -320,6 +323,10 @@ export default { this.list.selected = this.list.selected.filter(item => item.id !== attachment.id) }, + handleSelectAll() { + this.list.selected = this.list.data + }, + /** * Show context menu */