From 40f96069ab5fd598225c678ba6dff0550a0c9aa8 Mon Sep 17 00:00:00 2001
From: 86156 <823267011@qq.com>
Date: Mon, 22 Dec 2025 10:57:47 +0800
Subject: [PATCH] =?UTF-8?q?hrm=E5=89=8D=E7=AB=AF=E4=B8=80=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 klp-ui/src/api/hrm/index.js               | 341 ++++++++++++++++++
 klp-ui/src/views/hrm/attendance/index.vue | 226 ++++++++++++
 klp-ui/src/views/hrm/index.vue            | 396 +++++++++++++++++++++
 klp-ui/src/views/hrm/org/index.vue        | 190 ++++++++++
 klp-ui/src/views/hrm/payroll/index.vue    | 213 +++++++++++
 klp-ui/src/views/hrm/requests/index.vue   | 407 ++++++++++++++++++++++
 klp-ui/src/views/hrm/workbench/index.vue  |  11 +
 7 files changed, 1784 insertions(+)
 create mode 100644 klp-ui/src/api/hrm/index.js
 create mode 100644 klp-ui/src/views/hrm/attendance/index.vue
 create mode 100644 klp-ui/src/views/hrm/index.vue
 create mode 100644 klp-ui/src/views/hrm/org/index.vue
 create mode 100644 klp-ui/src/views/hrm/payroll/index.vue
 create mode 100644 klp-ui/src/views/hrm/requests/index.vue
 create mode 100644 klp-ui/src/views/hrm/workbench/index.vue

