|
|
@ -2,24 +2,29 @@
|
|
|
|
/deep/ .addButton {
|
|
|
|
/deep/ .addButton {
|
|
|
|
background: #3496EB;
|
|
|
|
background: #3496EB;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .deleteButton {
|
|
|
|
/deep/ .deleteButton {
|
|
|
|
border: 1px solid #3496EB;
|
|
|
|
border: 1px solid #3496EB;
|
|
|
|
color: #3496EB;
|
|
|
|
color: #3496EB;
|
|
|
|
background: white;
|
|
|
|
background: white;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .role-select-radio-group {
|
|
|
|
/deep/ .role-select-radio-group {
|
|
|
|
height: 24px;
|
|
|
|
height: 24px;
|
|
|
|
line-height: 24px;
|
|
|
|
line-height: 24px;
|
|
|
|
color: #637182;
|
|
|
|
color: #637182;
|
|
|
|
border: 1px solid #EDEFF1;
|
|
|
|
border: 1px solid #EDEFF1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .ivu-radio-group-button .ivu-radio-wrapper-checked:first-child {
|
|
|
|
/deep/ .ivu-radio-group-button .ivu-radio-wrapper-checked:first-child {
|
|
|
|
color: #2d8cf0;
|
|
|
|
color: #2d8cf0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .system-role-div {
|
|
|
|
/deep/ .system-role-div {
|
|
|
|
height: 39px;
|
|
|
|
height: 39px;
|
|
|
|
padding: 10px;
|
|
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .system-role-img {
|
|
|
|
/deep/ .system-role-img {
|
|
|
|
height: 12px;
|
|
|
|
height: 12px;
|
|
|
|
width: 12px;
|
|
|
|
width: 12px;
|
|
|
@ -27,21 +32,25 @@
|
|
|
|
margin-right: 9px;
|
|
|
|
margin-right: 9px;
|
|
|
|
margin-left: 7px;
|
|
|
|
margin-left: 7px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .system-role-name-selected {
|
|
|
|
/deep/ .system-role-name-selected {
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
display: inline-block;
|
|
|
|
display: inline-block;
|
|
|
|
color: #2074E2;
|
|
|
|
color: #2074E2;
|
|
|
|
cursor: default;
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .system-role-name-un-select {
|
|
|
|
/deep/ .system-role-name-un-select {
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
display: inline-block;
|
|
|
|
display: inline-block;
|
|
|
|
color: #535353;
|
|
|
|
color: #535353;
|
|
|
|
cursor: default;
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .system-role-name-un-select:hover {
|
|
|
|
/deep/ .system-role-name-un-select:hover {
|
|
|
|
color: #2074E2;
|
|
|
|
color: #2074E2;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .system-role-number-selected {
|
|
|
|
/deep/ .system-role-number-selected {
|
|
|
|
font-size: 13px;
|
|
|
|
font-size: 13px;
|
|
|
|
display: inline-block;
|
|
|
|
display: inline-block;
|
|
|
@ -50,6 +59,7 @@
|
|
|
|
margin-right: 11px;
|
|
|
|
margin-right: 11px;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .system-role-number-un-select {
|
|
|
|
/deep/ .system-role-number-un-select {
|
|
|
|
font-size: 13px;
|
|
|
|
font-size: 13px;
|
|
|
|
display: inline-block;
|
|
|
|
display: inline-block;
|
|
|
@ -58,13 +68,16 @@
|
|
|
|
margin-right: 11px;
|
|
|
|
margin-right: 11px;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .ivu-checkbox {
|
|
|
|
/deep/ .ivu-checkbox {
|
|
|
|
margin-right: 13px;
|
|
|
|
margin-right: 13px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .ivu-checkbox-checked .ivu-checkbox-inner {
|
|
|
|
/deep/ .ivu-checkbox-checked .ivu-checkbox-inner {
|
|
|
|
border-color: #2074E2;
|
|
|
|
border-color: #2074E2;
|
|
|
|
background-color: #2074E2;
|
|
|
|
background-color: #2074E2;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .ivu-checkbox-indeterminate .ivu-checkbox-inner {
|
|
|
|
/deep/ .ivu-checkbox-indeterminate .ivu-checkbox-inner {
|
|
|
|
border-color: #2074E2;
|
|
|
|
border-color: #2074E2;
|
|
|
|
background-color: #2074E2;
|
|
|
|
background-color: #2074E2;
|
|
|
@ -103,7 +116,9 @@
|
|
|
|
<div v-for="item in permissionList" :key="item.id">
|
|
|
|
<div v-for="item in permissionList" :key="item.id">
|
|
|
|
<div style="border-bottom: 1px solid #E4E9F1;height: 49px;line-height: 49px;background-color: #F7F8FA;">
|
|
|
|
<div style="border-bottom: 1px solid #E4E9F1;height: 49px;line-height: 49px;background-color: #F7F8FA;">
|
|
|
|
<Checkbox :indeterminate="item.indeterminate" :value="item.check"
|
|
|
|
<Checkbox :indeterminate="item.indeterminate" :value="item.check"
|
|
|
|
@click.prevent.native="handleItemCheckAll(item)" style="height: 95%;color:#697882;background-color: #F7F8FA;">{{item.name}}</Checkbox>
|
|
|
|
@click.prevent.native="handleItemCheckAll(item)"
|
|
|
|
|
|
|
|
style="height: 95%;color:#697882;background-color: #F7F8FA;">{{item.name}}
|
|
|
|
|
|
|
|
</Checkbox>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--2-->
|
|
|
|
<!--2-->
|
|
|
|
<div v-for="itemSon in item.sonPermissionList" :key="itemSon.id" style="height: 49px;">
|
|
|
|
<div v-for="itemSon in item.sonPermissionList" :key="itemSon.id" style="height: 49px;">
|
|
|
@ -121,10 +136,12 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--3-->
|
|
|
|
<!--3-->
|
|
|
|
<div style="float: left;width: 80%;height: 49px;line-height: 49px;border-bottom: 1px solid #E4E9F1;">
|
|
|
|
<div style="float: left;width: 80%;height: 49px;line-height: 49px;border-bottom: 1px solid #E4E9F1;">
|
|
|
|
<CheckboxGroup v-model="itemSon.checkArr" @on-change="handleGrandSonCheckChange(itemSon, item)">
|
|
|
|
<CheckboxGroup v-model="itemSon.checkArr"
|
|
|
|
|
|
|
|
@on-change="handleGrandSonCheckChange(itemSon, item)">
|
|
|
|
<Checkbox v-for="itemGrandson in itemSon.sonPermissionList"
|
|
|
|
<Checkbox v-for="itemGrandson in itemSon.sonPermissionList"
|
|
|
|
:key="itemGrandson.id"
|
|
|
|
:key="itemGrandson.id"
|
|
|
|
style="margin-left: 30px;color:#697882" :label="itemGrandson.id" :value="itemGrandson.check">
|
|
|
|
style="margin-left: 30px;color:#697882" :label="itemGrandson.id"
|
|
|
|
|
|
|
|
:value="itemGrandson.check">
|
|
|
|
{{itemGrandson.name}}
|
|
|
|
{{itemGrandson.name}}
|
|
|
|
</Checkbox>
|
|
|
|
</Checkbox>
|
|
|
|
</CheckboxGroup>
|
|
|
|
</CheckboxGroup>
|
|
|
@ -134,17 +151,19 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style="top: 76%;border-top: 1px solid #E4E9F1;width: 100%;padding-top: 20px;position: absolute;text-align: center;">
|
|
|
|
<div style="top: 76%;border-top: 1px solid #E4E9F1;width: 100%;padding-top: 20px;position: absolute;text-align: center;">
|
|
|
|
<Button type="text" style="width: 70px;border: 1px solid #BBBBBB;height: 32px;color: #333333;margin-right: 35px;line-height: 32px;" @click="cancelEdit()">取消</Button>
|
|
|
|
<Button type="primary" style="width: 70px;height: 32px;line-height: 32px;background-color: #2074E2;"
|
|
|
|
<Button type="primary" style="width: 70px;height: 32px;line-height: 32px;background-color: #2074E2;" @click="savePermission()">确定</Button>
|
|
|
|
@click="savePermission()">保存
|
|
|
|
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</i-col>
|
|
|
|
</i-col>
|
|
|
|
</Row>
|
|
|
|
</Row>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
// import RoleManager from '../../services/user/RoleManager'
|
|
|
|
import RoleManager from '../../services/user/RoleManager'
|
|
|
|
import roleSelectedImg from '../../../static/img/role-selected.png'
|
|
|
|
import roleSelectedImg from '../../../static/img/role-selected.png'
|
|
|
|
import roleUnSelectImg from '../../../static/img/role-un-select.png'
|
|
|
|
import roleUnSelectImg from '../../../static/img/role-un-select.png'
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
@ -239,7 +258,8 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]},{
|
|
|
|
]
|
|
|
|
|
|
|
|
}, {
|
|
|
|
id: 4,
|
|
|
|
id: 4,
|
|
|
|
name: '一级权限b',
|
|
|
|
name: '一级权限b',
|
|
|
|
level: 1,
|
|
|
|
level: 1,
|
|
|
@ -287,13 +307,14 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]},
|
|
|
|
]
|
|
|
|
|
|
|
|
},
|
|
|
|
]
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted: function () {
|
|
|
|
mounted: function () {
|
|
|
|
|
|
|
|
this.roleInit();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
//一级权限-点击事件
|
|
|
|
//一级权限-点击事件
|
|
|
@ -404,7 +425,7 @@
|
|
|
|
},
|
|
|
|
},
|
|
|
|
//点击角色数字跳转到账号管理页面
|
|
|
|
//点击角色数字跳转到账号管理页面
|
|
|
|
goToAccManagerPage: function () {
|
|
|
|
goToAccManagerPage: function () {
|
|
|
|
|
|
|
|
this.$router.push({path: '/account/manager'});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
//选中角色
|
|
|
|
//选中角色
|
|
|
|
selectRole: function (id) {
|
|
|
|
selectRole: function (id) {
|
|
|
@ -414,23 +435,94 @@
|
|
|
|
if (item.id === curId) {
|
|
|
|
if (item.id === curId) {
|
|
|
|
item.imgUrl = roleSelectedImg;
|
|
|
|
item.imgUrl = roleSelectedImg;
|
|
|
|
item.selectFlag = "selected";
|
|
|
|
item.selectFlag = "selected";
|
|
|
|
|
|
|
|
that.roleSelectId = item.id;
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
item.imgUrl = roleUnSelectImg;
|
|
|
|
item.imgUrl = roleUnSelectImg;
|
|
|
|
item.selectFlag = "unSelect";
|
|
|
|
item.selectFlag = "unSelect";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
that.rolePermissionList();
|
|
|
|
},
|
|
|
|
|
|
|
|
//取消选中
|
|
|
|
|
|
|
|
cancelEdit: function () {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
//保存
|
|
|
|
//保存
|
|
|
|
savePermission: function () {
|
|
|
|
savePermission: function () {
|
|
|
|
|
|
|
|
let request = {
|
|
|
|
|
|
|
|
roleId: this.roleSelectId,
|
|
|
|
|
|
|
|
permissionJson:JSON.stringify(this.permissionList)
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
|
|
RoleManager.saveRolePermission(request, function (data) {
|
|
|
|
|
|
|
|
data = data.data;
|
|
|
|
|
|
|
|
if (data.code === '9999') {
|
|
|
|
|
|
|
|
that.$router.push('/login');
|
|
|
|
|
|
|
|
that.$Message.error("会话超时请重新登陆!");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (data.code === '0001') {
|
|
|
|
|
|
|
|
that.$Message.error("保存角色失败!");
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (data.code === '0000') {
|
|
|
|
|
|
|
|
that.$Message.info("保存角色权限成功!");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
//查询角色
|
|
|
|
|
|
|
|
roleInit: function () {
|
|
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
|
|
that.roleList = [];
|
|
|
|
|
|
|
|
RoleManager.listRoleInfoApi({}, function (data) {
|
|
|
|
|
|
|
|
data = data.data;
|
|
|
|
|
|
|
|
if (data.code === '9999') {
|
|
|
|
|
|
|
|
that.$router.push('/login');
|
|
|
|
|
|
|
|
that.$Message.error("会话超时请重新登陆!");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (data.code === '0001') {
|
|
|
|
|
|
|
|
that.$Message.error("查询角色失败!");
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (data.code === '0000') {
|
|
|
|
|
|
|
|
data = data.results;
|
|
|
|
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
|
|
|
|
|
let row = data[i];
|
|
|
|
|
|
|
|
row.imgUrl = roleUnSelectImg;
|
|
|
|
|
|
|
|
if (i === 0) {
|
|
|
|
|
|
|
|
row.selectFlag = "selected";
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
row.selectFlag = "unSelect";
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
that.roleList.push(row);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
that.roleSelectId = that.roleList[0].id;
|
|
|
|
|
|
|
|
that.rolePermissionList();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
//查询角色的所有权限
|
|
|
|
|
|
|
|
rolePermissionList: function () {
|
|
|
|
|
|
|
|
let request = {
|
|
|
|
|
|
|
|
roleId: this.roleSelectId
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
this.permissionList = [];
|
|
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
|
|
RoleManager.rolePermissionList(request, function (data) {
|
|
|
|
|
|
|
|
data = data.data;
|
|
|
|
|
|
|
|
if (data.code === '9999') {
|
|
|
|
|
|
|
|
that.$router.push('/login');
|
|
|
|
|
|
|
|
that.$Message.error("会话超时请重新登陆!");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (data.code === '0001') {
|
|
|
|
|
|
|
|
that.$Message.error("查询角色权限失败!");
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (data.code === '0000') {
|
|
|
|
|
|
|
|
data = data.results;
|
|
|
|
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
|
|
|
|
|
let row = data[i];
|
|
|
|
|
|
|
|
that.permissionList.push(row);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|