完善查看练习结果页面样式交互，添加接口调用

src/http/api/target.js

@@ -8,6 +8,14 @@ const targetImprove = {
     return get( base.prefix+ `/api/v1/studentTarge/target_top`, data)
   },
 
+  
+
+  // 查看练习结果 列表
+  getTargetExerciseResult(data){
+    return post( base.prefix+ `/api/v1/studentTarge/exercise_result`, data)
+  },
+
+  
   //获取学生端错题本筛选信息接口
   getTargetErrorTopData(data) {
     return get( base.prefix+ `/api/v1/studentError/error_top`, data)

src/store/modules/target.js

@@ -2,7 +2,7 @@
 let state = {
   subjectList:JSON.parse(localStorage.getItem('student_subjectList') || '[]'),//顶部筛选的科目列表
   subjectCode:'',//顶部筛选的科目
-  
+  levelCode:localStorage.getItem('level_code'),  //当前学段  
 };
 // 同步
 let mutations = {
@@ -17,8 +17,11 @@ let mutations = {
     // 存入本地存储
     localStorage.setItem('student_subjectList', JSON.stringify(list))
   },
-
-
+  // 设置当前学段，同时本地存储
+  SetLevelCode(state,code){
+    state.levelCode = code
+    localStorage.setItem('level_code', code)
+  }
 };
 // 异步
 let actions = {

src/views/targetImprove/components/FiltersItem_ruoyan.vue

@@ -0,0 +1,127 @@
+<template>
+    <div class="filters_group">
+        <div v-for="(filterItem, index) in filtersData" :key="index">
+            <div class="tag_group" v-if="filterItem.list.length > 0">
+                <div class="tag_group_title">{{ filterItem.name }}：</div>
+                <div class="tag_group_content">
+                    <template v-for="item in filterItem.list">
+                        <div class="tag_item" @click="selectItem(index, item.value, filterItem)"
+                            :class="item.value == filterItem.value ? 'active' : ''">
+                            {{ item.label }}
+                        </div>
+                    </template>
+                    <slot :name="'rowItem-'+filterItem.key"></slot>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+/*
+interface filtersData {
+    key:String,
+    name: String,
+    value: String, // 默认选中项
+    list: { label: String, value: String }[],
+}[]
+*/
+export default {
+    props: {
+        filtersData: {
+            type: Array,
+            default: () => []
+        },//筛选公共组件数据
+    },
+    data() {
+        return {
+        }
+    },
+    mounted() {
+    },
+    methods: {
+
+        //筛选点击事件
+        selectItem(index, val, item) {
+            if (this.filtersData[index].value == val) return;
+            let d = { index, value: val }
+            this.$emit('selectItem', d, item)
+        },
+
+        // showTable(item) {
+        //     const showTotalScore = this.$store.state.report.showTotalScore
+
+        //     // isTotal：是否总分 0-不是 1-是
+        //     // subjectGroupType：学科分组类型 0-不分组 1-分组
+        //     const { isTotal, subjectGroupType } = item
+
+        //     //  当 isTotal 为 1 或 subjectGroupType 为 1 且 showTotalScore 为 false 的时候隐藏总分
+        //     if ((isTotal === 1 || subjectGroupType === 1) && !showTotalScore) {
+        //         return false
+        //     } else {
+        //         return true
+        //     }
+        // }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.filters_group {
+    background: #fff;
+
+    .tag_group {
+        padding: 8px 0;
+        display: flex;
+        justify-content: flex-start;
+
+        .tag_group_title {
+            // width: 70px;
+            width: auto;
+            height: auto;
+            margin-right: 8px;
+            color: #333333;
+            font-size: 14px;
+            text-align: left;
+            line-height: 30px;
+            font-weight: 600;
+            letter-spacing: 0em;
+        }
+
+        .tag_group_content {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+
+            > * {
+                height: 30px !important;
+                ::v-deep > *{
+                    display: flex;
+                    align-items: center;
+                }
+            }
+            .tag_item {
+                padding: 0 8px;
+                line-height: 30px;
+                border-radius: 2px;
+                font-size: 14px;
+                background: #fff;
+                color: #999999;
+
+                cursor: pointer;
+
+                &.active {
+                    // background: #2E64FA;
+                    // color:white;
+                    background: rgba(71, 113, 203, 0.1);
+                    color: #2E64FA;
+                }
+
+                &:hover {
+                    color: #2E64FA;
+                }
+            }
+        }
+
+
+    }
+}
+</style>

src/views/targetImprove/components/Table.vue

@@ -128,6 +128,7 @@ export default {
 
 <style lang="scss" scoped>
 .page_table {
+  flex-shrink: 0;
   overflow: auto;
   display: flex;
   flex-direction: column;

src/views/targetImprove/components/TargetSubject.vue

@@ -58,6 +58,8 @@ export default {
                     });
                     this.$store.commit('target/SetSubjectList', list)
                     this.filtersData[0].list = list;
+                    this.$store.commit('target/SetLevelCode',res.data.levelCode)
+                    this.$store.commit('target/SetFilterSubjectCode', '1')  //目前同filtersData[0]的默认value一样是静态的
                 }
             });
         }

