style:证书入库初始化表单验证

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-09-21 10:41:10
+ * @LastEditTime: 2023-10-18 14:49:25
 -->
 <template>
   <div class="from-clues">
@@ -103,12 +103,6 @@
        * @author: renchao
        */
       openDialog (item) {
-        // bdcqzPreview(item).then(res => {
-        //   this.$popupDialog("证书证明预览", "workflow/components/dialog/zsylxq", {
-        //     bsmSlsq: item.bsmSlsq,
-        //     bsmBdcqz: item.bsmBdcqz
-        //   }, '1230px', true)
-        // })
         this.$popupDialog("证书证明预览", "workflow/components/dialog/zsylxq", {
           bsmSlsq: item.bsmSlsq,
           bsmBdcqz: item.bsmBdcqz

@@ -9,7 +9,7 @@
       <el-col :span="12">
         <el-form-item label="登记机构:" prop="djjg">
           <el-select v-model="ruleForm.djjg" class="width100" placeholder="请选择" :disabled="!readOnly">
-            <el-option v-for="item in  DJJGLIST" :key="item.dname" :label="item.dname" :value="item.dname">
+            <el-option v-for="item in DJJGLIST" :key="item.dname" :label="item.dname" :value="item.dname">
             </el-option>
           </el-select>
         </el-form-item>
@@ -66,223 +66,223 @@
 </template>
 
 <script>
-import store from '@/store/index.js'
-import { zsrk, getZsglInfo } from "@/api/zsgl.js"
-import { getSysSerialSingle } from "@/api/sysSerial.js"
-export default {
-  props: {
-    formData: {
-      type: Object,
-      default: () => { },
-    },
-  },
-  data () {
-    return {
-      DJJGLIST: store.getters.dictData['ywly'],
-      readOnly: false,
-      //表单提交数据
-      ruleForm: {
-        batchno: '',
-        djjg: '',
-        operator: '超级管理员',
-        operationtime: '',
-        bz: '',
-        zsstarno: '',
-        zsendno: '',
-        zsnum: '',
-        zmstarno: '',
-        zmendno: '',
-        zmnum: ''
+  import store from '@/store/index.js'
+  import { zsrk, getZsglInfo } from "@/api/zsgl.js"
+  import { getSysSerialSingle } from "@/api/sysSerial.js"
+  export default {
+    props: {
+      formData: {
+        type: Object,
+        default: () => { },
       },
-      //表格数据
-      tableForm: [
-        {
-          name: '不动产权证书',
-          ksysxlh: '',
-          jsysxlh: '',
-          bs: 0,
-          zslx: 1
+    },
+    data () {
+      return {
+        DJJGLIST: store.getters.dictData['ywly'],
+        readOnly: false,
+        //表单提交数据
+        ruleForm: {
+          batchno: '',
+          djjg: '',
+          operator: '超级管理员',
+          operationtime: '',
+          bz: '',
+          zsstarno: '',
+          zsendno: '',
+          zsnum: '',
+          zmstarno: '',
+          zmendno: '',
+          zmnum: ''
         },
-        {
-          name: '不动产登记证明',
-          ksysxlh: '',
-          jsysxlh: '',
-          bs: 0,
-          zslx: 2
-        }
-      ],
-      //证书入库业务号参数
-      ywhQueryForm: {
-        serialtype: 'zsrkbh',
-        serialname: '证书入库编号',
-        serialcode: 'zsrk',
-        digit: '5'
-      },
-      rules: {
-        batchNo: [
-          { required: true, message: '入库编号不能为空', trigger: 'blur' }
-        ],
-        djjg: [
-          { required: true, message: '请选择登记机构', trigger: 'change' }
-        ],
-        rksj: [
-          { required: true, message: '请选择入库时间', trigger: 'change' }
+        //表格数据
+        tableForm: [
+          {
+            name: '不动产权证书',
+            ksysxlh: '',
+            jsysxlh: '',
+            bs: 0,
+            zslx: 1
+          },
+          {
+            name: '不动产登记证明',
+            ksysxlh: '',
+            jsysxlh: '',
+            bs: 0,
+            zslx: 2
+          }
         ],
-      },
-    }
-  },
-  mounted () {
-    if (this.formData.bsmBatch) {
-      this.tableForm[0].bs = null;
-      this.tableForm[1].bs = null;
-      this.getDetailInfo(this.formData.bsmBatch);
-    } else {
-      this.ywhSerial();
-    }
-  },
-  methods: {
-    //表单提交
-    /**
-     * @description: 表单提交
-     * @author: renchao
-     */
-    submitForm () {
-      this.tableForm.forEach((item, index) => {
-        if (item.bs < 0) {
-          return;
-        }
-      })
-      zsrk(this.ruleForm).then(res => {
-        if (res.code == 200) {
-          this.$message.success('保存成功')
-          this.$emit("input", false);
-          this.$refs['ruleForm'].resetFields();
-          this.resetTableFields();
-          this.$parent.queryClick();
-        } else {
-          this.$message.error(res.message);
-        }
-      })
-    },
-    //序列号获取
-    /**
-     * @description: 序列号获取
-     * @author: renchao
-     */
-    ywhSerial () {
-      getSysSerialSingle(this.ywhQueryForm).then(res => {
-        if (res.code == 200) {
-          this.ruleForm.batchno = res.message;
-          this.readOnly = true;
-        }
-      })
+        //证书入库业务号参数
+        ywhQueryForm: {
+          serialtype: 'zsrkbh',
+          serialname: '证书入库编号',
+          serialcode: 'zsrk',
+          digit: '5'
+        },
+        rules: {
+          batchNo: [
+            { required: true, message: '入库编号不能为空', trigger: 'blur' }
+          ],
+          djjg: [
+            { required: true, message: '请选择登记机构', trigger: 'change' }
+          ],
+          rksj: [
+            { required: true, message: '请选择入库时间', trigger: 'change' }
+          ],
+        },
+      }
     },
-    //获取详情信息
-    /**
-     * @description: 获取详情信息
-     * @param {*} bsmBatch
-     * @author: renchao
-     */
-    getDetailInfo (bsmBatch) {
-      getZsglInfo({ "bsmBatch": bsmBatch }).then(res => {
-        if (res.code == 200) {
-          this.ruleForm = res.result;
-          this.readOnly = false;
-          this.tableForm[0].ksysxlh = res.result.zsstarno;
-          this.tableForm[0].jsysxlh = res.result.zsendno;
-          this.tableForm[0].bs = res.result.zsnum;
-          this.tableForm[1].ksysxlh = res.result.zmstarno;
-          this.tableForm[1].jsysxlh = res.result.zmendno;
-          this.tableForm[1].bs = res.result.zmnum;
-        }
-      })
+    mounted () {
+      if (this.formData.bsmBatch) {
+        this.tableForm[0].bs = null;
+        this.tableForm[1].bs = null;
+        this.getDetailInfo(this.formData.bsmBatch);
+      } else {
+        this.ywhSerial();
+      }
     },
-    //印刷序列号处理
-    /**
-     * @description: 印刷序列号处理
-     * @param {*} item
-     * @author: renchao
-     */
-    ysxlhDeal (item) {
-      if (item.ksysxlh && item.jsysxlh) {
-        if (item.ksysxlh.length == item.jsysxlh.length) {
-          if (item.ksysxlh.length != 11) {
-            item.bs = -1;
+    methods: {
+      /**
+       * @description: 表单提交
+       * @author: renchao
+       */
+      submitForm () {
+        this.tableForm.forEach((item, index) => {
+          if (item.bs < 0) {
             return;
           }
-          if (item.ksysxlh > item.jsysxlh) {
+        })
+        zsrk(this.ruleForm).then(res => {
+          if (res.code == 200) {
+            this.$message.success('保存成功')
+            this.$emit("input", false);
+            this.$refs['ruleForm'].resetFields();
+            this.resetTableFields();
+            this.$parent.queryClick();
+          } else {
+            this.$message.error(res.message);
+          }
+        })
+      },
+      //序列号获取
+      /**
+       * @description: 序列号获取
+       * @author: renchao
+       */
+      ywhSerial () {
+        getSysSerialSingle(this.ywhQueryForm).then(res => {
+          if (res.code == 200) {
+            this.ruleForm.batchno = res.message;
+            this.readOnly = true;
+          }
+        })
+      },
+      //获取详情信息
+      /**
+       * @description: 获取详情信息
+       * @param {*} bsmBatch
+       * @author: renchao
+       */
+      getDetailInfo (bsmBatch) {
+        getZsglInfo({ "bsmBatch": bsmBatch }).then(res => {
+          if (res.code == 200) {
+            this.ruleForm = res.result;
+            this.$refs.ruleForm.resetFields()
+            this.readOnly = false;
+            this.tableForm[0].ksysxlh = res.result.zsstarno;
+            this.tableForm[0].jsysxlh = res.result.zsendno;
+            this.tableForm[0].bs = res.result.zsnum;
+            this.tableForm[1].ksysxlh = res.result.zmstarno;
+            this.tableForm[1].jsysxlh = res.result.zmendno;
+            this.tableForm[1].bs = res.result.zmnum;
+          }
+        })
+      },
+      //印刷序列号处理
+      /**
+       * @description: 印刷序列号处理
+       * @param {*} item
+       * @author: renchao
+       */
+      ysxlhDeal (item) {
+        if (item.ksysxlh && item.jsysxlh) {
+          if (item.ksysxlh.length == item.jsysxlh.length) {
+            if (item.ksysxlh.length != 11) {
+              item.bs = -1;
+              return;
+            }
+            if (item.ksysxlh > item.jsysxlh) {
+              item.bs = -1;
+              return;
+            }
+            item.bs = item.jsysxlh - item.ksysxlh + 1;
+            if (item.zslx == 1) {
+              this.ruleForm.zsstarno = item.ksysxlh;
+              this.ruleForm.zsendno = item.jsysxlh;
+              this.ruleForm.zsnum = item.bs
+            } else if (item.zslx == 2) {
+              this.ruleForm.zmstarno = item.ksysxlh;
+              this.ruleForm.zmendno = item.jsysxlh;
+              this.ruleForm.zmnum = item.bs
+            }
+          } else {
             item.bs = -1;
-            return;
           }
-          item.bs = item.jsysxlh - item.ksysxlh + 1;
+        } else {
+          item.bs = 0;
           if (item.zslx == 1) {
-            this.ruleForm.zsstarno = item.ksysxlh;
-            this.ruleForm.zsendno = item.jsysxlh;
+            this.ruleForm.zsstarno = '';
+            this.ruleForm.zsendno = '';
             this.ruleForm.zsnum = item.bs
           } else if (item.zslx == 2) {
-            this.ruleForm.zmstarno = item.ksysxlh;
-            this.ruleForm.zmendno = item.jsysxlh;
+            this.ruleForm.zmstarno = '';
+            this.ruleForm.zmendno = '';
             this.ruleForm.zmnum = item.bs
           }
-        } else {
-          item.bs = -1;
-        }
-      } else {
-        item.bs = 0;
-        if (item.zslx == 1) {
-          this.ruleForm.zsstarno = '';
-          this.ruleForm.zsendno = '';
-          this.ruleForm.zsnum = item.bs
-        } else if (item.zslx == 2) {
-          this.ruleForm.zmstarno = '';
-          this.ruleForm.zmendno = '';
-          this.ruleForm.zmnum = item.bs
         }
+      },
+      /**
+       * @description: resetTableFields
+       * @author: renchao
+       */
+      resetTableFields () {
+        this.tableForm = [
+          {
+            name: '不动产权证书',
+            ksysxlh: '',
+            jsysxlh: '',
+            bs: 0,
+            zslx: 1
+          },
+          {
+            name: '不动产权登记证明',
+            ksysxlh: '',
+            jsysxlh: '',
+            bs: 0,
+            zslx: 2
+          }
+        ]
+      },
+      /**
+       * @description: closeDialog
+       * @author: renchao
+       */
+      closeDialog () {
+        this.$popupCacel()
+        this.$refs['ruleForm'].resetFields();
+        this.resetTableFields();
       }
-    },
-    /**
-     * @description: resetTableFields
-     * @author: renchao
-     */
-    resetTableFields () {
-      this.tableForm = [
-        {
-          name: '不动产权证书',
-          ksysxlh: '',
-          jsysxlh: '',
-          bs: 0,
-          zslx: 1
-        },
-        {
-          name: '不动产权登记证明',
-          ksysxlh: '',
-          jsysxlh: '',
-          bs: 0,
-          zslx: 2
-        }
-      ]
-    },
-    /**
-     * @description: closeDialog
-     * @author: renchao
-     */
-    closeDialog () {
-      this.$popupCacel()
-      this.$refs['ruleForm'].resetFields();
-      this.resetTableFields();
     }
   }
-}
 </script>
 <style scoped lang="scss">
-@import "~@/styles/mixin.scss";
-@import "~@/styles/dialogBoxheader.scss";
+  @import "~@/styles/mixin.scss";
+  @import "~@/styles/dialogBoxheader.scss";
 
-.font-red {
-  color: red
-}
+  .font-red {
+    color: red;
+  }
 
-.middle-margin-bottom {
-  margin-top: 20px
-}
+  .middle-margin-bottom {
+    margin-top: 20px;
+  }
 </style>