牌位录入模块完成

src/api/tabletManage/TabletServer.js

@@ -1,9 +1,17 @@
 import request from "@/utils/request";
 export default class TabletServer {
+    // 获取牌位列表
     list(params) {
         return request.get(
             `/placememorialtablets/placeMemorialTablets/list`,
             params
         )
     };
+    // 提交
+    save(inputForm) {
+        return request.post(
+            `/placememorialtablets/placeMemorialTablets/save`,
+            inputForm
+        )
+    };
 }

src/router/index.js

@@ -313,6 +313,15 @@ const routes = [{
             isShowTarbar: false,
         }
     },
+    {
+        path: '/placeTabletAdd',
+        name: 'placeTabletAdd',
+        component: () =>
+            import ('../views/placeManage/placeTablet/placeTabletAdd.vue'),
+        meta: {
+            isShowTarbar: false,
+        }
+    },
     {
         path: '/placeTabletInfo',
         name: 'placeTabletInfo',

src/views/placeManage/placePerson/placePersonAdd.vue

@@ -868,7 +868,6 @@ export default {
     let hs_site = ref(false);
     const getsite = (val) => {
       locationName.value = val.name;
-      console.log(val.id, "==========================>val.id");
       const json = Object.assign(inputForm.value, { location: { id: val.id } });
       inputForm.value = json;
       checked.value = val.id;
@@ -997,7 +996,6 @@ export default {
     const options = ref([]);
     let showPlace1 = ref(false);
     const getPlace1 = ({ selectedOptions }) => {
-      console.log(selectedOptions);
       showPlace1.value = false;
       let str1 = "";
       let str2 = "";
@@ -1009,8 +1007,6 @@ export default {
         str1 += item.name + "/";
         str2 += item.code + "/";
       });
-      inputForm.currentResidence = str1;
-      inputForm.currentResidenceId = str2;
       const json = Object.assign(inputForm.value, {
         currentResidence: str1,
         currentResidenceId: str2,

src/views/placeManage/placeTablet/placeTablet.vue

@@ -1,53 +1,68 @@
 <template>
-  <van-nav-bar fixed title="牌位管理" left-arrow @click-left="onClickLeft" :style="{ 'background-color': selectColor }"/>
-  <div class="PersonList main">
-    <div
-      class="PersonItem"
-      v-for="item in TabletData.data"
-      :key="item.id"
-      @click="goTabletInfo(item)"
-    >
-      <van-row>
-        <van-col span="14">
-          <p>
-            {{ item.brandName }}（<span style="color: #36a7f3">{{
-              item.udCard
-            }}</span
-            >）
-          </p>
-        </van-col>
-        <van-col span="10">
-          <p style="color: #36a7f3;">{{ item.siteName.name }}</p>
-        </van-col>
-      </van-row>
-      <van-row>
-        <van-col span="18">
-          <p>{{ item.nativePlace }}</p>
-        </van-col>
-        <van-col span="6">
-          <p style="color: red" v-if="item.sacrificeExpenses">￥{{ item.sacrificeExpenses }}</p>
-        </van-col>
-      </van-row>
-    </div>
+  <van-nav-bar
+    fixed
+    title="牌位管理"
+    left-arrow
+    @click-left="onClickLeft"
+    @click-right="onClickright"
+    :style="{ 'background-color': selectColor }"
+  >
+   <template #right>
+      <van-icon name="plus" size="18" />
+    </template>
+  </van-nav-bar>
+  <div class="main">
+    <van-search
+      v-model="searchVal"
+      readonly="true"
+      clearable
+      show-action
+      shape="round"
+      placeholder="请输入场所名称"
+      label="场所名称"
+      input-align="center"
+      @search="onSearch"
+      @cancel="onCancel"
+      @click-input="showPlace = true"
+    />
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
+        <van-swipe-cell v-for="item in TabletData" :key="item">
+          <div class="list-item" @click="goTabletInfo(item)">
+            <div class="item_top">
+              <div class="item_top_left">
+                {{ item.brandName }}
+              </div>
+              <div class="item_top_right">￥{{ item.sacrificeExpenses }}</div>
+            </div>
+            <div class="item_down">
+              <div class="item_down_left">
+                {{ item.siteName.name }}
+              </div>
+              <div class="item_down_right">场管：{{ item.siteContact }}</div>
+            </div>
+          </div>
+        </van-swipe-cell>
+      </van-list>
+    </van-pull-refresh>
   </div>
 </template>
 
 <script>
-import { reactive, ref } from "vue";
+import { ref } from "vue";
 import { useRouter } from "vue-router";
 import TabletServer from "@/api/tabletManage/TabletServer";
 export default {
   setup() {
-    const TabletData = reactive({
-      data: [], //牌位数据集
-    });
+    const TabletData = ref([]);
     // 导航栏颜色
     const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
-    //获取牌位数据
-    new TabletServer().list({}).then((res) => {
-      TabletData.data = res.records;
-      //   console.log(TabletData.data);
-    });
+
     //页面跳转以及数据传递
     let router = useRouter();
     const goTabletInfo = (item) => {
@@ -57,15 +72,57 @@ export default {
         query: { data: data },
       });
     };
+    const loading = ref(false);
+    const finished = ref(false);
+    const refreshing = ref(false);
+    let index = 0;
+    const onLoad = () => {
+      loading.value = true;
+      finished.value = false;
+      // 异步更新数据
+      //获取牌位数据
+      new TabletServer()
+        .list({
+          current: index + 1,
+          size: 11,
+        })
+        .then(({ records, pages }) => {
+          TabletData.value = TabletData.value.concat(records);
+          // 加载状态结束
+          loading.value = false;
+          if (index + 1 >= pages) {
+            finished.value = true;
+          }
+          index++;
+        });
+    };
+    const onRefresh = () => {
+      // 清空列表数据
+      finished.value = false;
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      loading.value = true;
+      onLoad();
+    };
     //返回
     const onClickLeft = () => {
       history.back();
     };
+    //进入场所录入页面
+    const onClickright = () => {
+      router.push("/placeTabletAdd");
+    };
     return {
       onClickLeft,
+      onClickright,
       TabletData,
+      loading,
+      finished,
+      refreshing,
+      onLoad,
+      onRefresh,
       goTabletInfo,
-      selectColor
+      selectColor,
     };
   },
 };
@@ -85,7 +142,6 @@ html {
   }
   .van-badge__wrapper {
     color: #fff;
-    
   }
 }
 .search {
@@ -95,49 +151,45 @@ html {
     height: 50px;
   }
 }
-.PersonList {
-  background-color: #fff;
-  top:10px !important;
-  height: 100vh;
-  p {
-    margin: 0;
-    padding: 0;
-  }
-  .PersonItem {
-    padding: 10px 10px;
-    font-size: 16px;
-    border-bottom: 1px solid #f2f2f2;
-    .van-row {
-      &:nth-child(1) {
-        margin-bottom: 10px;
-        .van-col {
-          &:nth-child(1) {
-            p {
-              font-weight: 700;
-            }
-          }
-          &:nth-child(2) {
-            p {
-              text-align: right;
-              font-size: 14px;
-            }
-          }
-        }
+.main {
+  .list-item {
+    background-color: #fff;
+    padding: 10px;
+    margin-bottom: 5px;
+    overflow: hidden;
+    .item_top {
+      width: 100%;
+      overflow: hidden;
+      .item_top_left {
+        float: left;
+        width: 80%;
+        font-size: 16px;
       }
-      &:nth-child(2) {
-        .van-col {
-          &:nth-child(1) {
-            p {
-              color: #d0d0d0;
-              font-size: 12px;
-            }
-          }
-          &:nth-child(2) {
-            p {
-              text-align: right;             
-            }
-          }
-        }
+      .item_top_right {
+        float: right;
+        width: 20%;
+        font-size: 14px;
+      }
+    }
+    .item_center {
+      width: 100%;
+      font-size: 12px;
+      color: #808080;
+      text-align: left;
+      overflow: hidden;
+    }
+    .item_down {
+      overflow: hidden;
+      width: 100%;
+      font-size: 12px;
+      .item_down_left {
+        width: 70%;
+        float: left;
+      }
+      .item_down_right {
+        width: 30%;
+        text-align: center;
+        float: left;
       }
     }
   }