题卡客观题拆分创建

card/assets/styles/card-design.scss

@@ -861,3 +861,11 @@
     font-family: "Times New Roman", "宋体", "宋体-简", Arial, sans-serif;
   }
 }
+.topic-select-dialog {
+  .topic-select-list {
+    text-align: center;
+  }
+  .el-button {
+    margin: 0 10px 10px;
+  }
+}

card/components/CardDesign.vue

@@ -416,7 +416,7 @@ export default {
         this.topicList = this.TOPIC_LIST;
       } else {
         this.topicList = this.TOPIC_LIST.filter(
-          (item) => item.type !== "FILL_QUESTION"
+          (item) => !item.type.includes("FILL_QUESTION")
         );
       }
       this.$refs.TopicSelectDialog.open();

card/components/ElementPropEdit.vue

@@ -30,7 +30,7 @@
 
 <script>
 import { mapState, mapMutations, mapActions } from "vuex";
-import { getElementName } from "../elementModel";
+import { getElementName, getFillQuestionName } from "../elementModel";
 import EditComposition from "../elements/composition/EditComposition";
 import EditExplain from "../elements/explain/EditExplain";
 import EditFillLine from "../elements/fill-line/EditFillLine";
@@ -60,6 +60,9 @@ export default {
   computed: {
     ...mapState("card", ["curElement", "topics", "openElementEditDialog"]),
     title() {
+      if (this.curElement.type === "FILL_QUESTION")
+        return getFillQuestionName(this.curElement);
+
       return this.curElement.type
         ? getElementName(this.curElement.type)
         : "属性编辑";

card/components/TopicSelectDialog.vue

@@ -4,13 +4,13 @@
     :visible.sync="modalIsShow"
     title="试题选择"
     top="10vh"
-    width="500px"
+    width="400px"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     append-to-body
     @open="visibleChange"
   >
-    <div class="text-center">
+    <div class="topic-select-list">
       <el-button
         v-for="(item, index) in topics"
         :key="index"

card/elementModel.js

@@ -68,7 +68,14 @@ const EDITABLE_ELEMENT = [
 
 const OTHER_ELEMENT = ["TOPIC_HEAD", "CARD_HEAD"];
 
-const EDITABLE_TOPIC = ["FILL_QUESTION", "FILL_LINE", "EXPLAIN", "COMPOSITION"];
+const EDITABLE_TOPIC = [
+  "FILL_QUESTION_SIMPLE",
+  "FILL_QUESTION_MULTIPLY",
+  "FILL_QUESTION_BOOLEAN",
+  "FILL_LINE",
+  "EXPLAIN",
+  "COMPOSITION",
+];
 
 const EDITABLE_NOT_TOPIC = ["FORBID_AREA"];
 
@@ -97,10 +104,18 @@ const ELEMENT_INFOS = {
     name: "网格",
     getModel: createGrids,
   },
-  FILL_QUESTION: {
-    name: "选择题",
+  FILL_QUESTION_SIMPLE: {
+    name: "单选题",
     getModel: createFillQuestion,
   },
+  FILL_QUESTION_MULTIPLY: {
+    name: "多选题",
+    getModel: () => createFillQuestion({ isMultiply: true }),
+  },
+  FILL_QUESTION_BOOLEAN: {
+    name: "判断题",
+    getModel: () => createFillQuestion({ isBoolean: true, optionCount: 2 }),
+  },
   FILL_LINE: {
     name: "填空题",
     getModel: createFillLine,
@@ -144,8 +159,14 @@ const getElementModel = (type) => {
   return ELEMENT_INFOS[type].getModel();
 };
 
+const getFillQuestionName = (element) => {
+  if (element.isBoolean) return "判断题";
+  if (element.isMultiply) return "多选题";
+  return "单选题";
+};
+
 const getElementName = (type) => {
-  return ELEMENT_INFOS[type].name;
+  return ELEMENT_INFOS[type]?.name;
 };
 
 const getLocators = (pageNo) => {
@@ -190,6 +211,7 @@ const getNewPage = (pageNo, { pageSize, columnNumber }) => {
 export {
   getElementModel,
   getElementName,
+  getFillQuestionName,
   getNewPage,
   getCardHeadModel,
   getTopicHeadModel,

card/elements/fill-question/EditFillQuestion.vue

@@ -7,12 +7,8 @@
       :key="modalForm.id"
       label-width="120px"
     >
-      <el-form-item prop="topicType" label="题型：">
-        <el-radio-group v-model="topicType" @change="topicTypeChange">
-          <el-radio-button label="single">单选</el-radio-button>
-          <el-radio-button label="multiply">多选</el-radio-button>
-          <el-radio-button label="boolean">判断</el-radio-button>
-        </el-radio-group>
+      <el-form-item label="题型：">
+        {{ questionName }}
       </el-form-item>
       <el-form-item prop="topicNo" label="大题序号：">
         <el-input-number
@@ -84,6 +80,7 @@
 </template>
 
 <script>
+import { getFillQuestionName } from "../../elementModel";
 import { BOOLEAN_TYPE, DIRECTION_TYPE } from "../../enumerate";
 
 const initModalForm = {
@@ -180,6 +177,11 @@ export default {
       },
     };
   },
+  computed: {
+    questionName() {
+      return getFillQuestionName(this.modalForm);
+    },
+  },
   mounted() {
     this.initData(this.instance);
   },

card/elements/fill-question/model.js

@@ -28,11 +28,12 @@ const MODEL = {
   fontSize: "14px",
 };
 
-const getModel = () => {
+const getModel = (preSetData = {}) => {
+  const model = Object.assign({}, MODEL, preSetData);
   return {
     id: getElementId(),
     key: randomCode(),
-    ...MODEL,
+    ...model,
   };
 };