m

src/views/myfile/MyFile.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="bigBox">
-            <div class="settingBox" style="height: calc(100% - 60px);">
+            <div class="settingBox" @click="mouseClick">
                 <!-- 设置盒子顶部搜索 -->
                 <div class="topSearch">
                     <div style="position: relative;">
@@ -52,7 +52,7 @@
                 </div>
             </div>
             <!-- 右侧大盒子 -->
-            <div class="mesBox" style="height: calc(100% - 60px);" v-if="editOnline">
+            <div class="mesBox" v-if="editOnline">
                 <!-- 功能盒子  -->
                 <div class="useBox">
                     <!-- table切换 -->
@@ -128,7 +128,7 @@
                 </div>
                 <!-- 展示文件盒子 -->
                 <!-- 文件夹 -->
-                <div class="detailBox">
+                <div class="detailBox" @click="mouseClick">
                     <el-collapse v-model="folder" accordion class="collapseSell">
                         <el-collapse-item title="文件夹" name="1" class="custom-collapse-item">
                             <el-table :data="folderList" style="width: 100%" @selection-change="handleSelectionChange1"
@@ -163,7 +163,7 @@
                 </div>
                 <!-- 文件 -->
                 <div class="fileTable">
-                    <el-collapse v-model="files" accordion class="collapse" style="height: 200px;">
+                    <el-collapse v-model="files" accordion class="collapse" height="500px">
                         <el-collapse-item title="文件" name="2" class="">
                             <el-table :data="fileList" style="width: 100%" @row-click="handleRowClick"
                                 @selection-change="handleSelectionChange">
@@ -171,10 +171,10 @@
                                 <el-table-column label="名称" width="200">
                                     <template #default="scope">
                                         <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
-                                            <el-icon v-if="collectImg">
+                                            <!-- <el-icon v-if="collectImg">
                                                 <Star />
                                             </el-icon>
-                                            <img v-else src="../../assets/images/yellowstar.png" alt="">
+                                            <img v-else src="../../assets/images/yellowstar.png" alt=""> -->
                                             <img :src="getImage(scope.row.fileType)" alt="">
                                             {{ scope.row.fileName }}
                                         </span>
@@ -189,7 +189,6 @@
                                         </span>
                                     </template>
                                 </el-table-column>
-
                             </el-table>
                             <div class="setCli" v-if="cliCC">
                                 <template v-for="(item, index) in mouseCli">
@@ -200,60 +199,21 @@
                                             style="color: #7084B4;float: right;position: relative;">></span>
                                     </p>
                                 </template>
-                                <div class="setCli1" v-if="anyP">
-                                    <p @click="chooseSet1()" class="chooseSet">
-                                        <img src="../../assets/images/user.png" alt="">
-                                        选择人员
-                                    </p>
-                                    <p class="chooseSet">
-                                        <img src="../../assets/images/archiveTray.png" alt="">
-                                        归档
-                                    </p>
-                                </div>
+                            </div>
+                            <div class="setCli1" v-if="anyP">
+                                <p @click="chooseSet1()" class="">
+                                    <img src="../../assets/images/user.png" alt="">
+                                    选择人员
+                                </p>
+                                <p class="chooseSet">
+                                    <img src="../../assets/images/archiveTray.png" alt="">
+                                    归档
+                                </p>
                             </div>
                         </el-collapse-item>
                     </el-collapse>
                 </div>
-                <!-- 穿梭框 -->
-                <div>
-                    <el-dialog v-model="transferModal" title="分享" width="40%">
-                        <!-- 穿梭大盒子 -->
-                        <div class="transBox">
-                            <!-- 总数据包 -->
-                            <div class="allBag">
-                                <el-input style="width: 220px;margin-left: 18px;margin-top:5px" v-model="allBag"
-                                    placeholder="搜索"></el-input>
-                                <div class="allLog">
-                                    <el-tree :data="allTreeData" :props="allTreeProps" show-checkbox node-key="id"
-                                        :default-expanded-keys="openTree" @check-change="allTreeChange" />
-                                </div>
-                            </div>
-                            <!-- 需要的数据包 -->
-                            <div class="needBag">
-                                <!-- <el-input style="width: 220px;margin-left: 18px;margin-top:5px" v-model="needBag"
-                                    placeholder="搜索"></el-input> -->
-                                <div style="border-bottom: 1px solid gray;">
-                                    <span>已选择{{ chooseTagData.length }}人</span>
-                                    <span style="color: red;font-size: 14px;float: right;">清空</span>
-                                </div>
-                                <div class="needLog">
-                                    <el-tag v-for="(item, index) in chooseTagData" :key="index" class="tagtag" closable
-                                        @close="handleClose(item)">
-                                        {{ item.userName }}
-                                    </el-tag>
-                                </div>
-                            </div>
-                        </div>
-                        <template #footer>
-                            <span class="dialog-footer">
-                                <el-button @click="transferModal = false">取消</el-button>
-                                <el-button type="primary" @click="sureShare">
-                                    确定
-                                </el-button>
-                            </span>
-                        </template>
-                    </el-dialog>
-                </div>
+
             </div>
             <div v-else>
                 <div>
