marking-cet-web/src/modules/analysis/group-monitoring/index.vue

<template>
  <div class="flex direction-column full group-monitoring-view">
    <div class="p-l-base p-r-base p-t-medium-base fill-blank">
      <base-form size="small" :label-width="useVW(60)" :disabled="loading" :model="model" :items="items">
        <template #form-item-button-group>
          <el-button :loading="loading" type="primary" @click="onSearch">刷新</el-button>
        </template>
      </base-form>
    </div>
    <div class="flex-1 p-base">
      <div class="radius-base p-l-base p-r-base p-t-mini fill-blank">
        <base-table size="small" :columns="columns" :data="result"></base-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="GroupMonitoring">
/** 小组监控 */
import { useRouter } from 'vue-router'
import { ElButton } from 'element-plus'
import BaseForm from '@/components/element/BaseForm.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import useFetch from '@/hooks/useFetch'
import useVW from '@/hooks/useVW'
import useFormFilter from './hooks/useFormFilter'

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

const { push } = useRouter()

const { model, formModel, items, onOptionInit } = useFormFilter()

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

const columns: EpTableColumn<ExtractArrayValue<ExtractApiResponse<'getGroupMonitor'>>>[] = [
  { label: '组长', prop: 'markingGroupLeader' },
  { label: '已浏览系统抽查卷数', prop: 'sysCheckCount' },
  { label: '已给分系统抽查卷数', prop: 'sysCheckReScoreCount' },
  { label: '已浏览问题卷数', prop: 'problemCount' },
  { label: '已给分问题卷数', prop: 'problemReScoreCount' },
  { label: '已浏览自定义抽查卷数', prop: 'customCheckCount' },
  { label: '已给分自定义抽查卷数', prop: 'customCheckReScoreCount' },
  {
    label: '已浏览试卷总数',
    prop: 'totalCount',
    formatter(row) {
      return (
        <ElButton type="primary" link onClick={() => viewMonitoringDetail(row, 'VIEW')}>
          {row.totalCount}
        </ElButton>
      )
    },
  },
  {
    label: '已给分试卷总数',
    prop: 'totalReScoreCount',
    formatter(row) {
      return (
        <ElButton type="primary" link onClick={() => viewMonitoringDetail(row, 'MARK')}>
          {row.totalReScoreCount}
        </ElButton>
      )
    },
  },
]

/** 刷新按钮 */
function onSearch() {
  getGroupMonitor(formModel.value)
}

/** 查看抽查详情 */

function viewMonitoringDetail(
  row: ExtractArrayValue<ExtractApiResponse<'getGroupMonitor'>>,
  operateType: 'VIEW' | 'MARK'
) {
  push({
    name: 'AnalysisGroupDetail',
    query: {
      operateType,
      headerId: row.markingGroupLeaderId,
    },
  })
}

onOptionInit(onSearch)
</script>

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