迁移oa部分页面：施工进度和每日报工

pages/workbench/reportWork/reportWork.vue

@@ -1,19 +1,10 @@
 <template>
 	<view class="container">
-		<!-- 操作按钮 -->
-		<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>
 						<view class="header-cell">项目代号</view>
 						<view class="header-cell">项目名称</view>
 						<view class="header-cell">项目编号</view>
@@ -29,12 +20,6 @@
 							:key="item.reportId" 
 							class="table-row"
 						>
-							<view class="table-cell checkbox">
-								<u-checkbox 
-									v-model="item.selected" 
-									@change="handleSelectionChange"
-								></u-checkbox>
-							</view>
 							<view class="table-cell">
 								<u-tag v-if="!item.projectCode" type="error" text="无"></u-tag>
 								<u-tag v-else :text="item.projectCode"></u-tag>
@@ -66,56 +51,66 @@
 			@loadmore="loadMore"
 		></u-loadmore>
 
+		<!-- 圆形新增按钮 -->
+		<view class="fab-button" @click="handleAdd">
+			<u-icon name="plus" color="#fff" size="30"></u-icon>
+		</view>
+
 		<!-- 新增弹窗 -->
-		<u-popup v-model="showForm" mode="center" width="600rpx" height="800rpx">
-			<view class="form-popup">
+		<uni-popup ref="popup" type="bottom" :mask-click="false">
+			<view class="form-popup-content">
 				<view class="popup-header">
 					<text class="popup-title">{{ title }}</text>
 					<u-icon name="close" @click="cancel" size="40"></u-icon>
 				</view>
 				
 				<scroll-view scroll-y class="form-content">
-					<u-form :model="form" ref="form" label-width="180rpx">
-						<u-form-item label="工作地点" prop="workPlace">
+					<view class="form-container">
+						<view class="form-item">
+							<view class="form-label">工作地点</view>
 							<u-input v-model="form.workPlace" placeholder="请输入工作地点"></u-input>
-						</u-form-item>
+						</view>
 						
-						<u-form-item label="是否出差" prop="isTrip">
+						<view class="form-item">
+							<view class="form-label">是否出差</view>
 							<u-radio-group v-model="form.isTrip">
 								<u-radio :name="1" label="是"></u-radio>
 								<u-radio :name="0" label="否"></u-radio>
 							</u-radio-group>
-						</u-form-item>
+						</view>
 						
-						<u-form-item v-if="form.isTrip === 1" label="国内/国外" prop="workType">
+						<view v-if="form.isTrip === 1" class="form-item">
+							<view class="form-label">国内/国外</view>
 							<u-radio-group v-model="form.workType">
 								<u-radio :name="0" label="国内"></u-radio>
 								<u-radio :name="1" label="国外"></u-radio>
 							</u-radio-group>
-						</u-form-item>
+						</view>
 						
-						<u-form-item label="请选择项目" prop="projectId">
-							<u-select
+						<view class="form-item">
+							<view class="form-label">请选择项目</view>
+							<uni-data-select
 								v-model="form.projectId"
-								:list="projectList"
+								:localdata="projectList"
 								placeholder="请选择项目"
-								label-name="projectName"
-								value-name="projectId"
-							></u-select>
-						</u-form-item>
+								@change="handleProjectChange"
+							></uni-data-select>
+						</view>
 						
-						<u-form-item label="报工内容" prop="content">
+						<view class="form-item">
+							<view class="form-label">报工内容</view>
 							<u-textarea
 								v-model="form.content"
 								placeholder="请输入报工内容"
 								:height="200"
 							></u-textarea>
-						</u-form-item>
+						</view>
 						
-						<u-form-item label="备注" prop="remark">
+						<view class="form-item">
+							<view class="form-label">备注</view>
 							<u-input v-model="form.remark" placeholder="请输入备注"></u-input>
-						</u-form-item>
-					</u-form>
+						</view>
+					</view>
 				</scroll-view>
 				
 				<view class="popup-footer">
@@ -123,12 +118,12 @@
 					<u-button @click="cancel">取消</u-button>
 				</view>
 			</view>
-		</u-popup>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
-import { listProjectReport, addProjectReport, delProjectReport } from '@/api/oa/projectReport'
+import { listProjectReport, addProjectReport } from '@/api/oa/projectReport'
 import { listProject } from '@/api/oa/project'
 import { listDept } from '@/api/oa/dept'
 
