From a05ea7ebc9f9c34ea0f85fa906679e92416df982 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Tue, 2 Dec 2025 11:48:50 +0800
Subject: [PATCH] =?UTF-8?q?=E8=80=83=E5=8B=A4=E6=9C=BA=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=AD=89=E9=A1=B5=E9=9D=A2=E6=8E=A5=E5=8F=A3=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/attMacManage.js                |  38 ++-
 src/components/TableModel/index.vue           |   1 +
 .../sub-manage/sub-entry-and-exit/index.vue   |   3 +
 .../team-manage/team-entry-and-exit/index.vue |   3 +
 .../AttMacManage/components/leftTree.vue      | 130 ++++++---
 .../AttMacManage/components/rightTable.vue    | 223 ++++++++++-----
 .../components/taskHistoryList.vue            | 225 +++++++++++++++
 .../AttMacManage/components/taskList.vue      | 268 ++++++++++++++++++
 src/views/system/AttMacManage/index.vue       | 117 +++++++-
 9 files changed, 889 insertions(+), 119 deletions(-)
 create mode 100644 src/views/system/AttMacManage/components/taskHistoryList.vue
 create mode 100644 src/views/system/AttMacManage/components/taskList.vue

diff --git a/src/api/system/attMacManage.js b/src/api/system/attMacManage.js
index 5ad9e34..aa1c414 100644
--- a/src/api/system/attMacManage.js
+++ b/src/api/system/attMacManage.js
@@ -29,7 +29,7 @@ export function getAllPersonListAPI(params) {
 // 删除人员
 export function deletePersonAPI(data) {
     return request({
-        url: '/bmw/kqManager/delWorkerByDevice/',
+        url: '/bmw/kqManager/delWorkerByDevice',
         method: 'post',
         data,
     })
@@ -79,3 +79,39 @@ export function restartAPI(macNo) {
         data: { deviceCode: macNo },
     })
 }
+
+// 获取任务列表
+export function getTaskListAPI(params) {
+    return request({
+        url: '/bmw/kqManager/getTaskList',
+        method: 'get',
+        params,
+    })
+}
+
+// 删除任务
+export function deleteTaskAPI(data) {
+    return request({
+        url: '/bmw/kqManager/delTaskById',
+        method: 'post',
+        data,
+    })
+}
+
+// 获取任务历史列表
+export function getTaskHistoryListAPI(params) {
+    return request({
+        url: '/bmw/kqManager/getHisTaskList',
+        method: 'get',
+        params,
+    })
+}
+
+// 批量删除任务
+export function batchDeleteTaskAPI(ids) {
+    return request({
+        url: '/system/attMacManage/delHisTaskById',
+        method: 'post',
+        data: { ids },
+    })
+}
diff --git a/src/components/TableModel/index.vue b/src/components/TableModel/index.vue
index 4aac322..9700cf7 100644
--- a/src/components/TableModel/index.vue
+++ b/src/components/TableModel/index.vue
@@ -529,6 +529,7 @@ export default {
 
         handleSelectionChange(e) {
             this.selectedData = e
+            this.$emit('selection-change', e)
         },
 
         /* 时间change事件 */
diff --git a/src/views/basic-manage/sub-manage/sub-entry-and-exit/index.vue b/src/views/basic-manage/sub-manage/sub-entry-and-exit/index.vue
index a9143ce..d6270f0 100644
--- a/src/views/basic-manage/sub-manage/sub-entry-and-exit/index.vue
+++ b/src/views/basic-manage/sub-manage/sub-entry-and-exit/index.vue
@@ -7,6 +7,9 @@
             :showRightTools="true"
             ref="subEntryTableRef"
             :columnsList="columnsList"
+            :sendParams="{
+                subEinStatus: 1,
+            }"
             :request-api="getSubEntryListAPI"
         >
             <template slot="btn" slot-scope="{ queryParams }">
diff --git a/src/views/basic-manage/team-manage/team-entry-and-exit/index.vue b/src/views/basic-manage/team-manage/team-entry-and-exit/index.vue
index 12db6fa..34b7c0a 100644
--- a/src/views/basic-manage/team-manage/team-entry-and-exit/index.vue
+++ b/src/views/basic-manage/team-manage/team-entry-and-exit/index.vue
@@ -7,6 +7,9 @@
             :showRightTools="true"
             ref="teamEntryTableRef"
             :columnsList="columnsList"