src/views/targetImprove/practice/practiceResults.vue

@@ -1,6 +1,6 @@
 <!-- 自主练习——查看练习结果 -->
 <template>
-    <div class="target_item">
+    <div class="practice_result">
         <div class="page_search">
             <div class="search_content">
                 <div class="content_left">
@@ -9,11 +9,25 @@
             </div>
         </div>
 
-        <FiltersItem :filtersData="filtersData"  @selectItem="ChangeFilters"/>
+        <FiltersItem :filtersData="filtersData"  @selectItem="ChangeFilters">
+            <template #rowItem-time>
+                <el-date-picker
+                    v-if="filtersData[0].value == 'custom'"
+                    style="height: 28px;flex-grow: 0;width: 225px;"
+                    v-model="startAndEndTime"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    size="default"
+                />
+            </template>
+        </FiltersItem>
       
         <Table class="practice_table" 
             :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum"
-            :tableData="tableData"  :tableColumns="tableColumns">
+            :tableData="tableData"  :tableColumns="tableColumns" 
+            @paginationChange="HandlePaginationChange">
             <template v-slot:gradingStatus="{row}">
                 <TableRowStatus :useStatus="row.gradingStatus"
                     :statusMsg="[
@@ -35,6 +49,10 @@
                     ]">
                 </TableRowStatus>
             </template>
+            <template v-slot:improvement="{row}">
+                <img width="16px" height="16px" style="margin-right: 2px;" :src="row.improvement.type == 'up' ? upIcon : (row.improvement.type == 'down' ? downIcon : '')" alt="" />
+               {{ row.improvement.value }}
+            </template>
             <template v-slot:action="{row}">
                 <div class="table_row_operation">
                     <el-button type="text" @click="viewDetails(scope.row)">查看</el-button>
@@ -46,9 +64,21 @@
 </template>
 
 <script>
-import FiltersItem from "@/components/FiltersItem_ruoyan.vue"//筛选组件
+import dayjs from 'dayjs';
+// 1. 引入 isoWeek 插件
+import isoWeek from 'dayjs/plugin/isoWeek';
+
+import FiltersItem from "../components/FiltersItem_ruoyan.vue"//筛选组件
 import Table from "../components/Table.vue";
 import TableRowStatus from "../components/TableRowStatus.vue";
