feat: 办事大厅前端源码首次入库（事项列表/详情/申报/管理端）

src/components/TreeNode/Knowledge.vue

@@ -0,0 +1,238 @@
+<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>