src/renderer/src/views/prepare/components/chooseTextbook.vue

@@ -0,0 +1,308 @@
+<template>
+    <div class="book-wrap">
+      <el-scrollbar height="100%">
+        <div class="book-name flex" @click="dialogVisible = true">
+          <span>{{ curBook.data.itemtitle }}</span>
+          <i class="iconfont icon-xiangyou"></i>
+        </div>
+        <div class="book-list" v-loading="treeLoading">
+          <el-tree :data="treeData" accordion :props="defaultProps" node-key="id"
+            :default-expanded-keys="defaultExpandedKeys" :current-node-key="curNode.data.id" 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"
+      style="border-radius: 10px; padding: 10px 15px;">
+      <template #header>
+        <div class="choose-book-header flex">
+          <span>切换教材</span>
+          <i class="iconfont icon-guanbi" @click="dialogVisible = false"></i>
+        </div>
+      </template>
+  
+      <div class="textbook-container">
+        <el-scrollbar height="450px">
+          <div class="textbook-item flex" v-for="item in subjectList" :class="curBook.data.id == item.id ? 'active-item' : ''"
+            :key="item.id" @click="changeBook(item)">
+            <img v-if="item.avartar" :src="item.avartar.indexOf('http') === 0 ? item.avartar : BaseUrl + item.avartar" class="textbook-img" alt="">
+            <div v-else class="textbook-img">
+              <i class="iconfont icon-jiaocaixuanze" style="font-size: 40px;"></i>
+            </div>
+            <span class="book-name">{{ item.itemtitle }}</span>
+          </div>
+        </el-scrollbar>
+      </div>
+    </el-dialog>
+</template>
+  
+  <script setup>
+  import { onMounted, ref, nextTick, toRaw, reactive } from 'vue';
+  import { cloneDeep } from 'lodash'
+  import { sessionStore } from '@/utils/store'
+  import { useGetSubject } from '@/hooks/useGetSubject'
+  
+  const BaseUrl = import.meta.env.VITE_APP_BUILD_BASE_PATH
+  // 定义要发送的emit事件
+  const emit = defineEmits(['nodeClick', 'changeBook'])
+  let useSubject = null
+  const subjectList = ref([])
+  const dialogVisible = ref(false)
+  // 当前教材下面单元内容数据
+  const treeData = ref([])
+  const defaultProps = {
+    children: 'children',
+    label: 'itemtitle',
+    class: 'textbook-tree'
+  }
+  // 当前选中的教材
+  const curBook = reactive({
+    data: {}
+  })
+  // 当前节点
+  const curNode = reactive({
+    data:{}
+  })
+  const treeLoading = ref(false)
+  // 默认展开的节点
+  const defaultExpandedKeys = ref([])
+  
+  //选择教材
+  const changeBook = (data) => {
+    curBook.data = data
+    treeData.value = useSubject.getTreeData(data.id)
+    //切换教材后默认展开第一个并选中
+    nextTick(() =>{
+      defaultExpandedKeys.value = [treeData.value[0].id]
+      curNode.data = getLastLevelData(treeData.value)[0]
+      handleNodeClick(curNode.data)
+    })
+    // 延迟关闭 视觉上选中
+    setTimeout(() => {
+      dialogVisible.value = false
+    }, 100);
+  }
+  
+  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);
+        }
+      });
+    }
+  
+    // 调用递归函数开始遍历
+    traverseTree(tree);
+  
+    // 返回最后一层的数据
+    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 = findParentByChildId(node.children, targetNodeId);
+        if (parentNode) {
+          return parentNode;
+        }
+      }
+    }
+    // 如果未找到匹配的父节点，则返回 null 或者适当的默认值
+    return null;
+  }
+  
+  
+  const handleNodeClick = (data) => {
+    /**
+     * data : 当前节点数据
+     */
+    let nodeData = cloneDeep(toRaw(data));
+   
+    //增加一个label 之前取的label
+    nodeData.label = nodeData.itemtitle
+    // 父级节点 如果当前是一级节点 父级则为null
+    let parent = {
+      id: nodeData.parentid,
+      label: nodeData.parenttitle,
+      itemtitle: nodeData.parenttitle
+    } 
+    const parentNode = nodeData.parentid ?  parent : null
+    nodeData.parentNode = parentNode
+    let curData = {
+      textBook: {
+        curBookId: curBook.data.id,
+        curBookName: curBook.data.itemtitle,
+        curBookImg: BaseUrl + curBook.data.avartar,
+        curBookPath: curBook.data.fileurl
+      },
+      node: nodeData
+    }
+    // 本地存储:electron-store
+    emit('nodeClick', curData)
+  }
+  onMounted( async () => {
+    treeLoading.value = true
+    try{
+      useSubject = await useGetSubject()
+      subjectList.value = sessionStore.get('subject.bookList')
+      // 当前教材
+      if(sessionStore.get('subject.curBook')){
+        curBook.data = sessionStore.get('subject.curBook')
+      }
+      else{
+        curBook.data = subjectList.value[0]
+      }
+  
+      // 章节"树"
+      treeData.value = useSubject.getTreeData(curBook.data.id)
+      
+      nextTick(() =>{
+        // 默认展开 选中
+        if(sessionStore.get('subject.curNode')){
+          defaultExpandedKeys.value = sessionStore.get('subject.defaultExpandedKeys')
+          curNode.data = sessionStore.get('subject.curNode')
+        }else{
+          defaultExpandedKeys.value = [treeData.value[0].id]
+          curNode.data = getLastLevelData(treeData.value)[0]
+        }
+        handleNodeClick(curNode.data)
+      })
+    
+    } finally{
+      treeLoading.value = false
+    }
+  
+  })
+  
+  </script>
+  
+  <style lang="scss" scoped>
+  .book-wrap {
+    width: 300px;
+    height: 100%;
+    background: #ffffff;
+    border-radius: 10px;
+    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;
+      cursor: pointer;
+      border-bottom: solid #f4f5f7 1px;
+      font-size: 15px;
+      font-weight: 600;
+      border-radius: 10px 10px 0 0;
+    }
+  
+    .book-list {
+      padding: 45px 10px 0 10px;
+      flex: 1;
+    }
+  }
+  
+  :deep(.choose-dialog) {
+    border-radius: 10px;
+  }
+  
+  .choose-book-header {
+    justify-content: space-between;
+    font-size: 15px;
+    font-weight: bold;
+  
+    .icon-guanbi {
+      font-size: 20px;
+      cursor: pointer;
+    }
+  }
+  
+  .textbook-container {
+    .textbook-item {
+      padding: 10px 20px;
+      align-items: center;
+      border-radius: 5px;
+      cursor: pointer;
+  
+      .book-name {
+        margin-left: 20px;
+        color: #3b3b3b;
+        font-size: 13px;
+      }
+  
+      &:hover {
+        background: #f4f7f9;
+      }
+    }
+  
+    .active-item {
+      background-color: #f4f7f9;
+  
+      .book-name {
+        color: #368fff;
+        font-weight: bold
+      }
+    }
+  
+    .textbook-img {
+      width: 55px;
+      height: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  
+  :deep(.el-tree-node) {
+    .el-tree-node__content {
+      height: 40px;
+      border-radius: 10px;
+  
+      &:hover {
+        background-color: #eaf3ff;
+      }
+    }
+  }
+  
+  .tree-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
+    background-color: #eaf3ff !important;
+    color: #409EFF
+  }
+  </style>
+  

src/renderer/src/views/prepare/components/treeLog.vue

@@ -19,11 +19,10 @@
 </template>
 
   <script setup>
-  import { ref, defineExpose } from 'vue'
+  import { ref, defineExpose,defineEmits } from 'vue'
-  import ChooseTextbook from '@/components/choose-textbook/index.vue'
+  import ChooseTextbook from './chooseTextbook.vue'
-
   const emit = defineEmits(['onsuccess'])
-
+  
   const dialogVisible = ref(false)
   const getNodeInfo = ref([])