更新工作台页面,优化交易数据展示,修复核销订单金额等数据展示错误,并调整相关API接口路径

This commit is contained in:
zmj 2024-06-14 18:08:28 +08:00
parent 6e81203e22
commit 490f9d3bfe
5 changed files with 189 additions and 31 deletions

View File

@ -0,0 +1,11 @@
import request from '@/utils/request'
// 财务转账表列表
export function apiFinancialTransfersLists(params: any) {
return request.get({ url: '/finance/financialTransfers/lists', params })
}
// 发送
export function apiFinancialTransfersConfirm(params: any) {
return request.post({ url: '/finance/financialTransfers/confirmation', params })
}

View File

@ -42,6 +42,6 @@ export function apideliveryOrder(params: any) {
return request.get({ url: '/workbench/deliveryOrder', params }) return request.get({ url: '/workbench/deliveryOrder', params })
} }
export function apidbusinessStatistics() { export function apidbusinessStatistics(params: any) {
return request.get({ url: '/workbench/business_statistics' }) return request.get({ url: '/workbench/business_statistics', params })
} }

View File

@ -0,0 +1,119 @@
<template>
<div>
<!-- <el-card class="!border-none mb-4" shadow="never">
<el-form class="mb-[-16px]" :model="queryParams" inline>
<el-form-item label="金额" prop="money">
<el-input class="w-[280px]" v-model="queryParams.money" clearable placeholder="请输入金额" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetPage">查询</el-button>
<el-button @click="resetParams">重置</el-button>
</el-form-item>
</el-form>
</el-card> -->
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
<div class="mt-4">
<el-table :data="pager.lists" @selection-change="handleSelectionChange">
<el-table-column label="id" prop="store_id" show-overflow-tooltip />
<el-table-column label="时间" prop="create_time" show-overflow-tooltip />
<el-table-column label="收款方" prop="store_name" show-overflow-tooltip />
<el-table-column label="结算金额" prop="money" show-overflow-tooltip />
<el-table-column label="结算方式" prop="extract_type" show-overflow-tooltip />
<el-table-column label="确认时间" prop="initiation_time" show-overflow-tooltip>
<template #default="{ row }">
{{ timeFormat(row.initiation_time, 'yyyy-mm-dd') }}
</template>
</el-table-column>
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button link type="primary" @click="handleClick(row)" v-if="row.status == 1">
确认
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="flex mt-4 justify-end">
<pagination v-model="pager" @change="getLists" />
</div>
</el-card>
<el-dialog v-model="showDialog" title="确认结算" width="680px">
<el-descriptions :column="1" border>
<el-descriptions-item label="时间"> {{ rowDate.create_time }} </el-descriptions-item>
<el-descriptions-item label="收款方"> {{ rowDate.store_name }} </el-descriptions-item>
<el-descriptions-item label="结算金额"> {{ rowDate.money }} </el-descriptions-item>
<el-descriptions-item label="结算方式"> {{ rowDate.extract_type }} </el-descriptions-item>
<el-descriptions-item label="确认时间"> {{ timeFormat(rowDate.initiation_time, 'yyyy-mm-dd') }}
</el-descriptions-item>
<el-descriptions-item label="操作">
<el-radio-group v-model="form.status">
<el-radio label="1">确认</el-radio>
<el-radio label="0">不确认</el-radio>
</el-radio-group>
</el-descriptions-item>
<el-descriptions-item label="备注">
<el-input class="w-[280px]" v-model="form.mark" clearable placeholder="请输入备注" type="textarea" />
</el-descriptions-item>
</el-descriptions>
<el-form class="mt-4">
<el-form-item>
<el-button type="primary" @click="handleConfirm">确定</el-button>
<el-button @click="showDialog = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script lang="ts" setup name="financialTransfersLists">
import { ref, reactive } from "vue"
import { usePaging } from '@/hooks/usePaging'
import { apiFinancialTransfersLists, apiFinancialTransfersConfirm } from '@/api/financial_transfers'
import { timeFormat } from '@/utils/util'
const showDialog = ref(false)
const rowDate = ref('')
//
const queryParams = reactive({
})
//
const selectData = ref<any[]>([])
//
const handleSelectionChange = (val: any[]) => {
selectData.value = val.map(({ id }) => id)
}
//
//
const { pager, getLists, resetParams, resetPage } = usePaging({
fetchFun: apiFinancialTransfersLists,
params: queryParams
})
const handleClick = (row: any) => {
rowDate.value = row
showDialog.value = true
}
const form = reactive({
id: "",
status: "",
mark: ""
})
//
const handleConfirm = async (id: number | any[]) => {
form.id = rowDate.value.id
await apiFinancialTransfersConfirm({ ...form })
getLists()
showDialog.value = false
}
getLists()
</script>

