题卡规则增加副标题设置

card/assets/styles/card-design.scss

@@ -210,6 +210,7 @@
       }
     }
     &-subtitle {
+      box-shadow: 0 0 1px #999;
       .el-input__inner {
         line-height: 22px;
         height: 22px;

card/assets/styles/card-preview.scss

@@ -413,9 +413,10 @@
     white-space: normal;
     margin-bottom: 10px;
 
-    > p {
+    p {
       padding: 0 10px;
       line-height: 22px;
+      height: 22px;
       white-space: pre;
     }
   }

card/assets/styles/card-temp.css

@@ -330,9 +330,10 @@
   white-space: normal;
   margin-bottom: 10px;
 }
-.card-head-subtitle > p {
+.card-head-subtitle p {
   padding: 0 10px;
   line-height: 22px;
+  height: 22px;
   white-space: pre;
 }
 .card-head-body {

card/components/CardDesign.vue

@@ -497,14 +497,6 @@ export default {
         });
         return false;
       }
-      // if (!this.cardConfig.cardDesc) {
-      //   this.$message.error("题卡描述信息不能为空！");
-      //   this.setCurPage(0);
-      //   setTimeout(() => {
-      //     document.getElementById("cardDescInput").focus();
-      //   });
-      //   return false;
-      // }
       if (this.checkElementCovered()) {
         this.$message.error("题卡中存在被遮挡的元件，请注意调整！");
         return false;

card/elements/card-head/CardHead.vue

@@ -18,19 +18,22 @@
       <div class="card-head-subtitle">
         <div v-if="!preview && !data.isSimple">
           <el-input
-            v-model="cardDescLineOne"
-            placeholder="请输入题卡描述信息"
+            v-model.trim="firstLevelSubheading"
+            placeholder="请输入一级副标题"
             @blur="nameChange"
           >
           </el-input>
           <el-input
-            v-model="cardDescLineTwo"
-            placeholder="更多题卡描述信息"
+            v-model.trim="secondLevelSubheading"
+            placeholder="请输入二级副标题"
             @blur="nameChange"
           >
           </el-input>
         </div>
-        <p v-else>{{ data.cardDesc }}</p>
+        <div v-else>
+          <p>{{ firstLevelSubheading }}</p>
+          <p>{{ secondLevelSubheading }}</p>
+        </div>
       </div>
     </div>
 
@@ -126,16 +129,15 @@ export default {
   },
   data() {
     return {
-      cardTitle: this.data.cardTitle,
-      cardDesc: this.data.cardDesc,
-      cardDescLineOne: "",
-      cardDescLineTwo: "",
+      cardTitle: "",
+      firstLevelSubheading: "",
+      secondLevelSubheading: "",
     };
   },
   created() {
-    const contents = this.data.cardDesc.split("\n");
-    this.cardDescLineOne = contents[0];
-    this.cardDescLineTwo = contents[1];
+    this.cardTitle = this.data.cardTitle;
+    this.firstLevelSubheading = this.data.firstLevelSubheading;
+    this.secondLevelSubheading = this.data.secondLevelSubheading;
   },
   computed: {
     ...mapState("card", ["cardConfig"]),
@@ -178,7 +180,8 @@ export default {
     nameChange() {
       this.setCardConfig({
         cardTitle: this.cardTitle,
-        cardDesc: [this.cardDescLineOne, this.cardDescLineTwo].join("\n"),
+        firstLevelSubheading: this.firstLevelSubheading,
+        secondLevelSubheading: this.secondLevelSubheading,
       });
     },
   },

card/elements/card-head/model.js

@@ -7,7 +7,8 @@ const MODEL = {
   w: 0,
   h: 0,
   cardTitle: "",
-  cardDesc: "",
+  firstLevelSubheading: "",
+  secondLevelSubheading: "",
   aOrB: false,
   paperType: "PRINT", // PRINT: "印刷",FILL: "填涂"
   examAbsent: true,

src/modules/base/components/CardTitleRuleEdit.vue

@@ -16,9 +16,6 @@
     <el-input
       ref="FieldTextarea"
       v-model="content"
-      type="textarea"
-      resize="none"
-      :rows="2"
       placeholder="请输入内容"
       :disabled="disabled"
       @input="contentChange"

src/modules/base/components/ModifyCardRule.vue

@@ -135,10 +135,6 @@
           </el-form-item>
         </div>
         <el-form-item prop="titleRule" label="题卡标题规则：">
-          <!-- <el-input
-            v-model="modalForm.titleRule"
-            :disabled="!editable"
-          ></el-input> -->
           <card-title-rule-edit
             v-model="modalForm.titleRule"
             :disabled="!editable"
@@ -147,6 +143,20 @@
             ref="CardTitleRuleEdit"
           ></card-title-rule-edit>
         </el-form-item>
+        <el-form-item prop="firstLevelSubheading" label="一级副标题：">
+          <el-input
+            v-model.trim="modalForm.firstLevelSubheading"
+            clearable
+            :disabled="!editable"
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="secondLevelSubheading" label="二级副标题：">
+          <el-input
+            v-model.trim="modalForm.secondLevelSubheading"
+            clearable
+            :disabled="!editable"
+          ></el-input>
+        </el-form-item>
         <el-form-item prop="attention" label="注意事项：">
           <el-input
             type="textarea"
@@ -160,13 +170,13 @@
         </el-form-item>
         <el-form-item prop="objectiveAttention" label="客观题注意事项：">
           <el-input
-            v-model="modalForm.objectiveAttention"
+            v-model.trim="modalForm.objectiveAttention"
             :disabled="!editable"
           ></el-input>
         </el-form-item>
         <el-form-item prop="subjectiveAttention" label="主观题注意事项：">
           <el-input
-            v-model="modalForm.subjectiveAttention"
+            v-model.trim="modalForm.subjectiveAttention"
             :disabled="!editable"
           ></el-input>
         </el-form-item>
@@ -214,6 +224,8 @@ const initModalForm = {
   requiredFields: [],
   extendFields: [],
   titleRule: "",
+  firstLevelSubheading: "",
+  secondLevelSubheading: "",
   attention: "",
   objectiveAttention: "",
   subjectiveAttention: "",
@@ -317,6 +329,22 @@ export default {
             trigger: "change",
           },
         ],
+        firstLevelSubheading: [
+          {
+            required: false,
+            max: 26,
+            message: "一级副标题最多只能输入26个汉字",
+            trigger: "change",
+          },
+        ],
+        secondLevelSubheading: [
+          {
+            required: false,
+            max: 26,
+            message: "二级副标题最多只能输入26个汉字",
+            trigger: "change",
+          },
+        ],
         objectiveAttention: [
           {
             required: false,

src/modules/card/pages/CardFreeEdit.vue

@@ -1,225 +0,0 @@
-<template>
-  <div class="card-free-edit">
-    <card-free-design
-      v-if="dataReady"
-      ref="CardFreeDesign"
-      :content="cardContent"
-      @on-preview="toPreview"
-      @on-save="toSave"
-      @on-submit="toSubmit"
-      @on-exit="toExit"
-    ></card-free-design>
-    <!-- card-view-frame -->
-    <div class="design-preview-frame" v-if="cardPreviewUrl">
-      <iframe :src="cardPreviewUrl" frameborder="0"></iframe>
-    </div>
-  </div>
-</template>
-
-<script>
-import { cardConfigInfos, cardDetail, saveCard } from "../api";
-import CardFreeDesign from "../../../../card/modules/free/components/CardFreeDesign";
-
-export default {
-  name: "card-free-edit",
-  components: {
-    CardFreeDesign,
-  },
-  data() {
-    return {
-      cardId: this.$route.params.cardId || this.$ls.get("cardId"),
-      prepareTcPCard: this.$ls.get("prepareTcPCard", {
-        examTaskId: "",
-        courseCode: "",
-        courseName: "",
-        makeMethod: "SELF",
-        cardRuleId: "",
-      }),
-      cardContent: {},
-      cardPreviewUrl: "",
-      canSave: false,
-      dataReady: false,
-    };
-  },
-  computed: {
-    isEdit() {
-      return !!this.cardId;
-    },
-  },
-  mounted() {
-    // if (!this.prepareTcPCard.examTaskId && !this.isEdit) {
-    //   this.$message.error("找不到命题任务，请退出题卡制作！");
-    //   return;
-    // }
-    this.initCard();
-    this.registWindowSubmit();
-  },
-  methods: {
-    async initCard() {
-      this.dataReady = false;
-      if (this.isEdit) {
-        await this.getCardTempDetail();
-      } else {
-        const cardConfig = await this.getCardConfig();
-        this.cardContent = {
-          pages: [],
-          cardConfig,
-        };
-      }
-      this.dataReady = true;
-    },
-    getCardTitle(titleRule) {
-      const fieldMap = {
-        courseCode: this.prepareTcPCard.courseCode,
-        courseName: this.prepareTcPCard.courseName,
-        schoolName: this.prepareTcPCard.schoolName,
-      };
-      Object.entries(fieldMap).forEach(([key, val]) => {
-        titleRule = titleRule.replace("${" + key + "}", val);
-      });
-      return titleRule;
-    },
-    async getCardTempDetail() {
-      const detData = await cardDetail(this.cardId);
-
-      // 可能存在题卡内容没有记录的情况
-      if (detData.content) {
-        this.cardContent = JSON.parse(detData.content);
-      } else {
-        let cardConfig = await this.getCardConfig();
-        // 没有题卡内容时，直接创建新的内容
-        if (detData.makeMethod === "CUST") {
-          this.setCardConfig({ cardTitle: detData.title });
-        }
-
-        this.cardContent = {
-          pages: [],
-          cardConfig,
-        };
-      }
-    },
-    async getCardConfig() {
-      const data = await cardConfigInfos(this.prepareTcPCard.cardRuleId);
-      if (!data) {
-        this.$message.error("找不到题卡规则！");
-        return;
-      }
-      let config = {
-        ...data,
-        ...{
-          pageSize: "A3",
-          columnNumber: 2,
-          columnGap: 20,
-          showForbidArea: false,
-          cardDesc: "",
-          makeMethod: this.prepareTcPCard.makeMethod,
-        },
-      };
-      config.aOrB = true; // 默认开启A/B卷型
-      config.requiredFields = JSON.parse(config.requiredFields);
-      config.extendFields = JSON.parse(config.extendFields);
-      config.cardTitle = this.getCardTitle(config.titleRule);
-      return config;
-    },
-    // 操作
-    getRequestConfig() {
-      return this.prepareTcPCard.makeMethod === "CUST"
-        ? {
-            headers: {
-              schoolId: this.prepareTcPCard.schoolId,
-            },
-          }
-        : {};
-    },
-    getCardData(htmlContent = "", model = "") {
-      let data = this.$refs.CardFreeDesign.getCardData(htmlContent, model);
-      data = {
-        ...data,
-        type: "CUSTOM",
-        ...this.prepareTcPCard,
-      };
-      if (this.cardId) data.id = this.cardId;
-      return data;
-    },
-    async toPreview(datas) {
-      await this.toSave(datas);
-
-      const { href } = this.$router.resolve({
-        name: "CardFreePreview",
-        params: {
-          cardId: this.cardId,
-          viewType: "view",
-        },
-      });
-      window.open(href);
-    },
-    async toSave(datas) {
-      datas.status = "STAGE";
-      const result = await saveCard(datas, this.getRequestConfig()).catch(
-        () => {}
-      );
-
-      this.$refs.CardFreeDesign.unloading();
-      if (!result) return;
-
-      this.cardId = result;
-      this.$ls.set("cardId", this.cardId);
-      this.$message.success("保存成功！");
-    },
-    async toSubmit(cardData) {
-      const res = await this.$confirm("确定要提交当前题卡吗?", "提示", {
-        type: "warning",
-      }).catch(() => {});
-      if (res !== "confirm") return;
-
-      window.cardData = cardData;
-      const { href } = this.$router.resolve({
-        name: "CardFreePreview",
-        params: {
-          cardId: 1,
-          viewType: "frame",
-        },
-      });
-      this.cardPreviewUrl = href;
-    },
-    registWindowSubmit() {
-      window.submitCardTemp = async (htmlContent, model) => {
-        const datas = this.getCardData(htmlContent, model);
-        datas.status = "SUBMIT";
-        const result = await saveCard(datas, this.getRequestConfig()).catch(
-          () => {}
-        );
-        this.cardPreviewUrl = "";
-        window.cardData = null;
-        if (result) {
-          this.cardId = result;
-          this.$ls.set("cardId", this.cardId);
-          this.canSave = false;
-          this.$message.success("提交成功！");
-          this.goback();
-        } else {
-          this.$message.error("提交失败，请重新尝试！");
-        }
-      };
-    },
-    toExit() {
-      this.$confirm(
-        "请确保当前题卡已经正常保存，确定要退出当前题卡编辑吗?",
-        "提示",
-        {
-          type: "warning",
-        }
-      )
-        .then(() => {
-          this.goback();
-        })
-        .catch(() => {});
-    },
-  },
-  beforeDestroy() {
-    this.$ls.remove("cardId");
-    this.$ls.remove("prepareTcPCard");
-    delete window.submitCardTemp;
-  },
-};
-</script>

src/modules/card/pages/CardFreePreview.vue

@@ -1,131 +0,0 @@
-<template>
-  <div :class="classes">
-    <card-free-view
-      v-if="pages.length"
-      ref="CardFreeView"
-      class="preview-body"
-      :pages="pages"
-      :card-config="cardConfig"
-    ></card-free-view>
-  </div>
-</template>
-
-<script>
-import CardFreeView from "../../../../card/modules/free/components/CardFreeView";
-import { cardDetail } from "../api";
-import { deepCopy } from "@/plugins/utils";
-const JsBarcode = require("jsbarcode");
-
-export default {
-  name: "card-free-preview",
-  components: { CardFreeView },
-  data() {
-    return {
-      isPrint: this.$route.params.viewType !== "view",
-      isFrame: this.$route.params.viewType === "frame",
-      cardId: this.$route.params.cardId,
-      pages: [],
-      cardConfig: {},
-    };
-  },
-  computed: {
-    classes() {
-      return [
-        "card-free-preview",
-        {
-          "card-print": this.isPrint,
-        },
-      ];
-    },
-  },
-  mounted() {
-    if (this.isFrame) {
-      this.initFrame();
-    } else {
-      this.init();
-    }
-  },
-  methods: {
-    initFrame() {
-      const cardData = window.parent.cardData;
-      if (!cardData) return;
-
-      const { cardConfig, pages } = deepCopy(cardData);
-      let fieldInfos = {};
-      [...cardConfig.requiredFields, ...cardConfig.extendFields]
-        .filter((item) => item.enable)
-        .map((item) => {
-          fieldInfos[item.code] = "${" + item.code + "}";
-        });
-      this.cardConfig = cardConfig;
-      this.pages = this.appendFieldInfo(pages, fieldInfos);
-
-      this.$nextTick(() => {
-        const cardContentTemp = this.$refs.CardFreeView.getPreviewTemp(
-          this.$el.outerHTML
-        );
-        const model = this.$refs.CardFreeView.getPageModel(cardData);
-        window.parent &&
-          window.parent.submitCardTemp &&
-          window.parent.submitCardTemp(cardContentTemp, model);
-      });
-    },
-    async init() {
-      const detData = await cardDetail(this.cardId);
-      if (!detData.content) {
-        this.$message.error("很抱歉，当前题卡还没开始制作！");
-        return;
-      }
-      const { cardConfig, pages } = JSON.parse(detData.content);
-      const fieldInfos = this.fetchFieldInfos(cardConfig, {});
-
-      this.cardConfig = cardConfig;
-      this.pages = this.appendFieldInfo(pages, fieldInfos);
-    },
-    fetchFieldInfos(cardConfig, stdInfo) {
-      let fieldInfos = {};
-      const defContent = "相关信息";
-      [...cardConfig.requiredFields, ...cardConfig.extendFields]
-        .filter((item) => item.enable)
-        .map((item) => {
-          fieldInfos[item.code] = stdInfo[item.code] || defContent;
-        });
-
-      return fieldInfos;
-    },
-    getBase64Barcode(str) {
-      const canvas = document.createElement("CANVAS");
-      JsBarcode(canvas, str, {
-        width: 2,
-        height: 30,
-        displayValue: false,
-        marginLeft: 20,
-        marginRight: 20,
-        marginTop: 0,
-        marginBottom: 0,
-      });
-
-      return canvas.toDataURL();
-    },
-    appendFieldInfo(pages, fieldInfos) {
-      const VALID_ELEMENTS_FOR_EXTERNAL = ["BARCODE", "FILL_FIELD"];
-      pages.forEach((page) => {
-        page.columns.forEach((column) => {
-          column.elements.forEach((element) => {
-            if (!VALID_ELEMENTS_FOR_EXTERNAL.includes(element.type)) return;
-
-            if (element.type === "BARCODE") {
-              const field = element.fields[0] && element.fields[0].code;
-              element.content = `data:image/png;base64,${fieldInfos[field]}`;
-              return;
-            }
-
-            element.fieldInfos = fieldInfos;
-          });
-        });
-      });
-      return pages;
-    },
-  },
-};
-</script>

src/modules/card/pages/CardStandardEdit.vue

@@ -1,225 +0,0 @@
-<template>
-  <div class="card-edit">
-    <card-design
-      v-if="dataReady"
-      ref="CardDesign"
-      :content="cardContent"
-      @on-preview="toPreview"
-      @on-save="toSave"
-      @on-submit="toSubmit"
-      @on-exit="toExit"
-    ></card-design>
-
-    <!-- card-view-frame -->
-    <div class="design-preview-frame" v-if="cardPreviewUrl">
-      <iframe :src="cardPreviewUrl" frameborder="0"></iframe>
-    </div>
-  </div>
-</template>
-
-<script>
-import { cardConfigInfos, cardDetail, saveCard } from "../api";
-import CardDesign from "../../../../card/components/CardDesign";
-
-export default {
-  name: "card-standard-edit",
-  components: {
-    CardDesign,
-  },
-  data() {
-    return {
-      cardId: this.$route.params.cardId || this.$ls.get("cardId"),
-      prepareTcPCard: this.$ls.get("prepareTcPCard", {
-        examTaskId: "",
-        courseCode: "",
-        courseName: "",
-        makeMethod: "SELF",
-        cardRuleId: "",
-      }),
-      cardContent: {},
-      cardPreviewUrl: "",
-      canSave: false,
-      dataReady: false,
-    };
-  },
-  computed: {
-    isEdit() {
-      return !!this.cardId;
-    },
-  },
-  mounted() {
-    if (!this.prepareTcPCard.examTaskId && !this.isEdit) {
-      this.$message.error("找不到命题任务，请退出题卡制作！");
-      return;
-    }
-    this.initCard();
-    this.registWindowSubmit();
-  },
-  methods: {
-    async initCard() {
-      this.dataReady = false;
-      if (this.isEdit) {
-        await this.getCardTempDetail();
-      } else {
-        const cardConfig = await this.getCardConfig();
-        this.cardContent = {
-          pages: [],
-          cardConfig,
-        };
-      }
-      this.dataReady = true;
-    },
-    getCardTitle(titleRule) {
-      const fieldMap = {
-        courseCode: this.prepareTcPCard.courseCode,
-        courseName: this.prepareTcPCard.courseName,
-        schoolName: this.prepareTcPCard.schoolName,
-      };
-      Object.entries(fieldMap).forEach(([key, val]) => {
-        titleRule = titleRule.replace("${" + key + "}", val);
-      });
-      return titleRule;
-    },
-    async getCardTempDetail() {
-      const detData = await cardDetail(this.cardId);
-      // 可能存在题卡内容没有记录的情况
-      if (detData.content) {
-        this.cardContent = JSON.parse(detData.content);
-      } else {
-        let cardConfig = await this.getCardConfig();
-        // 没有题卡内容时，直接创建新的内容
-        if (detData.makeMethod === "CUST") {
-          cardConfig.cardTitle = detData.title;
-        }
-        this.cardContent = {
-          pages: [],
-          cardConfig,
-        };
-      }
-    },
-    async getCardConfig() {
-      const data = await cardConfigInfos(this.prepareTcPCard.cardRuleId);
-      if (!data) {
-        this.$message.error("找不到题卡规则！");
-        return;
-      }
-      let config = {
-        ...data,
-        ...{
-          pageSize: "A3",
-          columnNumber: 2,
-          columnGap: 20,
-          showForbidArea: false,
-          cardDesc: "",
-          makeMethod: this.prepareTcPCard.makeMethod,
-        },
-      };
-      config.aOrB = true; // 默认开启A/B卷型
-      config.requiredFields = JSON.parse(config.requiredFields);
-      config.extendFields = JSON.parse(config.extendFields);
-      config.cardTitle = this.getCardTitle(config.titleRule);
-      return config;
-    },
-    // 操作
-    getRequestConfig() {
-      return this.prepareTcPCard.makeMethod === "CUST"
-        ? {
-            headers: {
-              schoolId: this.prepareTcPCard.schoolId,
-            },
-          }
-        : {};
-    },
-    getCardData(htmlContent = "", model = "") {
-      let data = this.$refs.CardDesign.getCardData(htmlContent, model);
-      data = {
-        ...data,
-        type: "CUSTOM",
-        ...this.prepareTcPCard,
-      };
-      if (this.cardId) data.id = this.cardId;
-      return data;
-    },
-    async toPreview(datas) {
-      await this.toSave(datas);
-
-      const { href } = this.$router.resolve({
-        name: "CardPreview",
-        params: {
-          cardId: this.cardId,
-          viewType: "view",
-        },
-      });
-      window.open(href);
-    },
-    // save
-    async toSave(datas) {
-      datas.status = "STAGE";
-      const result = await saveCard(datas, this.getRequestConfig()).catch(
-        () => {}
-      );
-
-      this.$refs.CardDesign.unloading();
-      if (!result) return;
-
-      this.cardId = result;
-      this.$ls.set("cardId", this.cardId);
-      this.$message.success("保存成功！");
-    },
-    async toSubmit(cardData) {
-      const res = await this.$confirm("确定要提交当前题卡吗?", "提示", {
-        type: "warning",
-      }).catch(() => {});
-      if (res !== "confirm") return;
-
-      window.cardData = cardData;
-      const { href } = this.$router.resolve({
-        name: "CardPreview",
-        params: {
-          cardId: 1,
-          viewType: "frame",
-        },
-      });
-      this.cardPreviewUrl = href;
-    },
-    registWindowSubmit() {
-      window.submitCardTemp = async (htmlContent, model) => {
-        const datas = this.getCardData(htmlContent, model);
-        datas.status = "SUBMIT";
-        const result = await saveCard(datas, this.getRequestConfig()).catch(
-          () => {}
-        );
-        this.cardPreviewUrl = "";
-        window.cardData = null;
-        if (result) {
-          this.cardId = result;
-          this.$ls.set("cardId", this.cardId);
-          this.canSave = false;
-          this.$message.success("提交成功！");
-          this.goback();
-        } else {
-          this.$message.error("提交失败，请重新尝试！");
-        }
-      };
-    },
-    toExit() {
-      this.$confirm(
-        "请确保当前题卡已经正常保存，确定要退出当前题卡编辑吗?",
-        "提示",
-        {
-          type: "warning",
-        }
-      )
-        .then(() => {
-          this.goback();
-        })
-        .catch(() => {});
-    },
-  },
-  beforeDestroy() {
-    this.$ls.remove("cardId");
-    this.$ls.remove("prepareTcPCard");
-    delete window.submitCardTemp;
-  },
-};
-</script>

src/modules/card/views/CardEdit.vue

@@ -160,7 +160,6 @@ export default {
             columnNumber: 2,
             columnGap: 20,
             showForbidArea: false,
-            cardDesc: "",
             makeMethod: this.prepareTcPCard.makeMethod,
           },
         };
@@ -188,7 +187,6 @@ export default {
           columnNumber: 2,
           columnGap: 20,
           showForbidArea: false,
-          cardDesc: "",
           requiredFields,
           extendFields: JSON.parse(extendFields),
         };

src/modules/card/views/CardRulePreview.vue

@@ -58,7 +58,6 @@ export default {
           columnNumber: 2,
           columnGap: 20,
           showForbidArea: false,
-          cardDesc: "",
         },
       };
       config.fillNumber = data.examNumberDigit;