UP

src/api/index.js

@@ -22,7 +22,14 @@ const api = {
 	user: {
 		login: {
 			url: `${config.MOCK_URL}/login`,
-			name: "登录获取用户菜单和权限",
+			name: "登录获取用户菜单和权限,全部权限",
+			get: async function(){
+				return await http.get(this.url);
+			}
+		},
+		login_demo: {
+			url: `${config.MOCK_URL}/login_user`,
+			name: "登录获取用户菜单和权限，部分权限",
 			get: async function(){
 				return await http.get(this.url);
 			}

src/views/home/index.vue

@@ -1,6 +1,16 @@
 <template>
-	<work v-if="dashboard=='1'"></work>
+	<div v-if="pageLoading">
-	<stats v-else></stats>
+		<el-main>
+			<el-card shadow="never">
+				<el-skeleton :rows="1"></el-skeleton>
+			</el-card>
+			<el-card shadow="never" style="margin-top: 15px;">
+				<el-skeleton></el-skeleton>
+			</el-card>
+		</el-main>
+	</div>
+	<work v-if="dashboard=='1'" @on-mounted="onMounted"></work>
+	<stats v-else @on-mounted="onMounted"></stats>
 </template>
 
 <script>
@@ -15,14 +25,20 @@
 		},
 		data(){
 			return {
-				dashboard: ''
+				pageLoading: true,
+				dashboard: '0'
 			}
 		},
-		mounted(){
+		created(){
 			this.dashboard = this.$TOOL.data.get("user").dashboard;
 		},
-		methods: {
+		mounted(){
 
+		},
+		methods: {
+			onMounted(){
+				this.pageLoading = false
+			}
 		}
 	}
 </script>

src/views/home/stats/index.vue

@@ -59,7 +59,7 @@
 			return {}
 		},
 		mounted(){
-
+			this.$emit('on-mounted')
 		},
 		methods: {
 

src/views/home/work/index.vue

@@ -1,9 +1,36 @@
 <template>
-	work
+	<el-main>
+		<el-alert title="根据角色配置,可让不同角色访问不同的控制台,参数值在登录成功后返回 dashboard:{type}" type="success" style="margin-bottom:20px;"></el-alert>
+		<el-row :gutter="15">
+			<el-col :span="24">
+				<el-card shadow="never" header="当前用户权限">
+					<el-tag v-if="$HAS('user.add')">user.add</el-tag>
+					<el-tag v-if="$HAS('user.edit')">user.edit</el-tag>
+					<el-tag v-if="$HAS('user.delete')">user.delete</el-tag>
+					<el-tag v-if="$HAS('list.add')">list.add</el-tag>
+					<el-tag v-if="$HAS('list.edit')">list.edit</el-tag>
+					<el-tag v-if="$HAS('list.delete')">list.delete</el-tag>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {}
+		},
+		mounted(){
+			this.$emit('on-mounted')
+		},
+		methods: {
+
+		}
+	}
 </script>
 
-<style>
+<style scoped>
+	.el-row {margin-bottom:15px;}
+	.el-tag+.el-tag {margin-left: 10px;}
 </style>

src/views/login.vue

@@ -24,7 +24,35 @@
 						<el-checkbox label="记住我" v-model="ruleForm.autologin"></el-checkbox>
 					</el-form-item>
 					<el-form-item>
-						<el-button type="primary" style="width: 100%;" @click="submitForm('ruleForm')" :loading="islogin" round>登 录</el-button>
+						<el-dropdown  style="width: 100%;">
+							<el-button type="primary" style="width: 100%;" :loading="islogin" round>登 录<i class="el-icon-arrow-down el-icon--right"></i></el-button>
+							<template #dropdown>
+								<el-dropdown-menu>
+									<el-dropdown-item @click="submitForm('ruleForm', 'admin')">
+										<div class="demo-user-item">
+											<div class="icon">
+												<el-avatar src="img/avatar.jpg"></el-avatar>
+											</div>
+											<div class="info">
+												<h2>Sakuya</h2>
+												<p>超级管理员(Administrator)</p>
+											</div>
+										</div>
+									</el-dropdown-item>
+									<el-dropdown-item @click="submitForm('ruleForm', 'user')">
+										<div class="demo-user-item">
+											<div class="icon">
+												<el-avatar src="img/avatar2.gif"></el-avatar>
+											</div>
+											<div class="info">
+												<h2>Lolowan</h2>
+												<p>普通用户(User)</p>
+											</div>
+										</div>
+									</el-dropdown-item>
+								</el-dropdown-menu>
+							</template>
+						</el-dropdown>
 					</el-form-item>
 				</el-form>
 
@@ -62,6 +90,11 @@
 
 	.login-footer {text-align: center;color: #999;margin-top: 50px;}
 
+	.demo-user-item {display: flex;align-items: center;line-height: 1;padding:10px 0;}
+	.demo-user-item .icon {margin-right: 20px;}
+	.demo-user-item .info h2 {font-size: 14px;}
+	.demo-user-item .info p {color: #666;margin-top: 6px;}
+
 	@media (max-height: 650px){
 	.login_container {position: static;transform: none;margin:50px auto;}
 	}
@@ -93,10 +126,11 @@
 			this.$TOOL.data.remove("user")
 		},
 		methods: {
-			submitForm(formName) {
+			submitForm(formName, type) {
 				this.$refs[formName].validate((valid) => {
 					if (valid) {
-						this.login()
+						type=='admin' && this.login()
+						type=='user' && this.login_demo()
 					}else{
 						console.log('error submit!!');
 						return false;
@@ -112,6 +146,16 @@
 				});
 				//开启欢迎词
 				this.$message.success("Login Success 登录成功")
+			},
+			login_demo: async function() {
+				this.islogin = true;
+				var userInfo = await this.$API.user.login_demo.get();
+				this.$TOOL.data.set("user", userInfo.data);
+				this.$router.replace({
+					path: '/'
+				});
+				//开启欢迎词
+				this.$message.success("Login Success 登录成功")
 			}
 		}
 	}

src/views/setting/role/permission.vue

@@ -19,7 +19,10 @@
 			<el-form label-width="100px" label-position="left">
 				<el-form-item label="控制台视图">
 					<el-select v-model="dashboard" placeholder="请选择">
-						<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+						<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value">
+							<span style="float: left">{{ item.label }}</span>
+							<span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>
+						</el-option>
 					</el-select>
 					<div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
 				</el-form-item>
@@ -55,11 +58,14 @@
 				dashboardOptions: [
 					{
 						value: '0',
-						label: '数据统计'
+						label: '数据统计',
+						views: 'stats'
+						
 					},
 					{
 						value: '1',
-						label: '工作台'
+						label: '工作台',
+						views: 'work'
 					},
 				]
 			}