yang

src/api/backstage/point.js

@@ -100,3 +100,11 @@ export function exportPoint(query) {
     params: query
   })
 }
+
+// 根据父类id 获取子区域列表
+export function getAreaByParentId(id) {
+  return request({
+    url: '/backstage/area/getAreaByParentId?parentId='+id,
+    method: 'get',
+  })
+}

src/views/backstage/point/index.vue

@@ -60,64 +60,106 @@
 <!--          @keyup.enter.native="handleQuery"-->
 <!--        />-->
 <!--      </el-form-item>-->
-     <el-form-item label="统计点类型" prop="type">
-       <el-select v-model="queryParams.type" placeholder="请选择统计点类型" clearable size="small">
-        <el-option label="省级" value="1" />
-        <el-option label="市级" value="2" />
-        <el-option label="县级" value="3" />
-        <el-option label="乡级" value="4" />
-        <el-option label="村级" value="5" />
-        <el-option label="自然村" value="6" />
-
-        </el-select>
+<!--      <el-form-item label="统计点类型" prop="type">
+          <el-select v-model="queryParams.type" placeholder="请选择统计点类型" clearable size="small">
+                <el-option label="省级" value="1" />
+                <el-option label="市级" value="2" />
+                <el-option label="县级" value="3" />
+                <el-option label="乡级" value="4" />
+                <el-option label="村级" value="5" />
+                <el-option label="自然村" value="6" />
+          </el-select>
+      </el-form-item> -->
+
+      <!-- 
+        联动筛选 省级、地级、县级、乡级、行政村级、自然村 
+      -->
+      <!-- 省级 -->
+      <el-form-item label="省级" prop="type">
+          <el-select v-model="provinceList.id" clearable size="small" @change="selectChanged01" >
+              <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      <!-- 地级 -->
+      <el-form-item label="地级" prop="type">
+          <el-select v-model="cityList.id" clearable size="small" @change="selectChanged02" >
+              <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
       </el-form-item>
+      <!-- 县级 -->
+      <el-form-item label="县级" prop="type">
+          <el-select v-model="districtList.id" clearable size="small" @change="selectChanged03" >
+              <el-option v-for="item in districtList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+      </el-form-item>
+      <!-- 乡级 -->
+      <el-form-item label="乡级" prop="type">
+          <el-select v-model="streetList.id" clearable size="small" @change="selectChanged04" >
+              <el-option v-for="item in streetList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+      </el-form-item>
+      <!-- 行政村级 -->
+      <el-form-item label="行政村级" prop="type">
+          <el-select v-model="administrativeVillageList.id" clearable size="small" @change="selectChanged05" >
+              <el-option v-for="item in administrativeVillageList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+      </el-form-item>
+      <!-- 自然村 -->
+      <el-form-item label="自然村" prop="type">
+          <el-select v-model="naturalVillageList.id" clearable size="small" @change="selectChanged06" >
+              <el-option v-for="item in naturalVillageList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+      </el-form-item>
+
+      <div style="display:flex;justify-content: space-between;">
+          <el-form-item>
+              <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+          <el-row :gutter="10" style="margin:0;" >
+            <el-col :span="1.5">
+              <el-button
+                type="primary"
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                v-hasPermi="['backstage:point:add']"
+              >新增</el-button>
+            </el-col>
+            <!-- <el-col :span="1.5">
+              <el-button
+                type="success"
+                icon="el-icon-edit"
+                size="mini"
+                :disabled="single"
+                @click="handleUpdate"
+                v-hasPermi="['backstage:point:edit']"
+              >修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="danger"
+                icon="el-icon-delete"
+                size="mini"
+                :disabled="multiple"
+                @click="handleDelete"
+                v-hasPermi="['backstage:point:remove']"
+              >删除</el-button>
+            </el-col> -->
+            <el-col :span="1.5">
+              <el-button
+                type="warning"
+                icon="el-icon-download"
+                size="mini"
+                @click="handleExport"
+                v-hasPermi="['backstage:point:export']"
+              >导出</el-button>
+            </el-col>
+          <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
+          </el-row>
+      </div>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['backstage:point:add']"
-        >新增</el-button>
-      </el-col>
-      <!-- <el-col :span="1.5">
-        <el-button
-          type="success"
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['backstage:point:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['backstage:point:remove']"
-        >删除</el-button>
-      </el-col> -->
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['backstage:point:export']"
-        >导出</el-button>
-      </el-col>
-	  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
 
     <el-table
       :data="pointList"
@@ -153,7 +195,7 @@
               </template>
             </el-table-column>
             <el-table-column min-width="50px" label="统计点类型" align="center" prop="type" >
-              <<template scope="scope">
+              <template scope="scope">
                 <span v-if="scope.row.type == 1">省级</span>
                 <span v-if="scope.row.type == 2">市级</span>
                 <span v-if="scope.row.type == 3">县级</span>
@@ -305,7 +347,20 @@
 </template>
 
 <script>
-import { getProjectList, changeStatus, listBySuperiorId, listByProvince, cascadeList, listPoint, getPoint, delPoint, addPoint, updatePoint, exportPoint } from "@/api/backstage/point";
+import { 
+    getProjectList, 
+    changeStatus, 
+    listBySuperiorId, 
+    listByProvince, 
+    cascadeList, 
+    listPoint, 
+    getPoint, 
+    delPoint, 
+    addPoint, 
+    updatePoint, 
+    exportPoint,
+    getAreaByParentId 
+} from "@/api/backstage/point";
 
 export default {
   name: "Point",
@@ -454,11 +509,41 @@ export default {
         levelValue:[
           {required: true, message: "统计点所属层级不能为空，请选择统计点层级", trigger: 'change' }
         ],
-      }
+      },
+
+      /* 
+        联动筛选层级的内容
+      */ 
+      // getParams: {
+      //     pageNum: 1,
+      //     pageSize: 1000,
+      //     type: 1,
+      // },
+      provinceList: [], //省级
+      cityList: [], //地级
+      districtList: [], //县级
+      streetList: [], //乡级
+      administrativeVillageList: [], //行政村级
+      naturalVillageList: [], //自然村
+
+      provinceId: null, //省级
+      cityId: null, //地级
+      districtId: null, //县级
+      streetId: null, //乡级
+      administrativeVillageId: null, //行政村级
+      naturalVillageId: null, //自然村
+      
+
     };
   },
   created() {
     this.getList();
+    this.getGangedList(1)
+    // this.getGangedList(2)
+    // this.getGangedList(3)
+    // this.getGangedList(4)
+    // this.getGangedList(5)
+    // this.getGangedList(6)
   },
   methods: {
     /** 查询统计点列表 */
@@ -470,6 +555,249 @@ export default {
         this.loading = false;
       });
     },
