HTML
<el-tree
:data="rootNodeData"
class="catalogTree"
ref="catalogTree"
highlight-current
node-key="id"
lazy
:load="treeLoadNode"
:expand-on-click-node="false"
@node-click="catalogTreeNodeClickEvent"
:props="{isLeaf : 'isLeaf'}">
<span class="customTreeNode" slot-scope="{ node, data }">
<!-- 节点图标 文件夹图标：data.type == '1' 文件图标：data.type == '2' -->
<span class="nodeIcon iconFolder" v-if="data.type == '1'"></span>
<span class="nodeIcon iconFile" v-if="data.type == '2'"></span>
<!-- 节点操作 -->
<div @click.stop>
<el-dropdown class="catalogOperationDropdown fr" placement="bottom-end" trigger="click" v-if="data.permissionType=='2'">
<span class="el-dropdown-link">
<i class="more el-icon-more"></i>
</span>
<el-dropdown-menu slot="dropdown" class="catalogOperationPopper">
<el-dropdown-item @click.native="new(data)">
<i class="my-icon icon-folder"></i><span>新建</span>
</el-dropdown-item>
<el-dropdown-item @click.native="edit(data)">
<i class="my-icon icon-edit"></i><span>编辑</span>
</el-dropdown-item>
<el-dropdown-item @click.native="delete(data)">
<i class="my-icon icon-delete"></i><span>删除</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<!-- 节点文字 -->
<span class="nodeText">{{ data.name }}</span>
</span>
</el-tree>
JS
/**
* 删除
* @param {Object} data 节点对象
*/
delete(data){
this.$msgbox({
title: '提示', // 标题
message: data.type == 1 ? `此操作将永久删除此问题集，是否继续？` : `此操作将永久删除此问题，是否继续？`, // MessageBox 消息正文内容
customClass: 'deleteAppMsgbox', // 自定义类名
showConfirmButton: true, // 是否显示确定按钮
showCancelButton: true, // 是否显示取消按钮
confirmButtonText: '确定', // 确定按钮的文本内容
cancelButtonText: '取消', // 取消按钮的文本内容
confirmButtonClass: 'sureBtn', // 确定按钮的自定义类名
cancelButtonClass: 'cancelBtn', // 取消按钮的自定义类名
closeOnClickModal: false, // 是否可通过点击遮罩关闭 MessageBox
closeOnPressEscape: false, // 是否可通过按下 ESC 键关闭 MessageBox
type: 'warning',
}).then(() => {
this.$axios.questionBank.delete({
id: data.id
}).then(res => {
if(res.data.data == '200'){
this.$message.success('删除成功');
// 获取 删除的节点
let currentNode = this.$refs.catalogTree.getNode(data.id);
// 获取 删除的节点 的 父级节点
let parentNode = currentNode.parent;
// 定义变量：删除的节点 的所有同级节点
let sameLevelNode = [];
// 定义变量：同级节点 的 长度
let childNodesLength = 0;
// 当获取的父级节点不为 null 时（有父级节点）
if(parentNode != null){
// 同级节点赋值
sameLevelNode = parentNode.childNodes;
// 同级节点的长度赋值
childNodesLength = sameLevelNode.length;
}else{ // 当获取的父级节点为 null 时（没有父级节点）
// 获取全部节点
let allNodes = this.$refs.catalogTree.store._getAllNodes();
// 定义变量：所有 level 等于 1 的所有节点
let allFirstLevelNodes = [];
// 遍历节点
for(let i = 0; i < allNodes.length; i++){
if(allNodes[i].level == 1){
allFirstLevelNodes.push(allNodes[i]);
}
}// 如果只有一个子节点
if(i == 0 && childNodesLength == 1){ // 如果只有一个子节点
// 删除后设置父级节点选中
// 将 level 等于 1 的所有节点赋值给同级节点
sameLevelNode = allFirstLevelNodes;
// 同级节点的长度赋值
childNodesLength = allFirstLevelNodes.length;
}
for(let i = 0; i < childNodesLength; i++){
if(sameLevelNode[i].data.id == data.id){ // 在所有同级节点中 查找 与删除的节点id相同的节点
if((sameLevelNode[i].previousSibling === null || sameLevelNode[i].previousSibling === undefined) && (sameLevelNode[i].nextSibling === null || sameLevelNode[i].nextSibling === undefined)){ // 如果只有一个子节点
// 删除后设置父级节点选中
this.$refs.catalogTree.setCurrentKey(parentNode.data.id);
// 重置缓存
this.storage.treeNodeObj = parentNode.data;
// 设置面包屑二级
this.breadCrumbData.levelTwo = parentNode.data.name;
// 跳转对应详情页，由于父级节点一定是问题集（文件夹），所以不用加判断
this.$router.push({ name: 'questionSetsView', query: { id: parentNode.data.id }});
// }else if(sameLevelNode[i].nextSibling !== null || sameLevelNode[i].nextSibling !== undefined){
}else if(sameLevelNode[i].nextSibling !== null && sameLevelNode[i].nextSibling !== undefined){ // 当前子节点后面（同级）还有节点
// 删除后设置当前节点的后面的一个节点选中
this.$refs.catalogTree.setCurrentKey(sameLevelNode[i + 1].data.id);
// 重置缓存
this.storage.treeNodeObj = sameLevelNode[i + 1].data;
// 设置面包屑二级
this.breadCrumbData.levelTwo = sameLevelNode[i + 1].data.name;
// 跳转对应详情页，由于相邻节点不一定是问题集或者不一定是问题，所以加判断：1问题集（文件夹），2问题（文件）
if(sameLevelNode[i + 1].data.type == '1'){
this.$router.push({ name: 'questionSetsView', query: { id: sameLevelNode[i + 1].data.id }});
}else{
this.$router.push({ name: 'questionView', query: { id: sameLevelNode[i + 1].data.id }});
}
}else if((sameLevelNode[i].previousSibling !== null && sameLevelNode[i].previousSibling !== undefined) && (sameLevelNode[i].nextSibling === null || sameLevelNode[i].nextSibling === undefined)){ // 当前子节点后面（同级）没有节点
// 删除后设置当前节点的前面的一个节点选中
this.$refs.catalogTree.setCurrentKey(sameLevelNode[i - 1].data.id);
// 重置缓存
this.storage.treeNodeObj = sameLevelNode[i - 1].data;
// 设置面包屑二级
this.breadCrumbData.levelTwo = sameLevelNode[i - 1].data.name;
// 跳转对应详情页，由于相邻节点不一定是问题集或者不一定是问题，所以加判断：1问题集（文件夹），2问题（文件）
if(sameLevelNode[i - 1].data.type == '1'){
this.$router.push({ name: 'questionSetsView', query: { id: sameLevelNode[i - 1].data.id }});
}else{
this.$router.push({ name: 'questionView', query: { id: sameLevelNode[i - 1].data.id }});
}
}
break;
}
}
// 删除节点
this.$refs.catalogTree.remove(data);
// 重置缓存
window.localStorage.zsyftxglptMh = JSON.stringify(this.storage);
}else{
this.$message.error('当前问题集存在内容，请先清空内容后，再删除当前问题集');
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
style
::v-deep.catalogTreeBox{
height: calc(100% - 40px);
.catalogTree{
.el-tree-node{
.el-tree-node__content{
height: 40px;
.customTreeNode{
display: block;
flex:1;
height: 24px;
line-height: 24px;
overflow: hidden;
.nodeIcon{
float: left;
width:20px;
height:24px;
margin-right: 6px;
&.iconFolder{
background: url(../../../assets/images/mainCatalog/icon-mainCatalog-folder.png) no-repeat center center;
}
&.iconFile{
background: url(../../../assets/images/mainCatalog/icon-mainCatalog-file.png) no-repeat center center;
}
}
.more{
display: none;
padding:0;
color: #9CA6BC;
width:24px;
height: 24px;
margin: 0 8px;
line-height: 24px;
text-align: center;
}
.nodeText{
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 10px;
}
}
&:hover{
background: #ecf5ff;
}
}
}
.el-tree-node.is-current{
& > .el-tree-node__content{
background: #f1f1f2;
.more{
display: block;
}
}
}
}
}
网友评论