feat:食堂菜品部门统计

src/api/hard/hard-total.ts

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

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

@@ -0,0 +1,249 @@
+<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 height="450px" :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="60" align="center" />
+            <el-table-column width="200" label="用户">
+                <template #default="{ row }">
+                    <div v-if="row.userId && row.userId != -1" class="flex flex-row items-center justify-center">
+                        <preview-image width="50px" height="50px" :src="row.userAvatar" />
+                        <div class="flex flex-col ml-2 items-start cursor-pointer hover:underline hover:text-blue-500">
+                            <span> {{ row.username }}</span>
+                            <span> {{ row.userMobile }}</span>
+                        </div>
+                    </div>
+                    <div v-else>
+                        <span>未知用户</span>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column width="200px" label="商品">
+                <template #default="{ row }">
+                    <div class="desc">
+                        <span>商品</span>
+                        <el-tooltip :content="row.productDesc" placement="top-start">
+                            <span class="text-line">{{ row.productDesc }}</span>
+                        </el-tooltip>
+                    </div>
+                    <div class="status" v-if="row.hourType">
+                        <span>用餐时间段</span>
+                        <span>
+                            <dict-tag :options="daily_menu" :value="row.hourType" />
+                        </span>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column width="250px" label="订单信息">
+                <template #default="{ row }">
+                    <div class="status">
+                        <span>订单类型</span>
+                        <span>
+                            <dict-tag :options="hard_order_type" :value="row.orderType" />
+                        </span>
+                    </div>
+                    <div class="status">
+                        <span>支付方式</span>
+                        <span>
+                            <dict-tag :options="hard_pay_type" :value="row.payType" />
+                        </span>
+                    </div>
+                    <div class="status">
+                        <span>订单状态</span>
+                        <span>
+                            <dict-tag :options="hard_order_status" :value="row.orderStatus" />
+                        </span>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column width="200px" prop="paymentInformation" label="付款信息">
+                <template #default="{ row }">
+                    <div class="status">
+                        <span>商品总价</span>
+                        <span class="color-success">
+                            {{ displayPrice(row.totalPrice, "元", 2) }}
+                        </span>
+                    </div>
+                    <div class="status">
+                        <span>额外支付</span>
+                        <span class="color-danger">
+                            {{ displayPrice(row.extraPrice, "元", 2) }}
+                        </span>
+                    </div>
+                    <div class="status">
+                        <span>实际支付</span>
+                        <span class="color-primary">
+                            {{ displayPrice(row.payPrice, "元", 2) }}
+                        </span>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column label="支付时间" align="center" prop="payTime">
+                <template #default="{ row }">
+                    <div class="status">
+                        <span>创建时间</span>
+                        <span>{{ row.createTime }} </span>
+                    </div>
+                    <div class="status">
+                        <span>支付时间</span>
+                        <span>{{ row.payTime }} </span>
+                    </div>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+    </el-dialog>
+</template>
+
+<script setup lang="ts" name="dept-person-total-table">
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { displayPrice } from "/@/utils/formatMoney"
+import { useDict } from "/@/hooks/dict"
+
+import * as hardOrderApi from "/@/api/hard/hard-order"
+
+// 定义查询字典
+const { daily_menu, hard_pay_type, hard_order_type, hard_order_status, } = useDict(
+    "daily_menu", "hard_pay_type", "hard_order_type", "hard_order_status",
+)
+
+// 定义变量内容
+const visible = ref(false)
+
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    createdIsNeed: false,
+    queryForm: {},
+    pageList: hardOrderApi.pageJoin,
+})
+
+//  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 = (row: any, query: any) => {
+    console.log("row:", row);
+    console.log("query:", query);
+
+    state.queryForm.merchantId = null
+    state.queryForm.userDeptIds = null
+    state.queryForm.hourType = null
+
+    // 只查询食堂
+    state.queryForm.hourTypeIsNotEmpty = true
+    state.queryForm.productDescIsNotEmpty = true
+    state.queryForm.merchantType = '1'
+    state.queryForm.orderStatusCodes = ['5', '20']
+
+    if (row && row.mchId) {
+        state.queryForm.merchantId = row.mchId
+    }
+    if (row && row.userDeptId) {
+        state.queryForm.isInclude = true
+        state.queryForm.userDeptIds = [row.userDeptId]
+    }
+    if (query && query.hourType) {
+        state.queryForm.hourType = query.hourType
+    }
+    console.log("state.queryForm:", state.queryForm);
+
+    getDataList()
+    visible.value = true
+}
+
+const updateQueryParams = (params: any) => {
+    if (!params) return
+    state.queryForm.hourType = params.hourType ?? null
+}
+
+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>
+.text-line {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.desc {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2px;
+
+    span {
+        display: inline-block;
+    }
+
+    span:nth-child(1) {
+        min-width: 60px;
+        max-width: 100px;
+        text-align: left;
+    }
+
+    span:nth-child(2) {
+        flex: 1;
+        min-width: 50px;
+    }
+}
+
+.status {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2px;
+
+    span {
+        display: inline-block;
+    }
+
+    span:nth-child(1) {
+        min-width: 60px;
+        max-width: 100px;
+        text-align: left;
+    }
+
+    span:nth-child(2) {
+        flex: 1;
+        min-width: 50px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+</style>

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

@@ -1,87 +0,0 @@
-<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-dept-total/index.vue

@@ -1,37 +1,115 @@
 <template>
     <div class="layout-padding">
         <div class="layout-padding-auto layout-padding-view">
-            <DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-                @getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-                :defaultTreeWidth="20" :nodeClickable="false">
-                <el-row>
-                    <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-                        <el-form-item style="width: 250px" label="用餐时间段" prop="hourType">
-                            <dict-select v-model="state.queryForm.hourType" dict-code="daily_menu" />
-                        </el-form-item>
-                        <el-form-item style="width: 250px" label="食堂" prop="merchantId">
-                            <select-mch v-model="state.queryForm.merchantId"
-                                :apiParams="{ parentIsNull: false, types: '1' }" />
-                        </el-form-item>
-                        <el-form-item style="width: 450px" label="创建时间" prop="createTimeList">
-                            <el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD"
-                                type="daterange" />
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button icon="Search" type="primary" @click="doSearch">
-                                {{ $t("common.queryBtn") }}
-                            </el-button>
-                            <el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-                        </el-form-item>
-                    </el-form>
-                </el-row>
-                <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-                    :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-                    @sort-change="sortChangeHandle" @expand-change="tableExpandChange">
-                </el-table>
-                <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
-                    v-bind="state.pagination" />
-            </DraggableDepTree>
+            <el-row>
+                <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+                    <el-form-item style="width: 250px" label="用餐时间段" prop="hourType">
+                        <dict-select v-model="state.queryForm.hourType" dict-code="daily_menu" />
+                    </el-form-item>
+                    <el-form-item style="width: 250px" label="食堂" prop="merchantId">
+                        <select-mch v-model="state.queryForm.merchantId"
+                            :apiParams="{ parentIsNull: false, types: '1' }" />
+                    </el-form-item>
+                    <el-form-item style="width: 450px" label="创建时间" prop="createTimeList">
+                        <el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD"
+                            type="daterange" />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button icon="Search" type="primary" @click="doSearch">
+                            {{ $t("common.queryBtn") }}
+                        </el-button>
+                        <el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
+                    </el-form-item>
+                </el-form>
+            </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"
+                row-class-name="success-row" @selection-change="selectionChangHandle" @sort-change="sortChangeHandle"
+                @expand-change="tableExpandChange" default-expand-all>
+                <el-table-column type="expand" width="80">
+                    <!-- start 时间段 start -->
+                    <template #default="{ row }">
+                        <div v-if="row.children && row.children.length" class="ml-[80px] my-2">
+                            <el-table :data="row.children" border :cell-style="tableStyle.cellStyle"
+                                :header-cell-style="tableStyle.headerCellStyle" :summary-method="getSummaries"
+                                :show-summary="true" row-class-name="warning-row">
+                                <el-table-column type="index" label="#" width="60" align="center" />
+                                <el-table-column prop="userDeptName" align="center" label="部门" width="150" />
+                                <el-table-column label="用餐时间段" width="150" align="center" prop="hourType">
+                                    <template #default="{ row }">
+                                        <dict-tag :options="daily_menu" :value="row.hourType" />
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="交易人数" width="150" align="center" prop="payUserCountByTable">
+                                    <template #default="{ row }">
+                                        <span class="color-primary"> {{ row.payUserCount || 0 }}人 </span>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="交易次数" width="150" align="center" prop="timeCount">
+                                    <template #default="{ row }">
+                                        <span class="color-primary"> {{ row.timeCount || 0 }}次 </span>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="售出商品数量" 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="总价" width="150" prop="totalPrice" align="center">
+                                    <template #default="{ row }">
+                                        <span>{{ displayPrice(row.totalPrice) }}</span>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column fixed="right" label="操作">
+                                    <template #default="{ row }">
+                                        <el-button icon="Tickets" text type="primary" @click="doOpenDialog(row)">
+                                            购买人员
+                                        </el-button>
+                                    </template>
+                                </el-table-column>
+                            </el-table>
+                        </div>
+                    </template>
+                    <!-- end 时间段 end -->
+                </el-table-column>
+                <el-table-column type="index" label="#" width="60" />
+                <el-table-column label="食堂" align="center" width="150" prop="mchName" />
+                <el-table-column label="用餐部门数" align="center" width="150" prop="deptCount">
+                    <template #default="{ row }">
+                        <span class="color-danger"> {{ row.deptCount || 0 }}部门 </span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="交易人数" width="150" align="center" prop="payUserCount">
+                    <template #default="{ row }">
+                        <span class="color-primary"> {{ row.payUserCount || 0 }}人 </span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="交易次数" width="150" align="center" prop="timeCount">
+                    <template #default="{ row }">
+                        <span class="color-primary"> {{ row.timeCount || 0 }}次 </span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="售出商品数量" 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="总价" width="150" prop="totalPrice" align="center">
+                    <template #default="{ row }">
+                        <span>{{ displayPrice(row.totalPrice) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column fixed="right" label="操作">
+                    <template #default="{ row }">
+                        <el-button icon="Tickets" text type="primary" @click="doOpenDialog(row)">
+                            购买人员
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
+                v-bind="state.pagination" />
+            <dept-person-total-table ref="deptPersonTotalTableRef" />
         </div>
     </div>
 </template>
@@ -39,26 +117,47 @@
 
 <script setup lang="ts" name="canteen-dept-total">
 import { BasicTableProps, useTable } from "/@/hooks/table"
+import { displayPrice } from "/@/utils/formatMoney"
+import { useDict } from "/@/hooks/dict"
 
 import * as hardTotalApi from "/@/api/hard/hard-total"
 
+const DeptPersonTotalTable = defineAsyncComponent(() => import("./components/dept-person-total-table.vue"))
+
+// 定义查询字典
+const { daily_menu } = useDict("daily_menu")
+
+const deptPersonTotalTableRef = ref()
+
 // 搜索变量
 const queryRef = ref()
-const showSearch = ref(true)
-const productTotalTableRef = ref()
 
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
 const draggableDepTreeRef = ref() // 树组件ref引用
 
-const state: BasicTableProps = reactive<BasicTableProps>({
+const state: BasicTableProps = reactive({
     queryForm: {},
-    pageList: hardTotalApi.canteenProudctTotal,
 })
 
 //  table hook
-const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, postDownBlobFile, tableStyle } = useTable(state)
+const { currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state)
+
+onMounted(() => {
+    getDataList()
+})
+
+const getDataList = async () => {
+    try {
+        const { data } = await hardTotalApi.listByDept(state.queryForm)
+        if (data && data.length) {
+            state.dataList = data
+        }
+    } catch (error: any) {
+        console.error(error);
+    }
+}
 
 // 清空搜索条件
 const resetQuery = () => {
@@ -68,7 +167,6 @@ const resetQuery = () => {
     selectObjs.value = []
     state.queryForm.deptId = ""
     state.queryForm.userDeptIds = []
-    draggableDepTreeRef.value.resetData()
     getDataList()
 }
 
@@ -81,6 +179,10 @@ const tableExpandChange = async (e: any) => {
     }
 }
 
+const doOpenDialog = (row: any) => {
+    deptPersonTotalTableRef.value.openDialog(row, state.queryForm)
+}
+
 // 多选事件
 const selectionChangHandle = (objs: { id: string }[]) => {
     selectObjs.value = objs.map(({ id }) => id)
@@ -89,17 +191,40 @@ const selectionChangHandle = (objs: { id: string }[]) => {
 
 // 搜索
 const doSearch = () => {
-    productTotalTableRef.value.updateQueryParams(state.queryForm)
+    deptPersonTotalTableRef.value.updateQueryParams(state.queryForm)
     getDataList()
 }
 
-// 树节点选择时
-const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
-    state.queryForm.deptId = curClickedNode.id
-    state.queryForm.userDeptIds = checkedTreeNodes.map((item: any) => item.id)
-    state.queryForm.isInclude = !isDeepTree
-    getDataList()
+const getSummaries = (param: any) => {
+    const { columns, data } = param
+    const totalColumns = ["payUserCount", "timeCount", "payCount", "totalPrice", "payUserCountByTable"]
+    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 if (i.property == 'payUserCountByTable') {
+                totalRow[index] = "";
+            } else {
+                totalRow[index] = total
+            }
+        }
+    })
+    return totalRow
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style>
+.el-table .warning-row {
+    --el-table-tr-bg-color: var(--el-color-warning-light-9);
+}
+
+.el-table .success-row {
+    --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
+</style>

src/views/hard/hard-order/index.vue

@@ -7,8 +7,8 @@
 				<template #default>
 					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
 						<el-row>
-							<el-form-item style="width: 300px" label="用户" prop="userIds">
-								<select-user v-model="state.queryForm.userIds" />
+							<el-form-item style="width: 300px" label="用户" prop="userId">
+								<select-user v-model="state.queryForm.userId" />
 							</el-form-item>
 							<el-form-item style="width: 300px" label="商户类型" prop="merchantType">
 								<dict-select v-model="state.queryForm.merchantType" dict-code="merchant_type" />
@@ -252,7 +252,6 @@ import { useDict } from "/@/hooks/dict"
 import { displayPrice } from "/@/utils/formatMoney"
 import { ElLoading, TableColumnCtx } from "element-plus"
 import { VNode } from "vue"
-import { ro } from "element-plus/es/locale"
 
 const { push } = useRouter()