+
+import upIcon from '@/assets/arrow-up.png'
+import downIcon from '@/assets/arrow-down.png'
+
+// 2. 全局扩展插件（只需调用一次即可）
+dayjs.extend(isoWeek);
+
+
 export default ({
     components: {
         FiltersItem,
@@ -57,6 +87,8 @@ export default ({
     },
     data(){
         return {
+            upIcon:upIcon,
+            downIcon:downIcon,
             currentPage:1,
             pageSize:20,
             totalNum:0,
@@ -139,7 +171,6 @@ export default ({
                     practiceType: '指定练习',
                     knowledgeName: '一般词语',
                     questionCount: 3,
-                    // 状态对象，方便 custom 插槽渲染绿点和文字
                     gradingStatus: 0,
                     preScoreRate: '64.37%',
                     postScoreRate: '54.38%',
@@ -169,8 +200,9 @@ export default ({
             ],
             filtersData: [
                 {
+                    key:'time',
                     name: '时间',
-                    value: 'all', // 默认选中项
+                    value: 'custom', // 默认选中项
                     list: [
                         { label: '全部', value: 'all' },
                         { label: '本周', value: 'this_week' },
@@ -180,15 +212,17 @@ export default ({
                     ]
                 },
                 {
+                    key:'type',
                     name: '类型',
                     value: 'all', // 默认选中项
                     list: [
                         { label: '全部', value: 'all' },
-                        { label: '指定练习', value: 'assigned_practice' },
-                        { label: '自主练习', value: 'self_practice' }
+                        { label: '指定练习', value: '2' },
+                        { label: '自主练习', value: '1' }
                     ]
                 }
-            ]
+            ],
+            startAndEndTime:undefined,
         }
     },
     methods: {
@@ -197,9 +231,73 @@ export default ({
             // console.log('当前选中的信息',e)
             this.filtersData[e.index].value = e.value;
         },
+        // 处理表格分页变化
+        HandlePaginationChange(params){
+            const {type, val} = params
+            if(type == 'currentPage'){
+                this.currentPage = val
+            }else if(type == 'pageSize'){
+                this.pageSize = val
+            }
+        },
+        // 获取本周一（本周起始日）的 00:00:00
+        getCurrentWeekStart(){
+            return  dayjs().startOf('isoWeek').format("YYYY-MM-DD HH:mm:ss");
+        }, 
+        // 获取一个月前的时间
+        getOneMonthAgo(){
+            return dayjs().subtract(1, 'month').format("YYYY-MM-DD HH:mm:ss");
+        },
+        // 获取三个月前的时间
+        getThreeMonthsAgo(){
+            return dayjs().subtract(3, 'month').format("YYYY-MM-DD HH:mm:ss");
+        },
+
+        // 获取练习结果列表 _接口传参 ———— 待完善
+        GetTargetExerciseResult(){
+            let startDate = ''
+            let endDate = ''
+            switch(this.filtersData[0].value){
+                case 'all':
+                    startDate = ''
+                    endDate = ''
+                    break
+                case 'this_week':
+                    startDate = this.getCurrentWeekStart()
+                    endDate = dayjs().format("YYYY-MM-DD HH:mm:ss")
+                    break
+                case 'last_1_month':
+                    startDate = this.getOneMonthAgo()
+                    endDate = dayjs().format("YYYY-MM-DD HH:mm:ss")
+                    break
+                case 'last_3_months':
+                    startDate = this.getThreeMonthsAgo()
+                    endDate = dayjs().format("YYYY-MM-DD HH:mm:ss")
+                    break
+                case 'custom':
+                    startDate =  dayjs(this.startAndEndTime?.[0]).format("YYYY-MM-DD HH:mm:ss") 
+                    endDate = dayjs(this.startAndEndTime?.[1]).format("YYYY-MM-DD HH:mm:ss") 
+                    break
+            }
+            let prams = {
+                pageParam: {
+                    pageNum: this.currentPage,
+                    pageSize: this.pageSize,
+                },
+                beginAt: startDate,   //开始时间
+                endAt: endDate,      //结束时间
+                exerciseType: this.filtersData[1].value == 'all' ? '' : this.filtersData[1].value ,   // 练习类型0全部 1自主练习 2指定练习
+                levelCode: this.$store.state.target.levelCode,      // 学段code
+                subjectCode: this.$store.state.target.subjectCode     //学科code
+            }
+            this.$api.target.getTargetExerciseResult(prams).then(res=>{
+            })
+        },
      },
     computed:{},
-    mounted() {},
+    mounted() {
+        this.GetTargetExerciseResult();
+    },
 
 })
 
@@ -208,20 +306,35 @@ export default ({
 
 
 <style lang="scss" scoped>
+.practice_result{
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
 
-.page_search{
-    margin-bottom: 16px;
-}
-.practice_table{
-    margin-top: 2px;
-    ::v-deep .el-table {
-        thead{
-            height: 40px !important;
-        }
-        .el-table__cell {
-            height: 40px;
+    width: 100%;
+    height: calc(100% - 60px - 88px );
+    box-sizing: border-box;
+    background-color: #fff;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    padding: 10px;
+
+    > *:last-child{
+        flex-grow: 1;
+    }
+    .page_search{
+        margin-bottom: 16px;
+    }
+    .practice_table{
+        margin-top: 2px;
+        ::v-deep .el-table {
+            thead{
+                height: 40px !important;
+            }
+            .el-table__cell {
+                height: 40px;
+            }
         }
     }
 }
-
 </style>