src/renderer/src/api/subject/index.js

@@ -1,10 +1,10 @@
 // 查询evaluation列表
 import request from '@/utils/request'
 
-export const listEvaluation = (query)=> {
+export const listEvaluation = (params)=> {
   return request({
     url: '/education/evaluation/list',
     method: 'get',
-    params: query
+    params
   })
 }

src/renderer/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2794390 */
-  src: url('iconfont.woff2?t=1720494614524') format('woff2'),
-       url('iconfont.woff?t=1720494614524') format('woff'),
-       url('iconfont.ttf?t=1720494614524') format('truetype');
+  src: url('iconfont.woff2?t=1720508953092') format('woff2'),
+       url('iconfont.woff?t=1720508953092') format('woff'),
+       url('iconfont.ttf?t=1720508953092') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-guanbi:before {
+  content: "\e60f";
+}
+
 .icon-xiangyou:before {
   content: "\e609";
 }

src/renderer/src/assets/iconfont/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "4736203",
+      "name": "关闭",
+      "font_class": "guanbi",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
     {
       "icon_id": "22358026",
       "name": "向右",

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

@@ -1,31 +1,31 @@
 <template>
   <div class="book-wrap">
-    <div class="book-name flex">
-      <span>语文-人教版-七年级上</span>
+    <div class="book-name flex" @click="dialogVisible = true">
+      <span>{{ curBookName }}</span>
       <i class="iconfont icon-xiangyou"></i>
     </div>
     <div class="book-list">
-      <el-tree
-        :data="data"
-        :props="defaultProps"
-        @node-click="handleNodeClick"
-      />
+      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
     </div>
   </div>
-  <el-dialog
-    v-model="dialogVisible"
-    title="切换教材"
-    width="30%"
-  >
-    <span>This is a message</span>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="dialogVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="dialogVisible = false">
-          Confirm
-        </el-button>
+  <!--弹窗 选择教材-->
+  <el-dialog v-model="dialogVisible" class="choose-dialog" append-to-body :show-close="false" width="550">
+    <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="curBookId == item.id ? 'active-item' : ''"
+          :key="item.id" @click="changeBook(item)">
+          <img :src="item.avartar" class="textbook-img" alt="">
+          <span class="book-name">{{ item.itemtitle }}</span>
+        </div>
+      </el-scrollbar>
+    </div>
   </el-dialog>
 </template>
 
@@ -33,19 +33,82 @@
 import { onMounted, ref } from 'vue';
 import useUserStore from '@/store/modules/user'
 import { listEvaluation } from '@/api/subject'
+import { handleTree } from '@/utils/ruoyi.js'
 
 const userStore = useUserStore()
-  const { edustage, edusubject } = userStore.user
-  const dialogVisible = ref(true)
+const { edustage, edusubject, userId } = userStore.user
+//
+const subjectList = ref([])
+const dialogVisible = ref(false)
+//当前教材ID
+const curBookId = ref(-1)
+//当前教材名称
+const curBookName = ref('')
 
+//获取教材
 const getSubject = async () => {
   const { rows } = await listEvaluation({ itemkey: "version", pageSize: 500 })
-    const data = rows.filter( item => item.edustage == edustage && item.edusubject == edusubject)
-    console.log(data)
-    
+  subjectList.value = rows.filter(item => item.edustage == edustage && item.edusubject == edusubject)
+  curBookName.value = subjectList.value[0].itemtitle
+  curBookId.value = subjectList.value[0].id
 }
 
-  onMounted(getSubject)
+//获取教材下面的单元内容
+const getSubjectContent = async () => {
+  const params = {
+    edusubject,
+    edustage,
+    entpcourseedituserid: userId,
+    pageSize: 500
+  }
+  const { rows } = await listEvaluation(params)
+  //上册
+  const beforAry = []
+  //下册
+  const nextAry = []
+  rows.map(item => {
+    if (item.level == 1) {
+      if (item.semester == '上册') {
+        beforAry.push(item)
+      }
+      if (item.semester == '下册') {
+        nextAry.push(item)
+      }
+    }
+  })
+  
+  console.log(beforAry)
+  beforAry.forEach( item =>{
+    let obj = {}
+    if(item.rootid == curBookId){
+      obj.itemtitle = item.itemtitle
+      
+    }
+  })
+
+  console.log(nextAry)
+}
+
+//选择教材
+const changeBook = ({ id, itemtitle }) => {
+  curBookId.value = id
+  curBookName.value = itemtitle
+  setTimeout(() => {
+    dialogVisible.value = false
+  }, 100);
+}
+
+// 图片地址
+const getImageUrl = (url) => {
+  const path = new URL(`${url}`, import.meta.url)
+  return path.href
+}
+
+onMounted(() => {
+  getSubject(),
+    getSubjectContent()
+})
+
 const data = [{
   label: 'Level one 1',
   children: [
@@ -126,8 +189,55 @@
     cursor: pointer;
     border-bottom: solid #f4f5f7 1px;
   }
+
   .book-list {
     padding: 0 20px;
   }
 }
+
+:deep(.choose-dialog) {
+  border-radius: 10px;
+}
+
+.choose-book-header {
+  justify-content: space-between;
+  font-size: 15px;
+
+  .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;
+    }
+
+    &:hover {
+      background: #f4f7f9;
+    }
+  }
+
+  .active-item {
+    background-color: #f4f7f9;
+
+    .book-name {
+      color: #368fff;
+      font-weight: bold
+    }
+  }
+
+  .textbook-img {
+    width: 55px;
+    height: 70px;
+  }
+}
 </style>