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

pages/workbench/construction/detail.vue

@@ -74,11 +74,6 @@
 								</view>
 								<view class="table-cell">{{ item.remark || '-' }}</view>
 								<view class="table-cell">
-									<u-button 
-										type="primary" 
-										size="mini" 
-										@click="handleUpdate(item)"
-									>修改</u-button>
 									<u-button 
 										type="error" 
 										size="mini" 
@@ -99,24 +94,21 @@
 			@loadmore="loadMore"
 		></u-loadmore>
 
-		<!-- 新增/修改弹窗 -->
-		<u-popup v-model="showForm" mode="center" width="600rpx" height="800rpx">
+		<!-- 新增弹窗 -->
+		<uni-popup ref="formPopup" type="bottom" :mask-click="false">
 			<view class="form-popup">
 				<view class="popup-header">
-					<text class="popup-title">{{ title }}</text>
+					<text class="popup-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 :model="form" ref="form" label-position="top" :rules="rules">
 						<u-form-item label="设备编号" prop="deviceCode">
 							<u-input v-model="form.deviceCode" placeholder="请输入设备唯一编号"></u-input>
 						</u-form-item>
-						
 						<u-form-item label="设备类别" prop="category">
 							<u-input v-model="form.category" placeholder="请输入设备类别"></u-input>
 						</u-form-item>
-						
 						<u-form-item label="详情内容" prop="reportDetail">
 							<u-textarea
 								v-model="form.reportDetail"
@@ -124,30 +116,25 @@
 								:height="200"
 							></u-textarea>
 						</u-form-item>
-						
 						<u-form-item label="图像" prop="ossIds">
-							<u-upload
-								v-model="form.ossIds"
-								:file-list="fileList"
-								@after-read="afterRead"
-								@delete="deleteFile"
-								:max-count="9"
-								multiple
-							></u-upload>
+							<view>
+								<u-button @click="handleChooseAndUpload">选择/拍照并上传图片</u-button>
+								<view class="image-list" v-if="fileList.length">
+									<image v-for="(item, idx) in fileList" :key="idx" :src="item.url" style="width: 80px; height: 80px; margin: 8px; border-radius: 8px;" />
+								</view>
+							</view>
 						</u-form-item>
-						
 						<u-form-item label="备注" prop="remark">
 							<u-input v-model="form.remark" placeholder="请输入备注"></u-input>
 						</u-form-item>
 					</u-form>
 				</scroll-view>
-				
 				<view class="popup-footer">
 					<u-button type="primary" @click="submitForm" :loading="buttonLoading">确定</u-button>
 					<u-button @click="cancel">取消</u-button>
 				</view>
 			</view>
-		</u-popup>
+		</uni-popup>
 
 		<!-- 图片详情抽屉 -->
 		<u-popup v-model="imageDrawer" mode="right" width="600rpx" height="100%">
@@ -174,7 +161,8 @@
 </template>
 
 <script>
