132 lines
3.0 KiB
Vue
132 lines
3.0 KiB
Vue
|
<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>
|