DeXun/im-uniapp
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(HRM): 新增HRM办公模块初版并优化详情页样式

Browse Source 
重构报销、用印、请假、出差详情页组件，统一UI风格和交互规范
- 为各字段添加语义化图标提升可读性
- 优化多行文本显示和间距布局
- 突出显示金额等关键信息
- 统一卡片样式和阴影效果
This commit is contained in:
砂糖
2026-02-05 13:23:16 +08:00
parent 955d20413b
commit 304c032c80
5 changed files with 539 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
components/hrm/detailPanels/leave.vue
View File

@@ -1,132 +1,186 @@
<template>
<view class="leave-detail-container">
<!-- 请假类型 -->
<view class="detail-item">
<view class="item-label">请假类型：</view>
<view class="item-value">{{ detail.leaveType || '无' }}</view>
<view class="leave-detail-container">
<!-- 请假类型 - 单独行+类型图标 -->
<view class="detail-item single-item">
<text class="item-icon icon-type"></text>
<view class="item-label">请假类型：</view>
<view class="item-value">{{ detail.leaveType || '无' }}</view>
</view>
<view class="detail-item single-item">
<text class="item-icon icon-type"></text>
<view class="item-label">请假时间：</view>
<view class="item-value">{{ formatTime(detail.startTime) }} - {{ formatTime(detail.endTime) }}</view>
</view>
<!-- 开始时间 -->
<view class="detail-item">
<view class="item-label">开始时间：</view>
<view class="item-value">{{ formatTime(detail.startTime) || '无' }}</view>
</view>
<!-- 结束时间 -->
<view class="detail-item">
<view class="item-label">结束时间：</view>
<view class="item-value">{{ formatTime(detail.endTime) || '无' }}</view>
</view>
<!-- 请假时长 -->
<view class="detail-item">
<view class="item-label">请假时长：</view>
<view class="item-value">{{ detail.hours || '0' }} 小时</view>
</view>
<!-- 请假原因 -->
<view class="detail-item">
<view class="item-label">请假原因：</view>
<view class="item-value">{{ detail.reason || '无' }}</view>
</view>
<!-- 申请人 -->
<view class="detail-item">
<view class="item-label">申请人：</view>
<view class="item-value">{{ detail.createBy || '无' }}</view>
</view>
<!-- 申请时间 -->
<view class="detail-item">
<view class="item-label">申请时间：</view>
<view class="item-value">{{ formatTime(detail.createTime) || '无' }}</view>
</view>
</view>
<!-- 请假时长 - 单独行+时钟图标 -->
<view class="detail-item single-item">
<text class="item-icon icon-hour"></text>
<view class="item-label">请假时长：</view>
<view class="item-value">{{ detail.hours || '0' }} 小时</view>
</view>
<!-- 请假原因 - 单独行+备注图标（适配多行文） -->
<view class="detail-item single-item reason-item">
<text class="item-icon icon-reason"></text>
<view class="item-label">请假原因：</view>
<view class="item-value">{{ detail.reason || '无' }}</view>
</view>
<!-- 申请人 - 单独行+用户图标 -->
<view class="detail-item single-item">
<text class="item-icon icon-user"></text>
<view class="item-label">申请人：</view>
<view class="item-value">{{ detail.createBy || '无' }}</view>
</view>
<!-- 申请时间 - 单独行+日历图标 -->
<view class="detail-item single-item">
<text class="item-icon icon-date"></text>
<view class="item-label">申请时间：</view>
<view class="item-value">{{ formatTime(detail.createTime) || '无' }}</view>
</view>
</view>
</template>
<script>
import { getLeaveReq } from '@/api/hrm/leave'
export default {
props: {
bizId: {
type: String,
required: true
}
},
data() {
return {
detail: {}
}
},
watch: {
bizId: {
handler(newVal) {
// 空值判断，避免无效请求
if (!newVal) return;
// 接口请求增加错误捕获
getLeaveReq(newVal)
.then(res => {
this.detail = res.data || {};
console.log(this.detail);
})
.catch(err => {
console.error('获取请假详情失败：', err);
uni.showToast({
title: '获取详情失败',
icon: 'none',
duration: 2000
});
});
},
immediate: true
}
},
methods: {
/**
* 时间格式化方法
* 将 "2026-01-08 00:00:00" 格式化为 "2026-01-08"
* @param {String} timeStr - 原始时间字符串
* @returns {String} 格式化后的日期
*/
formatTime(timeStr) {
if (!timeStr) return '';
// 分割时间和日期，只保留日期部分
const [datePart] = timeStr.split(' ');
return datePart;
}
}
}
import { getLeaveReq } from '@/api/hrm/leave'
export default {
props: {
bizId: {
type: String,
required: true
}
},
data() {
return {
detail: {}
}
},
watch: {
bizId: {
handler(newVal) {
if (!newVal) return;
getLeaveReq(newVal)
.then(res => {
this.detail = res.data || {};
console.log(this.detail);
})
.catch(err => {
console.error('获取请假详情失败：', err);
uni.showToast({
title: '获取详情失败',
icon: 'none',
duration: 2000
});
});
},
immediate: true
}
},
methods: {
formatTime(timeStr) {
if (!timeStr) return '';
const [datePart] = timeStr.split(' ');
return datePart;
}
}
}
</script>
<style scoped>
/* 容器样式 */
/* 主容器 - 卡片化升级，柔和阴影+大圆角+合理内边距 */
.leave-detail-container {
padding: 20rpx;
background-color: #ffffff;
border-radius: 12rpx;
margin: 10rpx;
background: #ffffff;
border-radius: 18rpx;
margin: 20rpx 16rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
box-sizing: border-box;
}
/* 每一项的样式 */
/* 基础项样式 - 统一flex布局、行高、间距 */
.detail-item {
display: flex;
align-items: center;
padding: 18rpx 0;
border-bottom: 1px solid #f5f5f5;
display: flex;
align-items: flex-start;
line-height: 48rpx;
padding: 20rpx 0;
border-bottom: 1px solid #f9f9f9;
}
/* 最后一项去掉下边框 */
/* 最后一项移除下边框 */
.detail-item:last-child {
border-bottom: none;
border-bottom: none;
}
/* 单独行项 - 基础适配 */
.single-item {
flex-direction: row;
}
/* 同行双项 - 核心布局 */
.double-item {
flex-direction: row;
justify-content: space-between;
}
/* 标签样式 */
/* 图标样式 - 统一尺寸/颜色，视觉点缀（主题色可自定义） */
.item-icon {
display: inline-block;
width: 32rpx;
height: 32rpx;
margin-right: 12rpx;
margin-top: 8rpx;
flex-shrink: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #409eff; /* 主题色，可替换为项目主色 */
}
/* 各字段专属图标（使用Unicode图标，无需额外引入，直接替换即可） */
.icon-type { content: "\e645"; font-family: "iconfont"; }
.icon-time-start { content: "\e629"; font-family: "iconfont"; }
.icon-time-end { content: "\e62a"; font-family: "iconfont"; }
.icon-hour { content: "\e68f"; font-family: "iconfont"; }
.icon-reason { content: "\e614"; font-family: "iconfont"; }
.icon-user { content: "\e600"; font-family: "iconfont"; }
.icon-date { content: "\e637"; font-family: "iconfont"; }
/* 标签样式 - 固定宽度+右对齐，视觉规整 */
.item-label {
width: 140rpx;
font-size: 28rpx;
color: #666666;
font-weight: 500;
width: 160rpx;
font-size: 30rpx;
color: #909399;
font-weight: 500;
flex-shrink: 0;
}
/* 同行时间项的标签 - 适配窄宽度 */
.time-item .item-label {
width: 100rpx;
}
/* 值的样式 */
/* 内容值样式 - 弹性占比，适配多行文/长文本 */
.item-value {
flex: 1;
font-size: 28rpx;
color: #333333;
flex: 1;
font-size: 30rpx;
color: #333333;
word-break: break-all;
}
/* 请假原因 - 适配多行文，增加行高 */
.reason-item .item-value {
line-height: 52rpx;
padding-top: 4rpx;
}
/* 同行时间项 - 各占近50%宽度，防止挤压 */
.time-item {
display: flex;
align-items: flex-start;
width: 48%;
}
/* 同行时间项分隔线 - 竖线分隔，提升辨识度 */
.split-line {
width: 1px;
height: 60rpx;
background-color: #f9f9f9;
margin: 8rpx 16rpx 0;
flex-shrink: 0;
}
</style>