358 lines
8.5 KiB
Vue
358 lines
8.5 KiB
Vue
<!--
|
||
* @name: 弹窗配置
|
||
* @author: zhangpengcheng
|
||
* @date: 2022-08-25
|
||
-->
|
||
<template>
|
||
<!-- 权限设置弹框 -->
|
||
<!-- :style="{'margin':isCenter?'auto':''}"> -->
|
||
|
||
<div v-loading="treeLoading" flex style="margin: auto; height: 100%">
|
||
<div class="menu-i" flex="cross:center main:center">
|
||
<div class="menu-i-t" flex="cross:top main:justify">
|
||
<el-tree
|
||
:data="menuData"
|
||
:check-strictly="true"
|
||
:current-node-key="currentNodeKey"
|
||
:default-checked-keys="selectData"
|
||
@node-click="handleNodeClick"
|
||
:expand-on-click-node="false"
|
||
:default-expand-all="expandAll"
|
||
:key="keyWord ? keyWord :new Date().getTime()"
|
||
:props="treeProps"
|
||
style="width: 100%; background-color: white; height: 100%"
|
||
@check-change="checkChange"
|
||
:default-expanded-keys="defaultExpandedKeys"
|
||
node-key="pkAccsubj"
|
||
ref="elTree"
|
||
:show-checkbox="showCheckbox"
|
||
>
|
||
</el-tree>
|
||
<div @click="changePcAll" class="checkText" v-if="Allshow">全选</div>
|
||
</div>
|
||
</div>
|
||
<div flex="cross:center main:center" style="width: 100%" v-if="isSaveBtn">
|
||
<el-button style="width: 40%" type="primary" @click="saveMenuUser"
|
||
>保存
|
||
</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
// import { queryMenuList, menuListSave } from '@/api/apis/auth'
|
||
export default {
|
||
props: {
|
||
// 是否默认展开所有节点
|
||
expandAll: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
// 是否显示保存按钮
|
||
isSaveBtn: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 是否显示全选按钮
|
||
Allshow: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 是否显示多选按钮
|
||
showCheckbox: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 是否居中
|
||
isCenter: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
currentNodeKey: {
|
||
type: [String, Number],
|
||
default: '',
|
||
},
|
||
keyWord: {
|
||
type: [String, Number],
|
||
default: '',
|
||
},
|
||
menuData: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
},
|
||
},
|
||
defaultExpandedKeys: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
},
|
||
},
|
||
defaultCheckedKeys: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
},
|
||
},
|
||
setting: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
treeProps: {
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
children: "children",
|
||
label: "label",
|
||
value:'id',
|
||
};
|
||
},
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
theme: "",
|
||
powerDlog: false,
|
||
// 菜单数据
|
||
// menuData: [],
|
||
// 回显选中ids
|
||
selectData: [],
|
||
// 树状图设置
|
||
// treeProps: {
|
||
// label: 'menuName',
|
||
// children: 'id',
|
||
// },
|
||
|
||
// PC菜单全选
|
||
checkedAllPc: false,
|
||
// 防连点
|
||
outing: false,
|
||
treeLoading: false,
|
||
};
|
||
},
|
||
created() {
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
computed: {
|
||
defaultTheme() {
|
||
return this.$store.state.settings.theme;
|
||
},
|
||
},
|
||
watch: {
|
||
defaultTheme: {
|
||
handler: function (val, oldVal) {
|
||
this.theme = val;
|
||
// document.getElementsByTagName('body')[0].style.setProperty('--active', val)
|
||
|
||
// let arr = document.getElementsByClassName('.el-tree-node:focus>.el-tree-node__content')
|
||
// $('.el-tree-node:focus>.el-tree-node__content').css('color',val)
|
||
},
|
||
immediate: true,
|
||
},
|
||
},
|
||
methods: {
|
||
//选中第一个
|
||
clickFirst() {
|
||
document.querySelectorAll(".is-focusable")[0].click();
|
||
},
|
||
buttonL(el) {
|
||
el.active = !el.active;
|
||
this.$forceUpdate();
|
||
},
|
||
setData(id) {
|
||
this.selectData.push(id);
|
||
},
|
||
saveMenuUser() {
|
||
let allKeys = this.getKey();
|
||
this.$emit("onSaveMenu", allKeys);
|
||
},
|
||
// 获取选中的key值
|
||
getKey() {
|
||
return this.$refs.elTree.getCheckedKeys();
|
||
},
|
||
clearKey() {
|
||
// this.nodeKey = new Date().getTime(); // 更新node-key，清空选中状态
|
||
this.$refs.elTree.store.nodesMap = {}; // 清空nodesMap，移除高亮
|
||
this.$forceUpdate(); // 强制更新，使组件重新渲染
|
||
// const nodes = this.$refs.tree.getNodes();
|
||
// nodes.forEach(node => {
|
||
// node.checked = false;
|
||
// });
|
||
},
|
||
// 初始数据
|
||
initData() {
|
||
// 菜单数据
|
||
// this.menuData = [];
|
||
|
||
// 回显选中ids
|
||
this.selectData = [];
|
||
},
|
||
// 关闭弹窗
|
||
handleClose() {
|
||
this.powerDlog = false;
|
||
this.initData();
|
||
},
|
||
// 全选、反选
|
||
changePcAll() {
|
||
this.checkedAllPc = !this.checkedAllPc;
|
||
let selectData = [];
|
||
if (this.checkedAllPc) {
|
||
selectData = this.cycleData(this.menuData);
|
||
}
|
||
this.selectData = selectData;
|
||
},
|
||
/**
|
||
* @description 递归获取菜单id（树状 多叉树结构）
|
||
* @author duanyipeng
|
||
* @createDate 2020/7/31 20:54
|
||
* @param {Array} outData 需要递归的数组
|
||
* @param {Boolean} isSelect: false返回所有id,true返回已选择id
|
||
*/
|
||
cycleData(outData, isSelect) {
|
||
let newData = [];
|
||
|
||
function cycle(data) {
|
||
if (!data || data.length == 0) {
|
||
return false;
|
||
} else {
|
||
for (var i = 0, len = data.length; i < len; i++) {
|
||
let item = data[i];
|
||
if (isSelect && item.selected == 1) {
|
||
newData.push(item.id);
|
||
}
|
||
if (!isSelect) {
|
||
newData.push(item.id);
|
||
}
|
||
cycle(item.id);
|
||
}
|
||
}
|
||
}
|
||
|
||
cycle(outData);
|
||
return newData;
|
||
},
|
||
getData(childIds) {
|
||
let newData = [];
|
||
|
||
function cycle(data) {
|
||
data.forEach((el) => {
|
||
childIds.forEach((item) => {
|
||
if (el.id == item) {
|
||
newData.push(el);
|
||
}
|
||
});
|
||
if (el.children != null && el.children && el.children.length) {
|
||
cycle(el.children, childIds);
|
||
}
|
||
});
|
||
}
|
||
|
||
cycle(this.menuData, childIds);
|
||
return newData;
|
||
},
|
||
/**
|
||
* @description 节点选中状态发生变化时的回调
|
||
* @author duanyipeng
|
||
* @createDate 2020/7/31 20:53
|
||
* @param { Object } nodeDode 当前节点对象
|
||
* @param { Boolean } checked 当前节点是否选中
|
||
*/
|
||
checkChange(nodeDode, checked) {
|
||
let getHalfCheckedKeys = this.$refs.elTree
|
||
.getCheckedKeys()
|
||
.concat(this.$refs.elTree.getHalfCheckedKeys());
|
||
// let getHalfCheckedKeys = this.$refs.elTree.getHalfCheckedKeys()
|
||
let nodeList = this.$refs.elTree.getCheckedNodes();
|
||
let childIds =
|
||
getHalfCheckedKeys.length != 0 ? getHalfCheckedKeys : this.selectData;
|
||
let checkdata = this.getData(childIds);
|
||
this.$emit("checkChange", childIds, checkdata, nodeList);
|
||
return;
|
||
|
||
let id = nodeDode.id;
|
||
// let childIds = this.cycleData(id)
|
||
console.log(id);
|
||
// 循环设置子项是否选中
|
||
childIds.forEach((item) => {
|
||
this.$refs.elTree.setChecked(item, checked);
|
||
});
|
||
},
|
||
// 点击事件
|
||
handleNodeClick(data) {
|
||
this.$emit("handleNodeClick", data);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
// $activeColor:val(--activeColor, "#00aaff");
|
||
|
||
.el-tree-node__content {
|
||
height: 32px !important;
|
||
}
|
||
|
||
.el-tree-node__label {
|
||
font-size: 14px !important;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.el-tree-node__content > label.el-checkbox {
|
||
transform: scale(1.3);
|
||
}
|
||
|
||
.el-tree-node__content > .el-tree-node__expand-icon {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.el-checkbox__label {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.checkBox .el-checkbox__inner {
|
||
transform: scale(1.3);
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.menu-i {
|
||
width: 100%;
|
||
// margin-bottom: 24px;
|
||
|
||
&-f {
|
||
color: #333;
|
||
font-size: 18px;
|
||
text-align: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
&-t {
|
||
width: 100%;
|
||
// height: 450px;
|
||
// border: 1px solid #d8d8d8;
|
||
overflow-y: auto;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.checkBox {
|
||
margin-top: 6px;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.checkText {
|
||
width: 60px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
color: #333;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease-in-out;
|
||
|
||
&:hover {
|
||
color: #4570fc;
|
||
}
|
||
}
|
||
</style>
|