171 lines
4.3 KiB
Vue
171 lines
4.3 KiB
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 open = async (type, row) => {
|
||
isVisible.value = true
|
||
assignFields(row)
|
||
isUpdate.value = true
|
||
activeStep.value = 0
|
||
|
||
nextTick(() => {
|
||
formRef.value?.clearValidate?.()
|
||
})
|
||
}
|
||
defineExpose({ open })
|
||
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 handleCancel = () => {
|
||
isVisible.value = false
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 可选：让步骤标题更像按钮 */
|
||
.el-step__title:hover {
|
||
color: #409eff;
|
||
}
|
||
</style>
|