<template>
|
<div>
|
<div class="body" :style="{height:mainHeight+'px'}">
|
<div class="bodyTopButtonGroup" style="justify-content: space-between">
|
<el-button v-waves type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
|
<el-button v-waves icon="el-icon-download">导入</el-button>
|
</div>
|
|
<div class="bodyTopFormGroup">
|
<el-form
|
ref="form"
|
:model="form"
|
label-width="100px"
|
inline
|
style="display: flex;"
|
>
|
<div class="elForm">
|
<el-form-item label="母件编码" style=" display: flex;">
|
<el-input v-model="form.OrgCode" placeholder="请输入" style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="母件名称" style=" display: flex;">
|
<el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="母件规格" style=" display: flex;">
|
<el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />
|
</el-form-item>
|
|
<el-form-item label="版本编号" style=" display: flex;">
|
<el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />
|
</el-form-item>
|
<el-form-item v-show="isExpandForm" label="创建人员" style=" display: flex;">
|
<el-input v-model="form.UserName" style="width: 200px" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item v-show="isExpandForm" label="创建日期" style=" display: flex;">
|
<el-date-picker
|
v-model="form.createdate"
|
style="width: 200px"
|
type="date"
|
placeholder="选择日期"
|
/>
|
</el-form-item>
|
</div>
|
<div
|
class="bodySearchReset"
|
:style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
|
>
|
<el-button v-waves type="primary" icon="el-icon-search">查询</el-button>
|
<el-button v-waves type="info" icon="el-icon-refresh">重置</el-button>
|
</div>
|
</el-form>
|
<div
|
class="bodyTopFormExpand"
|
>
|
<svg-icon
|
v-show="mouseHoverType==='mouseout'"
|
style="cursor: pointer"
|
:icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"
|
@mouseenter="mouseHoverType=$event.type"
|
/>
|
<svg-icon
|
v-show="mouseHoverType==='mouseenter'"
|
style="cursor: pointer"
|
:icon-class="!isExpandForm?'doubleDown':'doubleUp'"
|
@click="isExpandForm=!isExpandForm"
|
@mouseout="mouseHoverType=$event.type"
|
/>
|
</div>
|
</div>
|
|
<div
|
class="elTableDiv"
|
>
|
|
<div style="width: 300px;">
|
<el-tree
|
ref="treeLeftRef"
|
style="padding: 10px;"
|
:style="{height:isExpandForm?tableHeight:(tableHeight+105)+'px'}"
|
:data="treeLeft"
|
node-key="code"
|
highlight-current
|
:props="defaultPropsLeft"
|
:default-expand-all="true"
|
@node-click="treeLeftNodeClick"
|
/>
|
</div>
|
|
<div
|
style="margin-left: 15px;width:100%;"
|
>
|
<el-tabs v-model="activeName" type="border-card">
|
<el-tab-pane label="PC端" name="PC端">
|
<div style="display: flex;">
|
|
<div
|
ref="scrollLeft"
|
style="border-right: 1px solid rgba(0,0,0,0.2);width: 200px;
|
overflow-y: auto;overflow-x:hidden;"
|
:style="{height:isExpandForm?tableHeight:(tableHeight+35)+'px',}"
|
@scroll="scrollLeftScroll()"
|
@mouseover="changeScrollLeftFlag('left')"
|
>
|
<div style=" ">
|
<i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 菜单权限
|
</div>
|
<!-- :style="{height:isExpandForm?tableHeight:(tableHeight+15)+'px',}"-->
|
<el-tree
|
ref="treeCenterRef"
|
style="padding-top: 10px;width: 199px;"
|
:data="treeCenter"
|
highlight-current
|
:props="defaultPropsCenter"
|
show-checkbox
|
node-key="code"
|
:default-expand-all="true"
|
@check-change="handleTreeCenterCheckChange"
|
@check="handleTreeCenterCheck"
|
@node-click="getLeftTreeNode"
|
/>
|
</div>
|
|
<div
|
ref="scrollCenter"
|
style="border-right: 1px solid rgba(0,0,0,0.2);width: 600px;padding-left: 10px;overflow-y: auto"
|
:style="{height:isExpandForm?tableHeight:(tableHeight+35)+'px',}"
|
@scroll="scrollCenterScroll()"
|
@mouseover="changeScrollLeftFlag('center')"
|
>
|
<div style=" ">
|
<i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 按钮权限
|
</div>
|
|
<el-checkbox
|
v-model="buttonIsChecked"
|
style="height: 26px;display:flex;align-items: center;margin-top:10px;width:200px"
|
@change="val=>handleCheckAllChange(val,'button')"
|
>全选
|
</el-checkbox>
|
|
<div v-if="treeCenter.length>0">
|
<div v-for="item in treeCenter[0].children" :key="item.code">
|
<div
|
v-if="item.display"
|
style="margin-left: 40px;height:26px;display: flex;"
|
/>
|
|
<el-checkbox-group
|
v-for="it in item.children"
|
v-if="item.expanded"
|
:key="it.code"
|
v-model="it.checkedButton"
|
style="margin-left: 40px;height:26px;display: flex"
|
@change="val=>handleCheckedButtonChange(val,it.code)"
|
>
|
|
<el-checkbox
|
v-for="i in it.itemButton"
|
:key="i"
|
:label="i"
|
style="display:flex;align-items: center"
|
/>
|
</el-checkbox-group>
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
ref="scrollRight"
|
style="width: 360px;padding-left: 10px;overflow-y: auto"
|
:style="{height:isExpandForm?tableHeight:(tableHeight+35)+'px',}"
|
@scroll="scrollRightScroll()"
|
@mouseover="changeScrollLeftFlag('right')"
|
>
|
<div style=" ">
|
<i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 数据权限
|
</div>
|
|
<el-checkbox
|
v-model="dataIsChecked"
|
style="height: 26px;display:flex;align-items: center;margin-top:10px;width:200px"
|
@change="val=>handleCheckAllChange(val,'data')"
|
>全选
|
</el-checkbox>
|
|
<div v-if="treeCenter.length>0">
|
<div v-for="item in treeCenter[0].children" :key="item.code">
|
<div
|
v-if="item.display"
|
style="margin-left: 40px;height:26px;display: flex;"
|
/>
|
|
<el-radio-group
|
v-for="it in item.children"
|
v-if="item.expanded"
|
:key="it.code"
|
v-model="it.checkedData"
|
style="margin-left: 40px;height:26px;display: flex"
|
@change="val=>handleCheckedDataChange(val,it.code)"
|
>
|
<el-radio
|
v-for="i in it.itemData"
|
:key="i"
|
style="display:flex;align-items: center"
|
:label="i"
|
/>
|
</el-radio-group>
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="APP端" name="APP端">大大</el-tab-pane>
|
<el-tab-pane label="工控端" name="工控端">工控端</el-tab-pane>
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import Pagination from '@/components/Pagination'
|
import ImportPicker from '@/components/ImportPicker'
|
import elDragDialog from '@/directive/el-drag-dialog'
|
import waves from '@/directive/waves'
|
import {
|
RolePermissionSearchRole,
|
RolePermissionSearchRoleMenu,
|
RolePermissionSearchRoleMenuButton
|
} from '@/api/basicSettings'
|
import arrayToTree from 'array-to-tree'
|
|
export default {
|
name: 'Zzjg',
|
components: {
|
Pagination, ImportPicker
|
},
|
directives: { elDragDialog, waves },
|
data() {
|
return {
|
mouseHoverType: 'mouseout',
|
isExpandForm: false,
|
mainHeight: 0,
|
tableHeight: 0,
|
form: {
|
OrgCode: '', // 组织架构代码
|
OrgName: '', // 组织架构名称
|
OrgType: '', // 组织类型
|
UserName: '', // 创建人员
|
createdate: '',
|
prop: 'lm_date', // 排序字段
|
order: 'desc', // 排序字段
|
page: 1, // 第几页
|
rows: 20 // 每页多少条
|
},
|
treeLeft: [],
|
treeCenter: [],
|
defaultPropsLeft: {
|
children: 'roles',
|
label: 'name'
|
},
|
defaultPropsCenter: {
|
children: 'children',
|
label: 'name'
|
},
|
activeName: 'PC端',
|
|
buttonIsChecked: false,
|
dataIsChecked: false,
|
|
menuCheckedCodeArr: [], // 菜单权限数组选中的
|
|
allButtonData: [], // 所有的按钮加权限
|
|
isScroll: 'left'
|
|
}
|
},
|
|
created() {
|
this.getRolePermissionSearchRole()
|
},
|
mounted() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
},
|
methods: {
|
|
// 获取角色权限查询角色
|
async getRolePermissionSearchRole() {
|
const { data: res } = await RolePermissionSearchRole()
|
this.treeLeft = res
|
if (res.length > 0) {
|
this.$nextTick(() => { // 默认选中第一个
|
this.$refs.treeLeftRef.setCurrentKey(res[0].roles[0].code) // 默认选中节点第一个
|
})
|
await this.getRolePermissionSearchRoleMenuButton(res[0].roles[0].code)
|
await this.getRolePermissionSearchRoleMenu(res[0].roles[0].code)
|
} else {
|
this.$notify.error('请先建相对应的角色！')
|
}
|
},
|
// 获取菜单权限对应的按钮
|
async getRolePermissionSearchRoleMenuButton(rolecode) {
|
const { data: res } = await RolePermissionSearchRoleMenuButton({ rolecode })
|
this.allButtonData = res
|
},
|
// 获取菜单权限
|
async getRolePermissionSearchRoleMenu(rolecode) {
|
const { data: res } = await RolePermissionSearchRoleMenu({ rolecode, type: 'PC' })
|
|
// 拿到数组list转换成树形tree
|
const result = arrayToTree(res, {
|
parentProperty: 'parentid',
|
customID: 'code',
|
childrenProperty: 'children'
|
})
|
|
this.menuCheckedCodeArr = []
|
|
// console.log(this.allButtonData, 213)
|
result.forEach(item => {
|
if (item.children && item.children.length) {
|
item.children.forEach(it => {
|
// 按钮权限回显
|
const buttonAll = this.allButtonData.tButton.filter(j => j.menucode === it.code).map(j => j.name)
|
const buttonChecked = this.allButtonData.tButton.filter(j =>
|
j.menucode === it.code && j.flag === 'Y'
|
).map(j => j.name)
|
it.itemButton = buttonAll
|
it.checkedButton = buttonChecked
|
|
// 数据权限回显
|
const dataAll = this.allButtonData.tData.filter(j => j.menucode === it.code).map(j => j.name)
|
const dataChecked = this.allButtonData.tData.filter(j => j.menucode === it.code && j.flag === 'Y').name
|
// console.log(dataAll, dataChecked, 2)
|
it.itemData = dataAll
|
it.checkedData = dataChecked
|
|
// 用作菜单勾选回显
|
if (it.flag === 'Y') {
|
this.menuCheckedCodeArr.push(it.code)
|
}
|
})
|
item.display = true
|
item.expanded = true
|
}
|
})
|
|
console.log(JSON.parse(JSON.stringify(result)), 8)
|
|
this.treeCenter = [
|
{ code: '-1', name: '全部', flag: result.every(i => i.flag === 'Y') ? 'Y' : 'N', children: result }
|
]
|
|
// this.buttonIsChecked = result.every(i => i.flag === 'Y')
|
this.handleCheckedButtonChange('', '', true)
|
this.handleCheckedDataChange('', '', true)
|
// console.log(this.menuCheckedCodeArr, 2)
|
this.$nextTick(() => {
|
this.$refs.treeCenterRef.setCheckedKeys(this.menuCheckedCodeArr)
|
})
|
|
this.$forceUpdate()
|
// console.log(this.treeCenter[0].children)
|
},
|
|
// 左边滚动条滑动时
|
scrollLeftScroll() {
|
if (this.isScroll === 'left') {
|
this.$refs.scrollCenter.scrollTop = this.$refs.scrollLeft.scrollTop
|
this.$refs.scrollRight.scrollTop = this.$refs.scrollLeft.scrollTop
|
}
|
},
|
// 中间边滚动条滑动时
|
scrollCenterScroll() {
|
if (this.isScroll === 'center') {
|
this.$refs.scrollLeft.scrollTop = this.$refs.scrollCenter.scrollTop
|
this.$refs.scrollRight.scrollTop = this.$refs.scrollCenter.scrollTop
|
}
|
},
|
// 右侧滚动条滑动时
|
scrollRightScroll() {
|
if (this.isScroll === 'right') {
|
this.$refs.scrollLeft.scrollTop = this.$refs.scrollRight.scrollTop
|
this.$refs.scrollCenter.scrollTop = this.$refs.scrollRight.scrollTop
|
}
|
},
|
|
resize() {
|
|
},
|
|
changeScrollLeftFlag(val) {
|
this.isScroll = val
|
},
|
|
// 全选改变
|
handleCheckAllChange(val, belong) {
|
const checkedKeys = this.$refs.treeCenterRef.getCheckedKeys()
|
|
if (val) {
|
this.treeCenter[0].children.forEach(item => {
|
if (item.children && item.children.length) {
|
item.children.forEach(it => {
|
if (checkedKeys.includes(it.code)) {
|
if (belong === 'button') {
|
it.checkedButton = it.itemButton
|
}
|
if (belong === 'data') {
|
it.checkedData = '全部'
|
}
|
}
|
})
|
}
|
})
|
} else {
|
this.treeCenter[0].children.forEach(item => {
|
if (item.children && item.children.length) {
|
item.children.forEach(it => {
|
if (checkedKeys.includes(it.code)) {
|
if (belong === 'button') {
|
it.checkedButton = []
|
}
|
if (belong === 'data') {
|
it.checkedData = undefined
|
}
|
}
|
})
|
}
|
})
|
}
|
|
// console.log(this.treeCenter[0].children, 20)
|
},
|
// 单个按钮改变
|
handleCheckedButtonChange(value, code, flag) {
|
// 判断是否包含在内
|
if (!flag) {
|
if (!this.menuCheckedCodeArr.includes(code) && value.length === 1) { // 否
|
this.menuCheckedCodeArr.push(code)
|
} else if (this.menuCheckedCodeArr.includes(code) && value.length === 0) { // 是
|
this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== code)
|
}
|
this.$refs.treeCenterRef.setCheckedKeys(this.menuCheckedCodeArr)
|
}
|
|
// 这里是判断全选checkbox 是否选中
|
let count = 0
|
let childrenLength = 0
|
this.treeCenter[0].children.forEach(item => {
|
if (item.children && item.children.length) {
|
item.children.forEach(it => {
|
if (it.checkedButton.length === it.itemButton.length) {
|
count++
|
}
|
childrenLength++
|
})
|
}
|
})
|
this.buttonIsChecked = count === childrenLength
|
this.$forceUpdate()
|
},
|
|
// 获取树形节点node
|
getLeftTreeNode(data, Node, VueComponent) {
|
// console.log(data, Node, VueComponent, 2221)
|
// console.log(Node.expanded)
|
this.treeCenter[0].children.forEach(item => {
|
if (item.name === data.name) {
|
item.expanded = Node.expanded
|
}
|
})
|
if (data.code === '-1') {
|
Node.expanded = true // 暂时先写成这个
|
// this.treeCenter[0].children.forEach(item => {
|
// item.expanded = Node.expanded
|
// })
|
}
|
this.$forceUpdate()
|
},
|
// 处理树形勾选
|
handleTreeCenterCheck(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
|
// console.log(obj, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys, '加多宝')
|
|
if (checkedKeys.length === 0) { // 树形菜单全不选的情况下
|
this.buttonIsChecked = false
|
this.dataIsChecked = false
|
this.menuCheckedCodeArr = []
|
} else {
|
if (checkedKeys.includes(obj.code)) { // 判断是否包含在内 //是
|
this.menuCheckedCodeArr.push(obj.code)
|
} else { // 否
|
this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== obj.code)
|
}
|
}
|
},
|
// 处理树形选中值改变
|
handleTreeCenterCheckChange(obj, selfChecked, selfChildrenTreeCheck) {
|
// console.log(obj, selfChecked, selfChildrenTreeCheck, '王老吉')
|
if (!selfChildrenTreeCheck) {
|
if (!selfChecked) {
|
this.treeCenter[0].children.forEach(item => {
|
if (item.children && item.children.length) {
|
item.children.forEach(it => {
|
if (it.code === obj.code) {
|
it.checkedButton = []
|
it.checkedData = undefined
|
}
|
})
|
}
|
})
|
this.$forceUpdate()
|
}
|
}
|
},
|
|
// 单选框按钮改变
|
handleCheckedDataChange(value, code, flag) {
|
// console.log(value, code)
|
if (flag) {
|
this.menuCheckedCodeArr.push(code)
|
this.menuCheckedCodeArr = [...new Set(this.menuCheckedCodeArr)]
|
|
this.$refs.treeCenterRef.setCheckedKeys(this.menuCheckedCodeArr)
|
}
|
|
// 这里是判断全选radio 是否选中
|
let count = 0
|
let childrenLength = 0
|
this.treeCenter[0].children.forEach(item => {
|
if (item.children && item.children.length) {
|
item.children.forEach(it => {
|
if (it.checkedData) {
|
count++
|
}
|
if (it.itemData.length > 0) {
|
childrenLength++
|
}
|
})
|
}
|
})
|
// console.log(count, childrenLength, 9)
|
this.dataIsChecked = count === childrenLength
|
// console.log(JSON.parse(JSON.stringify(this.treeCenter[0].children)))
|
|
this.$forceUpdate()
|
},
|
|
async treeLeftNodeClick(obj, Node, VueComponent) {
|
// this.menuCheckedCodeArr = []
|
|
await this.getRolePermissionSearchRoleMenuButton(obj.code)
|
await this.getRolePermissionSearchRoleMenu(obj.code)
|
},
|
|
// 获取页面高度
|
getHeight() {
|
this.$nextTick(() => {
|
this.mainHeight = window.innerHeight - 85
|
this.tableHeight = this.mainHeight - 255
|
// this.$refs.tableDataRef.doLayout()
|
})
|
}
|
}
|
}
|
</script>
|
|
<!--公共页面样式-->
|
<style lang="scss" scoped>
|
$main_color: #42b983;
|
::v-deep .el-button--text {
|
font-size: 14px;
|
cursor: pointer;
|
}
|
|
.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
|
color: $main_color;
|
cursor: pointer;
|
}
|
|
.el-icon-edit-outline {
|
margin-right: 15px;
|
}
|
|
::v-deep .el-button--primary, .el-button--default, .el-button--info {
|
height: 34px;
|
display: flex;
|
align-items: center;
|
padding: 0 15px;
|
}
|
|
::v-deep .el-button--primary {
|
//background-color: $main_color !important;
|
}
|
|
::v-deep .el-button--default {
|
background-color: #f8f8fa;
|
border: none;
|
}
|
|
::v-deep .el-input__inner {
|
height: 34px;
|
line-height: 34px;
|
//color: #a7a7a7;
|
}
|
|
::v-deep .el-dialog__body {
|
padding: 20px 100px !important;
|
}
|
|
::v-deep .dialogVisibleRoles .el-dialog__body {
|
padding: 20px 20px !important;
|
}
|
|
::v-deep .importPickerClass .el-dialog__body {
|
padding: 20px 20px !important;
|
}
|
|
::v-deep .el-dialog__footer {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
::v-deep .el-table .caret-wrapper {
|
transform: scale(0.8);
|
}
|
|
::v-deep .cell {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
::v-deep .el-table::before {
|
height: 0;
|
}
|
|
::v-deep .el-table__body-wrapper {
|
background-color: #f8f8fa;
|
}
|
|
::v-deep .el-table__body .el-table__row.hover-row td {
|
background-color: #eaecef;
|
}
|
|
::v-deep .el-form--inline .el-form-item__label {
|
color: #a7a7a7;
|
}
|
|
.body ::v-deep .el-divider {
|
border: 1px solid #eee;
|
width: 99%;
|
margin: 10px auto;
|
}
|
|
.body ::v-deep .el-form-item {
|
margin-bottom: 0;
|
}
|
|
.userDialogVisible ::v-deep .el-form-item {
|
margin-bottom: 0;
|
}
|
|
::v-deep .el-select__caret {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.tableFixed {
|
::v-deep .el-table__fixed-right {
|
height: 100% !important;
|
}
|
|
::v-deep .el-table__fixed {
|
height: 100% !important;
|
}
|
}
|
</style>
|
<style>
|
|
.el-table .custom-row {
|
background: #f8f8fa;
|
}
|
</style>
|
