人员年龄、省市区选择

src/views/Letter/Letter.vue

@@ -226,7 +226,7 @@
           </el-col>
           <el-col :xs="xscell" :sm="smcell" :md="mdcell" :lg="lgcell" :xl="xlcell">
             <el-form-item label="年龄：" prop="age">
-              <el-input v-model="ownerInfo.age" placeholder="请输入年龄" type="text"></el-input>
+              <el-input v-model="ownerInfo.age" placeholder="请输入年龄" type="text" disabled></el-input>
             </el-form-item>
           </el-col>
           <el-col :xs="xscell" :sm="smcell" :md="mdcell" :lg="lgcell" :xl="xlcell">
@@ -235,12 +235,12 @@
                 show-word-limit></el-input>
             </el-form-item>
           </el-col>
-          <!-- <el-col :xs="xscell" :sm="smcell" :md="mdcell" :lg="lgcell" :xl="xlcell">
-            <el-form-item label="省市区：" prop="shengshiqu">
-              <el-cascader v-model="selectedOptions" :options="areaOptions" @change="areahandleChange"
-                ref="shengshi"></el-cascader>
+          <el-col :xs="xscell" :sm="smcell" :md="mdcell" :lg="lgcell" :xl="xlcell">
+            <el-form-item label="省市区：">
+              <el-cascader v-model="selectedOptions1" :options="areaOptions"
+                @change="event => areahandleChange(event, 'ownerInfo')"></el-cascader>
             </el-form-item>
-          </el-col> -->
+          </el-col>
           <el-col :xs="xscell" :sm="smcell" :md="mdcell" :lg="lgcell" :xl="xlcell">
             <el-form-item label="地址：" prop="addr">
               <el-input v-model="ownerInfo.addr" placeholder="请输入地址" type="text"></el-input>
@@ -308,7 +308,7 @@
           </el-col>
           <el-col :xs="xscell" :sm="smcell" :md="mdcell" :lg="lgcell" :xl="xlcell">
             <el-form-item label="年龄：" prop="age">
-              <el-input v-model="policyHolderInfo.age" placeholder="请输入年龄" type="text"></el-input>
+              <el-input v-model="policyHolderInfo.age" placeholder="请输入年龄" type="text" disabled></el-input>
             </el-form-item>
           </el-col>
           <el-col :xs="xscell" :sm="smcell" :md="mdcell" :lg="lgcell" :xl="xlcell">
@@ -317,6 +317,12 @@
                 show-word-limit></el-input>
             </el-form-item>
           </el-col>
+          <el-col :xs="xscell" :sm="smcell" :md="mdcell" :lg="lgcell" :xl="xlcell">
+            <el-form-item label="省市区：">
+              <el-cascader v-model="selectedOptions2" :options="areaOptions"
+                @change="event => areahandleChange(event, 'policyHolderInfo')"></el-cascader>
+            </el-form-item>
+          </el-col>
           <el-col :xs="xscell" :sm="smcell" :md="mdcell" :lg="lgcell" :xl="xlcell">
             <el-form-item label="地址：" prop="addr">
               <el-input v-model="policyHolderInfo.addr" placeholder="请输入地址" type="text"></el-input>
@@ -388,7 +394,7 @@
           </el-col>
           <el-col :xs="xscell" :sm="smcell" :md="mdcell" :lg="lgcell" :xl="xlcell">
             <el-form-item label="年龄：" prop="age">
-              <el-input v-model="insuredPersonInfo.age" placeholder="请输入年龄" type="text"></el-input>
+              <el-input v-model="insuredPersonInfo.age" placeholder="请输入年龄" type="text" disabled></el-input>
             </el-form-item>
           </el-col>
           <el-col :xs="xscell" :sm="smcell" :md="mdcell" :lg="lgcell" :xl="xlcell">
@@ -397,6 +403,12 @@
                 show-word-limit></el-input>
             </el-form-item>
           </el-col>
+          <el-col :xs="xscell" :sm="smcell" :md="mdcell" :lg="lgcell" :xl="xlcell">
+            <el-form-item label="省市区：">
+              <el-cascader v-model="selectedOptions3" :options="areaOptions"
+                @change="event => areahandleChange(event, 'insuredPersonInfo')"></el-cascader>
+            </el-form-item>
+          </el-col>
           <el-col :xs="xscell" :sm="smcell" :md="mdcell" :lg="lgcell" :xl="xlcell">
             <el-form-item label="地址：" prop="addr">
               <el-input v-model="insuredPersonInfo.addr" placeholder="请输入地址" type="text"></el-input>
