feat:更新账单搜索模块

src/components/Bill/BillQuery.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="common-query">
     <el-select v-model="billStore.billQueryForm.billBook"
-               @change="billStore.refreshInfo()" style="width: 120px">
+               @change="billStore.refreshInfo(isStats)" style="width: 120px">
       <el-option
           v-for="(item, index) in billQuery.billBookList"
           :key="index" :label="item.label" :value="item.name"
@@ -9,7 +9,7 @@
     </el-select>
 
     <el-select v-model="billStore.billDateType"
-               @change="billStore.refreshInfo()"
+               @change="billStore.refreshInfo(isStats)"
                style="width: 120px;align-self: center;">
       <el-option v-for="(item, index) in dateTypeOptions" :key="index"
                  :label="item.label" :value="item.value"/>
@@ -20,23 +20,25 @@
         inline-prompt
         active-value="income" inactive-value="expensive"
         active-text="收入账单" inactive-text="支出账单"
-        @change="billStore.refreshInfo()"
+        @change="billStore.refreshInfo(isStats)"
         style="--el-switch-on-color: #6FBB69; --el-switch-off-color: #CA6C65;"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue'
+import { computed, onMounted, reactive } from 'vue'
 import { useBillStore } from '@/store/bill.ts'
 import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 import { IBillBook } from '@/types/bill.ts'
+import { useRoute } from 'vue-router'
 
 const billStore = useBillStore()
+const route = useRoute()
+
+const isStats = computed(() => route.path.includes('chart'))
 
 onMounted(async () => {
-  await billStore.initBillInfo()
-
   billQuery.billBookList = deepCopyObject(billStore.billBookList)
   billQuery.billBookList.push({
     color: '',

src/components/Bill/BillSearch.vue

@@ -0,0 +1,38 @@
+<template>
+  <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>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import { useBillStore } from '@/store/bill.ts'
+
+const billStore = useBillStore()
+
+onMounted(async () => {
+  await billStore.searchInfo()
+})
+</script>
+
+<style lang="scss">
+@use "@/styles/home/bill.mobile.module";
+</style>