Skip to content

A
apaas-ui
Commit 0278c8e3 authored by 张俊's avatar 张俊
Browse files
Options

分配角色权限

parent 5ba29670
Hide whitespace changes
Inline Side-by-side
Showing with 249 additions and 114 deletions
src/components/menu-permission.vue
View file @ 0278c8e3
...@@ -99,11 +99,6 @@ export default { ...@@ -99,11 +99,6 @@ export default {
}; };
</script> </script>
<style scoped>
.menu_permission {
margin-top: 20px;
}
</style>
<style> <style>
.menu_permission .el-table__header-wrapper { .menu_permission .el-table__header-wrapper {
......
src/pages/authority/addroles.vue
View file @ 0278c8e3
<template> <template>
<div class="detail_contain"> <div class="detail_contain">
<p class="now_page_title"> <p class="now_page_title">
权限管理 / 角色管理 / 权限管理 / 角色管理 /
<span>{{$route.path.indexOf('edit')!==-1?'角色类型':$route.path.indexOf('add')!==-1?'新增角色':'分配权限'}}</span> <span>{{
$route.path.indexOf("edit") !== -1
? "角色类型"
: $route.path.indexOf("add") !== -1
? "新增角色"
: "分配权限"
}}</span>
</p> </p>
<div class="info_contain"> <div class="info_contain">
<p v-if="$route.path.indexOf('allot')!==-1" class="borerd"><span></span>基本信息</p> <p v-if="$route.path.indexOf('allot') !== -1" class="borerd">
<span></span>基本信息
</p>
<el-form ref="form" :rules="rules" :model="form" label-width="0px"> <el-form ref="form" :rules="rules" :model="form" label-width="0px">
<el-form-item prop="name"> <el-form-item prop="name">
<p class="formname">角色名称：</p> <p class="formname">角色名称：</p>
...@@ -26,102 +34,234 @@ ...@@ -26,102 +34,234 @@
<p class="formname">登记日期：</p> <p class="formname">登记日期：</p>
<el-input v-model="form.date" disabled></el-input> <el-input v-model="form.date" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item class="bottom-btn"> <el-form-item class="bottom-btn">
<el-button type="primary" @click="onSubmit('form')" class="right">保存</el-button> <el-button type="primary" @click="onSubmit('form')" class="right"
>保存</el-button
>
<el-button class="right">取消</el-button> <el-button class="right">取消</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<p v-if="$route.path.indexOf('allot')!==-1" class="borerd"><span></span>菜单权限</p> <p v-if="$route.path.indexOf('allot') !== -1" class="borerd">
<div v-if="$route.path.indexOf('allot')!==-1" style="margin-bottom:60px;margin-top:20px;"> <span></span>菜单权限
菜单权限 </p>
</div> <div
v-if="$route.path.indexOf('allot') !== -1"
style="margin-bottom:100px;margin-top:20px;"
>
<menu-permission
v-model="permission"
:data="permissionData"
@change-permissions="changePermissions"
></menu-permission>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import uploadFile from '@/components/upload_file'
import { getRole } from "@/utils/common"; import { getRole } from "@/utils/common";
import menuPermission from "@/components/menu-permission";
export default { export default {
props: {}, props: {},
components: { components: {
uploadFile menuPermission,
}, },
data() { data() {
return { return {
form: { form: {
name: '', name: "",
desc:'', desc: "",
person:'', person: "",
date:'', date: "",
},
now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员
permission: {
value1: [11, 13],
value2: [],
value3: [31, 32, 33],
value4: [],
value5: [],
},
permissionData: [
{
name: "权限管理1",
prop: "value1",
children: [
{
name: "权限管理1",
value: 11,
},
{
name: "权限管理2",
value: 12,
},
{
name: "权限管理3",
value: 13,
},
],
}, },
now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员 {
rules:{ name: "权限管理2",
name:[ prop: "value2",
{ required: true, message: '请输入角色名称', trigger: 'blur' }, children: [
{
name: "权限管理1",
value: 21,
},
{
name: "权限管理2",
value: 22,
},
{
name: "权限管理3",
value: 23,
},
{
name: "权限管理4",
value: 24,
},
{
name: "权限管理5",
value: 25,
},
{
name: "权限管理6",
value: 26,
},
{
name: "权限管理7",
value: 27,
},
{
name: "权限管理8",
value: 28,
},
{
name: "权限管理9",
value: 29,
},
], ],
desc:[ },
{ required: true, message: '请输入角色描述', trigger: 'blur' }, {
{ max: 200, message: '长度小于200个字符', trigger: 'blur' } name: "权限管理3",
prop: "value3",
children: [
{
name: "权限管理1",
value: 31,
},
{
name: "权限管理2",
value: 32,
},
{
name: "权限管理3",
value: 33,
},
], ],
},
} {
name: "权限管理4",
prop: "value4",
children: [
{
name: "权限管理1",
value: 41,
},
{
name: "权限管理2",
value: 42,
},
{
name: "权限管理4",
value: 43,
},
],
},
{
name: "权限管理5",
prop: "value5",
children: [
{
name: "权限管理1",
value: 51,
},
{
name: "权限管理2",
value: 52,
},
{
name: "权限管理5",
value: 53,
},
],
},
],
rules: {
name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
desc: [
{ required: true, message: "请输入角色描述", trigger: "blur" },
{ max: 200, message: "长度小于200个字符", trigger: "blur" },
],
},
}; };
}, },
watch: {}, watch: {},
computed: {}, computed: {},
created() { created() {
this.now_user = this.$store.state.role this.now_user = this.$store.state.role;
getRole().then(data => { getRole().then((data) => {
this.now_user = data; this.now_user = data;
this.$store.commit('rolefun',data) this.$store.commit("rolefun", data);
this.now_page() this.now_page();
}); });
console.log(this.$route); console.log(this.$route);
}, },
mounted() {}, mounted() {},
methods: { methods: {
onSubmit(formName) { onSubmit(formName) {
console.log('submit!'); console.log("submit!");
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
alert('submit!'); alert("submit!");
} else { } else {
console.log('error submit!!'); console.log("error submit!!");
return false; return false;
} }
}); });
}, },
now_page(){ now_page() {
if(this.$route.path.indexOf('edit')!==-1){ if (this.$route.path.indexOf("edit") !== -1) {
this.getInfo() this.getInfo();
} }
if(this.$route.path.indexOf('allot')!==-1){ if (this.$route.path.indexOf("allot") !== -1) {
this.getInfo() this.getInfo();
}
},
getInfo(){
console.log('111');
} }
},
} getInfo() {
console.log("111");
},
changePermissions(values) {
console.log(values);
},
},
}; };
</script> </script>
<style> <style>
.info_contain .el-input__inner{ .info_contain .el-input__inner {
background-color: #f7f8f9; background-color: #f7f8f9;
width: 1022px; width: 1022px;
} }
.info_contain .el-textarea__inner{ .info_contain .el-textarea__inner {
background-color: #f7f8f9; background-color: #f7f8f9;
width: 1022px; width: 1022px;
} }
.info_contain .el-input.is-disabled .el-input__inner{ .info_contain .el-input.is-disabled .el-input__inner {
background-color: #e3e4e6; background-color: #e3e4e6;
} }
</style> </style>
...@@ -138,8 +278,8 @@ export default { ...@@ -138,8 +278,8 @@ export default {
box-shadow: 0px 3px 6px 0px #f4f7fc; box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px; border-radius: 12px;
min-height: calc(100% - 20px); min-height: calc(100% - 20px);
margin-bottom: 20px; margin-bottom: 20px;
position: relative; position: relative;
} }
.now_page_title { .now_page_title {
margin: 15px 0; margin: 15px 0;
...@@ -148,14 +288,14 @@ export default { ...@@ -148,14 +288,14 @@ export default {
.now_page_title span { .now_page_title span {
color: #242c43; color: #242c43;
} }
.formname{ .formname {
color: #58617a; color: #58617a;
} }
.right{ .right {
float: right; float: right;
margin-left: 20px; margin-left: 20px;
} }
.removepic{ .removepic {
display: inline-block; display: inline-block;
margin-top: -40px; margin-top: -40px;
float: left; float: left;
...@@ -169,16 +309,16 @@ export default { ...@@ -169,16 +309,16 @@ export default {
color: #e6ebfe; color: #e6ebfe;
cursor: pointer; cursor: pointer;
} }
.edit_change{ .edit_change {
width: 100%; width: 100%;
border-bottom: 2px solid #f4f7fc; border-bottom: 2px solid #f4f7fc;
overflow: hidden; overflow: hidden;
} }
.edit_change_box{ .edit_change_box {
width: 163px; width: 163px;
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
background-color: #e3e5ef; background-color: #e3e5ef;
border-radius: 8px; border-radius: 8px;
color: #8890a7; color: #8890a7;
text-align: center; text-align: center;
...@@ -189,81 +329,81 @@ export default { ...@@ -189,81 +329,81 @@ export default {
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
} }
.edit_change_box img{ .edit_change_box img {
vertical-align: -3px; vertical-align: -3px;
margin-right: 5px; margin-right: 5px;
} }
.safe_title{ .safe_title {
width: 100%; width: 100%;
height: 65px; height: 65px;
line-height: 65px; line-height: 65px;
border-bottom: 2px solid #f4f7fc; border-bottom: 2px solid #f4f7fc;
} }
.safe_select{ .safe_select {
float: left; float: left;
width: auto; width: auto;
margin-right: 40px; margin-right: 40px;
height: 65px; height: 65px;
cursor: pointer; cursor: pointer;
} }
.safe_box_select{ .safe_box_select {
padding: 30px 10px 10px 10px; padding: 30px 10px 10px 10px;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.openbgc{ .openbgc {
width: 56px; width: 56px;
height: 23px; height: 23px;
background-image: url('~@/assets/imgs/btn_on_hov.png'); background-image: url("~@/assets/imgs/btn_on_hov.png");
background-size:contain; background-size: contain;
cursor: pointer; cursor: pointer;
} }
.formtitle{ .formtitle {
color: #58617a; color: #58617a;
margin: 15px 0; margin: 15px 0;
} }
.savebtn{ .savebtn {
position: absolute; position: absolute;
right: 20px; right: 20px;
bottom:20px; bottom: 20px;
width: 278px; width: 278px;
overflow: hidden; overflow: hidden;
} }
.btnsty{ .btnsty {
width: 124px; width: 124px;
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
background-color: rgba(195, 202, 248, 0.5); background-color: rgba(195, 202, 248, 0.5);
border-radius: 8px; border-radius: 8px;
color: rgba(15, 38, 131, 1); color: rgba(15, 38, 131, 1);
text-align: center; text-align: center;
float: left; float: left;
margin-right: 30px; margin-right: 30px;
cursor: pointer; cursor: pointer;
} }
.savebtn .btnsty:nth-last-of-type(1){ .savebtn .btnsty:nth-last-of-type(1) {
margin-right: 0px; margin-right: 0px;
background-color: rgba(15, 38, 131, 1); background-color: rgba(15, 38, 131, 1);
color: rgba(248, 249, 253, 1); color: rgba(248, 249, 253, 1);
} }
.bottom-btn{ .bottom-btn {
position: absolute; position: absolute;
bottom:20px; bottom: 20px;
right: 50px; right: 50px;
} }
.borerd{ .borerd {
color: #58617a; color: #58617a;
font-size: 16px; font-size: 16px;
} }
.borerd span{ .borerd span {
display: inline-block; display: inline-block;
width: 4px; width: 4px;
height: 16px; height: 16px;
background-color: #515fe7; background-color: #515fe7;
border-radius: 2px; border-radius: 2px;
margin-right: 10px; margin-right: 10px;
vertical-align: -2px; vertical-align: -2px;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment