cloudfile-ui/src/views/myfile/modalComponebts/Transfer.vue

<template>
    <div>
        <!-- 穿梭框 -->
        <div>
            <el-dialog v-model="transferModals" title="分享" width="40%" @close="backToFather" :close-on-click-modal="false">
                <div class="transBox">
                    <div class="allBag">
                        <div style="position: relative;">
                            <el-input style="width: 220px;margin-left: 18px;margin-top:5px" v-model="allBag"
                                 placeholder="搜索"></el-input>
                        </div>
                        <div class="allLog">
                            <el-tree :filter-node-method="filterNode" v-if="have" 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">
                                <template #default="{ node, data }">
                                    <span class="custom-tree-node">
                                        <img v-if="data.disabled" src="@/assets/images/yellowUsers.png" alt="" />
                                        <img v-else src="@/assets/images/oneUser.png" alt="" />
                                        <span>{{ node.label }}</span>
                                    </span>
                                </template>
                                </el-tree>
                            <span v-else>暂无数据</span>
                        </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;cursor: pointer;"
                                @click="cleanPeople">清空</span>
                        </div>
                        <div class="needLog">
                            <el-scrollbar height="349px">
                                <el-tag v-for="(item, index) in chooseTagData" :key="index" class="tagtag" :closable="true"
                                    @close="handleClose(item)">
                                    {{ item.userName ? item.userName : item.name }}
                                </el-tag>
                            </el-scrollbar>
                        </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, watch,onBeforeMount,toRaw } from 'vue';
import userTree from '../../../api/user/userTree';
import fileShare from '../../../api/fileShare/fileShare';
import fileCount from '../../../api/fileCount/fileCount'
import { ElMessage } from 'element-plus'
export default {
    props: {
        thanks: {
            type: Boolean,
            required: true
        },
        clickRowId: {
            type: Number,
            required: true
        },
        workOrEdit: {
            type: Number,
            required: true
        },
        isNewMenu: {
            type: Boolean,
            required: true
        },
    },
    setup(props, { emit }) {
        let { backToFather, sureBackFather } = toRefs(props)
        let result = props.thanks
        let dees = props.clickRowId
        let feeh = props.workOrEdit
        let isNewMenus = props.isNewMenu
        let transferModals = ref(false)
        let allTreeData = ref([])
        let allTreeProps = {
            label: 'label',
            children: 'children',
            disabled: false,
            id: "id"
        }
        let treeRef = ref(null)
        let openTree = ref([])
        let chooseTagData = ref([])
        let allBag = ref('')
        let needTagData = ref([])
        let backScreen = ref([])
        let lastPeople = ref(false)
        let allCancel = ref(false)
        let have = ref(true)
        function allTeam() {
            if (result) {
                transferModals.value = result
            }
        }
        // 分享穿梭框
        function allTreeChange(e) {
            // console.log('触发了change事件'+ 1++);
            const id = e.id;
            const label = e.label;
            const disabled = e.disabled;
            // 查找是否已经存在相同 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, disabled: disabled });
            }
            if (chooseTagData.value.length === 1) {
                lastPeople.value = true
            } else {
                lastPeople.value = false
            }
            chooseTagData.value = chooseTagData.value.filter(item => !item.disabled)
            // console.log('chooseTagData初始数组',chooseTagData.value);
        }
        // 确认分享
        function sureShare() {
            if (feeh === 1) {
                if (chooseTagData.value.length === 0) {
                    ElMessage({
                        type: "error",
                        message: "你还未选择人员！"
                    })
                } else {
                    console.log(chooseTagData.value, 'value');
                    let arr = []
                    arr = chooseTagData.value.map(item => {
                        return item.userId
                    })
                    fileShare.addSharePeople(dees, arr).then(res => {
                        if (res.code === 200) {
                            ElMessage({
                                message: "分享成功",
                                type: "success"
                            })
                            transferModals.value = false
                            emit("getCback", transferModals.value)
                        }
                    })
                }
            } else {
                if (chooseTagData.value.length === 0) {
                    ElMessage({
                        type: "error",
                        message: "你还未选择人员！"
                    })
                } else {
                    let arr = []
                    arr = chooseTagData.value.map(item => {
                        return item.userId
                    })
                    fileCount.addActor(dees, arr).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);
                });
            })
            if (feeh === 1) {
                fileShare.getSharePeople(dees).then(res => {
                    // 去除res数组内部的userName想同的重复元素
                    let uniqueRes = res.filter((item, index, self) => {
                        return self.findIndex(t => t.userId === item.userId) === index;
                    });
                    // 现在的 uniqueRes 数组不包含重复元素
                    chooseTagData.value = uniqueRes;
                    backScreen.value = chooseTagData.value.map(item => {
                        return item.userId
                    })
                })
            }
            if (feeh === 0) {
                fileCount.getActor(dees).then(res => {
                    chooseTagData.value = res;
                    backScreen.value = chooseTagData.value.map(item => {
                        return item.userId
                    })
                })
            } 
            // else if (!isNewMenus) {
            //     fileCount.getActor(dees).then(res => {
            //         console.log('res222',res);
            //         chooseTagData.value = res
            //     })
            // }

        }
        function cleanPeople() {
            treeRef.value.setCheckedKeys([]);
            chooseTagData.value = [];
            setTimeout(() => {
                antherClean()
            })
        }
        function antherClean() {
            treeRef.value.setCheckedKeys([]);
            chooseTagData.value = [];
        }
        function searchInTreeData(treeData, searchValue) {
            const foundItems = [];
            function traverseTree(node) {
                if (node.label.includes(searchValue)) {
                    foundItems.push(node);
                }
                if (node.children) {
                    node.children.forEach(childNode => traverseTree(childNode));
                }
            }
            treeData.forEach(node => traverseTree(node));
            return foundItems;
        }
        watch(()=>allBag.value,(val)=>{
            treeRef.value?.filter(val)
        })
        function filterNode(value, data) {
            if (!value) return true
            return data.label.includes(value)
        }
        function getBack() {
            transferModals.value = false
            emit("getCback", transferModals.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);
        }
        onBeforeMount(() => {
             getAllUser()
        })
        onMounted(() => {
            allTeam()
        })
        return {
            transferModals,
            allTreeData,
            allTreeProps,
            openTree,
            chooseTagData,
            allTreeChange,
            sureShare,
            allBag,
            getAllUser,
            result,
            allTeam,
            dees,
            needTagData,
            handleClose,
            backScreen,
            lastPeople,
            feeh,
            backToFather: getBack,
            cleanPeople,
            treeRef,
            have,
            filterNode,
        }
    }
}
</script>

<style scoped lang="scss">
.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: 400px;
    border: 1px solid green;
    overflow-y: auto;
}

.needBag {
    width: 255px;
    height: 400px;
    border: 1px solid green;
    overflow-y: auto;
}

.allLog {
    width: 245px;
    height: 330px;
    margin: 5px auto;
    /* border: 1px solid red; */
    overflow-y: auto;
    text-align: center;
}

.needBag_top {
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.custom-tree-node{
  display: flex;
  align-items: center;
  img{
    width: 22px;
    height: 22px;
  }
}
.needLog {
  height: calc(100% - 30px);
    overflow-y: auto;
}

:deep(.el-tag__content) {
    display: block;
}

:deep(.el-icon el-tag__close) {
    display: block;
}

:deep(.el-scrollbar__wrap .el-scrollbar__wrap--hidden-default) {
    height: 346px !important;
}
</style>