rtliveCompany/pages/auth/register.vue

<template>
	<view class="setting-page">
		<Watermark  />
		<view class="content">
			<view class="info-block">
				<view class="info-title">组织归属</view>
				<view class="info-item">
					<view class="title"><text class="required">*</text>公司</view>
					<view class="picker" @click="showPicker('company')">
						<view class="picker-text">{{ selectedCompanyName || '请选择公司' }}<image class="icon"
								src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_expand.png"
								mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="info-item">
					<view class="title"><text class="required">*</text>部门</view>
					<view class="picker" @click="showPicker('dept')">
						<view class="picker-text">{{ selectedDeptName || '请选择部门' }}<image class="icon"
								src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_expand.png"
								mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="info-block">

				<view class="info-title">账号信息</view>
				<!-- <view class="info-item">
					<view class="title"><text class="required">*</text>用户账号</view>
					<input class="input-field code-input" type="text" v-model="formData.userName" placeholder="请输入用户账号（登录名）" />
				</view>
				<view class="info-item">
					<view class="title"><text class="required">*</text>用户名称</view>
					<input class="input-field code-input" type="text" v-model="formData.nickName" placeholder="请输入名称" />
				</view> -->
				<!-- <view class="info-item">
					<view class="title"><text class="required">*</text>手机号码</view>
					<input class="input-field code-input" type="text" v-model="formData.phonenumber" placeholder="请输入手机号" />
				</view> -->
				<view class="info-item">
					<view class="title"><text class="required"></text>用户邮箱</view>
					<input class="input-field code-input" type="text" v-model="formData.email" placeholder="请输入邮箱（可选）" />
				</view>
				<view class="info-item">
					<view class="title"><text class="required">*</text>身份证号</view>
					<input class="input-field code-input" type="text" v-model="formData.idCard" placeholder="请输入身份证号" />
				</view>
				<view class="info-item">
					<view class="title"><text class="required">*</text>用户性别</view>
					<view class="radio-group">
						<radio-group @change="onGenderChange" style="display: flex;">
							<view class="radio-item" v-for="(item, index) in genderOptions" :key="index">
								<radio :value="item.value" :checked="formData.sex === item.value">{{ item.label }}
							</radio>
							</view>
						</radio-group>
					</view>
				</view>
				<!-- <view class="info-item">
					<view class="title"><text class="required">*</text>初始密码</view>
					<view class="input-wrapper">
						<input class="input-field code-input" type="text" :password="!showPassword" v-model="formData.password"
							placeholder="请输入初始密码" />
						<view class="img-box" @click="togglePassword">
							<image class="icon"
								:src="showPassword ? 'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_visible.png' : 'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_invisible.png'"
								mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="info-item">
					<view class="title"><text class="required">*</text>确认密码</view>
					<view class="input-wrapper">
						<input class="input-field code-input" type="text" :password="!showConfirmPassword"
							v-model="formData.confirmPassword" placeholder="请再次输入初始密码" />
						<view class="img-box" @click="toggleConfirmPassword">
							<image class="icon"
								:src="showConfirmPassword ? 'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_visible.png' : 'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_invisible.png'"
								mode="aspectFill"></image>
						</view>
					</view>
				</view> -->
			</view>
			<view class="info-block">
				<view class="info-title">权限与状态</view>
				<view class="info-item">
					<view class="title"><text class="required">*</text>用户类型</view>
					<view class="picker" @click="showPicker('userType')">
						<view class="picker-text">{{ formData.userType && userTypeOptions.length > 0 &&
							selectedUserTypeIndex < userTypeOptions.length ?
							userTypeOptions[selectedUserTypeIndex].label : '请选择用户类型' }}<image class="icon"
								src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_expand.png"
								mode="widthFix">
								</image>
						</view>
					</view>
				</view>
				<view class="info-item">
					<view class="title"><text class="required">*</text>账号状态</view>
					<view class="radio-group">
						<radio-group @change="onStatusChange" style="display: flex;">
							<view class="radio-item" v-for="(item, index) in statusOptions" :key="index">
								<radio :value="item.value" :checked="formData.status === item.value">{{ item.label }}
								</radio>
							</view>
						</radio-group>
					</view>
				</view>
				<view class="info-item">
					<view class="title"><text class="required">*</text>绑定产品</view>
					<view class="picker" @click="showPicker('product')">
						<view class="picker-text">{{ selectedProducts.length > 0 ? getSelectedProductNames() : '请选择产品'
							}}<image class="icon"
								src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_expand.png"
								mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="info-item">
					<view class="title"><text class="required">*</text>绑定角色</view>
					<view class="picker" @click="showPicker('role')">
						<view class="picker-text">{{ selectedRoles.length > 0 ? getSelectedRoleNames() : '请选择角色' }}
							<image class="icon"
								src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_expand.png"
								mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="info-item norow">
					<view class="title">备注</view>
					<textarea class="input-field code-input" type="text" v-model="formData.remark" placeholder="请输入备注" />
				</view>
			</view>
		</view>


		<view class="btn-box">
			<view class="confirm" @click="confirm">确认</view>
		</view>

		<!-- 自定义picker组件 -->
		<u-picker :title='pickerTitle' :show="showPickerVisible" confirmColor='#576B95' ref="uPicker"
			:columns="pickerData" @confirm="handlePickerConfirm" @cancel="handlePickerCancel">
		</u-picker>
	</view>
