marking-cet-web/src/modules/quality/self-check/index.vue

<template>
  <div class="full">
    <div class="p-l-base p-t-medium-base fill-blank">
      <base-form size="small" :label-width="useVW(52)" :model="model" :items="items">
        <template #form-item-search>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </template>
      </base-form>
    </div>
    <div class="p-base flex justify-between">
      <el-card class="flex-1" shadow="never">
        <base-table
          :columns="columns1"
          :data="selfCheckAnalysisList"
          highlight-current-row
          @current-change="onCheckSelfCheckAnalysis"
          @row-dblclick="onSelfCheckAnalysisDBClick"
        ></base-table>
      </el-card>
      <el-card class="flex-1 m-l-base m-r-base center-card" shadow="never">
        <base-table
          :columns="columns2"
          highlight-current-row
          :data="selfCheckAnalysisDiffList"
          @current-change="onCheckSelfCheckAnalysisDiff"
        ></base-table>
      </el-card>
      <el-card class="flex-1" shadow="never">
        <base-table
          :columns="columns3"
          :data="currentSelfCheckAnalysisDiffItem?.papers"
          @row-dblclick="onPaperDBClick"
        ></base-table>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts" name="QualitySelfCheck">
/** 自查一致性分析 */
import { reactive, watch, computed, ref } from 'vue'
import { ElButton, ElCard } from 'element-plus'
import { omit } from 'lodash-es'
import BaseForm from '@/components/element/BaseForm.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import useFetch from '@/hooks/useFetch'
import useForm from '@/hooks/useForm'
import useVW from '@/hooks/useVW'
import useOptions from '@/hooks/useOptions'
import useTableCheck from '@/hooks/useTableCheck'

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

type FormModel = Omit<ExtractApiParams<'selfCheckAnalysis'>, 'startTime' | 'endTime'>

const model = reactive<FormModel & { time: string }>({
  time: '',
  subjectCode: '',
  questionMainNumber: void 0,
  markingGroupNumber: void 0,
})

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

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

const { defineColumn, _ } = useForm()

const OneRowSpan4 = defineColumn(_, 'row-1', { span: 4 })
const OneRowSpan6 = defineColumn(_, 'row-1', { span: 6 })
const items = computed<EpFormItem[]>(() => {
  return [
    OneRowSpan4({
      label: '科目',
      slotType: 'select',
      prop: 'subjectCode',
      labelWidth: useVW(40),
      slot: { options: subjectList.value, onChange: changeModelValue('subject') },
    }),
    OneRowSpan4({
      label: '大题',
      slotType: 'select',
      prop: 'questionMainNumber',
      slot: { options: mainQuestionList.value, onChange: changeModelValue('question') },
    }),
    OneRowSpan4({
      label: '小组',
      slotType: 'select',
      prop: 'markingGroupNumber',
      slot: { options: groupListWithAll.value, onChange: changeModelValue('group') },
    }),
    OneRowSpan6({
      label: '时间',
      slotType: 'dateTime',
      prop: 'time',
      slot: {
        type: 'datetimerange',
        valueFormat: 'YYYYMMDDHHmmss',
      },
    }),
    OneRowSpan4({ slotName: 'search' }),
  ]
})

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

const { onCurrentChange: onCheckSelfCheckAnalysis, current: currentSelfCheckAnalysis } =
  useTableCheck(selfCheckAnalysisList)

const columns1: EpTableColumn<ExtractArrayValue<ExtractApiResponse<'selfCheckAnalysis'>>>[] = [
  { label: '序号', type: 'index', width: 100 },
  { label: '评卷员', prop: 'markerName' },
  { label: '自查份数', prop: 'checkCount' },
  { label: '平均离差', prop: 'avgDiff' },
]

const {
  fetch: getSelfCheckAnalysisDiffList,
  result: selfCheckAnalysisDiffList,
  reset,
} = useFetch('selfCheckAnalysisDiffList')

const { onCurrentChange: onCheckSelfCheckAnalysisDiff, current: currentSelfCheckAnalysisDiffItem } =
  useTableCheck(selfCheckAnalysisDiffList)

const columns2: EpTableColumn<ExtractArrayValue<ExtractApiResponse<'selfCheckAnalysisDiffList'>>>[] = [
  { label: '离差值', prop: 'diff' },
  {
    label: '离差个数',
    formatter(row) {
      return `${row.papers?.length}`
    },
  },
]

const papers = computed(() => {
  return currentSelfCheckAnalysisDiffItem?.value?.papers || []
})

const columns3: EpTableColumn[] = [
  { label: '密号', prop: 'secretNumber' },
  { label: '分数', prop: 'markScore' },
  { label: '上次分数', prop: 'lastMarkScore' },
  { label: '评卷时间', prop: 'markTime' },
]

watch(currentSelfCheckAnalysis, () => {
  reset()
  if (currentSelfCheckAnalysis.value) {
    getSelfCheckAnalysisDiffList({
      subjectCode: model.subjectCode,
      questionMainNumber: model.questionMainNumber,
      markerId: currentSelfCheckAnalysis.value.markerId,
    })
  }
})

function onSearch() {
  selfCheckAnalysis({ ...omit(model, 'time'), startTime: model.time[0], endTime: model.time[1] })
}

/** 自查一致性列表双击 */
const onSelfCheckAnalysisDBClick = () => {
  console.log('自查一致性列表双击')
}

/** 试卷列表双击 */
const onPaperDBClick = () => {
  console.log('自查一致性列表双击')
}

onOptionInit(onSearch)
</script>

<style scoped lang="scss">
.center-card {
  min-width: 260px;
  max-width: 260px;
}
</style>