Merge remote-tracking branch 'origin/0.8.X' into 0.8.X
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
|
||||
})
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import axios from 'axios'
|
||||
|
||||
export default function createFetch(url) {
|
||||
const l2Request = axios.create({
|
||||
baseURL: url,
|
||||
baseURL: 'http://' + url,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
|
||||
@@ -44,7 +44,7 @@ function formatDateFields(data) {
|
||||
|
||||
export default function createFetch(url) {
|
||||
const l2Request = axios.create({
|
||||
baseURL: url,
|
||||
baseURL: 'http://' + url,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
|
||||
@@ -2,7 +2,7 @@ import axios from 'axios'
|
||||
|
||||
export default function createFetch(url) {
|
||||
const l2Request = axios.create({
|
||||
baseURL: url,
|
||||
baseURL: 'http://' + url,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
|
||||
@@ -2,7 +2,7 @@ import axios from 'axios'
|
||||
|
||||
export default function createFetch(url) {
|
||||
const l2Request = axios.create({
|
||||
baseURL: url,
|
||||
baseURL: 'http://' + url,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
|
||||
@@ -2,7 +2,7 @@ import axios from 'axios'
|
||||
|
||||
export default function createFetch(url) {
|
||||
const l2Request = axios.create({
|
||||
baseURL: url,
|
||||
baseURL: 'http://' + url,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
|
||||
@@ -2,7 +2,7 @@ import axios from 'axios'
|
||||
|
||||
export default function createFetch(url) {
|
||||
const l2Request = axios.create({
|
||||
baseURL: url,
|
||||
baseURL: 'http://' + url,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
|
||||
@@ -2,7 +2,7 @@ import axios from 'axios'
|
||||
|
||||
export default function createFetch(url) {
|
||||
const l2Request = axios.create({
|
||||
baseURL: url,
|
||||
baseURL: 'http://' + url,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
|
||||
137
klp-ui/src/utils/websocketManager.js
Normal file
137
klp-ui/src/utils/websocketManager.js
Normal file
@@ -0,0 +1,137 @@
|
||||
/**
|
||||
* WebSocket 管理器
|
||||
* 用于管理多个 WebSocket 连接
|
||||
*/
|
||||
|
||||
class WebSocketManager {
|
||||
constructor(url) {
|
||||
this.connections = new Map()
|
||||
this.baseUrl = url
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建 WebSocket 连接
|
||||
* @param {String} type - WebSocket 类型 (track_measure, track_position, track_signal, track_matmap, calc_setup_result)
|
||||
* @param {Function} onMessage - 接收消息的回调函数
|
||||
* @param {Function} onOpen - 连接打开的回调函数
|
||||
* @param {Function} onError - 错误回调函数
|
||||
* @param {Function} onClose - 关闭回调函数
|
||||
*/
|
||||
connect(type, { onMessage, onOpen, onError, onClose } = {}) {
|
||||
// 如果已存在连接，先断开
|
||||
if (this.connections.has(type)) {
|
||||
this.disconnect(type)
|
||||
}
|
||||
|
||||
const url = `${this.baseUrl}?type=${type}`
|
||||
console.log(`[WebSocket] 正在连接: ${type}`)
|
||||
|
||||
try {
|
||||
const socket = new WebSocket(url)
|
||||
|
||||
socket.onopen = (event) => {
|
||||
console.log(`[WebSocket] 连接成功: ${type}`)
|
||||
if (onOpen) onOpen(event)
|
||||
}
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data)
|
||||
if (onMessage) onMessage(data)
|
||||
} catch (error) {
|
||||
console.error(`[WebSocket] 数据解析失败 (${type}):`, error)
|
||||
// 如果不是 JSON，直接传递原始数据
|
||||
if (onMessage) onMessage(event.data)
|
||||
}
|
||||
}
|
||||
|
||||
socket.onerror = (error) => {
|
||||
console.error(`[WebSocket] 连接错误 (${type}):`, error)
|
||||
if (onError) onError(error)
|
||||
}
|
||||
|
||||
socket.onclose = (event) => {
|
||||
console.log(`[WebSocket] 连接关闭 (${type}):`, event.code, event.reason)
|
||||
this.connections.delete(type)
|
||||
|
||||
if (onClose) {
|
||||
onClose(event)
|
||||
} else if (event.code !== 1000) {
|
||||
// 非正常关闭，3秒后自动重连
|
||||
console.log(`[WebSocket] 3秒后尝试重连: ${type}`)
|
||||
setTimeout(() => {
|
||||
this.connect(type, { onMessage, onOpen, onError, onClose })
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
|
||||
this.connections.set(type, socket)
|
||||
return socket
|
||||
} catch (error) {
|
||||
console.error(`[WebSocket] 创建连接失败 (${type}):`, error)
|
||||
// 失败后3秒重试
|
||||
setTimeout(() => {
|
||||
this.connect(type, { onMessage, onOpen, onError, onClose })
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 断开指定类型的连接
|
||||
*/
|
||||
disconnect(type) {
|
||||
const socket = this.connections.get(type)
|
||||
if (socket) {
|
||||
console.log(`[WebSocket] 主动断开: ${type}`)
|
||||
socket.close(1000, '主动关闭')
|
||||
this.connections.delete(type)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 断开所有连接
|
||||
*/
|
||||
disconnectAll() {
|
||||
console.log('[WebSocket] 断开所有连接')
|
||||
this.connections.forEach((socket, type) => {
|
||||
this.disconnect(type)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定类型的连接状态
|
||||
*/
|
||||
isConnected(type) {
|
||||
const socket = this.connections.get(type)
|
||||
return socket && socket.readyState === WebSocket.OPEN
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有连接状态
|
||||
*/
|
||||
getAllStatus() {
|
||||
const status = {}
|
||||
this.connections.forEach((socket, type) => {
|
||||
status[type] = socket.readyState === WebSocket.OPEN
|
||||
})
|
||||
return status
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送消息（如果需要）
|
||||
*/
|
||||
send(type, message) {
|
||||
const socket = this.connections.get(type)
|
||||
if (socket && socket.readyState === WebSocket.OPEN) {
|
||||
const data = typeof message === 'string' ? message : JSON.stringify(message)
|
||||
socket.send(data)
|
||||
return true
|
||||
}
|
||||
console.warn(`[WebSocket] 无法发送消息，连接未打开: ${type}`)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 导出单例
|
||||
export default WebSocketManager
|
||||
|
||||
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>
|
||||
@@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tabs v-model="activeName" type="card">
|
||||
<!-- <el-tabs v-model="activeName" type="card">
|
||||
<el-tab-pane label="计划执行" name="Plan" v-if="tabs.includes('Plan')"></el-tab-pane>
|
||||
<el-tab-pane label="过程跟踪" name="Track" v-if="tabs.includes('Track')"></el-tab-pane>
|
||||
<el-tab-pane label="产出实绩" name="Quality" v-if="tabs.includes('Quality')"></el-tab-pane>
|
||||
<el-tab-pane label="停机明细" name="Stop" v-if="tabs.includes('Stop')"></el-tab-pane>
|
||||
<el-tab-pane label="实绩报表" name="PdoAnalysis" v-if="tabs.includes('PdoAnalysis')"></el-tab-pane>
|
||||
<el-tab-pane label="停机报表" name="StopAnalysis" v-if="tabs.includes('StopAnalysis')"></el-tab-pane>
|
||||
<!-- <el-tab-pane label="换辊报表" name="RollerAnalysis"></el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</el-tabs> -->
|
||||
|
||||
<keep-alive>
|
||||
<div v-if="ready" class="app-container">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -162,9 +162,18 @@ export default {
|
||||
},
|
||||
rulerMaxRow() {
|
||||
// 取所有列中level为3的第一层的最大行数
|
||||
const maxRows = Object.values(this.columns)
|
||||
.filter(col => col.layer1?.[0]?.parsedInfo?.level === 3)
|
||||
// 如果不存在level为3的列，则不执行filter操作，直接去最大值
|
||||
// 如果存在level为3的列，则取layer1且level为3的最大行数
|
||||
const columns = Object.values(this.columns)
|
||||
const columnsOnlyLevel3 = columns.filter(col => col.layer1?.[0]?.parsedInfo?.level === 3);
|
||||
let maxRows = []
|
||||
if (columnsOnlyLevel3.length > 0) {
|
||||
maxRows = columnsOnlyLevel3
|
||||
.map(col => col.layer1?.length || 0);
|
||||
} else {
|
||||
maxRows = columns
|
||||
.map(col => col.layer1?.length || 0);
|
||||
}
|
||||
return maxRows.length > 0 ? Math.max(...maxRows) : 0;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -17,16 +17,6 @@
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="库位类型" prop="warehouseType">
|
||||
<el-select v-model="queryParams.warehouseType" placeholder="请选择库位类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.warehouse_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="启用状态" prop="isEnabled">
|
||||
<el-select v-model="queryParams.isEnabled" placeholder="请选择启用状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
@@ -34,7 +24,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@@ -49,70 +39,55 @@
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="info"
|
||||
plain
|
||||
icon="el-icon-sort"
|
||||
size="mini"
|
||||
@click="toggleExpandAll"
|
||||
>展开/折叠</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<KLPTable
|
||||
v-if="refreshTable"
|
||||
v-loading="loading"
|
||||
:data="warehouseList"
|
||||
row-key="warehouseId"
|
||||
:default-expand-all="isExpandAll"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
>
|
||||
<!-- <el-table-column label="上级节点" prop="parentId" /> -->
|
||||
<el-table-column label="库位编码" align="center" prop="warehouseCode" />
|
||||
<el-table-column label="库位名称" align="center" prop="warehouseName" />
|
||||
<!-- <el-table-column label="库位类型" align="center" prop="warehouseType">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.warehouse_type" :value="scope.row.warehouseType"/>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="排序号" align="center" prop="sortNo" />
|
||||
<el-table-column label="启用状态" align="center" prop="isEnabled">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.isEnabled == 1 ? '启用' : '禁用' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-plus"
|
||||
@click="handleAdd(scope.row)"
|
||||
>新增</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</KLPTable>
|
||||
<!-- 替换树形表格为卡片布局 -->
|
||||
<el-row :gutter="20" v-loading="loading">
|
||||
<!-- 1. 新增卡片动态class区分启用/禁用状态 -->
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in warehouseList" :key="item.warehouseId" class="mb20">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="warehouse-card"
|
||||
:class="{'enabled-card': item.isEnabled == 1, 'disabled-card': item.isEnabled == 0}"
|
||||
>
|
||||
<div class="card-content">
|
||||
<!-- 2. 合并名称和编码为 名称#编码 形式 -->
|
||||
<div class="card-item">
|
||||
<span class="label">库位信息：</span>
|
||||
<span class="value">{{ item.warehouseName }}#{{ item.warehouseCode }}</span>
|
||||
</div>
|
||||
<!-- <div class="card-item">
|
||||
<span class="label">排序号：</span>
|
||||
<span class="value">{{ item.sortNo }}</span>
|
||||
</div> -->
|
||||
<div class="card-item">
|
||||
<span class="label">备注：</span>
|
||||
<!-- 3. 备注添加多行省略样式类 -->
|
||||
<span class="value remark-text">{{ item.remark || '无' }}</span>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<!-- 4. 新增启用/禁用快捷开关 -->
|
||||
<el-switch
|
||||
v-model="item.isEnabled"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleSwitchChange(item)"
|
||||
:disabled="switchLoading"
|
||||
/>
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(item)">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 添加或修改库位/库区/库位自关联对话框 -->
|
||||
<!-- 添加或修改库位对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="上级节点" prop="parentId">
|
||||
<WarehouseSelect v-model="form.parentId" placeholder="请选择上级节点" />
|
||||
<el-form-item label="上级节点" prop="parentId" v-show="false">
|
||||
<el-input v-model="form.parentId" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="库位编码" prop="warehouseCode">
|
||||
<el-input v-model="form.warehouseCode" placeholder="请输入库位编码" />
|
||||
@@ -120,16 +95,6 @@
|
||||
<el-form-item label="库位名称" prop="warehouseName">
|
||||
<el-input v-model="form.warehouseName" placeholder="请输入库位名称" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="库位类型" prop="warehouseType">
|
||||
<el-select v-model="form.warehouseType" placeholder="请选择库位类型">
|
||||
<el-option
|
||||
v-for="dict in dict.type.warehouse_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="排序号" prop="sortNo">
|
||||
<el-input v-model="form.sortNo" placeholder="请输入排序号" />
|
||||
</el-form-item>
|
||||
@@ -153,40 +118,31 @@
|
||||
|
||||
<script>
|
||||
import { listWarehouse, getWarehouse, delWarehouse, addWarehouse, updateWarehouse } from "@/api/wms/warehouse";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import WarehouseSelect from '@/components/WarehouseSelect';
|
||||
|
||||
export default {
|
||||
name: "Warehouse",
|
||||
// dicts: ['warehouse_type'],
|
||||
components: {
|
||||
Treeselect,
|
||||
WarehouseSelect
|
||||
},
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 开关loading（新增）
|
||||
switchLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 库位/库区/库位自关联表格数据
|
||||
// 库位表格数据（一维数组，非树形）
|
||||
warehouseList: [],
|
||||
// 库位/库区/库位自关联树选项
|
||||
warehouseOptions: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否展开，默认全部展开
|
||||
isExpandAll: true,
|
||||
// 重新渲染表格状态
|
||||
// 重新渲染表格状态（树结构相关，保留但无实际作用）
|
||||
refreshTable: true,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
parentId: undefined,
|
||||
parentId: undefined, // 固定查询parentId=0的数据
|
||||
warehouseCode: undefined,
|
||||
warehouseName: undefined,
|
||||
warehouseType: undefined,
|
||||
@@ -195,7 +151,7 @@ export default {
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
// 表单校验（移除warehouseType必填规则）
|
||||
rules: {
|
||||
warehouseCode: [
|
||||
{ required: true, message: "库位/库区编码不能为空", trigger: "blur" }
|
||||
@@ -203,9 +159,9 @@ export default {
|
||||
warehouseName: [
|
||||
{ required: true, message: "库位/库区名称不能为空", trigger: "blur" }
|
||||
],
|
||||
warehouseType: [
|
||||
{ required: true, message: "类型不能为空", trigger: "change" }
|
||||
],
|
||||
isEnabled: [
|
||||
{ required: true, message: "启用状态不能为空", trigger: "change" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
@@ -213,60 +169,33 @@ export default {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询库位/库区/库位自关联列表 */
|
||||
/** 查询库位列表（移除树形处理） */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listWarehouse(this.queryParams).then(response => {
|
||||
const list = this.handleTree(response.data, "warehouseId", "parentId");
|
||||
// 递归遍历list，通过sortNo排序
|
||||
const sort = (list) => {
|
||||
list.sort((a, b) => a.sortNo - b.sortNo);
|
||||
list.forEach(item => {
|
||||
if (item.children) {
|
||||
sort(item.children);
|
||||
}
|
||||
});
|
||||
};
|
||||
sort(list);
|
||||
// 直接使用一维数组，按sortNo排序（无需递归）
|
||||
const list = response.data.sort((a, b) => a.sortNo - b.sortNo);
|
||||
this.warehouseList = list;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 转换库位/库区/库位自关联数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
id: node.warehouseId,
|
||||
label: node.warehouseName,
|
||||
children: node.children
|
||||
};
|
||||
},
|
||||
/** 查询库位/库区/库位自关联下拉树结构 */
|
||||
getTreeselect() {
|
||||
listWarehouse().then(response => {
|
||||
this.warehouseOptions = [];
|
||||
const data = { warehouseId: 0, warehouseName: '顶级节点', children: [] };
|
||||
data.children = this.handleTree(response.data, "warehouseId", "parentId");
|
||||
this.warehouseOptions.push(data);
|
||||
});
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
warehouseId: null,
|
||||
parentId: null,
|
||||
parentId: undefined, // 固定parentId为0
|
||||
warehouseCode: null,
|
||||
warehouseName: null,
|
||||
warehouseType: 1,
|
||||
sortNo: null,
|
||||
isEnabled: null,
|
||||
isEnabled: 1, // 默认启用
|
||||
delFlag: null,
|
||||
remark: null,
|
||||
createTime: null,
|
||||
@@ -276,60 +205,51 @@ export default {
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
// 重置后仍保留parentId=0
|
||||
this.queryParams.parentId = undefined;
|
||||
this.handleQuery();
|
||||
},
|
||||
|
||||
/** 新增按钮操作 */
|
||||
handleAdd(row) {
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.getTreeselect();
|
||||
if (row != null && row.warehouseId) {
|
||||
this.form.parentId = row.warehouseId;
|
||||
} else {
|
||||
this.form.parentId = 0;
|
||||
}
|
||||
// 固定parentId为0，无需树形选择器
|
||||
this.form.parentId = undefined;
|
||||
this.open = true;
|
||||
this.title = "添加库位/库区/库位自关联";
|
||||
},
|
||||
/** 展开/折叠操作 */
|
||||
toggleExpandAll() {
|
||||
this.refreshTable = false;
|
||||
this.isExpandAll = !this.isExpandAll;
|
||||
this.$nextTick(() => {
|
||||
this.refreshTable = true;
|
||||
});
|
||||
this.title = "添加库位/库区";
|
||||
},
|
||||
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
this.getTreeselect();
|
||||
if (row != null) {
|
||||
this.form.parentId = row.warehouseId;
|
||||
}
|
||||
// 固定parentId为0
|
||||
this.form.parentId = 0;
|
||||
getWarehouse(row.warehouseId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.loading = false;
|
||||
// 覆盖parentId为0
|
||||
this.form = { ...response.data, parentId: undefined };
|
||||
this.open = true;
|
||||
this.title = "修改库位/库区/库位自关联";
|
||||
this.title = "修改库位/库区";
|
||||
});
|
||||
},
|
||||
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
// 处理 parentId 为 0 的情况
|
||||
let submitData = { ...this.form };
|
||||
if (submitData.parentId === 0) {
|
||||
delete submitData.parentId;
|
||||
}
|
||||
// 强制设置parentId为0
|
||||
const submitData = { ...this.form, parentId: undefined };
|
||||
if (this.form.warehouseId != null) {
|
||||
updateWarehouse(submitData).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
@@ -350,9 +270,10 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
this.$modal.confirm('是否确认删除库位/库区/库位自关联编号为"' + row.warehouseId + '"的数据项？').then(() => {
|
||||
this.$modal.confirm('是否确认删除库位/库区编号为"' + row.warehouseId + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delWarehouse(row.warehouseId);
|
||||
}).then(() => {
|
||||
@@ -363,7 +284,88 @@ export default {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/** 新增：开关切换启用/禁用状态 */
|
||||
handleSwitchChange(item) {
|
||||
this.switchLoading = true;
|
||||
// 构造更新参数（仅更新状态）
|
||||
const updateData = {
|
||||
...item,
|
||||
isEnabled: item.isEnabled
|
||||
};
|
||||
updateWarehouse(updateData).then(() => {
|
||||
this.$modal.msgSuccess(`已${item.isEnabled === 1 ? '启用' : '禁用'}该库位`);
|
||||
this.getList(); // 刷新列表确保数据一致
|
||||
}).catch(() => {
|
||||
// 切换失败时恢复原状态
|
||||
item.isEnabled = item.isEnabled === 1 ? 0 : 1;
|
||||
this.$modal.msgError("状态切换失败");
|
||||
}).finally(() => {
|
||||
this.switchLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 卡片样式优化 */
|
||||
.warehouse-card {
|
||||
height: 100%;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
/* 1. 启用卡片绿色边框 */
|
||||
.enabled-card {
|
||||
border-color: #67c23a !important;
|
||||
}
|
||||
|
||||
/* 禁用卡片红色边框 */
|
||||
.disabled-card {
|
||||
border-color: #f56c6c !important;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: flex-start; /* 适配多行文本对齐 */
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #606266;
|
||||
width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #303133;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 2. 备注文本多行省略样式 */
|
||||
.remark-text {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; /* 最多显示2行 */
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.5; /* 行高适配 */
|
||||
max-height: 3em; /* 2行 * 1.5行高 = 3em */
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center; /* 开关和按钮垂直居中 */
|
||||
}
|
||||
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user