Web_TracerMethodology/pages/role-switching/role-switching.vue

<template>
	<view class="role-page">
		<view class="row-box">
			<view class="role-list" v-for="(item,index) in permissionList" :key="index">
				<text class="role-name">{{item.label}}</text>
				<view class="radio-item" @click="toggleSelect(item,index)">
					<image class="icon" :src="`/static/${item.isChecked ? 'check-radio' : 'check-no'}.png`"></image>
				</view>
				<text class="nowrole" v-show="item.isNowRole" >当前角色</text>
				<text class="task-msg">{{item.todoNum}}</text>
			</view>
		</view>
		<view class="btn-confirm" @click="saveChange">
			<text class="btn-text">确定</text>
		</view>
	</view>
</template>
/**
 * 角色切换
 */
<script>
	const roleList = [
		{permission: 1, name: '管理员', msg: '个改善任务待处理'}, 
		{permission: 2, name: '查核组长', msg: '个情境待分配'},
		{permission: 3, name: '查核组员', msg: '个单位待查核'},
		{permission: 4, name: '单位负责人', msg: '个改善任务待处理'},
		{permission: 5, name: '改善者', msg: '个改善任务待处理'}
	];
	export default {
		data() {
			return {
				permissionList:[],//权限列表
				nowPermission:'',//当前权限
				oldPermission:'',//初始化选中的权限
			}
		},
		created() {
			let permissions=uni.getStorageSync('permissions');
			this.nowPermission=uni.getStorageSync('nowPermission');
			this.permissionList = permissions.map((item,index)=>{
				let match = roleList.find(i => i.permission == item.permission);
				if(match) {
					return {
						value: match.permission,
						label: match.name,
						todoNum: item.todoNum > 0 
							? (match.permission === 3 ? '今日':'') + item.todoNum + match.msg 
							: '暂无待处理',
						isNowRole:this.nowPermission==match.permission?true:false,
						isChecked:this.nowPermission==match.permission?true:false,
					}
				}
			});
			let obj = this.permissionList.find((item)=>item.isChecked);
			this.oldPermission = obj ? obj.value : '';
		},
		methods: {
			toggleSelect(item,index) {
				this.permissionList.map((item,index)=>{
					item.isChecked=false;
				});
				this.permissionList[item.value-1].isChecked=true;
			},
			saveChange(){
				let obj = this.permissionList.find((item)=>item.isChecked);
				if(obj) {
					if(obj.value === this.oldPermission) {
						uni.navigateTo({url: '/pages/home/home'});
						return;
					};
					this.$store.dispatch({
						type: 'roleSwitching/commActions',
						payload: {
							key: 'updatePermission',
							data: {
								permission: obj.value,
							}
						}
					}).then((data)=>{
						if(data){
							uni.navigateTo({url: '/pages/home/home'});
						}
					});
				}
			}
		},
	}
</script>

<style lang="less">
	.role-page {
		height: 100%;

		.row-box {
			.role-list {
				height: 107.5rpx;
				width: 750rpx;
				background: #FFFFFF;
				border-bottom: 0.62rpx solid #DADEE6;
				position: relative;
				.role-name {
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Bold, SourceHanSansCN;
					font-weight: bold;
					color: #292C33;
					float: left;
					margin-left: 25rpx;
					margin-top: 25rpx;
				}
				
				.nowrole {
					float: right;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #7A8599;
					margin-top: 42.5rpx;
					margin-right: 25rpx;
				}
				
				.radio-item {
					float: right;
					margin-right: 25rpx;
					margin-top: 41.25rpx;
				
					.icon {
						width: 25rpx;
						height: 25rpx;
					}
				}
				
				.task-msg {
					font-size: 20rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #7A8599;
					position: absolute;
					top: 62.5rpx;
					left: 25rpx;
				}
					
			}
		}

		.btn-confirm {
			width: 750rpx;
			height: 75rpx;
			background: #3377FF;
			position: absolute;
			bottom: 0rpx;

			.btn-text {
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 75rpx;
				margin-left: 352.5rpx;
			}
		}
	}
</style>