题库维护。刷题软件数据后台
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
ss-tiku-manage-web/src/views/Question/UAV/Components/QuestionAddForm.vue

322 lines
9.1 KiB

<template>
<el-dialog
title="无人机试题"
:close-on-click-modal="false"
append-to-body
v-model="visible"
width="900px"
>
<div>
<el-form
ref="dialogFormRef"
:model="dialogForm"
:rules="dataRule"
label-width="auto"
label-position="right"
@keyup.enter="dialogFormSubmit()"
>
<el-row>
<el-col :span="24">
<el-form-item label="题目" prop="question">
<el-input
v-model="dialogForm.question"
maxlength="200"
placeholder="请输入题目"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="题目关键字" prop="titleWords">
<el-input
v-model="dialogForm.titleWords"
maxlength="1000"
placeholder="请输入"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="章节" prop="chapter">
<el-select v-model="dialogForm.chapter" style="width: 100%">
<el-option
v-for="dict in chapterOptions"
:key="dict.chapterId"
:label="dict.chapterName"
:value="dict.chapterId"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="题型" prop="type">
<el-radio-group v-model="dialogForm.type">
<el-radio label="1" value="1">判断题</el-radio>
<el-radio label="2" value="2">单选题</el-radio>
<el-radio label="3" value="3">多选题</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="排序" prop="showOrder">
<el-input
v-model="dialogForm.showOrder"
maxlength="20"
placeholder="请输入"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="选项A" prop="chooseA">
<el-input
v-model="dialogForm.chooseA"
maxlength="200"
placeholder="请输入"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="选项B" prop="chooseB">
<el-input
v-model="dialogForm.chooseB"
maxlength="200"
placeholder="请输入"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="选项C" prop="chooseC">
<el-input
v-model="dialogForm.chooseC"
maxlength="200"
placeholder="请输入"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="选项D" prop="chooseD">
<el-input
v-model="dialogForm.chooseD"
maxlength="200"
placeholder="请输入"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="答案" prop="trueAnswer">
<el-input
v-model="dialogForm.trueAnswer"
maxlength="200"
placeholder="请输入"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="答案解析" prop="bestAnswer">
<el-input
v-model="dialogForm.bestAnswer"
maxlength="1000"
placeholder="请输入"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="答题技巧" prop="skillInfo">
<el-input
v-model="dialogForm.skillInfo"
maxlength="1000"
placeholder="请输入"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="技巧关键字" prop="skillWords">
<el-input
v-model="dialogForm.skillWords"
maxlength="1000"
placeholder="请输入"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-form-item label="题目图片" prop="imageUrl">
<el-upload
action="#"
accept=".png,.jpg,.jpeg,.gif"
:limit="1"
:http-request="handleImport"
:on-exceed="handleExceed"
:show-file-list="false"
>
<img v-if="imgUrl" :src="imgUrl" style="width: 200px" />
<i v-else class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-row>
</el-form>
</div>
<template #footer>
<span class="dialog-footer">
<el-button plain @click="visible = false">取消</el-button>
<el-button type="primary" :disabled="!canSubmit" @click="dialogFormSubmit()">
确定
</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup name="QuesAddForm">
import { addQuestion, updateQuestion, uploadFile } from '@/api/xjapplet/xjdatabase'
const message = useMessage() // 消息弹窗
const emit = defineEmits(['update'])
const visible = ref(false)
const canSubmit = ref(true)
const imgUrl = ref(undefined)
const chapterOptions = ref([])
const dialogForm = ref({
id: undefined,
showOrder: 0,
categoryTitle: undefined,
question: undefined,
bestAnswer: undefined,
chooseA: undefined,
chooseB: undefined,
chooseC: undefined,
chooseD: undefined,
imageUrl: undefined,
type: undefined,
trueAnswer: undefined,
carTypeId: undefined,
skillInfoPic: undefined,
chapter: undefined,
skillInfo: undefined,
skillWords: undefined
})
const dataRule = {
schoolName: [{ required: true, message: '驾校名称不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
}
const open = (info = undefined, opts) => {
visible.value = true
chapterOptions.value = opts
resetDialogForm()
dialogForm.value.driveTypeName = info.driveTypeName
dialogForm.value.carTypeName = info.carTypeName
if (info) {
dialogForm.value = { ...info, chapter: info.chapter }
if (dialogForm.value.imageUrl) {
imgUrl.value = dialogForm.value.imageUrl.includes('http')
? dialogForm.value.imageUrl
: 'https://ss-cloud.ahduima.com/xjxc/pic/' + dialogForm.value.imageUrl
}
}
}
defineExpose({
open
})
const resetDialogForm = () => {
dialogForm.value = {
id: undefined,
showOrder: 0,
question: undefined,
bestAnswer: undefined,
chooseA: undefined,
chooseB: undefined,
chooseC: undefined,
chooseD: undefined,
imageUrl: undefined,
type: undefined,
trueAnswer: undefined,
carTypeId: undefined,
skillInfoPic: undefined,
skillInfo: undefined,
jqtp: undefined,
biaoji: undefined,
titleWords: undefined,
skillWords: undefined,
optaWords: undefined,
optbWords: undefined,
optcWords: undefined,
optdWords: undefined,
carTypeId: undefined,
chapter: '1'
}
}
const dialogFormRef = ref(null)
// 表单提交
const dialogFormSubmit = async () => {
if (!dialogFormRef.value) return
const valid = await dialogFormRef.value.validate()
if (!valid) return
if (dialogForm.value.questionId) {
updateQuestion(dialogForm.value).then((response) => {
if (response) {
message.success('修改成功')
emit('update')
visible.value = false
}
})
} else {
addQuestion(dialogForm.value).then((response) => {
if (response) {
message.success('新增成功')
visible.value = false
emit('update')
}
})
}
}
const handleImport = (opt) => {
const data = new FormData()
data.append('file', opt.file)
uploadFile(data).then((resp) => {
if (resp.code == 200) {
message.success('文件上传成功')
dialogForm.value.imageUrl = resp.data
imgUrl.value = 'https://ss-cloud.ahduima.com/xjxc/pic/' + dialogForm.value.imageUrl
}
})
}
const handleExceed = (files) => {
handleImport({ file: files[0] })
}
</script>