<template>
|
<div class="add-quotation">
|
<el-dialog
|
:title="editCommonConfig.title + '等级'"
|
:visible.sync="editConfig.visible"
|
:width="dialogWidth"
|
:before-close="handleClose"
|
append-to-body
|
custom-class="iframe-dialog"
|
>
|
<div class="drawerContent" style="overflow: auto">
|
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
<el-form-item label="角色名称" prop="name">
|
<el-input v-model="form.name" placeholder="请输入" style="width: 63%"></el-input>
|
</el-form-item>
|
<el-form-item label="参考角色" prop="prepareRole">
|
<el-select
|
placeholder="请选择参考角色"
|
v-model="form.prepareRole"
|
style="width: 63%"
|
@change="selPrepareRole"
|
>
|
<el-option
|
v-for="(ele, index) in prepareRoleList"
|
:key="index"
|
:label="ele.name"
|
:value="ele.id"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="角色描述" prop="comment">
|
<el-input v-model="form.comment" placeholder="请输入" style="width: 63%"></el-input>
|
</el-form-item>
|
<el-form-item label="页面权限" prop="subsystemIDs">
|
<div class="icon-box">
|
<div class="icon-box-item" v-for="(item, index) in completeList" :key="item.systemType">
|
<div
|
class="iconItem"
|
:class="{ iconActive: form.completeType == item.systemType }"
|
@click="imgClick(item, index)"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
<div style="clear: both"></div>
|
<div style="height: calc(100% - 40px)" v-for="item in menusList" :key="'tree_' + item.systemType">
|
<el-tree
|
v-show="form.completeType == item.systemType"
|
class="icon-item-tree"
|
:ref="'menuTree&' + item.systemType"
|
:data="item.menus"
|
show-checkbox
|
node-key="id"
|
@check-change="handleCheckChange"
|
:props="treeDefaultProp"
|
default-expand-all
|
>
|
</el-tree>
|
</div>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="handleClose">取消</el-button>
|
<el-button type="primary" @click="onSubmit('form')">确定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
// import codeMixin from "@/components/makepager/mixin/codeMixin"
|
import { addRole, updateRole, getDataRole } from "@/api/unifiedManage/userLevel"
|
export default {
|
name: "AddUserLevel",
|
// mixins: [codeMixin],
|
props: {
|
editCommonConfig: {
|
type: Object,
|
default: () => {
|
return {
|
visible: false,
|
title: "新建",
|
infomation: {}
|
}
|
}
|
},
|
editRow: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
}
|
},
|
components: {},
|
computed: {},
|
data() {
|
return {
|
dialogWidth: "35%",
|
editConfig: this.editCommonConfig,
|
prepareRoleList: [], // 参考角色
|
menusList: [], //菜单
|
// 权限 管理
|
completeList: [],
|
form: {},
|
rules: {
|
name: [{ required: true, message: "请输入角色名称", trigger: "blur" }]
|
},
|
treeDefaultProp: {
|
children: "children",
|
label: "title",
|
id: "id"
|
}
|
}
|
},
|
watch: {
|
"editCommonConfig.visible"(val) {
|
if (val) {
|
console.log(val, "sssssss")
|
this.isOpen = val
|
this.$refs.form.resetFields()
|
this.getDataInfo()
|
}
|
},
|
"editCommonConfig.infomation"(val) {
|
console.log(val, "aaaa")
|
// if (this.isopen) {
|
// this.$refs.form.resetFields()
|
// if (val.id) {
|
// this.getDataInfo(val)
|
// }
|
// }
|
}
|
},
|
created() {
|
console.log(this.editConfig.infomation, "sdddd")
|
this.getDataInfo(this.editConfig.infomation)
|
},
|
methods: {
|
handleClose() {
|
this.editConfig.visible = false
|
},
|
handleCheckChange(data, checked, indeterminate) {
|
console.log(data, checked, indeterminate)
|
},
|
// 获取参考角色 页面权限 菜单 的数据
|
async getDataInfo(val) {
|
const rsp = await getDataRole({ useType: 2 })
|
if (rsp.code == 200) {
|
// 参考角色
|
this.prepareRoleList = rsp.data.roles ? rsp.data.roles : []
|
this.menusList = rsp.data.menus ? rsp.data.menus : []
|
// 页面权限
|
this.completeList = rsp.data.subsystems ? rsp.data.subsystems : []
|
this.form.completeType = this.completeList.length > 0 ? this.completeList[0].systemType : 1
|
}
|
if (this.editConfig.visible) {
|
this.resetForm(val)
|
}
|
},
|
getMenuCheck(val) {
|
if (val && val.length > 0) {
|
for (let i in this.menusList) {
|
this.$refs["menuTree&" + this.menusList[i].systemType][0].setCheckedKeys(val)
|
}
|
}
|
},
|
resetForm(val) {
|
this.form = {
|
prepareRole: "",
|
menuIDs: [],
|
name: "",
|
comment: "",
|
subsystemIDs: [],
|
completeType:
|
this.completeList.length > 0 && this.completeList[0].systemType ? this.completeList[0].systemType : 1
|
}
|
if (val) {
|
this.form = JSON.parse(JSON.stringify(val))
|
this.form.completeType =
|
this.completeList.length > 0 && this.completeList[0].systemType ? this.completeList[0].systemType : 1
|
if (this.form.menuIDs && this.form.menuIDs.length > 0) {
|
for (let i in this.menusList) {
|
console.log(this.$refs["menuTree&" + this.menusList[i].systemType])
|
// this.$refs["menuTree&" + this.menusList[i].systemType][0].setCheckedKeys(this.form.allMenu.split(","))
|
}
|
}
|
} else {
|
console.log(this.menusList)
|
for (let i in this.menusList) {
|
console.log(this.$refs["menuTree&" + this.menusList[i]?.systemType])
|
// this.$refs["menuTree&" + this.menusList[i]?.systemType][0].setCheckedKeys([])
|
}
|
}
|
},
|
imgClick(item, index) {
|
console.log(index)
|
this.form.completeType = item.systemType
|
this.$forceUpdate()
|
},
|
selPrepareRole(val) {
|
if (val) {
|
for (let i in this.prepareRoleList) {
|
if (this.prepareRoleList[i].id == val) {
|
let value = this.prepareRoleList[i]
|
this.completeList = value.subsystems
|
this.form.completeType = this.completeList.length > 0 ? this.completeList[0].systemType : 1
|
this.getMenuCheck(value.menuIDs ? value.menuIDs : [])
|
this.$forceUpdate()
|
break
|
}
|
}
|
}
|
},
|
onSubmit(formName) {
|
this.$refs[formName].validate((valid) => {
|
console.log(valid)
|
if (valid) {
|
let submitFn = this.editRow.id ? updateRole : addRole
|
let param = this.saveParams()
|
submitFn(param).then((reply) => {
|
if (reply && reply.code === 200) {
|
this.$message.success("保存成功")
|
this.$emit("shutdown", false)
|
}
|
})
|
}
|
})
|
},
|
saveParams() {
|
let data = this.form
|
// 用户的权限配置 树形结构
|
let menuIds = []
|
// 全选的用户权限
|
let allMenuIds = []
|
//对应的页面权限 是否选择了菜单
|
let indexArr = []
|
for (let i in this.menusList) {
|
let arr = this.$refs["menuTree&" + this.menusList[i].systemType][0].getCheckedKeys()
|
menuIds = menuIds.concat(arr)
|
allMenuIds = allMenuIds.concat(arr)
|
let arr2 = this.$refs["menuTree&" + this.menusList[i].systemType][0].getHalfCheckedKeys()
|
menuIds = menuIds.concat(arr2)
|
//对应的页面权限 是否选择了菜单
|
let arr3 = arr.concat(arr2)
|
if (arr3.length > 0) {
|
indexArr.push(i)
|
}
|
}
|
let subsystemIDs = []
|
for (let i in indexArr) {
|
for (let j in this.completeList) {
|
if (this.menusList[indexArr[i]].systemType == this.completeList[j].systemType) {
|
subsystemIDs.push(this.completeList[j].id)
|
break
|
}
|
}
|
}
|
console.log(subsystemIDs, "===subsystemIDs")
|
let params = {
|
subsystemIDs: subsystemIDs,
|
role: {
|
allMenu: allMenuIds.join(),
|
id: this.editRow.id,
|
comment: data.comment || "",
|
name: data.name || "",
|
useType: 2
|
},
|
menuIDs: menuIds
|
}
|
return params
|
},
|
shutdown() {
|
this.$emit("shutdown", false)
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
::v-deep {
|
.iframe-dialog .el-dialog__body {
|
.drawerContent {
|
width: 90%;
|
padding: 0;
|
margin: auto;
|
overflow: hidden;
|
margin-top: 15px;
|
// 溢出隐藏滚动条
|
scrollbar-width: none; /* firefox */
|
-ms-overflow-style: none; /* IE 10+ */
|
.button {
|
position: absolute;
|
right: 60px;
|
bottom: 20px;
|
.el-button {
|
width: 80px;
|
height: 38px;
|
font-family: PingFangSC-Medium, sans-serif;
|
}
|
}
|
|
.content-title {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
}
|
.name-tips {
|
position: absolute;
|
top: 25px;
|
left: 20px;
|
color: rgb(255, 0, 0);
|
font-size: 10px;
|
}
|
}
|
.el-tree {
|
height: 305px;
|
overflow-y: auto;
|
}
|
.icon-box {
|
width: 100%;
|
height: 320px;
|
overflow: hidden;
|
box-sizing: border-box;
|
font-size: 14px;
|
position: relative;
|
.icon-box-item {
|
float: left;
|
}
|
.icon-item-tree {
|
width: 100%;
|
height: calc(100% - 40px);
|
position: absolute;
|
top: 40px;
|
left: 0px;
|
}
|
.iconItem {
|
width: auto;
|
height: 32px;
|
padding: 0 5px;
|
line-height: 32px;
|
border-radius: 6px;
|
float: left;
|
margin-right: 10px;
|
margin-bottom: 5px;
|
text-align: center;
|
box-sizing: border-box;
|
border: 1px solid #e5e5e5;
|
cursor: pointer;
|
// &:hover {
|
// background: rgba(30, 120, 235, 1);
|
// border: 1px solid rgba(30, 120, 235, 1);
|
// color: #fff;
|
// box-sizing: border-box;
|
// }
|
}
|
.iconActive {
|
background: rgba(30, 120, 235, 1);
|
color: #fff;
|
box-sizing: border-box;
|
}
|
}
|
}
|
.el-dialog__footer {
|
background-color: #f5f5f5;
|
height: 55px;
|
line-height: 55px;
|
text-align: right;
|
padding-right: 20px;
|
}
|
.el-input__inner {
|
font-size: 13px !important;
|
color: rgba(0, 0, 0, 0.9);
|
text-align: left;
|
}
|
.el-input__inner::placeholder {
|
color: rgba(0, 0, 0, 0.4);
|
}
|
.el-form-item__error {
|
font-family: PingFangSC;
|
}
|
.el-select-dropdown__wrap {
|
overflow: auto !important;
|
}
|
.el-select-dropdown {
|
position: absolute !important;
|
top: 36px !important;
|
left: 0px !important;
|
}
|
.el-form-item__label {
|
font-size: 13px !important;
|
color: #000;
|
font-family: PingFangSC;
|
text-align: center !important;
|
width: 60px;
|
}
|
.input-box .input-content input {
|
width: 23px;
|
height: 26px;
|
border-color: rgba(0, 0, 0, 0.1);
|
}
|
.el-icon-minus {
|
width: 0px !important;
|
height: 26px !important;
|
line-height: 38px !important;
|
color: #e5e5e5;
|
font-size: 13px;
|
}
|
}
|
</style>
|
