feat(审批资产列表): 添加标签页切换和搜索功能

- 新增标签页切换功能，区分待处理和已处理审批
- 添加搜索框支持按内容筛选
- 优化列表加载逻辑，避免重复数据
- 将核销码按钮改为悬浮样式

src/common/apis/approval/type.ts

@@ -147,6 +147,8 @@ export interface SearchReturnApprovalAssetQuery {
   corpid?: string;
   code?: string;
   codeCheck?: number;
+  handleStatus?: number;
+  searchStr?: string;
 }
 
 export interface ApprovalGoodsCellEntity {

src/pages/approvalAsset/list.vue

@@ -1,35 +1,13 @@
 <template>
     <div class="approval-list-container">
+        <!-- 状态切换标签页 -->
+        <van-tabs v-model:active="activeTab" @change="handleTabChange">
+            <van-tab title="待处理"></van-tab>
+            <van-tab title="已处理"></van-tab>
+        </van-tabs>
         <!-- 搜索表单 -->
         <van-form @submit="handleSearch">
-            <van-field name="status" label="审批状态" readonly clickable v-model="statusText" placeholder="请选择状态"
-                @click="showStatusPicker = true" />
-            <van-popup v-model:show="showStatusPicker" position="bottom">
-                <van-picker :columns="statusOptions" @confirm="onStatusConfirm" @cancel="showStatusPicker = false" />
-            </van-popup>
-
-            <!-- <van-field
-        readonly
-        clickable
-        name="date"
-        :value="dateRangeText"
-        label="申请时间"
-        placeholder="选择时间范围"
-        @click="showDatePicker = true"
-      />
-      <van-popup v-model:show="showDatePicker" position="bottom">
-        <van-datetime-picker
-          type="daterange"
-          @confirm="onDateConfirm"
-          @cancel="showDatePicker = false"
-        />
-      </van-popup> -->
-
-            <div class="btn-group">
-                <van-button type="primary" native-type="submit" style="flex: 1; height: 44px; border-radius: 8px; font-size: 16px;">搜索</van-button>
-                <van-button type="default" @click="showVerificationDialog = true" style="flex: 1; height: 44px; border-radius: 8px; font-size: 16px;">输入核销码</van-button>
-            </div>
-
+            <van-search v-model="searchParams.searchStr" placeholder="请输入搜索内容" />
         </van-form>
 
         <van-dialog v-model:show="showVerificationDialog" title="输入核销码" @confirm="handleVerification">
@@ -37,7 +15,8 @@
         </van-dialog>
 
         <!-- 审批列表 -->
-        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
+            class="approval-list">
             <van-cell v-for="item in list" :key="item.approvalId" :title="`审批单号：${item.approvalId}`" clickable
                 @click="handleCellClick(item.approvalId)">
                 <template #label>
@@ -53,11 +32,18 @@
                 </template>
             </van-cell>
         </van-list>
+
+        <!-- 悬浮核销码按钮 -->
+        <van-button type="primary" @click="showVerificationDialog = true" class="floating-verification-btn">
+            <van-icon name="plus" style="font-size: 20px;" />
+            <!-- <span>核销码</span> -->
+        </van-button>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, watch, onUnmounted } from 'vue'
+import { debounce } from 'lodash-es'
 import { showDialog, showToast } from 'vant'
 import { checkApprovalCodeApi, getApprovalAssetListApi } from '@/common/apis/approval'
 import type { SearchReturnApprovalAssetQuery, ReturnApprovalAssetDTO } from '@/common/apis/approval/type'
@@ -69,11 +55,14 @@ const router = useRouter();
 const wxStore = useWxStore();
 
 // 搜索参数
+const activeTab = ref(0);
 const searchParams = reactive<SearchReturnApprovalAssetQuery>({
     corpid: wxStore.corpid,
+    handleStatus: activeTab.value,
     approvalType: 1,
     code: '',
     codeCheck: 1,
+    searchStr: '',
     pageNum: 1,
     pageSize: 10,
 })
@@ -169,6 +158,12 @@ const onDateConfirm = (values: Date[]) => {
     showDatePicker.value = false
 }
 
+// 标签页切换处理
+const handleTabChange = (tabIndex: number) => {
+    searchParams.handleStatus = tabIndex;
+    handleSearch();
+};
+
 // 搜索处理
 const handleSearch = () => {
     list.value = []
@@ -176,6 +171,10 @@ const handleSearch = () => {
     onLoad()
 }
 
+const debouncedHandleSearch = debounce(() => {
+    handleSearch();
+}, 500);
+
 // 重置表单
 const handleReset = () => {
     Object.assign(searchParams, {
@@ -198,7 +197,10 @@ const onLoad = async () => {
     try {
         searchParams.corpid = wxStore.corpid;
         const { data } = await getApprovalAssetListApi(searchParams)
-        list.value.push(...data.rows)
+        // 根据approvalId去重后再添加新数据
+        const existingIds = new Set(list.value.map(item => item.approvalId));
+        const newItems = data.rows.filter(item => !existingIds.has(item.approvalId));
+        list.value.push(...newItems);
         loading.value = false
 
         if (list.value.length >= data.total) {
@@ -211,6 +213,15 @@ const onLoad = async () => {
         finished.value = true
     }
 }
+
+// 监听搜索字符串变化触发搜索
+watch(() => searchParams.searchStr, (newVal) => {
+    debouncedHandleSearch();
+});
+
+onUnmounted(() => {
+    debouncedHandleSearch.cancel();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -218,6 +229,10 @@ const onLoad = async () => {
     padding: 12px;
 }
 
+.approval-list {
+    margin-top: 12px;
+}
+
 .van-cell__title {
     font-size: 14px;
     color: #333;
@@ -238,4 +253,18 @@ const onLoad = async () => {
     /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
     padding: 16px;
 }
+
+.floating-verification-btn {
+    position: fixed;
+    bottom: 80px;
+    right: 20px;
+    border-radius: 50%;
+    width: 56px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    padding: 0;
+}
 </style>

types/auto/components.d.ts

@@ -35,8 +35,10 @@ declare module 'vue' {
     VanSidebar: typeof import('vant/es')['Sidebar']
     VanSidebarItem: typeof import('vant/es')['SidebarItem']
     VanStepper: typeof import('vant/es')['Stepper']
+    VanTab: typeof import('vant/es')['Tab']
     VanTabbar: typeof import('vant/es')['Tabbar']
     VanTabbarItem: typeof import('vant/es')['TabbarItem']
+    VanTabs: typeof import('vant/es')['Tabs']
     VanTag: typeof import('vant/es')['Tag']
     VanUploader: typeof import('vant/es')['Uploader']
   }