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

2024-06-14 18:08:28 +08:00 · 2024-06-14 18:08:28 +08:00 · 490f9d3bfe
parent 6e81203e22
commit 490f9d3bfe
5 changed files with 189 additions and 31 deletions
--- a/src/api/financial_transfers.ts
+++ b/src/api/financial_transfers.ts
@ -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 })
+}
--- a/src/api/statistics.ts
+++ b/src/api/statistics.ts
@ -42,6 +42,6 @@ export function apideliveryOrder(params: any) {
    return request.get({ url: '/workbench/deliveryOrder', params })
 }

-export function apidbusinessStatistics() {
-    return request.get({ url: '/workbench/business_statistics' })
+export function apidbusinessStatistics(params: any) {
+    return request.get({ url: '/workbench/business_statistics', params })
 }
--- a/src/views/financialTransfers/index.vue
+++ b/src/views/financialTransfers/index.vue
@ -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>
+
--- a/src/views/workbench/earnings/index.vue
+++ b/src/views/workbench/earnings/index.vue
@ -2,25 +2,42 @@
    <el-card>
        <template #header>今日</template>
        <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" />
                <div>
                    <el-statistic :title="item.title" :value="item.value()" />
                    <p style="font-size: 11px;color: #FBCE6B;" v-if="item.footer">{{ item.footer }}</p>
                </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-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-col style="flex:1" class='flex' v-for="(item, index) in statisticLists2" :key="index">
-                <img class="w-[50px] h-[50px] mr-2" :src="item.src" />
-                <div>
-                    <el-statistic :title="item.title" :value="item.value()" />
-                    <p style="font-size: 11px;color: #FBCE6B;" v-if="item.footer">{{ item.footer }}</p>
+            <div class="flex " style="flex:1" v-for="(item, index) in statisticLists2" :key="index">
+                <div class="mr-2">
+                    <img class="w-[50px] h-[50px] mr-2" :src="item.src" />
                </div>
-            </el-col>
+                <div>
+                    <div class="text-info">{{ item.title }}</div>
+                    <div class="text-6xl">{{ item.value() }}</div>
+                </div>
+            </div>
        </el-row>
    </el-card>

@ -37,7 +54,7 @@ import { ref, reactive, onMounted } from "vue"
 import { apidbusinessStatistics } from '@/api/statistics'
 import vCharts from 'vue-echarts'

-const date = ref([])
+const month = ref()
 const loading = ref(true)

 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: "成本",
        value: () => {
            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: "现金收银金额",
        value: () => {
            return String(formData.value.all.cash_all || 0)
@ -174,7 +191,7 @@ const visitorOption = reactive({


 const getData = async () => {
-    let res = await apidbusinessStatistics()
+    let res = await apidbusinessStatistics({ month: month.value })
    formData.value.all = res.all
    formData.value.today = res.today
    let data = res.time
@ -189,14 +206,13 @@ const getData = async () => {
    loading.value = false
 }

-
-const initPage = () => {
+const monthChange = () => {
    getData()
 }


 onMounted(() => {
-    initPage()
+    getData()
 })

 </script>
--- a/src/views/workbench/index.vue
+++ b/src/views/workbench/index.vue
@ -10,12 +10,17 @@
        </el-form>
    </el-card>
    <el-card :key="date">
-        <el-row>
-            <el-col :span="6" class='flex mb-7' v-for="(item, index) in statisticLists" :key="index">
-                <img class="w-[50px] h-[50px] mr-2" :src="item.src" />
-                <el-statistic :title="item.title" :value="item.value()" />
-            </el-col>
-        </el-row>
+        <div class="flex flex-wrap">
+            <div class="w-1/5 flex mb-6" 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>
+        </div>
    </el-card>
    <el-card :key="date">
        <template #header>
@ -100,51 +105,58 @@ const formData = ref({
 const statisticLists = reactive([
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701552002039.png',
+        icon: 'RectangleCopy12',
        title: "核销订单金额",
        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",
+        icon: 'RectangleCopy12',
        title: "余额消费金额",
        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',
        title: "门店收益金额",
+        icon: 'RectangleCopy12',
        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',
        title: "线下收银订单金额",
+        icon: 'RectangleCopy12',
        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',
        title: "现金收银订单金额",
+        icon: 'RectangleCopy12',
        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',
        title: "门店成交用户数",
+        icon: 'RectangleCopy12',
        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',
        title: "门店营业额",
+        icon: 'RectangleCopy12',
        value: () => {
-            return String(formData.value.order_amount)
+            return String(formData.value.order_amount || 0)
        }
    },