OnlineEducation-teacher-front/src/views/exm/exampaper/form.vue

<template>
    <xn-form-container
        :title="formData.id ? '编辑t_exam_paper' : '增加t_exam_paper'"
        :width="700"
        :visible="visible"
        :destroy-on-close="true"
        @close="onClose"
    >
        <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-form-item label="年级：" name="level">
				<a-select
					v-model:value="formData.level"
					:options="gradeLevelOptions"
					style="width: 100%"
					placeholder="请选择年级"
				>
				</a-select>
			</a-form-item>
			<a-form-item label="学科：" name="subjectId">
				<a-select
					v-model:value="formData.subjectId"
					:options="susbjectOptions"
					style="width: 100%"
					placeholder="请选择学科"
				>
				</a-select>
			</a-form-item>
			<a-form-item label="试卷类型：" name="paperType">
				<a-select
					v-model:value="formData.paperType"
					:options="paperTypeOptions"
					style="width: 100%"
					placeholder="请选择试卷类型"
				>
				</a-select>
			</a-form-item>
            <a-form-item label="试卷名称：" name="name">
                <a-input v-model:value="formData.name" placeholder="请输入试卷名称" allow-clear />
            </a-form-item>


			<a-form-item :key="index" :label="'标题'+(index+1)+'：'" required v-for="(titleItem,index) in titleItems">
				<a-input v-model="titleItem.name" style="width: 65%"/>
				<a-button  style="margin-left: 20px" @click="addQuestion(titleItem)">添加题目</a-button>
				<a-button  style="margin-left: 20px;background-color: red;"  @click="titleItems.splice(index,1)" type="primary">删除</a-button>
				<a-card class="exampaper-item-box" v-if="titleItem.questionItems.length!==0">
					<a-form-item :key="questionIndex" :label="'题目'+(questionIndex+1)+'：'"
								  v-for="(questionItem,questionIndex) in titleItem.questionItems" style="margin-bottom: 15px">
						<a-row>
							<a-col :span="23">
								<QuestionShow :qType="questionItem.questionType" :question="questionItem"/>
							</a-col>
							<a-col :span="1">
								<a-button @click="titleItem.value.questionItems.splice(questionIndex,1)">删除</a-button>
							</a-col>
						</a-row>
					</a-form-item>
				</a-card>
			</a-form-item>



			<a-form-item label="建议时长：" name="suggestTime">
				<a-input-number id="inputNumber" width="100%" v-model:value="formData.suggestTime" :min="1" :max="180" placeholder="分钟" allow-clear/>
			</a-form-item>
        </a-form>
        <template #footer>
			<a-button style="margin-right: 8px" @click="addTitle">添加标题</a-button>
            <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
            <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
        </template>
    </xn-form-container>
</template>

<script setup name="tExamPaperForm">
    import { cloneDeep } from 'lodash-es'
    import { required } from '@/utils/formRules'
    import tExamPaperApi from '@/api/paper/examPaperApi'
	import tool from "@/utils/tool";
    // 抽屉状态
    const visible = ref(false)
    const emit = defineEmits({ successful: null })
    const formRef = ref()
    // 表单数据
    const formData = ref({})
    const submitLoading = ref(false)
	// 打开抽屉
    const onOpen = (record) => {
        visible.value = true
        if (record) {
            let recordData = cloneDeep(record)
            formData.value = Object.assign({}, recordData)
        }
    }
    // 关闭抽屉
    const onClose = () => {
        formRef.value.resetFields()
        formData.value = {}
        visible.value = false
    }
    // 默认要校验的
    const formRules = {
    }
    // 验证并提交数据
    const onSubmit = () => {
        formRef.value.validate().then(() => {
            submitLoading.value = true
            const formDataParam = cloneDeep(formData.value)
            tExamPaperApi
                .tExamPaperSubmitForm(formDataParam, formDataParam.id)
                .then(() => {
                    onClose()
                    emit('successful')
                })
                .finally(() => {
                    submitLoading.value = false
                })
        })
    }
	const gradeLevelOptions = tool.dictList('SEMESTER')
	const susbjectOptions = tool.dictList('SUBJECT')
	const paperTypeOptions = tool.dictList('PAPER_TYPE')
	const titleItems =  ref([])
	const currentTitleItem = ref(null)
	const addTitle = () => {
		titleItems.value.push({
			name: '',
			questionItems: []
		})
	}
	const addQuestion = (titleItem) =>{
		currentTitleItem.value = titleItem
		this.questionPage.showDialog = true
		this.search()
	}
	// 抛出函数
    defineExpose({
        onOpen
    })
</script>
<style>
.exampaper-item-box {
	.q-title {
		margin: 0px 5px 0px 5px;
	}
	.q-item-content {
	}
}
</style>