【新增】试卷任务训练、考试、高考模拟前端

src/views/task/trans/components/task-edit.vue

@@ -0,0 +1,119 @@
+<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="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)
+
+  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 currentComponent = computed(() => stepComponents[activeStep.value])
+
+const formRef = ref(null)
+const [form, resetFields, assignFields] = useFormData({
+  taskId: '',
+  taskSpecialty: ''
+})
+
+async function handleStepClick(index) {
+  // 点击第四步（index=3）时先校验
+  if (index === 3) {
+    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 handleCancel = () => {
+  isVisible.value = false
+}
+</script>
+
+<style scoped>
+/* 可选：让步骤标题更像按钮 */
+.el-step__title:hover {
+  color: #409eff;
+}
+</style>