施工页面样式修改

pages/login/index.vue

@@ -220,8 +220,8 @@ export default {
           uni.switchTab({
             url: "/pages/conversation/conversationList/index",
           });
-		  await getSMSCodeFromOa(this.loginInfo.phoneNumber);
-		  await loginOaByPhone(this.loginInfo.phoneNumber)
+		      await getSMSCodeFromOa(this.loginInfo.phoneNumber);
+		      await loginOaByPhone(this.loginInfo.phoneNumber)
           this.loginInfo.password = "";
        
         this.loading = false;

pages/workbench/construction/construction.vue

@@ -3,38 +3,53 @@
 		<!-- 操作说明 -->
 		<view class="operation-tip">
 			<u-icon name="info-circle" color="#007bff" size="16"></u-icon>
-			<text class="tip-text">点击对应的行可以查看详情</text>
+			<text class="tip-text">点击对应的卡片可以查看详情</text>
+		</view>
+
+		<!-- 新增按钮 -->
+		<view class="add-button-container">
+			<u-button 
+				type="primary" 
+				@click="showAddForm"
+				:custom-style="{ borderRadius: '50rpx', height: '80rpx' }"
+			>
+				<u-icon name="plus" color="#fff" size="20" style="margin-right: 10rpx;"></u-icon>
+				新增汇报
+			</u-button>
 		</view>
 
 		<!-- 数据列表 -->
-		<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="masonry-list">
+			<view 
+				v-for="(item, index) in reportSummaryList" 
+				:key="item.summaryId" 
+				class="masonry-card"
+				@click="handleRowClick(item)"
+			>
+				<view class="card-title">{{ item.reportTitle || '-' }}</view>
+				<view class="card-info">
+					<view class="info-row">
+						<text class="label">最近汇报时间：</text>
+						<text>{{ formatDate(item.lastUpdateTime) }}</text>
 					</view>
-					<view class="table-body">
-						<view 
-							v-for="(item, index) in reportSummaryList" 
-							:key="item.summaryId" 
-							class="table-row"
-							@click="handleRowClick(item)"
-						>
-							<view class="table-cell">{{ item.reportTitle || '-' }}</view>
-							<view class="table-cell">{{ formatDate(item.lastUpdateTime) }}</view>
-							<view class="table-cell">{{ formatDate(item.reportDate) }}</view>
-							<view class="table-cell">{{ item.reporter || '-' }}</view>
-							<view class="table-cell">{{ item.projectName || '-' }}</view>
-							<view class="table-cell">{{ item.remark || '-' }}</view>
-						</view>
+					<view class="info-row">
+						<text class="label">汇报日期：</text>
+						<text>{{ formatDate(item.reportDate) }}</text>
+					</view>
+					<view class="info-row">
+						<text class="label">汇报人：</text>
+						<text>{{ item.reporter || '-' }}</text>
+					</view>
+					<view class="info-row">
+						<text class="label">涉及项目：</text>
+						<text>{{ item.projectName || '-' }}</text>
+					</view>
+					<view class="info-row">
+						<text class="label">备注：</text>
+						<text>{{ item.remark || '-' }}</text>
 					</view>
 				</view>
-			</scroll-view>
+			</view>
 		</view>
 
 		<!-- 分页 -->
@@ -44,13 +59,75 @@
 			@loadmore="loadMore"
 		></u-loadmore>
 
+		<!-- 新增表单弹窗 -->
+		<uni-popup ref="formPopup" type="bottom" :mask-click="false">
+			<view class="form-popup-content">
+				<view class="popup-header">
+					<text class="popup-title">新增汇报</text>
+					<u-icon name="close" size="20" @click="closeForm"></u-icon>
+				</view>
+				
+				<view class="form-content">
+					<u-form :model="form" ref="uForm" :rules="rules">
+						<u-form-item label="汇报标题" prop="reportTitle">
+							<u-input 
+								v-model="form.reportTitle" 
+								placeholder="请输入汇报标题"
+								:border="true"
+							/>
+						</u-form-item>
+						
+						<u-form-item label="汇报日期" prop="reportDate">
+							<uni-datetime-picker
+								v-model="form.reportDate"
+								type="datetime"
+								:clear-icon="true"
+								placeholder="请选择汇报日期"
+								@change="onDateChange"
+							/>
+						</u-form-item>
+						
+						<u-form-item label="汇报人" prop="reporter">
+							<u-input 
+								v-model="form.reporter" 
+								placeholder="请输入汇报人"
+								:border="true"
+							/>
+						</u-form-item>
+						
+						<u-form-item label="涉及项目" prop="projectId">
+							<uni-data-select
+								v-model="form.projectId"
+								:localdata="projectList"
+								placeholder="请选择涉及项目"
+								@change="handleProjectChange"
+							/>
+						</u-form-item>
+						
+						<u-form-item label="备注" prop="remark">
+							<u-textarea
+								v-model="form.remark"
+								placeholder="请输入内容"
+								:height="120"
+								:border="true"
+							/>
+						</u-form-item>
+					</u-form>
+				</view>
+				
+				<view class="popup-footer">
+					<u-button @click="closeForm" :custom-style="{ flex: 1 }">取消</u-button>
+					<u-button type="primary" @click="submitForm" :custom-style="{ flex: 1 }">确定</u-button>
+				</view>
+			</view>
+		</uni-popup>
 
 	</view>
 </template>
 
 <script>
 import { listProject } from '@/api/oa/project'
-import { listReportSummary } from '@/api/oa/reportSummary'
+import { listReportSummary, addReportSummary } from '@/api/oa/reportSummary'
 
 export default {
 	data() {
@@ -68,7 +145,43 @@ export default {
 				projectId: undefined,
 				type: 1
 			},
-			loadMoreStatus: 'loadmore'
+			loadMoreStatus: 'loadmore',
+			// 表单数据
+			form: {
+				reportTitle: '',
+				reportDate: '',
+				reporter: '',
+				projectId: '',
+				remark: '',
+				type: 1
+			},
+			// 表单验证规则
+			rules: {
+				reportTitle: {
+					type: 'string',
+					required: true,
+					message: '请输入汇报标题',
+					trigger: ['blur', 'change']
+				},
+				reportDate: {
+					type: 'string',
+					required: true,
+					message: '请选择汇报日期',
+					trigger: ['blur', 'change']
+				},
+				reporter: {
+					type: 'string',
+					required: true,
+					message: '请输入汇报人',
+					trigger: ['blur', 'change']
+				},
+				projectId: {
+					type: 'string',
+					required: true,
+					message: '请选择涉及项目',
+					trigger: ['blur', 'change']
+				}
+			}
 		}
 	},
 	onLoad() {
@@ -84,6 +197,9 @@ export default {
 				this.loading = false;
 				this.selectedIds = [];
 				this.selectAll = false;
+				if (this.reportSummaryList.length <= this.total) {
+					this.loadMoreStatus = 'nomore';
+				}
 			}).catch(() => {
 				this.loading = false;
 			});
@@ -144,14 +260,77 @@ export default {
 		// 项目选择变化处理
 		handleProjectChange(value) {
 			this.form.projectId = value;
-			// 根据选择的项目ID获取项目名称
-			const selectedProject = this.projectList.find(item => item.projectId === value);
-			if (selectedProject) {
-				this.selectedProjectName = selectedProject.projectName;
+		},
+
+		// 日期选择变化处理
+		onDateChange(value) {
+			this.form.reportDate = value;
+		},
+
+		// 显示新增表单
+		showAddForm() {
+			this.resetForm();
+			this.$refs.formPopup.open();
+		},
+
+		// 关闭表单
+		closeForm() {
+			this.$refs.formPopup.close();
+			this.resetForm();
+		},
+
+		// 重置表单
+		resetForm() {
+			this.form = {
+				reportTitle: '',
+				reportDate: '',
+				reporter: '',
+				projectId: '',
+				remark: '',
+				type: 1
+			};
+			// 清除验证状态
+			if (this.$refs.uForm) {
+				this.$refs.uForm.clearValidate();
 			}
 		},
-		
 
+		// 提交表单
+		submitForm() {
+			this.$refs.uForm.validate().then(valid => {
+				if (valid) {
+					this.submitData();
+				}
+			}).catch(errors => {
+				console.log('表单验证失败:', errors);
+			});
+		},
+
+		// 提交数据
+		submitData() {
+			uni.showLoading({
+				title: '提交中...'
+			});
+
+			addReportSummary(this.form).then(response => {
+				uni.hideLoading();
+				uni.showToast({
+					title: '添加成功',
+					icon: 'success'
+				});
+				this.closeForm();
+				// 刷新列表
+				this.queryParams.pageNum = 1;
+				this.getList();
+			}).catch(error => {
+				uni.hideLoading();
+				uni.showToast({
+					title: '添加失败',
+					icon: 'none'
+				});
+				console.error('添加汇报失败:', error);
+			});
+		}
 	}
 }
 </script>
@@ -180,62 +359,48 @@ export default {
 	}
 }
 
