场所消防模块搜索功能修改实现

src/views/placeManage/placeFirefighting/placeFirefightingList.vue

@@ -14,53 +14,57 @@
   </van-nav-bar>
 
   <div class="main">
-    <div class="left-nav">
-      <van-sidebar v-model="active" style="padding:0px;">
-        <van-sidebar-item :title="item.label" v-for="item in $dictUtils.getDictList('hs_site_fire_type')" :key="item.value" @click="typeList(item.value)"/>
-      </van-sidebar>
-    </div>
-    <div class="right-list">
-      <van-list
-        v-model:loading="loading"
-        :finished="finished"
-        finished-text="没有更多了"
-        @load="onLoad"
-      >
-        <van-swipe-cell v-for="item in list" :key="item">
-          <div class="list-item" @click="placeFirefightingInfo(item.id)">
-            <div class="item_top">
-              <div class="item_top_left">
-                {{ item.name }}
-              </div>
-              <div class="item_top_right">
-                <span v-if="item.equipmentType == 0">灭火器</span>
-                <span v-if="item.equipmentType == 1">消防栓</span>
-                <span v-if="item.equipmentType == 2">自动喷淋</span>
-                <span v-if="item.equipmentType == 3">消防排烟口</span>
-                <span v-if="item.equipmentType == 4">消防通道</span>
-                <span v-if="item.equipmentType == 5">安全出口标示牌</span>
-                <span v-if="item.equipmentType == 6">防火卷帘门</span>
-                <span v-if="item.equipmentType == 7">烟感器</span>
-                <span v-if="item.equipmentType == 8">温感器</span>
-                <span v-if="item.equipmentType == 9">报警钟</span>
-                <span v-if="item.equipmentType == 10">应急灯</span>
-              </div>
+    <van-search
+      v-model="active"
+      show-action
+      shape="round"
+      label="设备类型"
+      placeholder="请输入完整设备类型名称："
+    >
+      <template #action>
+        <div @click="onClickSearch">搜索</div>
+      </template>
+    </van-search>
+    <van-list
+      v-model:loading="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="onLoad"
+    >
+      <van-swipe-cell v-for="item in list" :key="item">
+        <div class="list-item" @click="placeFirefightingInfo(item.id)">
+          <div class="item_top">
+            <div class="item_top_left">
+              {{ item.name }}
             </div>
-            <div class="item_center">
-              {{ item.position }}
+            <div class="item_top_right">
+              <span v-if="item.equipmentType == 0">灭火器</span>
+              <span v-if="item.equipmentType == 1">消防栓</span>
+              <span v-if="item.equipmentType == 2">自动喷淋</span>
+              <span v-if="item.equipmentType == 3">消防排烟口</span>
+              <span v-if="item.equipmentType == 4">消防通道</span>
+              <span v-if="item.equipmentType == 5">安全出口标示牌</span>
+              <span v-if="item.equipmentType == 6">防火卷帘门</span>
+              <span v-if="item.equipmentType == 7">烟感器</span>
+              <span v-if="item.equipmentType == 8">温感器</span>
+              <span v-if="item.equipmentType == 9">报警钟</span>
+              <span v-if="item.equipmentType == 10">应急灯</span>
             </div>
-            <div class="item_down">
-              <div class="item_down_left">
-                {{ item.siteName }}
-              </div>
-              <div class="item_down_right">
-                {{ item.personInChargeName }}
-              </div>
+          </div>
+          <div class="item_center">
+            {{ item.position }}
+          </div>
+          <div class="item_down">
+            <div class="item_down_left">
+              {{ item.siteName }}
+            </div>
+            <div class="item_down_right">
+              {{ item.personInChargeName }}
             </div>
           </div>
-        </van-swipe-cell>
-      </van-list>
-    </div>
+        </div>
+      </van-swipe-cell>
+    </van-list>
   </div>
 </template>
 