-import { listReportDetail, addReportDetail, delReportDetail, getReportDetail, updateReportDetail } from '@/api/oa/reportDetail'
+import { listReportDetail, addReportDetail, delReportDetail } from '@/api/oa/reportDetail'
+import { uploadImage } from '@/api/common/upload'
 
 export default {
 	data() {
@@ -193,10 +181,15 @@ export default {
 			total: 0,
 			// 汇报详情表格数据
 			reportDetailList: [],
-			// 弹出层标题
-			title: "",
-			// 是否显示弹出层
-			showForm: false,
+					// 设备类别选项
+		categoryOptions: [
+			{ label: '挖掘机', value: '挖掘机' },
+			{ label: '推土机', value: '推土机' },
+			{ label: '装载机', value: '装载机' },
+			{ label: '起重机', value: '起重机' },
+			{ label: '混凝土泵车', value: '混凝土泵车' },
+			{ label: '其他', value: '其他' }
+		],
 			// 图片抽屉
 			imageDrawer: false,
 			// 查询参数
@@ -229,6 +222,9 @@ export default {
 				reportDetail: [
 					{ required: true, message: "汇报详情内容不能为空", trigger: "blur" }
 				],
+				ossIds: [
+					{ required: true, message: "请上传图片", trigger: "change" }
+				]
 			}
 		}
 	},
@@ -256,6 +252,14 @@ export default {
 		};
 		
 		this.getList();
+		
+		if (this.form.ossIds) {
+			this.fileList = this.form.ossIds.split(',').map(url => ({
+				url,
+				status: 'success',
+				message: '上传成功'
+			}));
+		}
 	},
 	methods: {
 		/** 查询汇报详情列表 */
@@ -300,14 +304,13 @@ export default {
 
 		// 取消按钮
 		cancel() {
-			this.showForm = false;
+			this.$refs.formPopup.close();
 			this.reset();
 		},
 
 		// 表单重置
 		reset() {
 			this.form = {
-				detailId: undefined,
 				summaryId: this.queryParams.summaryId,
 				deviceCode: undefined,
 				category: undefined,
@@ -341,77 +344,44 @@ export default {
 		/** 新增按钮操作 */
 		handleAdd() {
 			this.reset();
-			this.showForm = true;
-			this.title = "添加施工进度汇报详情";
-		},
-
-		/** 修改按钮操作 */
-		handleUpdate(row) {
-			this.loading = true;
-			this.reset();
-			const id = row.detailId;
-			getReportDetail(id).then(response => {
-				this.loading = false;
-				this.form = response.data || {};
-				// 处理图片文件列表
-				if (this.form.ossIds) {
-					this.fileList = this.form.ossIds.split(',').map((url, index) => ({
-						url: url,
-						status: 'success',
-						message: '上传成功'
-					}));
-				}
-				this.showForm = true;
-				this.title = "修改施工进度汇报详情";
-			}).catch(() => {
-				this.loading = false;
-			});
+			this.$refs.formPopup.open();
 		},
 
 		/** 提交按钮 */
 		submitForm() {
-			this.$refs.form.validate(valid => {
-				if (valid) {
-					this.buttonLoading = true;
-					// 处理图片数据
-					if (this.fileList.length > 0) {
-						this.form.ossIds = this.fileList.map(file => file.url).join(',');
-					}
-					
-					if (this.form.detailId != null) {
-						updateReportDetail(this.form).then(response => {
-							uni.showToast({
-								title: '修改成功',
-								icon: 'success'
-							});
-							this.showForm = false;
-							this.getList();
-						}).catch(() => {
-							uni.showToast({
-								title: '修改失败',
-								icon: 'error'
-							});
-						}).finally(() => {
-							this.buttonLoading = false;
-						});
-					} else {
-						addReportDetail(this.form).then(response => {
-							uni.showToast({
-								title: '新增成功',
-								icon: 'success'
-							});
-							this.showForm = false;
-							this.getList();
-						}).catch(() => {
-							uni.showToast({
-								title: '新增失败',
-								icon: 'error'
-							});
-						}).finally(() => {
-							this.buttonLoading = false;
-						});
-					}
-				}
+			console.log('[submitForm] called');
+			// 设备编号校验
+			if (!this.form.deviceCode) {
+				uni.showToast({ title: '设备唯一编号不能为空', icon: 'none' });
+				return;
+			}
+			// 设备类别校验
+			if (!this.form.category) {
+				uni.showToast({ title: '设备类别不能为空', icon: 'none' });
+				return;
+			}
+			// 详情内容校验
+			if (!this.form.reportDetail) {
+				uni.showToast({ title: '汇报详情内容不能为空', icon: 'none' });
+				return;
+			}
+			// 图片校验
+			if (!this.form.ossIds) {
+				uni.showToast({ title: '请上传图片', icon: 'none' });
+				return;
+			}
+			this.buttonLoading = true;
+			console.log('[submitForm] 手动校验通过，提交数据:', this.form);
+			addReportDetail(this.form).then(response => {
+				console.log('[submitForm] 新增成功:', response);
+				uni.showToast({ title: '新增成功', icon: 'success' });
+				this.$refs.formPopup.close();
+				this.getList();
+			}).catch((err) => {
+				console.error('[submitForm] 新增失败:', err);
+				uni.showToast({ title: '新增失败', icon: 'error' });
+			}).finally(() => {
+				this.buttonLoading = false;
 			});
 		},
 
@@ -468,24 +438,6 @@ export default {
 			});
 		},
 
-		// 文件上传后
-		afterRead(event) {
-			const { file } = event;
-			// 这里可以调用上传接口
-			// 暂时使用本地路径
-			this.fileList.push({
-				url: file.url,
-				status: 'success',
-				message: '上传成功'
-			});
-		},
-
-		// 删除文件
-		deleteFile(event) {
-			const { index } = event;
-			this.fileList.splice(index, 1);
-		},
-
 		// 加载更多
 		loadMore() {
 			if (this.loadMoreStatus === 'nomore') return;
@@ -507,6 +459,39 @@ export default {
 				this.loadMoreStatus = 'loadmore';
 				this.queryParams.pageNum -= 1;
 			});
+		},
+
+		async handleChooseAndUpload() {
+			try {
+				const { tempFilePaths } = await new Promise((resolve, reject) => {
+					uni.chooseImage({
+						count: 9,
+						sizeType: ['compressed'],
+						sourceType: ['album', 'camera'],
+						success: resolve,
+						fail: reject
+					});
+				});
+				console.log('[handleChooseAndUpload] 选择图片:', tempFilePaths);
+				const uploadResults = [];
+				for (const path of tempFilePaths) {
+					const res = await uploadImage(path);
+					uploadResults.push({ url: res.url });
+					console.log('[handleChooseAndUpload] 上传成功:', res);
+				}
+				this.fileList = uploadResults;
+				this.form.ossIds = uploadResults.map(f => f.url).join(',');
+				console.log('[handleChooseAndUpload] 最终ossIds:', this.form.ossIds);
+			} catch (e) {
+				uni.showToast({ title: '图片选择或上传失败', icon: 'none' });
+				console.error('[handleChooseAndUpload] 失败:', e);
+			}
+		},
+
+		deleteFile(event) {
+			const { index } = event;
+			this.fileList.splice(index, 1);
+			this.form.ossIds = this.fileList.map(f => f.url).join(',');
 		}
 	}
 }
@@ -564,8 +549,6 @@ export default {
 	}
 }
 
-
-
 .action-buttons {
 	display: flex;
 	gap: 20rpx;
@@ -642,33 +625,40 @@ export default {
 
 .form-popup {
 	background-color: #fff;
-	border-radius: 20rpx;
+	border-radius: 20rpx 20rpx 0 0;
 	overflow: hidden;
-	
-	.popup-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 30rpx;
-		border-bottom: 1rpx solid #e9ecef;
-		
-		.popup-title {
-			font-size: 32rpx;
-			font-weight: bold;
-		}
-	}
-	
-	.form-content {
-		padding: 30rpx;
-		max-height: 600rpx;
-	}
-	
-	.popup-footer {
-		display: flex;
-		gap: 20rpx;
-		padding: 30rpx;
-		border-top: 1rpx solid #e9ecef;
-	}
+	width: 100vw;
+	max-height: 80vh;
+	display: flex;
+	flex-direction: column;
+}
+.form-popup .popup-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 30rpx;
+	border-bottom: 1rpx solid #e9ecef;
+}
+.form-popup .popup-title {
+	font-size: 32rpx;
+	font-weight: bold;
+}
+.form-popup .form-content {
+	padding: 30rpx;
+	flex: 1;
+	overflow-y: auto;
+	min-height: 0;
+	max-height: 60vh;
+}
+.form-popup .popup-footer {
+	display: flex;
+	gap: 20rpx;
+	padding: 30rpx;
+	border-top: 1rpx solid #e9ecef;
+	background: #fff;
+	position: sticky;
+	bottom: 0;
+	z-index: 2;
 }
 
 .image-drawer {
@@ -699,4 +689,11 @@ export default {
 		}
 	}
 }
+
+.form-popup .u-form-item__label, .form-popup .u-form-item__label__text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
 </style>