el-tree 根据多个结果筛选树状图(增加checkbox勾选)

<template>
    <div class="wrapper-jjy">
        <el-dialog title="接警员查找" v-model="jjyDialogVisible" :draggable="true" width="735px" height="300" :close-on-click-modal="true">
            <div class="box-jjy">
                <div class="box-top">
                    <div class="box-tag">
                        <el-tag v-for="(item, index) in selectedJJY" :key="index" closable @close="handleDeleteTag(item.bh)" style="margin:0 5px 5px 0">
                            {{ item.yhmc }}
                        </el-tag>
                    </div>
                </div>
                <div class="box-center">
                    <div class="box-tree">
                        <el-input v-model="deptText" size="small" placeholder="输入部门过滤" clearable />
                        <el-tree
                            class="tree-dept"
                            ref="treeDeptRef"
                            :data="deptList"
                            :expand-on-click-node="false"
                            :filter-node-method="filterDeptNode"
                            :props="{ children: 'children', label: 'jgjc' }"
                            default-expand-all
                            @node-click="handleNodeClick"
                        />
                    </div>
                    <div class="box-table">
                        <div style="display:flex">
                            <el-input v-model="jjyText" size="small" placeholder="输入接警员或坐席号过滤" clearable />
                        </div>

                        <el-table
                            class="table-jjy"
                            size="mini"
                            :data="tablejjyList"
                            border
                            ref="multipleTableRef"
                            @select="handleSelectionChange"
                            @select-all="handleSelectionAllChange"
                        >
                            <el-table-column type="selection" width="50" />
                            <el-table-column prop="yhgh" label="坐席号" width="110"> </el-table-column>
                            <el-table-column prop="yhmc" label="接警员"> </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <template #footer>
                <span>
                    <el-button type="primary" size="mini" @click="handleJJYSubmit">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { reactive, toRefs, defineComponent, onMounted, computed, defineExpose, ref, watch, nextTick } from "vue";
