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

版本忽略更新，报工页面优化

Browse Source
This commit is contained in:
砂糖
2025-07-11 10:07:03 +08:00
parent faab5b2bd1
commit 561601910f
6 changed files with 849 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
components/ReportCard/index.vue Normal file
View File

@@ -0,0 +1,254 @@
<template>
<view class="report-card" @click="handleCardClick">
<!-- 带头像和名字的卡片 -->
<view v-if="showAvatar" class="card-with-avatar">
<view class="card-header">
<view class="user-info">
<image class="avatar" :src="item.avatar || '/static/images/logo.png'" mode="aspectFill"></image>
<view class="user-details">
<text class="nickname">{{ item.nickName }}</text>
<text v-if="item.deptName" class="dept-name">({{ item.deptName }})</text>
</view>
</view>
<view class="report-time">{{ formatDate(item.createTime) }}</view>
</view>
<view class="card-content">
<view class="project-info">
<view class="project-name">
<text v-if="item.prePay > 0" class="star-icon">⭐</text>
<text>{{ item.projectName }}</text>
</view>
<view class="project-details">
<u-tag v-if="!item.projectCode" type="error" text="无" size="mini"></u-tag>
<u-tag v-else :text="item.projectCode" size="mini"></u-tag>
<text class="project-num">{{ item.projectNum }}</text>
</view>
</view>
<view class="work-info">
<view class="work-location">
<text>{{ item.workPlace }}</text>
</view>
<u-tag :type="item.workType === 0 ? 'primary' : 'warning'" :text="item.workType === 0 ? '国内' : '国外'" size="mini"></u-tag>
</view>
</view>
</view>
<!-- 不带头像的卡片 -->
<view v-else class="card-simple">
<view class="card-header-simple">
<view class="project-name">
<text v-if="item.prePay > 0" class="star-icon">⭐</text>
<text>{{ item.projectName }}</text>
</view>
<view class="report-time">{{ formatDate(item.createTime) }}</view>
</view>
<view class="card-content-simple">
<view class="project-details">
<u-tag v-if="!item.projectCode" type="error" text="无" size="mini"></u-tag>
<u-tag v-else :text="item.projectCode" size="mini"></u-tag>
<text class="project-num">{{ item.projectNum }}</text>
</view>
<view class="work-info">
<view class="work-location">
<text>{{ item.workPlace }}</text>
</view>
<u-tag :type="item.workType === 0 ? 'primary' : 'warning'" :text="item.workType === 0 ? '国内' : '国外'" size="mini"></u-tag>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'ReportCard',
props: {
// 报工数据
item: {
type: Object,
required: true
},
// 是否显示头像和名字
showAvatar: {
type: Boolean,
default: true
}
},
methods: {
// 格式化日期
formatDate(date) {
if (!date) return '';
const d = new Date(date);
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
},
// 卡片点击事件
handleCardClick() {
this.$emit('card-click', this.item);
}
}
}
</script>
<style lang="scss" scoped>
.report-card {
background-color: #fff;
border-radius: 16rpx;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
}
// 带头像的卡片样式
.card-with-avatar {
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx;
border-bottom: 1rpx solid #f0f0f0;
.user-info {
display: flex;
align-items: center;
.avatar {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-right: 16rpx;
}
.user-details {
.nickname {
font-size: 28rpx;
font-weight: 500;
color: #333;
display: block;
}
.dept-name {
font-size: 24rpx;
color: #666;
margin-top: 4rpx;
display: block;
}
}
}
.report-time {
font-size: 24rpx;
color: #999;
}
}
.card-content {
padding: 24rpx;
.project-info {
margin-bottom: 20rpx;
.project-name {
font-size: 30rpx;
font-weight: 500;
color: #333;
margin-bottom: 12rpx;
.star-icon {
margin-right: 8rpx;
}
}
.project-details {
display: flex;
align-items: center;
gap: 12rpx;
.project-num {
font-size: 24rpx;
color: #666;
}
}
}
.work-info {
display: flex;
justify-content: space-between;
align-items: center;
.work-location {
display: flex;
align-items: center;
gap: 8rpx;
font-size: 26rpx;
color: #666;
}
}
}
}
// 不带头像的卡片样式
.card-simple {
padding: 24rpx;
.card-header-simple {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.project-name {
font-size: 30rpx;
font-weight: 500;
color: #333;
.star-icon {
margin-right: 8rpx;
}
}
.report-time {
font-size: 24rpx;
color: #999;
}
}
.card-content-simple {
.project-details {
display: flex;
align-items: center;
gap: 12rpx;
margin-bottom: 16rpx;
.project-num {
font-size: 24rpx;
color: #666;
}
}
.work-info {
display: flex;
justify-content: space-between;
align-items: center;
.work-location {
display: flex;
align-items: center;
gap: 8rpx;
font-size: 26rpx;
color: #666;
}
}
}
}
}
</style>

263
components/ReportDetail/index.vue Normal file
View File

