ybxf-security-uniapp/pagesA/fire/personnel_permissions/roleUser/roleUser.vue

<template>
	<view class="  uni-container  ">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form :model="user" ref="form1" label-width='80'>
					<u-form-item label="用户账号" prop="username">
						<u--input v-model="user.username" :disabled="true"></u--input>
					</u-form-item>
					<u-form-item label="用户姓名" prop="nickname">
						<u--input v-model="user.nickname" :disabled="true"></u--input>
					</u-form-item>
					<!-- 	<u-form-item  label="角色" prop="approleIds" 
						@click="showRole  = true; hideKeyboard()">
						<u--input v-model="user.approleIds" disabled disabledColor="#ffffff" placeholder="请选择性别"
							></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item> -->
					<u-form-item label="角色" prop="approleIds">
						<u-checkbox-group v-model="user.approleIds" placement="column" @change="checkboxChange">
							<u-checkbox  activeColor="#4CB2B6" :customStyle="{marginBottom: '8px'}" v-for="(item, index) in roleAppOptions"
								:key="index" :label="item.roleName" :name="item.id">
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</u--form>
				<u-button type="primary" text="提交" customStyle="height: 72rpx;width: 340rpx;margin-top: 100rpx;display: flex;align-items: center;justify-content: center;border-radius: 60rpx;background: #4CB2B6;" @click="submit"></u-button>
				<u-action-sheet :show="showRole " :roleAppOptions="roleAppOptions" title="请选择性别" description="如果选择保密会报错"
					@close="showRole  = false" @select="roleSelect">
				</u-action-sheet>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		listAppUserRoles, // 获得移动端用户分页
		assignAppUserRole, // 创建移动端用户角色
		getAppRolesPage, // 获得移动端角色分页
	} from '@/api/personnel_permissions';
	import {
		DICT_TYPE,
		getDictDatas
	} from "@/utils/dict";
	let that = null;
	export default {
		data() {
			return {
				user: {
					id: undefined,
					deptId: undefined,
					username: undefined,
					nickname: undefined,
				},
				showRole: false,
				rules: {
					'username': {
						// type: 'string',
						required: true,
						message: '用户名称不能为空',
						trigger: ['blur']
					},
					// 'nickname': {
					// 	// type: 'string',
					// 	required: true,
					// 	message: '用户昵称不能为空',
					// 	trigger: ['blur']
					// },
				},
				roleAppOptions: []
			}
		},
		onLoad(option) {
			that = this
			let str = decodeURIComponent(option.val)
			if (str != "undefined") {
				that.user = JSON.parse(str);
				this.getUser(that.user.id);
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		onShow() {},
		methods: {
			sexTrans(val) {
				let eduStr = ''
				this.roleAppOptions.map(i => {
					if (i.value == val) {
						eduStr = i.name
					}
				})
				return eduStr
			},
			async getUser(id) {
				// 获得角色列表
				getAppRolesPage({
					pageNo: 1,
					pageSize: 10,
				}).then(response => {
					// 处理 roleAppOptions 参数
					this.roleAppOptions = [];
					this.roleAppOptions.push(...response.data.list);
				});
				// 获得用户拥有的角色集合
				await listAppUserRoles({
					id: id
				}).then(response => {
					// 设置选中 
					this.user.approleIds = []
					var approleIds = response.data ? response.data : [];
					approleIds.map(i => {
						this.user.approleIds.push(i.id)
					})
					this.$forceUpdate()
				})
			},
			checkboxChange(e) {
				this.user.approleIds = e
			},
			roleSelect(e) {
				this.user.approleIds = e.name
				this.user.sex = e.id
				this.$refs.form1.validateField('userInfo.sex')
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					// uni.$u.toast('校验通过') 
					if (this.user.id !== undefined) {
						assignAppUserRole({
							userId: this.user.id,
							roleIds: this.user.approleIds,
						}).then(response => {
							this.$tab.navigateBack('/pagesA/fire/personnel_permissions/index')
						});
					}
				}).catch(errors => {
					console.log(errors);
					// uni.$u.toast('校验失败')/
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.uni-container {
		height: 100%;
		padding: 20px;
		background: #f5f7f9;
	}
	page {
		height: 100%;
		background-color: #f5f7f9;
		position: relative;
	}
</style>