svc-hall-front/src/components/TreeNode/Knowledge.vue

<template>
    <div>
        <Select class="mt-8" v-model="curSubJectId" placeholder="请选择学科">
            <Option v-for="item in subjectComp" :value="item.k">{{ item.v }}</Option>
        </Select>
        <MyTree v-if="!treeLoading" ref="refMyTree" :autoClick="false" :treeData="treeData" :setting="treeSetting"
            @on-tree-click="treeLink" />
    </div>
</template>

<script lang="ts" setup>
import MyTree from '@/components/MyTree.vue'
import { useDefaultStore } from "@/store";
import { cloneDeep, isEmpty } from "lodash";
import useCurrentInstance from "@/utils/hook/useCurrentInstance";
import { get, last } from "lodash";
import { requireImg } from "@/utils/hook/useImg";

const props = defineProps<{

}>()

const curTreeNode = defineModel<any>('curTreeNode', { default: {} })
//学科学段
const curSubjectInfo = defineModel<any>('curSubjectInfo', {
    default: {
        stage: null,
        subject: null
    }
})

const store = useDefaultStore();
const { $utils } = useCurrentInstance();

const refMyTree = useTemplateRef('refMyTree');
function showIconForTree(treeId: any, treeNode: any) {
    return treeNode.level == 0;
};
const treeSetting = ref({
    view: {
        dblClickExpand: false,
        // showIcon: true,
        showIcon: showIconForTree
    },
    edit: {
        enable: true,
        showRemoveBtn: false,
        showRenameBtn: false,
        drag: false,
    },
    check: {
        enable: false,
    },
    callback: {},
})


const curSubJectId = ref<number | null>(null);

const subjectComp = computed(() => {
    return store.getStageSubjects;
})

const paramsComp = computed(() => {
    const find = subjectComp.value.find((item: any) => item.k == curSubJectId.value)
    if (!find) return null;
    else
        return {
            stage: find.stage,
            subject: find.code
        }
})


const curNodePath = computed(() => {
    if (!curTreeNode.value) return [];
    let arr: any[] = curTreeNode.value.getPath().map((x: any) => x.name)
    return arr;
})



const { loading: treeLoading, data: treeData, send: sendReloadTree, onSuccess: onNodeTreeSuccess } = useRequest(
    () => Apis.NodeTree.getKnowledge({ params: paramsComp.value }),
    {
        initialData: [],
        immediate: false,
    })

watch(() => curSubJectId.value, async (val) => {
    await nextTick();
    curTreeNode.value = null;
    curSubjectInfo.value.stage = paramsComp.value?.stage;
    curSubjectInfo.value.subject = paramsComp.value?.subject;
    if (!!val)
        sessionStorage.setItem('bsch.learnmanage.cur_subject_id', val.toString())
    sendReloadTree(-1);
})

onNodeTreeSuccess(() => reloadTree(-1))

onMounted(async () => {
    await nextTick();
    console.log(subjectComp.value);

    if (subjectComp.value.length > 0) {

        let cacheStr = sessionStorage.getItem('bsch.learnmanage.cur_subject_id');
        if (!!cacheStr) {
            curSubJectId.value = Number(cacheStr);
        }
        else
            curSubJectId.value = subjectComp.value[0].k;
    }
})



async function reloadTree(id?: number) {
    await nextTick();
    function recursion(tree: any[], level: number): any[] {
        tree.forEach(element => {
            if (level == 1) {
                element.open = true;
                element.parent = true;
                element.isParent = true;
                element.icon = requireImg(`tree-icon-item.png`, "image");
                element.iconSkin = requireImg(`tree-icon-item.png`, "image");
            }
            else {
                element.icon = '';
                element.iconSkin = '';
            }

            // element.icon = requireImg(`tree-icon-${element.isParent ? "group" : "item"}.png`, "image");

            element.level = level;

            if (!!element.children && element.children.length > 0)
                element.children = recursion(element.children, level + 1);
            else if (!element.isParent) {
                delete element.children;
            }
        });

        return tree;
    }
    treeData.value = recursion(treeData.value, 1);


    // treeData.value.forEach((n: any) => {
    //     n.open = true;
    //     n.icon = requireImg(`tree-icon-item.png`, "image");
    //     if (!n.children || n.children.length == 0) {
    //         n.parent = true;
    //         n.children = [];
    //     }
    // });

    if (!!curTreeNode.value && !!curTreeNode.value.id)
        refMyTree.value?.reloadTree(curTreeNode.value.id)
    else
        refMyTree.value?.reloadTree(id)
}

async function refreshMoveTree() {
    // const id = selectedNode.value.id;
    // await Apis.NodeTree.refreshSortTree({ params: { nodeId: id } })
    // Message.success('刷新成功！');
    // refTreeNode.value?.reloadTree()
}



async function treeLink(treeNode: any) {
    const copyNode = cloneDeep(treeNode)
    copyNode.children = [];
    curTreeNode.value = copyNode;
    console.log('click', treeNode.compositeId);
    console.log(copyNode.getPath().map((x: any) => x.name));
}

async function onChangeSubject() { }
</script>

<style lang="scss">
.opera-ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 10px;

    li {
        padding: 10px;
        height: 38px;
        border-radius: 50%;
        cursor: pointer;

        &.active,
        &:hover {
            background-color: #f5f5f5;
        }

        svg {
            width: 18px;
            height: 18px;
        }
    }

    li.disabled {
        cursor: not-allowed;
        opacity: 0.4;

        &:hover {
            background-color: #fff;
        }
    }

}

#modal-sortTreeNode-id {
    position: relative;
    z-index: 1000;
    height: 380px;

    .tree-div {
        z-index: 1001;
        border: 1px solid #cacaca;
        border-radius: 5px;
        height: 300px;
    }

    .ztree {
        margin-bottom: 20px;
    }
}
</style>