@@ -1530,10 +1542,7 @@ import QRCode from "qrcodejs2";
 import Cookies from "js-cookie";
 import CommonUtil from "@/utils/comutil.js";
 import { getAgeByIdCard } from "@/utils/validate.js";
-import {
-  regionData,
-  CodeToText,
-} from "element-china-area-data";
+import { regionData, codeToText } from "element-china-area-data";
 export default {
   inject: ["reload"],
   name: "qrCode",
@@ -1567,7 +1576,9 @@ export default {
       smcell: 24,
       xscell: 24,
       areaOptions: regionData,
-      selectedOptions: [],
+      selectedOptions1: [],
+      selectedOptions2: [],
+      selectedOptions3: [],
       // ------------紫金意外险
       ziJinInsuranceData: [],
       accidentalDrivingVo: [],
@@ -1736,7 +1747,10 @@ export default {
         email: "", //邮箱
         mobile: "", //电话
         identifyValidDate: "", //有效期起期
-        identifyValidEndDate: "" //有效期止期
+        identifyValidEndDate: "", //有效期止期
+        province: "",//省
+        city: "",//市
+        county: "",//县
       },
       policyHolderInfo: {
         //投保人
@@ -1748,7 +1762,10 @@ export default {
         email: "", //邮箱
         mobile: "", //电话
         identifyValidDate: "", //有效期起期
-        identifyValidEndDate: "" //有效期止期
+        identifyValidEndDate: "", //有效期止期
+        province: "",//省
+        city: "",//市
+        county: "",//县
       },
       insuredPersonInfo: {
         //被保人
@@ -1760,7 +1777,10 @@ export default {
         email: "", //邮箱
         mobile: "", //电话
         identifyValidDate: "", //有效期起期
-        identifyValidEndDate: "" //有效期止期
+        identifyValidEndDate: "", //有效期止期
+        province: "",//省
+        city: "",//市
+        county: "",//县
       },
       //使用性质列表
       carnatureList: [{ label: "家庭自用", id: "8A" }],
@@ -2747,9 +2767,12 @@ export default {
     },
   },
   methods: {
-    areahandleChange() {
-      var arr = this.$refs.shengshi.getCheckedNodes();
-      console.log(arr); // 这里就是获取到的所有的数据。就能从中获取到想要的label和value
+    areahandleChange(event, info) {
+      if (event[0] != null && event[1] != null && event[2] != null) {
+        this[info].province = codeToText[event[0]]
+        this[info].city = codeToText[event[1]]
+        this[info].county = codeToText[event[2]]
+      }
     },
     iconfftter(icon) {
       return CommonUtil.getDataName({
@@ -2780,7 +2803,6 @@ export default {
     },
     // 选择意外险类型
     async ywxxxchange(index) {
-      console.log(index)
       this.accidentForm = Object.assign(
         this.accidentForm,
         this.accidentDataList.find(val => val.id == index)
@@ -2919,7 +2941,6 @@ export default {
       })
     },
     zijinengageChange(select, row) {
-      console.log()
       this.zijinengageList = [];
       select.map(val => {
         this.zijinengageList.push({
@@ -3985,7 +4006,6 @@ export default {
 
     },
     hbsubmitdialog(data) {
-      console.log(data)
       this.companyId = data.result.companyId;
       this.apiType = data.apiType;
       this.hbsubmitdialogVisible = true;
@@ -4439,6 +4459,7 @@ export default {
         default:
           for (let key in this.policyHolderInfo) {
             this.policyHolderInfo[key] = "";
+            this.selectedOptions2=[];
           }
       }
     },
@@ -4452,6 +4473,7 @@ export default {
         default:
           for (let key in this.insuredPersonInfo) {
             this.insuredPersonInfo[key] = "";
+            this.selectedOptions3=[];
           }
       }
     },
@@ -4999,6 +5021,9 @@ export default {
       this.imgList3 = [];
       this.imgList4 = [];
       this.imgList5 = [];
+      this.selectedOptions1=[];
+      this.selectedOptions2=[];
+      this.selectedOptions3=[];
       this.orderno = "";
       this.quoteno = "";
       this.jqstartDate = this.transformTime1();
@@ -5802,5 +5827,9 @@ export default {
   .el-date-editor.el-input {
     width: 100%;
   }
+
+  .el-cascader--small {
+    width: 100%;
+  }
 }
 </style>