mhy

xichongSys/src/views/Myvue/receivePersonnel.vue

 <template>
   <div>
     <div class="op">
+      <div class="add" style="margin-left:0">
+        <el-select
+          ref="town"
+          clearable
+          size="mini"
+          v-model="townName"
+          @change="selectTown"
+          placeholder="请选择乡/镇">
+          <el-option
+            v-for="item in townList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.label">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="add" style="margin-left: 20px">
+        <el-select
+          ref="village"
+          size="mini"
+          clearable
+          v-model="villageName"
+          placeholder="请选择村">
+          <el-option
+            v-for="item2 in villageList"
+            :key="item2.value"
+            :label="item2.label"
+            :value="item2.label">
+          </el-option>
+        </el-select>
+      </div>
       <div class="nam">
         <el-input v-model="name" size="mini" placeholder="请输入姓名" clearable></el-input>
       </div>
@@ -13,7 +44,7 @@
             v-for="item in options1"
             :key="item.value"
             :label="item.label"
-            :value="item.value">
+            :value="item.label">
           </el-option>
         </el-select>
       </div>
@@ -37,9 +68,19 @@
       </el-table-column>
       <el-table-column
         prop="grantState"
-        min-width="15%"
+        min-width="10%"
         label="待遇发放状态">
       </el-table-column>
+      <el-table-column
+        prop="townName"
+        min-width="10%"
+        label="乡镇">
+      </el-table-column>
+      <el-table-column
+        prop="villageName"
+        min-width="10%"
+        label="村（社区）">
+      </el-table-column>
       <el-table-column
         prop="lastGrantMonth"
         min-width="10%"
@@ -57,7 +98,7 @@
       </el-table-column>
       <el-table-column
         prop="presentBenchmark"
-        min-width="15%"
+        min-width="10%"
         label="当前月领取标准">
       </el-table-column>
       <el-table-column
@@ -212,15 +253,16 @@
   }
 
   .idc {
+    margin-left: 20px;
     min-width: 200px
   }
 
   .nam {
-    margin-right: 20px
+    margin-left: 20px
   }
 
   .grantState {
-    min-width: 200px;
+    /*min-width: 200px;*/
     margin-left: 20px
   }
 
@@ -269,16 +311,26 @@
         info: '',
         tableData: [],
         dialogTableVisible: false,
-        data: {}
+        data: {},
+        townList: [],
+        townId: "",
+        townName: "",
+        villageList: [],
+        villageId: "",
+        villageName: "",
       }
     },
     methods: {
       //搜索
       search() {
+        console.log(this.$refs.town.value);
+        console.log(this.$refs.village.value);
         let data = {
           idCard: this.idCard ? this.Encrypt(this.idCard) : "",
           name: this.name ? this.Encrypt(this.name) : "",
-          grantState: this.grantState
+          grantState: this.grantState,
+          town: this.$refs.town.value,
+          village: this.$refs.village.value,
         };
         this.$api.getlist.getGrantList(data).then((res) => {
           for (var i in res.data.list) {
@@ -302,7 +354,9 @@
           pageSize: 10,
           idCard: this.idCard ? this.Encrypt(this.idCard) : "",
           name: this.name ? this.Encrypt(this.name) : "",
-          grantState: this.grantState
+          grantState: this.grantState,
+          town: this.$refs.town.value,
+          village: this.$refs.village.value,
         };
         Loading.service();
         this.$api.getlist.getGrantList(data).then((res) => {
@@ -370,24 +424,33 @@
             done();
           })
           .catch(_ => {});
+      },
+      selectTown(town) {
+        this.villageList.length = 0;
+        this.villageName = "";
+        for (let i in listtown) {
+          if (listtown[i].town_name === town) {
+            for (let j in listtown[i].chirld) {
+              this.villageList.push({
+                pro: listtown[i].town_id,
+                value: listtown[i].chirld[j].village_id,
+                label: listtown[i].chirld[j].village_name
+              });
+            }
+            return;
+          }
+        }
       }
     },
     created() {
-      for (var i in listtown) {
-        this.list.push({
-          value: listtown[i].town_name,
+      Loading.service();
+      for (let i in listtown) {
+        this.townList.push({
+          value: listtown[i].town_id,
           label: listtown[i].town_name,
           children: []
-        })
-        for (var j in listtown[i].chirld) {
-          this.list[i].children.push({
-            value: listtown[i].chirld[j].village_name,
-            label: listtown[i].chirld[j].village_name
-          })
-        }
+        });
       }
-      console.log(this.list)
-      Loading.service();
       let data = {};
       this.$api.getlist.getGrantList(data).then((res) => {
         let loadingInstance = Loading.service();