feat:重构模块

2025-10-08 22:06:39 +08:00
parent f60d78fe8b
commit 2e81e57774
222 changed files with 2267 additions and 3059 deletions
--- a/src/components/Bill/BillDailyItem.vue
+++ b/src/components/Bill/BillDailyItem.vue
@@ -0,0 +1,134 @@
+<template>
+  <el-empty v-if="dailyItemInfo.itemList.length === 0"/>
+
+  <div v-else class="bill-daily-item card-item">
+    <daily-summary :date="dailyItemInfo.date">
+      <template #extra>
+        <span>收入：{{ formatAmount(dailyItemInfo.totalIncome, true) }}</span>
+        <span>支出：{{ formatAmount(dailyItemInfo.totalExpensive, true) }}</span>
+      </template>
+    </daily-summary>
+
+    <div class="daily-list">
+      <daily-card v-for="(item, index) in dailyItemInfo.itemList"
+                  :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 setup lang="ts">
+import DailySummary from '@/components/DailySummary.vue'
+import DailyCard from '@/components/DailyCard.vue'
+import { defineProps, onMounted, reactive, watch } from 'vue'
+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()
+
+const props = defineProps({
+  date: {
+    required: true,
+    type: String
+  }
+})
+
+watch(() => props.date, () => {
+  getBillDailyByDate(props.date as string)
+})
+
+watch(() => billStore.isRefresh, () => {
+  getBillDailyByDate(props.date as string)
+})
+
+onMounted(() => {
+  getBillDailyByDate(props.date as string)
+})
+
+const dailyItemInfo = reactive({
+  date: '',
+  totalExpensive: 0,
+  totalIncome: 0,
+  itemList: [] as IBillRecord[]
+})
+
+/**
+ * 根据日期获取当天的收支记录
+ * @param date
+ */
+const getBillDailyByDate = (date: string) => {
+  if (date) {
+    dailyItemInfo.date = formatChineseDate(date, 'MM月DD日 dddd')
+
+    const calendarDaily = getCalendarDailyCount(billStore.billRecordList, date)
+    dailyItemInfo.itemList = calendarDaily.dailyRecordList
+    dailyItemInfo.totalIncome = calendarDaily.totalIncome
+    dailyItemInfo.totalExpensive = calendarDaily.totalExpensive
+  } else {
+    dailyItemInfo.itemList = []
+  }
+}
+
+/**
+ * 点击账单记录按钮
+ * @param billRecord 账单记录
+ */
+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>
+
+<style lang="scss">
+.bill-daily-item {
+  display: flex;
+  flex-direction: column;
+  gap: 1vh;
+  padding: 1vh 0.5vw;
+
+  .daily-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1vh;
+    overflow: auto;
+  }
+}
+</style>