修正ts类型

src/views/system/Sdb/SdbCashier/index.vue

@@ -13,7 +13,7 @@
             </el-select>
           </div>
           <div class="searchBox">
-            <el-input v-model="searchValue" @keyup.enter="getlist">
+            <el-input clearable v-model="searchValue" @keyup.enter="getlist">
               <template #suffix>
                 <el-icon @click="getlist" class="cursor-pointer">
                   <Search></Search>
@@ -21,16 +21,19 @@
               </template>
             </el-input>
 
-            <div class="listbox" v-if="list.length">
+            <div class="listbox" v-if="onceSearch || Searching">
               <div class="list_item">
                 <div class="title">
-                  <DictTag :options="com_cashier_type" :value="searchType"></DictTag>
+                  <DictTag :options="com_cashier_type" :value="LazysearchType"></DictTag>
                 </div>
-                <div class="list_body">
+                <div class="list_body" v-loading="Searching" v-if="list.length > 0 || Searching">
                   <div class="list_value" @click="searchclick(item)" v-for="(item, index) in list" :key="index">
                     {{ item.houseName }}-{{ item.residentName }}-{{ item.phone }}
                   </div>
                 </div>
+                <div v-else class="flex h-full items-center justify-center">
+                  <span class="noData">暂无数据</span>
+                </div>
               </div>
             </div>
           </div>
@@ -58,25 +61,30 @@
 </template>
 
 <script setup lang="ts">
-// TODO 收银台
-// TODO 历史缴费
 // TODO 添加临时收费
 // TODO 预存
-// TODO 缴费
 import { Search } from '@element-plus/icons-vue';
-import { Component, DefineComponent, ref } from 'vue';
+import { Component, ref } from 'vue';
 
 import cashier from './cashier.vue';
 import history from './history.vue';
-import { debounce } from '@/utils';
 import { cashQuery } from '@/api/system/SdbCashier';
 
+/** 当前状态 搜索后 搜索前 */
 const isSearch = ref(true);
+/** 为了loading 搜索结果 添加防抖 */
+const Searching = ref(false);
+const onceSearch = ref(false);
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { com_cashier_type } = toRefs<any>(proxy?.useDict('com_cashier_type'));
+console.log(com_cashier_type);
+/** 房屋 住户 车辆 车位 */
+const com_cashier_type_list = ref(['houseName', 'residentName']);
 const searchform = ref();
 const searchValue = ref('');
-const searchType = ref('residentName');
+const searchType = ref('houseName');
+const LazysearchType = ref('');
 function handleChangeSearchType() {
   list.value = [];
   searchValue.value = '';
@@ -126,13 +134,46 @@ function handleChecout(index: TabValue) {
 }
 
 // ! ===================================================================================
+// 用于追踪最新请求的标识
+let latestRequestId = 0;
 function getlist() {
-  console.log('search2');
+  // 生成当前请求的唯一ID
+  const currentRequestId = ++latestRequestId;
+  const currenttime = Date.now();
+
+  Searching.value = true;
   searchform.value = {};
   searchform.value[searchType.value] = searchValue.value;
-  cashQuery(searchform.value).then((res) => {
-    list.value = res.data;
-  });
+
+  let lastdata = [];
+  cashQuery(searchform.value)
+    .then((res) => {
+      // 检查是否是最新的请求，防止竞态条件
+      if (currentRequestId === latestRequestId) {
+        lastdata = res.data;
+      }
+    })
+    .finally(() => {
+      if (currentRequestId === latestRequestId) {
+        LazysearchType.value = searchType.value;
+        onceSearch.value = true;
+        // 计算已过去的时间
+        const elapsedTime = Date.now() - currenttime;
+        const minLoadingTime = 300;
+        if (elapsedTime < minLoadingTime) {
+          setTimeout(() => {
+            // 再次检查，防止在等待期间发起了新请求
+            if (currentRequestId === latestRequestId) {
+              list.value = lastdata;
+              Searching.value = false;
+            }
+          }, minLoadingTime - elapsedTime);
+        } else {
+          list.value = lastdata;
+          Searching.value = false;
+        }
+      }
+    });
 }
 // ! ===================================================================================
 const handleBack = () => {
@@ -142,6 +183,9 @@ const handleBack = () => {
 </script>
 
 <style scoped lang="scss">
+.noData {
+  color: #999999;
+}
 .tabsbox {
   height: 60px;
   background-color: #fff;
@@ -203,11 +247,15 @@ const handleBack = () => {
     }
 
     .listbox {
-      border: 1px solid #ccc;
       width: 100%;
       padding: 15px;
       min-height: 200px;
-      font-size: 16px;
+      margin-top: -2px;
+      box-sizing: border-box;
+      border-radius: 0px 0px 5px 5px;
+      background-color: rgba(255, 255, 255, 1);
+      color: rgba(16, 16, 16, 1);
+      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
 
       .list_item {
         padding-bottom: 30px;