marking-cet-web/src/components/shared/SendBackMark.vue

<template>
  <base-dialog
    v-model="visible"
    :title="needRejectReason === true ? '打回原因' : '提示'"
    :footer="false"
    destroy-on-close
    :width="needRejectReason === true ? 550 : 330"
  >
    <template v-if="needRejectReason === true">
      <base-form ref="formRef" :model="model" :items="items" :rules="rules" label-width="72px">
        <el-form-item>
          <confirm-button @confirm="onSendBack" @cancel="onCancel"></confirm-button>
        </el-form-item>
      </base-form>
    </template>

    <!-- <base-form ref="formRef" :model="model" :items="items" :rules="rules" :label-width="useVW(72)"> -->
    <template v-else-if="needRejectReason === false">
      <h3 style="margin-top: 10px; margin-bottom: 40px">确定打回吗？</h3>
      <el-form-item>
        <confirm-button @confirm="onSendBack" @cancel="onCancel"></confirm-button>
      </el-form-item>
    </template>
    <!-- </base-form> -->
  </base-dialog>
</template>

<script setup lang="ts" name="SendBackMark">
/** 打回弹窗 */
import { reactive, withDefaults, watch, ref } from 'vue'
import { ElFormItem, ElMessage } from 'element-plus'
import BaseDialog from '@/components/element/BaseDialog.vue'
import BaseForm from '../element/BaseForm.vue'
import ConfirmButton from '../common/ConfirmButton.vue'
import useVModel from '@/hooks/useVModel'
import useForm from '@/hooks/useForm'
import useFetch from '@/hooks/useFetch'
import useVW from '@/hooks/useVW'
import useMainStore from '@/store/main'

import type { EpFormItem, EpFormRules } from 'global-type'
const mainStore = useMainStore()
const needRejectReason = ref<any>(null)
const emits = defineEmits<{
  (e: 'rejected'): void
}>()

const props = withDefaults(
  defineProps<{
    modelValue: boolean
    id: number | undefined
    // 问题卷 | 系统抽查 | 自查卷
    type?: 'problem' | 'system-check' | 'self-check' | 'custom-check'
  }>(),
  { type: 'problem' }
)

const visible = useVModel(props)

const { formRef, elFormRef } = useForm()

const model = reactive({
  reason: '',
  description: '',
})
const { fetch: getExamInfo } = useFetch('getExamInfo')

watch(visible, () => {
  if (!visible.value) {
    elFormRef?.value?.resetFields()
  } else {
    getExamInfo({ id: mainStore.myUserInfo?.examId as number }).then((result: any) => {
      needRejectReason.value = result.rejectReason
    })
  }
})

const rules: EpFormRules = {
  reason: [{ required: true, message: '请选择打回原因' }],
  description: [{ type: 'string', max: 50, message: '说明文字限制50字以内' }],
}

const reason = ['给分太高', '给分太低', '注意,评分偏紧', '注意,评分偏松', '评分不稳定,请认真评卷', '其他'].map((v) => ({
  label: v,
  value: v,
}))

const items: any[] = [
  { label: '打回原因', labelWidth: '80px', prop: 'reason', slotType: 'select', slot: { options: reason } },
  {
    label: '说明',
    labelWidth: '80px',
    prop: 'description',
    slotType: 'input',
    slot: { type: 'textarea', maxlength: 50, resize: 'none', rows: 6, showWordLimit: true },
  },
]

const { fetch: rejectMarkHistory } = useFetch('rejectMarkHistory')

const { fetch: rejectSystemSpotPaper } = useFetch('rejectSystemSpotPaper')

const { fetch: rejectSelfCheckData } = useFetch('rejectSelfCheckData')
const { fetch: rejectCustomCheckData } = useFetch('rejectCustomQueryTask')

const ApiMap = {
  problem: rejectMarkHistory,
  'system-check': rejectSystemSpotPaper,
  'self-check': rejectSelfCheckData,
  'custom-check': rejectCustomCheckData,
}

const onSendBack = async () => {
  try {
    if (!props.id) {
      ElMessage.warning('请选先选择一条评卷数据')
      return
    }
    // const valid = await elFormRef?.value?.validate()
    // if (valid) {
    // await ApiMap[props.type]({ description: model.description, reason: model.reason, id: props.id })
    if (props.type === 'custom-check') {
      await rejectCustomCheckData({ description: model.description, reason: model.reason, taskId: props.id })
    } else {
      await ApiMap[props.type]({ description: model.description, reason: model.reason, id: props.id })
    }
    // }
    visible.value = false
    // ElMessage.success('操作成功')
    emits('rejected')
  } catch (error) {
    console.error(error)
  }
}

const onCancel = () => {
  visible.value = false
}
</script>

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