菜单权限

This commit is contained in:
余同学 2024-12-30 17:58:37 +08:00
parent 360d8ddb6f
commit 9334cc877d
5 changed files with 588 additions and 21 deletions

View File

@ -64,7 +64,7 @@ export default {
open: null, open: null,
list: [], list: [],
}, },
{ {
menuId: getUUID(), menuId: getUUID(),
parentId: 0, parentId: 0,
parentName: null, parentName: null,
@ -116,6 +116,19 @@ export default {
open: null, open: null,
list: [], 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: [],
},
], ],
}, },
{ {

View File

@ -8,7 +8,7 @@ import Vue from "vue";
import Router from "vue-router"; import Router from "vue-router";
import http from "@/utils/httpRequest"; import http from "@/utils/httpRequest";
import { isURL } from "@/utils/validate"; import { isURL } from "@/utils/validate";
import { clearLoginInfo } from "@/utils"; import { clearLoginInfo, getMenu } from "@/utils";
import FULL_ROUTERS from "./full-routers"; import FULL_ROUTERS from "./full-routers";
import $api from "@/api/index.js"; import $api from "@/api/index.js";
import store from "@/store"; import store from "@/store";
@ -103,23 +103,24 @@ router.beforeEach((to, from, next) => {
$api $api
.getUserInfo() .getUserInfo()
.then(({ data }) => { .then(({ data }) => {
let permissionsData = getMenu(data.data.role);
const filterTreeData = (data, permissions) => { const filterTreeData = (data, permissions) => {
console.log(data); console.log(data);
return data; //临时性返回所有菜单方便调试 // return data; //临时性返回所有菜单方便调试
// return data.reduce((filtered, node) => { return data.reduce((filtered, node) => {
// // 如果节点的权限在权限数组中 // 如果节点的权限在权限数组中
// if (permissions.includes(node.url)) { if (permissions.includes(node.url)) {
// // 递归过滤子节点 // 递归过滤子节点
// const list = filterTreeData(node.list || [], permissions); const list = filterTreeData(node.list || [], permissions);
// // 创建一个新的节点,包含过滤后的子节点 // 创建一个新的节点,包含过滤后的子节点
// filtered.push({ filtered.push({
// ...node, ...node,
// list, list,
// }); });
// } }
// return filtered; return filtered;
// }, []); }, []);
}; };
console.log(data, "用户信息"); console.log(data, "用户信息");
sessionStorage.setItem("role", JSON.stringify(data.data.role)); sessionStorage.setItem("role", JSON.stringify(data.data.role));
@ -162,10 +163,13 @@ router.beforeEach((to, from, next) => {
JSON.stringify(data.data.permissions || "[]") JSON.stringify(data.data.permissions || "[]")
); );
//添加全量菜单,根据权限进行过滤 //添加全量菜单,根据权限进行过滤
let _menu = filterTreeData( // let _menu = filterTreeData(
FULL_ROUTERS.menuList, // FULL_ROUTERS.menuList,
data.data.permissions // data.data.permissions
); // );
console.log(permissionsData);
let _menu = filterTreeData(FULL_ROUTERS.menuList, permissionsData);
fnAddDynamicMenuRoutes(_menu); fnAddDynamicMenuRoutes(_menu);
sessionStorage.setItem("menuList", JSON.stringify(_menu)); sessionStorage.setItem("menuList", JSON.stringify(_menu));
router.options.isAddDynamicMenuRoutes = true; router.options.isAddDynamicMenuRoutes = true;

View File

@ -136,6 +136,69 @@ function doHandleMonth(month) {
} }
return m; 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) { export function isNumberStr(str) {
return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str); return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str);

View File

@ -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>

View File

@ -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>