回评列表改造

src/modules/marking/mark/index.vue

@@ -23,11 +23,11 @@
         <current-time></current-time>
       </div>
     </mark-header>
-    <div class="flex-1 overflow-hidden mark-container">
+    <div class="flex flex-1 overflow-hidden p-base mark-container">
       <div v-if="!enableRemark && !currentTask" class="waiting flex justify-center items-center">等待组长审核</div>
       <div
         v-else-if="!!currentTask"
-        class="p-base radius-base full fill-blank scroll-auto mark-content"
+        class="flex flex-1 direction-column radius-base full fill-blank mark-content"
         :style="{ 'background-color': backgroundColor }"
       >
         <span class="mark-status">
@@ -36,7 +36,7 @@
         <span class="preview" :style="{ left: previewLeft }" @click="onPreview">
           <svg-icon name="preview"></svg-icon>
         </span>
-        <div ref="imgWrap" :class="{ 'text-center': center }" class="img-wrap scroll-auto">
+        <!-- <div ref="imgWrap" :class="{ 'text-center': center }" class="img-wrap scroll-auto">
           <img
             ref="paperImg"
             :src="dataUrl"
@@ -45,19 +45,35 @@
             :style="{ 'background-color': frontColor }"
             @load="imgLoaded"
           />
+        </div> -->
+        <div ref="imgWrap" class="img-wrap scroll-auto flex-1 p-base">
+          <img
+            ref="paperImg"
+            :src="dataUrl"
+            alt=""
+            class="paper-img"
+            :style="{ 'background-color': frontColor, maxWidth: '100%' }"
+            @load="imgLoaded"
+          />
         </div>
+        <scoring-panel-with-confirm
+          v-if="currentTask"
+          :id="currentTask?.taskId"
+          v-model:visible="scoringPanelVisible"
+          v-model:score="modelScore"
+          :main-number="currentTask?.mainNumber"
+          :subject-code="mainStore.myUserInfo?.subjectCode"
+          :large="true"
+          @submit="onSubmit"
+        ></scoring-panel-with-confirm>
       </div>
+      <remark-box
+        v-model="remarkModalVisible"
+        @task-change="historyTaskChange"
+        @back="historyBack"
+        @close="historyClose"
+      ></remark-box>
     </div>
-    <scoring-panel-with-confirm
-      v-if="currentTask"
-      :id="currentTask?.taskId"
-      v-model:visible="scoringPanelVisible"
-      v-model:score="modelScore"
-      :main-number="currentTask?.mainNumber"
-      :subject-code="mainStore.myUserInfo?.subjectCode"
-      :large="true"
-      @submit="onSubmit"
-    ></scoring-panel-with-confirm>
   </div>
   <base-dialog v-model="problemVisible" unless :width="280" center>
     <el-radio-group v-model="problemClass">
@@ -84,7 +100,7 @@
       </div>
     </template>
   </base-dialog>
-  <remark-list-modal v-model="remarkModalVisible" @task-change="historyTaskChange"></remark-list-modal>
+  <!-- <remark-list-modal v-model="remarkModalVisible" @task-change="historyTaskChange"></remark-list-modal> -->
   <!-- <image-preview v-if="currentTask" v-model="previewModalVisible" :url="currentTask?.url"></image-preview> -->
   <image-preview v-if="currentTask" v-model="previewModalVisible" :url="currentTask?.url"></image-preview>
 </template>
@@ -114,7 +130,7 @@ import MarkingStatus from '@/assets/images/status-marking.png'
 import ReMarkingStatus from '@/assets/images/status-remarking.png'
 import SampleAStatus from '@/assets/images/status-sample-a.png'
 import SampleBStatus from '@/assets/images/status-sample-b.png'
-
+import RemarkBox from './remark-box.vue'
 import type { SetImgBgOption } from '@/hooks/useSetImgBg'
 import type { ExtractApiResponse } from '@/api/api'
 import type { MarkHeaderInstance } from 'global-type'
@@ -194,7 +210,13 @@ const historyTaskChange = (task: any) => {
     modelScore.value = task.markerScores
   })
 }
-
+const historyBack = () => {
+  setCurrentTask()
+  remarkModalVisible.value = false
+}
+const historyClose = () => {
+  remarkModalVisible.value = false
+}
 const setCurrentTask = () => {
   currentTask.value = currentTaskPool.shift()
   currentTaskType.value =
@@ -571,6 +593,7 @@ const imgLoaded = () => {
     }
   }
 }
