marking-cet-web/src/modules/analysis/marking-progress/components/GroupProgress.vue

<template>
  <div class="p-base radius-base fill-blank">
    <base-form size="small" :items="items" :model="model">
      <template #form-item-operation>
        <el-button class="m-l-base" type="primary" @click="onSearch">查询</el-button>
        <el-button :loading="exportLoading" type="primary" custom-1 @click="onExport">导出</el-button>
        <el-button :loading="provinceExportLoading" custom-1 type="primary" @click="provinceExport"
          >省份进度导出</el-button
        >
      </template>
    </base-form>
    <base-table border stripe size="small" :columns="columns" :data="result"></base-table>
  </div>
</template>

<script setup lang="ts" name="GroupProgress">
/** 组员进度 */
import { reactive, ref, watch, computed } from 'vue'
import { ElButton } from 'element-plus'
import BaseForm from '@/components/element/BaseForm.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import useForm from '@/hooks/useForm'
import useFetch from '@/hooks/useFetch'
import useOptions from '@/hooks/useOptions'
import useVW from '@/hooks/useVW'

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

const { groupListWithAll, dataModel, changeModelValue, onOptionInit } = useOptions(['group'])

const model = reactive<ExtractApiParams<'getMarkProgressByMarker'>>({
  subjectCode: dataModel.subject || '',
  questionMainNumber: dataModel.question,
  markingGroupNumber: dataModel.group,
})

const { fetch, result } = useFetch('getMarkProgressByMarker')

const onSearch = () => {
  fetch({ ...model })
}

const { fetch: exportStatistics, loading: exportLoading } = useFetch('exportMarkProgressByMarker', 'get')
const { fetch: exportProvince, loading: provinceExportLoading } = useFetch('getProvinceProcess', 'get')

const onExport = () => {
  exportStatistics(model)
}
const provinceExport = () => {
  exportProvince({ subjectCode: model.subjectCode })
}

watch(dataModel, () => {
  model.subjectCode = dataModel.subject || ''
  model.questionMainNumber = dataModel.question
  model.markingGroupNumber = dataModel.group
})

onOptionInit(onSearch)

const { defineColumn, _ } = useForm()

const OneRow = defineColumn(_, 'row-1', { span: 5 })

const items = computed<EpFormItem[]>(() => [
  OneRow({
    label: '小组',
    slotType: 'select',
    prop: 'markingGroupNumber',
    slot: { options: groupListWithAll.value, onChange: changeModelValue('group') },
  }),
  OneRow({ slotName: 'operation' }),
])

const dateTimes = computed(() => {
  const times = result?.value?.reduce((total, cur) => {
    total.push(...cur.dayFinishCounts.map((v) => v.date))
    return total
  }, [] as string[])
  return [...new Set(times)]
})

type TableColumn = EpTableColumn<ExtractArrayValue<ExtractApiResponse<'getMarkProgressByMarker'>>>
const columns = computed<TableColumn[]>(() => {
  return [
    {
      label: '序号',
      type: 'index',
      width: 64,
      align: 'center',
      fixed: 'left',
      index(index) {
        return index < result?.value?.length - 1 ? index + 1 : (void 0 as unknown as number)
      },
    },
    { label: '评卷员', prop: 'markerName', align: 'center' },
    ...dateTimes.value.map((d) => {
      return {
        label: d,
        align: 'center',
        formatter(row) {
          return row.dayFinishCounts.find((v) => v.date === d)?.count ?? ''
        },
        width: 300,
        sortable: true,
      } as TableColumn
    }),
    { label: '合计', prop: 'totalFinishCount', align: 'center', sortable: true },
  ]
})
</script>

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