import { useStore } from "vuex";
export default defineComponent({
    props: {},
    setup(props, { attrs, emit, slots }) {
        const store = useStore();

        const deptList = computed(() => store.state.jjy.deptList);
        const jjyList = computed(() => store.state.jjy.jjyList);

        const state = reactive({
            tablejjyList: [],
            multipleSelection: [],
            selectedJJY: [],
            jjyDialogVisible: false,
            deptText: "",
            jjyText: "",
        });

        let treeDeptRef = ref(null);
        let multipleTableRef = ref(null);

        watch(
            () => state.deptText,
            (n, o) => {
                treeDeptRef.value.filter(n);
            }
        );

        watch(
            () => state.jjyText,
            (n, o) => {
                filterDeptByKeywold(n);
            }
        );

        // 获取部门数据
        const getDeptList = () => {
            store.dispatch("jjy/getDeptData");
        };

        //获取接警员数据
        const getJJYList = () => {
            store.dispatch("jjy/getJJYData");
        };

        // 外部过滤
        const filterDeptNode = (value, data) => {
            if (!value) return true;

            // 根据右边的数组对象结果筛选左边的部门
            if (Object.prototype.toString.call(value) === "[object Array]") {
                let target = value.find((s) => s.dwbh === data.jgbm); // dwbh 单位编号，jgbm 机构部门
                if (target) {
                    return true;
                }
            }

            let is = data.jgjc && data.jgjc.indexOf(value) !== -1; // jgjc 机构简称
            return is;
        };

        // 控制右侧复选框的选中与否
        function handleUpdateCheckbox() {
            nextTick(() => {
                state.tablejjyList.forEach((row) => {
                    let target = state.selectedJJY.find((item) => item.bh === row.bh);
                    if (target) {
                        multipleTableRef.value.toggleRowSelection(row, true);
                    } else {
                        multipleTableRef.value.toggleRowSelection(row, false);
                    }
                });
            });
        }

        // 根据关键字过滤部门
        const filterDeptByKeywold = (val) => {
            state.deptText = ""; // 清空左侧输入框，重置tree
            if (val) {
                state.tablejjyList = jjyList.value.filter((s) => (s.yhmc && s.yhmc.includes(val)) || (s.yhgh && s.yhgh.includes(val)));
                // 查找到则去找到对应部门，未查找到则重置左侧部门数据
                if (state.tablejjyList.length === 0) {
                    treeDeptRef.value.filter("");
                } else {
                    treeDeptRef.value.filter(state.tablejjyList);
                }

                handleUpdateCheckbox();
            } else {
                treeDeptRef.value.filter("");
                state.tablejjyList = [];
            }
        };

        // tree node 点击事件
        const handleNodeClick = (data) => {
            state.tablejjyList = jjyList.value.filter((s) => s.dwbh === data.jgbm);
            handleUpdateCheckbox();
        };

        // table checkbox 单行选择事件
        const handleSelectionChange = (val, row) => {
            let index = state.selectedJJY.findIndex((s) => s.bh === row.bh);
            if (index != -1) {
                // 已有，删除
                state.selectedJJY.splice(index, 1);
            } else {
                // 没有，添加
                state.selectedJJY.push(row);
            }
        };

        // table checkbox 全选事件
        const handleSelectionAllChange = (val) => {
            if (val.length) {
                // 全选增加
                val.map((item) => {
                    if (state.selectedJJY.includes(item)) {
                    } else {
                        state.selectedJJY.push(item);
                    }
                });
            } else {
                // 全取消删除
                state.tablejjyList.map((item) => {
                    let index = state.selectedJJY.findIndex((s) => s.bh === item.bh);
                    if (index != -1) {
                        // 已有，删除
                        state.selectedJJY.splice(index, 1);
                    }
                });
            }
        };

        // 删除标签
        const handleDeleteTag = (bh) => {
            let index = state.selectedJJY.findIndex((item) => item.bh === bh);
            state.selectedJJY.splice(index, 1);

            handleUpdateCheckbox();
        };

        // 打开/关闭 dialog
        const handleJJYDialog = (val) => {
            state.jjyDialogVisible = val;
        };

        // 选中的tag提交到输入框
        const handleJJYSubmit = () => {
            let str_arr = [];
            state.selectedJJY.map((item) => {
                str_arr.push(item.yhmc);
            });
            emit("returnJJY", str_arr.toString());
            state.jjyDialogVisible = false;
        };

        onMounted(() => {
            getDeptList();
            getJJYList();
        });

        return {
            treeDeptRef,
            multipleTableRef,

            ...toRefs(state),

            deptList,
            jjyList,

            handleSelectionAllChange,
            handleSelectionChange,

            handleNodeClick,
            handleDeleteTag,
            handleJJYDialog,
            handleJJYSubmit,

            filterDeptNode,
        };
    },
});
</script>
<style scoped lang="scss">
.wrapper-jjy {
    ::v-deep() {
        .el-dialog {
            // background-color: red;

            .el-dialog__body {
                padding: 15px 20px 0 20px;
            }
        }
    }

    .box-jjy {
        .box-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 10px;

            .box-tag {
                max-height: 110px;
                overflow: auto;
                text-align: left;
                margin-right: 5px;
            }
        }

        .box-center {
            display: flex;
            .box-tree {
                width: 300px;
                .tree-dept {
                    margin-top: 5px;
                    max-height: 500px;
                    overflow: auto;
                }
            }

            .box-table {
                flex: 1;
                margin-left: 10px;
                .table-jjy {
                    margin-top: 5px;
                    height: 500px;
                    overflow: auto;
                }
            }
        }
    }
}
</style>

<style lang="scss">
.table-jjy {
    td {
        padding: 6px 0 !important;
    }
    th > .cell {
        color: #909399 !important;
        font-size: 14px !important;
    }
}
</style>