|
|
@@ -5,12 +5,18 @@
|
|
|
:data="treeData"
|
|
|
:props="defaultProps"
|
|
|
:accordion="false"
|
|
|
+ ref="folderTreeRef"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
node-key="id"
|
|
|
:default-expand-all="false"
|
|
|
:default-expanded-keys="curArr"
|
|
|
>
|
|
|
<template #default="{ node, data }">
|
|
|
- <span class="custom-tree-node" @click="checkoutNode(node, data)" @click.right="rightFn(node, data,$event)">
|
|
|
+ <span
|
|
|
+ class="custom-tree-node"
|
|
|
+ @click="checkoutNode(node, data)"
|
|
|
+ @click.right="rightFn(node, data, $event)"
|
|
|
+ >
|
|
|
<img :src="setImg(data.remark)" alt="" />
|
|
|
<span class="node_title">{{ node.label }}</span>
|
|
|
<span class="fileNum">{{
|
|
|
@@ -38,6 +44,7 @@ import { ElMessage } from "element-plus";
|
|
|
import documents from "@/api/document/document";
|
|
|
import { getDir } from "@/api/biz/dir.js";
|
|
|
import { setListImg } from "@/utils/index.js";
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
const props = defineProps({
|
|
|
spaceType: {
|
|
|
type: Number,
|
|
|
@@ -47,11 +54,16 @@ const props = defineProps({
|
|
|
type: Array,
|
|
|
default: () => [],
|
|
|
},
|
|
|
+ searchFolderTree: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
});
|
|
|
const emit = defineEmits(["listfolderClick"]);
|
|
|
const treeData = ref();
|
|
|
console.log("treeData", treeData.value);
|
|
|
const curArr = ref([]); //默认展开一级目录
|
|
|
+const folderTreeRef = ref();
|
|
|
const defaultProps = ref({
|
|
|
label: "label",
|
|
|
value: "id",
|
|
|
@@ -118,43 +130,54 @@ const getTopDir = async () => {
|
|
|
console.log("topres", res);
|
|
|
curArr.value.push(res.dirId);
|
|
|
return;
|
|
|
- // let userMe;
|
|
|
- // userMe = [res];
|
|
|
- // documents
|
|
|
- // .getALLdocumentByType(
|
|
|
- // {
|
|
|
- // parentId: userMe[0].dirId - 0,
|
|
|
- // spaceId: userMe[0].spaceId,
|
|
|
- // isAsc: "asc",
|
|
|
- // orderByColumn: "createTime",
|
|
|
- // pageNum: 1,
|
|
|
- // pageSize: 999,
|
|
|
- // },
|
|
|
- // 3
|
|
|
- // )
|
|
|
- // .then((res) => {
|
|
|
- // const folderArr = res.rows;
|
|
|
- // curArr.value = folderArr.map((item) => {
|
|
|
- // const obj = {
|
|
|
- // label: item.dirName,
|
|
|
- // value: item.dirId,
|
|
|
- // remark: "",
|
|
|
- // disable: false,
|
|
|
- // };
|
|
|
- // return obj
|
|
|
- // });
|
|
|
- // console.log("curArr.value", curArr.value);
|
|
|
- // });
|
|
|
};
|
|
|
-const rightFn = (node, data,e)=>{
|
|
|
+const rightFn = (node, data, e) => {
|
|
|
console.log("node", node);
|
|
|
console.log("data", data);
|
|
|
console.log("e", e);
|
|
|
-}
|
|
|
+};
|
|
|
+/** 通过条件过滤节点 */
|
|
|
+const filterNode = (value, data) => {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+};
|
|
|
watch(
|
|
|
() => props.ListtreeData,
|
|
|
(newValue, oldValue) => {
|
|
|
treeData.value = newValue;
|
|
|
+ // 记录当前展开的节点
|
|
|
+ let nodesMap = folderTreeRef.value?.store.nodesMap;
|
|
|
+ // console.log("nodesMap", nodesMap);
|
|
|
+ let expandedNodes;
|
|
|
+ if (nodesMap) {
|
|
|
+ expandedNodes = Object.keys(nodesMap).filter(
|
|
|
+ (key) => nodesMap[key].expanded
|
|
|
+ );
|
|
|
+ }
|
|
|
+ // console.log("expandedNodes", expandedNodes);
|
|
|
+ // 把这当从服务器拉取数据
|
|
|
+ treeData.value = JSON.parse(JSON.stringify(newValue));
|
|
|
+ // 更新数据后, 有过滤条件的执行过滤, 没有的还原之前的展开状态
|
|
|
+ setTimeout(() => {
|
|
|
+ if (props.searchFolderTree!== "") {
|
|
|
+ folderTreeRef.value?.filter(props.searchFolderTree);
|
|
|
+ } else {
|
|
|
+ expandedNodes.forEach((key) => (nodesMap[key].expanded = true));
|
|
|
+ }
|
|
|
+ }, 0);
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ }
|
|
|
+);
|
|
|
+/** 根据名称筛选部门树 */
|
|
|
+watch(
|
|
|
+ () => props.searchFolderTree,
|
|
|
+ (newValue, oldValue) => {
|
|
|
+ // console.log("watch", newValue);
|
|
|
+ folderTreeRef.value?.filter(newValue);
|
|
|
+ // proxy.$refs["folderTreeRef"].filter(newValue);
|
|
|
},
|
|
|
{
|
|
|
immediate: true,
|
liuQiang