+            :sendParams="{
+                teamEinStatus: 1,
+            }"
             :request-api="getTeamEntryListAPI"
         >
             <template slot="btn" slot-scope="{ queryParams }">
diff --git a/src/views/system/AttMacManage/components/leftTree.vue b/src/views/system/AttMacManage/components/leftTree.vue
index e1b98b9..ec5e053 100644
--- a/src/views/system/AttMacManage/components/leftTree.vue
+++ b/src/views/system/AttMacManage/components/leftTree.vue
@@ -22,8 +22,24 @@
                 highlight-current
                 @node-click="handleNodeClick"
             >
-                <span class="custom-tree-node" slot-scope="{ node }">
-                    <span>{{ node.label }}</span>
+                <span
+                    class="custom-tree-node"
+                    :class="getNodeClass(node.data)"
+                    slot-scope="{ node }"
+                >
+                    <span class="node-content">
+                        <span
+                            v-if="node.data.level == 2"
+                            class="status-dot"
+                            :class="getStatusDotClass(node.data)"
+                        >
+                        </span>
+                        <span
+                            class="node-label"
+                            :class="getNodeLabelClass(node.data)"
+                            >{{ node.label }}</span
+                        >
+                    </span>
                 </span>
             </el-tree>
         </div>
@@ -58,47 +74,11 @@ export default {
         async getTreeData() {
             try {
                 const res = await getProjectAndMacTreeAPI()
-
                 if (res.code === 200) {
                     this.treeData = res.data || []
                 }
             } catch (error) {
                 console.error('获取树形数据失败:', error)
-                // 模拟数据，实际使用时删除
-                this.treeData = [
-                    {
-                        id: '1',
-                        label: '工程1',
-                        level: 1,
-                        children: [
-                            {
-                                id: '1-1',
-                                label: '考勤机001',
-                                macNo: 'MAC001',
-                                level: 2,
-                            },
-                            {
-                                id: '1-2',
-                                label: '考勤机002',
-                                macNo: 'MAC002',
-                                level: 2,
-                            },
-                        ],
-                    },
-                    {
-                        id: '2',
-                        label: '工程2',
-                        level: 1,
-                        children: [
-                            {
-                                id: '2-1',
-                                label: '考勤机003',
-                                macNo: 'MAC003',
-                                level: 2,
-                            },
-                        ],
-                    },
-                ]
             }
         },
         // 树节点过滤
@@ -110,15 +90,45 @@ export default {
         handleNodeClick(data) {
             this.$emit('node-click', data)
         },
+        // 获取节点样式类
+        getNodeClass(data) {
+            if (data.level === 2 && data.onLine === 1) {
+                return 'node-online'
+            }
+            return ''
+        },
+        // 获取状态点样式类
+        getStatusDotClass(data) {
+            if (data.level == 2) {
+                if (data.onLine == 1) {
+                    return 'status-dot-online'
+                } else {
+                    return 'status-dot-offline'
+                }
+            }
+            return ''
+        },
+
+        getNodeLabelClass(data) {
+            if (data.level == 2) {
+                if (data.onLine == 1) {
+                    return 'node-label-online'
+                } else {
+                    return 'node-label-offline'
+                }
+            }
+            return ''
+        },
     },
 }
 </script>
 
 <style scoped lang="scss">
 .tree-card {
-    height: calc(100vh - 120px);
+    height: 100%;
     display: flex;
     flex-direction: column;
+    min-height: 0;
 
     ::v-deep .el-card__body {
         flex: 1;
@@ -126,6 +136,7 @@ export default {
         display: flex;
         flex-direction: column;
         padding: 20px;
+        min-height: 0;
     }
 
     .card-header {
@@ -138,9 +149,11 @@ export default {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
+    min-height: 0;
 
     .head-container {
         margin-bottom: 10px;
+        flex-shrink: 0;
     }
 }
 
@@ -152,6 +165,45 @@ export default {
         justify-content: space-between;
         font-size: 14px;
         padding-right: 8px;
+
+        .node-content {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .status-dot {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            flex-shrink: 0;
+        }
+
+        .status-dot-online {
+            background-color: #67c23a;
+            box-shadow: 0 0 4px rgba(103, 194, 58, 0.6);
+        }
+
+        .node-label-online {
+            color: #67c23a;
+        }
+
+        .status-dot-offline {
+            background-color: #f56c6c;
+            box-shadow: 0 0 4px rgba(245, 108, 108, 0.6);
+        }
+
+        .node-label {
+            flex: 1;
+        }
+
+        &.node-online {
+            .node-label {
+                color: #67c23a;
+                font-weight: 500;
+            }
+        }
     }
 }
 </style>
diff --git a/src/views/system/AttMacManage/components/rightTable.vue b/src/views/system/AttMacManage/components/rightTable.vue
index a8672c4..109a1a2 100644
--- a/src/views/system/AttMacManage/components/rightTable.vue
+++ b/src/views/system/AttMacManage/components/rightTable.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div style="height: 100%; overflow: hidden">
         <el-card class="table-card" shadow="hover">
             <div class="table-container">
                 <TableModel
@@ -10,6 +10,7 @@
                     :isSelectShow="true"
                     :sendParams="sendParams"
                     ref="tableRef"
+                    @selection-change="handleSelectionChange"
                 >
                     <template slot="btn">
                         <el-button
@@ -64,6 +65,31 @@
                             删除
                         </el-button>
                     </template>
+
+                    <template slot="faceImage" slot-scope="{ data }">
+                        <ImagePreview
+                            :src="data.faceImage"
+                            height="60px"
+                            width="60px"
+                        />
+                    </template>
+
+                    <template slot="isOnDataBase" slot-scope="{ data }">
+                        <el-tag
+                            v-if="data.isOnDataBase == 1"
+                            size="mini"
+                            type="success"
+                        >
+                            在库
+                        </el-tag>
+                        <el-tag
+                            v-if="data.isOnDataBase == 0"
+                            size="mini"
+                            type="danger"
+                        >
+                            不在库
+                        </el-tag>
+                    </template>
                 </TableModel>
             </div>
         </el-card>
@@ -80,33 +106,47 @@
                     :rules="sendDownFormRules"
                     label-width="120px"
                 >
-                    <el-form-item label="选择人员：" prop="personIds">
-                        <el-select
-                            v-model="sendDownFormData.personIds"
+                    <el-form-item
+                        :label="
+                            sendDownFormData.allSelect ? '取消全选' : '全选'
+                        "
+                    >
+                        <el-checkbox
+                            v-model="allSelect"
+                            @change="handleAllSelectChange"
+                        >
+                            {{ `${allSelect ? '取消全选' : '全选'}` }}
+                        </el-checkbox>
+                    </el-form-item>
+                    <el-form-item label="选择人员：" prop="workerIds">
+                        <!-- <el-select
                             multiple
                             filterable
-                            placeholder="请选择人员"
                             style="width: 100%"
+                            placeholder="请选择人员"
                             :loading="personListLoading"
+                            v-model="sendDownFormData.workerIds"
                         >
                             <el-option
-                                v-for="item in personList"
                                 :key="item.id"
-                                :label="`${item.name}(${item.idNumber})`"
                                 :value="item.id"
+                                v-for="item in personList"
+                                :label="`${item.name}`"
                             />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="下发内容：" prop="content">
-                        <el-input
-                            v-model="sendDownFormData.content"
-                            type="textarea"
-                            :autosize="{ minRows: 4, maxRows: 8 }"
-                            placeholder="请输入下发内容"
-                            clearable
-                            maxlength="500"
-                            show-word-limit
-                        />
+                        </el-select> -->
+
+                        <el-checkbox-group
+                            v-model="sendDownFormData.workerIds"
+                            @change="handlePersonChange"
+                        >
+                            <el-checkbox
+                                :key="item.id"
+                                :label="item.id"
+                                v-for="item in personList"
+                            >
+                                {{ item.name }}
+                            </el-checkbox>
+                        </el-checkbox-group>
                     </el-form-item>
                 </el-form>
                 <el-row class="dialog-footer-btn">
@@ -136,9 +176,9 @@
                     :rules="configFormRules"
                     label-width="120px"
                 >
-                    <el-form-item label="选择人员：" prop="personIds">
+                    <el-form-item label="选择人员：" prop="workerIds">
                         <el-select
-                            v-model="configFormData.personIds"
+                            v-model="configFormData.workerIds"
                             multiple
                             filterable
                             placeholder="请选择人员"
@@ -217,44 +257,60 @@ export default {
             // 查询表单配置
             formLabel: [
                 {
-                    f_label: '姓名',
-                    f_model: 'name',
+                    f_label: '关键字',
+                    f_model: 'keyWord',
                     f_type: 'ipt',
                     f_width: '180px',
                 },
                 {
-                    f_label: '身份证号',
-                    f_model: 'idNumber',
+                    f_label: '人员编号',
+                    f_model: 'userId',
                     f_type: 'ipt',
                     f_width: '180px',
                 },
+                {
+                    f_label: '是否在库',
+                    f_model: 'isOnDataBase',
+                    f_type: 'sel',
+                    f_width: '180px',
+                    f_selList: [
+                        {
+                            label: '在库',
+                            value: '1',
+                        },
+                        {
+                            label: '不在库',
+                            value: '0',
+                        },
+                    ],
+                },
             ],
             // 表格列配置
             columnsList: [
+                {
+                    t_label: '人员编号',
+                    t_props: 'userId',
+                },
                 {
                     t_label: '姓名',
-                    t_props: 'name',
-                },
-                {
-                    t_label: '身份证号',
-                    t_props: 'idNumber',
-                },
-                {
-                    t_label: '手机号',
-                    t_props: 'phone',
-                },
-                {
-                    t_label: '工种',
-                    t_props: 'postName',
+                    t_props: 'userName',
                 },
                 {
                     t_label: '考勤机编号',
-                    t_props: 'macNo',
+                    t_props: 'devCode',
+                },
+
+                {
+                    t_label: '人脸图片',
+                    t_slot: 'faceImage',
                 },
                 {
-                    t_label: '绑定时间',
-                    t_props: 'bindTime',
-                    t_width: '180',
+                    t_label: '是否在库',
+                    t_slot: 'isOnDataBase',
+                },
+                {
+                    t_label: '更新时间',
+                    t_props: 'updateTime',
                 },
             ],
             // 下发弹框配置
@@ -273,17 +329,16 @@ export default {
             },
             // 下发表单数据
             sendDownFormData: {
-                personIds: [],
-                content: '',
+                workerIds: [],
             },
             // 配置表单数据
             configFormData: {
-                personIds: [],
+                workerIds: [],
                 configItem: '',
             },
             // 下发表单校验规则
             sendDownFormRules: {
-                personIds: [
+                workerIds: [
                     {
                         required: true,
                         message: '请选择人员',
@@ -300,7 +355,7 @@ export default {
             },
             // 配置表单校验规则
             configFormRules: {
-                personIds: [
+                workerIds: [
                     {
                         required: true,
                         message: '请选择人员',
@@ -318,6 +373,8 @@ export default {
             // 人员列表
             personList: [],
             personListLoading: false,
+            allSelect: false,
+            selectedData: [],
         }
     },
     computed: {
@@ -331,12 +388,9 @@ export default {
         sendParams() {
             return {
                 deviceCode: this.macNo || '',
+                proId: this.proId || '',
             }
         },
-        // 获取选中的数据
-        selectedData() {
-            return this.$refs.tableRef?.selectedData || []
-        },
     },
     watch: {
         macNo: {
@@ -363,12 +417,16 @@ export default {
             this.$modal
                 .confirm('确定要删除该人员吗？')
                 .then(() => {
-                    deletePersonAPI(row.id)
+                    deletePersonAPI({
+                        deviceCode: this.macNo,
+                        workerIds: [row.userId],
+                    })
                         .then((res) => {
                             if (res.code === 200) {
                                 this.$modal.msgSuccess('删除成功')
+                                // 刷新考勤机
+                                this.handleRefresh()
                                 this.getTableList()
-                                this.$emit('refresh-tree')
                             }
                         })
                         .catch(() => {})
@@ -388,13 +446,16 @@ export default {
                         ' 条数据吗？',
                 )
                 .then(() => {
-                    const ids = this.selectedData.map((item) => item.id)
-                    batchDeletePersonAPI(ids)
+                    const ids = this.selectedData.map((item) => item.userId)
+                    deletePersonAPI({
+                        deviceCode: this.macNo,
+                        workerIds: ids,
+                    })
                         .then((res) => {
                             if (res.code === 200) {
                                 this.$modal.msgSuccess('批量删除成功')
+                                this.handleRefresh()
                                 this.getTableList()
-                                this.$emit('refresh-tree')
                             }
                         })
                         .catch(() => {})
@@ -429,7 +490,11 @@ export default {
                     proId: this.proId,
                 })
                 if (res.code === 200) {
-                    this.personList = res.rows || res.data || []
+                    this.personList = res?.data.map((item) => ({
+                        id: item.workerId,
+                        name: item.workerName,
+                        isSelected: false,
+                    }))
                 }
             } catch (error) {
                 console.error('获取人员列表失败:', error)
@@ -445,8 +510,7 @@ export default {
         // 重置下发表单
         resetSendDownForm() {
             this.sendDownFormData = {
-                personIds: [],
-                content: '',
+                workerIds: [],
             }
             if (this.$refs.sendDownFormRef) {
                 this.$refs.sendDownFormRef.resetFields()
@@ -457,17 +521,16 @@ export default {
             this.$refs.sendDownFormRef.validate((valid) => {
                 if (valid) {
                     const params = {
-                        macNo: this.macNo,
-                        personIds: this.sendDownFormData.personIds,
-                        content: this.sendDownFormData.content,
+                        deviceCode: this.macNo,
+                        workerIds: this.sendDownFormData.workerIds,
                     }
                     sendDownAPI(params)
                         .then((res) => {
                             if (res.code === 200) {
                                 this.$modal.msgSuccess('下发成功')
                                 this.handleCloseSendDownDialog()
+                                this.handleRefresh()
                                 this.getTableList()
-                                this.$emit('refresh-tree')
                             }
                         })
                         .catch(() => {})
@@ -482,7 +545,7 @@ export default {
         // 重置配置表单
         resetConfigForm() {
             this.configFormData = {
-                personIds: [],
+                workerIds: [],
                 configItem: '',
             }
             if (this.$refs.configFormRef) {
@@ -495,7 +558,7 @@ export default {
                 if (valid) {
                     const params = {
                         macNo: this.macNo,
-                        personIds: this.configFormData.personIds,
+                        workerIds: this.configFormData.workerIds,
                         configItem: this.configFormData.configItem,
                     }
                     configAPI(params)
@@ -545,15 +608,35 @@ export default {
                 })
                 .catch(() => {})
         },
+
+        // 全选
+        handleAllSelectChange(val) {
+            if (val) {
+                this.sendDownFormData.workerIds = this.personList.map(
+                    (item) => item.id,
+                )
+            } else {
+                this.sendDownFormData.workerIds = []
+            }
+        },
+        // 人员选择
+        handlePersonChange(value) {
+            console.log(value)
+        },
+
+        handleSelectionChange(e) {
+            this.selectedData = e
+        },
     },
 }
 </script>
 
 <style scoped lang="scss">
 .table-card {
-    height: calc(100vh - 120px);
+    height: 100%;
     display: flex;
     flex-direction: column;
+    min-height: 0;
 
     ::v-deep .el-card__body {
         flex: 1;
@@ -561,6 +644,7 @@ export default {
         display: flex;
         flex-direction: column;
         padding: 20px;
+        min-height: 0;
     }
 
     .card-header {
@@ -571,9 +655,10 @@ export default {
 
 .table-container {
     flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
+    height: 0; // 关键：配合 flex: 1 使用，确保可以滚动
 }
 
 .dialog-footer-btn {
diff --git a/src/views/system/AttMacManage/components/taskHistoryList.vue b/src/views/system/AttMacManage/components/taskHistoryList.vue
new file mode 100644
index 0000000..1374a00
--- /dev/null
+++ b/src/views/system/AttMacManage/components/taskHistoryList.vue
@@ -0,0 +1,225 @@
+<template>
+    <div style="height: 100%; overflow: hidden">
+        <el-card class="table-card" shadow="hover">
+            <div class="table-container">
+                <TableModel
+                    :formLabel="formLabel"
+                    :columnsList="columnsList"
+                    :request-api="requestApi"
+                    :showOperation="false"
+                    :isSelectShow="false"
+                    :sendParams="sendParams"
+                    ref="tableRef"
+                >
+                    <template slot="transStatus" slot-scope="{ data }">
+                        <el-tag
+                            size="mini"
+                            type="info"
+                            v-if="data.transStatus == 0"
+                        >
+                            待执行
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="primary"
+                            v-if="data.transStatus == 1"
+                        >
+                            执行中
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="success"
+                            v-if="data.transStatus == 2"
+                        >
+                            已完成
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="danger"
+                            v-if="data.transStatus == 3"
+                        >
+                            任务繁忙-人员占用
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="danger"
+                            v-if="
+                                data.transStatus == 4 || data.transStatus == 5
+                            "
+                        >
+                            失败
+                        </el-tag>
+                    </template>
+                </TableModel>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script>
+import TableModel from '@/components/TableModel'
+import { getTaskHistoryListAPI } from '@/api/system/attMacManage.js'
+
+export default {
+    name: 'TaskHistoryList',
+    components: {
+        TableModel,
+    },
+    props: {
+        macNo: {
+            type: String,
+            default: '',
+        },
+        proId: {
+            type: [String, Number],
+            default: '',
+        },
+    },
+    data() {
+        return {
+            // 查询表单配置
+            formLabel: [
+                {
+                    f_label: '任务编码',
+                    f_model: 'cmdCode',
+                    f_type: 'ipt',
+                    f_width: '180px',
+                },
+                {
+                    f_label: '任务名称',
+                    f_model: 'cmdName',
+                    f_type: 'ipt',
+                    f_width: '180px',
+                },
+                {
+                    f_label: '执行状态',
+                    f_model: 'transStatus',
+                    f_type: 'sel',
+                    f_width: '180px',
+                    f_selList: [
+                        {
+                            label: '待执行',
+                            value: '0',
+                        },
+                        {
+                            label: '执行中',
+                            value: '1',
+                        },
+                        {
+                            label: '已完成',
+                            value: '2',
+                        },
+                        {
+                            label: '任务繁忙-人员占用',
+                            value: '3',
+                        },
+                        {
+                            label: '失败',
+                            value: '4',
+                        },
+                    ],
+                },
+            ],
+            // 表格列配置
+            columnsList: [
+                {
+                    t_label: '任务ID',
+                    t_props: 'taskId',
+                },
+                {
+                    t_label: '任务编号',
+                    t_props: 'cmdCode',
+                },
+                {
+                    t_label: '任务名称',
+                    t_props: 'cmdName',
+                },
+                {
+                    t_label: '请求参数',
+                    t_props: 'cmdParam',
+                },
+                {
+                    t_label: '执行时间',
+                    t_props: 'exeTime',
+                },
+                {
+                    t_label: '创建时间',
+                    t_props: 'createTime',
+                },
+                {
+                    t_label: '状态',
+                    t_slot: 'transStatus',
+                },
+                {
+                    t_label: '异常内容',
+                    t_props: 'msg',
+                },
+            ],
+        }
+    },
+    computed: {
+        // API接口
+        requestApi() {
+            return getTaskHistoryListAPI
+        },
+        // 传递给表格的查询参数
+        sendParams() {
+            return {
+                deviceCode: this.macNo || '',
+            }
+        },
+    },
+    watch: {
+        macNo: {
+            handler() {
+                // 当考勤机编号变化时，刷新表格
+                this.$nextTick(() => {
+                    if (this.$refs.tableRef) {
+                        this.$refs.tableRef.getTableList()
+                    }
+                })
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        // 获取表格列表（供父组件调用）
+        getTableList() {
+            if (this.$refs.tableRef) {
+                this.$refs.tableRef.getTableList()
+            }
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.table-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    ::v-deep .el-card__body {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        min-height: 0;
+    }
+
+    .card-header {
+        font-weight: 600;
+        font-size: 16px;
+    }
+}
+
+.table-container {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
+    height: 0; // 关键：配合 flex: 1 使用，确保可以滚动
+}
+</style>
diff --git a/src/views/system/AttMacManage/components/taskList.vue b/src/views/system/AttMacManage/components/taskList.vue
new file mode 100644
index 0000000..ddb13ae
--- /dev/null
+++ b/src/views/system/AttMacManage/components/taskList.vue
@@ -0,0 +1,268 @@
+<template>
+    <div style="height: 100%; overflow: hidden">
+        <el-card class="table-card" shadow="hover">
+            <div class="table-container">
+                <TableModel
+                    :formLabel="formLabel"
+                    :columnsList="columnsList"
+                    :request-api="requestApi"
+                    :showOperation="false"
+                    :isSelectShow="false"
+                    :sendParams="sendParams"
+                    ref="tableRef"
+                    @selection-change="handleSelectionChange"
+                >
+                    <template slot="btn">
+                        <el-button
+                            size="mini"
+                            type="danger"
+                            icon="el-icon-delete"
+                            :disabled="selectedData.length === 0"
+                            @click="handleBatchDelete"
+                        >
+                            批量删除
+                        </el-button>
+                    </template>
+                    <template slot="transStatus" slot-scope="{ data }">
+                        <el-tag
+                            size="mini"
+                            type="info"
+                            v-if="data.transStatus == 0"
+                        >
+                            待执行
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="primary"
+                            v-if="data.transStatus == 1"
+                        >
+                            执行中
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="success"
+                            v-if="data.transStatus == 2"
+                        >
+                            已完成
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="danger"
+                            v-if="data.transStatus == 3"
+                        >
+                            任务繁忙-人员占用
+                        </el-tag>
+                        <el-tag
+                            size="mini"
+                            type="danger"
+                            v-if="
+                                data.transStatus == 4 || data.transStatus == 5
+                            "
+                        >
+                            失败
+                        </el-tag>
+                    </template>
+                </TableModel>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script>
+import TableModel from '@/components/TableModel'
+import { getTaskListAPI, deleteTaskAPI } from '@/api/system/attMacManage.js'
+
+export default {
+    name: 'TaskHistoryList',
+    components: {
+        TableModel,
+    },
+    props: {
+        macNo: {
+            type: String,
+            default: '',
+        },
+        proId: {
+            type: [String, Number],
+            default: '',
+        },
+    },
+    data() {
+        return {
+            // 查询表单配置
+            formLabel: [
+                {
+                    f_label: '任务编码',
+                    f_model: 'cmdCode',
+                    f_type: 'ipt',
+                    f_width: '180px',
+                },
+                {
+                    f_label: '任务名称',
+                    f_model: 'cmdName',
+                    f_type: 'ipt',
+                    f_width: '180px',
+                },
+                {
+                    f_label: '执行状态',
+                    f_model: 'transStatus',
+                    f_type: 'sel',
+                    f_width: '180px',
+                    f_selList: [
+                        {
+                            label: '待执行',
+                            value: '0',
+                        },
+                        {
+                            label: '执行中',
+                            value: '1',
+                        },
+                        {
+                            label: '已完成',
+                            value: '2',
+                        },
+                        {
+                            label: '任务繁忙-人员占用',
+                            value: '3',
+                        },
+                        {
+                            label: '失败',
+                            value: '4',
+                        },
+                    ],
+                },
+            ],
+            // 表格列配置
+            columnsList: [
+                {
+                    t_label: '任务ID',
+                    t_props: 'taskId',
+                },
+                {
+                    t_label: '任务编号',
+                    t_props: 'cmdCode',
+                },
+                {
+                    t_label: '任务名称',
+                    t_props: 'cmdName',
+                },
+                {
+                    t_label: '请求参数',
+                    t_props: 'cmdParam',
+                },
+                {
+                    t_label: '执行时间',
+                    t_props: 'exeTime',
+                },
+                {
+                    t_label: '创建时间',
+                    t_props: 'createTime',
+                },
+                {
+                    t_label: '状态',
+                    t_slot: 'transStatus',
+                },
+                {
+                    t_label: '异常内容',
+                    t_props: 'msg',
+                },
+            ],
+            selectedData: [],
+        }
+    },
+    computed: {
+        // API接口
+        requestApi() {
+            return getTaskListAPI
+        },
+        // 传递给表格的查询参数
+        sendParams() {
+            return {
+                deviceCode: this.macNo || '',
+            }
+        },
+    },
+    watch: {
+        macNo: {
+            handler() {
+                // 当考勤机编号变化时，刷新表格
+                this.$nextTick(() => {
+                    if (this.$refs.tableRef) {
+                        this.$refs.tableRef.getTableList()
+                    }
+                })
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        // 获取表格列表（供父组件调用）
+        getTableList() {
+            if (this.$refs.tableRef) {
+                this.$refs.tableRef.getTableList()
+            }
+        },
+        handleSelectionChange(val) {
+            this.selectedData = val
+        },
+        handleBatchDelete() {
+            // console.log(this.selectedData)
+            if (this.selectedData.length === 0) {
+                this.$modal.msgWarning('请选择要删除的数据')
+                return
+            }
+            this.$modal
+                .confirm(
+                    '确定要删除选中的 ' +
+                        this.selectedData.length +
+                        ' 条数据吗？',
+                )
+                .then(() => {
+                    const ids = this.selectedData.map((item) => item.taskId)
+                    deletePersonAPI({
+                        taskId: ids.join(','),
+                    })
+                        .then((res) => {
+                            if (res.code === 200) {
+                                this.$modal.msgSuccess('批量删除成功')
+                                this.$refs.tableRef.getTableList()
+                            }
+                        })
+                        .catch(() => {})
+                })
+                .catch(() => {})
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.table-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    ::v-deep .el-card__body {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        min-height: 0;
+    }
+
+    .card-header {
+        font-weight: 600;
+        font-size: 16px;
+    }
+}
+
+.table-container {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
+    height: 0; // 关键：配合 flex: 1 使用，确保可以滚动
+}
+</style>
diff --git a/src/views/system/AttMacManage/index.vue b/src/views/system/AttMacManage/index.vue
index 56de8c7..f9bdfb1 100644
--- a/src/views/system/AttMacManage/index.vue
+++ b/src/views/system/AttMacManage/index.vue
@@ -7,12 +7,32 @@
             </el-col>
             <!-- 右侧表格组件 -->
             <el-col :span="18" :xs="24">
-                <rightTable
-                    ref="rightTableRef"
-                    :mac-no="selectedMacNo"
-                    :pro-id="selectedProId"
-                    @refresh-tree="handleRefreshTree"
-                />
+                <div class="right-content">
+                    <!-- 切换按钮 -->
+                    <div class="tab-switch">
+                        <el-radio-group v-model="activeTab" size="medium">
+                            <el-radio-button label="person"
+                                >人员列表</el-radio-button
+                            >
+                            <el-radio-button label="task"
+                                >任务列表</el-radio-button
+                            >
+                            <el-radio-button label="taskHistory"
+                                >任务历史</el-radio-button
+                            >
+                        </el-radio-group>
+                    </div>
+
+                    <div class="right-content-table">
+                        <component
+                            :is="currentComponent"
+                            ref="currentTableRef"
+                            :mac-no="selectedMacNo"
+                            :pro-id="selectedProId"
+                            @refresh-tree="handleRefreshTree"
+                        />
+                    </div>
+                </div>
             </el-col>
         </el-row>
     </div>
@@ -21,19 +41,35 @@
 <script>
 import leftTree from './components/leftTree.vue'
 import rightTable from './components/rightTable.vue'
+import taskList from './components/taskList.vue'
+import taskHistoryList from './components/taskHistoryList.vue'
 
 export default {
     name: 'AttMacManage',
     components: {
         leftTree,
         rightTable,
+        taskList,
+        taskHistoryList,
     },
     data() {
         return {
             selectedMacNo: '', // 选中的考勤机编号
             selectedProId: '', // 选中的工程id
+            activeTab: 'person', // 当前激活的标签页
         }
     },
+    computed: {
+        // 当前组件名称
+        currentComponent() {
+            const componentMap = {
+                person: 'rightTable',
+                task: 'taskList',
+                taskHistory: 'taskHistoryList',
+            }
+            return componentMap[this.activeTab] || 'rightTable'
+        },
+    },
     methods: {
         // 树节点点击事件
         handleNodeClick(data) {
@@ -50,11 +86,24 @@ export default {
             // }
             // 刷新右侧表格
             this.$nextTick(() => {
-                if (this.$refs.rightTableRef) {
-                    this.$refs.rightTableRef.getTableList()
-                }
+                this.refreshCurrentTable()
             })
         },
+        // 刷新当前表格
+        refreshCurrentTable() {
+            const ref = this.$refs.currentTableRef
+            if (ref && ref.getTableList) {
+                ref.getTableList()
+            }
+        },
+        // 标签页切换
+        handleTabChange(val) {
+            console.log('val', val)
+            // 切换标签页后刷新当前表格
+            // this.$nextTick(() => {
+            //     this.refreshCurrentTable()
+            // })
+        },
         // 刷新左侧树
         handleRefreshTree() {
             if (this.$refs.leftTreeRef) {
@@ -65,4 +114,52 @@ export default {
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.app-container {
+    // height: calc(100vh - 120px);
+    display: flex;
+    flex-direction: column;
+}
+
+::v-deep .el-row {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+}
+
+::v-deep .el-col {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.right-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.tab-switch {
+    flex-shrink: 0;
+    margin-bottom: 10px;
+    padding: 10px 0;
+    background-color: #fff;
+    border-radius: 4px;
+    padding-left: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+}
+
+.right-content-table {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+::v-deep .el-radio-group {
+    .el-radio-button__inner {
+        padding: 10px 20px;
+    }
+}
+</style>