签到表设置

src/modules/base/components/ModifyPrintTemplate.vue

@@ -47,25 +47,6 @@
         </el-select>
       </el-form-item>
       <template v-if="modalForm.classify === 'SIGN'">
-        <el-form-item label="考生数据显示方式：" prop="diallel">
-          <el-radio-group v-model="modalForm.diallel">
-            <el-radio :label="false">单列</el-radio>
-            <el-radio :label="true">双列</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="是否增加空白页：" prop="addBlankPage">
-          <el-radio-group v-model="modalForm.addBlankPage">
-            <el-radio :label="false">否</el-radio>
-            <el-radio :label="true">是</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="考生信息行间距：" prop="lineHeightTimes">
-          <el-radio-group v-model="modalForm.lineHeightTimes">
-            <el-radio :label="1">1倍</el-radio>
-            <el-radio :label="1.5">1.5倍</el-radio>
-            <el-radio :label="2">2倍</el-radio>
-          </el-radio-group>
-        </el-form-item>
         <el-form-item prop="testDesc" label="文字说明：">
           <el-input
             v-model="modalForm.textDesc"
@@ -90,9 +71,71 @@
             v-for="field in signDatas.table"
             :key="field.code"
             v-model="field.enable"
+            @change="signFieldChange"
             >{{ field.name }}</el-checkbox
           >
         </el-form-item>
+        <el-divider content-position="left">签到表页面设置</el-divider>
+        <el-form-item
+          label="考生数据显示方式："
+          prop="diallel"
+          style="margin-bottom: 0"
+        >
+          <el-radio-group v-model="modalForm.diallel">
+            <el-radio :label="false">单列</el-radio>
+            <el-radio :label="true">双列</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          label="是否增加空白页："
+          prop="addBlankPage"
+          style="margin-bottom: 0"
+        >
+          <el-radio-group v-model="modalForm.addBlankPage">
+            <el-radio :label="false">否</el-radio>
+            <el-radio :label="true">是</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          label="考生信息行间距："
+          prop="lineHeightTimes"
+          style="margin-bottom: 0"
+        >
+          <el-radio-group v-model="modalForm.lineHeightTimes">
+            <el-radio :label="1">1倍</el-radio>
+            <el-radio :label="1.5">1.5倍</el-radio>
+            <el-radio :label="2">2倍</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          label="考生信息字号："
+          prop="fontSize"
+          style="margin-bottom: 0"
+        >
+          <el-radio-group v-model="modalForm.fontSize">
+            <el-radio label="small">小</el-radio>
+            <el-radio label="medium">中</el-radio>
+            <el-radio label="large">大</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="信息宽度设置：" prop="fieldWidth">
+          <el-table :data="signTableDatas" border>
+            <el-table-column prop="name" label="列名"></el-table-column>
+            <el-table-column label="宽度" width="200px">
+              <template slot-scope="scope">
+                <el-input-number
+                  v-model="scope.row.rate"
+                  :min="1"
+                  :max="100"
+                  :step="1"
+                  step-strictly
+                  :controls="false"
+                  style="width: 100%"
+                ></el-input-number>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
       </template>
       <el-form-item
         v-else-if="modalForm.classify === 'PACKAGE'"
@@ -142,6 +185,7 @@
 import { templateDetail, updateTemplate, examRuleDetail } from "../api";
 import { attachmentDetail } from "../../login/api";
 import UploadFileView from "@/components/UploadFileView";
+import { calcSum } from "@/plugins/utils";
 
 const initModalForm = {
   id: null,
@@ -154,6 +198,7 @@ const initModalForm = {
   lineHeightTimes: 1,
   textDesc: "",
   attachmentId: "",
+  fontSize: "small",
 };
 
 export default {
@@ -174,6 +219,9 @@ export default {
     title() {
       return (this.isEdit ? "编辑" : "新增") + "模板";
     },
+    signTableDatas() {
+      return this.signDatas.table.filter((item) => item.enable);
+    },
   },
   data() {
     const fieldsValidator = (rule, value, callback) => {
@@ -192,6 +240,16 @@ export default {
         return callback();
       }
     };
+    const fieldsWidthValidator = (rule, value, callback) => {
+      if (this.signTableDatas.some((item) => !item.rate)) {
+        return callback(new Error("请完成设置"));
+      }
+      if (calcSum(this.signTableDatas.map((item) => item.rate)) !== 100) {
+        return callback(new Error("宽度总和需要等于100"));
+      }
+      return callback();
+    };
+
     return {
       modalIsShow: false,
       isSubmit: false,
@@ -235,6 +293,13 @@ export default {
             trigger: "change",
           },
         ],
+        fieldWidth: [
+          {
+            required: true,
+            validator: fieldsWidthValidator,
+            trigger: "change",
+          },
+        ],
       },
       packageDatas: { title: [], basic: [] },
       signDatas: { basic: [], table: [] },
@@ -285,7 +350,7 @@ export default {
         return { ...item, enable: false };
       });
       this.signDatas.table = this.SIGN_DATA.table.map((item) => {
-        return { ...item, enable: false };
+        return { ...item, rate: undefined, enable: false };
       });
     },
     initEditFieldData(data) {
@@ -312,6 +377,9 @@ export default {
         this.$refs.UploadFileView.setAttachmentName(`${data.name}${data.type}`);
       });
     },
+    signFieldChange() {
+      this.$refs.modalFormComp.validateField("fieldWidth", () => {});
+    },
     visibleChange() {
       this.initData(this.instance);
 
@@ -337,6 +405,13 @@ export default {
       if (this.modalForm.classify === "PACKAGE") {
         datas.displayRange = this.packageDatas;
       } else if (this.modalForm.classify === "SIGN") {
+        let signTableRates = {};
+        this.signTableDatas.forEach((item) => {
+          signTableRates[item.code] = item.rate;
+        });
+        this.signDatas.table.forEach((item) => {
+          item.rate = signTableRates[item.code] || 0;
+        });
         datas.displayRange = this.signDatas;
       }
       const data = await updateTemplate(datas).catch(() => {});