Merge pull request '下单国家和省份不一致校验' (#3) from master-dev into master

Reviewed-on: http://git.xdadan.loc/tanex/emis-oms-frontend/pulls/3

src/views/oms/EmisBaseTools/ProvincePicker1.vue

@@ -0,0 +1,114 @@
+<template>
+  <!-- style="width:100%" -->
+ <el-select
+ style="width:100%"
+ filterable
+ clearable
+ v-model="svalue"
+
+ no-data-text=""
+
+ :disabled="disabled"
+auto-complete="off"
+ :placeholder="placeholder"
+ @change="onChange"
+ @click.native="onClick"
+ >
+ <el-option v-for="item in optionItems" :key="item.regionCode" :label="item.regionName" :value="item.regionCode" />
+ </el-select>
+
+
+</template>
+<script>
+import { listSimpleEmisRegion } from "@/api/oms/emisRegion";
+
+export default {
+name: "ProvincePicker",
+props: {
+ value: {
+   type: String,
+   required: false
+ },
+ countryCode: {
+   type: String,
+   required: false
+ },
+ placeholder: {
+   type: String,
+   required: false
+ },
+ disabled: {
+   type: Boolean,
+   required: false,
+   default:false
+ },
+
+},
+data() {
+ return {
+   svalue: this.value,
+   optionItems: [],
+   // 缺省值
+   defaultItems: null,
+ };
+},
+watch: {
+ value(newVal,oldVal) {
+ if (newVal !== this.svalue) {
+      this.svalue = newVal;
+      this.queryData(null, newVal).then(() => {
+        // 当异步数据加载完成后，手动触发一次回调
+        const currentItem = this.optionItems.find(item => item.regionCode === this.svalue);
+        this.$emit("onChange", currentItem);
+      });
+    }
+ },
+ countryCode(newVal, oldVal) {
+   if(newVal!=oldVal){
+       this.defaultItems=null;
+   }
+ }
+},
+created() {
+ if(this.svalue!=null){
+     this.queryData(null,this.svalue);
+ }
+},
+methods: {
+ onClick(){
+   // 第一次点击时需要初始化
+   if(!this.defaultItems){
+     this.queryData(null,null);
+   }else{
+     this.optionItems = [...this.defaultItems];
+   }
+
+ },
+ onChange() {
+   this.$emit("input", this.svalue);
+   const currentItem = this.optionItems.find(item => item.regionCode === this.svalue);
+   this.$emit("onChange", currentItem);
+ },
+  queryData(val,key) {
+   this.optionItems =[];
+
+   let queryParams = {
+     pageNum:1,
+     pageSize:100,
+     countryCode:this.countryCode,
+     regionCode:key,
+     regionType:1
+   };
+
+   return listSimpleEmisRegion(queryParams).then(response => {
+     this.optionItems = response.rows;
+     // 初始值存储
+     if(key==null && val==null){
+       this.defaultItems=[...this.optionItems]
+     }
+   });
+ },
+
+}
+};
+</script>

src/views/oms/emisWaybill/OrderRecord.vue

@@ -87,7 +87,7 @@
                     <el-col :span="24">
                       <el-form-item  :label="$t('发货地区')" prop="sender.province"  >
                         <div style="display:inline-flex">
-                          <province-picker1 v-model="form.sender.province" :countryCode="form.sender.country"  @onChange="handleCalcSendSite"></province-picker1>
+                          <province-picker1 v-model="form.sender.province" :countryCode="form.sender.country"  @onChange="onHandleProvinceChange"></province-picker1>
                           <city-picker1 v-model="form.sender.city" :parentCode="form.sender.province" style="margin-left:5px" @onChange="handleCalcSendSite"></city-picker1>
                           <district-picker1 v-model="form.sender.county" :parentCode="form.sender.city" style="margin-left:5px" @onChange="handleCalcSendSite"></district-picker1>
                         </div>
@@ -158,7 +158,7 @@
                       <el-col :span="24">
                         <el-form-item :label="$t('收货地区')" prop="reciever.province">
                           <div style="display:inline-flex">
-                            <ProvincePicker2  v-model="form.reciever.province" :countryCode="form.reciever.country"   @onChange="handleCalcDestSite" ></ProvincePicker2>
+                            <ProvincePicker2  v-model="form.reciever.province" :countryCode="form.reciever.country"   @onChange="onHandleRecieverProvinceChange" ></ProvincePicker2>
                             <city-picker2 v-model="form.reciever.city" :parentCode="form.reciever.province" style="margin-left:5px"  @onChange="handleCalcDestSite" ></city-picker2>
                             <district-picker2 v-model="form.reciever.county" :parentCode="form.reciever.city" style="margin-left:5px"  @onChange="handleCalcDestSite" ></district-picker2>
                           </div>
@@ -818,12 +818,12 @@ import TransProductPicker from '@/views/oms/EmisBaseTools/TransProductPicker.vue
 import CountryPicker0 from '@/views/oms/EmisBaseTools/CountryPicker.vue';
 import CountryPicker1 from '@/views/oms/EmisBaseTools/CountryPicker.vue';
 
-import ProvincePicker1 from '@/views/oms/EmisBaseTools/ProvincePicker.vue';
+import ProvincePicker1 from '@/views/oms/EmisBaseTools/ProvincePicker1.vue';
 import CityPicker1 from '@/views/oms/EmisBaseTools/CityPicker.vue';
 import DistrictPicker1 from '@/views/oms/EmisBaseTools/DistrictPicker.vue';
 
 import CountryPicker2 from '@/views/oms/EmisBaseTools/CountryPicker.vue';
-import ProvincePicker2 from '@/views/oms/EmisBaseTools/ProvincePicker.vue';
+import ProvincePicker2 from '@/views/oms/EmisBaseTools/ProvincePicker1.vue';
 import CityPicker2 from '@/views/oms/EmisBaseTools/CityPicker.vue';
 import DistrictPicker2 from '@/views/oms/EmisBaseTools/DistrictPicker.vue';
 
@@ -910,6 +910,30 @@ dicts: ['emis_qujian_fangshi','emis_declare_mode','emis_customs_clear',
         'emis_tab_packing_type','emis_tab_dispatch_mode','emis_payment_type',
         'emis_calc_fee_type','emis_print_type'],
 data() {
+    //校验寄件国家地区国家和省份是否匹配
+  var checkSenderCountryProvince = (rule, value, callback) => {
+    if (this.form.sender.country && this.senderCountryCode) {
+      if (this.form.sender.country != this.senderCountryCode) {
+        callback(new Error('寄件国家和省份不一致'));
+      } else {
+        callback();
+      }
+    } else {
+      callback();
+    }
+  }
+  //校验收件国家地区国家和省份是否匹配
+  var checkRecieverCountryProvince = (rule, value, callback) => {
+    if (this.form.reciever.country && this.recieverCountryCode) {
+      if (this.form.reciever.country != this.recieverCountryCode) {
+        callback(new Error('收件国家和省份不一致'));
+      } else {
+        callback();
+      }
+    } else {
+      callback();
+    }
+  }
   return {
     activeNames:['1','2','3','4','5'],
     billCode:null,
@@ -940,6 +964,8 @@ data() {
 	    }
 	  },
     lastBillCode: '', // 手动缓存上一次的billCode
+    senderCountryCode:null, // 寄件人省份国家
+    recieverCountryCode:null, // 收件人 省份国家
     // 表单校验
     rules: {
       // billCode: [
@@ -956,7 +982,8 @@ data() {
           { required: true, message: "收货人手机号不能为空", trigger: ["blur",'change'] }
         ],
         country: [
-          { required: true, message: "收货人国家不能为空",  trigger: ["blur",'change'] }
+          { required: true, message: "收货人国家不能为空",  trigger: ["blur",'change'] },
+          { validator: checkRecieverCountryProvince, trigger: ['blur', 'change'] }
         ],
         province: [
           { required: true, message: "收货省不能为空", trigger: ["blur",'change']  }
@@ -982,7 +1009,8 @@ data() {
           { required: true, message: "寄件人手机号不能为空", trigger: ["blur",'change'] }
         ],
         country: [
-          { required: true, message: "寄件人国家不能为空", trigger: ["blur",'change']  }
+          { required: true, message: "寄件人国家不能为空", trigger: ["blur",'change']  },
+          { validator: checkSenderCountryProvince, trigger: ['blur', 'change'] }
         ],
         province: [
           { required: true, message: "寄件省不能为空", trigger: ["blur",'change']  }
@@ -1838,6 +1866,15 @@ methods: {
     handleCalcSendSite(){
        this.calcSendSite();
     },
+    // 发货地址省份发生变化
+    onHandleProvinceChange(val){
+      this.senderCountryCode=val.countryCode;
+      this.calcSendSite();
+      // 省份选择后，强制校验国家是否匹配
+      this.$nextTick(() => {
+        this.$refs.form.validateField("sender.country");
+      });
+    },
     calcSendSite(){
       console.log("===>this.form.pickupMethod===>",this.form.pickupMethod);
 
@@ -1864,6 +1901,15 @@ methods: {
     handleCalcDestSite(){
       this.calcDestSite();
     },
+    // 接收地址省份发生变化
+    onHandleRecieverProvinceChange(val){
+      this.recieverCountryCode=val.countryCode;
+      this.calcDestSite();
+      // 省份选择后，强制校验国家是否匹配
+      this.$nextTick(() => {
+        this.$refs.form.validateField("reciever.country");
+      });
+    },
     calcDestSite(){
       let queryParams = {
           province:this.form.reciever.province,