feat: 学号填涂调整

card/elements/card-head/cardHeadSpin/HeadStdno.vue

@@ -29,8 +29,12 @@
           :key="n"
           :style="columnStyles"
         >
-          <div class="stdno-fill-option" v-for="m in 10" :key="m">
-            <i>{{ m - 1 }}</i>
+          <div
+            class="stdno-fill-option"
+            v-for="m in getColumnFills(n)"
+            :key="m"
+          >
+            <i>{{ m }}</i>
           </div>
         </div>
       </div>
@@ -48,23 +52,39 @@ export default {
   },
   data() {
     return {
-      fillNumber: this.data["fillNumber"] || 13,
       examNumberBarcodeSrc:
         this.data["fieldInfos"] && this.data["fieldInfos"]["examNumber"],
       examNumberBarcodeName:
         this.data["fieldInfos"] && this.data["fieldInfos"]["examNumberStr"],
+      defaultColumnFills: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
     };
   },
   computed: {
     classes() {
       return ["head-stdno", "card-head-body-spin"];
     },
+    fillNumber() {
+      return this.data["fillNumber"] || 13;
+    },
     columnStyles() {
       return {
         width: (100 / this.fillNumber).toFixed(2) + "%",
       };
     },
   },
-  methods: {},
+  methods: {
+    getColumnFills(columnIndex) {
+      if (!this.data.relationList || !this.data.relationList.length) {
+        return [...this.defaultColumnFills];
+      }
+
+      const curRelation = this.data.relationList.find(
+        (item) => item.columnIndex === columnIndex
+      );
+      if (!curRelation) return [...this.defaultColumnFills];
+
+      return curRelation.letters;
+    },
+  },
 };
 </script>

src/modules/admin/components/school/SchoolSetStdno.vue

@@ -14,7 +14,7 @@
           :step="1"
           step-strictly
           :controls="false"
-          style="width: 200px"
+          style="width: 80px"
         ></el-input-number>
         <span class="tips-info">（如：10）</span>
       </el-form-item>
@@ -88,15 +88,23 @@
         >
       </el-form-item>
     </el-form>
+
+    <!-- stdno view -->
+    <div class="card-head-body">
+      <h3 class="mb-1">答题卡学号区域预览：</h3>
+      <head-stdno :data="headStdnoData"></head-stdno>
+    </div>
   </div>
 </template>
 
 <script>
 import { deepCopy } from "@/plugins/utils";
 import { schoolSetStdnoInfo, schoolSetStdnoUpdate } from "../../api";
+import HeadStdno from "../../../../../card/elements/card-head/cardHeadSpin/HeadStdno.vue";
 
 export default {
   name: "school-set-stdno",
+  components: { HeadStdno },
   props: {
     school: {
       type: Object,
@@ -162,8 +170,17 @@ export default {
       },
     };
   },
+  computed: {
+    headStdnoData() {
+      return {
+        examNumberStyle: "FILL",
+        fillNumber: this.modalForm.digit,
+        relationList: this.modalForm.relationList,
+      };
+    },
+  },
   mounted() {
-    this.initData();
+    // this.initData();
   },
   methods: {
     async initData() {
@@ -182,12 +199,15 @@ export default {
       }
 
       this.modalForm = {
-        digit: config.digit,
+        digit: config.digit || 10,
         containsLetter: config.containsLetter,
-        columns: config.relationList.map((item) => item.columnIndex),
-        relationList: config.relationList,
+        columns: [],
+        relationList: config.relationList || [],
         columnChar: "",
       };
+      this.modalForm.columns = this.modalForm.relationList.map(
+        (item) => item.columnIndex
+      );
       if (this.modalForm.columns.length) {
         this.curSelectColumn = this.modalForm.columns[0];
         this.selectColumnChange();
@@ -285,3 +305,25 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.school-set-stdno {
+  width: 1000px;
+  display: flex;
+  justify-content: space-between;
+  .el-form {
+    flex-grow: 2;
+  }
+
+  .card-head-body {
+    width: 340px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  .head-stdno {
+    border: 1px solid #000;
+    height: 240px;
+  }
+}
+</style>