ybxf-security-uniapp/pagesA/fire/personnel_permissions/menuRole/menuRole.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="roleName">
						<u--input v-model="user.roleName" :disabled="true"></u--input>
					</u-form-item>
					<u-form-item label="角色标识" prop="roleLable">
						<u--input v-model="user.roleLable" :disabled="true"></u--input>
					</u-form-item>
					<!-- 	<u-form-item  label="角色" prop="appmenusIds" 
						@click="showRole  = true; hideKeyboard()">
						<u--input v-model="user.appmenusIds" disabled disabledColor="#ffffff" placeholder="请选择性别"
							></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item> -->
					<u-form-item label="角色" prop="appmenusIds">
						<u-checkbox-group v-model="user.appmenusIds" placement="column" @change="checkboxChange">
							<u-checkbox   activeColor="#4CB2B6"  :customStyle="{marginBottom: '8px'}" v-for="(item, index) in menuAppOptions"
								:key="index" :label="item.menuName" :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 " :menuAppOptions="menuAppOptions" title="请选择性别" description="如果选择保密会报错"
					@close="showRole  = false" @select="roleSelect">
				</u-action-sheet>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getMenusByRole,  //  根据角色id获取角色下面的菜单
		assignAppRoleMenu, // 设置角色的菜单
		getAppMenusPage,  // 获得移动端菜单分页
	} from '@/api/personnel_permissions';
	import {
		DICT_TYPE,
		getDictDatas
	} from "@/utils/dict";
	let that = null;
	export default {
		data() {
			return {
				user: {
					id: undefined, 
					roleName: undefined,
					roleLable: undefined,
				},
				showRole: false,
				rules: {
					'roleName': {
						// type: 'string',
						required: true,
						message: '用户名称不能为空',
						trigger: ['blur']
					},
					'roleLable': {
						// type: 'string',
						required: true,
						message: '用户昵称不能为空',
						trigger: ['blur']
					},
				},
				menuAppOptions: []
			}
		},
		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: { 
			async getUser(id) {
				// 获得角色列表
				getAppMenusPage({
					pageNo: 1,
					pageSize: 100,
				}).then(response => {
					// 处理 menuAppOptions 参数
					this.menuAppOptions = [];
					this.menuAppOptions.push(...response.data.list);
				});
				// 获得用户拥有的角色集合
				await getMenusByRole({
					id: id
				}).then(response => {
					// 设置选中 
					this.user.appmenusIds = []
					var appmenusIds = response.data ? response.data : [];
					appmenusIds.map(i => {
						this.user.appmenusIds.push(i.id)
					})
					this.$forceUpdate()
				})
			},
			checkboxChange(e) {
				this.user.appmenusIds = e
			},
			roleSelect(e) {
				this.user.appmenusIds = 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) {
						assignAppRoleMenu({
							roleId: this.user.id,
							menusIds: this.user.appmenusIds,
						}).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 {
		padding: 20px;
	}
</style>