@@ -417,18 +377,17 @@
                 <FileTree v-if="fileTrees" :fileTrees="fileTrees" :newSpaceId="newSpaceId" :fileId="clickRowId"
                     @getChildren="getChildren" :copyOrMove="copyOrMove"></FileTree>
             </div>
+            <!-- 穿梭框 -->
+            <div>
+                <TransferModal v-if="thanks" :thanks="thanks" :clickRowId="clickRowId" @getCback="getCback"></TransferModal>
+            </div>
         </div>
     </div>
     <!-- 图片预览 -->
     <!-- 历史版本 -->
-    <historyList
-    :openFile="openForwardFile"
-    :docId="clickRowId.toString()"
-    @close="openForwardFile = false"
-    :fileUserTreeData="fileUserTreeData.data"
-    @forwardChangeMsg="forwardChangeMsg"
-  ></historyList>
-  <!-- 历史版本 -->
+    <historyList :openFile="openForwardFile" :docId="clickRowId.toString()" @close="openForwardFile = false"
+        :fileUserTreeData="fileUserTreeData.data" @forwardChangeMsg="forwardChangeMsg"></historyList>
+    <!-- 历史版本 -->
     <FileTreeChoice :openFile="openForwardFile" :docId="clickRowId.toString()" @close="openForwardFile = false"
         :fileUserTreeData="fileUserTreeData.data" @forwardChangeMsg="forwardChangeMsg"></FileTreeChoice>
     <!-- 历史版本 -->
@@ -439,12 +398,12 @@ import { ref, toRaw, onMounted } from 'vue'
 import myfile from '../../api/myfile/myfile'
 import documents from '../../api/document/document'
 import fileSpace from '../../api/filespace/fileSpace'
-import userTree from '../../api/user/userTree'
 import fileShare from '../../api/fileShare/fileShare'
 import collect from '../../api/collect/collect'
 import FileTree from './components/FileTree.vue'
 import BreadMenu from './components/BreadMenu.vue'
-import FileEdit from './components/fileedit.vue'
+import FileEdit from './components/FileEdit.vue'
+import TransferModal from './modalComponebts/Transfer.vue'
 import ImgFile from "./jsComponents/ImgFile"
 import { Search } from '@element-plus/icons-vue'
 import blueLeft from '../../assets/images/blueLeft.png'
