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

pages/workbench/reportWork/reportWork.vue

@@ -1,55 +1,58 @@
 <template>
 	<view class="container">
-		<!-- 数据列表 -->
-		<view class="table-wrapper">
-			<scroll-view scroll-x class="table-scroll">
-				<view class="table-container">
-					<view class="table-header">
-						<view class="header-cell">项目代号</view>
-						<view class="header-cell">项目名称</view>
-						<view class="header-cell">项目编号</view>
-						<view class="header-cell">经办人</view>
-						<view class="header-cell">工作地点</view>
-						<view class="header-cell">国内/国外</view>
-						<view class="header-cell">报工时间</view>
-					</view>
-					
-					<view class="table-body">
-						<view 
-							v-for="(item, index) in projectReportList" 
-							:key="item.reportId" 
-							class="table-row"
-						>
-							<view class="table-cell">
-								<u-tag v-if="!item.projectCode" type="error" text="无"></u-tag>
-								<u-tag v-else :text="item.projectCode"></u-tag>
-							</view>
-							<view class="table-cell">
-								<text v-if="item.prePay > 0">⭐</text>
-								<text>{{ item.projectName }}</text>
-							</view>
-							<view class="table-cell">{{ item.projectNum }}</view>
-							<view class="table-cell">
-								<text>{{ item.nickName }}</text>
-								<text v-if="item.deptName">({{ item.deptName }})</text>
-							</view>
-							<view class="table-cell">{{ item.workPlace }}</view>
-							<view class="table-cell">
-								<u-tag :type="item.workType === 0 ? 'primary' : 'warning'" :text="item.workType === 0 ? '国内' : '国外'"></u-tag>
-							</view>
-							<view class="table-cell">{{ formatDate(item.createTime) }}</view>
-						</view>
-					</view>
-				</view>
-			</scroll-view>
+		<!-- Tab切换 -->
+		<view class="tab-container">
+			<view 
+				class="tab-item" 
+				:class="{ active: activeTab === 'all' }"
+				@click="switchTab('all')"
+			>
+				<text>全部报工</text>
+			</view>
+			<view 
+				class="tab-item" 
+				:class="{ active: activeTab === 'my' }"
+				@click="switchTab('my')"
+			>
+				<text>我的报工</text>
+			</view>
 		</view>
 
-		<!-- 分页 -->
-		<u-loadmore 
-			v-if="total > 0"
-			:status="loadMoreStatus"
-			@loadmore="loadMore"
-		></u-loadmore>
+		<!-- 卡片列表 -->
+		<view class="card-list-container">
+			<scroll-view 
+				scroll-y 
+				class="card-scroll"
+				@scrolltolower="loadMore"
+				refresher-enabled
+				:refresher-triggered="refreshing"
+				@refresherrefresh="onRefresh"
+				:style="{ height: scrollHeight + 'px' }"
+			>
+				<view class="card-list">
+					<ReportCard
+						v-for="(item, index) in projectReportList" 
+						:key="item.reportId"
+						:item="item"
+						:show-avatar="activeTab === 'all'"
+						@card-click="handleCardClick"
+					></ReportCard>
+					
+					<!-- 空状态 -->
+					<view v-if="!loading && projectReportList.length === 0" class="empty-state">
+						<image src="/static/images/empty_lable.png" class="empty-image"></image>
+						<text class="empty-text">暂无报工数据</text>
+					</view>
+				</view>
+				
+				<!-- 加载更多 -->
+				<u-loadmore 
+					v-if="total > 0"
+					:status="loadMoreStatus"
+					@loadmore="loadMore"
+				></u-loadmore>
+			</scroll-view>
+		</view>
 
 		<!-- 圆形新增按钮 -->
 		<view class="fab-button" @click="handleAdd">
@@ -119,24 +122,44 @@
 				</view>
 			</view>
 		</uni-popup>
+		
+		<!-- 报工详情弹窗 -->
+		<ReportDetail 
+			ref="reportDetail"
+			:detail="reportDetail"
+		></ReportDetail>
 	</view>
 </template>
 
 <script>
-import { listProjectReport, addProjectReport } from '@/api/oa/projectReport'
+import { listProjectReport, addProjectReport, getProjectReport } from '@/api/oa/projectReport'
 import { listProject } from '@/api/oa/project'
 import { listDept } from '@/api/oa/dept'