+
+    // 联动获取筛选层级的子项
+    getGangedList(type){
+        listByProvince({
+            pageNum: 1,
+            pageSize: 1000,
+            type,
+        }).then(response => {
+            if(type==1){
+                this.provinceList = response.rows
+                console.log("获取省级列表",response.rows)
+            }
+            if(type==2){
+                this.cityList = response.rows
+                console.log("获取地级列表",response.rows)
+            }
+            if(type==3){
+                this.districtList = response.rows
+                console.log("获取县级列表",response.rows)
+            }
+            if(type==4){
+                this.streetList = response.rows
+                console.log("获取乡级列表",response.rows)
+            }
+            if(type==5){
+                this.administrativeVillageList = response.rows
+                console.log("获取行政村级列表",response.rows)
+            }
+            if(type==6){
+                this.naturalVillageList = response.rows
+                console.log("获取自然村列表",response.rows)
+            }
+        })
+    },
+
+    // 筛选-省级
+    selectChanged01(e){
+        this.provinceId = e
+        getAreaByParentId(e).then(response => {
+            if(response.code==200&&e){
+                // 获取当前项的名称
+                this.provinceList.forEach(item => {
+                    if(item.id==e){
+                        this.queryParams.totalLevelName = item.name
+                    }
+                  
+                })
+                // 获取地级列表
+                this.cityList = response.data
+                console.log("获取地级列表",response.data)
+                // 清空其他项
+                this.districtList = []
+                this.streetList = []
+                this.administrativeVillageList = []
+                this.naturalVillageList = []
+            }else{
+                // 恢复默认内容
+                this.queryParams.totalLevelName = null
+                // this.getGangedList(2)
+                // this.getGangedList(3)
+                // this.getGangedList(4)
+                // this.getGangedList(5)
+                // this.getGangedList(6)
+                // 清空其他项
+                this.cityList = []
+                this.districtList = []
+                this.streetList = []
+                this.administrativeVillageList = []
+                this.naturalVillageList = []
+            }
+        })
+    },
+    // 筛选-地级
+    selectChanged02(e){
+        this.cityId = e
+        getAreaByParentId(e).then(response => {
+            if(response.code==200&&e){
+                // 获取当前项的名称
+                this.cityList.forEach(item => {
+                    if(item.id==e){
+                        this.queryParams.totalLevelName = item.name
+                    }
+                  
+                })
+                // 获取县级列表
+                this.districtList = response.data
+                console.log("获取县级列表",response.data)
+                // 清空其他项
+                this.streetList = []
+                this.administrativeVillageList = []
+                this.naturalVillageList = []
+            }else{
+                // 恢复默认内容
+                // this.getGangedList(3)
+                // this.getGangedList(4)
+                // this.getGangedList(5)
+                // this.getGangedList(6)
+
+                // 获取上一级的名称
+                this.provinceList.forEach(item => {
+                    if(item.id==this.provinceId){
+                        this.queryParams.totalLevelName = item.name
+                    }
+                  
+                })
+
+                // 清空其他项
+                this.districtList = []
+                this.streetList = []
+                this.administrativeVillageList = []
+                this.naturalVillageList = []
+            }
+        })
+    },
+    // 筛选-县级
+    selectChanged03(e){
+        this.districtId = e
+        getAreaByParentId(e).then(response => {
+            if(response.code==200&&e){
+                // 获取当前项的名称
+                this.districtList.forEach(item => {
+                    if(item.id==e){
+                        this.queryParams.totalLevelName = item.name
+                    }
+                  
+                })
+                // 获取乡级列表
+                this.streetList = response.data
+                console.log("获取乡级列表",response.data)
+                // 清空其他项
+                this.administrativeVillageList = []
+                this.naturalVillageList = []
+            }else{
+                // 恢复默认内容
+                // this.getGangedList(4)
+                // this.getGangedList(5)
+                // this.getGangedList(6)
+
+                // 获取上一级的名称
+                this.cityList.forEach(item => {
+                    if(item.id==this.cityId){
+                        this.queryParams.totalLevelName = item.name
+                    }
+                  
+                })
+
+                // 清空其他项
+                this.streetList = []
+                this.administrativeVillageList = []
+                this.naturalVillageList = []
+            }
+        })
+    },
+    // 筛选-乡级
+    selectChanged04(e){
+        this.streetId = e
+        getAreaByParentId(e).then(response => {
+            if(response.code==200&&e){
+                // 获取当前项的名称
+                this.streetList.forEach(item => {
+                    if(item.id==e){
+                        this.queryParams.totalLevelName = item.name
+                    }
+                  
+                })
+                // 获取行政村级列表
+                this.administrativeVillageList = response.data
+                console.log("获取行政村级列表",response.data)
+                // 清空其他项
+                this.naturalVillageList = []
+            }else{
+                // 恢复默认内容
+                // this.getGangedList(5)
+                // this.getGangedList(6)
+
+                // 获取上一级的名称
+                this.districtList.forEach(item => {
+                    if(item.id==this.districtId){
+                        this.queryParams.totalLevelName = item.name
+                    }
+                  
+                })
+
+                // 清空其他项
+                this.administrativeVillageList = []
+                this.naturalVillageList = []
+            }
+        })
+    },
+    // 筛选-行政村级
+    selectChanged05(e){
+        this.administrativeVillageId = e
+        getAreaByParentId(e).then(response => {
+            if(response.code==200&&e){
+                // 获取当前项的名称
+                this.naturalVillageList.forEach(item => {
+                    if(item.id==e){
+                        this.queryParams.totalLevelName = item.name
+                    }
+                  
+                })
+                // 获取自然村列表
+                this.naturalVillageList = response.data
+                console.log("获取自然村列表",response.data)
+            }else{
+                // 恢复默认内容
+                // this.getGangedList(6)
+
+                // 获取上一级的名称
+                this.streetList.forEach(item => {
+                    if(item.id==this.streetId){
+                        this.queryParams.totalLevelName = item.name
+                    }
+                  
+                })
+
+                // 清空其他项
+                this.naturalVillageList = []
+            }
+        })
+    },
+    // 筛选-自然村
+    selectChanged06(e){
+        this.naturalVillageId = e
+        if(e){
+            // 获取当前项的名称
+            this.naturalVillageList.forEach(item => {
+                if(item.id==e){
+                    this.queryParams.totalLevelName = item.name
+                }
+              
+            })
+        }else{
+            // 获取上一级的名称
+              this.administrativeVillageList.forEach(item => {
+                  if(item.id==this.administrativeVillageId){
+                      this.queryParams.totalLevelName = item.name
+                  }
+                
+              })
+        }
+    },
+
     // 取消按钮
     cancel() {
       this.open = false;
@@ -495,12 +823,13 @@ export default {
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+        this.queryParams.pageNum = 1;
+        this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      this.queryParams.totalLevelName = null;
       this.handleQuery();
     },
     // 多选框选中数据

src/views/backstage/project/index.vue

@@ -195,7 +195,8 @@
                 :options="statisticsPoints"
                 :props="{multiple: true, expandTrigger: 'hover',checkStrictly: true}"
                 filterable
-                clearable></el-cascader>
+                clearable
+              ></el-cascader>
             </div>
           </el-form-item>
         </el-form>