解决冲突

src/layout/indexCommon.vue

@@ -7,10 +7,10 @@
             <img class="logoImg" src="@/assets/images/logos.png" /><span>聚合智慧文档管理系统</span>
           </div>
           <div class="search">
-            <el-input style="position: relative;" v-model="searchText" maxlength="32" class="w-50 m-2" size="small"
+            <el-input v-model="searchText" maxlength="32" class="w-50 m-2" size="small"
               placeholder="搜索文件" clearable @keyup.enter="toSearch">
             </el-input>
-            <el-icon style="position: absolute;top: 15px;left: 0px;z-index: 1;" @click="toSearch">
+            <el-icon style="position: absolute;top: 15px;left: 1200px;z-index: 1;color: white;" @click="toSearch">
               <Search />
             </el-icon>
           </div>

src/views/department/components/createTasnsfer.vue

@@ -1,39 +1,22 @@
 <template>
   <div class="transBox" v-if="open">
     <div class="allBag">
-      <el-input
-        style="width: 220px; margin-left: 18px; margin-top: 5px"
-        v-model="allBag"
-        placeholder="搜索"
-      ></el-input>
+      <el-input style="width: 220px; margin-left: 18px; margin-top: 5px" v-model="allBag" placeholder="搜索"></el-input>
       <div class="allLog">
-        <el-tree
-          ref="treeRef"
-          :data="allTreeData"
-          :props="allTreeProps"
-          show-checkbox
-          node-key="id"
-          :default-expanded-keys="openTree"
-          @check-change="allTreeChange"
-          :default-checked-keys="backScreen"
-          :check-strictly="false"
-        />
+        <el-tree ref="treeRef" :filter-node-method="filterNode" :data="allTreeData" :props="allTreeProps" show-checkbox
+          node-key="id" :default-expanded-keys="openTree" @check-change="allTreeChange" :default-checked-keys="backScreen"
+          :check-strictly="false" />
       </div>
     </div>
     <div class="needBag">
       <div style="border-bottom: 1px solid gray" class="needBag_top">
         <span>已选择{{ chooseTagData.length }}人</span>
-        <span style="color: red; font-size: 14px; float: right">清空</span>
+        <span style="color: red; font-size: 14px; float: right" @click="cleanPeople">清空</span>
       </div>
       <div class="needLog">
         <el-scrollbar>
-          <el-tag
-            v-for="(item) in chooseTagData"
-            :key="item.userId"
-            class="tagtag"
-            :closable="lastPeople"
-            @close="handleClose(item)"
-          >
+          <el-tag v-for="(item) in chooseTagData" :key="item.userId" class="tagtag" :closable="true"
+            @close="handleClose(item)">
             {{ item.userName ? item.userName : item.name }}
           </el-tag>
         </el-scrollbar>
@@ -43,7 +26,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, toRef, watch,defineEmits,toRaw } from "vue";
+import { ref, onMounted, toRef, watch, defineEmits, toRaw } from "vue";
 import userTree from "../../../api/user/userTree";
 import fileShare from "../../../api/fileShare/fileShare";
 import fileCount from "../../../api/fileCount/fileCount";
@@ -54,15 +37,15 @@ const chooseTagData = ref([]);
 const lastPeople = ref(false);
 const openTree = ref([]);
 const backScreen = ref(props.checkUser);
-// console.log('backScreen',backScreen.value);
 const allTreeProps = {
   label: "label",
   children: "children",
   disabled: false,
   id: "id",
 };
+let treeRef = ref(null)
 const emit = defineEmits(["setUsers"]);
