商铺管理：支持级联选择商铺地址

src/api/community/shop.js

@@ -17,6 +17,14 @@ export function listBuildingByDistrict(district) {
   })
 }
 
+// 依据商业板块
+export function getDistrictBuildingFloor() {
+  return request({
+    url: '/community/shop/districtBuildingFloor',
+    method: 'get'
+  })
+}
+
 // 查询shop详细
 export function getShop(shopId) {
   return request({

src/views/community/shop/index.vue

@@ -9,34 +9,13 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="商业板块" prop="district">
-        <el-select v-model="queryParams.district" placeholder="请选择商业板块" @change="handleSelectDistrict" clearable>
-          <el-option
-            v-for="dict in dict.type.che_district"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="楼栋" prop="building">
-        <el-select v-model="queryParams.building" v-bind:disabled="districtNotSelected" placeholder="请选择楼栋" clearable>
-          <el-option
-            v-for="item in buildingList"
-            :key="item"
-            :label="item"
-            :value="item"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="楼层" prop="floor">
-        <el-input
-          v-model="queryParams.floor"
-          v-bind:disabled="districtNotSelected"
-          placeholder="请输入楼层"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+      <el-form-item label="商业板块" prop="address">
+        <el-cascader
+              v-model="addressSelected"
+              :options="addressOptions"
+              :props="{ checkStrictly: true }"
+              clearable
+              @change="handleChange"></el-cascader>
       </el-form-item>
       <el-form-item label="使用状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="请选择使用状态" clearable>
@@ -265,7 +244,7 @@
 </template>
 
 <script>
-import { listShop, listBuildingByDistrict, getShop, delShop, addShop, updateShop } from "@/api/community/shop";
+import { listShop, listBuildingByDistrict, getDistrictBuildingFloor, getShop, delShop, addShop, updateShop } from "@/api/community/shop";
 import { getToken } from "@/utils/auth";
 
 export default {
@@ -273,6 +252,8 @@ export default {
   dicts: ['establishment_category', 'vacant_status', 'che_district', 'business_model'],
   data() {
     return {
+      addressSelected: [],
+      addressOptions: [],
       // 遮罩层
       loading: true,
       // 选中数组
@@ -287,8 +268,6 @@ export default {
       total: 0,
       // shop表格数据
       shopList: [],
-      // building表格数据
-      buildingList: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -330,11 +309,7 @@ export default {
   },
   created() {
     this.getList();
-  },
-  computed: {
-    districtNotSelected() {
-      return this.queryParams.district === null;
-    }
+    this.getDistrictBuidlingFloor();
   },
   methods: {
     /** 查询shop列表 */
@@ -346,6 +321,11 @@ export default {
         this.loading = false;
       });
     },
+    getDistrictBuidlingFloor(){
+      getDistrictBuildingFloor().then(response => {
+        this.addressOptions = response.data;
+      });
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -379,22 +359,42 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
+      this.addressSelected = null;
+
+      this.queryParams.name = null;
+      this.queryParams.district = null;
+      this.queryParams.building = null;
+      this.queryParams.floor = null;
+      this.queryParams.status = null;
+
       this.resetForm("queryForm");
       this.handleQuery();
     },
+    handleChange(value) {
+        if (value.length == 1) {
+          this.queryParams.district = value[0];
+          this.queryParams.building = null;
+          this.queryParams.floor = null;
+        }
+
+        if (value.length == 2) {
+          this.queryParams.district = value[0];
+          this.queryParams.building = value[1];
+          this.queryParams.floor = null;
+        }
+
+        if (value.length == 3) {
+          this.queryParams.district = value[0];
+          this.queryParams.building = value[1];
+          this.queryParams.floor = value[2];
+        }
+    },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.shopId)
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
-    handleSelectDistrict(data){
-      this.queryParams.building = null;
-      this.queryParams.floor = null;
-      listBuildingByDistrict(data).then(response => {
-        this.buildingList = response.data;
-      });
-    },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();