easydo-mes-web/src/layout/components/probar.vue

<template>
    <el-drawer class="pro-drawer" v-model="visible" :size="800" append-to-body @closed="$emit('closed')">
        <template #header="{ titleId, titleClass }">
            <span :id="titleId" :class="titleClass">当前企业：<span>{{ deptData?.name }}</span></span>
        </template>

        <el-container class="dept-content">
            <el-aside width="300px">
                <el-header>企业列表</el-header>
                <el-main class="nopadding">
                    <el-scrollbar>
                        <el-tree node-key="id" :current-node-key="filter.deptId" :data="deptTree" :default-expanded-keys="expandedKeys" highlight-current expand-on-click-node accordion @node-click="data => filter.deptId = data.id">
                            <template #default="{ data }">
                                <vxe-text-ellipsis :id="data.id" :title="data.name" class="custom-tree-node" :content="data.name"></vxe-text-ellipsis>
                            </template>
                        </el-tree>
                    </el-scrollbar>
                </el-main>
            </el-aside>
            <el-container>
                <el-header>项目列表
                    <el-input v-model="filter.text" placeholder="输入项目名称" clearable></el-input>
                </el-header>
                <el-main class="nopadding">
                    <el-scrollbar>
                        <el-tree node-key="fpiId" :current-node-key="$store.state.project.projectId" :data="projects" highlight-current @node-click="data => nodeClick(data)">
                            <template #default="{ data }">
                                <vxe-text-ellipsis :id="data.fpiId" :title="data.projectName" class="custom-tree-node" :content="data.projectName"></vxe-text-ellipsis>
                            </template>
                        </el-tree>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-container>
	</el-drawer>
</template>

<script>
import XEUtils from "xe-utils";

export default {
    data() {
        return {
            visible: false,

            filter: {
                deptId: XEUtils.toNumber(XEUtils.get(XEUtils.find(this.$TOOL.data.get("PROJECTS"), item => item.fpiId == this.$store.state.project.projectId), "belongDeptId")),
                text: ""
            }
        }
    },

    computed: {
        expandedKeys() {
            return XEUtils.map(XEUtils.toTreeArray(XEUtils.searchTree(this.deptTree, item => item.id == this.filter.deptId)), item => item.id);
        },

        deptTree() {
            return XEUtils.first(XEUtils.toArrayTree(this.$TOOL.data.get("DEPTS"), { parentKey: "pid" })).children;
        },

        projects() {
            if (this.filter.text) return XEUtils.filter(this.$TOOL.data.get("PROJECTS"), item => item.projectName.includes(this.filter.text));
            return XEUtils.filter(this.$TOOL.data.get("PROJECTS"), item => item.belongDeptId == this.deptData.id);
        },

        deptData() {
            return XEUtils.find(this.$TOOL.data.get("DEPTS"), item => item.id == this.filter.deptId);
        }
    },

    methods: {
        open() {
            this.visible = true;
            nextTick(() => XEUtils.arrayEach(document.querySelectorAll(".el-tree-node.is-current"), el => el.scrollIntoView({ block: "center" })));
            return this;
        },

        nodeClick(data) {
            this.$store.commit("SET_projectId", data.fpiId);
            this.visible = false;
        },
    }
}
</script>

<style lang="scss" scoped>
.dept-content {border-top: 1px solid var(--el-border-color-light);}
.dept-content :deep(.el-header) {height: fit-content;padding: 10px;padding-left: 0;border: none;font-size: 14px;font-weight: bold;color: rgba(0, 0, 0, 0.85);}
.dept-content .el-aside {display: flex;flex-direction: column;}
.dept-content .el-aside + .el-container {padding-left: 15px;}
.dept-content .el-aside + .el-container .el-header {flex-direction: column;align-items: flex-start;}
.dept-content .el-aside + .el-container .el-header .el-input {width: 200px;margin-top: 10px;}
</style>