+
 .mark-container {
   .waiting {
     background-color: #fff;
@@ -581,8 +604,8 @@ const imgLoaded = () => {
   .mark-content {
     position: relative;
     .img-wrap {
-      width: 100%;
+      // width: 100%;
-      height: 100%;
+      // height: 100%;
       // overflow: auto;
     }
     .mark-status {

src/modules/marking/mark/remark-box.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="remark-container" :class="{ 'hidden-width': !visible }">
+    <div class="p-l-base" style="height: 100%">
+      <div class="flex-1 remark-box radius-base flex direction-column p-base">
+        <div class="p-b-base">
+          <el-button v-if="task" type="primary" size="small" @click="back">返回正评</el-button>
+          <el-button v-else type="primary" size="small" @click="close">关闭</el-button>
+        </div>
+        <div class="flex-1 scroll-auto p-t-base">
+          <base-table
+            v-if="viewType === 'list'"
+            ref="historyTable"
+            border
+            stripe
+            size="small"
+            :columns="tableColumns"
+            :data="markHistoryList"
+            highlight-current-row
+            @current-change="onCurrentChange"
+          ></base-table>
+          <div v-else class="flex flex-wrap preview-list">
+            <div
+              v-for="markHistory in markHistoryList"
+              :key="markHistory.taskId"
+              class="m-l-mini preview-item"
+              :class="{ current: task?.taskId === markHistory.taskId }"
+              @click="onCurrentChange(markHistory)"
+            >
+              <img :src="markHistory.url" alt="" />
+              <div class="text-center">{{ markHistory.markScore }}分</div>
+            </div>
+          </div>
+        </div>
+        <div class="flex items-center justify-around m-t-base" style="border-top: 1px solid #ddd">
+          <el-radio-group v-model="viewType">
+            <el-radio label="list">列表</el-radio>
+            <el-radio label="preview">缩略图</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script name="RemarkBox" setup lang="ts">
+import { reactive, ref, watch, nextTick } from 'vue'
+import { ElRadioGroup, ElRadio, ElButton } from 'element-plus'
+import ConfirmButton from '../../../components/common/ConfirmButton.vue'
+import useFetch from '@/hooks/useFetch'
+import useVModel from '@/hooks/useVModel'
+import BaseTable from '@/components/element/BaseTable.vue'
+const markHistoryList = ref<any>([])
+const historyTable = ref()
+const getMarkHistory = async () => {
+  let res = await useFetch('getMarkHistory').fetch()
+  markHistoryList.value = res.markHistoryList
+}
+const props = defineProps<{ modelValue: boolean }>()
+const emits = defineEmits<{
+  (e: 'task-change', data: any): void
+  (e: 'update:modeValue', visible: boolean): void
+  (e: 'back'): void
+  (e: 'close'): void
+}>()
+const tableColumns: any = [
+  { label: '密号', prop: 'secretNumber' },
+  { label: '分数', prop: 'markScore' },
+  { label: '时间', prop: 'markTime' },
+  // { label: '试卷类型', prop: 'taskType' },
+]
+const visible = useVModel(props)
+const viewType = ref<'list' | 'preview'>('list')
+watch(viewType, () => {
+  nextTick(() => {
+    console.log('historyTable', historyTable.value)
+    if (task.value) {
+      historyTable.value?.tableRef?.setCurrentRow(task.value)
+    }
+  })
+})
+watch(visible, () => {
+  if (visible.value) {
+    getMarkHistory()
+  }
+})
+const task = ref<any>()
+
+const onConfirm = () => {
+  if (task.value) {
+    emits('task-change', task.value)
+    // visible.value = false
+  }
+}
+const onCurrentChange = (row: any) => {
+  task.value = row
+  onConfirm()
+}
+const back = () => {
+  emits('back')
+}
+const close = () => {
+  emits('close')
+}
+</script>
+<style lang="scss" scoped>
+.remark-container {
+  width: 570px;
+  height: 100%;
+  transition: all 0.3s;
+  overflow: hidden;
+  &.hidden-width {
+    width: 0;
+  }
+  .remark-box {
+    height: 100%;
+    background-color: #fff;
+  }
+
+  .preview-list {
+    // overflow: auto;
+    .preview-item {
+      width: 32%;
+      border: 1px solid;
+      border-color: transparent;
+      margin-bottom: 8px;
+      text-align: center;
+      border-radius: 6px;
+      padding: 6px;
+      &.current {
+        // border-color: $color--primary;
+        box-shadow: 0 0 4px $color--primary;
+      }
+      img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+}
+</style>