@@ -139,18 +134,13 @@ export default {
 			buttonLoading: false,
 			// 遮罩层
 			loading: true,
-			// 选中数组
-			selectedIds: [],
-			// 全选状态
-			selectAll: false,
 			// 总条数
 			total: 0,
 			// 项目报工表格数据
 			projectReportList: [],
 			// 弹出层标题
 			title: "",
-			// 是否显示弹出层
-			showForm: false,
+
 			// 项目列表
 			projectList: [],
 			// 部门列表
@@ -209,7 +199,22 @@ export default {
 		// 获取项目列表
 		getProjectList() {
 			listProject({ pageNum: 1, pageSize: 9999 }).then(res => {
-				this.projectList = res.rows || [];
+				const rawData = res.rows || [];
+				// 按照 uni-data-select 的标准格式处理数据
+				this.projectList = rawData.map(item => ({
+					value: item.projectId,
+					text: item.projectName || '未命名项目',
+					// 保留原始数据用于提交
+					projectId: item.projectId,
+					projectName: item.projectName || '未命名项目',
+					projectNum: item.projectNum,
+					projectCode: item.projectCode
+				}));
+				console.log('处理后的项目列表数据:', this.projectList);
+				// 检查数据结构
+				if (this.projectList.length > 0) {
+					console.log('第一个项目数据:', this.projectList[0]);
+				}
 			}).catch(err => {
 				console.error('获取项目列表失败:', err);
 				uni.showToast({
@@ -232,10 +237,7 @@ export default {
 		getList() {
 			this.loading = true;
 			listProjectReport(this.queryParams).then(response => {
-				this.projectReportList = (response.rows || []).map(item => ({
-					...item,
-					selected: false
-				}));
+				this.projectReportList = response.rows || [];
 				this.total = response.total || 0;
 				this.loading = false;
 				this.getProjectList();
@@ -250,116 +252,90 @@ export default {
 			});
 		},
 		
-		// 全选/取消全选
-		handleSelectAll(value) {
-			this.projectReportList.forEach(item => {
-				item.selected = value;
-			});
-			this.updateSelectedIds();
-		},
-		
-		// 选择变化
-		handleSelectionChange() {
-			this.updateSelectedIds();
-			// 更新全选状态
-			const selectedCount = this.projectReportList.filter(item => item.selected).length;
-			this.selectAll = selectedCount === this.projectReportList.length && this.projectReportList.length > 0;
-		},
-		
-		// 更新选中ID数组
-		updateSelectedIds() {
-			this.selectedIds = this.projectReportList
-				.filter(item => item.selected)
-				.map(item => item.reportId);
-		},
-		
 		// 新增
 		handleAdd() {
 			this.reset();
-			this.showForm = true;
 			this.title = "添加项目报工";
+			this.$refs.popup.open();
 		},
 		
-		// 删除
-		handleDelete() {
-			if (!this.selectedIds.length) {
+		// 提交表单
+		submitForm() {
+			// 手动验证表单
+			if (!this.form.workPlace) {
 				uni.showToast({
-					title: '请选择要删除的数据',
+					title: '工作地点不能为空',
 					icon: 'none'
 				});
 				return;
 			}
 			
-			uni.showModal({
-				title: '确认删除',
-				content: `是否确认删除项目报工编号为"${this.selectedIds.join(',')}"的数据项？`,
-				success: (res) => {
-					if (res.confirm) {
-						this.loading = true;
-						// 批量删除
-						const deletePromises = this.selectedIds.map(id => delProjectReport(id));
-						
-						Promise.all(deletePromises).then(() => {
-							this.loading = false;
-							this.selectedIds = [];
-							this.selectAll = false;
-							uni.showToast({
-								title: '删除成功',
-								icon: 'success'
-							});
-							this.getList(); // 重新获取列表
-						}).catch(err => {
-							this.loading = false;
-							console.error('删除失败:', err);
-							uni.showToast({
-								title: '删除失败',
-								icon: 'none'
-							});
-						});
-					}
-				}
-			});
-		},
-		
-		// 提交表单
-		submitForm() {
-			this.$refs.form.validate(valid => {
-				if (valid) {
-					this.buttonLoading = true;
-					
-					// 获取选中的项目信息
-					const selectedProject = this.projectList.find(p => p.projectId === this.form.projectId);
-					
-					const submitData = {
-						...this.form,
-						projectName: selectedProject?.projectName || '',
-						projectNum: selectedProject?.projectNum || '',
-						projectCode: selectedProject?.projectCode || null
-					};
-					
-					addProjectReport(submitData).then(response => {
-						this.buttonLoading = false;
-						uni.showToast({
-							title: '新增成功',
-							icon: 'success'
-						});
-						this.showForm = false;
-						this.getList(); // 重新获取列表
-					}).catch(err => {
-						this.buttonLoading = false;
-						console.error('新增失败:', err);
-						uni.showToast({
-							title: '新增失败',
-							icon: 'none'
-						});
-					});
-				}
+			if (this.form.isTrip === undefined) {
+				uni.showToast({
+					title: '请选择是否出差',
+					icon: 'none'
+				});
+				return;
+			}
+			
+			if (this.form.isTrip === 1 && this.form.workType === undefined) {
+				uni.showToast({
+					title: '请选择出差地点',
+					icon: 'none'
+				});
+				return;
+			}
+			
+			if (!this.form.projectId) {
+				uni.showToast({
+					title: '项目不能为空',
+					icon: 'none'
+				});
+				return;
+			}
+			
+			if (!this.form.content) {
+				uni.showToast({
+					title: '报工内容不能为空',
+					icon: 'none'
+				});
+				return;
+			}
+			
+			// 验证通过，提交表单
+			this.buttonLoading = true;
+			
+			// 获取选中的项目信息
+			const selectedProject = this.projectList.find(p => p.value === this.form.projectId);
+			
+			const submitData = {
+				...this.form,
+				projectName: selectedProject?.projectName || '',
+				projectNum: selectedProject?.projectNum || '',
+				projectCode: selectedProject?.projectCode || null
+			};
+			
+			addProjectReport(submitData).then(response => {
+				this.buttonLoading = false;
+				uni.showToast({
+					title: '新增成功',
+					icon: 'success'
+				});
+				this.$refs.popup.close();
+				this.getList(); // 重新获取列表
+			}).catch(err => {
+				this.buttonLoading = false;
+				console.error('新增失败:', err);
+				uni.showToast({
+					title: '新增失败',
+					icon: 'none'
+				});
 			});
 		},
 		
 		// 取消
 		cancel() {
-			this.showForm = false;
+			this.$refs.popup.close();
 			this.reset();
 		},
 		
@@ -386,10 +362,7 @@ export default {
 			this.loadMoreStatus = 'loading';
 			
 			listProjectReport(this.queryParams).then(response => {
-				const newData = (response.rows || []).map(item => ({
-					...item,
-					selected: false
-				}));
+				const newData = response.rows || [];
 				this.projectReportList = [...this.projectReportList, ...newData];
 				this.loadMoreStatus = 'loadmore';
 			}).catch(err => {
@@ -400,6 +373,17 @@ export default {
 					icon: 'none'
 				});
 			});
+		},
+		
+		// 项目选择变化处理
+		handleProjectChange(value) {
+			console.log('项目选择变化:', value);
+			this.form.projectId = value;
+			// 获取选中的项目信息
+			const selectedProject = this.projectList.find(p => p.value === value);
+			if (selectedProject) {
+				console.log('选中的项目:', selectedProject);
+			}
 		}
 	}
 }
@@ -412,12 +396,6 @@ export default {
 	min-height: 100vh;
 }
 
-.action-buttons {
-	display: flex;
-	gap: 20rpx;
-	margin-bottom: 20rpx;
-}
-
 .table-wrapper {
 	background-color: #fff;
 	border-radius: 10rpx;
@@ -444,10 +422,6 @@ export default {
 		font-weight: bold;
 		font-size: 28rpx;
 		flex-shrink: 0; // 防止列被压缩
-		
-		&.checkbox {
-			width: 100rpx; // 复选框列宽度
-		}
 	}
 }
 
@@ -471,18 +445,18 @@ export default {
 			flex-direction: column;
 			flex-shrink: 0; // 防止列被压缩
 			word-break: break-all; // 长文本换行
-			
-			&.checkbox {
-				width: 100rpx; // 复选框列宽度
-			}
 		}
 	}
 }
 
-.form-popup {
+.form-popup-content {
 	background-color: #fff;
-	border-radius: 20rpx;
+	border-radius: 20rpx 20rpx 0 0;
 	overflow: hidden;
+	width: 100%;
+	max-height: 80vh;
+	display: flex;
+	flex-direction: column;
 	
 	.popup-header {
 		display: flex;
@@ -499,7 +473,21 @@ export default {
 	
 	.form-content {
 		padding: 30rpx;
-		max-height: 600rpx;
+		flex: 1;
+		overflow-y: auto;
+	}
+	
+	.form-container {
+		.form-item {
+			margin-bottom: 40rpx;
+			
+			.form-label {
+				font-size: 28rpx;
+				color: #333;
+				margin-bottom: 20rpx;
+				font-weight: 500;
+			}
+		}
 	}
 	
 	.popup-footer {
@@ -510,4 +498,19 @@ export default {
 		border-top: 1rpx solid #e9ecef;
 	}
 }
+
+.fab-button {
+	position: fixed;
+	bottom: 20rpx;
+	right: 20rpx;
+	width: 100rpx;
+	height: 100rpx;
+	border-radius: 50%;
+	background-color: #007bff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+	padding: 20rpx;
+}
 </style>