题卡中可编辑规则

card/components/CardConfigPropEdit.vue

@@ -1,115 +1,214 @@
 <template>
   <div class="card-config-prop-edit">
-    <el-button @click="drawer = true" type="primary"> 配置题卡信息 </el-button>
+    <el-button @click="open" type="primary"> 配置题卡规则 </el-button>
     <el-drawer
-      title="配置题卡信息"
       :visible.sync="drawer"
       :with-header="false"
       append-to-body
+      :close-on-press-escape="false"
+      :size="820"
+      class="card-config-drawer"
     >
-      <div style="padding: 20px">
-        <el-form ref="form" :model="form" label-width="100px">
-          <el-form-item label="学校名称">
-            <el-input v-model="form.schoolName" @change="editChange">
-            </el-input>
-          </el-form-item>
-          <el-form-item label="考号类型">
-            <el-select
-              v-model="form.examNumberStyle"
-              placeholder="请选择学生考号类型"
-              @change="editChange"
+      <div class="card-config-edit">
+        <div class="card-config-header">
+          <h2>配置题卡规则</h2>
+        </div>
+        <div class="card-config-body">
+          <el-form
+            ref="modalFormComp"
+            label-width="130px"
+            :rules="rules"
+            :model="modalForm"
+          >
+            <el-form-item
+              prop="examNumberStyle"
+              label="考号版式："
+              class="inline-block"
             >
-              <el-option
-                v-for="item in examNumberStyleOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+              <el-select
+                v-model="modalForm.examNumberStyle"
+                style="width: 142px"
+                placeholder="请选择"
+                @change="numStyleChange"
               >
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="AB卷类型">
-            <el-select
-              v-model="form.aOrBType"
-              placeholder="请选择AB卷类型"
-              @change="editChange"
+                <el-option
+                  v-for="(val, key) in EXAM_NUMBER_STYLE"
+                  :key="key"
+                  :value="key"
+                  :label="val"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              prop="fillNumber"
+              label="考号位数："
+              class="inline-block"
             >
-              <el-option
-                v-for="item in aOrBTypeOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+              <el-input-number
+                v-if="modalForm.examNumberStyle === 'FILL'"
+                v-model="modalForm.fillNumber"
+                :min="5"
+                :max="15"
+                :step="1"
+                step-strictly
+                :controls="false"
+                style="width: 100px"
+              ></el-input-number>
+              <span v-else>
+                {{ modalForm.fillNumber }}
+              </span>
+            </el-form-item>
+            <el-form-item>
+              <el-checkbox v-model="modalForm.examAbsent"
+                >启用“缺考填涂”</el-checkbox
               >
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-checkbox v-model="form.aOrB" @change="editChange"
-              >启用AB卷</el-checkbox
-            >
-          </el-form-item>
-          <el-form-item>
-            <el-checkbox v-model="form.examAbsent" @change="editChange"
-              >启用缺考和涂填提示</el-checkbox
-            >
-          </el-form-item>
-          <el-form-item>
-            <el-checkbox v-model="form.writeSign" @change="editChange"
-              >启用手写签名</el-checkbox
-            >
-          </el-form-item>
-          <el-form-item>
-            <el-checkbox v-model="form.showForbidArea" @change="editChange"
-              >启用禁填区</el-checkbox
-            >
-          </el-form-item>
-        </el-form>
+              <el-checkbox v-model="modalForm.discipline"
+                >启用“违纪填涂”</el-checkbox
+              >
+              <el-checkbox
+                v-model="modalForm.writeSign"
+                :disabled="modalForm.examNumberStyle === 'FILL'"
+                >启用“手写签名”</el-checkbox
+              >
+            </el-form-item>
+            <div class="part-box part-box-pad part-box-border">
+              <h4 class="part-box-tips">题卡版头变量印刷字段配置：</h4>
+              <el-form-item label="必选字段：" label-width="115px" required>
+                <el-checkbox
+                  v-for="column in modalForm.requiredFields"
+                  :key="column.code"
+                  v-model="column.enable"
+                  disabled
+                  >{{ column.name }}</el-checkbox
+                >
+              </el-form-item>
+              <el-form-item label="扩展字段：" label-width="115px">
+                <el-checkbox
+                  v-for="column in modalForm.extendFields"
+                  :key="column.code"
+                  v-model="column.enable"
+                  >{{ column.name }}</el-checkbox
+                >
+              </el-form-item>
+            </div>
+            <el-form-item prop="attention" label="注意事项：">
+              <el-input
+                type="textarea"
+                :rows="4"
+                v-model="modalForm.attention"
+              ></el-input>
+              <p class="tips-info">
+                提示：换行之后，题卡注意事项会展示为多条内容，内容序号会被自动添加。
+              </p>
+            </el-form-item>
+            <el-form-item prop="objectiveAttention" label="客观题注意事项：">
+              <el-input v-model="modalForm.objectiveAttention"></el-input>
+            </el-form-item>
+            <el-form-item prop="subjectiveAttention" label="主观题注意事项：">
+              <el-input v-model="modalForm.subjectiveAttention"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="card-config-footer">
+          <el-button @click="cancel">取消</el-button>
+          <el-button type="primary" @click="submit">确认</el-button>
+        </div>
       </div>
     </el-drawer>
   </div>
 </template>
 
 <script>
-import { mapState, mapMutations } from "vuex";
+import { mapState, mapMutations, mapActions } from "vuex";
 import { objAssign } from "../plugins/utils";
