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">
				<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>
	export default {
		data() {
			return {
				permissionList:[],//权限列表
				nowPermission:'',//当前权限
				selectedPermission:'',//当前选中的权限
				roleList:[
					{permission: 1, name: '管理员'}, 
					{permission: 2, name: '查核组长'},
					{permission: 3, name: '查核组员'},
					{permission: 4, name: '单位负责人'},
					{permission: 5, name: '改善者'}
				]
			}
		},
		created() {
			let permissions=uni.getStorageSync('permissions');
			this.nowPermission=uni.getStorageSync('nowPermission');
			this.permissionList=permissions.map((item,index)=>{
				let match=this.roleList.find(i => i.permission == item.permission);
				return {
					value:match.permission,
					label:match.name,
					todoNum:item.todoNum>0?item.todoNum+'个任务待处理':'暂无待处理',
					isNowRole:this.nowPermission==match.permission?true:false,
					isChecked:this.nowPermission==match.permission?true:false,
				}
			});
		},
		methods: {
			toggleSelect(item,index) {
				this.permissionList.map((item,index)=>{
					item.isChecked=false;
				});
				this.permissionList[item.value-1].isChecked=true;
				this.selectedPermission=item.value;
			},
			saveChange(){
				this.$store.dispatch({
					type: 'roleSwitching/commActions',
					payload: {
						key: 'updatePermission',
						data: {
							permission: this.selectedPermission,
						}
					}
				}).then((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>