feat:人员出入报表

2025-07-29 18:03:11 +08:00
1 parent eff21dc946
commit 7a83a2ef7b
@@ -4,7 +4,7 @@
            <el-button class="ml-3" icon="Setting" circle />
            <template #dropdown>
                <el-dropdown-menu>
-                    <el-dropdown-item class="m-2 rounded-md" v-for="(v, i) in columnsArray" :key="v.prop">
+                    <el-dropdown-item class="m-1 rounded-md" v-for="(v, i) in columnsArray" :key="v.prop">
                        <el-checkbox v-model="v.visible" :label="v.label" @click="handleClick(v)" />
                    </el-dropdown-item>
                </el-dropdown-menu>
@@ -34,6 +34,7 @@
        @sort-change="sortChangeHandle">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column type="index" label="#" width="80" />
+
        <el-table-column min-width="100" label="人员">
          <el-table-column prop="personCode" min-width="100" label="人员编号">
            <template #default="{ row }">
@@ -180,10 +180,14 @@ const selectionChangHandle = (objs: { id: string }[]) => {

 // 导出excel
 const exportExcel = () => {
-    // 显示的key
    // @ts-ignore
    const keys = Object.keys(columnSetting.value).filter(key => columnSetting.value[key].visible)
-    downBlobFile('/admin/car/carAccess/export', Object.assign(state.queryForm, { exportFieldList: keys }), 'carAccess.xlsx')
+    downBlobFile('/admin/car/carAccess/export', {
+        ...state.queryForm,
+        current: state.pagination?.current,
+        size: state.pagination?.size,
+        exportFieldList: keys
+    }, '车辆出入报表.xlsx')
 }

 </script>
@@ -2,11 +2,255 @@
 <template>
    <div class="layout-padding">
        <div class="layout-padding-auto layout-padding-view">
+            <el-row shadow="hover" v-show="showSearch" class="ml10">
+                <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+                    <el-form-item style="width: 250px;" label="人员姓名" prop="personName">
+                        <el-input v-model="state.queryForm.personName" placeholder="请输入人员姓名" />
+                    </el-form-item>
+                    <el-form-item style="width: 250px;" label="进出门类型" prop="enterOrExit">
+                        <dict-select v-model="state.queryForm.enterOrExit" :options="dh_enter_or_exit"
+                            placeholder="请选择进出门类型" />
+                    </el-form-item>
+                    <el-form-item style="width: 250px;" label="开门类型" prop="openType">
+                        <dict-select v-model="state.queryForm.openType" :options="dh_door_open_type"
+                            placeholder="请选择进开门类型" />
+                    </el-form-item>
+                    <el-form-item style="width: 350px;" label="抓拍时间" prop="swingTimeList">
+                        <el-date-picker v-model="state.queryForm.swingTimeList" value-format="YYYY-MM-DD"
+                            type="daterange" />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button icon="search" type="primary" @click="getDataList">
+                            {{ $t('common.queryBtn') }}
+                        </el-button>
+                        <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-row>
+            <el-row>
+                <div class="mb8" style="width: 100%">
+                    <right-toolbar v-model:showSearch="showSearch" :export="true" @exportExcel="exportExcel"
+                        class="ml10 mr20" style="float: right;" @queryTable="getDataList">
+                        <column-btn :columns="columnSetting" @click="columnClick" />
+                    </right-toolbar>
+                </div>
+            </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">
+                <el-table-column v-if="false" type="selection" width="40" align="center" />
+                <el-table-column type="index" label="#" width="80" />
+
+                <!-- start 人员 start -->
+                <el-table-column v-if="columnSetting['personCode'].visible" prop="personCode" min-width="100"
+                    :label="columnSetting['personCode'].label">
+                    <template #default="{ row }">
+                        <span v-if="row.personCode">{{ row.personCode }}</span>
+                        <span v-else class="color-danger">未知</span>
+                    </template>
+                </el-table-column>
+                <el-table-column v-if="columnSetting['personName'].visible" prop="personName" min-width="100"
+                    :label="columnSetting['personName'].label">
+                    <template #default="{ row }">
+                        <span v-if="row.personName">{{ row.personName }}</span>
+                        <span v-else class="color-danger">未知</span>
+                    </template>
+                </el-table-column>
+                <el-table-column v-if="columnSetting['paperNumber'].visible" prop="paperNumber" min-width="100"
+                    :label="columnSetting['paperNumber'].label" show-overflow-tooltip>
+                    <template #default="{ row }">
+                        <span v-if="row.paperNumber">{{ row.paperNumber }}</span>
+                        <span v-else class="color-danger">未知</span>
+                    </template>
+                </el-table-column>
+                <el-table-column v-if="columnSetting['deptName'].visible" prop="deptName" min-width="100"
+                    :label="columnSetting['deptName'].label">
+                    <template #default="{ row }">
+                        <span v-if="row.deptName">{{ row.deptName }}</span>
+                        <span v-else class="color-danger">未知</span>
+                    </template>
+                </el-table-column>
+                <!-- end 人员 end -->
+
+                <!-- start 卡 start -->
+                <el-table-column v-if="columnSetting['cardType'].visible" prop="cardType" min-width="100"
+                    :label="columnSetting['cardType'].label">
+                    <template #default="{ row }">
+                        <dict-tag :options="dh_card_type" :value="row.cardType" />
+                    </template>
+                </el-table-column>
+                <el-table-column v-if="columnSetting['cardStatus'].visible" prop="cardStatus" min-width="100"
+                    :label="columnSetting['cardStatus'].label">
+                    <template #default="{ row }">
+                        <dict-tag :options="dh_card_status" :value="row.cardStatus" />
+                    </template>
+                </el-table-column>
+                <!-- end 卡 end -->
+
+                <el-table-column v-if="columnSetting['enterOrExit'].visible" prop="enterOrExit" min-width="100"
+                    :label="columnSetting['enterOrExit'].label">
+                    <template #default="{ row }">
+                        <dict-tag :options="dh_enter_or_exit" :value="row.enterOrExit" />
+                    </template>
+                </el-table-column>
+                <el-table-column v-if="columnSetting['openResult'].visible" prop="openResult" min-width="100"
+                    :label="columnSetting['openResult'].label">
+                    <template #default="{ row }">
+                        <el-tag v-if="row.openResult == 1" type="success">成功</el-tag>
+                        <el-tag v-if="row.openResult == 0" type="danger">失败</el-tag>
+                        <dict-tag v-if="false" :options="dh_open_result" :value="row.openType" />
+                    </template>
+                </el-table-column>
+                <el-table-column v-if="columnSetting['openType'].visible" prop="openType" min-width="150"
+                    :label="columnSetting['openType'].label">
+                    <template #default="{ row }">
+                        <dict-tag :options="dh_door_open_type" :value="row.openType" />
+                    </template>
+                </el-table-column>
+                <el-table-column v-if="columnSetting['parseRecordImage'].visible" prop="parseRecordImage"
+                    :label="columnSetting['parseRecordImage'].label" min-width="100">
+                    <template #default="{ row }">
+                        <preview-image width="50px" height="50px" v-if="row.parseRecordImage"
+                            :src="row.parseRecordImage" />
+                    </template>
+                </el-table-column>
+                <el-table-column v-if="columnSetting['remark'].visible" prop="remark"
+                    :label="columnSetting['remark'].label" min-width="200" show-overflow-tooltip />
+                <el-table-column v-if="columnSetting['swingTime'].visible" prop="swingTime"
+                    :label="columnSetting['swingTime'].label" min-width="180" />
+
+            </el-table>
+            <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
+                v-bind="state.pagination" />
        </div>
    </div>
 </template>

 <script setup lang="ts" name="reportDoor">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { useDict } from '/@/hooks/dict';
+
+import * as DoorRecordApi from "/@/api/door/doorRecord";
+
+// 定义查询字典
+const { dh_card_status, dh_card_type, dh_enter_or_exit, dh_open_result, dh_door_open_type } = useDict("dh_card_status", "dh_card_type", "dh_enter_or_exit", "dh_open_result", "dh_door_open_type")
+
+
+// 定义变量内容
+const formDialogRef = ref()
+
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const columnSetting = ref({
+    personCode: {
+        label: "人员编号",
+        visible: true
+    },
+    personName: {
+        label: "姓名",
+        visible: true
+    },
+    paperNumber: {
+        label: "证件号码",
+        visible: true
+    },
+    deptName: {
+        label: "部门名称",
+        visible: true
+    },
+    cardType: {
+        label: "卡类型",
+        visible: true
+    },
+    cardStatus: {
+        label: "卡状态",
+        visible: true
+    },
+    enterOrExit: {
+        label: "进出门类型",
+        visible: true
+    },
+    openResult: {
+        label: "开门结果",
+        visible: true
+    },
+    openType: {
+        label: "开门类型",
+        visible: true
+    },
+    parseRecordImage: {
+        label: "抓图图片",
+        visible: true
+    },
+    remark: {
+        label: "开门失败原因",
+        visible: true
+    },
+    swingTime: {
+        label: "刷卡时间",
+        visible: true
+    }
+})
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    queryForm: {},
+    pagination: {
+        size: 20,
+        pageSizes: [20, 50, 100, 500, 1000, 2000]
+    },
+    pageList: DoorRecordApi.fetchList
+})
+
+//  table hook
+const {
+    getDataList,
+    currentChangeHandle,
+    sizeChangeHandle,
+    sortChangeHandle,
+    downBlobFile,
+    tableStyle
+} = useTable(state)
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+    selectObjs.value = objs.map(({ id }) => id);
+    multiple.value = !objs.length;
+};
+
+// 导出excel
+const exportExcel = () => {
+    // @ts-ignore
+    const keys = Object.keys(columnSetting.value).filter(key => columnSetting.value[key].visible)
+    downBlobFile('/admin/door/doorRecord/export', {
+        ...state.queryForm,
+        current: state.pagination?.current,
+        size: state.pagination?.size,
+        exportFieldList: keys
+    }, '人员出入报表.xlsx')
+}
+
+function columnClick(e: any) {
+    // @ts-ignore
+    const target = columnSetting.value[e.prop]
+    if (!target) return
+    target.visible = e.visible
+}
+
+// 清空搜索条件
+const resetQuery = () => {
+    // 清空搜索条件
+    queryRef.value?.resetFields()
+    // 清空多选
+    selectObjs.value = []
+    getDataList()
+}

 </script>