Merge pull request '教材change' (#20) from lyc-dev into main

src/renderer/src/components/choose-textbook/index.vue

@@ -1,18 +1,22 @@
 <template>
   <div class="book-wrap">
-    <div class="book-name flex" @click="dialogVisible = true">
-      <span>{{ curBookName }}</span>
-      <i class="iconfont icon-xiangyou"></i>
-    </div>
-    <div class="book-list">
-      <el-tree ref="treeref" :data="treeData" :props="defaultProps"  node-key="id"
-      :default-expanded-keys="defaultExpandedKeys"
-      :current-node-key="currentNode" highlight-current @node-click="handleNodeClick">
-        <template #default="{ node }">
-          <span :title="node.label" class="tree-label">{{ node.label }}</span>
-        </template>
-      </el-tree>
-    </div>
+    <el-scrollbar height="100%">
+      <div class="book-name flex" @click="dialogVisible = true">
+        <span>{{ curBookName }}</span>
+        <i class="iconfont icon-xiangyou"></i>
+      </div>
+      <div class="book-list">
+
+        <el-tree ref="refTree" :data="treeData" :props="defaultProps" node-key="id"
+          :default-expanded-keys="defaultExpandedKeys" :current-node-key="currentNode" highlight-current
+          @node-click="handleNodeClick">
+          <template #default="{ node }">
+            <span :title="node.label" class="tree-label">{{ node.label }}</span>
+          </template>
+        </el-tree>
+
+      </div>
+    </el-scrollbar>
   </div>
   <!--弹窗 选择教材-->
   <el-dialog v-model="dialogVisible" append-to-body :show-close="false" width="550"
@@ -37,12 +41,12 @@
 </template>
 
 <script setup>
-import { onMounted, ref, nextTick  } from 'vue';
+import { onMounted, ref, nextTick, toRaw } from 'vue';
 import useUserStore from '@/store/modules/user'
 import { listEvaluation } from '@/api/subject'
 
 // 定义要发送的emit事件
-const emit = defineEmits(['nodeClick'])
+const emit = defineEmits(['nodeClick', 'changeBook'])
 // store
 const userStore = useUserStore()
 const { edustage, edusubject, userId } = userStore.user
@@ -65,12 +69,14 @@ const curBookName = ref('')
 const volumeOne = ref([])
 // 下册
 const volumeTwo = ref([])
-// 当前选中的节点
+// 当前选中的节点ID
 const currentNode = ref(0)
+// 当前选中的节点名称
+const currentNodeName = ref('')
 // 默认展开的节点
 const defaultExpandedKeys = ref([])
 // tree
-const treeref = ref(null)
+const refTree = ref(null)
 
 
 //获取教材下面的单元内容
@@ -101,7 +107,6 @@ const changeBook = ({ id, itemtitle }) => {
   setTimeout(() => {
     dialogVisible.value = false
   }, 100);
-
 }
 
 const getTreeData = () => {
@@ -112,32 +117,73 @@ const getTreeData = () => {
   defaultExpandedKeys.value = [treeData.value[0].id]
   nextTick(() => {
     currentNode.value = getLastLevelData(treeData.value)[0].id
+    currentNodeName.value = getLastLevelData(treeData.value)[0].label
+    emitChangeBook()
   })
- 
+
 }
 
+const emitChangeBook = () => {
+  let curNode = {
+    id: currentNode.value,
+    label: currentNodeName.value
+  }
+  let parentNode = findParentByChildId(treeData.value, currentNode.value)
+  curNode.parentNode = toRaw(parentNode)
+
+  const data = {
+    textBook: {
+      curBookId: curBookId.value,
+      curBookName: curBookName.value
+    },
+    node: curNode
+  }
+  emit('changeBook', data)
+}
+
+
 const getLastLevelData = (tree) => {
   let lastLevelData = [];
-      // 递归函数遍历树形结构
-      function traverseTree(nodes) {
-        nodes.forEach((node) => {
-          // 如果当前节点有子节点，继续遍历
-          if (node.children && node.children.length > 0) {
-            traverseTree(node.children);
-          } else {
-            // 如果没有子节点，说明是最后一层的节点
-            lastLevelData.push(node);
-          }
-        });
+  // 递归函数遍历树形结构
+  function traverseTree(nodes) {
+    nodes.forEach((node) => {
+      // 如果当前节点有子节点，继续遍历
+      if (node.children && node.children.length > 0) {
+        traverseTree(node.children);
+      } else {
+        // 如果没有子节点，说明是最后一层的节点
+        lastLevelData.push(node);
       }
+    });
+  }
 
-      // 调用递归函数开始遍历
-      traverseTree(tree);
+  // 调用递归函数开始遍历
+  traverseTree(tree);
 
-      // 返回最后一层的数据
-      return lastLevelData;
+  // 返回最后一层的数据
+  return lastLevelData;
+}
+// 根据id 拿到父节点数据
+const findParentByChildId = (treeData, targetNodeId) => {
+  // 递归查找函数
+  // 遍历树中的每个节点
+  for (let node of treeData) {
+    // 检查当前节点的子节点是否包含目标子节点 ID
+    if (node.children && node.children.some(child => child.id === targetNodeId)) {
+      // 如果当前节点的某个子节点的 ID 匹配目标子节点 ID，则当前节点即为父节点
+      return node;
+    }
+    // 如果当前节点没有匹配的子节点，则递归检查当前节点的子节点
+    if (node.children) {
+      let parentNode = findParentNode(node.children, targetNodeId);
+      if (parentNode) {
+        return parentNode;
+      }
+    }
+  }
+  // 如果未找到匹配的父节点，则返回 null 或者适当的默认值
+  return null;
 }
-
 
 const transData = (data) => {
   let ary = []
@@ -170,6 +216,7 @@ const transData = (data) => {
 const getSubject = async () => {
   const { rows } = await listEvaluation({ itemkey: "version", pageSize: 500 })
   subjectList.value = rows.filter(item => item.edustage == edustage && item.edusubject == edusubject && isHaveUnit(item.id))
+  // 默认第一个
   curBookName.value = subjectList.value[0].itemtitle
   curBookId.value = subjectList.value[0].id
 }
@@ -182,8 +229,32 @@ const isHaveUnit = (id) => {
 }
 
 
-const handleNodeClick = (data) => {
-  emit('nodeClick', data)
+const handleNodeClick = (data, node) => {
+  /**
+   * data : 当前节点数据
+   * node : 当前节点对象 包含当前节点所有数据  parent属性 指向父节点Node对象
+   */
+  const currentNode = data;
+  const parentNode = node.parent.data;
+
+  if (Array.isArray(parentNode)) {
+    let node = parentNode.filter(item => item.id == currentNode.id)
+    currentNode.parentNode = { ...(node[0]) }
+  }
+  else {
+    currentNode.parentNode = parentNode
+  }
+
+  let curData = {
+    textBook: {
+      curBookId: curBookId.value,
+      curBookName: curBookName.value
+    },
+    node: toRaw(currentNode)
+  }
+
+  emit('nodeClick', curData)
+
 }
 
 onMounted(() => {
@@ -193,7 +264,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-
 .book-wrap {
   width: 300px;
   height: 100%;
@@ -202,10 +272,17 @@ onMounted(() => {
   box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
   display: flex;
   flex-direction: column;
+  position: relative;
 
   .book-name {
+    background-color: #ffffff;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
     height: 45px;
     padding: 0 15px;
+    z-index: 1;
     justify-content: space-between;
     align-items: center;
     color: #3b3b3b;
@@ -216,6 +293,7 @@ onMounted(() => {
   }
 
   .book-list {
+    padding-top: 45px;
     padding-left: 10px;
     flex: 1;
   }
@@ -286,9 +364,8 @@ onMounted(() => {
   text-overflow: ellipsis;
 }
 
-:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
+:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
   background-color: #d9e8fe !important;
   color: #409EFF
 }
-
 </style>

src/renderer/src/views/resource/container/resoure-search.vue

@@ -49,8 +49,8 @@ const openDialog = ()=>{
 }
 
 const submitFile = (fileList)=>{
-  console.log(toRaw(fileList))
-  uploaderState().pushFile(toRaw(fileList))
+  // console.log(toRaw(fileList))
+  // uploaderState().pushFile(toRaw(fileList))
 }
 </script>
 <style lang="scss" scoped>

src/renderer/src/views/resource/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-resource flex">
-    <ChooseTextbook @nodeClick="nodeClick" />
+    <ChooseTextbook @changeBook="changeBook" @nodeClick="nodeClick" />
 
     <div class="page-right">
       <template v-if="!sourceStore.isCreate">
@@ -15,7 +15,6 @@
 </template>
 
 <script setup>
-import { toRaw } from 'vue'
 import useResoureStore from './store'
 import ChooseTextbook from '@/components/choose-textbook/index.vue'
 import ResoureSearch from './container/resoure-search.vue'
@@ -27,9 +26,14 @@ const { ipcRenderer } = window.electron || {}
 // ipcRenderer.send('set-winsize',{x:1100,y: 700})
 
 const nodeClick = (data) => {
-  console.log(toRaw(data))
+  console.log(data)
 }
 
+const changeBook = (data) => {
+  console.log(data)
+}
+
+
 </script>
 
 <style lang="scss" scoped>