View File

@ -2,25 +2,42 @@
<el-card> <el-card>
<template #header>今日</template> <template #header>今日</template>
<el-row class="flex"> <el-row class="flex">
<el-col class="flex" style="flex:1" v-for="(item, index) in statisticLists" :key="index"> <!-- <el-col class="flex" style="flex:1" v-for="(item, index) in statisticLists" :key="index">
<img class="w-[50px] h-[50px] mr-2" :src="item.src" /> <img class="w-[50px] h-[50px] mr-2" :src="item.src" />
<div> <div>
<el-statistic :title="item.title" :value="item.value()" /> <el-statistic :title="item.title" :value="item.value()" />
<p style="font-size: 11px;color: #FBCE6B;" v-if="item.footer">{{ item.footer }}</p> <p style="font-size: 11px;color: #FBCE6B;" v-if="item.footer">{{ item.footer }}</p>
</div> </div>
</el-col> </el-col> -->
<div class="flex " style="flex:1" v-for="(item, index) in statisticLists" :key="index">
<div class="mr-2">
<img class="w-[50px] h-[50px] mr-2" :src="item.src" />
</div>
<div>
<div class="text-info">{{ item.title }}</div>
<div class="text-6xl">{{ item.value() }}</div>
</div>
</div>
</el-row> </el-row>
</el-card> </el-card>
<el-card> <el-card>
<template #header>累计</template> <template #header>
<div class="flex justify-between">
<span>累计</span>
<el-date-picker v-model="month" type="month" placeholder="选择月份" @change="monthChange"
value-format="YYYY-MM" />
</div>
</template>
<el-row class="flex"> <el-row class="flex">
<el-col style="flex:1" class='flex' v-for="(item, index) in statisticLists2" :key="index"> <div class="flex " style="flex:1" v-for="(item, index) in statisticLists2" :key="index">
<img class="w-[50px] h-[50px] mr-2" :src="item.src" /> <div class="mr-2">
<div> <img class="w-[50px] h-[50px] mr-2" :src="item.src" />
<el-statistic :title="item.title" :value="item.value()" />
<p style="font-size: 11px;color: #FBCE6B;" v-if="item.footer">{{ item.footer }}</p>
</div> </div>
</el-col> <div>
<div class="text-info">{{ item.title }}</div>
<div class="text-6xl">{{ item.value() }}</div>
</div>
</div>
</el-row> </el-row>
</el-card> </el-card>
@ -37,7 +54,7 @@ import { ref, reactive, onMounted } from "vue"
import { apidbusinessStatistics } from '@/api/statistics' import { apidbusinessStatistics } from '@/api/statistics'
import vCharts from 'vue-echarts' import vCharts from 'vue-echarts'
const date = ref([]) const month = ref()
const loading = ref(true) const loading = ref(true)
const formData = ref({ const formData = ref({
@ -63,7 +80,7 @@ const statisticLists = reactive([
} }
}, },
{ {
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701594ff8897.png', src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/202406041717013a08c6793.png',
title: "成本", title: "成本",
value: () => { value: () => {
return String(formData.value.today.cost_today || 0) return String(formData.value.today.cost_today || 0)
@ -103,7 +120,7 @@ const statisticLists2 = reactive([
} }
}, },
{ {
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701594ff8897.png', src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701fbb680115.png',
title: "现金收银金额", title: "现金收银金额",
value: () => { value: () => {
return String(formData.value.all.cash_all || 0) return String(formData.value.all.cash_all || 0)
@ -174,7 +191,7 @@ const visitorOption = reactive({
const getData = async () => { const getData = async () => {
let res = await apidbusinessStatistics() let res = await apidbusinessStatistics({ month: month.value })
formData.value.all = res.all formData.value.all = res.all
formData.value.today = res.today formData.value.today = res.today
let data = res.time let data = res.time
@ -189,14 +206,13 @@ const getData = async () => {
loading.value = false loading.value = false
} }
const monthChange = () => {
const initPage = () => {
getData() getData()
} }
onMounted(() => { onMounted(() => {
initPage() getData()
}) })
</script> </script>

View File

@ -10,12 +10,17 @@
</el-form> </el-form>
</el-card> </el-card>
<el-card :key="date"> <el-card :key="date">
<el-row> <div class="flex flex-wrap">
<el-col :span="6" class='flex mb-7' v-for="(item, index) in statisticLists" :key="index"> <div class="w-1/5 flex mb-6" v-for="(item, index) in statisticLists" :key="index">
<img class="w-[50px] h-[50px] mr-2" :src="item.src" /> <div class="mr-2">
<el-statistic :title="item.title" :value="item.value()" /> <img class="w-[50px] h-[50px] mr-2" :src="item.src" />
</el-col> </div>
</el-row> <div>
<div class="text-info">{{ item.title }}</div>
<div class="text-6xl">{{ item.value() }}</div>
</div>
</div>
</div>
</el-card> </el-card>
<el-card :key="date"> <el-card :key="date">
<template #header> <template #header>
@ -100,51 +105,58 @@ const formData = ref({
const statisticLists = reactive([ const statisticLists = reactive([
{ {
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701552002039.png', src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701552002039.png',
icon: 'RectangleCopy12',
title: "核销订单金额", title: "核销订单金额",
value: () => { value: () => {
return String(formData.value.verify_amount) return String(formData.value.verify_amount || 0)
} }
}, },
{ {
src: "https://ceshi-engineering.lihaink.cn/uploads/files/20240604/2024060417170150a511510.png", src: "https://ceshi-engineering.lihaink.cn/uploads/files/20240604/2024060417170150a511510.png",
icon: 'RectangleCopy12',
title: "余额消费金额", title: "余额消费金额",
value: () => { value: () => {
return String(formData.value.balance_amount) return String(formData.value.balance_amount || 0)
} }
}, },
{ {
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701594ff8897.png', src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701594ff8897.png',
title: "门店收益金额", title: "门店收益金额",
icon: 'RectangleCopy12',
value: () => { value: () => {
return String(formData.value.income_amount) return String(formData.value.income_amount || 0)
} }
}, },
{ {
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/202406041717018a22e1161.png', src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/202406041717018a22e1161.png',
title: "线下收银订单金额", title: "线下收银订单金额",
icon: 'RectangleCopy12',
value: () => { value: () => {
return String(formData.value.cashier_amount) return String(formData.value.cashier_amount || 0)
} }
}, },
{ {
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/202406041717013a08c6793.png', src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/202406041717013a08c6793.png',
title: "现金收银订单金额", title: "现金收银订单金额",
icon: 'RectangleCopy12',
value: () => { value: () => {
return String(formData.value.cash_amount) return String(formData.value.cash_amount || 0)
} }
}, },
{ {
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701469b91377.png', src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701469b91377.png',
title: "门店成交用户数", title: "门店成交用户数",
icon: 'RectangleCopy12',
value: () => { value: () => {
return String(formData.value.user_number) return String(formData.value.user_number || 0)
} }
}, },
{ {
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701fbb680115.png', src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701fbb680115.png',
title: "门店营业额", title: "门店营业额",
icon: 'RectangleCopy12',
value: () => { value: () => {
return String(formData.value.order_amount) return String(formData.value.order_amount || 0)
} }
}, },