补充查询项

src/views/modules/plugins/rent/rentcontractreview.vue

@@ -2,8 +2,110 @@
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-rent__rentContractInfo}">
       <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-        <el-form-item>
+        <el-form-item label="所属网格"
-          <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
+                      prop="gridId">
+          <el-select
+                  v-model.trim="dataForm.gridId"
+                  placeholder="请选择"
+                  size="small"
+                  clearable
+                  class="resi-cell-select"
+                  @change="handleChangeGrid"
+          >
+            <el-option
+                    v-for="item in optionsG"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属房屋">
+          <div class="resi-cell-value">
+            <div class="resi-cell-col">
+              <el-form-item prop="villageId">
+                <el-select
+                        v-model.trim="dataForm.villageId"
+                        placeholder="请选择小区"
+                        size="small"
+                        clearable
+                        class="resi-cell-select"
+                        @clear="handleClearVillage"
+                        @change="handleChangeV"
+                >
+                  <el-option
+                          v-for="item in optionsV"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="buildId">
+                <el-select
+                        v-model.trim="dataForm.buildId"
+                        placeholder="楼号"
+                        size="small"
+                        clearable
+                        style="width: 120px;"
+                        class="resi-cell-select"
+                        :disabled="changeVDisabled"
+                        @clear="handleClearBuild"
+                        @change="handleChangeB"
+                >
+                  <el-option
+                          v-for="item in optionsB"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="unitId">
+                <el-select
+                        v-model.trim="dataForm.unitId"
+                        :disabled="changeBDisabled"
+                        placeholder="单元"
+                        size="small"
+                        clearable
+                        style="width: 120px;"
+                        class="resi-cell-select"
+                        @click="handleClearDan"
+                        @change="handleChangeD"
+                >
+                  <el-option
+                          v-for="item in optionsD"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="homeId">
+                <el-select
+                        v-model.trim="dataForm.homeId"
+                        :disabled="changeDDisabled"
+                        placeholder="房号"
+                        size="small"
+                        clearable
+                        style="width: 120px;"
+                        class="resi-cell-select"
+                >
+                  <el-option
+                          v-for="item in optionsH"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
         </el-form-item>
         <el-form-item>
           <el-button @click="getDataList()">{{ $t('query') }}</el-button>
@@ -59,13 +161,164 @@ export default {
         deleteURL: '/pli/power/rentContractInfo',
         deleteIsBatch: true
       },
+      optionsV: [],
+      optionsB: [],
+      optionsH: [],
+      optionsD: [],
+      optionsG: [],
       dataForm: {
-        id: ''
+        id: '',
+        gridId: '',
+        villageId: '',
+        buildId: '',
+        unitId: '',
+        homeId: ''
       }
     }
   },
   components: {
     AddOrUpdate
+  },
+  created () {
+    this.getGridList()
+    this.getValiheList()
+  },
+  computed: {
+    changeVDisabled() {
+      return !this.dataForm.villageId
+    },
+    changeBDisabled() {
+      return !this.dataForm.buildId
+    },
+    changeDDisabled() {
+      return !this.dataForm.unitId
+    }
+  },
+  methods: {
+    handleClearVillage() {
+      this.dataForm.buildId = ''
+      this.dataForm.homeId = ''
+    },
+    handleClearBuild() {
+      this.dataForm.buildId = ''
+      this.dataForm.unitId = ''
+      this.dataForm.homeId = ''
+    },
+    handleClearDan() {
+      this.dataForm.unitId = ''
+      this.dataForm.homeId = ''
+    },
+    handleChangeGrid(val) {
+      console.log('val', val)
+      this.dataForm.villageId = ''
+      this.dataForm.buildId = ''
+      this.dataForm.unitId = ''
+      this.dataForm.homeId = ''
+      this.getValiheList()
+    },
+    getGridList() {
+      const { user } = this.$store.state
+      this.$http
+              .post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId, purpose: 'query' })
+              .then(({ data: res }) => {
+                if (res.code !== 0) {
+                  return this.$message.error(res.msg)
+                } else {
+                  console.log('获取查询详情成功', res.data)
+                  this.optionsG = res.data
+                }
+              })
+              .catch(() => {
+                return this.$message.error('网络错误')
+              })
+    },
+    getValiheList() {
+      const { user } = this.$store.state
+      this.$http
+              .post('/gov/org/icneighborhood/neighborhoodoption', {
+                gridId: this.dataForm.gridId,
+                agencyId: ''
+                // agencyId: user.agencyId
+              })
+              .then(({ data: res }) => {
+                if (res.code !== 0) {
+                  return this.$message.error(res.msg)
+                } else {
+                  console.log('获取查询详情成功', res.data)
+                  this.optionsV = res.data
+                }
+              })
+              .catch(() => {
+                return this.$message.error('网络错误')
+              })
+    },
+    getBuildList() {
+      this.$http
+              .post('/gov/org/icbuilding/buildingoption', {
+                neighborHoodId: this.dataForm.villageId
+              })
+              .then(({ data: res }) => {
+                if (res.code !== 0) {
+                  return this.$message.error(res.msg)
+                } else {
+                  console.log('获取查询详情成功', res.data)
+                  this.optionsB = res.data
+                }
+              })
+              .catch(() => {
+                return this.$message.error('网络错误')
+              })
+    },
+    getUniList() {
+      this.$http
+              .post('/gov/org/icbuildingunit/unitoption', {
+                buildingId: this.dataForm.buildId
+              })
+              .then(({ data: res }) => {
+                if (res.code !== 0) {
+                  return this.$message.error(res.msg)
+                } else {
+                  console.log('获取查询详情成功', res.data)
+                  this.optionsD = res.data
+                }
+              })
+              .catch(() => {
+                return this.$message.error('网络错误')
+              })
+    },
+    getHouseList() {
+      this.$http
+              .post('/gov/org/ichouse/houseoption', { unitId: this.dataForm.unitId })
+              .then(({ data: res }) => {
+                if (res.code !== 0) {
+                  return this.$message.error(res.msg)
+                } else {
+                  console.log('获取查询详情成功', res.data)
+                  this.optionsH = res.data
+                }
+              })
+              .catch(() => {
+                return this.$message.error('网络错误')
+              })
+    },
+    handleChangeV(val) {
+      console.log('val', val)
+      this.dataForm.buildId = ''
+      this.dataForm.unitId = ''
+      this.dataForm.homeId = ''
+      this.getBuildList()
+    },
+    handleChangeB(val) {
+      console.log('val', val)
+      this.dataForm.unitId = ''
+      this.dataForm.homeId = ''
+      this.getUniList()
+    },
+    handleChangeD(val) {
+      console.log('val', val)
+      this.dataForm.homeId = ''
+      this.getHouseList()
+    },
   }
 }
 </script>