diff --git a/klp-ui/src/api/hrm/index.js b/klp-ui/src/api/hrm/index.js
new file mode 100644
index 00000000..3b8a7089
--- /dev/null
+++ b/klp-ui/src/api/hrm/index.js
@@ -0,0 +1,341 @@
+import request from '@/utils/request'
+
+// 组织
+export function listOrg(query) {
+  return request({
+    url: '/hrm/org/list',
+    method: 'get',
+    params: query
+  })
+}
+export function allOrg(query) {
+  return request({
+    url: '/hrm/org/all',
+    method: 'get',
+    params: query
+  })
+}
+export function addOrg(data) {
+  return request({
+    url: '/hrm/org',
+    method: 'post',
+    data
+  })
+}
+export function updateOrg(data) {
+  return request({
+    url: '/hrm/org',
+    method: 'put',
+    data
+  })
+}
+export function delOrg(orgIds) {
+  return request({
+    url: `/hrm/org/${orgIds}`,
+    method: 'delete'
+  })
+}
+export function getOrg(orgId) {
+  return request({
+    url: `/hrm/org/${orgId}`,
+    method: 'get'
+  })
+}
+
+// 员工
+export function listEmployee(query) {
+  return request({
+    url: '/hrm/employee/list',
+    method: 'get',
+    params: query
+  })
+}
+export function allEmployee(query) {
+  return request({
+    url: '/hrm/employee/all',
+    method: 'get',
+    params: query
+  })
+}
+export function addEmployee(data) {
+  return request({
+    url: '/hrm/employee',
+    method: 'post',
+    data
+  })
+}
+export function updateEmployee(data) {
+  return request({
+    url: '/hrm/employee',
+    method: 'put',
+    data
+  })
+}
+export function delEmployee(empIds) {
+  return request({
+    url: `/hrm/employee/${empIds}`,
+    method: 'delete'
+  })
+}
+export function getEmployee(empId) {
+  return request({
+    url: `/hrm/employee/${empId}`,
+    method: 'get'
+  })
+}
+
+// 证书与合同
+export function listCertificate(query) {
+  return request({
+    url: '/hrm/certificate/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listContract(query) {
+  return request({
+    url: '/hrm/contract/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 员工组织岗位关系
+export function listEmpOrgPosition(query) {
+  return request({
+    url: '/hrm/empOrg/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 职级/岗位
+export function listGrade(query) {
+  return request({
+    url: '/hrm/grade/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listPosition(query) {
+  return request({
+    url: '/hrm/position/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 班次/排班/打卡/考勤
+export function listShift(query) {
+  return request({
+    url: '/hrm/shift/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listSchedule(query) {
+  return request({
+    url: '/hrm/schedule/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listPunch(query) {
+  return request({
+    url: '/hrm/punch/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listAttendCalc(query) {
+  return request({
+    url: '/hrm/attend/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listLeaveBalance(query) {
+  return request({
+    url: '/hrm/leave/balance/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 申请单
+export function listLeaveReq(query) {
+  return request({
+    url: '/hrm/leave/req/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listOvertimeReq(query) {
+  return request({
+    url: '/hrm/overtime/req/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listTravelReq(query) {
+  return request({
+    url: '/hrm/travel/req/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listSealReq(query) {
+  return request({
+    url: '/hrm/seal/list',
+    method: 'get',
+    params: query
+  })
+}
+export function getSealReq(bizId) {
+  return request({
+    url: `/hrm/seal/${bizId}`,
+    method: 'get'
+  })
+}
+export function addSealReq(data) {
+  return request({
+    url: '/hrm/seal',
+    method: 'post',
+    data
+  })
+}
+export function updateSealReq(data) {
+  return request({
+    url: '/hrm/seal',
+    method: 'put',
+    data
+  })
+}
+export function delSealReq(bizIds) {
+  return request({
+    url: `/hrm/seal/${bizIds}`,
+    method: 'delete'
+  })
+}
+export function approveSealReq(bizId) {
+  return request({
+    url: `/hrm/seal/${bizId}/approve`,
+    method: 'post'
+  })
+}
+export function rejectSealReq(bizId) {
+  return request({
+    url: `/hrm/seal/${bizId}/reject`,
+    method: 'post'
+  })
+}
+export function cancelSealReq(bizId) {
+  return request({
+    url: `/hrm/seal/${bizId}/cancel`,
+    method: 'post'
+  })
+}
+export function stampSealJava(bizId, data) {
+  return request({
+    url: `/hrm/seal/${bizId}/stamp/java`,
+    method: 'post',
+    data
+  })
+}
+export function stampSealPython(bizId, data) {
+  return request({
+    url: `/hrm/seal/${bizId}/stamp/python`,
+    method: 'post',
+    data
+  })
+}
+
+// 流程任务
+export function listFlowTask(query) {
+  return request({
+    url: '/hrm/flow/task/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listTodoFlowTask(assigneeUserId) {
+  return request({
+    url: '/hrm/flow/task/todo',
+    method: 'get',
+    params: { assigneeUserId }
+  })
+}
+export function approveFlowTask(taskId, data) {
+  return request({
+    url: `/hrm/flow/task/${taskId}/approve`,
+    method: 'post',
+    data
+  })
+}
+export function rejectFlowTask(taskId, data) {
+  return request({
+    url: `/hrm/flow/task/${taskId}/reject`,
+    method: 'post',
+    data
+  })
+}
+export function withdrawFlowTask(taskId, data) {
+  return request({
+    url: `/hrm/flow/task/${taskId}/withdraw`,
+    method: 'post',
+    data
+  })
+}
+
+export function listFlowAction(query) {
+  return request({
+    url: '/hrm/flow/action/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listFlowForm(query) {
+  return request({
+    url: '/hrm/flow/form/list',
+    method: 'get',
+    params: query
+  })
+}
+export function getFlowForm(formId) {
+  return request({
+    url: `/hrm/flow/form/${formId}`,
+    method: 'get'
+  })
+}
+
+// 薪酬
+export function listPayPlan(query) {
+  return request({
+    url: '/hrm/pay/plan/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listPayRun(query) {
+  return request({
+    url: '/hrm/pay/run/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listPayslip(query) {
+  return request({
+    url: '/hrm/payslip/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 指标快照
+export function listStatSnapshot(query) {
+  return request({
+    url: '/hrm/stat/snapshot/list',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/klp-ui/src/views/hrm/attendance/index.vue b/klp-ui/src/views/hrm/attendance/index.vue
new file mode 100644
index 00000000..bdcd2eed
--- /dev/null
+++ b/klp-ui/src/views/hrm/attendance/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="hrm-page">
+    <section class="panel-grid triple">
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>班次</span>
+          <el-button size="mini" icon="el-icon-refresh" @click="loadShift">刷新</el-button>
+        </div>
+        <el-table :data="shiftList" v-loading="shiftLoading" height="320" stripe>
+          <el-table-column label="名称" prop="shiftName" min-width="140" />
+          <el-table-column label="时间段" min-width="180">
+            <template slot-scope="scope">{{ scope.row.startTime }} - {{ scope.row.endTime }}</template>
+          </el-table-column>
+          <el-table-column label="夜班" prop="nightShift" min-width="80">
+            <template slot-scope="scope">
+              <el-tag size="mini" :type="scope.row.nightShift ? 'warning' : 'info'">
+                {{ scope.row.nightShift ? '是' : '否' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="休息" prop="restMinutes" min-width="100" />
+        </el-table>
+      </el-card>
+
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>排班</span>
+          <div class="actions-inline">
+            <el-date-picker
+              v-model="scheduleQuery.date"
+              type="date"
+              placeholder="日期"
+              size="mini"
+              value-format="yyyy-MM-dd"
+              @change="loadSchedule"
+            />
+            <el-button size="mini" type="primary" @click="loadSchedule">查询</el-button>
+          </div>
+        </div>
+        <el-table :data="scheduleList" v-loading="scheduleLoading" height="320" stripe>
+          <el-table-column label="员工" prop="empId" min-width="100" />
+          <el-table-column label="日期" prop="workDate" min-width="120" />
+          <el-table-column label="班次" prop="shiftId" min-width="120" />
+          <el-table-column label="备注" prop="remark" min-width="160" show-overflow-tooltip />
+        </el-table>
+      </el-card>
+
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>打卡与考勤结果</span>
+          <div class="actions-inline">
+            <el-date-picker
+              v-model="punchQuery.range"
+              type="daterange"
+              start-placeholder="开始"
+              end-placeholder="结束"
+              size="mini"
+              value-format="yyyy-MM-dd"
+              @change="loadPunchAndAttend"
+            />
+          </div>
+        </div>
+        <div class="dual-tables">
+          <div class="table-half">
+            <div class="table-title">打卡记录</div>
+            <el-table :data="punchList" v-loading="punchLoading" height="230" stripe>
+              <el-table-column label="时间" prop="punchTime" min-width="150">
+                <template slot-scope="scope">{{ formatDate(scope.row.punchTime) }}</template>
+              </el-table-column>
+              <el-table-column label="来源" prop="source" min-width="100" />
+              <el-table-column label="定位/设备" prop="location" min-width="140" show-overflow-tooltip />
+            </el-table>
+          </div>
+          <div class="table-half">
+            <div class="table-title">考勤结果</div>
+            <el-table :data="attendList" v-loading="attendLoading" height="230" stripe>
+              <el-table-column label="日期" prop="workDate" min-width="120" />
+              <el-table-column label="出勤分钟" prop="attendMinutes" min-width="110" />
+              <el-table-column label="加班分钟" prop="overtimeMinutes" min-width="110" />
+              <el-table-column label="请假分钟" prop="leaveMinutes" min-width="110" />
+              <el-table-column label="异常" prop="exceptionMsg" min-width="140" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <span :class="['exception-tag', scope.row.exceptionMsg ? 'is-error' : '']">
+                    {{ scope.row.exceptionMsg || '正常' }}
+                  </span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </el-card>
+    </section>
+  </div>
+</template>
+
+<script>
+import { listShift, listSchedule, listPunch, listAttendCalc } from '@/api/hrm'
+
+export default {
+  name: 'HrmAttendance',
+  data() {
+    return {
+      shiftList: [],
+      shiftLoading: false,
+      scheduleList: [],
+      scheduleLoading: false,
+      scheduleQuery: { date: '' },
+      punchList: [],
+      punchLoading: false,
+      punchQuery: { range: [] },
+      attendList: [],
+      attendLoading: false
+    }
+  },
+  created() {
+    this.loadShift()
+    this.loadSchedule()
+    this.loadPunchAndAttend()
+  },
+  methods: {
+    formatDate(val) {
+      if (!val) return ''
+      const date = new Date(val)
+      const pad = n => (n < 10 ? `0${n}` : n)
+      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+    },
+    loadShift() {
+      this.shiftLoading = true
+      listShift({ pageNum: 1, pageSize: 200 })
+        .then(res => {
+          this.shiftList = res.rows || []
+        })
+        .finally(() => {
+          this.shiftLoading = false
+        })
+    },
+    loadSchedule() {
+      this.scheduleLoading = true
+      listSchedule({ ...this.scheduleQuery, pageNum: 1, pageSize: 200 })
+        .then(res => {
+          this.scheduleList = res.rows || []
+        })
+        .finally(() => {
+          this.scheduleLoading = false
+        })
+    },
+    loadPunchAndAttend() {
+      this.punchLoading = true
+      this.attendLoading = true
+      const [startTime, endTime] = this.punchQuery.range || []
+      listPunch({ pageNum: 1, pageSize: 200, startTime, endTime })
+        .then(res => {
+          this.punchList = res.rows || []
+        })
+        .finally(() => {
+          this.punchLoading = false
+        })
+      listAttendCalc({ pageNum: 1, pageSize: 200 })
+        .then(res => {
+          this.attendList = res.rows || []
+        })
+        .finally(() => {
+          this.attendLoading = false
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hrm-page {
+  padding: 16px 20px 32px;
+  background: #f8f9fb;
+}
+.panel-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+}
+.metal-panel {
+  border: 1px solid #d7d9df;
+  border-radius: 10px;
+  background: #fff;
+}
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  color: #303133;
+}
+.actions-inline {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.dual-tables {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.table-half {
+  border: 1px dashed #e6e8ed;
+  border-radius: 8px;
+  padding: 8px;
+}
+.table-title {
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+.exception-tag {
+  color: #409eff;
+  &.is-error {
+    color: #e76f51;
+    font-weight: 600;
+  }
+}
+@media (max-width: 1200px) {
+  .panel-grid {
+    grid-template-columns: 1fr;
+  }
+  .dual-tables {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/hrm/index.vue b/klp-ui/src/views/hrm/index.vue
new file mode 100644
index 00000000..66dbbb58
--- /dev/null
+++ b/klp-ui/src/views/hrm/index.vue
@@ -0,0 +1,396 @@
+<template>
+  <div class="hrm-page">
+    <section class="hero">
+      <div>
+        <h2>HRM 工作台</h2>
+        <p class="subtitle">汇总视图 · 快速进入各子模块</p>
+        <div class="entry-actions">
+          <router-link to="/hrm/org">
+            <el-button type="info" plain icon="el-icon-s-custom">组织与员工</el-button>
+          </router-link>
+          <router-link to="/hrm/attendance">
+            <el-button type="warning" plain icon="el-icon-s-flag">考勤与排班</el-button>
+          </router-link>
+          <router-link to="/hrm/requests">
+            <el-button type="primary" icon="el-icon-s-claim">申请与审批</el-button>
+          </router-link>
+          <router-link to="/hrm/payroll">
+            <el-button type="success" plain icon="el-icon-coin">薪酬与指标</el-button>
+          </router-link>
+        </div>
+      </div>
+      <div class="hero-stat">
+        <div class="stat-card" v-for="card in heroStats" :key="card.key">
+          <div class="label">{{ card.label }}</div>
+          <div class="value">{{ card.value }}</div>
+          <div class="desc">{{ card.desc }}</div>
+        </div>
+      </div>
+    </section>
+
+    <section class="panel-grid">
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>我的待办</span>
+          <el-button size="mini" icon="el-icon-refresh" @click="loadTodo">刷新</el-button>
+        </div>
+        <el-table :data="todoList" height="320" v-loading="todoLoading" stripe>
+          <el-table-column label="任务" prop="taskId" min-width="120">
+            <template slot-scope="scope">
+              <span class="pill">{{ scope.row.taskId }}</span>
+              <span class="muted">实例: {{ scope.row.instId }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="节点" prop="nodeId" min-width="120" />
+          <el-table-column label="状态" prop="status" min-width="100">
+            <template slot-scope="scope">
+              <el-tag :type="statusType(scope.row.status)">{{ scope.row.status || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="到期" prop="expireTime" min-width="140">
+            <template slot-scope="scope">{{ formatDate(scope.row.expireTime) }}</template>
+          </el-table-column>
+          <el-table-column label="备注" prop="remark" min-width="160" show-overflow-tooltip />
+        </el-table>
+      </el-card>
+
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>流程历史</span>
+          <div class="actions-inline">
+            <el-input
+              v-model="flowQuery.instId"
+              placeholder="实例ID"
+              size="mini"
+              style="width: 160px"
+              clearable
+              @keyup.enter.native="loadFlowActions"
+            />
+            <el-button size="mini" type="primary" @click="loadFlowActions">查询</el-button>
+          </div>
+        </div>
+        <el-table :data="flowActions" height="320" v-loading="flowLoading" stripe>
+          <el-table-column label="动作" prop="action" min-width="120">
+            <template slot-scope="scope">
+              <el-tag size="small" type="info">{{ scope.row.action }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="执行人" prop="actionUserId" min-width="120" />
+          <el-table-column label="备注" prop="remark" min-width="180" show-overflow-tooltip />
+          <el-table-column label="时间" prop="createTime" min-width="160">
+            <template slot-scope="scope">{{ formatDate(scope.row.createTime) }}</template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </section>
+
+    <section class="panel-grid triple">
+      <el-card class="metal-panel mini" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>组织与员工概览</span>
+          <router-link to="/hrm/org"><el-button size="mini" type="text">进入</el-button></router-link>
+        </div>
+        <ul class="summary-list">
+          <li><span>组织数量</span><strong>{{ summary.orgCount }}</strong></li>
+          <li><span>员工数量</span><strong>{{ summary.empCount }}</strong></li>
+          <li><span>在职员工</span><strong>{{ summary.activeEmp }}</strong></li>
+        </ul>
+      </el-card>
+
+      <el-card class="metal-panel mini" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>考勤与排班概览</span>
+          <router-link to="/hrm/attendance"><el-button size="mini" type="text">进入</el-button></router-link>
+        </div>
+        <ul class="summary-list">
+          <li><span>班次</span><strong>{{ summary.shiftCount }}</strong></li>
+          <li><span>排班记录</span><strong>{{ summary.scheduleCount }}</strong></li>
+          <li><span>异常考勤</span><strong class="error">{{ summary.attendException }}</strong></li>
+        </ul>
+      </el-card>
+
+      <el-card class="metal-panel mini" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>申请与审批概览</span>
+          <router-link to="/hrm/requests"><el-button size="mini" type="text">进入</el-button></router-link>
+        </div>
+        <ul class="summary-list">
+          <li><span>请假单</span><strong>{{ summary.leaveCount }}</strong></li>
+          <li><span>加班单</span><strong>{{ summary.otCount }}</strong></li>
+          <li><span>待审批</span><strong class="warning">{{ summary.pendingReq }}</strong></li>
+        </ul>
+      </el-card>
+
+      <el-card class="metal-panel mini" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>薪酬与指标概览</span>
+          <router-link to="/hrm/payroll"><el-button size="mini" type="text">进入</el-button></router-link>
+        </div>
+        <ul class="summary-list">
+          <li><span>薪酬方案</span><strong>{{ summary.planCount }}</strong></li>
+          <li><span>批次</span><strong>{{ summary.runCount }}</strong></li>
+          <li><span>工资条</span><strong>{{ summary.payslipCount }}</strong></li>
+        </ul>
+      </el-card>
+    </section>
+  </div>
+</template>
+
+<script>
+import {
+  listOrg,
+  listEmployee,
+  listShift,
+  listSchedule,
+  listAttendCalc,
+  listLeaveReq,
+  listOvertimeReq,
+  listPayPlan,
+  listPayRun,
+  listPayslip,
+  listTodoFlowTask,
+  listFlowAction
+} from '@/api/hrm'
+
+export default {
+  name: 'HrmWorkbench',
+  data() {
+    return {
+      heroStats: [
+        { key: 'todo', label: '待办', value: '—', desc: '待处理任务' },
+        { key: 'employee', label: '员工', value: '—', desc: '在册人数' },
+        { key: 'attendance', label: '考勤', value: '—', desc: '本周异常' }
+      ],
+      summary: {
+        orgCount: 0,
+        empCount: 0,
+        activeEmp: 0,
+        shiftCount: 0,
+        scheduleCount: 0,
+        attendException: 0,
+        leaveCount: 0,
+        otCount: 0,
+        pendingReq: 0,
+        planCount: 0,
+        runCount: 0,
+        payslipCount: 0
+      },
+      todoList: [],
+      todoLoading: false,
+      flowActions: [],
+      flowLoading: false,
+      flowQuery: { instId: '' }
+    }
+  },
+  created() {
+    this.loadTodo()
+    this.loadFlowActions()
+    this.loadSummary()
+  },
+  methods: {
+    statusType(status) {
+      if (!status) return 'info'
+      const map = {
+        pending: 'warning',
+        draft: 'info',
+        approved: 'success',
+        rejected: 'danger',
+        active: 'success',
+        inactive: 'info'
+      }
+      return map[status] || 'info'
+    },
+    formatDate(val) {
+      if (!val) return ''
+      const date = new Date(val)
+      const pad = n => (n < 10 ? `0${n}` : n)
+      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+    },
+    loadTodo() {
+      this.todoLoading = true
+      listTodoFlowTask()
+        .then(res => {
+          this.todoList = res.data || []
+          this.heroStats.find(i => i.key === 'todo').value = this.todoList.length
+        })
+        .finally(() => {
+          this.todoLoading = false
+        })
+    },
+    loadFlowActions() {
+      this.flowLoading = true
+      listFlowAction({ pageNum: 1, pageSize: 10, instId: this.flowQuery.instId })
+        .then(res => {
+          this.flowActions = res.rows || res.data || []
+        })
+        .finally(() => {
+          this.flowLoading = false
+        })
+    },
+    async loadSummary() {
+      const [orgRes, empRes, shiftRes, scheduleRes, attendRes, leaveRes, otRes, planRes, runRes, payslipRes] =
+        await Promise.all([
+          listOrg({ pageNum: 1, pageSize: 999 }),
+          listEmployee({ pageNum: 1, pageSize: 999 }),
+          listShift({ pageNum: 1, pageSize: 200 }),
+          listSchedule({ pageNum: 1, pageSize: 200 }),
+          listAttendCalc({ pageNum: 1, pageSize: 200 }),
+          listLeaveReq({ pageNum: 1, pageSize: 200 }),
+          listOvertimeReq({ pageNum: 1, pageSize: 200 }),
+          listPayPlan({ pageNum: 1, pageSize: 200 }),
+          listPayRun({ pageNum: 1, pageSize: 200 }),
+          listPayslip({ pageNum: 1, pageSize: 200 })
+        ])
+      const orgs = orgRes.rows || []
+      const emps = empRes.rows || []
+      const shifts = shiftRes.rows || []
+      const schedules = scheduleRes.rows || []
+      const attends = attendRes.rows || []
+      const leaves = leaveRes.rows || []
+      const ots = otRes.rows || []
+      const plans = planRes.rows || []
+      const runs = runRes.rows || []
+      const payslips = payslipRes.rows || []
+
+      this.summary.orgCount = orgs.length
+      this.summary.empCount = emps.length
+      this.summary.activeEmp = emps.filter(e => e.status === 'active').length
+      this.summary.shiftCount = shifts.length
+      this.summary.scheduleCount = schedules.length
+      this.summary.attendException = attends.filter(a => a.exceptionMsg).length
+      this.summary.leaveCount = leaves.length
+      this.summary.otCount = ots.length
+      this.summary.pendingReq = [...leaves, ...ots].filter(i => i.status === 'pending').length
+      this.summary.planCount = plans.length
+      this.summary.runCount = runs.length
+      this.summary.payslipCount = payslips.length
+      this.heroStats.find(i => i.key === 'employee').value = this.summary.empCount
+      this.heroStats.find(i => i.key === 'attendance').value = this.summary.attendException
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hrm-page {
+  padding: 16px 20px 32px;
+  background: #f8f9fb;
+}
+.hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  background: linear-gradient(90deg, #fafafa 0%, #ffffff 100%);
+  border: 1px solid #e6e8ed;
+  border-radius: 12px;
+  padding: 18px 22px;
+  margin-bottom: 18px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
+  h2 {
+    margin: 0;
+    font-weight: 700;
+    color: #303133;
+  }
+  .subtitle {
+    margin: 8px 0 12px;
+    color: #606266;
+  }
+}
+.entry-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.hero-stat {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  min-width: 340px;
+}
+.stat-card {
+  background: #fff;
+  border: 1px solid #e6e8ed;
+  border-radius: 8px;
+  padding: 12px;
+  min-width: 90px;
+  .label {
+    color: #909399;
+    font-size: 12px;
+  }
+  .value {
+    font-size: 22px;
+    font-weight: 700;
+    color: #1f2d3d;
+    margin: 4px 0;
+  }
+  .desc {
+    color: #a0a3ad;
+    font-size: 12px;
+  }
+}
+.panel-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  &.triple {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.metal-panel {
+  border: 1px solid #d7d9df;
+  border-radius: 10px;
+  background: #fff;
+}
+.metal-panel.mini {
+  min-height: 180px;
+}
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  color: #303133;
+}
+.actions-inline {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.pill {
+  display: inline-block;
+  padding: 2px 8px;
+  background: #f4f5f7;
+  border-radius: 12px;
+  margin-right: 6px;
+}
+.muted {
+  color: #a0a3ad;
+  font-size: 12px;
+}
+.summary-list {
+  list-style: none;
+  margin: 0;
+  padding: 0 4px;
+  li {
+    display: flex;
+    justify-content: space-between;
+    padding: 6px 0;
+    color: #606266;
+    strong {
+      color: #303133;
+    }
+    .error {
+      color: #e76f51;
+    }
+    .warning {
+      color: #e6a23c;
+    }
+  }
+}
+@media (max-width: 1200px) {
+  .panel-grid,
+  .panel-grid.triple {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/hrm/org/index.vue b/klp-ui/src/views/hrm/org/index.vue
new file mode 100644
index 00000000..76b720c5
--- /dev/null
+++ b/klp-ui/src/views/hrm/org/index.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="hrm-page">
+    <section class="panel-grid">
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>组织树</span>
+          <el-button size="mini" icon="el-icon-refresh" @click="loadOrg">刷新</el-button>
+        </div>
+        <el-tree
+          v-loading="orgLoading"
+          :data="orgTree"
+          node-key="orgId"
+          :props="{ label: 'orgName', children: 'children' }"
+          accordion
+          highlight-current
+          @node-click="handleOrgClick"
+        >
+          <span slot-scope="{ data }" class="custom-tree-node">
+            <span>{{ data.orgName }}</span>
+            <el-tag size="mini" effect="plain" type="info" class="tree-tag">{{ data.orgType || '组织' }}</el-tag>
+          </span>
+        </el-tree>
+      </el-card>
+
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>员工档案</span>
+          <div class="actions-inline">
+            <el-input
+              v-model="empQuery.empName"
+              placeholder="姓名/工号"
+              size="mini"
+              clearable
+              @keyup.enter.native="loadEmployee"
+              style="width: 180px"
+            />
+            <el-select
+              v-model="empQuery.status"
+              size="mini"
+              placeholder="状态"
+              clearable
+              style="width: 140px"
+              @change="loadEmployee"
+            >
+              <el-option label="在职" value="active" />
+              <el-option label="离职" value="inactive" />
+            </el-select>
+            <el-button size="mini" type="primary" icon="el-icon-search" @click="loadEmployee">查询</el-button>
+          </div>
+        </div>
+        <el-table :data="employeeList" v-loading="empLoading" height="700" stripe>
+          <el-table-column label="工号" prop="empNo" min-width="110" />
+          <el-table-column label="姓名" prop="empName" min-width="120" />
+          <el-table-column label="性别" prop="gender" min-width="80" />
+          <el-table-column label="手机" prop="mobile" min-width="130" />
+          <el-table-column label="雇佣类型" prop="employmentType" min-width="120" />
+          <el-table-column label="状态" prop="status" min-width="100">
+            <template slot-scope="scope">
+              <el-tag :type="statusType(scope.row.status)">{{ scope.row.status || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="入职日期" prop="hireDate" min-width="140">
+            <template slot-scope="scope">{{ formatDate(scope.row.hireDate) }}</template>
+          </el-table-column>
+          <el-table-column label="备注" prop="remark" min-width="160" show-overflow-tooltip />
+        </el-table>
+      </el-card>
+    </section>
+  </div>
+</template>
+
+<script>
+import { listOrg, listEmployee } from '@/api/hrm'
+
+export default {
+  name: 'HrmOrgEmployee',
+  data() {
+    return {
+      orgTree: [],
+      orgLoading: false,
+      orgSelected: null,
+      employeeList: [],
+      empLoading: false,
+      empQuery: { empName: '', status: undefined, mainOrgId: undefined }
+    }
+  },
+  created() {
+    this.loadOrg()
+  },
+  methods: {
+    statusType(status) {
+      if (!status) return 'info'
+      const map = { pending: 'warning', draft: 'info', approved: 'success', rejected: 'danger', active: 'success', inactive: 'info' }
+      return map[status] || 'info'
+    },
+    formatDate(val) {
+      if (!val) return ''
+      const d = new Date(val)
+      const p = n => (n < 10 ? `0${n}` : n)
+      return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
+    },
+    loadOrg() {
+      this.orgLoading = true
+      listOrg({ pageNum: 1, pageSize: 999 })
+        .then(res => {
+          const rows = res.rows || []
+          this.orgTree = this.buildTree(rows)
+          if (!this.orgSelected && this.orgTree.length) this.orgSelected = this.orgTree[0].orgId
+          this.empQuery.mainOrgId = this.orgSelected
+          this.loadEmployee()
+        })
+        .finally(() => {
+          this.orgLoading = false
+        })
+    },
+    buildTree(list) {
+      const map = {}
+      list.forEach(item => {
+        map[item.orgId] = { ...item, children: [] }
+      })
+      const roots = []
+      list.forEach(item => {
+        const parent = map[item.parentId]
+        if (parent) parent.children.push(map[item.orgId])
+        else roots.push(map[item.orgId])
+      })
+      return roots
+    },
+    handleOrgClick(node) {
+      this.orgSelected = node.orgId
+      this.empQuery.mainOrgId = node.orgId
+      this.loadEmployee()
+    },
+    loadEmployee() {
+      if (!this.empQuery.mainOrgId) return
+      this.empLoading = true
+      listEmployee({ ...this.empQuery, pageNum: 1, pageSize: 50 })
+        .then(res => {
+          this.employeeList = res.rows || []
+        })
+        .finally(() => {
+          this.empLoading = false
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hrm-page {
+  padding: 16px 20px 32px;
+  background: #f8f9fb;
+}
+.panel-grid {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 12px;
+}
+.metal-panel {
+  border: 1px solid #d7d9df;
+  border-radius: 10px;
+  background: #fff;
+}
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  color: #303133;
+}
+.actions-inline {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.custom-tree-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.tree-tag {
+  margin-left: 8px;
+}
+@media (max-width: 1200px) {
+  .panel-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/hrm/payroll/index.vue b/klp-ui/src/views/hrm/payroll/index.vue
new file mode 100644
index 00000000..5342d943
--- /dev/null
+++ b/klp-ui/src/views/hrm/payroll/index.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="hrm-page">
+    <section class="panel-grid triple">
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>薪酬方案</span>
+          <el-button size="mini" icon="el-icon-refresh" @click="loadPayPlan">刷新</el-button>
+        </div>
+        <el-table :data="payPlanList" v-loading="payPlanLoading" height="320" stripe>
+          <el-table-column label="方案" prop="planName" min-width="140" />
+          <el-table-column label="币种" prop="currency" min-width="90" />
+          <el-table-column label="状态" prop="status" min-width="100">
+            <template slot-scope="scope">
+              <el-tag :type="statusType(scope.row.status)">{{ scope.row.status || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="描述" prop="remark" min-width="160" show-overflow-tooltip />
+        </el-table>
+      </el-card>
+
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>薪酬批次</span>
+          <el-button size="mini" icon="el-icon-refresh" @click="loadPayRun">刷新</el-button>
+        </div>
+        <el-table :data="payRunList" v-loading="payRunLoading" height="320" stripe>
+          <el-table-column label="批次" prop="runName" min-width="140" />
+          <el-table-column label="周期" prop="period" min-width="120" />
+          <el-table-column label="状态" prop="status" min-width="100">
+            <template slot-scope="scope">
+              <el-tag :type="statusType(scope.row.status)">{{ scope.row.status || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="备注" prop="remark" min-width="160" show-overflow-tooltip />
+        </el-table>
+      </el-card>
+
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>工资条 & 指标</span>
+          <div class="actions-inline">
+            <el-input
+              v-model="payslipQuery.batchNo"
+              placeholder="批次编号"
+              size="mini"
+              style="width: 150px"
+              clearable
+              @keyup.enter.native="loadPayslip"
+            />
+            <el-button size="mini" type="primary" @click="loadPayslip">查询</el-button>
+          </div>
+        </div>
+        <div class="dual-tables">
+          <div class="table-half">
+            <div class="table-title">工资条</div>
+            <el-table :data="payslipList" v-loading="payslipLoading" height="230" stripe>
+              <el-table-column label="员工" prop="empId" min-width="100" />
+              <el-table-column label="应发" prop="amountGross" min-width="100">
+                <template slot-scope="scope">￥{{ formatNumber(scope.row.amountGross) }}</template>
+              </el-table-column>
+              <el-table-column label="实发" prop="amountNet" min-width="100">
+                <template slot-scope="scope">￥{{ formatNumber(scope.row.amountNet) }}</template>
+              </el-table-column>
+              <el-table-column label="状态" prop="status" min-width="90">
+                <template slot-scope="scope">
+                  <el-tag :type="statusType(scope.row.status)" size="mini">{{ scope.row.status || '-' }}</el-tag>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="table-half">
+            <div class="table-title">指标快照</div>
+            <el-table :data="statList" v-loading="statLoading" height="230" stripe>
+              <el-table-column label="类型" prop="statType" min-width="120" />
+              <el-table-column label="维度" prop="dimension" min-width="120" show-overflow-tooltip />
+              <el-table-column label="数值" prop="value" min-width="100" />
+              <el-table-column label="日期" prop="statDate" min-width="120" />
+            </el-table>
+          </div>
+        </div>
+      </el-card>
+    </section>
+  </div>
+</template>
+
+<script>
+import { listPayPlan, listPayRun, listPayslip, listStatSnapshot } from '@/api/hrm'
+
+export default {
+  name: 'HrmPayroll',
+  data() {
+    return {
+      payPlanList: [],
+      payPlanLoading: false,
+      payRunList: [],
+      payRunLoading: false,
+      payslipList: [],
+      payslipLoading: false,
+      payslipQuery: { batchNo: '' },
+      statList: [],
+      statLoading: false
+    }
+  },
+  created() {
+    this.loadPayPlan()
+    this.loadPayRun()
+    this.loadPayslip()
+    this.loadStatSnapshot()
+  },
+  methods: {
+    statusType(status) {
+      if (!status) return 'info'
+      const map = { pending: 'warning', draft: 'info', approved: 'success', rejected: 'danger', active: 'success', inactive: 'info' }
+      return map[status] || 'info'
+    },
+    formatNumber(num) {
+      if (num === null || num === undefined || isNaN(num)) return '0'
+      return Number(num).toLocaleString(undefined, { maximumFractionDigits: 2 })
+    },
+    loadPayPlan() {
+      this.payPlanLoading = true
+      listPayPlan({ pageNum: 1, pageSize: 50 })
+        .then(res => {
+          this.payPlanList = res.rows || []
+        })
+        .finally(() => {
+          this.payPlanLoading = false
+        })
+    },
+    loadPayRun() {
+      this.payRunLoading = true
+      listPayRun({ pageNum: 1, pageSize: 50 })
+        .then(res => {
+          this.payRunList = res.rows || []
+        })
+        .finally(() => {
+          this.payRunLoading = false
+        })
+    },
+    loadPayslip() {
+      this.payslipLoading = true
+      listPayslip({ pageNum: 1, pageSize: 50, batchNo: this.payslipQuery.batchNo })
+        .then(res => {
+          this.payslipList = res.rows || []
+        })
+        .finally(() => {
+          this.payslipLoading = false
+        })
+    },
+    loadStatSnapshot() {
+      this.statLoading = true
+      listStatSnapshot({ pageNum: 1, pageSize: 50 })
+        .then(res => {
+          this.statList = res.rows || []
+        })
+        .finally(() => {
+          this.statLoading = false
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hrm-page {
+  padding: 16px 20px 32px;
+  background: #f8f9fb;
+}
+.panel-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+}
+.metal-panel {
+  border: 1px solid #d7d9df;
+  border-radius: 10px;
+  background: #fff;
+}
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  color: #303133;
+}
+.actions-inline {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.dual-tables {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.table-half {
+  border: 1px dashed #e6e8ed;
+  border-radius: 8px;
+  padding: 8px;
+}
+.table-title {
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+@media (max-width: 1200px) {
+  .panel-grid {
+    grid-template-columns: 1fr;
+  }
+  .dual-tables {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/hrm/requests/index.vue b/klp-ui/src/views/hrm/requests/index.vue
new file mode 100644
index 00000000..c47a9c79
--- /dev/null
+++ b/klp-ui/src/views/hrm/requests/index.vue
@@ -0,0 +1,407 @@
+<template>
+  <div class="hrm-page">
+    <section class="panel-grid quad">
+      <el-card v-for="item in requestBlocks" :key="item.key" class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>{{ item.title }}</span>
+          <div class="actions-inline">
+            <el-select
+              v-if="item.statusField"
+              v-model="item.query.status"
+              size="mini"
+              placeholder="状态"
+              clearable
+              style="width: 120px"
+              @change="item.loader"
+            >
+              <el-option label="草稿" value="draft" />
+              <el-option label="审批中" value="pending" />
+              <el-option label="通过" value="approved" />
+              <el-option label="驳回" value="rejected" />
+            </el-select>
+            <el-button size="mini" icon="el-icon-refresh" @click="item.loader">刷新</el-button>
+          </div>
+        </div>
+        <el-table :data="item.list" v-loading="item.loading" height="300" stripe>
+          <el-table-column label="员工" prop="empId" min-width="100" />
+          <el-table-column label="类型/目的" :prop="item.typeField" min-width="120" />
+          <el-table-column label="开始" prop="startTime" min-width="140">
+            <template slot-scope="scope">{{ formatDate(scope.row.startTime) }}</template>
+          </el-table-column>
+          <el-table-column label="结束" prop="endTime" min-width="140">
+            <template slot-scope="scope">{{ formatDate(scope.row.endTime) }}</template>
+          </el-table-column>
+          <el-table-column label="状态" prop="status" min-width="110">
+            <template slot-scope="scope">
+              <el-tag :type="statusType(scope.row.status)">{{ scope.row.status || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="附件" prop="accessoryApplyIds" min-width="150" show-overflow-tooltip />
+          <el-table-column
+            v-if="item.key === 'seal'"
+            label="操作"
+            min-width="220"
+            fixed="right"
+          >
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" @click="approveSeal(scope.row)">通过</el-button>
+              <el-button size="mini" type="text" @click="rejectSeal(scope.row)">驳回</el-button>
+              <el-button size="mini" type="text" @click="cancelSeal(scope.row)">撤销</el-button>
+              <el-button size="mini" type="text" @click="openStamp(scope.row)">盖章</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </section>
+
+    <el-dialog
+      title="盖章"
+      :visible.sync="stampDialogVisible"
+      width="720px"
+      append-to-body
+    >
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <el-form :model="stampForm" label-width="110px" size="small">
+            <el-form-item label="待盖章文件" prop="targetFileUrl">
+              <el-input v-model="stampForm.targetFileUrl" placeholder="PDF或图片 OSS 完整 URL" />
+            </el-form-item>
+            <el-form-item label="章图片" prop="stampImageUrl">
+              <el-select
+                v-model="stampForm.stampImageUrl"
+                filterable
+                clearable
+                placeholder="选择章图（字典配置）"
+                @change="preloadStampImage"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="opt in dict.type.hrm_stamp_image || []"
+                  :key="opt.value"
+                  :label="opt.label"
+                  :value="opt.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="页码">
+              <el-input-number v-model="stampForm.pageNo" :min="1" />
+            </el-form-item>
+            <el-form-item label="坐标/尺寸">
+              <div class="readonly-row">
+                <span>X: {{ stampForm.xPx || '-' }} px</span>
+                <span>Y: {{ stampForm.yPx || '-' }} px</span>
+              </div>
+              <div class="readonly-row">
+                <span>宽: {{ stampForm.widthPx || stampImageNatural.width || '-' }} px</span>
+                <span>高: {{ stampForm.heightPx || stampImageNatural.height || '-' }} px</span>
+              </div>
+              <div class="hint-text">点击右侧预览即可定位，尺寸默认取章图原始大小</div>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="12">
+          <div class="preview-card">
+            <div class="preview-title">图形化定位（点击预览设置坐标）</div>
+            <div
+              class="preview-area"
+              ref="previewArea"
+              v-if="stampForm.targetFileUrl"
+            >
+              <img
+                :src="stampForm.targetFileUrl"
+                class="preview-img"
+                @load="handlePreviewLoad"
+                @click="handlePreviewClick"
+                alt="preview"
+              >
+              <div
+                v-if="marker.visible"
+                class="stamp-marker"
+                :style="markerStyle"
+              ></div>
+            </div>
+            <div v-else class="preview-placeholder">请先填写待盖章文件URL（建议提供图片预览）</div>
+          </div>
+        </el-col>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="stampDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="stampSubmitting" @click="submitStamp">盖章</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listLeaveReq,
+  listOvertimeReq,
+  listTravelReq,
+  listSealReq,
+  approveSealReq,
+  rejectSealReq,
+  cancelSealReq,
+  stampSealJava,
+  stampSealPython
+} from '@/api/hrm'
+
+export default {
+  name: 'HrmRequests',
+  data() {
+    return {
+      requestBlocks: [],
+      stampDialogVisible: false,
+      stampSubmitting: false,
+      stampForm: {
+        targetFileUrl: '',
+        stampImageUrl: '',
+        pageNo: 1,
+        xPx: 0,
+        yPx: 0,
+        widthPx: undefined,
+        heightPx: undefined
+      },
+      currentSeal: null,
+      previewNatural: { width: 0, height: 0 },
+      marker: { visible: false, x: 0, y: 0, width: 0, height: 0 },
+      stampImageNatural: { width: 0, height: 0 }
+    }
+  },
+  created() {
+    this.initRequests()
+  },
+  methods: {
+    statusType(status) {
+      if (!status) return 'info'
+      const map = { pending: 'warning', draft: 'info', approved: 'success', rejected: 'danger' }
+      return map[status] || 'info'
+    },
+    formatDate(val) {
+      if (!val) return ''
+      const d = new Date(val)
+      const p = n => (n < 10 ? `0${n}` : n)
+      return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
+    },
+    initRequests() {
+      this.requestBlocks = [
+        { key: 'leave', title: '请假单', typeField: 'leaveType', statusField: 'status', query: { pageNum: 1, pageSize: 10, status: undefined }, list: [], loading: false, loader: this.loadLeaveReq },
+        { key: 'overtime', title: '加班单', typeField: 'overtimeType', statusField: 'status', query: { pageNum: 1, pageSize: 10, status: undefined }, list: [], loading: false, loader: this.loadOvertimeReq },
+        { key: 'travel', title: '出差单', typeField: 'travelType', statusField: 'status', query: { pageNum: 1, pageSize: 10, status: undefined }, list: [], loading: false, loader: this.loadTravelReq },
+        { key: 'seal', title: '用印申请', typeField: 'sealType', statusField: 'status', query: { pageNum: 1, pageSize: 10, status: undefined }, list: [], loading: false, loader: this.loadSealReq }
+      ]
+      this.requestBlocks.forEach(b => b.loader())
+    },
+    loadLeaveReq() {
+      const block = this.requestBlocks.find(i => i.key === 'leave')
+      block.loading = true
+      listLeaveReq(block.query)
+        .then(res => {
+          block.list = res.rows || []
+        })
+        .finally(() => {
+          block.loading = false
+        })
+    },
+    loadOvertimeReq() {
+      const block = this.requestBlocks.find(i => i.key === 'overtime')
+      block.loading = true
+      listOvertimeReq(block.query)
+        .then(res => {
+          block.list = res.rows || []
+        })
+        .finally(() => {
+          block.loading = false
+        })
+    },
+    loadTravelReq() {
+      const block = this.requestBlocks.find(i => i.key === 'travel')
+      block.loading = true
+      listTravelReq(block.query)
+        .then(res => {
+          block.list = res.rows || []
+        })
+        .finally(() => {
+          block.loading = false
+        })
+    },
+    loadSealReq() {
+      const block = this.requestBlocks.find(i => i.key === 'seal')
+      block.loading = true
+      listSealReq(block.query)
+        .then(res => {
+          block.list = res.rows || []
+        })
+        .finally(() => {
+          block.loading = false
+        })
+    },
+    approveSeal(row) {
+      approveSealReq(row.bizId).then(() => {
+        this.$message.success('已通过')
+        this.loadSealReq()
+      })
+    },
+    rejectSeal(row) {
+      rejectSealReq(row.bizId).then(() => {
+        this.$message.success('已驳回')
+        this.loadSealReq()
+      })
+    },
+    cancelSeal(row) {
+      cancelSealReq(row.bizId).then(() => {
+        this.$message.success('已撤销')
+        this.loadSealReq()
+      })
+    },
+    openStamp(row) {
+      this.currentSeal = row
+      this.stampDialogVisible = true
+      this.marker.visible = false
+    },
+    submitStamp() {
+      if (!this.currentSeal) return
+      this.stampSubmitting = true
+      stampSealJava(this.currentSeal.bizId, this.stampForm)
+        .then(() => {
+          this.$message.success('盖章指令已提交')
+          this.stampDialogVisible = false
+          this.loadSealReq()
+        })
+        .finally(() => {
+          this.stampSubmitting = false
+        })
+    },
+    handlePreviewLoad(e) {
+      const img = e.target
+      this.previewNatural = { width: img.naturalWidth, height: img.naturalHeight }
+      this.updateMarkerStyle()
+    },
+    handlePreviewClick(event) {
+      if (!this.previewNatural.width || !this.previewNatural.height) return
+      const rect = this.$refs.previewArea.getBoundingClientRect()
+      const displayWidth = rect.width
+      const displayHeight = rect.height
+      const clickX = event.clientX - rect.left
+      const clickY = event.clientY - rect.top
+      const xRatio = clickX / displayWidth
+      const yRatio = clickY / displayHeight
+      const xPx = Math.round(xRatio * this.previewNatural.width)
+      // 注意 PDF 坐标原点左下，这里预览原点左上，需要转换
+      const yPx = Math.round((1 - yRatio) * this.previewNatural.height)
+      this.stampForm.xPx = xPx
+      this.stampForm.yPx = yPx
+      // 默认尺寸取章图天然尺寸
+      if (this.stampImageNatural.width) {
+        this.stampForm.widthPx = this.stampForm.widthPx || this.stampImageNatural.width
+        this.stampForm.heightPx = this.stampForm.heightPx || this.stampImageNatural.height
+      }
+      this.updateMarkerStyle()
+    },
+    preloadStampImage() {
+      if (!this.stampForm.stampImageUrl) return
+      const img = new Image()
+      img.onload = () => {
+        this.stampImageNatural = { width: img.width, height: img.height }
+      }
+      img.src = this.stampForm.stampImageUrl
+    },
+    updateMarkerStyle() {
+      if (!this.previewNatural.width || !this.previewNatural.height) return
+      const rect = this.$refs.previewArea?.getBoundingClientRect?.()
+      if (!rect) return
+      const displayWidth = rect.width
+      const displayHeight = rect.height
+      const xRatio = this.stampForm.xPx / this.previewNatural.width
+      const yRatio = 1 - this.stampForm.yPx / this.previewNatural.height
+      const wRatio = (this.stampForm.widthPx || this.stampImageNatural.width || 0) / this.previewNatural.width
+      const hRatio = (this.stampForm.heightPx || this.stampImageNatural.height || 0) / this.previewNatural.height
+      this.marker = {
+        visible: true,
+        x: xRatio * displayWidth,
+        y: yRatio * displayHeight,
+        width: wRatio * displayWidth,
+        height: hRatio * displayHeight
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hrm-page {
+  padding: 16px 20px 32px;
+  background: #f8f9fb;
+}
+.panel-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 14px;
+}
+.metal-panel {
+  border: 1px solid #d7d9df;
+  border-radius: 10px;
+  background: #fff;
+}
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  color: #303133;
+}
+.actions-inline {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.coord-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.preview-card {
+  border: 1px dashed #e6e8ed;
+  border-radius: 8px;
+  padding: 8px;
+  min-height: 340px;
+}
+.preview-title {
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.preview-area {
+  position: relative;
+  width: 100%;
+  height: 280px;
+  overflow: hidden;
+  background: #f5f7fa;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+}
+.preview-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  cursor: crosshair;
+}
+.preview-placeholder {
+  color: #a0a3ad;
+  font-size: 13px;
+  padding: 12px;
+  background: #fafafa;
+  border: 1px dashed #ebeef5;
+  border-radius: 6px;
+}
+.stamp-marker {
+  position: absolute;
+  border: 2px dashed #409eff;
+  background: rgba(64, 158, 255, 0.08);
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+}
+@media (max-width: 1200px) {
+  .panel-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/hrm/workbench/index.vue b/klp-ui/src/views/hrm/workbench/index.vue
new file mode 100644
index 00000000..3c778f02
--- /dev/null
+++ b/klp-ui/src/views/hrm/workbench/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <HrmWorkbench />
+</template>
+
+<script>
+import HrmWorkbench from '../index.vue'
+export default {
+  name: 'HrmWorkbenchPage',
+  components: { HrmWorkbench }
+}
+</script>