hrm前端一版
This commit is contained in:
341
klp-ui/src/api/hrm/index.js
Normal file
341
klp-ui/src/api/hrm/index.js
Normal file
@@ -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
|
||||
})
|
||||
}
|
||||
226
klp-ui/src/views/hrm/attendance/index.vue
Normal file
226
klp-ui/src/views/hrm/attendance/index.vue
Normal file
@@ -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>
|
||||
396
klp-ui/src/views/hrm/index.vue
Normal file
396
klp-ui/src/views/hrm/index.vue
Normal file
@@ -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>
|
||||
190
klp-ui/src/views/hrm/org/index.vue
Normal file
190
klp-ui/src/views/hrm/org/index.vue
Normal file
@@ -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>
|
||||
213
klp-ui/src/views/hrm/payroll/index.vue
Normal file
213
klp-ui/src/views/hrm/payroll/index.vue
Normal file
@@ -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>
|
||||
407
klp-ui/src/views/hrm/requests/index.vue
Normal file
407
klp-ui/src/views/hrm/requests/index.vue
Normal file
@@ -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>
|
||||
11
klp-ui/src/views/hrm/workbench/index.vue
Normal file
11
klp-ui/src/views/hrm/workbench/index.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<HrmWorkbench />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HrmWorkbench from '../index.vue'
|
||||
export default {
|
||||
name: 'HrmWorkbenchPage',
|
||||
components: { HrmWorkbench }
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user