feat:增加账单搜索功能

src/apis/bill.ts

@@ -4,7 +4,7 @@ import {
   IBillCategory,
   IBillPay,
   IBillQuery,
-  IBillRecord
+  IBillRecord, IBillSearch
 } from '@/types/bill'
 import { IStatsChart } from 'vue3-common/dist/types'
 
@@ -41,6 +41,13 @@ export const queryBillSummaryApi = (query: IBillQuery): Promise<IBillRecord[]> =
     params: query
   })
 
+export const searchBillSummaryApi = (search: IBillSearch): Promise<IBillRecord[]> =>
+  cloudService({
+    url: '/home-api/bill/search',
+    method: 'get',
+    params: search
+  })
+
 export const queryBillStatsApi = (type: string, query: IBillQuery): Promise<IStatsChart[]> =>
   cloudService({
     url: `/home-api/bill/stats/${type}`,

src/components/Bill/BillDailyItem.vue

@@ -43,10 +43,8 @@ import { useBillStore } from '@/store/bill.ts'
 import { useRouter } from 'vue-router'
 import { formatChineseDate } from 'vue3-common/utils/dateUtil'
 import { IBillRecord } from '@/types/bill.ts'
-import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 import { formatAmount } from 'vue3-common/utils/numberUtil'
 import { getCalendarDailyCount, getCategoryByName } from '@/utils/home/billUtil.ts'
-import { isMobile } from 'vue3-common/utils/layoutUtil'
 
 const billStore = useBillStore()
 const router = useRouter()
@@ -101,19 +99,10 @@ const getBillDailyByDate = (date: string) => {
 const selectBillRecordClick = async (billRecord: IBillRecord) => {
   await billStore.queryBillRecord(billRecord.id as number)
   billStore.billApiType = 'UPDATE'
-
-  if (isMobile()) {
   await router.push({
     name: 'BillDetailId',
     params: { id: billStore.currentBillRecord.id }
   })
-  } else {
-    billStore.billDialog = {
-      title: '编辑账单',
-      visible: true,
-      data: deepCopyObject(billStore.currentBillRecord)
-    }
-  }
 }
 </script>
 

src/layout/TabBar.vue

@@ -15,6 +15,11 @@
       <i class="fa-solid fa-chart-pie"></i>
       <span>统计</span>
     </router-link>
+    <router-link v-if="path.includes('bill')" to="/bill/search"
+                 @click="routerClick()" class="item">
+      <i class="fa-solid fa-magnifying-glass"></i>
+      <span>搜索</span>
+    </router-link>
     <router-link v-if="path.includes('bill')" to="/bill/setting"
                  @click="routerClick()" class="item">
       <i class="fa-solid fa-gear"></i>

src/store/bill.ts

@@ -8,7 +8,7 @@ import {
   queryBillBookApi,
   queryBillCategoryApi, queryBillPayApi,
   queryBillRecordApi,
-  queryBillStatsApi, queryBillSummaryApi, updateBillRecordApi
+  queryBillStatsApi, queryBillSummaryApi, searchBillSummaryApi, updateBillRecordApi
 } from '@/apis/bill'
 import { getCurrentMonth, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'
 import { IDateType, ImagePathEnum } from '@/types'
@@ -44,6 +44,11 @@ export const useBillStore = defineStore('bill', {
       billYear: getCurrentYear(),
       billMonth: getCurrentMonth()
     },
+    billSearchForm: {
+      content: '',
+      category: '',
+      location: ''
+    },
     billDateStatsList: [] as IStatsChart[],
     billBookStatsList: [] as IStatsChart[],
     billCategoryStatsList: [] as IStatsChart[],
@@ -137,6 +142,11 @@ export const useBillStore = defineStore('bill', {
       this.isRefresh = !this.isRefresh
       this.isLoading = false
     },
+    async searchInfo() {
+      this.isLoading = true
+      this.billRecordList = await searchBillSummaryApi(this.billSearchForm)
+      this.isLoading = false
+    },
     getEmptyBillRecord(): IBillRecord {
       return {
         amount: 0,

src/styles/home/bill.mobile.module.scss

@@ -86,4 +86,11 @@
       gap: 10px;
     }
   }
+
+  .bill-search-list {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
 }

src/types/bill.ts

@@ -60,6 +60,12 @@ export interface IBillQuery {
   endDate: string;
 }
 
+export interface IBillSearch {
+  content?: string;
+  category?: string;
+  location?: string;
+}
+
 export interface IBillCalendarDaily {
   dailyRecordList: IBillRecord[];
   totalExpensive: number;

src/views/bill/data.vue

@@ -17,11 +17,26 @@ import { onMounted } from 'vue'
 import { useBillStore } from '@/store/bill.ts'
 import { Plus } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router'
+import { getCurrentMonth, getCurrentYear } from 'vue3-common/utils/dateUtil'
 
 const billStore = useBillStore()
 const router = useRouter()
 
 onMounted(async () => {
+  billStore.billQueryForm = {
+    billBook: 'all',
+    billYear: getCurrentYear(),
+    billMonth: getCurrentMonth()
+  }
+
+  billStore.billSearchForm = {
+    category: '',
+    content: '',
+    location: ''
+  }
+
+  billStore.billType = 'expensive'
+  billStore.billDateType = 'month'
   await billStore.refreshInfo()
 })
 

src/views/bill/search.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="mobile-bill-view common-mobile-view">
+    <div class="common-query">
+      <el-form :model="billStore.billSearchForm">
+        <el-form-item label="账单内容">
+          <el-input v-model="billStore.billSearchForm.content"
+                    @input="billStore.searchInfo()"
+                    placeholder="请输入账单内容" clearable/>
+        </el-form-item>
+
+        <el-form-item label="账单类别">
+          <el-input v-model="billStore.billSearchForm.category"
+                    @input="billStore.searchInfo()"
+                    placeholder="请输入账单类别" clearable/>
+        </el-form-item>
+
+        <el-form-item label="账单地址">
+          <el-input v-model="billStore.billSearchForm.location"
+                    @input="billStore.searchInfo()"
+                    placeholder="请输入账单地址" clearable/>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div v-if="billStore.billRecordList.length === 0">
+      <el-empty description="暂无数据"/>
+    </div>
+
+    <div v-else class="bill-search-list card-item">
+      <daily-card v-for="(item, index) in billStore.billRecordList"
+                  :key="index" @click="selectBillRecordClick(item)"
+                  :title="item.category" :content="item.content">
+        <template #icon>
+          <i :class="getCategoryByName(billStore.billCategoryList, item.category).icon"
+             :style="{color: getCategoryByName(billStore.billCategoryList, item.category).color}">
+          </i>
+        </template>
+
+        <template #content>
+          <span v-if="item.location" class="location">
+            <i class="fa-solid fa-location-dot"></i>
+            {{ item.location }}
+          </span>
+        </template>
+
+        <template #extra>
+          <span>{{ formatAmount(item.amount, true) }}</span>
+          <span>{{ item.payAccount }}</span>
+        </template>
+      </daily-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import DailyCard from '@/components/DailyCard.vue'
+import { onMounted } from 'vue'
+import { useBillStore } from '@/store/bill.ts'
+import { getCategoryByName } from '@/utils/home/billUtil'
+import { formatAmount } from 'vue3-common/utils/numberUtil'
+import { IBillRecord } from '@/types/bill'
+import { useRouter } from 'vue-router'
+
+const billStore = useBillStore()
+const router = useRouter()
+
+onMounted(async () => {
+  await billStore.searchInfo()
+})
+
+const selectBillRecordClick = async (billRecord: IBillRecord) => {
+  await billStore.queryBillRecord(billRecord.id as number)
+  billStore.billApiType = 'UPDATE'
+  await router.push({
+    name: 'BillDetailId',
+    params: { id: billStore.currentBillRecord.id }
+  })
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/bill.mobile.module";
+</style>

src/views/meta.ts

@@ -41,6 +41,10 @@ export const mobileHomeMeta: IRouteMetaConfig = {
     title: '账单图表',
     icon: ''
   },
+  '/bill/search': {
+    title: '账单搜索',
+    icon: ''
+  },
   '/bill/detail/:id': {
     title: '账单内容',
     icon: ''