页码编辑

src/assets/styles/base.scss

@@ -270,6 +270,18 @@ body {
     color: $--color-text-placeholder;
   }
 }
+.btn-primary {
+  &.el-button--text:not(.is-disabled) {
+    color: $--color-primary !important;
+
+    &:hover {
+      color: mix(#000, $--color-primary, 20%) !important;
+    }
+  }
+  &.is-disabled {
+    color: $--color-text-placeholder;
+  }
+}
 
 .box-justify {
   display: flex;

src/assets/styles/pages.scss

@@ -1536,3 +1536,53 @@
     }
   }
 }
+
+// card-title-rule-edit
+.card-title-rule-edit {
+  .field-item {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 10px 10px 0;
+    padding: 8px 10px;
+    border-radius: 4px;
+    line-height: 1;
+    background-color: $--color-background;
+    cursor: pointer;
+
+    &:hover {
+      color: $--color-primary;
+    }
+    &-act {
+      background-color: $--color-primary;
+      color: #fff !important;
+    }
+    &-disabled {
+      cursor: not-allowed;
+
+      &:hover {
+        color: $--color-text-primary;
+      }
+    }
+  }
+  .field-textarea {
+    border-radius: 4px;
+    border: 1px solid $--color-text-secondary;
+    min-height: 60px;
+    padding: 2px;
+    overflow: hidden;
+
+    &:focus {
+      border-color: $--color-primary;
+    }
+
+    span.var-field {
+      display: inline-block;
+      vertical-align: middle;
+      padding: 3px 5px;
+      background-color: $--color-primary;
+      color: $--color-white;
+      line-height: 1;
+      border-radius: 3px;
+    }
+  }
+}

src/modules/paper-export/assets/styles/paper-temp-design.scss

@@ -22,4 +22,8 @@
   .page-column-element .element-item::before {
     border: 1px dashed #333;
   }
+  .page-number-text-cont {
+    overflow: hidden;
+    white-space: pre;
+  }
 }

src/modules/paper-export/assets/styles/paper-temp-preview.scss

@@ -335,4 +335,8 @@
   .p-no {
     margin-top: -3px;
   }
+  .page-number-text-cont {
+    overflow: hidden;
+    white-space: pre;
+  }
 }

src/modules/paper-export/components/ModifyPageNumberRule.vue

