marking-cet-web/src/modules/marking/statistics/index.vue

<template>
  <div class="flex direction-column full">
    <div class="p-t-base p-l-base fill-blank">
      <base-form :items="items" :model="model" :label-width="useVW(66)" size="small">
        <template #form-item-button>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </template>
      </base-form>
    </div>
    <div class="flex-1 p-base">
      <div class="p-base fill-blank radius-base">
        <base-table size="small" :data="tableData" :columns="columns"></base-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="MarkingStatistics">
/** 个人统计 */
import { reactive, computed } from 'vue'
import { ElButton } from 'element-plus'
import BaseForm from '@/components/element/BaseForm.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import useVW from '@/hooks/useVW'
import useForm from '@/hooks/useForm'
import useFetch from '@/hooks/useFetch'
import useMainStore from '@/store/main'

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

const mainStore = useMainStore()

const model = reactive({
  time: [],
})

const { defineColumn, _ } = useForm()

const OneRowSpan7 = defineColumn(_, 'row-1', { span: 7 })

const items: EpFormItem[] = [
  OneRowSpan7({
    label: '时间',
    prop: 'time',
    slotType: 'dateTime',
    slot: {
      clearable: true,
      type: 'datetimerange',
      valueFormat: 'YYYYMMDDHHmmss',
      startPlaceholder: '开始时间',
      endPlaceholder: '结束时间',
    },
  }),
  OneRowSpan7({
    slotName: 'button',
  }),
]

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

const columns: EpTableColumn<ExtractApiResponse<'getPersonalStatistic'>>[] = [
  { label: '评卷员', prop: 'markerName' },
  { label: '大题名称', prop: 'questionMainName' },
  { label: '正评量', prop: 'markingPaperCount' },
  { label: '速度', prop: 'markingRate' },
  { label: '平均分', prop: 'avg' },
]

const tableData = computed<ExtractApiResponse<'getPersonalStatistic'>[]>(() => {
  return result?.value ? [result.value] : []
})

const onSearch = () => {
  getPersonalStatistic({ startTime: model.time[0], endTime: model.time[1], markerId: mainStore.myUserInfo?.id })
}

onSearch()
</script>

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