feat:在编非编统计

2025-11-29 15:54:21 +08:00
1 parent bf3d44dfce
commit 745948dd19
@@ -0,0 +1,114 @@
+<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-item label="姓名" prop="name">
+                <el-input v-model="state.queryForm.name" placeholder="请输入姓名" clearable />
+            </el-form-item>
+            <el-form-item label=" 手机号" prop="phone">
+                <el-input v-model="state.queryForm.phone" placeholder="请输入手机号" clearable />
+            </el-form-item>
+            <el-form-item>
+                <el-button icon="Search" type="primary" @click="getDataList">查询</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </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 label="用户名" prop="username" fixed="left" show-overflow-tooltip />
+            <el-table-column label="姓名" prop="name" show-overflow-tooltip min-width="150" />
+            <el-table-column label="手机号" prop="phone" show-overflow-tooltip min-width="150" />
+            <el-table-column label="部门" prop="deptName" show-overflow-tooltip min-width="150" />
+            <el-table-column label="编制" min-width="80">
+                <template #default="{ row }">
+                    <dict-tag :options="user_staffing_type" :value="row.staffingType" />
+                </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="staffing-total-table">
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { displayPrice } from "/@/utils/formatMoney"
+import { useDict } from "/@/hooks/dict"
+
+import * as userApi from "/@/api/admin/user"
+
+// 定义查询字典
+const { user_staffing_type } = useDict("user_staffing_type")
+// 定义变量内容
+const visible = ref(false)
+const queryRef = ref()
+
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    createdIsNeed: false,
+    queryForm: {
+        deptId: null
+    },
+    pageList: userApi.pageList,
+})
+
+//  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 resetQuery = () => {
+    queryRef.value?.resetFields()
+    getDataList()
+}
+
+
+const openDialog = (row: any, query: any) => {
+    console.log("row:", row);
+    console.log("query:", query);
+    state.queryForm.deptId = null
+
+    if (row && row.deptId) {
+        state.queryForm.deptId = row.deptId
+    }
+
+    getDataList()
+    visible.value = true
+}
+
+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,
+})
+</script>
@@ -0,0 +1,174 @@
+<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>
+                            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                        </el-form-item>
+                    </el-form>
+                    <div class="mb8" style="width: 100%">
+                        <right-toolbar @queryTable="getDataList" class="ml10" style="float: right" />
+                    </div>
+                </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">
+                    <el-table-column type="index" label="#" width="60" align="center" />
+                    <el-table-column prop="deptName" align="center" label="部门" width="300" />
+                    <el-table-column prop="deptTotalPerson" align="center" label="部门总人数" width="200">
+                        <template #default="{ row }">
+                            <span>{{ row.deptTotalPerson }}人</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="staffingPerson" align="center" label="在编人数" width="200">
+                        <template #default="{ row }">
+                            <span class="color-success">{{ row.staffingPerson }}人</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="noneStaffingPerson" align="center" label="非编人数" width="200">
+                        <template #default="{ row }">
+                            <span class="color-danger">{{ row.noneStaffingPerson }}人</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="totalPerson" align="center" label="填写在/非编人数" width="200">
+                        <template #default="{ row }">
+                            <span class="color-success">{{ row.totalPerson }}人</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column align="center" label="未写在/非编人数" width="200">
+                        <template #default="{ row }">
+                            <span class="color-danger">{{ row.deptTotalPerson - row.totalPerson }}人</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>
+            </DraggableDepTree>
+            <StaffingTotalTable ref="staffingTotalTableRef" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { useDict } from "/@/hooks/dict"
+
+import * as userTotalApi from "/@/api/admin/userTotal"
+
+const StaffingTotalTable = defineAsyncComponent(() => import("./cmp/staffing-total-table.vue"))
+
+const staffingTotalTableRef = ref()
+const draggableDepTreeRef = ref()
+const queryRef = ref()
+
+
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive({
+    queryForm: {},
+})
+
+//  table hook
+const { currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state)
+
+onMounted(() => {
+    getDataList()
+})
+
+const doOpenDialog = (row: any) => {
+    staffingTotalTableRef.value.openDialog(row, state.queryForm)
+}
+
+const getDataList = async () => {
+    try {
+        state.loading = true
+        const { data } = await userTotalApi.staffingTotal(state.queryForm)
+        if (data && data.length) {
+            state.dataList = data
+        } else {
+            state.dataList = []
+        }
+    } catch (error: any) {
+        console.error(error);
+    } finally {
+        state.loading = false
+    }
+}
+
+// 清空搜索条件
+const resetQuery = () => {
+    queryRef.value?.resetFields()
+    state.queryForm.deptId = ""
+    state.queryForm.deptIds = []
+    draggableDepTreeRef.value.resetData()
+    getDataList()
+}
+
+// 树节点选择时
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: boolean) => {
+    state.queryForm.deptId = curClickedNode.id
+    state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
+    state.queryForm.isInclude = !isDeepTree
+    getDataList()
+}
+
+// 点击table展开行
+const tableExpandChange = async (e: any) => {
+    try {
+        console.log(e);
+    } catch (error: any) {
+        console.error(error);
+    }
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+    selectObjs.value = objs.map(({ id }) => id)
+    multiple.value = !objs.length
+}
+
+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>
+.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>