</template>

<script>
import { getCompanyUser, deptList, companyList, getCompanyRoleList, getProductList } from '@/api/user.js'
export default {
	data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				formData: {
					companyId: '',//公司id
					deptId: '',//部门id
					// userName: '',//用户账号
					// nickName: '',//用户名称
					// phonenumber: '',//手机号
					email: '',//邮箱
					idCard: '',//身份证号
					// password: '',//初始密码
					// confirmPassword: '',//确认初始密码
					sex: '',//性别
					status: '',//账号状态
					userType: '',//用户类型
					productCode: '',//绑定产品
					roleIds: '',//绑定角色
					remark: '',//备注	
					userId: '',//用户id
				},
				companyList: [],
				
				selectedCompanyIndex: 0,
				// 部门选项
				deptOptions: [],
				selectedDept: '',
				selectedDeptIndex: 0,
				// picker相关
				showPickerVisible: false,
				pickerTitle: '默认标题',
				pickerData: [],
				originalPickerData: null,
				currentPickerType: '',
				// 组织信息
				companyName: '',
				// 密码显示状态
				showPassword: false,
				showConfirmPassword: false,
				// 性别选项
				genderOptions: [
					{ value: '0', label: '男' },
					{ value: '1', label: '女' }
				],
				// 状态选项
				statusOptions: [
					{ value: '0', label: '启用' },
					{ value: '1', label: '禁用' }
				],
				// 用户类型选项
				userTypeList: [],
				selectedUserTypeId: '',
				userTypeOptions: [
					{ value: '0', label: '系统用户' }
				],
				selectedUserTypeIndex: 0,
				// 产品选项
				productOptions: [],
				selectedProducts: [],
				// 角色选项
				roleOptions: [

				],
				selectedRoles: [],
				// 选中的公司名称
				selectedCompanyName: '',
				// 选中的部门名称
				selectedDeptName: ''
			}
		},
	onLoad(options) {
		console.log("跳转注册页面", options)
		
		// this.phone = options.phone || '';
	},
	onShow() {
		// this.getCompanyUserList();
	},
	methods: {
		getProductList() {
			return new Promise((resolve, reject) => {
				if (!this.formData.companyId) {
					uni.showToast({
						icon: 'none',
						title: "请选择公司",
						duration: 2000
					});
					reject('请选择公司');
					return;
				}
				let params = {
					companyId: this.formData.companyId || '',
					status: 1,
				}
				getProductList(params).then(res => {
					if (res.code == 200) {
						// 处理接口返回的数据结构，使用rows作为数据源
						const productData = res.data || [];
						// 转换为所需的格式：显示productName，值为productCode
						this.productOptions = productData.map(item => ({
							value: item.productCode,
							label: item.productName
						}));
						resolve(productData);
					} else {
						reject(res.msg || '获取产品列表失败');
					}
				}).catch(error => {
					reject('网络错误，请稍后重试');
				});
			});
		},
		getCompanyRole() {
			return new Promise((resolve, reject) => {
				if (!this.formData.companyId) {
					uni.showToast({
						icon: 'none',
						title: "请选择公司",
					});
					reject('请选择公司');
					return;
				}
				let params = {
					companyId: this.formData.companyId || '',
					status: 0,
				}
				getCompanyRoleList(params)
					.then(res => {
						if (res.code == 200) {
							this.userTypeList = res.rows || [];
							this.userTypeOptions = this.userTypeList.map(item => ({
								value: item.roleId.toString(),
								label: item.roleName
							}));
							// 同时更新roleOptions
							this.roleOptions = this.userTypeList.map(item => ({
								value: item.roleId.toString(),
								label: item.roleName
							}));
							resolve(res.rows || []);
						} else if (res.code == 500) {
							// 当接口返回500时，显示错误信息但不可选
							this.roleOptions = [{
								value: '-1',
								label: res.msg || '获取角色失败'
							}];
							this.selectedRoles = [];
							resolve([]);
						}
					})
					.catch(error => {
						// 网络错误时也显示错误信息
						this.roleOptions = [{
							value: '-1',
							label: '网络错误，请稍后重试'
						}];
						this.selectedRoles = [];
						resolve([]);
					});
			});
		},deptList() {
			return new Promise((resolve, reject) => {
				let params = {
					companyId: this.formData.companyId || '',
					pageNum: 1,
					pageSize: 10,
				}
				deptList(params).then(res => {
					if (res.code == 200) {
						// 转换部门数据格式
						this.deptOptions = (res.rows || []).map(item => ({
							value: item.deptId.toString(),
							label: item.deptName,
							deptId: item.deptId
						}));
						resolve(this.deptOptions);
					} else {
						reject(res.msg || '获取部门列表失败');
					}
				}).catch(error => {
					reject('网络错误，请稍后重试');
				});
			});
		},
		fetchCompanyList() {
					console.log("调用公司数据接口")

			return new Promise((resolve, reject) => {
				companyList().then(res => {
					if (res.code == 200) {
					console.log("成功调用公司数据接口")

						this.companyList = res.rows || [];
						resolve(res.data || []);
					} else {
						reject(res.msg || '获取公司列表失败');
					}
				}).catch(error => {
					reject('网络错误，请稍后重试');
				});
			});
		},
		// 显示自定义picker
		async showPicker(type) {
			this.currentPickerType = type;
			try {
				uni.showLoading({ title: '加载中...' });

				let data = [];
				let title = '';

				// 根据不同的类型调用对应的请求方法
				if (type === 'company') {
					// 加载公司数据
					console.log("加载公司数据")
					await this.fetchCompanyList();
					data = this.companyList;
					title = '选择公司';
					// 使用 companyName 作为显示值
					this.pickerData = [data.map(item => item.companyName || '未知公司')];
				} else if (type === 'dept') {
					// 检查是否已选择公司
					if (!this.formData.companyId) {
						uni.hideLoading();
						uni.showToast({ title: '请先选择公司', icon: 'none' });
						return;
					}
					// 加载部门数据
					await this.deptList();
					data = this.deptOptions;
					title = '选择部门';
					this.pickerData = [data.map(item => item.label)];
				} else if (type === 'userType') {
					// 用户类型数据
					data = this.userTypeOptions;
					title = '选择用户类型';
					this.pickerData = [data.map(item => item.label)];
				} else if (type === 'product') {
					// 加载产品数据
					await this.getProductList();
					data = this.productOptions;
					title = '选择产品';
					this.pickerData = [data.map(item => item.label)];
				} else if (type === 'role') {
					// 加载角色数据
					await this.getCompanyRole();
					data = this.roleOptions;
					title = '选择角色';
					this.pickerData = [data.map(item => item.label)];
				}
				
				// 确保 pickerData 是二维数组
				if (!Array.isArray(this.pickerData) || !Array.isArray(this.pickerData[0])) {
					uni.hideLoading();
					uni.showToast({ title: '数据格式错误', icon: 'none' });
					return;
				}

				// 保存原始数据，用于后续获取详细信息
				this.originalPickerData = data;
				this.pickerTitle = title;

				uni.hideLoading();
				this.showPickerVisible = true;
			} catch (error) {
				uni.hideLoading();
			}
		},

		
		onGenderChange(e) {
			this.formData.sex=e.detail.value;
		},
		onStatusChange(e) {
			this.formData.status= e.detail.value;
		},

		// 获取选中的产品名称
		getSelectedProductNames() {
			return this.productOptions
				.filter(item => this.selectedProducts.includes(item.value))
				.map(item => item.label)
				.join(', ');
		},
		// 获取选中的产品代码，用逗号相连
		getSelectedProductCodes() {
			return this.selectedProducts.join(', ');
		},
		// 获取选中的角色名称
		getSelectedRoleNames() {
			return this.roleOptions
				.filter(item => this.selectedRoles.includes(item.value))
				.map(item => item.label)
				.join(', ');
		},
		// 切换密码显示状态
		togglePassword() {
			this.formData.showPassword = !this.formData.showPassword;
		},
		// 切换确认密码显示状态
		toggleConfirmPassword() {
			this.formData.showConfirmPassword = !this.formData.showConfirmPassword;
		},
				// 处理picker确认
		handlePickerConfirm(e) {
			if (e.value && e.value.length > 0) {
				const selectedText = e.value[0];
				let selectedItem;

				// 根据不同类型处理选中项
				switch (this.currentPickerType) {
					case 'company':
					// 找到选中的公司
					selectedItem = this.originalPickerData.find(item => 
						item.companyName === selectedText
					);
					if (selectedItem) {
						this.formData.companyId = selectedItem.companyId;
						this.selectedCompanyIndex = this.companyList.indexOf(selectedItem);
						this.selectedCompanyName = selectedText;
						// 重置部门选择
						this.formData.deptId = '';
						this.selectedDept = '';
						this.selectedDeptName = '';
						// 清空部门选项，下次选择部门时会重新加载
						this.deptOptions = [];
					}
					break;
					case 'dept':
						// 找到选中的部门
						selectedItem = this.originalPickerData.find(item => item.label === selectedText);
						if (selectedItem) {
							this.formData.deptId = selectedItem.deptId;
							this.selectedDept = selectedItem.value;
							this.selectedDeptIndex = this.deptOptions.indexOf(selectedItem);
							this.selectedDeptName = selectedText;
						}
						break;
					case 'userType':
						// 找到选中的用户类型
						selectedItem = this.originalPickerData.find(item => item.label === selectedText);
						if (selectedItem) {
							this.formData.userType = selectedItem.label;
							this.selectedUserTypeIndex = this.userTypeOptions.indexOf(selectedItem);
						}
						break;
					case 'product':
						// 找到选中的产品并切换选中状态
						selectedItem = this.originalPickerData.find(item => item.label === selectedText);
						if (selectedItem) {
							const index = this.selectedProducts.indexOf(selectedItem.value);
							if (index > -1) {
								this.selectedProducts.splice(index, 1);
							} else {
								this.selectedProducts.push(selectedItem.value);
							}
						}
						break;
					case 'role':
						// 找到选中的角色并切换选中状态
						selectedItem = this.originalPickerData.find(item => item.label === selectedText);
						if (selectedItem) {
							console.log("选中的角色:",selectedItem);
							
							// 当只有一个选项且值为-1时（错误状态），不允许选择
							if (this.roleOptions.length === 1 && this.roleOptions[0].value === '-1') {
								return;
							}
							const index = this.selectedRoles.indexOf(selectedItem.value);
							if (index > -1) {
								this.selectedRoles.splice(index, 1);
							} else {
								this.selectedRoles.push(selectedItem.value);
							}
						}
						break;
				}
			}
			this.showPickerVisible = false;
		},
		// 处理picker取消
		handlePickerCancel() {
			this.showPickerVisible = false;
		},
		// 确认提交
		async confirm() {
			// 表单验证
			if (!this.formData.companyId) {
				uni.showToast({ title: '请选择公司', icon: 'none' });
				return;
			}
			if (!this.selectedDept) {
				uni.showToast({ title: '请选择部门', icon: 'none' });
				return;
			}
			if (!this.formData.idCard) {
				uni.showToast({ title: '请输入身份证号', icon: 'none' });
				return;
			}
			// if (!this.formData.userName) {
			// 	uni.showToast({ title: '请输入用户账号', icon: 'none' });
			// 	return;
			// }
			// if (!this.formData.nickName) {
			// 	uni.showToast({ title: '请输入用户名称', icon: 'none' });
			// 	return;
			// }
			// if (!this.formData.phonenumber) {
			// 	uni.showToast({ title: '请输入手机号码', icon: 'none' });
			// 	return;
			// }
			// if (!this.formData.password) {
			// 	uni.showToast({ title: '请输入初始密码', icon: 'none' });
			// 	return;
			// }
			// if (this.formData.password !== this.formData.confirmPassword) {
			// 	uni.showToast({ title: '两次输入的密码不一致', icon: 'none' });
			// 	return;
			// }
			if (!this.formData.userType) {
				uni.showToast({ title: '请选择用户类型', icon: 'none' });
				return;
			}
			this.formData.productCode = this.getSelectedProductCodes();
			console.log("产品代码:", this.formData.productCode);
			if (!this.formData.productCode) {
				uni.showToast({ title: '请选择绑定产品', icon: 'none' });
				return;
			}
			// 准备提交数据
			this.formData.deptId = this.selectedDept;
			this.formData.productCode = this.getSelectedProductCodes();
			this.formData.roleIds = this.selectedRoles;
			this.formData.userType = this.selectedUserType;
			// this.formData.sex = this.selectedGender;
			this.formData.status = this.selectedStatus;
			this.formData.userId = this.userInfo.userId;

			// 打印提交数据，检查是否所有字段都已正确设置
			console.log('提交数据:', this.formData);

			try {
				uni.showLoading({ title: '注册中...' });
				
				// 提交数据
				const res = await getCompanyUser(this.formData);
				
				uni.hideLoading();
				
				if (res.code == 200) {
					uni.showToast({ title: '注册成功', icon: 'success' });
					// 注册成功后跳转到首页
					console.log('准备跳转到首页');
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/home/index',
							success: function(res) {
								console.log('跳转成功:', res);
							},
							fail: function(err) {
								console.log('跳转失败:', err);
							}
						});
					}, 1000);
				} else {
					uni.showToast({ title: res.msg || '注册失败', icon: 'none' });
				}
			} catch (error) {
				uni.hideLoading();
				uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' });
				console.error('注册失败:', error);
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.setting-page {
	background: #F5F6FA;
	min-height: 100vh;

	.content {
		.info-block {
			background: #fff;
			margin: 20rpx;
			border-radius: 16rpx;
			padding: 32rpx;

		}

		.info-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			margin-bottom: 24rpx;
			padding-left: 8rpx;
			border-left: 6rpx solid #388BFF;
			margin-top: 32rpx;
		}

		.info-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 32rpx;
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid #E5E5E5;

			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
			}

			.title {
				width: 200rpx;
				font-size: 28rpx;
				color: #333333;
				display: block;

				.required {
					color: #FF3B30;
					margin-right: 8rpx;
				}
			}

			.icon {
				width: 32rpx;
				height: 32rpx;
			}

			.input-field {
				height: 80rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				color: #333333;
				padding: 0 20rpx;
				border-radius: 8rpx;
				box-sizing: border-box;
			}

			.code-input {
				width: 100%;
			}

			textarea.input-field {
				height: 120rpx;
				padding: 20rpx;
				resize: none;
			}

			.img-box {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);

				.icon {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.get-code-btn {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 28rpx;
				font-weight: 500;
				color: #157CF8;
				white-space: nowrap;
			}

			.picker {
				width: 100%;
			}

			.picker-text {
				width: 100%;
				height: 80rpx;
				font-size: 28rpx;
				color: #333333;
				padding: 0 20rpx;
				border-radius: 8rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.radio-group {
				display: flex;
				margin-top: 8rpx;

				.radio-item {
					margin-right: 48rpx;
					font-size: 28rpx;
					color: #333333;

					radio {
						margin-right: 8rpx;
					}
				}
			}

			.input-wrapper {
				position: relative;
				width: 100%;
			}
		}

		.norow {
			flex-direction: column;
			align-items: flex-start;
		}
	}

	.btn-box {
		padding: 64upx 32upx;

		.confirm {
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-family: PingFang SC;
			font-size: 32upx;
			color: #FFFFFF;
			background: #388BFF;
			border-radius: 44upx;
			margin: 0 20rpx;
		}
	}
}
</style>