菜单权限
This commit is contained in:
余同学
parent
360d8ddb6f
commit
9334cc877d
|
|
@ -64,7 +64,7 @@ export default {
|
|||
open: null,
|
||||
list: [],
|
||||
},
|
||||
{
|
||||
{
|
||||
menuId: getUUID(),
|
||||
parentId: 0,
|
||||
parentName: null,
|
||||
|
|
@ -116,6 +116,19 @@ export default {
|
|||
open: null,
|
||||
list: [],
|
||||
},
|
||||
{
|
||||
menuId: getUUID(),
|
||||
parentId: 0,
|
||||
parentName: null,
|
||||
name: "角色管理",
|
||||
url: "operation-management/role/index",
|
||||
perms: "",
|
||||
type: 1,
|
||||
elIcon: "el-icon-user",
|
||||
orderNum: 0,
|
||||
open: null,
|
||||
list: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import Vue from "vue";
|
|||
import Router from "vue-router";
|
||||
import http from "@/utils/httpRequest";
|
||||
import { isURL } from "@/utils/validate";
|
||||
import { clearLoginInfo } from "@/utils";
|
||||
import { clearLoginInfo, getMenu } from "@/utils";
|
||||
import FULL_ROUTERS from "./full-routers";
|
||||
import $api from "@/api/index.js";
|
||||
import store from "@/store";
|
||||
|
|
@ -103,23 +103,24 @@ router.beforeEach((to, from, next) => {
|
|||
$api
|
||||
.getUserInfo()
|
||||
.then(({ data }) => {
|
||||
let permissionsData = getMenu(data.data.role);
|
||||
const filterTreeData = (data, permissions) => {
|
||||
console.log(data);
|
||||
|
||||
return data; //临时性返回所有菜单方便调试
|
||||
// return data.reduce((filtered, node) => {
|
||||
// // 如果节点的权限在权限数组中
|
||||
// if (permissions.includes(node.url)) {
|
||||
// // 递归过滤子节点
|
||||
// const list = filterTreeData(node.list || [], permissions);
|
||||
// // 创建一个新的节点，包含过滤后的子节点
|
||||
// filtered.push({
|
||||
// ...node,
|
||||
// list,
|
||||
// });
|
||||
// }
|
||||
// return filtered;
|
||||
// }, []);
|
||||
|
||||
// return data; //临时性返回所有菜单方便调试
|
||||
return data.reduce((filtered, node) => {
|
||||
// 如果节点的权限在权限数组中
|
||||
if (permissions.includes(node.url)) {
|
||||
// 递归过滤子节点
|
||||
const list = filterTreeData(node.list || [], permissions);
|
||||
// 创建一个新的节点，包含过滤后的子节点
|
||||
filtered.push({
|
||||
...node,
|
||||
list,
|
||||
});
|
||||
}
|
||||
return filtered;
|
||||
}, []);
|
||||
};
|
||||
console.log(data, "用户信息");
|
||||
sessionStorage.setItem("role", JSON.stringify(data.data.role));
|
||||
|
|
@ -162,10 +163,13 @@ router.beforeEach((to, from, next) => {
|
|||
JSON.stringify(data.data.permissions || "[]")
|
||||
);
|
||||
//添加全量菜单,根据权限进行过滤
|
||||
let _menu = filterTreeData(
|
||||
FULL_ROUTERS.menuList,
|
||||
data.data.permissions
|
||||
);
|
||||
// let _menu = filterTreeData(
|
||||
// FULL_ROUTERS.menuList,
|
||||
// data.data.permissions
|
||||
// );
|
||||
console.log(permissionsData);
|
||||
|
||||
let _menu = filterTreeData(FULL_ROUTERS.menuList, permissionsData);
|
||||
fnAddDynamicMenuRoutes(_menu);
|
||||
sessionStorage.setItem("menuList", JSON.stringify(_menu));
|
||||
router.options.isAddDynamicMenuRoutes = true;
|
||||
|
|
|
|||
|
|
@ -136,6 +136,69 @@ function doHandleMonth(month) {
|
|||
}
|
||||
return m;
|
||||
}
|
||||
/**
|
||||
* 权限
|
||||
* @param {*} min
|
||||
* @param {*} max
|
||||
*/
|
||||
export function getMenu(role) {
|
||||
if (role == "ROLE_MERCHANT" || role == "ROLE_MANAGER") {
|
||||
return [
|
||||
"operation-management",
|
||||
"operation-management/commodity/index",
|
||||
"operation-management/order/index",
|
||||
"operation-management/banner/index",
|
||||
"operation-management/notice/index",
|
||||
"operation-management/role/index",
|
||||
"datacenter",
|
||||
"datacenter/customer-analysis/index",
|
||||
"datacenter/product-analysis/index",
|
||||
"datacenter/order-analysis/index",
|
||||
"coupon/index",
|
||||
"presale",
|
||||
"presale/products/index",
|
||||
"presale/order/index",
|
||||
"marketing",
|
||||
"marketing/level/index",
|
||||
"marketing/user/index",
|
||||
"marketing/points-setting/index",
|
||||
"marketing/points-mall/index",
|
||||
"marketing/points-order/index",
|
||||
"local-course/resources",
|
||||
"wallet/index",
|
||||
"ogistics-fare",
|
||||
"logistics-fare/logistics-template/index",
|
||||
];
|
||||
} else if (role == "ROLE_BRAND_MANAGER") {
|
||||
return [
|
||||
"operation-management",
|
||||
"operation-management/shop-list/index",
|
||||
"operation-management/order/index",
|
||||
"operation-management/role/index",
|
||||
"datacenter",
|
||||
"datacenter/customer-analysis/index",
|
||||
"datacenter/product-analysis/index",
|
||||
"datacenter/order-analysis/index",
|
||||
"brand",
|
||||
"brand/config/index",
|
||||
"local-course/resources",
|
||||
"wallet/index",
|
||||
];
|
||||
} else if (role == "ROLE_AGENT") {
|
||||
return [
|
||||
"operation-management",
|
||||
"operation-management/shop-list/index",
|
||||
"operation-management/order/index",
|
||||
"operation-management/role/index",
|
||||
"datacenter",
|
||||
"datacenter/customer-analysis/index",
|
||||
"datacenter/product-analysis/index",
|
||||
"datacenter/order-analysis/index",
|
||||
"local-course/resources",
|
||||
"wallet/index",
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
export function isNumberStr(str) {
|
||||
return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,280 @@
|
|||
<template>
|
||||
<div>
|
||||
<div style="height: calc(100vh - 200px)">
|
||||
<obj-table-plus
|
||||
ref="oTable"
|
||||
style="height: 100%"
|
||||
:tableCols="tableCols"
|
||||
:tableProp="tableProp"
|
||||
@query="queryList"
|
||||
v-model="dataList"
|
||||
:tableEvent="tableEvent"
|
||||
>
|
||||
<template slot="tableTop">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input
|
||||
placeholder="请输入角色名称"
|
||||
v-model="formInline.name"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="$refs.oTable.reload()"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="primary" @click="Reset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="mb-2">
|
||||
<el-button type="primary" size="small" @click="addBanner"
|
||||
>新增角色</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</obj-table-plus>
|
||||
</div>
|
||||
<!-- 轮播图 -->
|
||||
<addOrUpdate
|
||||
ref="addOrUpdate"
|
||||
@queryList="$refs.oTable.reload()"
|
||||
></addOrUpdate>
|
||||
<el-dialog title="菜单权限" :visible.sync="dialogTableVisible">
|
||||
<el-form ref="form" :model="form" label-width="120px">
|
||||
<el-form-item label="角色权限：">
|
||||
<el-tree
|
||||
style="margin-top: 10px"
|
||||
ref="tree"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expand-all="true"
|
||||
:default-checked-keys="menuCheckKeys"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary">确定</el-button>
|
||||
<el-button @click="dialogTableVisible = false">取消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addOrUpdate from "./popup/add-or-update.vue";
|
||||
import { mapState } from "vuex";
|
||||
import FULL_ROUTERS from "@/router/full-routers";
|
||||
export default {
|
||||
components: { addOrUpdate },
|
||||
data() {
|
||||
return {
|
||||
dialogTableVisible: false,
|
||||
activeName: "5",
|
||||
advanceSellStatus: "",
|
||||
dataList: [],
|
||||
form: {},
|
||||
formInline: {
|
||||
name: "",
|
||||
},
|
||||
tableProp: {
|
||||
"auto-resize": true,
|
||||
border: true,
|
||||
height: "auto",
|
||||
"row-id": "id",
|
||||
"show-overflow": false,
|
||||
},
|
||||
selectList: [],
|
||||
data: [],
|
||||
defaultProps: {
|
||||
children: "list",
|
||||
label: "name",
|
||||
value: "menuId",
|
||||
},
|
||||
menuCheckKeys: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addBanner() {
|
||||
this.$refs.addOrUpdate.toggle().add(this.formInline);
|
||||
},
|
||||
queryList(pageNo, pageSize) {
|
||||
console.log(FULL_ROUTERS);
|
||||
this.data = FULL_ROUTERS.menuList;
|
||||
|
||||
setTimeout(() => {
|
||||
let data = [
|
||||
{
|
||||
col: "market_id",
|
||||
id: null,
|
||||
name: "市场经营者",
|
||||
operator: "eq",
|
||||
role: "ROLE_MANAGER",
|
||||
},
|
||||
{
|
||||
col: null,
|
||||
id: null,
|
||||
name: "商户",
|
||||
operator: null,
|
||||
role: "ROLE_MERCHANT",
|
||||
},
|
||||
{
|
||||
col: null,
|
||||
id: null,
|
||||
name: "专员",
|
||||
operator: null,
|
||||
role: "ROLE_ASSISTANT",
|
||||
},
|
||||
{
|
||||
col: null,
|
||||
id: null,
|
||||
name: "代理商",
|
||||
operator: null,
|
||||
role: "ROLE_AGENT",
|
||||
},
|
||||
{
|
||||
col: "MarketId",
|
||||
id: null,
|
||||
name: "老师",
|
||||
operator: null,
|
||||
role: "123",
|
||||
},
|
||||
{
|
||||
col: "",
|
||||
id: null,
|
||||
name: "测试",
|
||||
operator: "",
|
||||
role: "ROLE_cheshi",
|
||||
},
|
||||
];
|
||||
this.$refs.oTable.complete(data, Number(5));
|
||||
}, 500);
|
||||
// this.$api.mer_admin
|
||||
// .noticePage({
|
||||
// pageNumber: pageNo,
|
||||
// pageSize: pageSize,
|
||||
// ...this.formInline,
|
||||
// })
|
||||
// .then((res) => {
|
||||
// console.log(res);
|
||||
// this.$refs.oTable.complete(
|
||||
// res.data.data.data,
|
||||
// Number(res.data.data.total)
|
||||
// );
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// this.$refs.oTable.complete(false);
|
||||
// });
|
||||
},
|
||||
Reset() {
|
||||
this.formInline = {
|
||||
name: "",
|
||||
};
|
||||
this.$refs.oTable.reload();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
tableCols() {
|
||||
return [
|
||||
// { type: "checkbox", width: "60px", fixed: "left" },
|
||||
{
|
||||
type: "seq",
|
||||
width: "60px",
|
||||
fixed: "left",
|
||||
align: "center",
|
||||
title: "序号",
|
||||
},
|
||||
{
|
||||
title: "角色名称",
|
||||
align: "center",
|
||||
field: "name",
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
align: "center",
|
||||
field: "remark",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
fixed: "right",
|
||||
type: "jsx",
|
||||
width: "380px",
|
||||
align: "center",
|
||||
render: ({ row }) => {
|
||||
//权限
|
||||
let permission = () => {
|
||||
this.dialogTableVisible = true;
|
||||
};
|
||||
let updateBanner = () => {
|
||||
this.$refs.addOrUpdate.toggle(row).update();
|
||||
};
|
||||
let deleteBanner = () => {};
|
||||
let onCancel = () => {};
|
||||
return (
|
||||
<div>
|
||||
<el-button
|
||||
style="margin-right:10px"
|
||||
size="mini"
|
||||
type="warning"
|
||||
onClick={permission}
|
||||
>
|
||||
菜单权限
|
||||
</el-button>
|
||||
<el-button
|
||||
style="margin-right:10px"
|
||||
size="mini"
|
||||
type="success"
|
||||
onClick={updateBanner}
|
||||
>
|
||||
数据权限
|
||||
</el-button>
|
||||
<el-button
|
||||
style="margin-right:20px"
|
||||
size="mini"
|
||||
type="primary"
|
||||
onClick={updateBanner}
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
onConfirm={deleteBanner}
|
||||
onCancel={onCancel}
|
||||
confirm-button-text="确定"
|
||||
cancel-button-text="取消"
|
||||
icon="el-icon-info"
|
||||
icon-color="red"
|
||||
title="确定删除吗？"
|
||||
>
|
||||
<el-button size="mini" type="danger" slot="reference">
|
||||
删除
|
||||
</el-button>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
tableEvent() {
|
||||
return {
|
||||
"checkbox-all": ({ records, reserves }) => {
|
||||
this.selectList = [...records, ...reserves];
|
||||
},
|
||||
"checkbox-change": ({ records, reserves }) => {
|
||||
this.selectList = [...records, ...reserves];
|
||||
},
|
||||
};
|
||||
},
|
||||
...mapState("userData", [
|
||||
"isMerchant",
|
||||
"marketList",
|
||||
"storeList",
|
||||
"marketId",
|
||||
"shopId",
|
||||
]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<template>
|
||||
<div>
|
||||
<obj-modal
|
||||
ref="modal"
|
||||
labelWidth="150px"
|
||||
:modalCols="modalCols"
|
||||
:modalConfig="modalConfig"
|
||||
:modalData="modalData"
|
||||
:modalHandles="modalHandles"
|
||||
>
|
||||
<template slot="dialog__after"> </template>
|
||||
</obj-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { debounce, cloneDeep } from "lodash";
|
||||
import { Divider } from "element-ui";
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isAdd: true,
|
||||
//表格属性
|
||||
modalConfig: {
|
||||
title: "",
|
||||
show: false,
|
||||
width: "700px",
|
||||
},
|
||||
modalData: {},
|
||||
settingId: "",
|
||||
form: {},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"modalConfig.show"(newVal) {
|
||||
if (!newVal) {
|
||||
//关闭弹窗清空校验
|
||||
setTimeout(() => {
|
||||
this.$refs.modal.resetFields();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
queryTableData(pageNo, pageSize) {},
|
||||
toggle(e) {
|
||||
if (this.modalConfig.show == false) {
|
||||
this.modalConfig.show = true;
|
||||
} else {
|
||||
this.modalConfig.show = false;
|
||||
}
|
||||
if (e) {
|
||||
this.init(cloneDeep(e));
|
||||
}
|
||||
return {
|
||||
add: (row) => {
|
||||
console.log(row);
|
||||
this.modalData = {
|
||||
targetId: row.targetId,
|
||||
title: "",
|
||||
position: row.position,
|
||||
type: 0,
|
||||
status: true,
|
||||
app: 1,
|
||||
};
|
||||
this.fileList = [];
|
||||
this.modalConfig.title = "添加角色";
|
||||
this.isAdd = true;
|
||||
},
|
||||
update: () => {
|
||||
this.modalConfig.title = "编辑角色";
|
||||
this.isAdd = false;
|
||||
},
|
||||
};
|
||||
},
|
||||
init(row) {
|
||||
this.modalData = row;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
modalCols() {
|
||||
return [
|
||||
{
|
||||
label: "角色名称",
|
||||
prop: "name",
|
||||
type: "Input",
|
||||
required: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: "请输入角色名称",
|
||||
trigger: "blur",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "角色编码",
|
||||
prop: "roleCode",
|
||||
type: "Input",
|
||||
required: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: "请输入角色编码",
|
||||
trigger: "blur",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "权限字段",
|
||||
prop: "col",
|
||||
type: "Input",
|
||||
required: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: "请输入权限字段",
|
||||
trigger: "blur",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "数据范围",
|
||||
prop: "range",
|
||||
maxlength: "30",
|
||||
rules: {
|
||||
required: true,
|
||||
message: "请选择数据范围",
|
||||
trigger: "blur",
|
||||
},
|
||||
type: "jsx",
|
||||
render: () => {
|
||||
return (
|
||||
<el-select
|
||||
v-model={this.modalData.range}
|
||||
placeholder="请选择销售单位"
|
||||
>
|
||||
{[
|
||||
{
|
||||
label: "仅本级",
|
||||
value: "eq",
|
||||
},
|
||||
{
|
||||
label: "本级及以下",
|
||||
value: "in",
|
||||
},
|
||||
{
|
||||
label: "全部",
|
||||
value: "all",
|
||||
},
|
||||
].map((item) => {
|
||||
return (
|
||||
<el-option
|
||||
label={item.label}
|
||||
value={item.value}
|
||||
></el-option>
|
||||
);
|
||||
})}
|
||||
</el-select>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "remark",
|
||||
type: "Textarea",
|
||||
required: true,
|
||||
maxlength: "120",
|
||||
rows: "5",
|
||||
rules: {
|
||||
required: true,
|
||||
message: "请输入备注内容",
|
||||
trigger: "blur",
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
modalHandles() {
|
||||
return [
|
||||
{
|
||||
label: "取消",
|
||||
handle: () => {
|
||||
this.toggle();
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "确认",
|
||||
type: "primary",
|
||||
submit: true,
|
||||
handle: () => {
|
||||
console.log(this.modalData);
|
||||
this.toggle();
|
||||
// if (this.isAdd) {
|
||||
// this.$api.mer_admin.noticeAdd(this.modalData).then((res) => {
|
||||
// this.toggle();
|
||||
// this.$emit("queryList");
|
||||
// });
|
||||
// } else {
|
||||
// this.$api.mer_admin.noticeUpdate(this.modalData).then((res) => {
|
||||
// this.toggle();
|
||||
// this.$emit("queryList");
|
||||
// });
|
||||
// }
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
asyncComputed: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
Loading…
Reference in New Issue