知识点作答增加全部切换

src/views/targetImprove/practice/practiceAnswer.vue

@@ -1,34 +1,43 @@
 <template>
   <div class="practice_answer">
     <el-container style="height: 100%">
-      <el-aside width="260px" class="aside_left hide_scrollbar">
+      <el-aside width="260px" class="aside_left">
         <div class="side_list">
-          <div class="side_title">待练习知识点</div>
-          <div
-            :class="['side_item', { active: item.exerciseId == exerciseId }]"
-            v-for="item in waitList"
-            :key="item.exerciseId"
-            @click="ChangeKnowledge(item)"
-          >
-            <div class="item_name">
-              {{ item.knowledgeName }}
-            </div>
-            <div class="item_content">
-              <div class="content_left">
-                <div class="content_type">
-                  {{ item.exerciseType == 1 ? "自主练习" : "指定练习" }}
+          <div class="side_header">
+            <div class="side_title">待练习知识点</div>
+            <el-radio-group class="side_tab" v-model="radio_type" @input="ChangeTab">
+              <el-radio-button label="">全部</el-radio-button>
+              <el-radio-button :label="2">指定练习</el-radio-button>
+              <el-radio-button :label="1">自主练习</el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="side_list_content hide_scrollbar" ref="scrollBox">
+            <div
+              :class="['side_item', { active: item.exerciseId == exerciseId }]"
+              v-for="item in waitList"
+              :key="item.exerciseId"
+              @click="ChangeKnowledge(item)"
+            >
+              <div class="item_name">
+                {{ item.knowledgeName }}
+              </div>
+              <div class="item_content">
+                <div class="content_left">
+                  <div class="content_type">
+                    {{ item.exerciseType == 1 ? "自主练习" : "指定练习" }}
+                  </div>
+                  <div class="content_num">
+                    题量：{{ item?.questionNum || "0" }}
+                  </div>
                 </div>
-                <div class="content_num">
-                  题量：{{ item?.questionNum || "0" }}
+                <div class="ai_explain" @click="OpenAi(item)">
+                  <img class="ai_icon" src="@/assets/icon_ai.png" />
+                  <span>AI讲解</span>
                 </div>
               </div>
-              <div class="ai_explain" @click="OpenAi(item)">
-                <img class="ai_icon" src="@/assets/icon_ai.png" />
-                <span>AI讲解</span>
-              </div>
             </div>
+            <div v-if="waitList.length==0" class="side_empty_text">暂无数据</div>
           </div>
-          <div v-if="waitList.length==0" class="side_empty_text">暂无数据</div>
         </div>
       </el-aside>
       <el-main class="main_body">
@@ -183,6 +192,8 @@ export default {
   inject: ['openAiRobot'],//注入Ai机器人组件调用方法
   data() {
     return {
+      radio_type: '', //tab类型
+      allWaitList: [], //所有待练习知识点
       waitList: [], //待练习知识点
       exerciseId: "", // 练习id
       knowledgeName: "", //知识点名称
@@ -254,25 +265,27 @@ export default {
 
     //待练习知识点
     GetStudentTargeWaitExercise() {
-      this.$api.target
-        .studentTargeWaitExercise({
-          levelCode: this.levelCode, // 学段code
-          subjectCode: this.subjectCode, //学科code
-        })
-        .then((res) => {
-          if (res.code == 200) {
-            this.waitList = res?.data || [];
-            if (this.waitList.length > 0) {
-              this.exerciseId = this.waitList?.[0]?.exerciseId || "";
-              this.knowledgeName = this.waitList?.[0]?.knowledgeName || "";
-              this.GetStudentTargeExerciseQuestion();
-            }else{
-              this.exerciseId = "";
-              this.knowledgeName = "";
-              this.questionList = [];
-            }
-          }
-        });
+      this.$api.target.studentTargeWaitExercise({
+        levelCode: this.levelCode, // 学段code
+        subjectCode: this.subjectCode, //学科code
+      }).then((res) => {
+        if (res.code == 200) {
+          this.allWaitList = res?.data || [];
+          this.waitList = res?.data || [];
+          this.GetStuQuestion();
+        }
+      });
+    },
+    GetStuQuestion(){
+      if (this.waitList.length > 0) {
+        this.exerciseId = this.waitList?.[0]?.exerciseId || "";
+        this.knowledgeName = this.waitList?.[0]?.knowledgeName || "";
+        this.GetStudentTargeExerciseQuestion();
+      }else{
+        this.exerciseId = "";
+        this.knowledgeName = "";
+        this.questionList = [];
+      }
     },
     // 查询试题列表（type 1待练习的列表 2已练习的列表）
     GetStudentTargeExerciseQuestion() {
@@ -308,6 +321,19 @@ export default {
           }
         });
     },
+    ChangeTab(type){
+      this.radio_type = type;
+      if(type == ""){
+        this.waitList = this.allWaitList;
+      }else{
+        this.waitList = this.allWaitList.filter(item => item.exerciseType == type);//练习类型 1自主练习 2指定练习
+      }
+      this.$refs.scrollBox.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+      this.GetStuQuestion();//切换知识点
+    },
     //切换知识点
     ChangeKnowledge(item) {
       if (this.exerciseId == item.exerciseId) {
@@ -437,6 +463,7 @@ export default {
   }
   .side_list {
     width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
     background-color: #ffffff;
@@ -444,12 +471,42 @@ export default {
     padding: 16px 10px 14px;
     box-sizing: border-box;
 
-    .side_title {
-      font-weight: 550;
-      font-size: 16px;
-      color: #333333;
+    .side_header{
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      width: 100%;
+      .side_title {
+        font-weight: 550;
+        font-size: 16px;
+        color: #333333;
+      }
+      .side_tab{
+        :deep(.el-radio-button){
+          .el-radio-button__inner{
+            padding: 10px;
+            width: 100%;
+            border:1px solid #BBBBBB;
+            border-left:0;
+            font-weight: 400;
+            font-size: 14px;
+            color: #BBBBBB;
+          }
+          .el-radio-button__orig-radio:checked + .el-radio-button__inner{
+            color: #FFFFFF;
+            background-color: #2E64FA;
+            border-color: #2E64FA;
+          }
+          &:first-child .el-radio-button__inner{
+            border-left: 1px solid #BBBBBB !important;
+          }
+        }
+      }
     }
-
+    .side_list_content{
+      flex: 1;
+      overflow: auto;
+    } 
     .side_item {
       margin-top: 16px;
       background-color: #ffffff;