@@ -460,7 +419,8 @@ import useUserStore from "@/store/modules/user";
 import { useRouter, useRoute } from "vue-router";
 export default {
     setup() {
-        let fileTrees = ref(false)
+        let fileTrees = ref(false)//filetree父传子
+        let thanks = ref(false)//transfer父传子
         let editOnline = ref(true)
         let searchFire = ref('')
         let selectedIndex = ref(0)
@@ -473,7 +433,6 @@ export default {
         let askTalk = ref('')
         let newTag = ref('')
         let cliCC = ref(false)
-        let transferModal = ref(false)
         let addBoser = ref(false)
         let addFile = ref(false)
         let anyP = ref(false)
@@ -503,7 +462,6 @@ export default {
         let impDirId = ref("")
         let impNum = ref(0)
         let copyParentId = ref("")//文件夹
-        let allBag = ref("")//穿梭狂内搜索
         let needBag = ref("")
         let copyOrMove = ref(0)//0代表复制，1代表移动
         let sortNum = ref(0)
@@ -627,20 +585,10 @@ export default {
         let nameForm = ref({
             name: ""
         })
-        let allTreeProps = {
-            label: 'label',
-            children: 'children',
-            disabled: false,
-            id: "id"
-        }
         let collectForm = ref({
             name: "",
             folders: "",
         })
-        let allTreeData = ref([])
-        let needTagData = ref([])
-        let chooseTagData = ref([])
-        let openTree = ref([])
         let fileNameChange = ref(false)
         let fileMenu = ref([])
         let collectList = ref([])
@@ -668,26 +616,6 @@ export default {
         const showPreview = ref(false)//控制图片预览组件显示
         const previewData = ref()//需要预览的文件的数据
         const router = useRouter(); //注册路由
-        // 获取用户树
-        function getAllUser() {
-            userTree.getUserTree({}).then(res => {
-                allTreeData.value = [res]
-                userTree.getUserTree({}).then(res => {
-                    allTreeData.value = [res];
-                    // 递归函数来获取所有节点的 id
-                    function getAllNodeIds(nodes) {
-                        nodes.forEach(node => {
-                            openTree.value.push(node.id);
-                            if (node.children && node.children.length > 0) {
-                                getAllNodeIds(node.children);
-                            }
-                        });
-                    }
-                    // 调用递归函数获取所有节点的 id
-                    getAllNodeIds(allTreeData.value);
-                });
-            })
-        }
         function getAllCollect() {
             collect.getCollect({}).then(res => {
                 const maxAge = res.rows.reduce((max, obj) => (obj.orderNum > max ? obj.orderNum : max), res.rows[0].orderNum)
@@ -809,18 +737,16 @@ export default {
                 cliCC.value = false
             }
             if (row.name == '分享') {
-                transferModal.value = true
-                fileShare.getSharePeople(clickRowId.value).then(res => {
-                    // 去除数组内部的重复元素
-                    const uniqueRes = Array.from(new Set(res.map(item => item.userName))).map(id => res.find(item => item.userName === id));
-                    // 现在的 uniqueRes 数组不包含重复元素
-                    chooseTagData.value = uniqueRes;
-                })
+                thanks.value = true
             } else {
-                transferModal.value = false
+                thanks.value = false
             }
             if (row.name == '协作') {
-                anyP.value = true
+                if (anyP.value) {
+                    anyP.value = false
+                } else {
+                    anyP.value = true
+                }
             } else {
                 anyP.value = false
             }
@@ -877,7 +803,7 @@ export default {
             }
         }
         function chooseSet1() {
-            transferModal.value = true
+            thanks.value = true
             anyP.value = false
         }
         function createNewMenu(num) {
@@ -1113,38 +1039,6 @@ export default {
                 }
             })
         }
-        // 分享穿梭框
-        function allTreeChange(e) {
-            const id = e.id;
-            const label = e.label;
-            // 查找是否已经存在相同 userId 的数据的索引
-            const existingIndex = needTagData.value.findIndex(item => item.userId === id);
-            if (existingIndex !== -1) {
-                // 如果已存在，删除该项
-                needTagData.value.splice(existingIndex, 1);
-            } else {
-                // 选择操作，将数据添加到 needTagData 中
-                needTagData.value.push({ userId: id, userName: label });
-            }
-            chooseTagData.value = needTagData.value;
-        }
-        // 确认分享
-        function sureShare() {
-            fileShare.addSharePeople(clickRowId.value, chooseTagData.value).then(res => {
-                if (res.code === 200) {
-                    ElMessage({
-                        message: "分享成功",
-                        type: "success"
-                    })
-                    transferModal.value = false
-                }
-            })
-
-        }
-        function handleClose(tag) {
-            chooseTagData.value.splice(chooseTagData.value.indexOf(tag), 1)
-            console.log(chooseTagData.value, 'move');
-        }
         // 确认收藏
         function sureCollect() {
             collect.addCollect({
@@ -1216,7 +1110,9 @@ export default {
         }
         function getChildren(data) {
             fileTrees.value = data
-
+        }
+        function getCback(data) {
+            thanks.value = data
         }
         //历史版本
         // 点击转存
@@ -1224,13 +1120,16 @@ export default {
         function forwardChangeMsg(val) {
 
         }
+        function mouseClick() {
+            if (cliCC.value) {
+                cliCC.value = false
+            }
+        }
         onMounted(() => {
             getAllTop()
-            getAllUser()
             getAllCollect()
         })
         return {
-            allBag,
             folderList,//文件夹的数据
             fileList,//文件夹的数据
             searchFire,//搜索文件的model
@@ -1256,7 +1155,6 @@ export default {
             cliCC,
             mouseCli,//文件点击弹框
             chooseSet,
-            transferModal,
             trandata,
             tranvalue,
             anyP,
@@ -1304,14 +1202,6 @@ export default {
             sureChangeName,//文件重命名
             fileNameChange,//文件重命名模态框
             nameForm,
-            getAllUser,//获取所有用户
-            allTreeProps,//树形控件需要显示键名
-            allTreeData,//树形控件数据
-            allTreeChange,
-            sureShare,
-            openTree,
-            chooseTagData,
-            handleClose,
             collectImg,//收藏小星星
             fileCollect,
             collectForm,
@@ -1349,7 +1239,10 @@ export default {
             openForwardFile,//历史版本
             forwardTreeData,
             forwardChangeMsg,
-            fileUserTreeData
+            fileUserTreeData,
+            thanks,
+            getCback,
+            mouseClick,
         }
 
     },
@@ -1360,7 +1253,8 @@ export default {
         FileEdit,
         ImgPreview,
         FileTree,
-        historyList
+        historyList,
+        TransferModal,
     },
 }
 
@@ -1382,7 +1276,7 @@ p {
 
 .settingBox {
     width: 20vw;
-    /* height: 100%; */
+    height: 92vh;
     border: 1px solid black;
     border-radius: 4px;
     /* margin: 5px 5px; */
@@ -1435,8 +1329,8 @@ p {
 }
 
 .mesBox {
-    width: 72vw;
-    /* height: calc(100% - 200px); */
+    width: 75vw;
+    height: 92vh;
     border-radius: 4px;
     background-color: white;
 }
@@ -1518,7 +1412,7 @@ p {
 
 .fileTable {
     position: relative;
-    height: 300px;
+    height: 100%;
     /* overflow-y: auto; */
 }
 
@@ -1526,7 +1420,7 @@ p {
     width: 156px;
     height: 350px;
     position: absolute;
-    top: -70px;
+    top: 20px;
     left: 300px;
     background-color: white;
     border: 1px solid gray;
@@ -1537,10 +1431,10 @@ p {
 
 .setCli1 {
     width: 156px;
-    height: 350px;
+    height: auto;
     position: absolute;
     top: 185px;
-    left: 155px;
+    left: 455px;
     background-color: white;
     border: 1px solid gray;
     border-radius: 4px;
@@ -1580,54 +1474,6 @@ p {
     max-width: auto;
 }
 
-.transBox {
-    width: 550px;
-    height: 400px;
-    margin: 0 auto;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    /* border: 1px solid black; */
-}
-
-.allBag {
-    width: 255px;
-    height: 380px;
-    border: 1px solid green;
-}
-
-.needBag {
-    width: 255px;
-    height: 380px;
-    border: 1px solid green;
-}
-
-.allLog {
-    width: 245px;
-    height: 330px;
-    margin: 5px auto;
-    /* border: 1px solid red; */
-    overflow-y: auto;
-}
-
-.needLog {
-    width: 245px;
-    height: 330px;
-    margin: 5px auto;
-    /* border: 1px solid red; */
-    overflow-y: auto;
-    text-align: center;
-}
-
-.tagtag {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    text-align: start;
-    width: 230px;
-    margin: 0 auto;
-}
-
 :deep(.el-tag__content) {
     display: block;
 }
@@ -1635,4 +1481,9 @@ p {
 :deep(.el-icon el-tag__close) {
     display: block;
 }
+
+:deep(.el-collapse-item__content) {
+    height: 100%;
+    border-bottom: none;
+}
 </style>

src/views/myfile/components/FileTree.vue

@@ -55,11 +55,9 @@ export default {
         function getFileTree() {
             documents.fileTree(3).then(res => {
                 treeData.value = [res]
-                console.log(res, 'file');
             })
         }
         function modalOpen() {
-            console.log(changeMes,'mes');
             if (result) {
                 treeOpen.value = result
             }

src/views/myfile/modalComponebts/Transfer.vue

@@ -0,0 +1,229 @@
+<template>
+    <div>
+        <!-- 穿梭框 -->
+        <div>
+            <el-dialog v-model="transferModals" title="分享" width="40%" :close-on-click-modal="false">
+                <div class="transBox">
+                    <div class="allBag">
+                        <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="true" />
+                        </div>
+                    </div>
+                    <div class="needBag">
+                        <div style="border-bottom: 1px solid gray;">
+                            <span>已选择{{ chooseTagData.length }}人</span>
+                            <span style="color: red;font-size: 14px;float: right;">清空</span>
+                        </div>
+                        <div class="needLog">
+                            <el-tag v-for="(item, index) in chooseTagData" :key="index" class="tagtag" 
+                                @close="handleClose(item)">
+                                {{ item.userName }}
+                            </el-tag>
+                        </div>
+                    </div>
+                </div>
+                <template #footer>
+                    <span class="dialog-footer">
+                        <el-button @click="backToFather">取消</el-button>
+                        <el-button type="primary" @click="sureShare">
+                            确定
+                        </el-button>
+                    </span>
+                </template>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRef } from 'vue';
+import userTree from '../../../api/user/userTree';
+import fileShare from '../../../api/fileShare/fileShare';
+import { ElMessage } from 'element-plus'
+import { Loading } from '@element-plus/icons-vue';
+export default {
+    props: {
+        thanks: {
+            type: Boolean,
+            required: true
+        },
+        clickRowId: {
+            type: Number,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let { backToFather, sureBackFather } = toRefs(props)
+        let result = props.thanks
+        let dees = props.clickRowId
+        let transferModals = ref(false)
+        let allTreeData = ref([])
+        let allTreeProps = {
+            label: 'label',
+            children: 'children',
+            disabled: false,
+            id: "id"
+        }
+        let openTree = ref([])
+        let chooseTagData = ref([])
+        let allBag = ref('')
+        let needTagData = ref([])
+        let backScreen = ref([])
+        function allTeam() {
+            if (result) {
+                transferModals.value = result
+            }
+        }
+        // 分享穿梭框
+        function allTreeChange(e) {
+            const id = e.id;
+            const label = e.label;
+            // 查找是否已经存在相同 userId 的数据的索引
+            const existingIndex = chooseTagData.value.findIndex(item => item.userId === id);
+            if (existingIndex !== -1) {
+                // 如果已存在，删除该项
+                chooseTagData.value.splice(existingIndex, 1);
+            } else {
+                // 选择操作，将数据添加到 needTagData 中
+                chooseTagData.value.push({ userId: id, userName: label });
+            }
+        }
+        // 确认分享
+        function sureShare() {
+            // console.log(clickRowId);
+            if (chooseTagData.value.length === 0) {
+                ElMessage({
+                    type: "error",
+                    message: "你还未选择人员！"
+                })
+            } else {
+                fileShare.addSharePeople(dees, chooseTagData.value).then(res => {
+                    if (res.code === 200) {
+                        ElMessage({
+                            message: "分享成功",
+                            type: "success"
+                        })
+                        transferModals.value = false
+                        emit("getCback", transferModals.value)
+                    }
+                })
+            }
+        }
+        // 获取用户树
+        function getAllUser() {
+            userTree.getUserTree({}).then(res => {
+                allTreeData.value = [res]
+                userTree.getUserTree({}).then(res => {
+                    allTreeData.value = [res];
+                    // 递归函数来获取所有节点的 id
+                    function getAllNodeIds(nodes) {
+                        nodes.forEach(node => {
+                            openTree.value.push(node.id);
+                            if (node.children && node.children.length > 0) {
+                                getAllNodeIds(node.children);
+                            }
+                        });
+                    }
+                    // 调用递归函数获取所有节点的 id
+                    getAllNodeIds(allTreeData.value);
+                });
+            })
+            fileShare.getSharePeople(dees).then(res => {
+                // 去除数组内部的重复元素
+                const uniqueRes = Array.from(new Set(res.map(item => item.userName))).map(id => res.find(item => item.userName === id));
+                // 现在的 uniqueRes 数组不包含重复元素
+                chooseTagData.value = uniqueRes;
+                backScreen.value = chooseTagData.value.map(item => {
+                    return item.userId
+                })
+            })
+        }
+        function getBack() {
+            transferModals.value = false
+            emit("getCback", transferModals.value)
+        }
+        function handleClose(tag) {
+            chooseTagData.value.splice(chooseTagData.value.indexOf(tag), 1);
+            // 从标签中获取 userId
+            const userId = tag.userId;
+            // 从 chooseTagData 中筛选出不包含当前 userId 的标签
+            chooseTagData.value = chooseTagData.value.filter(item => item.userId !== userId)
+        }
+        onMounted(() => {
+            allTeam()
+            getAllUser()
+        })
+        return {
+            transferModals,
+            allTreeData,
+            allTreeProps,
+            openTree,
+            chooseTagData,
+            allTreeChange,
+            sureShare,
+            allBag,
+            getAllUser,
+            result,
+            allTeam,
+            dees,
+            needTagData,
+            handleClose,
+            backScreen,
+            backToFather: getBack,
+        }
+    }
+}
+</script>
+
+<style scoped>
+.transBox {
+    width: 550px;
+    height: 400px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    /* border: 1px solid black; */
+}
+
+.tagtag {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: start;
+    width: 230px;
+    margin: 0 auto;
+}
+
+.allBag {
+    width: 255px;
+    height: 380px;
+    border: 1px solid green;
+}
+
+.needBag {
+    width: 255px;
+    height: 380px;
+    border: 1px solid green;
+}
+
+.allLog {
+    width: 245px;
+    height: 330px;
+    margin: 5px auto;
+    /* border: 1px solid red; */
+    overflow-y: auto;
+}
+
+:deep(.el-tag__content) {
+    display: block;
+}
+
+:deep(.el-icon el-tag__close) {
+    display: block;
+}
+</style>