欧洲申报添加校验

src/views/iosBasicData/SeafreightExportF/bills/assembly/edicode.vue

@@ -3,7 +3,7 @@
         <el-form :model="assemblyForm" ref="form" label-width="90px" class="demo-ruleForm" :disabled="disabled">
             <el-row>
                 <el-button icon="el-icon-plus" size="small" type="primary" style="margin: 5px;"
-                    @click="test">现代EDI</el-button>
+                    @click="openHmmEdi">现代EDI</el-button>
             </el-row>
             <el-row>
                 <el-col :span="12">
@@ -165,9 +165,24 @@
             </el-row>
         </el-form>
         <el-dialog title="HMM EDI信息" :visible.sync="dialogVisible" width="70%" :modal="false" :append-to-body="true">
-            <avue-form :option="hmmOption" v-model="baseData">
+            <avue-form :option="hmmOption" v-model="assemblyForm.hmmEdi" @submit="submitHmm" @reset-change="dialogVisible = false">
                 <tempalte slot="applicant" slot-scope="{ row }">
-                    <el-input v-model="baseData.applicant" placeholder="请输入 补充申报人" @input="upperCas('applicant',baseData.applicant)"></el-input>
+                    <el-input v-model="assemblyForm.hmmEdi.applicant" placeholder="请输入 补充申报人" @input="upperCas('applicant',assemblyForm.hmmEdi.applicant)"></el-input>
+                </tempalte>
+                <tempalte slot="shipperCode" slot-scope="{ row }">
+                    <el-input v-model="assemblyForm.hmmEdi.shipperCode" placeholder="请输入 发货人代码" @input="upperCas('shipperCode',assemblyForm.hmmEdi.shipperCode)"></el-input>
+                </tempalte>
+                <tempalte slot="actualShipperCode" slot-scope="{ row }">
+                    <el-input v-model="assemblyForm.hmmEdi.actualShipperCode" placeholder="请输入 实际发货人代码" @input="upperCas('actualShipperCode',assemblyForm.hmmEdi.actualShipperCode)"></el-input>
+                </tempalte>
+                <tempalte slot="consigneeCode" slot-scope="{ row }">
+                    <el-input v-model="assemblyForm.hmmEdi.consigneeCode" placeholder="请输入 收货人代码" @input="upperCas('consigneeCode',assemblyForm.hmmEdi.consigneeCode)"></el-input>
+                </tempalte>
+                <tempalte slot="notifierCode" slot-scope="{ row }">
+                    <el-input v-model="assemblyForm.hmmEdi.notifierCode" placeholder="请输入 通知人代码" @input="upperCas('notifierCode',assemblyForm.hmmEdi.notifierCode)"></el-input>
+                </tempalte>
+                <tempalte slot="actualConsigneeCode" slot-scope="{ row }">
+                    <el-input v-model="assemblyForm.hmmEdi.actualConsigneeCode" placeholder="请输入 实际收货人代码" @input="upperCas('actualConsigneeCode',assemblyForm.hmmEdi.actualConsigneeCode)"></el-input>
                 </tempalte>
             </avue-form>
         </el-dialog>
@@ -195,11 +210,20 @@ export default {
         }
     },
     data() {
+        var validateVariable = (rule, value, callback)=>  {
+            if (value === '') {
+                callback();
+            }
+            const regex = /^[A-Z]{2}[A-Z0-9]{1,15}$/;
+            if (!regex.test(value)) {
+                callback(new Error('长度应为 3~17 个字符，不能出现特殊符号'));
+            }
+            callback();
+        };
         return {
             pilHblData: [],
             reload: Math.random(),
             dialogVisible: false,
-            baseData: {},
             hmmOption: {
                 submitText: '确定',
                 emptyText: '取消',
@@ -248,23 +272,19 @@ export default {
                         span: 12,
                         prop: "applicant",
                         row: true,
-                        // change: ({ value, column}) => {
-                        //     value = value.toUpperCase()
-                        //     console.info('value', this.baseData)
-                        //     console.info(value, column)
-                        //     this.$set(this.baseData, 'applicant', value.toUpperCase())
-                        //     //  this.reload=Math.random();
-                        // }
+                        rules: [{ validator: validateVariable, trigger: 'blur' }]
                     },
                     {
                         label: "发货人代码",
                         span: 12,
                         prop: "shipperCode",
+                        rules: [{ validator: validateVariable, trigger: 'blur' }]
                     },
                     {
                         label: "实际发货人代码",
                         span: 12,
                         prop: "actualShipperCode",
+                        rules: [{ validator: validateVariable, trigger: 'blur' }]
                     },
                     {
                         label: "发货人邮政信箱",
@@ -310,6 +330,7 @@ export default {
                         label: "收货人代码",
                         span: 12,
                         prop: "consigneeCode",
+                        rules: [{ validator: validateVariable, trigger: 'blur' }]
                     },
                     {
                         label: "实际发货人街道名称",
@@ -335,6 +356,7 @@ export default {
                         label: "实际收货人代码",
                         span: 12,
                         prop: "actualConsigneeCode",
+                        rules: [{ validator: validateVariable, trigger: 'blur' }]
                     },
                     {
                         label: "收货人街道名称",
@@ -360,6 +382,7 @@ export default {
                         label: "通知人代码",
                         span: 12,
                         prop: "notifierCode",
+                        rules: [{ validator: validateVariable, trigger: 'blur' }]
                     },
                     {
                         label: "实际收货人邮政信箱",
@@ -443,12 +466,17 @@ export default {
             return regex.test(input);
         },
         upperCas(name,str) {
-            console.log(str)
-            this.baseData[name]=str.toUpperCase()
-            // return str.toUpperCase()
+            this.assemblyForm.hmmEdi[name]=str.toUpperCase()
+        },
+        submitHmm(res,done){
+            done()
+            console.log(res, 'hmmEdi')
+            this.dialogVisible = false
         },
-        test() {
-            this.baseData = this.assemblyForm.hmmEdi
+        openHmmEdi() {
+            if (!this.assemblyForm.id) {
+                return this.$message.error('请先保存数据');
+            }
             this.dialogVisible = true
         },
         inHmmEdi() {