feat:重构模块

src/components/Bill/BillQuery.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="common-query">
+    <el-select v-model="billStore.billQueryForm.billBook"
+               @change="billStore.refreshInfo()" style="width: 120px">
+      <el-option
+          v-for="(item, index) in billQuery.billBookList"
+          :key="index" :label="item.label" :value="item.name"
+      />
+    </el-select>
+
+    <el-select v-model="billStore.billDateType"
+               @change="billStore.refreshInfo()"
+               style="width: 120px;align-self: center;">
+      <el-option v-for="(item, index) in dateTypeOptions" :key="index"
+                 :label="item.label" :value="item.value"/>
+    </el-select>
+
+    <el-switch
+        v-model="billStore.billType"
+        inline-prompt
+        active-value="income" inactive-value="expensive"
+        active-text="收入账单" inactive-text="支出账单"
+        @change="billStore.refreshInfo()"
+        style="--el-switch-on-color: #6FBB69; --el-switch-off-color: #CA6C65;"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue'
+import { useBillStore } from '@/store/bill.ts'
+import { deepCopyObject } from 'vue3-common/utils/dataUtil'
+import { IBillBook } from '@/types/bill.ts'
+
+const billStore = useBillStore()
+
+onMounted(async () => {
+  await billStore.initBillInfo()
+
+  billQuery.billBookList = deepCopyObject(billStore.billBookList)
+  billQuery.billBookList.push({
+    color: '',
+    icon: '',
+    id: 0,
+    label: '全部账本',
+    name: 'all'
+  })
+})
+
+const dateTypeOptions = [{
+  label: '按月选择',
+  value: 'month'
+},
+{
+  label: '按年选择',
+  value: 'year'
+}]
+
+const billQuery = reactive({
+  query: '',
+  billBookList: [] as IBillBook[]
+})
+</script>