-
-.table-wrapper {
-	background-color: #fff;
-	border-radius: 10rpx;
-	overflow: hidden;
+.add-button-container {
+	display: flex;
+	justify-content: center;
+	margin-bottom: 30rpx;
 }
 
-.table-scroll {
-	width: 100%;
+.masonry-list {
+	column-count: 2;
+	column-gap: 24rpx;
+	padding: 10rpx 0;
 }
 
-.table-container {
-	min-width: 1200rpx; // 设置最小宽度，确保表格内容不会被压缩
-	.table-header {
-		display: flex;
-		background-color: #f8f9fa;
-		border-bottom: 1rpx solid #e9ecef;
-		.header-cell {
-			width: 200rpx; // 固定列宽
-			padding: 20rpx 10rpx;
-			text-align: center;
-			font-weight: bold;
-			font-size: 28rpx;
-			flex-shrink: 0; // 防止列被压缩
-			&.checkbox {
-				width: 100rpx; // 复选框列宽度
-			}
-		}
+.masonry-card {
+	width: calc(100%% - 18rpx);
+	margin-bottom: 24rpx;
+	background: #fff;
+	border-radius: 16rpx;
+	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
+	display: inline-block;
+	break-inside: avoid;
+	padding: 32rpx 24rpx;
+	cursor: pointer;
+	transition: box-shadow 0.2s;
+	&:active {
+		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.10);
+		background: #f8f9fa;
 	}
-	.table-body {
-		.table-row {
+	.card-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		margin-bottom: 16rpx;
+		color: #007bff;
+	}
+	.card-info {
+		display: flex;
+		flex-direction: column;
+		gap: 8rpx;
+		.info-row {
 			display: flex;
-			border-bottom: 1rpx solid #e9ecef;
-			cursor: pointer;
-			transition: background-color 0.2s;
-			
-			&:hover {
-				background-color: #f8f9fa;
-			}
-			
-			&:active {
-				background-color: #e9ecef;
-			}
-			.table-cell {
-				width: 200rpx; // 固定列宽
-				padding: 20rpx 10rpx;
-				text-align: center;
-				font-size: 26rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				flex-shrink: 0; // 防止列被压缩
-				word-break: break-all; // 长文本换行
-				&.checkbox {
-					width: 100rpx; // 复选框列宽度
-				}
+			.label {
+				color: #888;
+				min-width: 120rpx;
 			}
 		}
 	}

pages/workbench/construction/detail.vue

@@ -22,69 +22,49 @@
 			</view>
 		</view>
 
-		<!-- 操作按钮 -->
-		<view class="action-buttons">
-			<u-button type="primary" @click="handleAdd" size="medium">新增</u-button>
-			<u-button type="error" @click="handleDelete" size="medium" :disabled="!selectedIds.length">删除</u-button>
-		</view>
+
 
 		<!-- 数据列表 -->
-		<view class="table-wrapper">
-			<scroll-view scroll-x class="table-scroll">
-				<view class="table-container">
-					<view class="table-header">
-						<view class="header-cell checkbox">
-							<u-checkbox v-model="selectAll" @change="handleSelectAll"></u-checkbox>
+		<view class="list-wrapper">
+			<u-swipe-action>
+				<u-swipe-action-item
+					v-for="(item, index) in reportDetailList"
+					:key="item.detailId"
+					:options="[{text: '删除', style: {background: '#ff4d4f', color: '#fff'}}]"
+					@click="handleDelete(item)"
+				>
+					<view class="detail-list-item">
+						<view class="item-row">
+							<text class="item-label">设备编号：</text>
+							<text class="item-value">{{ item.deviceCode || '-' }}</text>
 						</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>
-					
-					<u-checkbox-group v-model="selectedIds" @change="handleSelectionChange">
-						<view class="table-body">
-							<view 
-								v-for="(item, index) in reportDetailList" 
-								:key="item.detailId" 
-								class="table-row"
-							>
-								<view class="table-cell checkbox">
-									<u-checkbox 
-										:name="item.detailId"
-										:value="item.detailId"
-									></u-checkbox>
-								</view>
-								<view class="table-cell">{{ item.deviceCode || '-' }}</view>
-								<view class="table-cell">{{ item.category || '-' }}</view>
-								<view class="table-cell content-cell">
-									<text class="content-text">{{ item.reportDetail || '-' }}</text>
-								</view>
-								<view class="table-cell">
-									<u-image 
-										v-if="item.ossIds" 
-										:src="item.ossIds.split(',')[0]" 
-										width="60rpx" 
-										height="60rpx"
-										@click="handleImageDetail(item)"
-									></u-image>
-									<text v-else>-</text>
-								</view>
-								<view class="table-cell">{{ item.remark || '-' }}</view>
-								<view class="table-cell">
-									<u-button 
-										type="error" 
-										size="mini" 
-										@click="handleDelete(item)"
-									>删除</u-button>
-								</view>
+						<view class="item-row">
+							<text class="item-label">设备类别：</text>
+							<text class="item-value">{{ item.category || '-' }}</text>
+						</view>
+						<view class="item-row">
+							<text class="item-label">汇报详情内容：</text>
+							<text class="item-value">{{ item.reportDetail || '-' }}</text>
+						</view>
+						<view class="item-row">
+							<text class="item-label">图片概况：</text>
+							<view v-if="item.ossIds">
+								<u-image 
+									:src="item.ossIds.split(',')[0]" 
+									width="60rpx" 
+									height="60rpx"
+									@click.stop="handleImageDetail(item)"
+								></u-image>
 							</view>
+							<text v-else>-</text>
 						</view>
-					</u-checkbox-group>
-				</view>
-			</scroll-view>
+						<view class="item-row">
+							<text class="item-label">备注：</text>
+							<text class="item-value">{{ item.remark || '-' }}</text>
+						</view>
+					</view>
+				</u-swipe-action-item>
+			</u-swipe-action>
 		</view>
 
 		<!-- 分页 -->
@@ -94,6 +74,13 @@
 			@loadmore="loadMore"
 		></u-loadmore>
 
+		<!-- 新增圆形按钮 -->
+		<view class="add-button-wrapper">
+			<view class="add-button" @click="handleAdd">
+				<u-icon name="plus" color="#fff" size="40"></u-icon>
+			</view>
+		</view>
+
 		<!-- 新增弹窗 -->
 		<uni-popup ref="formPopup" type="bottom" :mask-click="false">
 			<view class="form-popup">
@@ -269,6 +256,9 @@ export default {
 				this.reportDetailList = response.rows || [];
 				this.total = response.total || 0;
 				this.loading = false;
+				if (this.reportDetailList.length >= this.total) {
+					this.loadMoreStatus = 'nomore';
+				}
 				// 重置选中状态
 				this.selectedIds = [];
 				this.selectAll = false;
@@ -450,7 +440,8 @@ export default {
 				this.reportDetailList = [...this.reportDetailList, ...newData];
 				this.total = response.total || 0;
 				
-				if (newData.length < this.queryParams.pageSize) {
+				// 判断是否还有更多数据：当前获取的数据总数 >= 总数据量
+				if (this.reportDetailList.length >= this.total) {
 					this.loadMoreStatus = 'nomore';
 				} else {
 					this.loadMoreStatus = 'loadmore';
@@ -549,76 +540,32 @@ export default {
 	}
 }
 
-.action-buttons {
-	display: flex;
-	gap: 20rpx;
-	margin-bottom: 20rpx;
-}
 
-.table-wrapper {
-	background-color: #fff;
+
+.list-wrapper {
+	background: #fff;
 	border-radius: 10rpx;
-	overflow: hidden;
+	padding: 10rpx 0;
 }
 
-.table-scroll {
-	width: 100%;
-}
-
-.table-container {
-	min-width: 1400rpx; // 设置最小宽度，确保表格内容不会被压缩
-	.table-header {
+.detail-list-item {
+	padding: 32rpx 24rpx;
+	background: #fff;
+	border-radius: 12rpx;
+	margin-bottom: 16rpx;
+	border: 1rpx solid #e9ecef;
+	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+	.item-row {
 		display: flex;
-		background-color: #f8f9fa;
-		border-bottom: 1rpx solid #e9ecef;
-		
-		.header-cell {
-			width: 200rpx; // 固定列宽
-			padding: 20rpx 10rpx;
-			text-align: center;
-			font-weight: bold;
-			font-size: 28rpx;
-			flex-shrink: 0; // 防止列被压缩
-			
-			&.checkbox {
-				width: 100rpx; // 复选框列宽度
-			}
+		align-items: center;
+		margin-bottom: 8rpx;
+		.item-label {
+			color: #888;
+			min-width: 140rpx;
 		}
-	}
-	
-	.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-shrink: 0; // 防止列被压缩
-				word-break: break-all; // 长文本换行
-				
-				&.checkbox {
-					width: 100rpx; // 复选框列宽度
-				}
-				
-				&.content-cell {
-					.content-text {
-						max-width: 180rpx;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					}
-				}
-			}
+		.item-value {
+			color: #333;
+			flex: 1;
 		}
 	}
 }
@@ -696,4 +643,28 @@ export default {
   text-overflow: ellipsis;
   display: block;
 }
+
+.add-button-wrapper {
+  position: fixed;
+  bottom: 40rpx;
+  right: 40rpx;
+  z-index: 999;
+}
+
+.add-button {
+  width: 120rpx;
+  height: 120rpx;
+  background: linear-gradient(135deg, #007bff, #0056b3);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 16rpx rgba(0, 123, 255, 0.3);
+  transition: all 0.3s ease;
+  
+  &:active {
+    transform: scale(0.95);
+    box-shadow: 0 2rpx 8rpx rgba(0, 123, 255, 0.4);
+  }
+}
 </style> 

util/oaRequest.js

@@ -1,6 +1,7 @@
 import { getToken } from './auth'
 import errorCode from './errorCode'
 import { toast, showConfirm, tansParams } from './common'
+import { getSMSCodeFromOa, loginOaByPhone } from '../api/oa/login'
 
 let timeout = 10000
 const baseUrl = 'http://110.41.139.73:8080'
@@ -42,8 +43,23 @@ const request = config => {
         const code = res.data.code || 200
         const msg = errorCode[code] || res.data.msg || errorCode['default']
         if (code === 401) {
-          showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
+          showConfirm('登录状态已过期，是否刷新登录状态').then(async res => {
             if (res.confirm) {
+              // 从store中获取phoneNumber，并依次调用getSMSCodeFromOa和loginOaByPhone
+              const store = require('@/store').default
+              const phoneNumber = store.getters.storeSelfInfo?.phoneNumber
+              if (phoneNumber) {
+                try {
+                  await getSMSCodeFromOa(phoneNumber)
+                  await loginOaByPhone(phoneNumber)
+                } catch (e) {
+                  console.log('OA自动登录失败', e)
+                  toast('OA自动登录失败')
+                }
+              } else {
+                toast('无法获取手机号，OA自动登录失败')
+              }
+              // 登录
             //   store.dispatch('LogOut').then(res => {
             //     uni.reLaunch({ url: '/pages/login' })
             //   })