98 lines
3.2 KiB
Vue
98 lines
3.2 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="content">
|
|
<div class="title">
|
|
<el-date-picker
|
|
v-model="dateArray"
|
|
type="daterange"
|
|
range-separator="~"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
/>
|
|
</div>
|
|
<div class="content-box">
|
|
<el-table :data="list" style="width: 100%" :summary-method="getSummaries" show-summary>
|
|
<el-table-column prop="date" label="日期" align="center"/>
|
|
<el-table-column label="营业收入" align="center">
|
|
<el-table-column prop="totalMoney" label="总金额" align="center"/>
|
|
<el-table-column prop="totalCost" label="成本" align="center"></el-table-column>
|
|
<el-table-column prop="grossMargin" label="毛利" align="center"></el-table-column>
|
|
<el-table-column prop="grossProfitRate" label="毛利率" align="center"></el-table-column>
|
|
<el-table-column prop="amount1" label="客量" align="center"></el-table-column>
|
|
<el-table-column prop="orderVolume" label="客单" align="center"></el-table-column>
|
|
</el-table-column>
|
|
<el-table-column label="支付方式" align="center">
|
|
<el-table-column prop="paymentMethodVo.medicalInsurancePayment" label="医保" align="center"/>
|
|
<el-table-column prop="paymentMethodVo.wechatPayment" label="微信" align="center"/>
|
|
<el-table-column prop="paymentMethodVo.aliPayment" label="支付宝" align="center"/>
|
|
<el-table-column prop="paymentMethodVo.cashPayment" label="现金" align="center"/>
|
|
<el-table-column prop="paymentMethodVo.otherPayment" label="其他" align="center"/>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {h, onMounted, ref, type VNode} from 'vue'
|
|
import {post} from "@/utils/request.ts";
|
|
import {getThisWeek} from "@/utils/dateUtils.ts";
|
|
import type { TableColumnCtx } from 'element-plus'
|
|
|
|
const dateArray = ref<any>([])
|
|
const list = ref<any>([])
|
|
|
|
|
|
|
|
const getDailyReport = ()=>{
|
|
post("charge/dailyChargingReport",{startDate:dateArray.value[0],endDate:dateArray.value[1]} ).then((res:any)=>{
|
|
list.value = res
|
|
})
|
|
}
|
|
interface SummaryMethodProps<T> {
|
|
columns: TableColumnCtx<T>[]
|
|
data: T[]
|
|
}
|
|
|
|
const getSummaries = (param: SummaryMethodProps<any>) => {
|
|
const { columns, data } = param
|
|
const sums: (string | VNode)[] = []
|
|
columns.forEach((column, index) => {
|
|
if (index === 0) {
|
|
sums[index] = h('div', [
|
|
'合计',
|
|
])
|
|
return
|
|
}
|
|
const values = data.map((item:any) => Number(item[column.property]))
|
|
if (!values.every((value) => Number.isNaN(value))) {
|
|
sums[index] = `${values.reduce((prev, curr) => {
|
|
const value = Number(curr)
|
|
if (!Number.isNaN(value)) {
|
|
return prev + curr
|
|
} else {
|
|
return prev
|
|
}
|
|
}, 0)}`
|
|
} else {
|
|
sums[index] = '-'
|
|
}
|
|
})
|
|
|
|
return sums
|
|
}
|
|
|
|
|
|
|
|
onMounted(()=>{
|
|
let thisWeek = getThisWeek()
|
|
dateArray.value[0] = thisWeek.start
|
|
dateArray.value[1] = thisWeek.end
|
|
getDailyReport()
|
|
})
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.title{
|
|
margin-bottom: 20px;
|
|
}
|
|
</style> |