+import ReportCard from '@/components/ReportCard/index.vue'
+import ReportDetail from '@/components/ReportDetail/index.vue'
+import { mapState } from 'vuex'
 
 export default {
+	components: {
+		ReportCard,
+		ReportDetail,
+	},
+	computed: {
+		...mapState('user', ['selfInfo'])
+	},
 	data() {
 		return {
+			// 当前激活的tab
+			activeTab: 'all',
+			// 滚动区域高度
+			scrollHeight: 0,
 			// 按钮loading
 			buttonLoading: false,
 			// 遮罩层
 			loading: true,
 			// 总条数
 			total: 0,
-			// 项目报工表格数据
+			// 项目报工列表数据
 			projectReportList: [],
 			// 弹出层标题
 			title: "",
@@ -149,6 +172,10 @@ export default {
 			form: {},
 			// 加载更多状态
 			loadMoreStatus: 'loadmore',
+			// 下拉刷新状态
+			refreshing: false,
+			// 报工详情数据
+			reportDetail: {},
 			// 分页参数
 			queryParams: {
 				pageNum: 1,
@@ -186,14 +213,40 @@ export default {
 		}
 	},
 	onLoad() {
+		this.calculateScrollHeight();
 		this.getList();
 	},
+	onReady() {
+		// 页面渲染完成后重新计算高度
+		this.calculateScrollHeight();
+	},
 	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')}`;
+		// 计算滚动区域高度
+		calculateScrollHeight() {
+			const systemInfo = uni.getSystemInfoSync();
+			const tabHeight = 100; // tab高度
+			const containerPadding = 40; // 容器padding
+			// 悬浮按钮是固定定位，不需要预留空间，让卡片列表到达底部
+			// 我也不知道为什么要 + 100, 不然滚动高度下面一大片空白，这个不太好调试
+			this.scrollHeight = systemInfo.windowHeight - tabHeight - containerPadding + 100;
+		},
+		
+		// 切换tab
+		switchTab(tab) {
+			if (this.activeTab === tab) return;
+			this.activeTab = tab;
+			this.queryParams.pageNum = 1;
+			this.projectReportList = [];
+			this.getList();
+		},
+		
+		// 下拉刷新
+		onRefresh() {
+			this.refreshing = true;
+			this.queryParams.pageNum = 1;
+			this.getList().finally(() => {
+				this.refreshing = false;
+			});
 		},
 		
 		// 获取项目列表
@@ -235,19 +288,49 @@ export default {
 		
 		// 查询项目报工列表
 		getList() {
-			this.loading = true;
-			listProjectReport(this.queryParams).then(response => {
-				this.projectReportList = response.rows || [];
-				this.total = response.total || 0;
-				this.loading = false;
-				this.getProjectList();
-				// this.getDeptList();
-			}).catch(err => {
-				console.error('获取报工列表失败:', err);
-				this.loading = false;
-				uni.showToast({
-					title: '获取数据失败',
-					icon: 'none'
+			return new Promise((resolve, reject) => {
+				this.loading = true;
+				
+				// 根据当前tab设置查询参数
+				const params = {
+					...this.queryParams
+				};
+				
+				// 如果是我的报工，添加用户ID过滤
+				if (this.activeTab === 'my') {
+					// 使用当前登录用户的ID
+					const oaId = uni.getStorageSync('oaId');
+					if (oaId) {
+						params.userId = oaId;
+					}
+				}
+				
+				listProjectReport(params).then(response => {
+					if (this.queryParams.pageNum === 1) {
+						this.projectReportList = response.rows || [];
+					} else {
+						this.projectReportList = [...this.projectReportList, ...(response.rows || [])];
+					}
+					this.total = response.total || 0;
+					this.loading = false;
+					
+					// 更新加载更多状态
+					if (this.queryParams.pageNum > 1) {
+						this.loadMoreStatus = 'loadmore';
+					}
+					
+					this.getProjectList();
+					// this.getDeptList();
+					resolve(response);
+				}).catch(err => {
+					console.error('获取报工列表失败:', err);
+					this.loading = false;
+					this.loadMoreStatus = 'loadmore';
+					uni.showToast({
+						title: '获取数据失败',
+						icon: 'none'
+					});
+					reject(err);
 				});
 			});
 		},
@@ -259,6 +342,32 @@ export default {
 			this.$refs.popup.open();
 		},
 		
+		// 卡片点击事件
+		handleCardClick(item) {
+			console.log('点击了报工卡片:', item);
+			// 获取报工详情
+			this.getReportDetail(item.reportId);
+		},
+		
+		// 获取报工详情
+		getReportDetail(reportId) {
+			// 先打开弹窗显示加载状态
+			this.$refs.reportDetail.open();
+			
+			getProjectReport(reportId).then(response => {
+				// 根据API返回的数据结构处理
+				this.reportDetail = response.data || response || {};
+			}).catch(err => {
+				console.error('获取报工详情失败:', err);
+				uni.showToast({
+					title: '获取详情失败',
+					icon: 'none'
+				});
+				// 关闭弹窗
+				this.$refs.reportDetail.close();
+			});
+		},
+		
 		// 提交表单
 		submitForm() {
 			// 手动验证表单
@@ -361,18 +470,7 @@ export default {
 			this.queryParams.pageNum++;
 			this.loadMoreStatus = 'loading';
 			
-			listProjectReport(this.queryParams).then(response => {
-				const newData = response.rows || [];
-				this.projectReportList = [...this.projectReportList, ...newData];
-				this.loadMoreStatus = 'loadmore';
-			}).catch(err => {
-				console.error('加载更多失败:', err);
-				this.loadMoreStatus = 'loadmore';
-				uni.showToast({
-					title: '加载失败',
-					icon: 'none'
-				});
-			});
+			this.getList();
 		},
 		
 		// 项目选择变化处理
@@ -391,61 +489,75 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-	padding: 20rpx;
 	background-color: #f5f5f5;
-	min-height: 100vh;
-}
-
-.table-wrapper {
-	background-color: #fff;
-	border-radius: 10rpx;
-	overflow: hidden;
-}
-
-.table-scroll {
-	width: 100%;
-}
-
-.table-container {
-	min-width: 1400rpx; // 设置最小宽度，确保表格内容不会被压缩
-}
-
-.table-header {
+	height: 100vh;
 	display: flex;
-	background-color: #f8f9fa;
+	flex-direction: column;
+}
+
+.tab-container {
+	display: flex;
+	background-color: #fff;
+	padding: 0 20rpx;
 	border-bottom: 1rpx solid #e9ecef;
 	
-	.header-cell {
-		width: 200rpx; // 固定列宽
-		padding: 20rpx 10rpx;
-		text-align: center;
-		font-weight: bold;
+	.tab-item {
+		flex: 1;
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		font-size: 28rpx;
-		flex-shrink: 0; // 防止列被压缩
+		color: #666;
+		position: relative;
+		
+		&.active {
+			color: #007bff;
+			font-weight: 500;
+			
+			&::after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 50%;
+				transform: translateX(-50%);
+				width: 60rpx;
+				height: 4rpx;
+				background-color: #007bff;
+				border-radius: 2rpx;
+			}
+		}
 	}
 }
 
-.table-body {
-	.table-row {
-		display: flex;
-		border-bottom: 1rpx solid #e9ecef;
-		
-		&:hover {
-			background-color: #f8f9fa;
-		}
-		
-		.table-cell {
-			width: 200rpx; // 固定列宽
-			padding: 20rpx 10rpx;
-			text-align: center;
-			font-size: 26rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-direction: column;
-			flex-shrink: 0; // 防止列被压缩
-			word-break: break-all; // 长文本换行
-		}
+.card-list-container {
+	flex: 1;
+	padding: 20rpx;
+	overflow: hidden;
+}
+
+.card-scroll {
+	width: 100%;
+	height: 100%;
+}
+
+.empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 100rpx 0;
+	
+	.empty-image {
+		width: 200rpx;
+		height: 200rpx;
+		margin-bottom: 30rpx;
+		opacity: 0.6;
+	}
+	
+	.empty-text {
+		font-size: 28rpx;
+		color: #999;
 	}
 }
 
@@ -512,5 +624,6 @@ export default {
 	justify-content: center;
 	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
 	padding: 20rpx;
+	z-index: 999;
 }
 </style>