This commit is contained in:
sakuya 2021-06-09 22:27:49 +08:00
parent 6210499d60
commit 0a1cc1a69b
6 changed files with 115 additions and 15 deletions

View File

@ -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);
}

View File

@ -1,6 +1,16 @@
<template>
<work v-if="dashboard=='1'"></work>
<stats v-else></stats>
<div v-if="pageLoading">
<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>

View File

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

View File

@ -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>

View File

@ -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 登录成功")
}
}
}

View File

@ -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'
},
]
}