pengcheng-exam-teacher/src/views/task/selftrans/collegeexam/components/task-edit.vue

<template>

  <Dialog v-model="isVisible"    :title="'修改试卷任务'" width="1460"     >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="80px"
     
    >
      <div>
        <!-- 步骤条 -->
        <el-steps :active="activeStep" finish-status="success" align-center>
          <template v-for="(title, index) in stepTitles" :key="index">
            <el-step>
              <template #title>
                <div @click="handleStepClick(index)" style="cursor: pointer;">
                  {{ title }}
                </div>
              </template>
            </el-step>
          </template>
        </el-steps>
        <!-- 左右切换箭头按钮 -->
<div style="text-align: center; margin-top: 15px;">
  <el-button :disabled="activeStep === 0" @click="prevStep">
    ← 上一步
  </el-button>
  <el-button :disabled="activeStep === stepTitles.length - 1" @click="nextStep">
    下一步 →
  </el-button>
</div>
        <div style="margin-top: 30px;">
          <component
            :is="currentComponent"
            :form-data="props.data"
            :task-specialty="props.data.taskSpecialty"
            :task-id="props.data.taskId"
          />
        </div>
      </div>
    </el-form>

  


    <template #footer>

      <el-button @click="handleCancel">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { useFormData } from '@/utils/use-form-data'
import StepOne from './steps/step1/index.vue'
import StepTwo from './steps/step2/index.vue'
import StepThree from './steps/step3/index.vue'
import StepFour from './steps/step4/index.vue'
import StepFive from './steps/step5/index.vue'
import * as SmsChannelApi from '@/api/system/session';
// 模拟接口（你需要改成实际请求）
async function validateBeforeStepFour(taskId) {
  // 示例：替换为你实际的 API 请求
  const res = await SmsChannelApi.fetch(taskId)
console.log(res+"resres")
  if (res==='200') {
    return true
  } else {
    ElMessage.error(res || '无法进入考场设置步骤')
    return false
  }
}

const props = defineProps({
  data: Object
})
const isVisible = defineModel({ type: Boolean })

const isUpdate = ref(false)
const activeStep = ref(0)

// const stepTitles = ['试卷方案', '试卷管理', '参数设置', '考场设置', '人员设置']
// const stepComponents = [StepOne, StepTwo, StepThree, StepFour, StepFive]


const stepTitles = ['试卷方案',  '参数设置', '考场设置', '人员设置']
const stepComponents = [StepOne,  StepThree, StepFour, StepFive]
const currentComponent = computed(() => stepComponents[activeStep.value])

const formRef = ref(null)
const [form, resetFields, assignFields] = useFormData({
  taskId: '',
  taskSpecialty: ''
})

async function handleStepClick(index) {
  // 点击第四步（index=3）时先校验
  if (index === 2) {
    const pass = await validateBeforeStepFour(props.data.taskId)
    if (!pass) return
  }
  activeStep.value = index
}
const prevStep = () => {
    // 如果下一步是考场设置（第四步），提前校验
  if (activeStep.value - 1 === 2) {
   validateBeforeStepFour(props.data.taskId)

      .then((msg) => {
        })
        .catch((e) => {
      // 校验失败，直接跳到第五步
      activeStep.value = 1
      return
        });
  
 
  }
  if (activeStep.value > 0) {
    activeStep.value--
  }
}

const nextStep = async () => {
  // 如果下一步是考场设置（第四步），提前校验
  if (activeStep.value + 1 === 2) {
   validateBeforeStepFour(props.data.taskId)

      .then((msg) => {
        })
        .catch((e) => {
      // 校验失败，直接跳到第五步
      activeStep.value = 3
      return
        });
  
 
  }

  if (activeStep.value < stepTitles.length - 1) {
    activeStep.value++
  }
}
/** 打开弹窗 */
const open = async (type, row) => {
  isVisible.value = true
  assignFields(row)
  isUpdate.value = true
  activeStep.value = 0

  nextTick(() => {
    formRef.value?.clearValidate?.()
  })
}
defineExpose({ open })

const handleCancel = () => {
  isVisible.value = false
}
</script>

<style scoped>
/* 可选：让步骤标题更像按钮 */
.el-step__title:hover {
  color: #409eff;
}
</style>