@@ -76,7 +80,7 @@ export default {
       siteId: "",
       personInCharge: "",
       contactInformation: "",
-      equipmentType: 0,
+      equipmentType: "",
       devicePicture: "",
       effectiveDate: [],
       effectiveDateStart: "",
@@ -84,7 +88,7 @@ export default {
       nextMaintenanceDate: "",
       position: "",
     });
-    const active = ref(0);
+    const active = ref('');
     // 导航栏颜色
     const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
     //返回取消按钮
@@ -106,7 +110,7 @@ export default {
         .placeFirefightingList({
           current: index + 1,
           size: 10,
-          ...inputForm.value
+          ...inputForm.value,
         })
         .then(({ records, pages }) => {
           list.value = list.value.concat(records);
@@ -131,10 +135,29 @@ export default {
         query: { id: data },
       });
     };
-    const typeList = (type)=>{
-      list.value =  []
-      inputForm.value.equipmentType = type;
-      onLoad()
+    const onClickSearch = ()=>{
+      if(active.value ==''){
+        list.value = [];
+        inputForm.value.equipmentType = '';
+        onLoad()
+      }else{
+        list.value = [];
+        let type = {
+          '灭火器':0,
+          '消防栓':1,
+          '自动喷淋':2,
+          '消防排烟口':3,
+          '消防通道':4,
+          '安全出口标示牌':5,
+          '防火卷帘门':6,
+          '烟感器':7,
+          '温感器':8,
+          '报警钟':9,
+          '应急灯':10,
+        }
+        inputForm.value.equipmentType = type[active.value];
+        onLoad()
+      }
     }
     return {
       active,
@@ -150,7 +173,7 @@ export default {
       onLoad,
       //进入详情页
       placeFirefightingInfo,
-      typeList
+      onClickSearch,
     };
   },
 };
@@ -164,62 +187,55 @@ html {
   background-color: #f2f2f2;
 }
 .main {
-  .left-nav {
-    float: left;
-    width: 20%;
-  }
-  .right-list {
-    float: left;
-    width: 80%;
-    .list-item {
-      background-color: #fff;
-      padding-left: 10px;
+  .list-item {
+    background-color: #fff;
+    padding-left: 10px;
+    margin-bottom: 5px;
+    overflow: hidden;
+    .item_top {
+      width: 100%;
       overflow: hidden;
-      .item_top {
-        width: 100%;
-        overflow: hidden;
-        .item_top_left {
-          float: left;
-          width: 80%;
-          font-size: 16px;
-          font-weight: 700;
-        }
-        .item_top_right {
-          float: right;
-          width: 20%;
-          font-size: 16px;
-          color: #000000;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
+      .item_top_left {
+        float: left;
+        width: 80%;
+        font-size: 16px;
+        font-weight: 700;
       }
-      .item_center {
-        width: 100%;
+      .item_top_right {
+        float: right;
+        width: 20%;
         font-size: 16px;
-        color: #a2a2a2;
-        text-align: left;
-        padding: 10px 0;
+        color: #000000;
+        white-space: nowrap;
         overflow: hidden;
+        text-overflow: ellipsis;
       }
-      .item_down {
+    }
+    .item_center {
+      width: 100%;
+      font-size: 16px;
+      color: #a2a2a2;
+      text-align: left;
+      padding: 10px 0;
+      overflow: hidden;
+    }
+    .item_down {
+      overflow: hidden;
+      width: 100%;
+      font-size: 16px;
+      border-bottom: 1px solid #f5f5f5;
+      .item_down_left {
+        width: 70%;
+        float: left;
+        color: #000000;
+        white-space: nowrap;
         overflow: hidden;
-        width: 100%;
-        font-size: 16px;
-        border-bottom: 1px solid #f5f5f5;
-        .item_down_left {
-          width: 70%;
-          float: left;
-          color: #000000;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        .item_down_right {
-          width: 30%;
-          text-align: center;
-          float: left;
-        }
+        text-overflow: ellipsis;
+      }
+      .item_down_right {
+        width: 30%;
+        text-align: center;
+        float: left;
       }
     }
   }