@@ -0,0 +1,263 @@
<template>
<uni-popup ref="popup" type="center" :mask-click="true" @mask-click="close">
<view class="detail-popup">
<view class="detail-header">
<text class="detail-title">报工详情</text>
<u-icon name="close" @click="close" size="40" color="#999"></u-icon>
</view>
<!-- 加载状态 -->
<view v-if="loading" class="loading-container">
<u-loading-icon mode="spinner" size="40"></u-loading-icon>
<text class="loading-text">加载中...</text>
</view>
<scroll-view v-else scroll-y class="detail-content">
<view class="detail-info">
<!-- 空数据提示 -->
<view v-if="!detail || Object.keys(detail).length === 0" class="empty-detail">
<text class="empty-text">暂无详情数据</text>
</view>
<!-- 项目信息 -->
<view v-else class="info-section">
<view class="section-title">项目信息</view>
<view class="info-item">
<text class="label">项目名称：</text>
<text class="value">{{ detail.projectName }}</text>
</view>
<view class="info-item">
<text class="label">项目编号：</text>
<text class="value">{{ detail.projectNum }}</text>
</view>
<view class="info-item" v-if="detail.projectCode">
<text class="label">项目代号：</text>
<text class="value">{{ detail.projectCode }}</text>
</view>
</view>
<!-- 报工信息 -->
<view class="info-section">
<view class="section-title">报工信息</view>
<view class="info-item">
<text class="label">工作地点：</text>
<text class="value">{{ detail.workPlace }}</text>
</view>
<view class="info-item">
<text class="label">是否出差：</text>
<text class="value">{{ detail.isTrip === 1 ? '是' : '否' }}</text>
</view>
<view class="info-item" v-if="detail.isTrip === 1">
<text class="label">出差类型：</text>
<text class="value">{{ detail.workType === 0 ? '国内' : '国外' }}</text>
</view>
<view class="info-item">
<text class="label">报工时间：</text>
<text class="value">{{ formatDate(detail.createTime) }}</text>
</view>
</view>
<!-- 报工内容 -->
<view class="info-section">
<view class="section-title">报工内容</view>
<view class="content-box">
<mp-html :content="detail.content"></mp-html>
</view>
</view>
<!-- 备注信息 -->
<view class="info-section" v-if="detail.remark">
<view class="section-title">备注</view>
<view class="content-box">
<text>{{ detail.remark }}</text>
</view>
</view>
</view>
</scroll-view>
</view>
</uni-popup>
</template>
<script>
import mpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue'
export default {
name: 'ReportDetail',
components: {
mpHtml
},
props: {
// 报工详情数据
detail: {
type: Object,
default: () => ({})
}
},
data() {
return {
loading: false
}
},
watch: {
detail: {
handler(newVal) {
if (newVal && Object.keys(newVal).length > 0) {
this.loading = false;
}
},
immediate: true
}
},
methods: {
// 格式化日期
formatDate(date) {
if (!date) return '';
const d = new Date(date);
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
},
// 打开弹窗
open() {
this.loading = true;
this.$refs.popup.open();
// 延迟关闭加载状态，给内容渲染时间
setTimeout(() => {
this.loading = false;
}, 300);
},
// 关闭弹窗
close() {
this.$refs.popup.close();
}
}
}
</script>
<style lang="scss" scoped>
.detail-popup {
background-color: #fff;
border-radius: 20rpx;
width: 90vw;
max-height: 85vh;
display: flex;
flex-direction: column;
overflow: hidden;
.detail-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #e9ecef;
.detail-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
}
.loading-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60rpx 0;
box-sizing: border-box;
.loading-text {
font-size: 28rpx;
color: #666;
margin-top: 20rpx;
}
}
.detail-content {
flex: 1;
padding: 30rpx;
box-sizing: border-box;
max-height: 65vh;
}
.detail-info {
.empty-detail {
display: flex;
align-items: center;
justify-content: center;
padding: 100rpx 0;
.empty-text {
font-size: 28rpx;
color: #999;
}
}
.info-section {
margin-bottom: 40rpx;
&:last-child {
margin-bottom: 0;
}
.section-title {
font-size: 28rpx;
font-weight: 500;
color: #333;
margin-bottom: 20rpx;
padding-left: 20rpx;
border-left: 4rpx solid #007bff;
}
.info-item {
display: flex;
margin-bottom: 16rpx;
&:last-child {
margin-bottom: 0;
}
.label {
font-size: 26rpx;
color: #666;
width: 140rpx;
flex-shrink: 0;
}
.value {
font-size: 26rpx;
color: #333;
flex: 1;
word-break: break-all;
}
}
.content-box {
background-color: #f8f9fa;
border-radius: 12rpx;
padding: 20rpx;
min-height: 100rpx;
text {
font-size: 26rpx;
color: #333;
line-height: 1.6;
}
// 自定义mp-html样式
:deep(.mp-html) {
font-size: 26rpx;
color: #333;
line-height: 1.6;
p {
margin: 0;
padding: 0;
}
}
}
}
}
}
</style>