底部列表与筛选条件联动

src/views/components/xiaoqu/bottomList.vue

@@ -11,7 +11,7 @@
         <div class="table-header">
           <div class="table-cell0">序号</div>
           <div class="table-cell1">所属网格</div>
-          <div class="table-cell1">所属楼栋</div>
+          <div class="table-cell2">所属楼栋</div>
           <div class="table-cell1">房屋名称</div>
           <div class="table-cell1">姓名</div>
           <div class="table-cell1">标签</div>
@@ -34,7 +34,7 @@
           >
             <div class="table-cell0">{{ index + 1 }}</div>
             <div class="table-cell1">{{ item.parentname }}</div>
-            <div class="table-cell1">
+            <div class="table-cell2">
               {{ item.deptname }}{{ item.buildingname }}
             </div>
             <div class="table-cell1">{{ item.housename }}</div>
@@ -79,6 +79,7 @@
           </div>
         </div>
       </div>
+      <div class="no-data" v-show="total == 0">暂无数据</div>
     </div>
   </div>
 </template>
@@ -196,7 +197,16 @@ export default {
   margin-top: 0 !important;
 }
 .result-list {
+  position: relative;
   height: calc(100% - 40px) !important;
+  .no-data {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50% -50%);
+    font-size: 15px;
+    color: #d3e9ff;
+  }
   .list-table {
     height: 100%;
     display: flex;

src/views/components/xiaoqu/mapSearchBox.vue

@@ -3,11 +3,12 @@
     <div class="select-search">
       <el-select
         v-model="queryParmas.color"
-        placeholder="分色"
+        placeholder="选择分色"
         clearable
         multiple
         collapse-tags
         :popper-append-to-body="false"
+        @change="changeColor"
       >
         <el-option
           v-for="dict in dict.type.b_color_type"
@@ -18,7 +19,7 @@
       </el-select>
       <el-select
         v-model="queryParmas.parentid"
-        placeholder="网格"
+        placeholder="选择网格"
         clearable
         :popper-append-to-body="false"
         @change="handleNetwork"
@@ -79,6 +80,12 @@ export default {
     this.getNetworkList();
   },
   methods: {
+    changeColor(e) {
+      console.log(e);
+      this.$store.commit("CHANGE_QUERY", {
+        color: e.length > 0 ? e.toString() : undefined,
+      });
+    },
     async getNetworkList() {
       let res = await getNetWorkId({
         xiaoquId: this.queryParamsXiaoqu.xiaoquId,
@@ -119,6 +126,13 @@ export default {
         let itemData = this.multipleList.filter((it) => it.label == item)[0];
         this.queryParmas[itemData.key] = itemData.value;
       });
+      this.$store.commit("CHANGE_QUERY", {
+        type: this.queryParmas.type,
+        isd: this.queryParmas.isd,
+        isk: this.queryParmas.isk,
+        isx: this.queryParmas.isx,
+        isj: this.queryParmas.isj,
+      });
     },
     filterDisabled(label) {
       if (label == "户籍" || label == "流动") {