feat:食堂菜品购买统计-增加部门统计

src/api/hard/hard-total.ts

@@ -1,5 +1,20 @@
 import request from "/@/utils/request"
 
+/**
+ * 根据部门 食堂菜品购买统计
+ */
+export function productTotalByDept(query: any) {
+	return request({
+		url: "/hard/hard-canteen-total-log/proudct-total-by-dept",
+		method: "post",
+		params: {
+			current: query.current,
+			size: query.size,
+		},
+		data: query,
+	})
+}
+
 /**
  * 食堂统计
  */

src/views/hard/canteen-product-total/components/dept-total-table.vue

@@ -0,0 +1,87 @@
+<template>
+    <el-dialog title="菜品统计" width="70%" v-model="visible" :close-on-click-modal="false" draggable>
+        <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList"> </el-form>
+        <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+            :header-cell-style="tableStyle.headerCellStyle" :summary-method="getSummaries" :show-summary="true"
+            @selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
+        </el-table>
+        <el-table-column label="用餐时间" align="center" prop="createTime">
+            <template #default="{ row }">
+                <span>{{ parseTime(row.createTime, "{y}-{m}-{d}") }}</span>
+            </template>
+        </el-table-column>
+        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+    </el-dialog>
+</template>
+
+<script setup lang="ts" name="dept-total-table">
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { displayPrice } from "/@/utils/formatMoney"
+import { parseTime } from "/@/utils/formatTime"
+
+import * as hardTotalApi from "/@/api/hard/hard-total"
+
+// 定义变量内容
+const visible = ref(false)
+
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    createdIsNeed: false,
+    queryForm: {},
+    pageList: hardTotalApi.canteenProudctQuery,
+})
+
+//  table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state)
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+    selectObjs.value = objs.map(({ id }) => id)
+    multiple.value = !objs.length
+}
+
+const openDialog = (createTimeStr: any, hourType: any) => {
+    visible.value = true
+    state.queryForm.createTimeStr = createTimeStr
+    state.queryForm.hourType = hourType
+    getDataList()
+}
+
+const updateQueryParams = (params: any) => {
+    if (!params) return
+    state.queryForm.merchantId = params.merchantId ?? null
+    getDataList()
+}
+
+const getSummaries = (param: any) => {
+    const { columns, data } = param
+    const totalColumns = ["count", "totalPrice"]
+    const totalRow = Array.from({ length: columns.length })
+    totalRow[0] = "合计"
+    columns.forEach((i: any, index: number) => {
+        if (totalColumns.includes(i.property)) {
+            const total = data
+                .filter((v: any) => v[i.property] != null)
+                .map((v: any) => Number(v[i.property]))
+                .reduce((pren: number, next: number) => pren + next, 0)
+            if (i.property.includes("Price")) {
+                totalRow[index] = displayPrice(total)
+            } else {
+                totalRow[index] = total
+            }
+        }
+    })
+    return totalRow
+}
+
+// 暴露变量
+defineExpose({
+    openDialog,
+    updateQueryParams,
+})
+</script>
+
+<style lang="scss" scoped></style>

src/views/hard/canteen-product-total/components/product-total-table.vue

@@ -54,7 +54,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
 })
 
 //  table hook
