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

<template>
  <scoring-panel-container v-model="visible" class="mark-history-list" title="给分记录">
    <template #default>
      <slot :data="tableData">
        <base-table 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-type'
import type { EpTableColumn } from 'global-type'

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

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')

const { fetch: getMarkScoreHistoryListWithSecret, result: scoreHistoryListWithSecret } = useFetch(
  'getMarkScoreHistoryListWithSecret'
)

watch(
  () => props.id,
  () => {
    if (props.id) {
      props.type === 'task'
        ? getMarkScoreHistoryListWithTask({ taskId: props.id })
        : getMarkScoreHistoryListWithSecret({ secretNumber: props.id })
    }
  },
  { immediate: true }
)

const tableData = computed(() => {
  return props.type === 'task' ? scoreHistoryList.value : scoreHistoryListWithSecret.value
})

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

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