im-uniapp/pages/workbench/reportWork/reportWork.vue

<template>
	<view class="container">
		<!-- 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>

		<!-- 卡片列表 -->
		<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">
			<u-icon name="plus" color="#fff" size="30"></u-icon>
		</view>

		<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">
					<view class="form-container">
						<view class="form-item">
							<view class="form-label">工作地点</view>
							<view class="location-row">
								<u-input v-model="form.workPlace" placeholder="系统自动获取中" :disabled="!locationCanEdit"></u-input>
							</view>
							<view v-if="form.locationText" class="location-tip">已自动获取当前位置，无需手动填写</view>
						</view>
						<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>
						</view>
						<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>
						</view>
						<view class="form-item">
							<view class="form-label">请选择项目</view>
							<oa-project-select v-model="form.projectId" placeholder="请选择项目"></oa-project-select>
						</view>
						<view class="form-item">
							<view class="form-label">报工内容</view>
							<Quill v-model="form.content" placeholder="请输入报工内容" :height="200"></Quill>
						</view>
						<view class="form-item">
							<view class="form-label">备注</view>
							<u-input v-model="form.remark" placeholder="请输入备注"></u-input>
						</view>
					</view>
				</scroll-view>
				<view class="popup-footer">
					<u-button type="primary" @click="submitForm" :loading="buttonLoading">确定</u-button>
					<u-button @click="cancel">取消</u-button>
				</view>
			</view>
		</uni-popup>

		<ReportDetail ref="reportDetail" :detail="reportDetail"></ReportDetail>
	</view>
</template>

