124 lines
3.3 KiB
Vue
124 lines
3.3 KiB
Vue
<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.totalExpense, 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 { formatAmount } from 'vue3-common/utils/numberUtil'
|
||
import { getCalendarDailyCount, getCategoryByName } from '@/utils/home/billUtil.ts'
|
||
|
||
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: '',
|
||
totalExpense: 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.totalExpense = calendarDaily.totalExpense
|
||
} else {
|
||
dailyItemInfo.itemList = []
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 点击账单记录按钮
|
||
* @param billRecord 账单记录
|
||
*/
|
||
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">
|
||
.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>
|