三方资源加入备课

Reviewed-on: #402

src/renderer/src/api/file/index.js

@@ -53,3 +53,14 @@ export const moveSmarttalk = (params) => {
     params
   })
 }
+
+export const addFileToPrepareThird = (data) => {
+  return request({
+    url: '/smarttalk/file/addFileToPrepareThird',
+    method: 'post',
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    data
+  })
+}

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,13 +19,12 @@
 </template>
 
   <script setup>
-  import { ref, defineExpose } from 'vue'
-  import ChooseTextbook from '@/components/choose-textbook/index.vue'
-
+  import { ref, defineExpose,defineEmits } from 'vue'
+  import ChooseTextbook from './chooseTextbook.vue'
   const emit = defineEmits(['onsuccess'])
 
   const dialogVisible = ref(false)
-  const getNodeInfo = ref([])
+  const getNodeInfo = ref({})
 
   const openDialog = () => {
     dialogVisible.value = true
@@ -36,7 +35,7 @@
     const recursive = (currentNode) => {
       // 这里添加节点参数
       if (currentNode.parentNode) {
-        obj.unshift(Object.assign({curentId: currentNode.id,title:currentNode.itemtitle}, currentNode.parentNode))
+        obj.unshift({id: currentNode.id,title:currentNode.itemtitle})
         recursive(currentNode.parentNode)
       } else {
         obj.unshift({id: currentNode.id,title:currentNode.itemtitle})
@@ -47,7 +46,11 @@
   }
 
   const nodeClick = (data) => {
-    getNodeInfo.value = getFullObj(data.node)
+    getNodeInfo.value = {
+      textbookId:data.node.rootid,
+      cataList:getFullObj(data.node)
+    }
+    console.log(getNodeInfo.value,'log')
   }
 
   const save = () => {

src/renderer/src/views/prepare/index.vue

@@ -2,7 +2,6 @@
   <div v-loading="isLoading" class="page-resource flex">
     <ChooseTextbook @node-click="nodeClick" />
     <div class="page-center-wrap">
-      <el-button @click="openChapter" type="primary">打开章节</el-button>
       <el-tabs v-model="activeAptTab" style="height: 100%;">
         <el-tab-pane label="教学课件" name="教学课件" class="prepare-center-jxkj">
           <div class="prepare-center-header">
@@ -141,8 +140,6 @@
   <!-- 上课配置 -->
   <class-start ref="calssRef" @close="closeChange"/>
   <PptDialog @add-success="addAiPPT" :currentNode="currentNode" :uploadData="uploadData" v-model="pptDialog"/>
-  <!-- 章节弹窗 -->
-  <TreeLog ref="treelogRef"/>
   <!-- <button @click="test">test</button> -->
 </template>
 <script setup>
@@ -637,7 +634,7 @@ export default {
     },
     async nodeClick(data) {
       console.log(data,'data');
-      
+
       if (this.currentNode.id === data.node.id) return
       this.curBookImg = data.textBook.curBookImg
       this.curBookPath = data.textBook.curBookPath
@@ -796,11 +793,6 @@ export default {
           '&reservId=' +
           id
       })
-    },
-    // 打开章节
-    openChapter(){
-      // 打开弹窗
-      this.$refs.treelogRef.openDialog()
     }
   }
 }

src/renderer/src/views/resource/container/third-list.vue

@@ -50,6 +50,10 @@
               </div>
             </div>
           </div>
+          <el-button v-loading="item.loading" size="small" plain round type="primary" @click.stop="openChapter(item)">
+            <i class="iconfont icon-jiahao"></i>
+            备课</el-button
+          >
         </li>
       </ul>
     </el-scrollbar>
@@ -66,17 +70,20 @@
       />
     </div>
     <FilePreview ref="thirdPreview" v-model="isViewImg"></FilePreview>
+    <TreeLog ref="treelogRef" @onsuccess="addToPrepare"/>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-// import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Clock,View,Folder,Search } from '@element-plus/icons-vue'
 import FileImage from '@/components/file-image/index.vue'
 import FilePreview from '@/components/thirdFile-preview/index.vue'
 import useUserStore from '@/store/modules/user'
 import useResoureStore from '../store'
+import { addFileToPrepareThird } from '@/api/file'
+import TreeLog from '@/views/prepare/components/treeLog.vue'
 
 const userstore = useUserStore()
 const sourceStore = useResoureStore()
@@ -85,6 +92,9 @@ const sourceStore = useResoureStore()
 //判断是否预览图片
 const isViewImg = ref(false)
 const thirdPreview = ref()
+const treelogRef = ref()
+const currentItem = ref()
+const loading = ref(false)
 
 // 分页change
 const handleSizeChange = (limit) => {
@@ -114,6 +124,31 @@ const handleRow = (item) => {
   isViewImg.value = true
   thirdPreview.value.init(item.itemId)
 }
+const openChapter = (item)=>{
+  currentItem.value = item
+  // 打开弹窗
+  treelogRef.value.openDialog()
+}
+const addToPrepare = (data) => {
+  console.log(data)
+  let chapterArr = []
+  for (let i = 0; i < data.cataList.length; i++) {
+    chapterArr.push({id: data.cataList[i].id,name: data.cataList[i].title})
+  }
+  let postData = {
+      itemId: currentItem.value.itemId,
+      textBookId: data.textbookId,
+      chapter: JSON.stringify(chapterArr)
+  }
+  currentItem.value.loading = true
+  addFileToPrepareThird(postData).then((res) => {
+    currentItem.value.loading = false
+    console.log(res)
+    if (res.code === 200) {
+      ElMessage.success("加入备课成功")
+    }
+  })
+}
 </script>
 
 <style lang="scss">