threeonecheck_web/pages/hiddendanger/assignment.vue

<template>
	<view class="padding page">
		<view class="padding radius bg-white">
			<view class="flex margin-bottom">
				<view class="text-gray">整改人员</view>
				<view class="text-red">*</view>
			</view>
			<view class="picker-input" @click="showUserPicker = true">
				<text :class="selectedUser ? '' : 'text-gray'">{{ selectedUser || '请选择整改人员' }}</text>
			</view>
			<up-picker 
				:show="showUserPicker" 
				:columns="userColumns" 
				@confirm="onUserConfirm"
				@cancel="showUserPicker = false"
				@close="showUserPicker = false"
			></up-picker>
			
			<view class="flex margin-bottom margin-top">
				<view class="text-gray">整改期限</view>
				<view class="text-red">*</view>
			</view>
			<view class="picker-input" @click="showDatePicker = true">
				<text :class="selectedDate ? '' : 'text-gray'">{{ selectedDate || '请选择整改期限' }}</text>
			</view>
			<up-datetime-picker 
				:show="showDatePicker" 
				v-model="dateValue" 
				mode="datetime"
				@confirm="onDateConfirm"
				@cancel="showDatePicker = false"
				@close="showDatePicker = false"
			></up-datetime-picker>
			
			<view class="btn-group margin-top-xl">
				<button class="btn-cancel" @click="handleCancel">取消</button>
				<button class="btn-confirm bg-blue" @click="handleSubmit">确认</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getDepartmentPersonUsers,assignHiddenDanger } from '@/request/api.js';
	
	// 页面参数
	const hazardId = ref('');
	const assignId = ref('');
	
	// 整改人员选择
	const showUserPicker = ref(false);
	const selectedUser = ref('');
	const selectedUserId = ref('');
	const userColumns = ref([['暂无数据']]);
	const userList = ref([]); // 存储完整用户数据
	
	// 整改期限选择
	const showDatePicker = ref(false);
	const dateValue = ref(Date.now());
	const selectedDate = ref('');
	
	// 获取部门人员列表
	const fetchDeptUsers = async () => {
		try {
			const res = await getDepartmentPersonUsers();
			if (res.code === 0 && res.data) {
				const users = [];
				res.data.forEach(dept => {
					if (dept.users && dept.users.length > 0) {
						dept.users.forEach(user => {
							users.push({
								id: String(user.userId),
								name: `${user.nickName}（${dept.deptName}）`
							});
						});
					}
				});
				userList.value = users;
				// 转换为 picker 需要的格式
				userColumns.value = [users.map(u => u.name)];
				console.log('整改人员列表:', users);
			}
		} catch (error) {
			console.error('获取部门人员失败:', error);
		}
	};
	
	// 人员选择确认
	const onUserConfirm = (e) => {
		console.log('选择的人员:', e);
		if (e.value && e.value.length > 0) {
			selectedUser.value = e.value[0];
			// 找到对应的用户ID
			const user = userList.value.find(u => u.name === e.value[0]);
			if (user) {
				selectedUserId.value = user.id;
			}
		}
		showUserPicker.value = false;
	};
	
	// 日期时间选择确认
	const onDateConfirm = (e) => {
		console.log('选择的日期时间:', e);
		const date = new Date(e.value);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		const hours = String(date.getHours()).padStart(2, '0');
		const minutes = String(date.getMinutes()).padStart(2, '0');
		const seconds = String(date.getSeconds()).padStart(2, '0');
		selectedDate.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		showDatePicker.value = false;
	};
	
	// 取消
	const handleCancel = () => {
		uni.navigateBack();
	};
	
	// 确认提交
	const handleSubmit = async () => {
		if (!selectedUserId.value) {
			uni.showToast({ title: '请选择整改人员', icon: 'none' });
			return;
		}
		if (!selectedDate.value) {
			uni.showToast({ title: '请选择整改期限', icon: 'none' });
			return;
		}
		
		// 构建请求参数
		const params = {
			hazardId: Number(hazardId.value), // 隐患ID
			assigneeId: Number(selectedUserId.value), // 被指派人ID
			deadline: selectedDate.value, // 处理期限
			assignRemark: '' // 交办备注（可选）
		};
		
		console.log('提交数据:', params);
		
		try {
			const res = await assignHiddenDanger(params);
			if (res.code === 0) {
				uni.showToast({ title: '交办成功', icon: 'success' });
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			} else {
				uni.showToast({ title: res.msg || '交办失败', icon: 'none' });
			}
		} catch (error) {
			console.error('交办失败:', error);
			uni.showToast({ title: '请求失败', icon: 'none' });
		}
	};
	
	onLoad((options) => {
		if (options.hazardId) hazardId.value = options.hazardId;
		if (options.assignId) assignId.value = options.assignId;
		fetchDeptUsers();
	});
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #EBF2FC;
	}
	
	.picker-input {
		background: #fff;
		border-radius: 8rpx;
		padding: 24rpx 20rpx;
		margin-bottom: 20rpx;
		border: 1rpx solid #F6F6F6;
		
		text {
			font-size: 28rpx;
			color: #333;
		}
	}
	
	.btn-group {
		display: flex;
		gap: 30rpx;
	}
	
	.btn-cancel {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border: 2rpx solid #2667E9;
		border-radius: 40rpx;
		background: #fff;
		color: #2667E9;
		font-size: 30rpx;
	}
	
	.btn-confirm {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
	}
</style>