From 6dbcb8e621a230b1f58061820fa36361ea3ac691 Mon Sep 17 00:00:00 2001 From: buvta <12312540+buvta@users.noreply.github.com> Date: Tue, 15 Dec 2020 14:07:36 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8E=86=E5=8F=B2=E4=B8=8E=E6=94=B6=E8=97=8F?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=89=B9=E9=87=8F=E5=88=A0=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/History.vue | 59 +++++++++++++++++++++++++++++++------- src/components/Star.vue | 57 ++++++++++++++++++++++++++++-------- 2 files changed, 93 insertions(+), 23 deletions(-) diff --git a/src/components/History.vue b/src/components/History.vue index 22da5e0..dfb5eac 100644 --- a/src/components/History.vue +++ b/src/components/History.vue @@ -4,11 +4,20 @@ 导出 导入 - 清空 + {{ multipleSelection.length === 0 ? "清空" : "删除所选" }}
- + + + @@ -111,7 +120,11 @@ export default { data () { return { history: [], - sites: [] + sites: [], + shiftDown: false, + selectionBegin: '', + selectionEnd: '', + multipleSelection: [] } }, components: { @@ -172,6 +185,33 @@ export default { fmtMSS (s) { return (s - (s %= 60)) / 60 + (s > 9 ? ':' : ':0') + s }, + selectionCellClick (selection, row) { // 历史id与顺序刚好相反，大的反而在前面 + if (this.shiftDown && this.selectionBegin !== '' && selection.includes(row)) { + this.selectionEnd = row.id + const start = this.history.findIndex(e => e.id === Math.max(this.selectionBegin, this.selectionEnd)) + const end = this.history.findIndex(e => e.id === Math.min(this.selectionBegin, this.selectionEnd)) + const selections = this.history.slice(start, end + 1) + this.$nextTick(() => { + selections.forEach(e => this.$refs.historyTable.toggleRowSelection(e, true)) + }) + this.selectionBegin = this.selectionEnd = '' + return + } + if (selection.includes(row)) { + this.selectionBegin = row.id + } else { + this.selectionBegin = '' + } + }, + handleSelectionChange (rows) { + this.multipleSelection = rows + }, + removeSelectedItems () { + if (!this.multipleSelection.length) this.multipleSelection = this.history + this.multipleSelection.forEach(e => history.remove(e.id)) + this.getAllhistory() + this.updateDatabase() + }, detailEvent (e) { this.detail = { show: true, @@ -267,11 +307,6 @@ export default { } }) }, - clearAllHistory () { - history.clear().then(res => { - this.history = [] - }) - }, getAllhistory () { history.all().then(res => { this.history = res.reverse() @@ -295,10 +330,10 @@ export default { this.$message.warning('删除历史记录失败, 错误信息: ' + err) }) }, - updateDatabase (data) { + updateDatabase () { history.clear().then(res => { var id = length - data.forEach(ele => { + this.history.forEach(ele => { ele.id = id id -= 1 history.add(ele) @@ -312,7 +347,7 @@ export default { onEnd ({ newIndex, oldIndex }) { const currRow = _this.history.splice(oldIndex, 1)[0] _this.history.splice(newIndex, 0, currRow) - _this.updateDatabase(_this.history) + _this.updateDatabase() } }) }, @@ -326,6 +361,8 @@ export default { } }, mounted () { + addEventListener('keydown', code => { if (code.keyCode === 16) this.shiftDown = true }) + addEventListener('keyup', code => { if (code.keyCode === 16) this.shiftDown = false }) window.addEventListener('resize', () => { setTimeout(() => { if (this.$refs.historyWaterfall) this.$refs.historyWaterfall.resize() }, 500) }, true) diff --git a/src/components/Star.vue b/src/components/Star.vue index 62cc3a8..4527a00 100644 --- a/src/components/Star.vue +++ b/src/components/Star.vue @@ -4,17 +4,22 @@ 导出 导入 - 清空 + {{ multipleSelection.length === 0 ? "清空" : "删除所选" }} 同步所有收藏
+ ref="starTable" + :data="list" + :cell-class-name="checkUpdate" + @row-click="detailEvent" + @sort-change="handleSortChange" + @select="selectionCellClick" + @selection-change="handleSelectionChange"> + + e.id === Math.max(this.selectionBegin, this.selectionEnd)) + const end = this.list.findIndex(e => e.id === Math.min(this.selectionBegin, this.selectionEnd)) + const selections = this.list.slice(start, end + 1) + this.$nextTick(() => { + selections.forEach(e => this.$refs.starTable.toggleRowSelection(e, true)) + }) + this.selectionBegin = this.selectionEnd = '' + return + } + if (selection.includes(row)) { + this.selectionBegin = row.id + } else { + this.selectionBegin = '' + } + }, + handleSelectionChange (rows) { + this.multipleSelection = rows + }, + removeSelectedItems () { + if (!this.multipleSelection.length) this.multipleSelection = this.history + this.multipleSelection.forEach(e => star.remove(e.id)) + this.getFavorites() + this.updateDatabase() + }, detailEvent (e) { this.detail = { show: true, @@ -429,11 +465,6 @@ export default { this.$message.error(err) }) }, - clearFavoritesEvent () { - star.clear().then(e => { - this.getFavorites() - }) - }, syncTableData () { if (this.$refs.starTable.tableData && this.$refs.starTable.tableData.length === this.list.length) { this.list = this.$refs.starTable.tableData @@ -474,6 +505,8 @@ export default { this.getFavorites() }, mounted () { + addEventListener('keydown', code => { if (code.keyCode === 16) this.shiftDown = true }) + addEventListener('keyup', code => { if (code.keyCode === 16) this.shiftDown = false }) window.addEventListener('resize', () => { setTimeout(() => { if (this.$refs.starWaterfall) this.$refs.starWaterfall.resize() }, 500) }, true)