<template> <div class="edit-fill-line"> <el-form ref="modalFormComp" :model="modalForm" :rules="rules" :key="modalForm.id" label-width="120px" > <!-- <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" @change="lineTypeChange" ></el-input-number> <span class="el-input-split"></span> <el-input-number style="width: 40px" v-model="modalForm.endNumber" :min="0" :max="999" :step="1" step-strictly :controls="false" @change="lineTypeChange" ></el-input-number> </el-form-item> <el-form-item prop="lineSpacing" label="空位上下间距:"> <el-input-number style="width: 125px" v-model.number="modalForm.lineSpacing" :min="20" :max="100" :step="1" step-strictly :controls="false" ></el-input-number> </el-form-item> <el-form-item prop="questionNumberPerLine" label="每行空数:"> <el-input-number style="width: 125px" v-model="modalForm.questionNumberPerLine" :min="1" :max="10" :step="1" step-strictly :controls="false" ></el-input-number> <span class="el-input-tips">*指一行显示空位数量</span> </el-form-item> <el-form-item label="题号前缀:"> <el-input style="width: 125px" v-model.trim="modalForm.numberPre" :maxlength="6" clearable ></el-input> </el-form-item> <el-form-item label="空位排列方向:" required> <el-radio-group v-model="modalForm.questionDirection" 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-item label="小题空数类型:"> <el-radio-group v-model="modalForm.questionLineType" size="small" @change="lineTypeChange" > <el-radio-button label="norm">标准</el-radio-button> <el-radio-button label="custom">自定义</el-radio-button> </el-radio-group> </el-form-item> <el-form-item v-if="modalForm.questionLineType === 'norm'" prop="lineNumberPerQuestion" label="每题空数:" > <el-input-number style="width: 125px" v-model="modalForm.lineNumberPerQuestion" :min="1" :max="15" :step="1" step-strictly :controls="false" ></el-input-number> <span class="el-input-tips">*指每一小题的空位数量</span> </el-form-item> <el-form-item v-else prop="questionLineNums" label="各小题空数:"> <table class="table table-white table-narrow"> <tr> <th>题号</th> <th>空数</th> </tr> <tr v-for="option in questionLineNumOptions" :key="option.no"> <td>{{ option.no }}</td> <td> <el-input-number v-model="option.count" size="mini" :min="1" :max="50" :step="1" step-strictly :controls="false" style="width: 125px" ></el-input-number> </td> </tr> </table> </el-form-item> </el-form> </div> </template> <script> import { DIRECTION_TYPE } from "../../enumerate"; import CardNameEdit from "../../components/common/CardNameEdit.vue"; const initModalForm = { id: "", topicNo: null, topicName: "", startNumber: 1, endNumber: 2, questionsCount: 2, questionNumberPerLine: 1, lineNumberPerQuestion: 1, lineSpacing: 40, questionDirection: "horizontal", questionLineType: "norm", questionLineNums: [], numberPre: "", }; export default { name: "edit-fill-line", components: { CardNameEdit }, props: { instance: { type: Object, default() { return {}; }, }, }, data() { 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 }, DIRECTION_TYPE, questionLineNumOptions: [{ no: 1, count: 1 }], rules: { topicNo: [ { required: true, message: "请输入大题序号", trigger: "change", }, ], topicName: [ { required: true, message: "请输入题目名称", trigger: "change", }, ], endNumber: [ { required: true, message: "请输入起止题号", trigger: "change", }, { type: "number", validator: numberRangeValidater, trigger: "change", }, ], lineSpacing: [ { required: true, type: "number", message: "请输入空位上下间距", trigger: "change", }, ], questionNumberPerLine: [ { required: true, type: "number", message: "请输入每行空数", trigger: "change", }, ], lineNumberPerQuestion: [ { required: true, type: "number", message: "请输入每题空数", trigger: "change", }, ], }, }; }, mounted() { this.initData(this.instance); }, methods: { initData(val) { const valInfo = val.parent || val; this.modalForm = { ...valInfo }; this.modalForm.endNumber = this.modalForm.startNumber + this.modalForm.questionsCount - 1; this.questionLineNumOptions = this.modalForm.questionLineNums; }, lineTypeChange() { // check start end number if ( !this.modalForm.startNumber || !this.modalForm.endNumber || this.modalForm.startNumber > this.modalForm.endNumber ) return; if (this.modalForm.questionLineType === "custom") { let questionLineNumOptions = []; for ( let i = this.modalForm.startNumber; i <= this.modalForm.endNumber; i++ ) { questionLineNumOptions.push({ no: i, count: this.modalForm.lineNumberPerQuestion, }); } this.questionLineNumOptions = questionLineNumOptions; } else { this.questionLineNumOptions = []; } }, 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.questionLineNums = this.questionLineNumOptions; this.modalForm.topicName = this.modalForm.topicName.trim(); this.$emit("modified", this.modalForm); }, }, }; </script>