@@ -0,0 +1,169 @@
+<template>
+  <el-dialog
+    class="modify-card-rule"
+    :visible.sync="modalIsShow"
+    title="设置页码规则"
+    top="10vh"
+    width="950px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @open="initData"
+  >
+    <div class="card-title-rule-edit">
+      <div class="field-list">
+        <div
+          v-for="field in fields"
+          :key="field.code"
+          :class="[
+            'field-item',
+            {
+              'field-item-act': field.selected,
+            },
+          ]"
+          @mousedown="(event) => selectField(field, event)"
+        >
+          {{ field.name }}（{{ field.code }}）
+        </div>
+      </div>
+      <el-input
+        ref="FieldTextarea"
+        v-model="content"
+        type="textarea"
+        resize="none"
+        :rows="2"
+        placeholder="请输入内容"
+        @input="contentChange"
+      >
+      </el-input>
+    </div>
+
+    <div slot="footer">
+      <el-button type="primary" @click="submit">确认</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "modify-page-number-rule",
+  data() {
+    return {
+      modalIsShow: false,
+      fields: [],
+      fieldNameToCode: {},
+      fieldCodeToName: {},
+      frameWin: null,
+      content: "",
+      fieldSourses: [
+        {
+          code: "rootOrgName",
+          enable: true,
+          name: "学校名称",
+        },
+        {
+          code: "courseName",
+          enable: true,
+          name: "课程名称",
+        },
+        {
+          code: "courseCode",
+          enable: true,
+          name: "课程代码",
+        },
+        {
+          code: "pageNumber",
+          enable: true,
+          name: "页码",
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapState("paper-export", ["pageConfig"]),
+  },
+  mounted() {
+    this.setFields();
+  },
+  methods: {
+    initData() {
+      this.content = this.pageConfig.pageNumberRule || "";
+      this.updateFieldStatus();
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    setFields() {
+      const selectedCodes = this.fields
+        .filter((item) => item.selected)
+        .map((item) => item.code);
+      this.fields = this.fieldSourses.map((item) => {
+        item.selected = selectedCodes.includes(item.code);
+        return item;
+      });
+      this.fields.forEach((field) => {
+        this.fieldNameToCode[field.name] = field.code;
+        this.fieldCodeToName[field.code] = field.name;
+      });
+    },
+    updateFieldStatus() {
+      const rexp = new RegExp(/\$\{.+?\}/, "g");
+      const variates = this.content.match(rexp);
+
+      const selectedCodes = variates
+        ? variates.map((item) => item.replace("${", "").replace("}", ""))
+        : [];
+      this.fields = this.fields.map((field) => {
+        field.selected = selectedCodes.includes(field.code);
+        return field;
+      });
+    },
+    rebuildTextarea() {
+      const soursesCodes = this.fieldSourses.map((item) => item.code);
+      const deletedCodes = this.fields.filter(
+        (item) => item.selected && !soursesCodes.includes(item.code)
+      );
+      console.log(deletedCodes);
+      deletedCodes.forEach((field) => {
+        this.content = this.content.replace(`\${${field.code}}`, "");
+      });
+    },
+    selectField(field, event) {
+      event.preventDefault();
+      field.selected = !field.selected;
+      if (field.selected) {
+        // 选中
+        const variateStr = `\${${field.code}}`;
+        const textareaDom = this.$refs.FieldTextarea.$el.children[0];
+        const { selectionStart, selectionEnd } = textareaDom;
+
+        this.content =
+          this.content.slice(0, selectionStart) +
+          variateStr +
+          this.content.slice(selectionEnd);
+      } else {
+        // 取消
+        this.content = this.content.replace(`\${${field.code}}`, "");
+      }
+    },
+    contentChange() {
+      this.content = this.content.replace("\n", "");
+      this.updateFieldStatus();
+    },
+    submit() {
+      if (!this.fields.find((item) => item.code === "pageNumber").selected) {
+        this.$message.error("请插入页码");
+        return;
+      }
+      this.$emit("confirm", this.content);
+      this.cancel();
+    },
+  },
+};
+</script>

src/modules/paper-export/components/PageNumber.vue

@@ -8,7 +8,8 @@
       ></li>
     </ul>
     <div v-if="type === 'text'" class="page-number-text-cont">
-      第{{ current }}页（共{{ total }}页）
+      <template v-if="rule"> {{ rule }} </template>
+      <template v-else>第{{ current }}页（共{{ total }}页）</template>
     </div>
   </div>
 </template>
@@ -24,6 +25,10 @@ export default {
         return ["text", "rect"].indexOf(val) !== -1;
       },
     },
+    rule: {
+      type: String,
+      default: "",
+    },
     total: {
       type: Number,
       default: 1,

src/modules/paper-export/components/PagePropEdit.vue

@@ -51,7 +51,18 @@
           >显示</el-checkbox
         >
       </el-form-item>
+      <el-form-item label="页码">
+        <el-button type="text" class="btn-primary" @click="toSetPageNumber"
+          >设置</el-button
+        >
+      </el-form-item>
     </el-form>
+
+    <!-- ModifyPageNumberRule -->
+    <modify-page-number-rule
+      ref="ModifyPageNumberRule"
+      @confirm="pageNumberRuleChange"
+    ></modify-page-number-rule>
   </div>
 </template>
 
@@ -59,6 +70,7 @@
 import { mapState, mapMutations, mapActions } from "vuex";
 import { objAssign } from "../../card/plugins/utils";
 import { getModel as getPageModel } from "../elements/page/model";
+import ModifyPageNumberRule from "./ModifyPageNumberRule.vue";
 
 const COLUMN_OPTIONS = [
   {
@@ -107,6 +119,7 @@ const PAGE_SIZE_OPTIONS = {
 
 export default {
   name: "PagePropEdit",
+  components: { ModifyPageNumberRule },
   data() {
     return {
       columnOptions: [],
@@ -118,6 +131,7 @@ export default {
         showPageNo: true,
         showCover: false,
         showSide: true,
+        pageNumberRule: "",
       },
       prePageSize: "A3",
     };
@@ -164,6 +178,13 @@ export default {
         })
         .catch(() => {});
     },
+    toSetPageNumber() {
+      this.$refs.ModifyPageNumberRule.open();
+    },
+    pageNumberRuleChange(val) {
+      this.form.pageNumberRule = val;
+      this.configChange();
+    },
     columnNumChange(val) {
       this.form.columnNumber = val;
       this.setPageConfig(this.form);

src/modules/paper-export/components/PaperTemplateDesign.vue

@@ -126,8 +126,7 @@
                 <page-number
                   v-if="curPage.showPageNo && curPage.pageType !== 'cover'"
                   type="text"
-                  :total="getTotalPage()"
-                  :current="getPageNumber(curPageNo, columnNo)"
+                  :rule="getPageNumberCont(curPage.pageNumberRule)"
                 ></page-number>
               </div>
             </div>
@@ -323,6 +322,11 @@ export default {
         this.rebuildPages();
       });
     },
+    getPageNumberCont(pageNumberRule) {
+      return pageNumberRule
+        ? pageNumberRule.replace("${pageNumber}", "第XX页（共XX页）")
+        : "第XX页（共XX页）";
+    },
     // 元件编辑
     dragstart(element) {
       let presetData = {};

src/modules/paper-export/components/PaperTemplateView.vue

@@ -55,8 +55,7 @@
               <page-number
                 v-if="page.showPageNo && page.pageType !== 'cover'"
                 type="text"
-                :total="getTotalPage()"
-                :current="getPageNumber(pageNo, columnNo)"
+                :rule="getPageNumberCont(page.pageNumberRule, pageNo, columnNo)"
               ></page-number>
             </div>
           </div>
@@ -131,6 +130,15 @@ export default {
       const pageCount = this.pages.filter((p) => p.pageType !== "cover").length;
       return pageCount * this.pageConfig.columnNumber;
     },
+    getPageNumberCont(pageNumberRule, curPageNo, columnNo) {
+      const pageCont = `第${this.getPageNumber(
+        curPageNo,
+        columnNo
+      )}页（共${this.getTotalPage()}页）`;
+      return pageNumberRule
+        ? pageNumberRule.replace("${pageNumber}", pageCont)
+        : pageCont;
+    },
   },
 };
 </script>

src/modules/paper-export/elementModel.js

@@ -135,6 +135,7 @@ const PAGE_CONFIG = {
   showPageNo: true,
   showSide: true,
   showCover: false,
+  pageNumberRule: "",
 };
 
 export {

src/modules/paper-export/elements/page/model.js

@@ -15,6 +15,7 @@ const MODEL = {
   showPageNo: true,
   showSide: true,
   showCover: false,
+  pageNumberRule: "",
   sides: [],
   columns: [],
 };

src/modules/paper-export/store/index.js

@@ -2,7 +2,6 @@ import {
   deepCopy,
   calcSum,
   getElementId,
-  objAssign,
   randomCode,
 } from "../../card/plugins/utils";
 import { getModel as getPageModel } from "../elements/page/model";
@@ -163,7 +162,7 @@ const actions = {
   },
   modifyPagesInfo({ state, commit }, data) {
     for (let i = 0; i < state.pages.length; i++) {
-      state.pages[i] = objAssign(state.pages[i], data);
+      state.pages[i] = Object.assign({}, state.pages[i], data);
     }
     commit("setCurPage", state.curPageNo);
   },

src/modules/paper-export/views/PaperTemplateBuild.vue

@@ -300,6 +300,14 @@ export default {
     updaterFieldInfo() {
       const VALID_ELEMENTS_FOR_EXTERNAL = ["FIELD_TEXT"];
       this.paperTempJson.pages.forEach((page) => {
+        if (page.pageNumberRule) {
+          Object.keys(this.fieldData).forEach((field) => {
+            page.pageNumberRule = page.pageNumberRule.replace(
+              "${" + field + "}",
+              this.fieldData[field]
+            );
+          });
+        }
         page.columns.forEach((column) => {
           column.elements.forEach((elem) => {
             if (elem.type === "PAPER_STRUCT") {

src/modules/paper-export/views/paperTemplateBuildMixins.js

@@ -126,6 +126,7 @@ export default {
         const optionCount = options.length;
         const IS_PARAGRAPH_MATCHING = questionType === "PARAGRAPH_MATCHING";
         const IS_BANKED_CLOZE = questionType === "BANKED_CLOZE";
+        const IS_NOUNS = questionType === "NOUNS";
 
         // 构建选项元素信息
         const opitonList = options.map((optionIds) => {
@@ -146,7 +147,7 @@ export default {
         let resetPercent = 1;
         // 奇数选项，段落匹配，全部一行
         if (
-          (optionCount % 2 > 0 && !IS_BANKED_CLOZE) ||
+          (optionCount % 2 > 0 && !IS_BANKED_CLOZE && !IS_NOUNS) ||
           IS_PARAGRAPH_MATCHING
         ) {
           resetPercent = 1;
@@ -305,7 +306,7 @@ export default {
         groups.push(...detailDescriptionGroups);
         // 名词解释相关
         if (detail.options && detail.options.length) {
-          let optionsGroups = parseOptions(detail.options, "");
+          let optionsGroups = parseOptions(detail.options, "NOUNS");
           optionsGroups.forEach((optionsGroup) => {
             optionsGroup.styles.paddingLeft = undefined;
           });
@@ -646,6 +647,7 @@ export default {
       let newPage = getPageModel({
         ...this.paperTempJson.pageConfig,
         pageType: pageTemp.pageType,
+        pageNumberRule: pageTemp.pageNumberRule,
       });
       newPage.sides = pageTemp.sides.map((elem) => {
         let nelem = deepCopy(elem);

src/modules/paper/views/EditPaper.vue

@@ -122,6 +122,9 @@
           </el-button>
         </div>
         <div>
+          <el-button size="small" type="primary" plain @click="previewPDF2"
+            >预览</el-button
+          >
           <el-button
             type="primary"
             size="small"
@@ -638,7 +641,7 @@ export default {
         paperDetails: [],
       },
       checkDuplicateBtnShow: false,
-      quesTagShow: false,
+      quesTagShow: true,
       quesAnswerShow: false,
       curDetail: {},
       curQuestion: {},
@@ -687,6 +690,16 @@ export default {
         this.$notify.error("有小题未设置分值！");
       }
     },
+    previewPDF2() {
+      window.open(
+        this.getRouterPath({
+          name: "PaperTemplateBuild",
+          params: {
+            paperId: this.paper.id,
+          },
+        })
+      );
+    },
     // header-actions
     showCheckDuplicate() {
       if (this.paper.checkDuplicateStatus === "DISPOSED") {