-
+let allBag = ref('')
 const props = defineProps({
   openTrans: {
     type: Boolean,
@@ -71,8 +54,8 @@ const props = defineProps({
   checkUser: {
     type: Array,
     required: true,
-    default: ()=>[],
-},
+    default: () => [],
+  },
 });
 watch(
   () => props.openTrans,
@@ -81,6 +64,41 @@ watch(
     open.value = newValue;
   }
 );
+watch(() => allBag.value, (val) => {
+  treeRef.value?.filter(val)
+})
+function filterNode(value, data) {
+  if (!value) return true
+  return data.label.includes(value)
+}
+function cleanPeople() {
+  treeRef.value.setCheckedKeys([]);
+  chooseTagData.value = [];
+  setTimeout(() => {
+    antherClean()
+  })
+}
+function antherClean() {
+  treeRef.value.setCheckedKeys([]);
+  chooseTagData.value = [];
+}
+function handleClose(tag) {
+  chooseTagData.value.splice(chooseTagData.value.indexOf(tag), 1);
+  let result = chooseTagData.value.map((item) => {
+    return item.userId
+  })
+  treeRef.value.setCheckedKeys(result);
+  setTimeout(() => {
+    antherClose(tag)
+  }, 10)
+}
+function antherClose(tag) {
+  chooseTagData.value.splice(chooseTagData.value.indexOf(tag), 1);
+  let result = chooseTagData.value.map((item) => {
+    return item.userId
+  })
+  treeRef.value.setCheckedKeys(result);
+}
 function allTreeChange(e) {
   const id = e.id;
   const label = e.label;
@@ -106,7 +124,7 @@ function allTreeChange(e) {
     lastPeople.value = false;
   }
   chooseTagData.value = chooseTagData.value.filter((item) => !item.disabled);
-   emit("setUsers",toRaw(chooseTagData.value));
+  emit("setUsers", toRaw(chooseTagData.value));
   console.log("chooseTagData", chooseTagData.value);
 }
 // 获取用户树
@@ -114,7 +132,7 @@ function getAllUser() {
   userTree.getMentUserTree({}).then((res) => {
     console.log("userTree", res);
     allTreeData.value = [res];
-    console.log('open',open.value);
+    console.log('open', open.value);
     userTree.getMentUserTree({}).then((res) => {
       allTreeData.value = [res];
       // 递归函数来获取所有节点的 id
@@ -131,25 +149,25 @@ function getAllUser() {
     });
   });
 }
-onMounted(async() => {
+onMounted(async () => {
   getAllUser();
   const checkUser = toRaw(props.checkUser)
   // console.log('checkUser',checkUser);
   // console.log('allTreeData.value',allTreeData.value);
   //设置勾选项
-  const arr = checkUser.map(item=>{
+  const arr = checkUser.map(item => {
     return item.userId
   })
-    backScreen.value = arr
-    // 设置右侧列表数据
- chooseTagData.value =  checkUser.map(item=>{
+  backScreen.value = arr
+  // 设置右侧列表数据
+  chooseTagData.value = checkUser.map(item => {
     return {
-      userId:item.userId,
-      userName:item.userName,
-      disabled:false
+      userId: item.userId,
+      userName: item.userName,
+      disabled: false
     }
   })
-    // console.log('arr',arr);
+  // console.log('arr',arr);
 });
 </script>
 
@@ -174,15 +192,16 @@ onMounted(async() => {
 }
 
 .allBag {
-  width: 60%;
+  width: 50%;
   height: 380px;
   border: 1px solid green;
 }
 
 .needBag {
-  width: 40%;
+  width: 50%;
   height: 380px;
   border: 1px solid green;
+  overflow-y: auto;
 }
 
 .allLog {
@@ -192,6 +211,7 @@ onMounted(async() => {
   /* border: 1px solid red; */
   overflow-y: auto;
 }
+
 .needBag_top {
   padding: 0 10px;
   height: 30px;
@@ -199,6 +219,7 @@ onMounted(async() => {
   align-items: center;
   justify-content: space-between;
 }
+
 .needLog {
   height: 100%;
 }

src/views/publicment/components/createTasnsfer.vue

@@ -1,39 +1,22 @@
 <template>
   <div class="transBox" v-if="open">
     <div class="allBag">
-      <el-input
-        style="width: 220px; margin-left: 18px; margin-top: 5px"
-        v-model="allBag"
-        placeholder="搜索"
-      ></el-input>
+      <el-input style="width: 220px; margin-left: 18px; margin-top: 5px" v-model="allBag" placeholder="搜索"></el-input>
       <div class="allLog">
-        <el-tree
-          ref="treeRef"
-          :data="allTreeData"
-          :props="allTreeProps"
-          show-checkbox
-          node-key="id"
-          :default-expanded-keys="openTree"
-          @check-change="allTreeChange"
-          :default-checked-keys="backScreen"
-          :check-strictly="false"
-        />
+        <el-tree ref="treeRef" :filter-node-method="filterNode" :data="allTreeData" :props="allTreeProps" show-checkbox
+          node-key="id" :default-expanded-keys="openTree" @check-change="allTreeChange" :default-checked-keys="backScreen"
+          :check-strictly="false" />
       </div>
     </div>
     <div class="needBag">
       <div style="border-bottom: 1px solid gray" class="needBag_top">
         <span>已选择{{ chooseTagData.length }}人</span>
-        <span style="color: red; font-size: 14px; float: right">清空</span>
+        <span style="color: red; font-size: 14px; float: right" @click="cleanPeople">清空</span>
       </div>
       <div class="needLog">
         <el-scrollbar>
-          <el-tag
-            v-for="(item) in chooseTagData"
-            :key="item.userId"
-            class="tagtag"
-            :closable="lastPeople"
-            @close="handleClose(item)"
-          >
+          <el-tag v-for="(item) in chooseTagData" :key="item.userId" class="tagtag" :closable="true"
+            @close="handleClose(item)">
             {{ item.userName ? item.userName : item.name }}
           </el-tag>
         </el-scrollbar>
@@ -43,7 +26,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, toRef, watch,defineEmits,toRaw } from "vue";
+import { ref, onMounted, toRef, watch, defineEmits, toRaw } from "vue";
 import userTree from "../../../api/user/userTree";
 import fileShare from "../../../api/fileShare/fileShare";
 import fileCount from "../../../api/fileCount/fileCount";
@@ -60,18 +43,19 @@ const allTreeProps = {
   disabled: false,
   id: "id",
 };
+let treeRef = ref(null)
 const emit = defineEmits(["setUsers"]);
-
+let allBag = ref('')
 const props = defineProps({
   openTrans: {
     type: Boolean,
     default: true,
   },
-    checkUser: {
+  checkUser: {
     type: Array,
     required: true,
-    default: ()=>[],
-},
+    default: () => [],
+  },
 });
 watch(
   () => props.openTrans,
@@ -80,6 +64,41 @@ watch(
     open.value = newValue;
   }
 );
+watch(() => allBag.value, (val) => {
+  treeRef.value?.filter(val)
+})
+function filterNode(value, data) {
+  if (!value) return true
+  return data.label.includes(value)
+}
+function cleanPeople() {
+  treeRef.value.setCheckedKeys([]);
+  chooseTagData.value = [];
+  setTimeout(() => {
+    antherClean()
+  })
+}
+function antherClean() {
+  treeRef.value.setCheckedKeys([]);
+  chooseTagData.value = [];
+}
+function handleClose(tag) {
+  chooseTagData.value.splice(chooseTagData.value.indexOf(tag), 1);
+  let result = chooseTagData.value.map((item) => {
+    return item.userId
+  })
+  treeRef.value.setCheckedKeys(result);
+  setTimeout(() => {
+    antherClose(tag)
+  }, 10)
+}
+function antherClose(tag) {
+  chooseTagData.value.splice(chooseTagData.value.indexOf(tag), 1);
+  let result = chooseTagData.value.map((item) => {
+    return item.userId
+  })
+  treeRef.value.setCheckedKeys(result);
+}
 function allTreeChange(e) {
   const id = e.id;
   const label = e.label;
@@ -105,7 +124,7 @@ function allTreeChange(e) {
     lastPeople.value = false;
   }
   chooseTagData.value = chooseTagData.value.filter((item) => !item.disabled);
-   emit("setUsers",toRaw(chooseTagData.value));
+  emit("setUsers", toRaw(chooseTagData.value));
   console.log("chooseTagData", chooseTagData.value);
 }
 // 获取用户树
@@ -113,7 +132,7 @@ function getAllUser() {
   userTree.getMentUserTree({}).then((res) => {
     console.log("userTree", res);
     allTreeData.value = [res];
-    console.log('open',open.value);
+    console.log('open', open.value);
     userTree.getMentUserTree({}).then((res) => {
       allTreeData.value = [res];
       // 递归函数来获取所有节点的 id
@@ -130,25 +149,25 @@ function getAllUser() {
     });
   });
 }
-onMounted(async() => {
+onMounted(async () => {
   getAllUser();
   const checkUser = toRaw(props.checkUser)
   // console.log('checkUser',checkUser);
   // console.log('allTreeData.value',allTreeData.value);
   //设置勾选项
-  const arr = checkUser.map(item=>{
+  const arr = checkUser.map(item => {
     return item.userId
   })
-    backScreen.value = arr
-    // 设置右侧列表数据
- chooseTagData.value =  checkUser.map(item=>{
+  backScreen.value = arr
+  // 设置右侧列表数据
+  chooseTagData.value = checkUser.map(item => {
     return {
-      userId:item.userId,
-      userName:item.userName,
-      disabled:false
+      userId: item.userId,
+      userName: item.userName,
+      disabled: false
     }
   })
-    // console.log('arr',arr);
+  // console.log('arr',arr);
 });
 </script>
 
@@ -173,15 +192,16 @@ onMounted(async() => {
 }
 
 .allBag {
-  width: 60%;
+  width: 50%;
   height: 380px;
   border: 1px solid green;
 }
 
 .needBag {
-  width: 40%;
+  width: 50%;
   height: 380px;
   border: 1px solid green;
+  overflow-y: auto;
 }
 
 .allLog {
@@ -191,6 +211,7 @@ onMounted(async() => {
   /* border: 1px solid red; */
   overflow-y: auto;
 }
+
 .needBag_top {
   padding: 0 10px;
   height: 30px;
@@ -198,6 +219,7 @@ onMounted(async() => {
   align-items: center;
   justify-content: space-between;
 }
+
 .needLog {
   height: 100%;
 }