marking-cet-web/src/components/shared/MarkHistoryList.vue

<template>
  <scoring-panel-container
    v-model="visible"
    :modal="false"
    draggable
    class="mark-history-list"
    :title="`给分记录（ ${number ? number : task.secretNumber} ）`"
    width="600px"
  >
    <template #default>
      <slot :data="tableData">
        <base-table
          :style="props.height ? { height: props.height } : {}"
          border
          stripe
          highlight-current-row
          size="small"
          :data="tableData"
          :columns="columns"
        ></base-table>
      </slot>
    </template>
  </scoring-panel-container>
</template>

<script setup lang="ts" name="MarkHistoryList">
/** 给分记录 */
import { computed, withDefaults, watch, defineComponent, useSlots } from 'vue'
import BaseDialog from '@/components/element/BaseDialog.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import useVModel from '@/hooks/useVModel'
import useFetch from '@/hooks/useFetch'

import type { ExtractApiResponse } from '@/api/api'
import type { EpTableColumn } from 'global-type'

const props = withDefaults(
  defineProps<{
    modelValue?: boolean
    id: number | string | undefined
    modal?: boolean
    showLevel?: boolean
    task: any
    height?: string
    number?: number | null
  }>(),
  {
    modelValue: true,
    modal: true,
    showLevel: false,
    task: {},
    height: '',
    number: 0,
  }
)

const visible = useVModel(props, 'modelValue')

const LessRenderComponent = defineComponent({
  name: 'LessRender',
  inheritAttrs: false,
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
  },
  render() {
    return this.modelValue ? useSlots()?.default?.() : null
  },
})

const ScoringPanelContainer = computed(() => {
  return props.modal ? BaseDialog : LessRenderComponent
})

const { fetch: getMarkScoreHistoryListWithTask, result: scoreHistoryList } = useFetch('getMarkScoreHistoryListWithTask')

watch(
  () => props.id,
  () => {
    if (props.id) {
      getMarkScoreHistoryListWithTask({ taskId: props.id })
    }
  },
  { immediate: true }
)

const tableData = computed(() => {
  return scoreHistoryList.value
})

const columns = computed<EpTableColumn<ExtractArrayValue<ExtractApiResponse<'getMarkScoreHistoryListWithTask'>>>[]>(
  () => [
    { label: '评卷员', prop: 'markerName', fixed: 'left' },
    {
      label: `分数${props.showLevel ? '(档次)' : ''}`,
      prop: 'markScore',
      width: 48,
      formatter(row) {
        return `${row.markScore === null ? '' : row.markScore}${props.showLevel ? `(${row.scoreLevel})` : ''}`
      },
    },
    { label: '类型', prop: 'historyType' },
    { label: '评卷时间', prop: 'markTime', width: 130 },
  ]
)
</script>

<style scoped lang="scss"></style>