397 lines
11 KiB
Vue
397 lines
11 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<base-right-dialog
|
||
|
|
ref="baseRightDialog"
|
||
|
|
:footerShow="true"
|
||
|
|
:appendBody="true"
|
||
|
|
:dialogVisible.sync="drawer"
|
||
|
|
:withHeader="false"
|
||
|
|
title="权限分配"
|
||
|
|
@handleClose="handleDialogClose"
|
||
|
|
@handleConfirmClick="handleConfirmClick"
|
||
|
|
:size="'60%'"
|
||
|
|
>
|
||
|
|
<el-tabs v-model="activeName">
|
||
|
|
<el-tab-pane label="功能权限" name="first">
|
||
|
|
<el-table
|
||
|
|
border
|
||
|
|
ref="multipleTable"
|
||
|
|
:data="menuDatas"
|
||
|
|
row-key="id"
|
||
|
|
tooltip-effect="dark"
|
||
|
|
style="width: 100%"
|
||
|
|
:default-expand-all="true"
|
||
|
|
:default-checked-keys="keys"
|
||
|
|
@select-all="selectAll"
|
||
|
|
@select="handleSelectionChange"
|
||
|
|
v-loading="buttonLoading"
|
||
|
|
>
|
||
|
|
<el-table-column
|
||
|
|
type="selection"
|
||
|
|
width="45"
|
||
|
|
:reserve-selection="true"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="name"
|
||
|
|
label="菜单名称"
|
||
|
|
width="200"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column prop="buttonSelection" label="按钮">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<i
|
||
|
|
class="el-icon-star-on"
|
||
|
|
style="
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
font-size: 25px;
|
||
|
|
margin-right: 7px;
|
||
|
|
"
|
||
|
|
v-show="
|
||
|
|
scope.row.buttons.length != 0 &&
|
||
|
|
scope.row.buttons.length == scope.row.buttonList.length
|
||
|
|
"
|
||
|
|
@click="cancellation(scope.row)"
|
||
|
|
></i>
|
||
|
|
<i
|
||
|
|
class="el-icon-star-on"
|
||
|
|
style="
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
font-size: 25px;
|
||
|
|
margin-right: 7px;
|
||
|
|
color: #808080;
|
||
|
|
"
|
||
|
|
v-show="
|
||
|
|
scope.row.buttons.length != 0 &&
|
||
|
|
scope.row.buttons.length != scope.row.buttonList.length
|
||
|
|
"
|
||
|
|
@click="selectAllButton(scope.row)"
|
||
|
|
></i>
|
||
|
|
<el-checkbox-group v-model="scope.row.buttonList" size="small">
|
||
|
|
<el-checkbox
|
||
|
|
v-for="item in scope.row.buttons"
|
||
|
|
:label="item.id"
|
||
|
|
:key="item.id"
|
||
|
|
>{{ item.NameCN }}</el-checkbox
|
||
|
|
>
|
||
|
|
</el-checkbox-group>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table></el-tab-pane
|
||
|
|
>
|
||
|
|
<el-tab-pane label="数据权限" name="second">
|
||
|
|
<data-permissions ref="dataPermissions"></data-permissions>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="首页拖拽权限" name="layOutAuth">
|
||
|
|
<layOutPermissions ref="layOutPermissions"></layOutPermissions>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</base-right-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import baseRightDialog from "@/components/base/baseRightDialog";
|
||
|
|
import { PopedomSaveData, GetAllBilldata } from "@/api/apis/jurisdiction";
|
||
|
|
import dataPermissions from "./dataPermissions.vue";
|
||
|
|
import layOutPermissions from "./layOutPermissions.vue";
|
||
|
|
import loginVue from "../../../login.vue";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
drawer: false,
|
||
|
|
multipleSelection: [],
|
||
|
|
keys: [],
|
||
|
|
isAllSelect: false,
|
||
|
|
selected: false,
|
||
|
|
childNode: false,
|
||
|
|
build: "",
|
||
|
|
activeName: "first",
|
||
|
|
dataPermissions: [],
|
||
|
|
buttonLoading: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
props: {
|
||
|
|
menuData: {
|
||
|
|
type: Array,
|
||
|
|
default: () => {
|
||
|
|
return [];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
components: {
|
||
|
|
baseRightDialog,
|
||
|
|
dataPermissions,
|
||
|
|
layOutPermissions,
|
||
|
|
},
|
||
|
|
|
||
|
|
beforeUpdate() {
|
||
|
|
this.handleTabClick();
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
menuDatas: {
|
||
|
|
// return JSON.parse(JSON.stringify(this.menuData));
|
||
|
|
get: function () {
|
||
|
|
return JSON.parse(JSON.stringify(this.menuData));
|
||
|
|
},
|
||
|
|
set: function (item) {
|
||
|
|
return JSON.parse(JSON.stringify(item));
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
// tab切换
|
||
|
|
handleTabClick() {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.multipleTable && this.$refs.multipleTable.doLayout();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
selectAllButton(item) {
|
||
|
|
let data = [];
|
||
|
|
item.buttons.forEach((el) => {
|
||
|
|
data.push(el.id);
|
||
|
|
});
|
||
|
|
item.buttonList = data;
|
||
|
|
},
|
||
|
|
cancellation(item) {
|
||
|
|
item.buttonList = [];
|
||
|
|
},
|
||
|
|
// 全选/取消全选
|
||
|
|
selectAll() {
|
||
|
|
let data = this.treeToArray(this.menuDatas);
|
||
|
|
this.selected = !this.selected;
|
||
|
|
data.forEach((el, index) => {
|
||
|
|
this.$refs.multipleTable.toggleRowSelection(el, this.selected);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
handleSelectionChange(val, row) {
|
||
|
|
this.multipleSelection = val;
|
||
|
|
let data = this.treeToArray([row]);
|
||
|
|
this.childNode = !this.childNode;
|
||
|
|
if (data.length > 1) {
|
||
|
|
data.forEach((el, index) => {
|
||
|
|
this.$refs.multipleTable.toggleRowSelection(el, this.childNode);
|
||
|
|
});
|
||
|
|
let ids = data[0].id;
|
||
|
|
let arr = this.treeFindPath(
|
||
|
|
this.menuDatas,
|
||
|
|
(data) => data.id == ids,
|
||
|
|
"id"
|
||
|
|
);
|
||
|
|
arr = arr.splice(0, arr.length - 1);
|
||
|
|
let dataList = [];
|
||
|
|
let allList = this.treeToArray(this.menuDatas);
|
||
|
|
allList.forEach((el, index) => {
|
||
|
|
if (arr.includes(el.id)) {
|
||
|
|
dataList.push(el);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
dataList.forEach((el, index) => {
|
||
|
|
this.$refs.multipleTable.toggleRowSelection(el, true);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
let ids = data[0].id;
|
||
|
|
let arr = this.treeFindPath(
|
||
|
|
this.menuDatas,
|
||
|
|
(data) => data.id == ids,
|
||
|
|
"id"
|
||
|
|
);
|
||
|
|
arr = arr.splice(0, arr.length - 1);
|
||
|
|
let dataList = [];
|
||
|
|
let allList = this.treeToArray(this.menuDatas);
|
||
|
|
allList.forEach((el, index) => {
|
||
|
|
if (arr.includes(el.id)) {
|
||
|
|
dataList.push(el);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
dataList.forEach((el, index) => {
|
||
|
|
this.$refs.multipleTable.toggleRowSelection(el, true);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 默认选中
|
||
|
|
exhibitList(id, echo, build) {
|
||
|
|
let data = this.treeToArray(this.menuDatas);
|
||
|
|
this.build = build;
|
||
|
|
data.forEach((el, index) => {
|
||
|
|
if (id.includes(el.id)) {
|
||
|
|
this.$refs.multipleTable.toggleRowSelection(el, true);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.menuDatas = this.addToButtonList(this.menuDatas, echo);
|
||
|
|
this.buttonLoading = false;
|
||
|
|
},
|
||
|
|
// 数据扁平
|
||
|
|
treeToArray(items) {
|
||
|
|
let children = [];
|
||
|
|
items.forEach((item) => {
|
||
|
|
children.push(item);
|
||
|
|
if (item.children) {
|
||
|
|
children = children.concat(this.treeToArray(item.children));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return children;
|
||
|
|
},
|
||
|
|
handleDialogClose() {
|
||
|
|
let data = this.treeToArray(this.menuDatas);
|
||
|
|
data.forEach((el, index) => {
|
||
|
|
this.$refs.multipleTable.toggleRowSelection(el, false);
|
||
|
|
});
|
||
|
|
this.changeMenu(this.menuDatas, 0);
|
||
|
|
this.drawer = false;
|
||
|
|
this.$parent.permissionPopup = false;
|
||
|
|
},
|
||
|
|
async handleConfirmClick() {
|
||
|
|
let data = {
|
||
|
|
objectID: this.build,
|
||
|
|
kindid: 2,
|
||
|
|
menuPopedom: "",
|
||
|
|
buttonPopedom: [],
|
||
|
|
dataPopedom: [],
|
||
|
|
widgetPopedom: "",
|
||
|
|
};
|
||
|
|
this.$refs.multipleTable.selection.forEach((el, index) => {
|
||
|
|
let dataLength = this.$refs.multipleTable.selection.length;
|
||
|
|
if (index == dataLength - 1) {
|
||
|
|
data.menuPopedom = data.menuPopedom.concat(`${el.id}`);
|
||
|
|
} else {
|
||
|
|
data.menuPopedom = data.menuPopedom.concat(`${el.id},`);
|
||
|
|
}
|
||
|
|
if (el.buttonList.length != 0) {
|
||
|
|
data.buttonPopedom.push({
|
||
|
|
op_MenuID: el.id,
|
||
|
|
op_OperateKindList: el.buttonList + [],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
let dataPopedom = [];
|
||
|
|
this.$refs.dataPermissions.tableData.forEach((el) => {
|
||
|
|
dataPopedom.push({
|
||
|
|
dp_billKindID: el.billKindID,
|
||
|
|
dp_popeList: el.buttonList.length > 0 ? el.buttonList + [] : "",
|
||
|
|
});
|
||
|
|
});
|
||
|
|
let tempStr = "";
|
||
|
|
this.$refs.layOutPermissions.tableData.forEach((item) => {
|
||
|
|
item.buttonList.forEach((ele) => {
|
||
|
|
tempStr += ele + ",";
|
||
|
|
});
|
||
|
|
});
|
||
|
|
data.widgetPopedom = tempStr.length ? tempStr.slice(0, -1) : "none";
|
||
|
|
data.dataPopedom = dataPopedom;
|
||
|
|
const res = await PopedomSaveData(data);
|
||
|
|
if (res.success == "true") {
|
||
|
|
this.handleDialogClose();
|
||
|
|
this.$message({
|
||
|
|
message: "保存成功",
|
||
|
|
type: "success",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 递归，添加选中按钮
|
||
|
|
addToButtonList(arr, newArr) {
|
||
|
|
newArr.forEach((newItem) => {
|
||
|
|
this.addToButtonListRecursive(
|
||
|
|
arr,
|
||
|
|
newItem.op_MenuID,
|
||
|
|
newItem.op_OperateKindList
|
||
|
|
);
|
||
|
|
});
|
||
|
|
return arr;
|
||
|
|
},
|
||
|
|
addToButtonListRecursive(arr, targetId, operateKindList) {
|
||
|
|
for (let i = 0; i < arr.length; i++) {
|
||
|
|
const item = arr[i];
|
||
|
|
if (item.id == targetId) {
|
||
|
|
let lists = operateKindList.split(",");
|
||
|
|
lists.forEach((el) => {
|
||
|
|
item.buttonList.push(parseInt(el));
|
||
|
|
});
|
||
|
|
return item;
|
||
|
|
}
|
||
|
|
if (item.children && item.children.length > 0) {
|
||
|
|
this.addToButtonListRecursive(
|
||
|
|
item.children,
|
||
|
|
targetId,
|
||
|
|
operateKindList
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
changeMenu(data, num) {
|
||
|
|
let level = num;
|
||
|
|
level = level + 1;
|
||
|
|
data.forEach((el) => {
|
||
|
|
el.buttonList = [];
|
||
|
|
el.type = false;
|
||
|
|
if (el.children != null && el.children && el.children.length) {
|
||
|
|
this.changeMenu(el.children, level);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
toFlatArray(tree, parentId) {
|
||
|
|
return tree.reduce((t, _) => {
|
||
|
|
const child = _[children];
|
||
|
|
return [
|
||
|
|
...t,
|
||
|
|
parentId ? { ..._, parentId } : _,
|
||
|
|
...(child && child.length ? toFlatArray(child, _[id]) : []),
|
||
|
|
];
|
||
|
|
}, []);
|
||
|
|
},
|
||
|
|
getIds(flatArray) {
|
||
|
|
let ids = [nodeId];
|
||
|
|
let child = flatArray.find((_) => _[id] === nodeId);
|
||
|
|
while (child && child.parentId) {
|
||
|
|
ids = [child.parentId, ...ids];
|
||
|
|
child = flatArray.find((_) => _[id] === child.parentId);
|
||
|
|
}
|
||
|
|
return ids;
|
||
|
|
},
|
||
|
|
|
||
|
|
treeFindPath(tree, func, field = "", path = []) {
|
||
|
|
if (!tree) return [];
|
||
|
|
for (const data of tree) {
|
||
|
|
field === "" ? path.push(data) : path.push(data[field]);
|
||
|
|
if (func(data)) return path;
|
||
|
|
if (data.children) {
|
||
|
|
const findChildren = this.treeFindPath(
|
||
|
|
data.children,
|
||
|
|
func,
|
||
|
|
field,
|
||
|
|
path
|
||
|
|
);
|
||
|
|
if (findChildren.length) return findChildren;
|
||
|
|
}
|
||
|
|
path.pop();
|
||
|
|
}
|
||
|
|
return [];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.rightDialog {
|
||
|
|
height: 100%;
|
||
|
|
padding: 0 16px;
|
||
|
|
}
|
||
|
|
::v-deep .cell {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
::v-deep .el-checkbox-group {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
::v-deep .el-checkbox {
|
||
|
|
margin-right: 15px;
|
||
|
|
}
|
||
|
|
::v-deep .el-tabs__nav {
|
||
|
|
transform: translateX(22px) !important;
|
||
|
|
}
|
||
|
|
</style>
|