-const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, postDownBlobFile, tableStyle } = useTable(state)
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state)
 
 const getSummaries = (param: any) => {
 	const { columns, data } = param

src/views/hard/canteen-product-total/index.vue

@@ -34,35 +34,76 @@
 					</el-row>
 					<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
 						:header-cell-style="tableStyle.headerCellStyle" :summary-method="getSummaries"
-						:show-summary="true" @selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
-						<el-table-column type="selection" width="80" align="center" />
+						:show-summary="true" @selection-change="selectionChangHandle" @sort-change="sortChangeHandle"
+						@expand-change="tableExpandChange">
+						<el-table-column v-if="false" type="selection" width="80" align="center" />
+
+						<el-table-column type="expand" width="50">
+							<template #default="{ row }">
+								<div class="mx-10">
+									<el-table class="my-2" :data="getTableChildrenMap(row.uniqueCode)" border
+										:cell-style="tableStyle.cellStyle"
+										:header-cell-style="tableStyle.headerCellStyle">
+										<el-table-column type="index" label="#" width="50" />
+										<el-table-column prop="userDeptName" align="center" label="部门" width="150" />
+										<el-table-column label="用餐时间段" min-width="100" align="center" prop="hourType">
+											<template #default="{ row }">
+												<dict-tag :options="daily_menu" :value="row.hourType" />
+											</template>
+										</el-table-column>
+										<el-table-column label="交易人数" min-width="100" align="center"
+											prop="payUserCount">
+											<template #default="{ row }">
+												<span class="color-primary"> {{ row.payUserCount || 0 }}次 </span>
+											</template>
+										</el-table-column>
+										<el-table-column label="交易次数" min-width="100" align="center" prop="timeCount">
+											<template #default="{ row }">
+												<span class="color-primary"> {{ row.timeCount || 0 }}次 </span>
+											</template>
+										</el-table-column>
+										<el-table-column label="售出商品数量" min-width="150" align="center" prop="payCount">
+											<template #default="{ row }">
+												<span class="color-success"> {{ row.payCount || 0 }}份 </span>
+											</template>
+										</el-table-column>
+										<el-table-column label="总价" min-width="100" prop="totalPrice" align="center">
+											<template #default="{ row }">
+												<span>{{ displayPrice(row.totalPrice) }}</span>
+											</template>
+										</el-table-column>
+									</el-table>
+								</div>
+							</template>
+						</el-table-column>
+
 						<el-table-column type="index" label="#" width="50" />
-						<el-table-column label="用餐时间" align="center" prop="createTime">
+						<el-table-column label="用餐时间" align="center" width="150" prop="createTime">
 							<template #default="{ row }">
 								<span>{{ parseTime(row.createTime, "{y}-{m}-{d}") }}</span>
 							</template>
 						</el-table-column>
-						<el-table-column label="用餐时间段" align="center" prop="hourType">
+						<el-table-column label="用餐时间段" min-width="100" align="center" prop="hourType">
 							<template #default="{ row }">
 								<dict-tag :options="daily_menu" :value="row.hourType" />
 							</template>
 						</el-table-column>
-						<el-table-column label="交易人数" align="center" prop="payUserCount">
+						<el-table-column label="交易人数" min-width="100" align="center" prop="payUserCount">
 							<template #default="{ row }">
 								<span class="color-primary"> {{ row.payUserCount || 0 }}次 </span>
 							</template>
 						</el-table-column>
-						<el-table-column label="交易次数" align="center" prop="timeCount">
+						<el-table-column label="交易次数" min-width="100" align="center" prop="timeCount">
 							<template #default="{ row }">
 								<span class="color-primary"> {{ row.timeCount || 0 }}次 </span>
 							</template>
 						</el-table-column>
-						<el-table-column label="售出商品数量" align="center" prop="payCount">
+						<el-table-column label="售出商品数量" min-width="150" align="center" prop="payCount">
 							<template #default="{ row }">
 								<span class="color-success"> {{ row.payCount || 0 }}份 </span>
 							</template>
 						</el-table-column>
-						<el-table-column label="总价" prop="totalPrice" align="center">
+						<el-table-column label="总价" min-width="100" prop="totalPrice" align="center">
 							<template #default="{ row }">
 								<span>{{ displayPrice(row.totalPrice) }}</span>
 							</template>
@@ -88,22 +129,26 @@
 
 <script setup lang="ts" name="hard-sb">
 import { BasicTableProps, useTable } from "/@/hooks/table"
-import * as hardTotalApi from "/@/api/hard/hard-total"
 import { displayPrice } from "/@/utils/formatMoney"
 import { useDict } from "/@/hooks/dict"
 import { parseTime } from "/@/utils/formatTime"
 
+import * as hardTotalApi from "/@/api/hard/hard-total"
+
 const ProductTotalTable = defineAsyncComponent(() => import("./components/product-total-table.vue"))
 
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)
 const productTotalTableRef = ref()
+
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
 const draggableDepTreeRef = ref() // 树组件ref引用
 
+const tableChildrenMap = ref(new Map<string, any>())
+
 // 定义查询字典
 const { daily_menu } = useDict("daily_menu")
 
@@ -120,6 +165,25 @@ const exportExcel = () => {
 	postDownBlobFile("/hard/hard-total/export-sb", Object.assign(state.queryForm), "设备交易记录.xlsx")
 }
 
+// 点击table展开行
+const tableExpandChange = async (e: any) => {
+	try {
+		const { data } = await hardTotalApi.productTotalByDept({
+			hourType: e.hourType,
+			createTimeStr: parseTime(e.createTime, '{y}-{m}-{d}'),
+		})
+		if (data && data.length) {
+			tableChildrenMap.value.set(e.uniqueCode, data)
+		}
+	} catch (error: any) {
+		console.error(error);
+	}
+}
+
+const getTableChildrenMap = (key: string) => {
+	return tableChildrenMap.value.get(key)
+}
+
 const getSummaries = (param: any) => {
 	const { columns, data } = param
 	const totalColumns = ["payUserCount", "timeCount", "payCount", "totalPrice"]