场所消防模块列表页页面修改

src/main.js

@@ -9,7 +9,7 @@ import axios from 'axios';
 import dictUtils from '@/utils/dictUtils'
 
 
-import { NavBar, Button, Form, Field, CellGroup, Tabbar, TabbarItem, Icon, Toast, Image as VanImage, Grid, GridItem, Row, Col, Tab, Tabs, Popup, PickerGroup, DatePicker, TimePicker, Picker, Uploader, Dialog, List, Cell, Cascader, Search, RadioGroup, Radio, DropdownMenu, DropdownItem, SwipeCell, Checkbox, CheckboxGroup, Swipe, SwipeItem, Loading, TextEllipsis, TreeSelect } from 'vant';
+import { NavBar, Button, Form, Field, CellGroup, Tabbar, TabbarItem, Icon, Toast, Image as VanImage, Grid, GridItem, Row, Col, Tab, Tabs, Popup, PickerGroup, DatePicker, TimePicker, Picker, Uploader, Dialog, List, Cell, Cascader, Search, RadioGroup, Radio, DropdownMenu, DropdownItem, SwipeCell, Checkbox, CheckboxGroup, Swipe, SwipeItem, Loading, TextEllipsis, TreeSelect, Sidebar, SidebarItem } from 'vant';
 import 'vant/lib/index.css';
 import store from './store';
 
@@ -55,6 +55,8 @@ app.use(router)
     .use(Loading)
     .use(TextEllipsis)
     .use(TreeSelect)
+    .use(Sidebar)
+    .use(SidebarItem)
 app.config.globalProperties.$API = api
 app.config.globalProperties.$axios = axios
 app.config.globalProperties.$dictUtils = dictUtils

src/views/placeManage/placeFirefighting/placeFirefightingList.vue

@@ -14,57 +14,53 @@
   </van-nav-bar>
 
   <div class="main">
-    <van-search
-      v-model="value"
-      show-action
-      label="设备名称"
-      placeholder="请输入搜索关键词"
-      @search="onSearch"
-    >
-      <template #action>
-        <div @click="onClickButton">搜索</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 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>
             </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 class="item_center">
+              {{ item.position }}
             </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 class="item_down">
+              <div class="item_down_left">
+                {{ item.siteName }}
+              </div>
+              <div class="item_down_right">
+                {{ item.personInChargeName }}
+              </div>
             </div>
           </div>
-        </div>
-      </van-swipe-cell>
-    </van-list>
+        </van-swipe-cell>
+      </van-list>
+    </div>
   </div>
 </template>
 
@@ -74,6 +70,21 @@ import { useRouter } from "vue-router";
 import placeFirefighting from "@/api/placeFirefighting/placeFirefighting";
 export default {
   setup() {
+    const inputForm = ref({
+      id: "",
+      name: "",
+      siteId: "",
+      personInCharge: "",
+      contactInformation: "",
+      equipmentType: 0,
+      devicePicture: "",
+      effectiveDate: [],
+      effectiveDateStart: "",
+      effectiveDateEnd: "",
+      nextMaintenanceDate: "",
+      position: "",
+    });
+    const active = ref(0);
     // 导航栏颜色
     const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
     //返回取消按钮
@@ -95,6 +106,7 @@ export default {
         .placeFirefightingList({
           current: index + 1,
           size: 10,
+          ...inputForm.value
         })
         .then(({ records, pages }) => {
           list.value = list.value.concat(records);
@@ -119,7 +131,13 @@ export default {
         query: { id: data },
       });
     };
+    const typeList = (type)=>{
+      list.value =  []
+      inputForm.value.equipmentType = type;
+      onLoad()
+    }
     return {
+      active,
       selectColor,
       onClickLeft,
       onClickright,
@@ -132,6 +150,7 @@ export default {
       onLoad,
       //进入详情页
       placeFirefightingInfo,
+      typeList
     };
   },
 };
@@ -145,56 +164,62 @@ html {
   background-color: #f2f2f2;
 }
 .main {
-  .list-item {
-    background-color: #fff;
-    padding: 10px;
-    margin-bottom: 5px;
-    overflow: hidden;
-    .item_top {
-      width: 100%;
+  .left-nav {
+    float: left;
+    width: 20%;
+  }
+  .right-list {
+    float: left;
+    width: 80%;
+    .list-item {
+      background-color: #fff;
+      padding-left: 10px;
       overflow: hidden;
-      .item_top_left {
-        float: left;
-        width: 80%;
-        font-size: 16px;
-        font-weight: 700;
-
+      .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_right {
-        float: right;
-        width: 20%;
+      .item_center {
+        width: 100%;
         font-size: 16px;
-        color: #000000;
-        white-space: nowrap;
+        color: #a2a2a2;
+        text-align: left;
+        padding: 10px 0;
         overflow: hidden;
-        text-overflow: ellipsis;
       }
-    }
-    .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;
+      .item_down {
         overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .item_down_right {
-        width: 30%;
-        text-align: center;
-        float: left;
+        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;
+        }
       }
     }
   }