From 561601910fdf6fecdd8de456bed8321cf391b0e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Fri, 11 Jul 2025 10:07:03 +0800
Subject: [PATCH] =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=BF=BD=E7=95=A5=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=EF=BC=8C=E6=8A=A5=E5=B7=A5=E9=A1=B5=E9=9D=A2=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                                   |  47 ++-
 api/oa/login.js                           |   1 +
 components/ReportCard/index.vue           | 254 +++++++++++++++
 components/ReportDetail/index.vue         | 263 ++++++++++++++++
 pages/profile/index/index.vue             |  47 ++-
 pages/workbench/reportWork/reportWork.vue | 367 ++++++++++++++--------
 6 files changed, 849 insertions(+), 130 deletions(-)
 create mode 100644 components/ReportCard/index.vue
 create mode 100644 components/ReportDetail/index.vue

diff --git a/App.vue b/App.vue
index e014cf5..4f68a13 100644
--- a/App.vue
+++ b/App.vue
@@ -471,7 +471,7 @@ export default {
   },
 };
 
-function checkUpdate() {
+function checkUpdate(forceCheck = false) {
   const localVersion = plus.runtime.version;
   const localWgtVersion = uni.getStorageSync('wgtVersion') || localVersion;
   uni.request({
@@ -483,11 +483,19 @@ function checkUpdate() {
       const currentVersion = compareVersion(localWgtVersion, localVersion) > 0 ? localWgtVersion : localVersion;
       console.log('本地基座版本:', localVersion, '本地wgt版本:', localWgtVersion, '当前对比版本:', currentVersion, '远程版本:', remoteVersion);
       if (compareVersion(remoteVersion, currentVersion) > 0) {
+        // 检查是否已忽略当前版本（除非强制检查）
+        const ignoredVersion = uni.getStorageSync('ignoredVersion');
+        if (!forceCheck && ignoredVersion === remoteVersion) {
+          console.log('用户已选择忽略此版本:', remoteVersion);
+          return;
+        }
+        
         uni.showModal({
           title: '发现新版本',
           content: `检测到新版本（${remoteVersion}），是否立即下载并更新？`,
           confirmText: '立即更新',
           cancelText: '暂不更新',
+          showCancel: true,
           success: (modalRes) => {
             if (modalRes.confirm) {
               uni.showLoading({title: '正在下载更新包...'});
@@ -520,6 +528,20 @@ function checkUpdate() {
                   uni.showToast({title: '下载失败'});
                 }
               });
+            } else {
+              // 用户选择暂不更新，询问是否忽略此版本
+              uni.showModal({
+                title: '忽略更新',
+                content: `是否忽略版本 ${remoteVersion}？忽略后下次启动时将不再提示此版本更新。`,
+                confirmText: '忽略此版本',
+                cancelText: '下次提醒',
+                success: (ignoreRes) => {
+                  if (ignoreRes.confirm) {
+                    uni.setStorageSync('ignoredVersion', remoteVersion);
+                    uni.showToast({title: '已忽略此版本更新'});
+                  }
+                }
+              });
             }
           }
         });
@@ -550,6 +572,29 @@ function compareVersion(v1, v2) {
   }
   return 0;
 }
+
+// 更新管理工具函数
+function clearIgnoredVersion() {
+  uni.removeStorageSync('ignoredVersion');
+  console.log('已清除忽略的版本设置');
+}
+
+function getIgnoredVersion() {
+  return uni.getStorageSync('ignoredVersion');
+}
+
+function setIgnoredVersion(version) {
+  uni.setStorageSync('ignoredVersion', version);
+  console.log('已设置忽略版本:', version);
+}
+
+// 导出更新管理函数供其他页面使用
+uni.$updateManager = {
+  checkUpdate: (forceCheck = false) => checkUpdate(forceCheck),
+  clearIgnoredVersion,
+  getIgnoredVersion,
+  setIgnoredVersion
+};
 </script>
 
 <style lang="scss">
diff --git a/api/oa/login.js b/api/oa/login.js
index 26a0383..38664f6 100644
--- a/api/oa/login.js
+++ b/api/oa/login.js
@@ -38,6 +38,7 @@ export const loginOaByPhone = async (phoneNumber) => {
     // 响应拦截器已经处理了响应，直接返回 res.data
     if (response && response.data.token) {
       setToken(response.data.token)
+      uni.setStorageSync('oaId', response.data.userId)
     //   localStorage.setItem('oaToken', response.data.token)
       return {
         token: response.data.token,
diff --git a/components/ReportCard/index.vue b/components/ReportCard/index.vue
new file mode 100644
index 0000000..94a4491
--- /dev/null
+++ b/components/ReportCard/index.vue
@@ -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> 
\ No newline at end of file
diff --git a/components/ReportDetail/index.vue b/components/ReportDetail/index.vue
new file mode 100644
index 0000000..ac312c4
--- /dev/null
+++ b/components/ReportDetail/index.vue
@@ -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> 
\ No newline at end of file
diff --git a/pages/profile/index/index.vue b/pages/profile/index/index.vue
index b2847f0..a148115 100644
--- a/pages/profile/index/index.vue
+++ b/pages/profile/index/index.vue
@@ -66,6 +66,11 @@ export default {
           idx: 3,
           title: "关于我们",
           icon: require("static/images/profile_menu_about.png"),
+        },
+        {
+          idx: 4,
+          title: "应用更新",
+          icon: require("static/images/profile_menu_about.png"),
         },
 		{
 			idx: 5,
@@ -73,7 +78,7 @@ export default {
 			icon: require("static/images/profile_menu_about.png")
 		},
         {
-          idx: 4,
+          idx: 6,
           title: "退出登录",
           icon: require("static/images/profile_menu_logout.png"),
         },
@@ -134,6 +139,9 @@ export default {
           uni.navigateTo({
             url: "/pages/profile/about/index",
           });
+          break;
+        case 4:
+          this.showUpdateOptions();
           break;
 		case 5:
 			uni.createPushMessage({
@@ -147,7 +155,7 @@ export default {
 				}
 			});
 			break;
-        case 4:
+        case 6:
           uni.showModal({
             title: "提示",
             content: "确定要退出当前账号吗？",
@@ -169,6 +177,41 @@ export default {
         url: `/pages/common/userOrGroupQrCode/index`,
       });
     },
+    showUpdateOptions() {
+      const ignoredVersion = uni.$updateManager.getIgnoredVersion();
+      let content = '选择更新操作：';
+      if (ignoredVersion) {
+        content += `\n当前忽略版本：${ignoredVersion}`;
+      }
+      
+      uni.showActionSheet({
+        itemList: ['检查更新', '清除忽略版本', '取消'],
+        success: (res) => {
+          switch (res.tapIndex) {
+            case 0:
+              // 检查更新（强制检查）
+              uni.$updateManager.checkUpdate(true);
+              break;
+            case 1:
+              // 清除忽略版本
+              uni.showModal({
+                title: '确认操作',
+                content: '确定要清除忽略的版本设置吗？清除后将重新提示所有版本更新。',
+                success: (modalRes) => {
+                  if (modalRes.confirm) {
+                    uni.$updateManager.clearIgnoredVersion();
+                    uni.showToast({title: '已清除忽略版本设置'});
+                  }
+                }
+              });
+              break;
+            case 2:
+              // 取消
+              break;
+          }
+        }
+      });
+    },
   },
 };
 </script>
diff --git a/pages/workbench/reportWork/reportWork.vue b/pages/workbench/reportWork/reportWork.vue
index 789fed5..c0dd73b 100644
--- a/pages/workbench/reportWork/reportWork.vue
+++ b/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>