feat: 完成删除功能
This commit is contained in:
fanxb
parent
92cb24801b
commit
6a547ac856
1
bookMarkService/.gitignore
vendored
1
bookMarkService/.gitignore
vendored
@ -17,6 +17,7 @@ static
|
||||
*.iws
|
||||
*.iml
|
||||
*.ipr
|
||||
node_modules
|
||||
|
||||
### NetBeans ###
|
||||
/nbproject/private/
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import localforage from "localforage";
|
||||
import httpUtil from "../../util/HttpUtil";
|
||||
|
||||
const TOTAL_TREE_DATA = "totalTreeData";
|
||||
|
||||
/**
|
||||
* 书签树相关配置
|
||||
*/
|
||||
const state = {
|
||||
//全部书签数据
|
||||
totalTreeData: {},
|
||||
[TOTAL_TREE_DATA]: {},
|
||||
isInit: false
|
||||
};
|
||||
|
||||
@ -18,11 +20,11 @@ const actions = {
|
||||
if (context.state.isInit) {
|
||||
return;
|
||||
}
|
||||
let data = await localforage.getItem("totalTreeData");
|
||||
let data = await localforage.getItem(TOTAL_TREE_DATA);
|
||||
if (data == null) {
|
||||
await context.dispatch("refresh");
|
||||
} else {
|
||||
context.commit("totalTreeData", data);
|
||||
context.commit(TOTAL_TREE_DATA, data);
|
||||
}
|
||||
},
|
||||
//刷新缓存数据
|
||||
@ -32,27 +34,46 @@ const actions = {
|
||||
treeData[""] = [];
|
||||
}
|
||||
treeData[""].forEach(item => (item.isLeaf = item.type === 0));
|
||||
context.commit("totalTreeData", treeData);
|
||||
localforage.setItem("totalTreeData", treeData);
|
||||
context.commit(TOTAL_TREE_DATA, treeData);
|
||||
localforage.setItem(TOTAL_TREE_DATA, treeData);
|
||||
},
|
||||
//清除缓存数据
|
||||
async clear(context) {
|
||||
context.commit("totalTreeData", {});
|
||||
await localforage.removeItem("totalTreeData");
|
||||
context.commit(TOTAL_TREE_DATA, {});
|
||||
await localforage.removeItem(TOTAL_TREE_DATA);
|
||||
}
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
treeData(state, treeData) {
|
||||
localforage.setItem("treeData", treeData);
|
||||
state.treeData = treeData;
|
||||
},
|
||||
totalTreeData(state, totalTreeData) {
|
||||
localforage.setItem("totalTreeData", totalTreeData);
|
||||
localforage.setItem(TOTAL_TREE_DATA, totalTreeData);
|
||||
state.totalTreeData = totalTreeData;
|
||||
},
|
||||
isInit(state, isInit) {
|
||||
state.isInit = isInit;
|
||||
},
|
||||
deleteData(state, { pathList, bookmarkIdList }) {
|
||||
//待删除的书签
|
||||
let bookmarkIdSet = new Set();
|
||||
bookmarkIdList.forEach(item => bookmarkIdSet.add(item));
|
||||
//删除子节点
|
||||
pathList.forEach(item => {
|
||||
delete state[TOTAL_TREE_DATA][item];
|
||||
Object.keys(state[TOTAL_TREE_DATA])
|
||||
.filter(key => key.startsWith(item + "."))
|
||||
.forEach(key => delete state[TOTAL_TREE_DATA][key]);
|
||||
bookmarkIdSet.add(parseInt(item.split(".").reverse()));
|
||||
});
|
||||
//删除直接选中的节点
|
||||
Object.keys(state.totalTreeData).forEach(item => {
|
||||
let list = state.totalTreeData[item];
|
||||
for (let i = list.length - 1; i >= 0; i--) {
|
||||
if (bookmarkIdSet.has(list[i].bookmarkId)) {
|
||||
list.splice(i, 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
localforage.setItem(TOTAL_TREE_DATA, state[TOTAL_TREE_DATA]);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,33 +1,47 @@
|
||||
<template>
|
||||
<a-spin :spinning="loading" :delay='300'>
|
||||
<a-spin :spinning="loading" :delay="300">
|
||||
<div>
|
||||
<span class="myBookmark">我的书签</span>
|
||||
<a-tooltip title="刷新书签缓存">
|
||||
<a-button @click="refresh" type="primary" shape="circle" icon="sync" />
|
||||
<a-button @click="refresh(true)" type="primary" shape="circle" icon="sync" />
|
||||
</a-tooltip>
|
||||
<a-tooltip title="多选">
|
||||
<a-button type="primary" shape="circle" icon="check" @click="switchMul" />
|
||||
</a-tooltip>
|
||||
<a-tooltip v-if="checkedKeys.length===0 || checkedKeys.length===1 " title="添加书签">
|
||||
<a-tooltip v-if="checkedKeys.length === 0 || checkedKeys.length === 1" title="添加书签">
|
||||
<a-button type="primary" shape="circle" icon="plus" />
|
||||
</a-tooltip>
|
||||
<a-tooltip v-if="currentSelect || checkedKeys.length===1" title="编辑书签">
|
||||
<a-tooltip v-if="currentSelect || checkedKeys.length === 1" title="编辑书签">
|
||||
<a-button type="primary" shape="circle" icon="edit" />
|
||||
</a-tooltip>
|
||||
<a-tooltip v-if="moveShow" title="移动书签">
|
||||
<a-button type="primary" shape="circle" icon="scissor" />
|
||||
</a-tooltip>
|
||||
<a-tooltip v-if="checkedKeys.length>0 || currentSelect" title="删除书签" @click="deleteBookmarks">
|
||||
<a-tooltip v-if="checkedKeys.length > 0 || currentSelect" title="删除书签" @click="deleteBookmarks">
|
||||
<a-button type="danger" shape="circle" icon="delete" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-tree :tree-data="treeData" :selected-keys="currentSelect?[currentSelect.bookmarkId] : []" :load-data="loadData" :checked-keys="checkedKeys" @check="check" :replace-fields="replaceFields" :expandedKeys="expandedKeys" @select="select" @expand="expand" blockNode :checkable="mulSelect" checkStrictly />
|
||||
<a-tree
|
||||
:tree-data="treeData"
|
||||
:loaded-keys="loadedKeys"
|
||||
:selected-keys="currentSelect ? [currentSelect.bookmarkId] : []"
|
||||
:load-data="loadData"
|
||||
:checked-keys="checkedKeys"
|
||||
@check="check"
|
||||
:replace-fields="replaceFields"
|
||||
:expandedKeys="expandedKeys"
|
||||
@select="select"
|
||||
@expand="expand"
|
||||
blockNode
|
||||
:checkable="mulSelect"
|
||||
checkStrictly
|
||||
/>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddBookmark from '../../../../components/main/things/AddBookmark.vue';
|
||||
import HttpUtil from '@/util/HttpUtil.js';
|
||||
import AddBookmark from "../../../../components/main/things/AddBookmark.vue";
|
||||
import HttpUtil from "../../../../util/HttpUtil.js";
|
||||
import { mapState, mapActions } from "vuex";
|
||||
export default {
|
||||
name: "BookmarkManage",
|
||||
@ -35,17 +49,18 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [],
|
||||
expandedKeys: [],//已展开的keys
|
||||
checkedKeys: [],//已选择的keys，多选框优先级高于树节点选择
|
||||
checkedNodes: [],//选中的节点数据
|
||||
expandedKeys: [], //已展开的keys
|
||||
checkedKeys: [], //已选择的keys，多选框优先级高于树节点选择
|
||||
checkedNodes: [], //选中的节点数据
|
||||
loadedKeys: [], //已加载数据
|
||||
replaceFields: {
|
||||
title: "name",
|
||||
key: "bookmarkId"
|
||||
},
|
||||
mulSelect: false, //多选框是否显示
|
||||
currentSelect: null, //当前树的选择项
|
||||
loading: true,
|
||||
moveShow: false,
|
||||
loading: true, //是否显示loading
|
||||
moveShow: false //是否显示移动节点
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -67,16 +82,20 @@ export default {
|
||||
this.totalTreeData[newPath].forEach(item => (item.isLeaf = item.type === 0));
|
||||
data.children = this.totalTreeData[newPath];
|
||||
this.treeData = [...this.treeData];
|
||||
this.loadedKeys.push(data.bookmarkId);
|
||||
resolve();
|
||||
});
|
||||
},
|
||||
async refresh() {
|
||||
async refresh(deleteCache) {
|
||||
this.loading = true;
|
||||
await this.$store.dispatch("treeData/refresh");
|
||||
this.treeData = [...this.totalTreeData['']];
|
||||
if (deleteCache) {
|
||||
await this.$store.dispatch("treeData/refresh");
|
||||
}
|
||||
this.treeData = [...this.totalTreeData[""]];
|
||||
this.expandedKeys = [];
|
||||
this.checkedKeys = [];
|
||||
this.checkedNodes = [];
|
||||
this.loadedKeys = [];
|
||||
this.currentSelect = null;
|
||||
this.loading = false;
|
||||
},
|
||||
@ -101,7 +120,10 @@ export default {
|
||||
this.checkedNodes.push(item);
|
||||
} else {
|
||||
this.checkedKeys.splice(this.checkedKeys.indexOf(item.bookmarkId), 1);
|
||||
this.checkedNodes.splice(this.checkedNodes.findIndex(item1 => item1.bookmarkId === item.bookmarkId), 1);
|
||||
this.checkedNodes.splice(
|
||||
this.checkedNodes.findIndex(item1 => item1.bookmarkId === item.bookmarkId),
|
||||
1
|
||||
);
|
||||
}
|
||||
},
|
||||
select(key, { selected, node }) {
|
||||
@ -125,6 +147,7 @@ export default {
|
||||
];
|
||||
}
|
||||
} else {
|
||||
HttpUtil.post("/bookmark/visitNum", { id: item.bookmarkId }, null);
|
||||
window.open(item.url);
|
||||
}
|
||||
},
|
||||
@ -137,20 +160,40 @@ export default {
|
||||
this.currentSelect = null;
|
||||
}
|
||||
},
|
||||
deleteBookmarks() {
|
||||
async deleteBookmarks() {
|
||||
//删除，如果有多选，删除多选，否则删除树节点选中项
|
||||
const folderList = [], bookmarkIdList = [];
|
||||
const bookmarkIdList = [],
|
||||
pathList = [];
|
||||
if (this.checkedNodes) {
|
||||
this.checkedKeys.forEach(item => item.type === 0 ? bookmarkIdList.push(item.getBookmarkId) : bookmarkIdList.push(item.getBookmarkId));
|
||||
this.checkedNodes.forEach(item => (item.type === 1 ? pathList.push(item.path + "." + item.bookmarkId) : bookmarkIdList.push(item.bookmarkId)));
|
||||
}
|
||||
if (this.currentSelect) {
|
||||
this.currentSelect.type === 0 ? folderList.push(this.currentSelect.bookmarkId) : bookmarkIdList.push(this.currentSelect.bookmarkId);
|
||||
this.currentSelect.type === 1 ? pathList.push(this.currentSelect.path + "." + this.currentSelect.bookmarkId) : bookmarkIdList.push(this.currentSelect.bookmarkId);
|
||||
}
|
||||
if (folderList.length === 0 && bookmarkIdList.length === 0) {
|
||||
if (pathList.length === 0 && bookmarkIdList.length === 0) {
|
||||
this.$message.warn("请选择后再进行操作");
|
||||
return;
|
||||
}
|
||||
HttpUtil.
|
||||
this.loading = true;
|
||||
await HttpUtil.post("/bookmark/batchDelete", null, { pathList, bookmarkIdList });
|
||||
this.$store.commit("treeData/deleteData", { pathList, bookmarkIdList });
|
||||
//删除已经被删除的数据
|
||||
pathList.forEach(item => {
|
||||
let id = parseInt(item.split(".").reverse()[0]);
|
||||
let index = this.loadedKeys.indexOf(id);
|
||||
if (index > -1) {
|
||||
this.loadedKeys.splice(index, 1);
|
||||
}
|
||||
index = this.expandedKeys.indexOf(id);
|
||||
if (index > -1) {
|
||||
this.expandedKeys.splice(index, 1);
|
||||
}
|
||||
});
|
||||
this.checkedNodes = [];
|
||||
this.checkedKeys = [];
|
||||
this.currentSelect = null;
|
||||
this.loading = false;
|
||||
this.mulSelect = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user