+import { EXAM_NUMBER_STYLE, PAPER_TYPE } from "@/constants/enumerate";
+
+const initModalForm = {
+  examNumberStyle: "",
+  fillNumber: 10,
+  paperType: "PRINT",
+  examAbsent: true,
+  discipline: true,
+  writeSign: true,
+  requiredFields: [],
+  extendFields: [],
+  attention: "",
+  objectiveAttention: "",
+  subjectiveAttention: "",
+};
 
 export default {
   name: "card-config-prop-edit",
   data() {
     return {
-      examNumberStyleOptions: [
-        {
-          label: "自动条码",
-          value: "auto",
-        },
-        {
-          label: "手动条码",
-          value: "empty",
-        },
-        {
-          label: "手动涂填",
-          value: "fill",
-        },
-      ],
-      aOrBTypeOptions: [
-        {
-          label: "自动条码",
-          value: "auto",
-        },
-        {
-          label: "手动涂填",
-          value: "fill",
-        },
-      ],
+      modalForm: { ...initModalForm },
+      EXAM_NUMBER_STYLE,
+      PAPER_TYPE,
       drawer: false,
-      form: {
-        schoolName: "河南财经政法大学",
-        examNumberStyle: "fill",
-        aOrBType: "auto",
-        aOrB: true,
-        examAbsent: true,
-        writeSign: true,
-        showForbidArea: false,
+      rules: {
+        examNumberStyle: [
+          {
+            required: true,
+            message: "请选择考号版式",
+            trigger: "change",
+          },
+        ],
+        fillNumber: [
+          {
+            required: true,
+            message: "请输入考号位数",
+            trigger: "change",
+          },
+        ],
+        paperType: [
+          {
+            required: true,
+            message: "请选择AB卷版式",
+            trigger: "change",
+          },
+        ],
+        attention: [
+          {
+            required: true,
+            message: "请输入注意事项",
+            trigger: "change",
+          },
+          {
+            validator: (rule, value, callback) => {
+              const val = value.replace(/\n/g, "");
+              if (val.length > 200) {
+                callback(new Error("注意事项最多只能输入200个字符"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "change",
+          },
+        ],
+        objectiveAttention: [
+          {
+            required: false,
+            message: "请输入客观题注意事项",
+            trigger: "change",
+          },
+          {
+            max: 26,
+            message: "客观题注意事项最多只能输入26个汉字",
+            trigger: "change",
+          },
+        ],
+        subjectiveAttention: [
+          {
+            required: false,
+            message: "请输入主观题注意事项",
+            trigger: "change",
+          },
+          {
+            max: 26,
+            message: "主观题注意事项最多只能输入26个汉字",
+            trigger: "change",
+          },
+        ],
       },
     };
   },
@@ -117,21 +216,61 @@ export default {
     ...mapState("card", ["cardConfig"]),
   },
   watch: {
-    cardConfig(val) {
-      this.form = objAssign(this.form, val);
+    cardConfig: {
+      immediate: true,
+      handler(val) {
+        this.modalForm = objAssign(initModalForm, val);
+      },
     },
   },
   methods: {
     ...mapMutations("card", ["setCardConfig"]),
-    editChange() {
-      this.setCardConfig({ ...this.form });
+    ...mapActions("card", ["rebuildPages"]),
+    open() {
+      this.drawer = true;
+    },
+    cancel() {
+      this.drawer = false;
+    },
+    numStyleChange() {
+      this.modalForm.writeSign = this.modalForm.examNumberStyle !== "FILL";
+      if (this.modalForm.examNumberStyle !== "FILL") {
+        this.modalForm.examNumberDigit = 10;
+      }
+    },
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      this.setCardConfig({ ...this.modalForm });
+      this.cancel();
+
+      this.$nextTick(() => {
+        this.rebuildPages();
+      });
     },
   },
 };
 </script>
 
-<style lang="scss">
-.card-config-prop-edit {
-  display: inline-block;
+<style lang="scss" scoped>
+.card-config-edit {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.card-config-header {
+  padding: 15px 20px;
+  line-height: 20px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.card-config-body {
+  flex: 1;
+  padding: 15px 20px;
+}
+.card-config-footer {
+  padding: 15px 20px;
+  text-align: right;
 }
 </style>

card/components/CardDesign.vue

@@ -62,7 +62,7 @@
             <p class="tips-info">提示：拖动插入元素</p>
           </div>
           <!-- Develop btns -->
-          <!-- <card-config-prop-edit></card-config-prop-edit> -->
+          <card-config-prop-edit class="mt-2"></card-config-prop-edit>
         </div>
         <!-- <br /><br /> -->
         <!-- <el-button @click="initCard">新建页面</el-button> -->
@@ -268,7 +268,7 @@ import {
   OTHER_ELEMENT,
 } from "../elementModel";
 import { CARD_VERSION } from "../enumerate";
-// import CardConfigPropEdit from "../components/CardConfigPropEdit";
+import CardConfigPropEdit from "../components/CardConfigPropEdit";
 import TopicElementEdit from "../components/TopicElementEdit";
 import TopicElementPreview from "../components/TopicElementPreview";
 import PagePropEdit from "../components/PagePropEdit";
@@ -301,7 +301,7 @@ export default {
   },
   mixins: [timeMixin],
   components: {
-    // CardConfigPropEdit,
+    CardConfigPropEdit,
     TopicElementEdit,
     TopicElementPreview,
     PagePropEdit,

src/assets/styles/base.scss

@@ -457,6 +457,9 @@ body {
 .mt-1 {
   margin-top: 5px;
 }
+.mt-2 {
+  margin-top: 10px;
+}
 .mb-0 {
   margin-bottom: 0;
 }