【新增】试卷任务前端

src/views/system/task/collegeeaxm/components/task-edit.vue

@@ -0,0 +1,131 @@
+<template>
+
+  <Dialog v-model="isVisible"    :title="'修改试卷任务'" width="1460"     >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+     
+    >
+      <div>
+        <div  style="margin-bottom: 16px; color: #666;">
+        <el-text>当前任务 ID：<strong>{{ props.data.taskId }}</strong></el-text>
+      </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 { useFormData } from '@/utils/use-form-data'
+import { ref, computed, nextTick } from 'vue'
+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'
+
+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: ''
+})
+
+function handleStepClick(index) {
+  activeStep.value = index
+}
+
+// function onOpen() {
+//   console.log(props.data+"=======================")
+//   activeStep.value = 0
+//   if (props.data) {
+//     assignFields(props.data)
+//     isUpdate.value = true
+//   } else {
+//     resetFields()
+//     isUpdate.value = false
+//   }
+
+//   nextTick(() => {
+//     formRef.value?.clearValidate?.()
+//   })
+// }
+
+
+
+
+
+
+/** 打开弹窗 */
+const open = async (type, row) => {
+  isVisible.value = true
+  console.log(props.data+"=======================")
+  assignFields(row)
+  isUpdate.value = true
+
+  activeStep.value = 0
+
+  nextTick(() => {
+    formRef.value?.clearValidate?.()
+  })
+}
+defineExpose({ open })
+
+
+
+const handleCancel = () => {
+  console.log(isVisible.value+"isVisible.value")
+  isVisible.value = false
+}
+
+</script>
+
+<style scoped>
+/* 可选：让步骤标题更像按钮 */
+.el-step__title:hover {
+  color: #409eff;
+}
+</style>