查看练习题用户答题记录增加排序

src/views/home/recovery/AnswerData.vue

@@ -57,9 +57,9 @@
         {{ label }}
       </li>
     </ul>
-
+    <!-- 按题统计 -->
     <template v-if="curStatisticsType === statisticsList[0].value">
-      <el-table :data="question_user_answer_stat_list" height="100%">
+      <el-table :data="question_user_answer_stat_list" height="100%" @sort-change="sortChange">
         <el-table-column prop="index" label="题号" width="70">
           <template slot-scope="{ row }">{{ row.question_number }}</template>
         </el-table-column>
@@ -96,7 +96,7 @@
             <span v-else>{{ row.answer_error_person_count }} </span>
           </template>
         </el-table-column>
-        <el-table-column label="正确率">
+        <el-table-column label="正确率" sortable="custom" prop="right_percent">
           <template slot-scope="{ row }">
             {{ row.right_percent }}% ({{ row.answer_right_person_count }}/{{ row.answer_person_count }})</template
           >
@@ -111,14 +111,32 @@
       </el-table>
     </template>
 
+    <!-- 按人统计 -->
     <template v-else-if="curStatisticsType === statisticsList[1].value">
-      <el-table :data="answer_record_list" height="100%">
+      <el-table
+        :data="answer_record_list"
+        height="100%"
+        :header-cell-class-name="handleHeaderClass"
+        @sort-change="sortChangePerson"
+      >
         <el-table-column prop="index" label="序号" width="70">
           <template slot-scope="{ $index }">{{ $index + 1 }}</template>
         </el-table-column>
         <el-table-column prop="user_real_name" label="用户" width="280" />
-        <el-table-column prop="finish_time" label="完成时间" width="180" />
-        <el-table-column prop="answer_duration" label="耗时" width="180">
+        <el-table-column
+          prop="finish_time"
+          label="完成时间"
+          width="180"
+          sortable="custom"
+          :sort-orders="['ascending', 'descending', null]"
+        />
+        <el-table-column
+          prop="answer_duration"
+          label="耗时"
+          width="180"
+          sortable="custom"
+          :sort-orders="['ascending', 'descending', null]"
+        >
           <template slot-scope="{ row }">
             <span>{{ row.finish_time ? secondFormatConversion(row.answer_duration, 'chinese') : '' }}</span>
           </template>
@@ -133,7 +151,12 @@
             <span>{{ row.finish_time ? row.error_count : '' }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="正确率">
+        <el-table-column
+          label="正确率"
+          sortable="custom"
+          :sort-orders="['ascending', 'descending', null]"
+          prop="right_percent"
+        >
           <template slot-scope="{ row }">
             <span>{{ row.finish_time ? row.right_percent + '%' : '' }}</span>
           </template>
@@ -190,9 +213,11 @@ export default {
       ],
       // 题目用户答题统计列表
       question_user_answer_stat_list: [],
+      order_column_list: [], // 排序列
     };
   },
   computed: {
+    // 平均耗时
     avgTime() {
       let duration = this.sum_info.avg_answer_duration;
       let hour = Math.floor(duration / 3600);
@@ -201,6 +226,12 @@ export default {
 
       return { hour, minute, second };
     },
+    sort() {
+      return this.order_column_list.map((item) => {
+        const [prop, order] = item.split(':');
+        return { prop, order: order === 'desc' ? 'descending' : 'ascending' };
+      });
+    },
   },
   created() {
     this.getExerciseQuestionUserAnswerStatList();
@@ -241,7 +272,7 @@ export default {
       });
     },
     pageQueryExerciseUserAnswerRecordList(data) {
-      PageQueryExerciseUserAnswerRecordList({ ...data, ...this.searchData })
+      PageQueryExerciseUserAnswerRecordList({ ...data, ...this.searchData, order_column_list: this.order_column_list })
         .then(({ total_count, share_record_info, sum_info, answer_record_list }) => {
           this.answer_record_list = answer_record_list;
           this.total = total_count;
@@ -250,19 +281,30 @@ export default {
         })
         .catch(() => {});
     },
+    /**
+     * 按人统计表格排序修改事件
+     * @param {string} prop 列属性
+     * @param {string} order 排序方式
+     */
+    sortChangePerson({ prop, order }) {
+      this.changeOrderColumnList(prop, order);
+      this.getPageList();
+    },
+    /**
+     * 切换统计类型
+     * @param {string} value 统计类型
+     */
     changeStatistics(value) {
       this.curStatisticsType = value;
+      this.order_column_list = [];
       if (value === 'question') {
         this.getExerciseQuestionUserAnswerStatList();
-      } else {
-        this.$nextTick(() => {
-          this.getPageList();
-        });
       }
     },
     getExerciseQuestionUserAnswerStatList() {
       GetExerciseQuestionUserAnswerStatList({
         share_record_id: this.searchData.share_record_id,
+        order_column_list: this.order_column_list,
       }).then(({ share_record_info, sum_info, question_user_answer_stat_list }) => {
         this.question_user_answer_stat_list = question_user_answer_stat_list;
         this.share_record_info = share_record_info;
@@ -270,6 +312,45 @@ export default {
       });
     },
     /**
+     * 按题统计表格排序修改事件
+     * @param {string} prop 列名称
+     * @param {string} order 排序方式
+     */
+    sortChange({ prop, order }) {
+      this.changeOrderColumnList(prop, order);
+      this.getExerciseQuestionUserAnswerStatList();
+    },
+    /**
+     * 修改 order_column_list 排序列
+     * @param {string} prop 列名称
+     * @param {string} order 排序方式
+     */
+    changeOrderColumnList(prop, order) {
+      const findIndex = this.order_column_list.findIndex((item) => item.includes(prop));
+      if (order) {
+        const order_column = `${prop}${order === 'descending' ? ':desc' : ''}`;
+        if (findIndex === -1) {
+          this.order_column_list.push(order_column);
+        } else {
+          this.order_column_list.splice(findIndex, 1, order_column);
+        }
+      } else {
+        this.order_column_list = this.order_column_list.filter((item) => !item.includes(prop));
+      }
+    },
+    /**
+     * 处理表头样式，为表头添加排序样式
+     * @param {object} column 列对象
+     */
+    handleHeaderClass({ column }) {
+      const find = this.order_column_list.find((item) => item.includes(column.property));
+      if (!find) {
+        column.order = null;
+        return;
+      }
+      column.order = find.split(':')[1] === undefined ? 'ascending' : 'descending';
+    },
+    /**
      * 过滤 html，防止 xss 攻击
      * @param {string} html 需要过滤的html
      * @returns {string} 过滤后的html