132 lines
3.0 KiB
Vue
132 lines
3.0 KiB
Vue
|
<template>
|
|||
|
|
<view class="leave-detail-container">
|
|||
|
|
<!-- 请假类型 -->
|
|||
|
|
<view class="detail-item">
|
|||
|
|
<view class="item-label">请假类型：</view>
|
|||
|
|
<view class="item-value">{{ detail.leaveType || '无' }}</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>
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* 容器样式 */
|
|||
|
|
.leave-detail-container {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
margin: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 每一项的样式 */
|
|||
|
|
.detail-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 18rpx 0;
|
|||
|
|
border-bottom: 1px solid #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 最后一项去掉下边框 */
|
|||
|
|
.detail-item:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 标签样式 */
|
|||
|
|
.item-label {
|
|||
|
|
width: 140rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 值的样式 */
|
|||
|
|
.item-value {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
</style>
|