<script>
	import {
		listProjectReport,
		addProjectReport,
		getProjectReport
	} from '@/api/oa/projectReport'
	import {
		listProject
	} from '@/api/oa/project'
	import {
		listDept
	} from '@/api/oa/dept'
	import {
		getCityByLocation
	} from '@/api/fad/location'
	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 {
				activeTab: 'all',
				scrollHeight: 0,
				buttonLoading: false,
				locationLoading: false,
				locationCanEdit: false,
				cachedLocation: {
					city: '',
					latitude: null,
					longitude: null,
					locationText: ''
				},
				loading: true,
				total: 0,
				projectReportList: [],
				title: '',
				projectList: [],
				deptList: [],
				form: {},
				loadMoreStatus: 'loadmore',
				refreshing: false,
				reportDetail: {},
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				rules: {
					workPlace: [{
						required: true,
						message: '工作地点不能为空',
						trigger: 'blur'
					}],
					projectId: [{
						required: true,
						message: '项目不能为空',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '报工内容不能为空',
						trigger: 'blur'
					}],
					isTrip: [{
						required: true,
						message: '请选择是否出差',
						trigger: 'change'
					}],
					workType: [{
						required: true,
						message: '请选择出差地点',
						trigger: 'change',
						validator: (rule, value, callback) => {
							if (this.form.isTrip === 1 && !value && value !== 0) callback(new Error('请选择出差地点'));
							else callback();
						}
					}]
				}
			}
		},
		onLoad() {
			this.calculateScrollHeight();
			this.checkLocationPermissionAndInit();
		},
		onReady() {
			this.calculateScrollHeight();
		},
		methods: {
			calculateScrollHeight() {
				const systemInfo = uni.getSystemInfoSync();
				this.scrollHeight = systemInfo.windowHeight - 100 - 40 + 80;
			},
			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;
				});
			},
			checkLocationPermissionAndInit() {
				if (typeof uni.getSetting !== 'function') {
					this.getList();
					this.getCurrentLocation(true);
					return;
				}
				uni.getSetting({
					success: (settingRes) => {
						const auth = settingRes.authSetting || {};
						if (auth['scope.userLocation']) {
							this.getList();
							this.getCurrentLocation(true);
							return;
						}
						uni.showModal({
							title: '需要定位权限',
							content: '报工页面必须先开启定位权限才能进入。',
							confirmText: '去设置',
							cancelText: '返回',
							success: (res) => {
								if (res.confirm && typeof uni.openSetting === 'function') {
									uni.openSetting({
										success: (openRes) => {
											if (openRes.authSetting && openRes.authSetting['scope.userLocation']) {
												this.getList();
												this.getCurrentLocation(true);
											} else {
												uni.navigateBack();
											}
										},
										fail: () => uni.navigateBack()
									});
								} else {
									uni.navigateBack();
								}
							}
						});
					},
					fail: () => {
						uni.navigateBack();
					}
				});
			},
			getProjectList() {
				listProject({
					pageNum: 1,
					pageSize: 9999
				}).then(res => {
					const rawData = res.rows || [];
					this.projectList = rawData.map(item => ({
						value: item.projectId,
						text: item.projectName || '未命名项目',
						projectId: item.projectId,
						projectName: item.projectName || '未命名项目',
						projectNum: item.projectNum,
						projectCode: item.projectCode
					}));
				}).catch(() => {});
			},
			getDeptList() {
				listDept().then(res => {
					this.deptList = res.data || [];
				}).catch(() => {});
			},
			getList() {
				return new Promise((resolve, reject) => {
					this.loading = true;
					const params = {
						...this.queryParams
					};
					if (this.activeTab === 'my') {
						const oaId = uni.getStorageSync('oaId');
						if (oaId) params.userId = oaId;
					}
					listProjectReport(params).then(response => {
						this.projectReportList = this.queryParams.pageNum === 1 ? (response.rows || []) : [...this
							.projectReportList, ...(response.rows || [])
						];
						this.total = response.total || 0;
						this.loading = false;
						if (this.queryParams.pageNum > 1) this.loadMoreStatus = 'loadmore';
						this.getProjectList();
						resolve(response);
					}).catch(err => {
						this.loading = false;
						this.loadMoreStatus = 'loadmore';
						uni.showToast({
							title: '获取数据失败',
							icon: 'none'
						});
						reject(err);
					});
				});
			},
			handleAdd() {
				this.reset();
				this.title = '添加项目报工';
				if (this.cachedLocation.city) {
					this.form.city = this.cachedLocation.city;
					this.form.latitude = this.cachedLocation.latitude;
					this.form.longitude = this.cachedLocation.longitude;
					this.form.locationText = this.cachedLocation.locationText;
					this.form.workPlace = this.cachedLocation.city;
					this.locationCanEdit = false;
				} else {
					this.locationCanEdit = true;
				}
				this.$refs.popup.open();
			},
			handleCardClick(item) {
				this.getReportDetail(item.reportId);
			},
			getReportDetail(reportId) {
				this.$refs.reportDetail.open();
				getProjectReport(reportId).then(response => {
					this.reportDetail = response.data || response || {};
				}).catch(() => {
					uni.showToast({
						title: '获取详情失败',
						icon: 'none'
					});
					this.$refs.reportDetail.close();
				});
			},
			submitForm() {
				if (!this.form.workPlace) {
					uni.showToast({
						title: '工作地点不能为空',
						icon: 'none'
					});
					return;
				}
				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,
					locationText: this.form.locationText || ''
				};
				addProjectReport(submitData).then(() => {
					this.buttonLoading = false;
					uni.showToast({
						title: '新增成功',
						icon: 'success'
					});
					this.$refs.popup.close();
					this.getList();
				}).catch(() => {
					this.buttonLoading = false;
					uni.showToast({
						title: '新增失败',
						icon: 'none'
					});
				});
			},
			cancel() {
				this.$refs.popup.close();
				this.reset();
			},
			getCurrentLocation(silent = false) {
				if (this.cachedLocation.city && this.cachedLocation.latitude && this.cachedLocation.longitude) return Promise
					.resolve(this.cachedLocation);
				if (this.locationLoading) return Promise.resolve(null);
				this.locationLoading = true;
				if (typeof uni.authorize !== 'function') return this.requestLocation(silent);
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						this.requestLocation(silent);
					},
					fail: () => {
						this.locationLoading = false;
						this.locationCanEdit = true;
						if (!silent) {
							uni.showModal({
								title: '需要定位权限',
								content: '请先授权定位权限后再获取当前位置。',
								confirmText: '去设置',
								cancelText: '取消',
								success: (res) => {
									if (res.confirm && typeof uni.openSetting === 'function') {
										uni.openSetting({
											success: () => {
												this.requestLocation(silent);
											}
										});
									}
								}
							});
						}
					}
				});
			},
			requestLocation(silent = false) {
				console.log('准备获取定位')
				if (typeof uni.getLocation !== 'function') {
					this.locationLoading = false;
					this.locationCanEdit = true;
					return Promise.resolve(null);
				}
				return new Promise((resolve) => {
					uni.getLocation({
						type: 'wgs84',
						isHighAccuracy: true,
						highAccuracyExpireTime: 3000,
						success: (res) => {
							console.log('获取当前定位')
							this.locationLoading = false;
							this.locationCanEdit = false;
							this.form.latitude = res.latitude;
							this.form.longitude = res.longitude;
							this.form.locationText = `纬度：${res.latitude}, 经度：${res.longitude}`;
							this.form.workPlace = this.form.locationText;
							this.fetchCityByLocation(res.latitude, res.longitude, silent).then(resolve);
						},
						fail: (err) => {
							this.locationLoading = false;
							this.locationCanEdit = true;
							console.error('获取位置失败:', err);
							if (!silent) uni.showToast({
								title: '获取位置失败',
								icon: 'none'
							});
							resolve(null);
						}
					});
				});
			},
			fetchCityByLocation(latitude, longitude, silent = false) {
				return getCityByLocation(latitude, longitude).then(res => {
					const city = res?.msg || res?.data || '';
					console.log(res?.msg || res?.data || '')
					if (city) {
						this.cachedLocation = {
							city,
							latitude,
							longitude,
							locationText: `城市：${city}`
						};
						this.form.city = city;
						this.form.workPlace = `城市：${city}`;
						this.form.locationText = `城市：${city}`;
						this.locationCanEdit = false;
						return city;
					}
					console.log('允许编辑')
					this.locationCanEdit = true;
					if (!silent) {
						this.form.workPlace = `纬度：${latitude}, 经度：${longitude}`;
						this.form.locationText = this.form.workPlace;
						uni.showToast({
							title: '已获取定位，但未识别到城市',
							icon: 'none'
						});
					}
					return '';
				}).catch(() => {
					this.locationCanEdit = true;
					if (!silent) {
						this.form.workPlace = `纬度：${latitude}, 经度：${longitude}`;
						this.form.locationText = this.form.workPlace;
						uni.showToast({
							title: '城市解析失败',
							icon: 'none'
						});
					}
					return '';
				});
			},
			reset() {
				this.form = {
					workPlace: '',
					locationText: '',
					city: '',
					latitude: null,
					longitude: null,
					projectId: null,
					content: '',
					remark: '',
					isTrip: undefined,
					workType: undefined
				};
				this.locationCanEdit = false;
			},
			loadMore() {
				if (this.projectReportList.length >= this.total) {
					this.loadMoreStatus = 'nomore';
					return;
				}
				this.queryParams.pageNum++;
				this.loadMoreStatus = 'loading';
				this.getList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.tab-container {
		display: flex;
		background-color: #fff;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #e9ecef;

		.tab-item {
			flex: 1;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			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;
				}
			}
		}
	}

	.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;
		}
	}

	.form-popup-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		width: 100%;
		max-height: 80vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.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;
			flex: 1;
			overflow-y: auto;
			box-sizing: border-box;
		}

		.form-container {
			box-sizing: border-box;

			.form-item {
				margin-bottom: 40rpx;
				box-sizing: border-box;

				.form-label {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 20rpx;
					font-weight: 500;
				}

				.location-row {
					display: flex;
					gap: 16rpx;
					align-items: center;
				}

				.location-tip {
					font-size: 24rpx;
					color: #999;
					margin-top: 12rpx;
					line-height: 1.4;
				}
			}
		}

		.popup-footer {
			display: flex;
			justify-content: center;
			gap: 20rpx;
			padding: 30rpx;
			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;
		z-index: 999;
	}
</style>