marking-cet-web/src/modules/quality/ending-check/components/EndCheck.vue

<template>
  <div class="radius-base">
    <div class="fill-blank radius-base p-t-base">
      <base-form :items="items" :model="model" :label-width="useVW(66)" size="small">
        <template #form-item-button>
          <el-button type="primary" @click="onStartCheck">开始检查</el-button>
        </template>
      </base-form>
    </div>
    <div class="m-t-base flex">
      <div class="radius-base fill-blank p-base overflow-hidden flex-1">
        <div class="flex items-center m-b-base table-title">
          <span class="label">在评卷员手中</span>
          <span class="data-count">{{ unMarkPaperList?.result?.length }}</span>
          <el-button type="primary" size="small" @click="onTaskChangeMarker">任务指定评卷员</el-button>
        </div>
        <base-table :columns="columns1" :data="unMarkPaperList?.result" @current-change="onCheckTask"></base-table>
      </div>
      <div class="radius-base fill-blank p-base overflow-hidden m-l-base flex-1">
        <div class="flex items-center m-b-base table-title">
          <span class="label">未处理问题卷</span>
          <span class="data-count">{{ unProcessProblemList?.length }}</span>
        </div>
        <base-table :columns="columns2" :data="unProcessProblemList"></base-table>
      </div>
      <div class="radius-base fill-blank p-base overflow-hidden m-l-base flex-1">
        <div class="flex items-center m-b-base table-title">
          <span class="label">未处理雷同卷</span>
          <span class="data-count">{{ unProcessSimilarList?.length }}</span>
        </div>
        <base-table :columns="columns3" :data="unProcessSimilarList"></base-table>
      </div>
    </div>
  </div>
  <base-dialog v-model="visibleChangeMarker" title="任务指定评卷员" destroy-on-close>
    <base-form
      ref="formRef"
      size="small"
      :rules="rules"
      :model="changeMarkerModel"
      :items="changeMarkerItems"
    ></base-form>
    <template #footer>
      <confirm-button around @confirm="onSubmitChangeMarker" @cancel="visibleChangeMarker = false"></confirm-button>
    </template>
  </base-dialog>
</template>

<script setup lang="ts" name="EndCheck">
/** 收尾检查 */
import { reactive, ref, computed, watch } from 'vue'
import { ElButton } from 'element-plus'
import BaseForm from '@/components/element/BaseForm.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import BaseDialog from '@/components/element/BaseDialog.vue'
import ConfirmButton from '@/components/common/ConfirmButton.vue'
import useFetch from '@/hooks/useFetch'
import useOptions from '@/hooks/useOptions'
import useVW from '@/hooks/useVW'
import useForm from '@/hooks/useForm'

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

/** 指定评卷员 */
const visibleChangeMarker = ref<boolean>(false)

const changeMarkerModel = reactive({ loginName: '' })

const { formRef, elFormRef } = useForm()

const changeMarkerItems: EpFormItem[] = [{ label: '请输入指定评卷员账号', prop: 'loginName', slotType: 'input' }]

const rules: EpFormRules = {
  loginName: [{ required: true, message: '请输入指定评卷员账号' }],
}

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

/** 搜索 */
const model = reactive<ExtractApiParams<'unProcessProblemList'>>({
  markingGroupNumber: dataModel.group,
  questionMainNumber: dataModel.question,
  subjectCode: dataModel.subject || '',
})

const { fetch: getUnMarkPaperList, result: unMarkPaperList } = useFetch('unMarkPaperList')
const { fetch: getUnProcessProblemList, result: unProcessProblemList } = useFetch('unProcessProblemList')
const { fetch: getUnProcessSimilarList, result: unProcessSimilarList } = useFetch('unProcessSimilarList')

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

const { defineColumn, _ } = useForm()

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

const items = computed<EpFormItem[]>(() => [
  OneRow({
    label: '大题',
    prop: 'questionMainNumber',
    slotType: 'select',
    slot: {
      options: mainQuestionList.value,
      onChange: changeModelValue('question'),
      disabled: true,
    },
  }),
  OneRow({
    label: '小组',
    prop: 'markingGroupNumber',
    slotType: 'select',
    slot: {
      options: groupListWithAll.value,
      onChange: changeModelValue('group'),
    },
  }),
  OneRow({
    slotName: 'button',
  }),
])

/** 未评卷 table */
const columns1: EpTableColumn[] = [
  { label: '评卷员', prop: 'markerName' },
  { label: '密号', prop: 'secretNumber' },
  { label: '大题', prop: 'questionMainName' },
]
/** 未处理问题卷table */
const columns2: EpTableColumn[] = [
  { label: '密号', prop: 'secretNumber' },
  { label: '大题', prop: 'questionMainName' },
]
/** 未处理雷同卷table */
const columns3: EpTableColumn[] = [
  { label: '密号', prop: 'secretNumber' },
  { label: '雷同密号', prop: 'sameSecretNumber' },
  { label: '大题', prop: 'questionMainName' },
]

/** 开始检查 */
const onStartCheck = () => {
  getUnMarkPaperList({ pageNumber: 1, pageSize: 20, ...model })
  getUnProcessProblemList(model)
  getUnProcessSimilarList(model)
}

const currentTask = ref<ExtractMultipleApiResponse<'unMarkPaperList'>>()

const onCheckTask = (row: ExtractMultipleApiResponse<'unMarkPaperList'>) => {
  currentTask.value = row
}

/** 任务指定评卷员 */
const onTaskChangeMarker = () => {
  visibleChangeMarker.value = true
}

const onSubmitChangeMarker = async () => {
  try {
    const valid = await elFormRef?.value?.validate()
    if (valid && currentTask.value) {
      useFetch('changeTaskMarker')
        .fetch({ taskId: currentTask.value.taskId, loginName: changeMarkerModel.loginName })
        .then(() => {
          visibleChangeMarker.value = false
        })
    }
  } catch (error) {
    console.error(error)
  }
}

onOptionInit(onStartCheck)
</script>

<style scoped lang="scss">
.table-title {
  .label {
    font-size: $SmallFont;
    color: $RegularFontColor;
  }
  .data-count {
    padding: 4px 10px;
    margin: 0 12px;
    border: $OnePixelLine;
    border-radius: 4px;
    font-size: $MediumFont;
    color: $NormalColor;
  }
}
</style>