marking-cet-web/src/modules/marking/training-record/index.vue

<template>
  <div class="flex direction-column full">
    <mark-header
      :exclude-operations="['remark', 'problem', 'example', 'delete', 'bookmark']"
      :paper-path="current?.url"
      :secret-number="current?.secretNumber"
      @click="onOperationClick"
    ></mark-header>
    <div class="flex flex-1 overflow-hidden p-base mark-container">
      <splitpanes class="default-theme" style="height: 100%" @resize="setPaneSize">
        <pane
          max-size="80"
          :size="paneSize"
          class="flex flex-1 direction-column radius-base fill-blank mark-content"
          :class="{ 'text-center': center }"
          :style="{ 'background-color': backgroundColor }"
        >
          <!-- <right-button class="next-button" @click="checkNext" /> -->
          <div class="flex-1 p-base scroll-auto mark-content-paper img-wrap relative">
            <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
            <p v-if="current" class="absolute mark-score">{{ current?.markScore }}</p>
          </div>
        </pane>
        <pane max-size="80" :size="100 - paneSize" class="p-base radius-base fill-blank scroll-auto table-view">
          <base-table
            ref="tableRef"
            border
            stripe
            size="small"
            height="100%"
            :data="tableData"
            :columns="columns"
            highlight-current-row
            :cell-style="{ padding: '6px 0' }"
            :memory-column="true"
            @current-change="onCurrentChange"
            @row-dblclick="onDbClick"
          ></base-table>
        </pane>
      </splitpanes>
    </div>
  </div>
  <mark-history-list
    :id="currentViewHistory?.taskId"
    v-model="visibleHistory"
    :task="currentViewHistory"
    :number="current?.number"
  ></mark-history-list>
</template>

<script setup lang="ts" name="MarkingTrainingRecord">
/** 查看培训记录 */
import { computed } from 'vue'
import { useSetImgBg } from '@/hooks/useSetImgBg'
import useFetch from '@/hooks/useFetch'
import useMarkHeader from '@/hooks/useMarkHeader'
import useTableCheck from '@/hooks/useTableCheck'
import MarkHeader from '@/components/shared/MarkHeader.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import MarkHistoryList from '@/components/shared/MarkHistoryList.vue'
import RightButton from '@/components/shared/RightButton.vue'

import type { SetImgBgOption } from '@/hooks/useSetImgBg'
import type { ExtractApiResponse } from '@/api/api'
import type { MarkHeaderInstance, EpTableColumn } from 'global-type'
import { Splitpanes, Pane } from 'splitpanes'
import { setPaneSize } from '@/utils/common'
import useMainStore from '@/store/main'
const mainStore = useMainStore()
const paneSize = computed(() => {
  return mainStore.paneSizeConfig[location.pathname] || 60
})
type RowType = ExtractArrayValue<ExtractApiResponse<'viewTrainingRecord'>> & { index: number }

const {
  rotate,
  scale,
  center,
  frontColor,
  backgroundColor,
  onBack,
  onScaleChange,
  onCenter,
  onRotate,
  setBackgroundColor,
  setFrontColor,
  onViewStandard,
} = useMarkHeader()

/** 刷新 */
const onRefresh = () => {
  viewTrainingRecord()
}

type OperationClick = MarkHeaderInstance['onClick']

type OperationType = Parameters<Exclude<OperationClick, undefined>>[0]['type']

const operationHandles: Partial<Record<OperationType, (...args: any) => void>> = {
  back: onBack,
  'scale-change': onScaleChange,
  center: onCenter,
  rotate: onRotate,
  'front-color': setFrontColor,
  'background-color': setBackgroundColor,
  refresh: onRefresh,
  standard: onViewStandard,
}

const onOperationClick: OperationClick = ({ type, value }) => {
  operationHandles[type]?.(value)
}

/** 查询培训记录 */

const taskTypeMap: Record<string, string> = {
  SAMPLE_A: 'A',
  SAMPLE_B: 'B',
}

const columns: EpTableColumn<RowType>[] = [
  // { label: '密号', prop: 'secretNumber' },
  { label: '序号', minWidth: 40, prop: 'number' },
  { label: '分数', prop: 'markScore' },
  { label: '标准分', prop: 'score' },
  {
    label: '分组',
    prop: 'taskType',
    formatter(row) {
      return row.taskType ? taskTypeMap[row.taskType] || '-' : '-'
    },
  },
]
//该接口貌似是返回全量，不需要pageSize
const { fetch: viewTrainingRecord, result: trainingRecordList } = useFetch('viewTrainingRecord')

const {
  tableRef,
  tableData,
  current,
  currentView: currentViewHistory,
  next: checkNext,
  visibleHistory,
  onDbClick,
  onCurrentChange,
} = useTableCheck(trainingRecordList)

viewTrainingRecord()

const imgOption = computed<SetImgBgOption>(() => {
  return {
    image: current?.value?.url,
    rotate: rotate.value,
    scale: scale.value,
  }
})

const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
</script>

<style scoped lang="scss">
.mark-container {
  .mark-content {
    position: relative;
    .preview {
      position: absolute;
      cursor: pointer;
      top: 20px;
      right: 25px;
      font-size: 38px;
    }
    .next-button {
      position: absolute;
      right: -20px;
      top: 300px;
    }
    .mark-content-paper {
      img {
        max-width: 100%;
      }
    }
  }
  .table-view {
    // width: 580px;
  }
}
</style>