<template>
|
<Card>
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>角色信息</div>
|
</div>
|
<el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="80px" class="demo-form-inline">
|
<el-form-item label="角色名称" prop="roleName">
|
<el-input v-model="form.roleName" placeholder="请输入角色名称"></el-input>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="form.remark" placeholder="请输入备注"></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>操作权限</div>
|
</div>
|
<div>
|
<div class="header">
|
<div class="w20">模块名称</div>
|
<div class="sconed">
|
<div class="subpage">
|
<div class="title">页面名称</div>
|
<div class="btns">权限</div>
|
</div>
|
</div>
|
</div>
|
<div v-for="item in menu" :key="item.menuId">
|
<div class="row">
|
<div class="w20">
|
<el-checkbox v-model="item.selected" @change="(e) => {
|
setCheckStatus1(item.menuId, e)
|
}" :checked="item.selected">
|
{{ item.menuName }}
|
</el-checkbox>
|
</div>
|
<div class="sconed">
|
<div class="subpage"
|
v-if="item.children && item.children.length > 0 && item.children[0]">
|
<div v-for="item1 in item.children" :key="item1.menuId" class="two">
|
<div class="left">
|
<el-checkbox v-model="item1.selected" @change="(e) => {
|
setCheckStatus2(item1.menuId, e, item.menuId)
|
}" :checked="item1.selected">
|
{{ item1.menuName }}
|
</el-checkbox>
|
</div>
|
|
<div class="right">
|
<div v-for="item2 in item1.children" :key="item2.menuId">
|
<el-checkbox v-model="item2.selected" @change="(e) => {
|
setCheckStatus3(item2.menuId, e, item1.menuId, item.menuId)
|
}" :checked="item2.selected">
|
{{ item2.menuName }}
|
</el-checkbox>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="subpage" v-else>
|
<div class="two">
|
<!-- <div class="left">
|
</div> -->
|
|
<div class="right">
|
<div v-for="item1 in item.children" :key="item1.menuId">
|
<el-checkbox v-model="item1.selected" @change="(e) => {
|
setCheckStatus2(item1.menuId, e, item.menuId,)
|
}" :checked="item1.selected">
|
{{ item1.menuName }}
|
</el-checkbox>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="menu.length == 0" :style="{ height: height + 'px' }">
|
<div class="no-data">暂无数据</div>
|
</div>
|
</div>
|
|
<div class="btn_box">
|
<el-button @click="$router.go(-1)">返回</el-button>
|
<el-button type="primary" @click="onSubmit">保存</el-button>
|
</div>
|
</Card>
|
</template>
|
|
<script>
|
import { roleInfoFromUserId, getRoleInfo, add, edit } from './service.js'
|
export default {
|
name: 'add-role',
|
components: {},
|
props: {},
|
data() {
|
return {
|
form: {
|
roleName: "",
|
remark: "",
|
},
|
rules: {
|
roleName: [
|
{ required: true, message: "请输入角色名称", trigger: "blur" },
|
],
|
},
|
menu: [],
|
};
|
},
|
computed: {
|
height() {
|
return this.$baseTableHeight()
|
},
|
},
|
watch: {},
|
created() {
|
roleInfoFromUserId({ userId: 1 }).then(res => {
|
if (this.$route.query.roleId) {
|
getRoleInfo({ roleId: this.$route.query.roleId }).then(resp => {
|
this.menu = this.setSelectedIds(res.data || [], resp.menus || []);
|
this.form = {
|
roleName: resp.roleName || '',
|
remark: resp.remark || '',
|
roleId: resp.roleId
|
}
|
})
|
} else {
|
this.menu = res || []
|
}
|
})
|
},
|
mounted() { },
|
methods: {
|
setSelectedIds(arr, selectKeyList) {
|
function traverse(item) {
|
item.selected = selectKeyList.includes(item.menuId);
|
if (item.children && item.children.length > 0) {
|
item.children.forEach(traverse);
|
}
|
}
|
arr.forEach(traverse);
|
return arr;
|
},
|
onSubmit() {
|
this.$refs['form'].validate((valid) => {
|
if (valid) {
|
if (this.getSelectedIds(this.menu).length == 0) {
|
this.msgwarning('请勾选操作权限')
|
return
|
}
|
let obj = {
|
...this.form,
|
menuIds: this.getSelectedIds(this.menu)
|
}
|
if (this.$route.query && this.$route.query.roleId) {
|
obj.roleId = this.$route.query.roleId
|
edit(obj).then(() => {
|
this.msgsuccess('保存成功')
|
this.$router.go(-1)
|
})
|
} else {
|
add(obj).then(() => {
|
this.msgsuccess('保存成功')
|
this.form = {
|
roleName: "",
|
remark: "",
|
}
|
this.menu = []
|
this.$router.go(-1)
|
})
|
}
|
}
|
})
|
},
|
getSelectedIds(arr) {
|
let result = [];
|
function traverse(item) {
|
if (item.selected) {
|
result.push(item.menuId);
|
}
|
if (item.children && item.children.length > 0) {
|
for (let children of item.children) {
|
traverse(children);
|
}
|
}
|
}
|
|
for (let item of arr) {
|
traverse(item);
|
}
|
return result;
|
},
|
setCheckStatus1(id, status) { //点击第1级
|
if (!status) {
|
this.menu = this.menu.map(item => {
|
if (item.menuId == id) {
|
item.selected = status
|
if (item.children.length > 0) {
|
item.children = item.children.map(item1 => {
|
item1.selected = status
|
if (item1.children.length > 0) {
|
item1.children = item1.children.map(item2 => {
|
item2.selected = status
|
return { ...item2 }
|
})
|
}
|
return { ...item1 }
|
})
|
}
|
}
|
return { ...item }
|
})
|
} else {
|
this.menu = this.menu.map(item => {
|
if (item.menuId == id) {
|
item.selected = true
|
}
|
return { ...item }
|
})
|
}
|
},
|
setCheckStatus2(id, status, aId) { //点击第2级
|
this.menu = this.menu.map(item => {
|
if (item.menuId == aId) {
|
item.selected = true
|
if (item.children.length > 0) {
|
item.children = item.children.map(item1 => {
|
if (item1.menuId == id) {
|
item1.selected = status
|
}
|
return { ...item1 }
|
})
|
}
|
}
|
return { ...item }
|
})
|
},
|
setCheckStatus3(id, status, bId, aId) {//点击第3级
|
this.menu = this.menu.map(item => {
|
if (item.menuId == aId) {
|
item.selected = true
|
if (item.children.length > 0) {
|
item.children = item.children.map(item1 => {
|
if (item1.menuId == bId) {
|
item1.selected = true
|
if (item1.children.length > 0) {
|
item1.children = item1.children.map(item2 => {
|
if (item2.menuId == id) {
|
item2.selected = status
|
}
|
return { ...item2 }
|
})
|
}
|
}
|
return { ...item1 }
|
})
|
}
|
}
|
return { ...item }
|
})
|
}
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.title_box {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
font-weight: bold;
|
|
div:first-child {
|
width: 4px;
|
height: 16px;
|
background: #598DEC;
|
margin-right: 8px;
|
}
|
}
|
|
.no-data {
|
height: 100%;
|
background-color: #fff;
|
border-radius: 0 0 6px 6px;
|
border-left: 1px solid #e8e8e8;
|
border-right: 1px solid #e8e8e8;
|
border-bottom: 1px solid #e8e8e8;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #909399;
|
font-size: 14px;
|
}
|
|
.btn_box {
|
margin-top: 40px;
|
text-align: center;
|
|
button {
|
width: 220px;
|
}
|
}
|
|
.el-checkbox {
|
display: flex;
|
align-items: center;
|
}
|
|
.row,
|
.header {
|
display: flex;
|
align-items: center;
|
border: 1px solid #e8e8e8;
|
|
.w20 {
|
width: 15%;
|
padding: 8px 20px;
|
}
|
|
.sconed {
|
flex: 1;
|
|
.subpage {
|
.title {
|
border: 1px solid #e8e8e8;
|
border-top: none;
|
border-bottom: none;
|
}
|
|
.two {
|
display: flex;
|
align-items: center;
|
border: 1px solid #e8e8e8;
|
border-top: none;
|
border-right: none;
|
|
.left {
|
width: 200px;
|
padding: 13px 20px;
|
border-right: 1px solid #e8e8e8;
|
}
|
|
.right {
|
display: flex;
|
flex: 1;
|
|
div {
|
padding: 13px 0 13px 20px;
|
}
|
}
|
}
|
|
.two:last-child {
|
border-bottom: none;
|
}
|
|
.btns {
|
display: flex;
|
align-items: center;
|
padding: 0 20px;
|
}
|
}
|
}
|
}
|
|
.header {
|
border-radius: 16px 16px 0 0;
|
background-color: #FAFAFA;
|
color: #909399;
|
|
.subpage {
|
display: flex;
|
}
|
|
.title {
|
width: 200px;
|
padding: 8px 20px;
|
}
|
}
|
|
.header-title-left {
|
display: flex;
|
align-items: center;
|
gap: 13px;
|
margin-bottom: 20px;
|
|
img {
|
width: 12px;
|
height: 19px;
|
}
|
|
div {
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 18px;
|
color: #222222;
|
line-height: 27px;
|
font-family: 'Source Han Sans CN Bold Bold';
|
}
|
}
|
</style>
|
