<template> <div class="edit-fill-question"> <el-form ref="modalFormComp" :model="modalForm" :rules="rules" :key="modalForm.id" label-width="120px" > <el-form-item label="题型:"> {{ questionName }} </el-form-item> <!-- <el-form-item prop="topicNo" label="大题序号:"> <el-input-number v-model="modalForm.topicNo" :min="1" :max="99" :step="1" step-strictly :controls="false" ></el-input-number> </el-form-item> --> <el-form-item prop="topicName" label="题目名称:"> <card-name-edit v-model="modalForm"></card-name-edit> </el-form-item> <el-form-item prop="endNumber" label="起止题号:"> <el-input-number style="width: 40px" v-model="modalForm.startNumber" :min="0" :max="999" :step="1" step-strictly :controls="false" ></el-input-number> <span class="el-input-split"></span> <el-input-number style="width: 40px" v-model="modalForm.endNumber" :min="modalForm.startNumber" :max="999" :step="1" step-strictly :controls="false" ></el-input-number> </el-form-item> <el-form-item prop="optionCount" label="选项个数:"> <el-input-number style="width: 125px" v-model="modalForm.optionCount" :min="2" :max="22" :step="1" step-strictly :controls="false" :disabled="modalForm.isBoolean" ></el-input-number> </el-form-item> <el-form-item v-if="modalForm.isBoolean" label="选项排列方向:" required> <el-radio-group v-model="modalForm.optionDirection" size="small"> <el-radio-button v-for="(val, key) in DIRECTION_TYPE" :key="key" :label="key" >{{ val }}</el-radio-button > </el-radio-group> </el-form-item> </el-form> </div> </template> <script> import { getFillQuestionName } from "../../elementModel"; import { BOOLEAN_TYPE, DIRECTION_TYPE } from "../../enumerate"; import CardNameEdit from "../../components/common/CardNameEdit.vue"; const initModalForm = { id: "", topicNo: null, topicName: "", nameFontSize: "14px", nameFontWeight: 400, startNumber: 1, endNumber: 5, questionsCount: 10, optionCount: 5, optionDirection: "horizontal", questionDirection: "vertical", isBoolean: false, booleanType: BOOLEAN_TYPE[0], isMultiply: false, }; export default { name: "edit-fill-question", components: { CardNameEdit }, props: { instance: { type: Object, default() { return {}; }, }, }, data() { const topicTypeValidater = (rule, value, callback) => { if (!this.topicType) { callback(new Error("请选择题型")); } else { callback(); } }; const numberRangeValidater = (rule, value, callback) => { if (!this.modalForm.startNumber || !this.modalForm.endNumber) { return callback(new Error("请输入起止题号")); } if (this.modalForm.startNumber > this.modalForm.endNumber) { callback(new Error("开始题号不能大于结束题号")); } else { callback(); } }; return { modalForm: { ...initModalForm }, BOOLEAN_TYPE, DIRECTION_TYPE, topicType: null, rules: { topicType: [ { required: true, validator: topicTypeValidater, trigger: "change", }, ], topicNo: [ { required: true, message: "请输入大题序号", trigger: "change", }, ], topicName: [ { required: true, message: "请输入题目名称", trigger: "change", }, ], endNumber: [ { required: true, message: "请输入起止题号", trigger: "change", }, { type: "number", validator: numberRangeValidater, trigger: "change", }, ], optionCount: [ { required: true, type: "number", message: "请输入选项个数", trigger: "change", }, ], }, }; }, computed: { questionName() { return getFillQuestionName(this.modalForm); }, }, mounted() { this.initData(this.instance); }, methods: { initData(val) { const valInfo = val.parent || val; if (val["_edit"]) this.topicType = this.getTopicType(valInfo); this.modalForm = Object.assign({}, initModalForm, valInfo); this.modalForm.endNumber = this.modalForm.startNumber + this.modalForm.questionsCount - 1; }, topicTypeChange() { if (this.topicType === "single") { this.modalForm.isMultiply = false; this.modalForm.isBoolean = false; this.modalForm.optionCount = 4; } else if (this.topicType === "multiply") { this.modalForm.isMultiply = true; this.modalForm.isBoolean = false; this.modalForm.optionCount = 4; } else { this.modalForm.isMultiply = false; this.modalForm.isBoolean = true; this.modalForm.optionCount = 2; } }, getTopicType(info) { if (info.isMultiply) return "multiply"; if (info.isBoolean) return "boolean"; return "single"; }, async submit() { const valid = await this.$refs.modalFormComp.validate().catch(() => {}); if (!valid) return; this.modalForm.questionsCount = this.modalForm.endNumber - this.modalForm.startNumber + 1; this.modalForm.topicName = this.modalForm.topicName.trim(); this.$emit("modified", this.modalForm); }, }, }; </script>