This commit is contained in:
ping 2025-11-18 14:20:54 +08:00
commit be9f5634d0
5 changed files with 220 additions and 76 deletions

View File

@ -14,5 +14,7 @@ const getters = {
permission_routes: state => state.permission.routes, permission_routes: state => state.permission.routes,
userType: state => state.user.userType || sessionStorage.getItem('userType') || '', userType: state => state.user.userType || sessionStorage.getItem('userType') || '',
orgType: state => state.user.orgType || parseInt(sessionStorage.getItem('orgType')) || 0, orgType: state => state.user.orgType || parseInt(sessionStorage.getItem('orgType')) || 0,
// 新增角色获取
roles: state => state.user.roles || JSON.parse(sessionStorage.getItem('roles') || '[]'),
} }
export default getters export default getters

View File

@ -7,8 +7,16 @@ const userAgent = window.navigator.userAgent;
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent); const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
// 修复:更全面的路由过滤逻辑 // 修复:更全面的路由过滤逻辑
function filterAsyncRoutes(routes, permissions) { function filterAsyncRoutes(routes, permissions, userRoles = []) {
const res = []; const res = [];
// 定义需要客户角色才能访问的路由
const customerOnlyRoutes = [
"/product", "/overview", "/workOrderManagement",
"/unsubscribeManagement", "/informationPerfect",
"/rechargeManagement", "/invoiceManagement"
];
routes.forEach(route => { routes.forEach(route => {
// 创建路由副本 // 创建路由副本
const tmpRoute = { ...route }; const tmpRoute = { ...route };
@ -16,16 +24,21 @@ function filterAsyncRoutes(routes, permissions) {
// 检查当前路由是否在权限列表中 // 检查当前路由是否在权限列表中
const hasPermission = permissions.some(p => p.path === route.meta?.fullPath); const hasPermission = permissions.some(p => p.path === route.meta?.fullPath);
// 特殊处理:确保"全部产品"和"资源概览"这两个一级路由始终显示 // 检查是否为仅客户可访问的路由
const isCriticalRoute = route.path === "/product" || route.path === "/overview"; const isCustomerOnlyRoute = customerOnlyRoutes.includes(route.path);
// 如果当前路由有权限或者是关键路由,则加入结果 // 如果路由需要客户角色,但用户不是客户,则跳过
if (hasPermission || isCriticalRoute) { if (isCustomerOnlyRoute && !userRoles.includes('客户')) {
return; // 跳过当前路由
}
// 如果当前路由有权限,则加入结果
if (hasPermission) {
res.push(tmpRoute); res.push(tmpRoute);
} }
// 如果没有直接权限,但有子路由,递归处理子路由 // 如果没有直接权限,但有子路由,递归处理子路由
else if (tmpRoute.children) { else if (tmpRoute.children) {
const filteredChildren = filterAsyncRoutes(tmpRoute.children, permissions); const filteredChildren = filterAsyncRoutes(tmpRoute.children, permissions, userRoles);
if (filteredChildren.length > 0) { if (filteredChildren.length > 0) {
tmpRoute.children = filteredChildren; tmpRoute.children = filteredChildren;
res.push(tmpRoute); // 即使父路由本身没有权限,只要有子路由有权限,也要保留父路由 res.push(tmpRoute); // 即使父路由本身没有权限,只要有子路由有权限,也要保留父路由
@ -37,8 +50,8 @@ function filterAsyncRoutes(routes, permissions) {
} }
// 新增:为普通用户添加订单管理和资源管理路由 // 新增:为普通用户添加订单管理和资源管理路由
function addUserRoutes(routes, userType, orgType) { function addUserRoutes(routes, userType, orgType, userRoles = []) {
console.log("addUserRoutes - userType:", userType, "orgType:", orgType); console.log("addUserRoutes - userType:", userType, "orgType:", orgType, "userRoles:", userRoles);
const userRoutes = []; const userRoutes = [];
@ -58,14 +71,17 @@ function addUserRoutes(routes, userType, orgType) {
} }
} }
// 新增:为所有用户添加五个新的客户菜单 // 新增:为所有用户添加五个新的客户菜单,但只有客户角色才能看到
const newCustomerRoutes = [ const newCustomerRoutes = [
routes.find(route => route.path === "/workOrderManagement"), routes.find(route => route.path === "/workOrderManagement"),
routes.find(route => route.path === "/unsubscribeManagement"), routes.find(route => route.path === "/unsubscribeManagement"),
routes.find(route => route.path === "/informationPerfect"), routes.find(route => route.path === "/informationPerfect"),
routes.find(route => route.path === "/rechargeManagement"), routes.find(route => route.path === "/rechargeManagement"),
routes.find(route => route.path === "/invoiceManagement") routes.find(route => route.path === "/invoiceManagement")
].filter(route => route); // 过滤掉undefined ].filter(route => {
// 过滤掉undefined并且只有客户角色才能看到这些路由
return route && userRoles.includes('客户');
});
console.log("添加新的客户菜单路由:", newCustomerRoutes.map(r => r.path)); console.log("添加新的客户菜单路由:", newCustomerRoutes.map(r => r.path));
userRoutes.push(...newCustomerRoutes); userRoutes.push(...newCustomerRoutes);
@ -121,7 +137,7 @@ const mutations = {
}; };
const actions = { const actions = {
generateRoutes({ commit }, params) { generateRoutes({ commit, rootState }, params) {
console.log("ACTION generateRoutes - params:", params); console.log("ACTION generateRoutes - params:", params);
return new Promise((resolve) => { return new Promise((resolve) => {
let accessedRoutes; let accessedRoutes;
@ -130,6 +146,10 @@ const actions = {
const userType = params.userType || sessionStorage.getItem('userType') || ''; const userType = params.userType || sessionStorage.getItem('userType') || '';
const orgType = params.orgType || parseInt(sessionStorage.getItem('orgType')) || 0; const orgType = params.orgType || parseInt(sessionStorage.getItem('orgType')) || 0;
// 获取用户角色从store或sessionStorage
const userRoles = rootState.user.roles || JSON.parse(sessionStorage.getItem('roles') || '[]');
console.log("用户角色:", userRoles);
console.log("用户类型:", userType, "orgType:", orgType); console.log("用户类型:", userType, "orgType:", orgType);
if (params.user && params.user.includes("admin") && orgType != 2) { if (params.user && params.user.includes("admin") && orgType != 2) {
@ -150,8 +170,8 @@ const actions = {
// 如果权限列表包含空路径,认为用户有所有权限 // 如果权限列表包含空路径,认为用户有所有权限
accessedRoutes = asyncRoutes || []; accessedRoutes = asyncRoutes || [];
} else { } else {
// 使用修复后的过滤函数 // 使用修复后的过滤函数,传入用户角色
accessedRoutes = filterAsyncRoutes(asyncRoutes, auths); accessedRoutes = filterAsyncRoutes(asyncRoutes, auths, userRoles);
} }
} else { } else {
// 如果没有权限列表,不显示任何动态路由 // 如果没有权限列表,不显示任何动态路由
@ -160,10 +180,20 @@ const actions = {
// 新增:为普通用户添加订单管理和资源管理路由以及新的五个客户菜单 // 新增:为普通用户添加订单管理和资源管理路由以及新的五个客户菜单
console.log("为用户添加特定路由"); console.log("为用户添加特定路由");
const userSpecificRoutes = addUserRoutes(asyncRoutes, userType, orgType); const userSpecificRoutes = addUserRoutes(asyncRoutes, userType, orgType, userRoles);
// 确保不重复添加路由 // 确保不重复添加路由,同时检查角色权限
userSpecificRoutes.forEach(route => { userSpecificRoutes.forEach(route => {
const isCustomerRoute = [
"/workOrderManagement", "/unsubscribeManagement", "/informationPerfect",
"/rechargeManagement", "/invoiceManagement"
].includes(route.path);
// 如果是客户路由但用户不是客户,则不添加
if (isCustomerRoute && !userRoles.includes('客户')) {
return;
}
if (!accessedRoutes.some(r => r.path === route.path)) { if (!accessedRoutes.some(r => r.path === route.path)) {
accessedRoutes.push(route); accessedRoutes.push(route);
} }

View File

@ -14,7 +14,8 @@ const getStoredState = () => {
auths: JSON.parse(sessionStorage.getItem('auths')) || [], auths: JSON.parse(sessionStorage.getItem('auths')) || [],
userType: sessionStorage.getItem('userType') || '', userType: sessionStorage.getItem('userType') || '',
orgType: parseInt(sessionStorage.getItem('orgType')) || '', orgType: parseInt(sessionStorage.getItem('orgType')) || '',
mybalance: sessionStorage.getItem('mybalance') || '' mybalance: sessionStorage.getItem('mybalance') || '',
roles: JSON.parse(sessionStorage.getItem('roles')) || []
}; };
}; };
@ -36,7 +37,9 @@ const state = {
// 新增用户类型admin/user // 新增用户类型admin/user
userType: storedState.userType, userType: storedState.userType,
// 新增:组织类型 // 新增:组织类型
orgType: storedState.orgType orgType: storedState.orgType,
// 新增:用户角色
roles: storedState.roles
}; };
const mutations = { const mutations = {
@ -76,6 +79,11 @@ const mutations = {
SET_ORG_TYPE: (state, orgType) => { SET_ORG_TYPE: (state, orgType) => {
state.orgType = orgType; state.orgType = orgType;
sessionStorage.setItem("orgType", orgType.toString()); sessionStorage.setItem("orgType", orgType.toString());
},
// 新增:设置用户角色
SET_ROLES: (state, roles) => {
state.roles = roles;
sessionStorage.setItem("roles", JSON.stringify(roles));
} }
}; };
@ -105,12 +113,17 @@ const actions = {
const {data, org_type} = response; const {data, org_type} = response;
commit("SET_USER", username); commit("SET_USER", username);
// 新增:根据 org_type 设置用户类型 // 新增:根据 org_type 设置用户类型和角色
// org_type 为 2 表示客户,其他为管理员 // org_type 为 2 表示客户,其他为管理员
const userType = org_type == 2 ? 'user' : 'admin'; const userType = org_type == 2 ? 'user' : 'admin';
// 设置用户角色 - 如果是客户,则添加'客户'角色
const userRoles = org_type == 2 ? ['客户'] : ['管理员'];
commit("SET_USER_TYPE", userType); commit("SET_USER_TYPE", userType);
commit("SET_ORG_TYPE", org_type); commit("SET_ORG_TYPE", org_type);
console.log("登录用户类型:", userType, "org_type:", org_type); commit("SET_ROLES", userRoles); // 新增:设置用户角色
console.log("登录用户类型:", userType, "org_type:", org_type, "用户角色:", userRoles);
data ? commit("SET_AUTHS", data) : commit("SET_AUTHS", []); data ? commit("SET_AUTHS", data) : commit("SET_AUTHS", []);
const accessRoutes = await store.dispatch( const accessRoutes = await store.dispatch(
@ -119,7 +132,8 @@ const actions = {
user: username, user: username,
auths: data, auths: data,
userType: userType, userType: userType,
orgType: org_type orgType: org_type,
roles: userRoles // 新增:传递角色信息
} }
) )
resetRouter(); resetRouter();
@ -145,6 +159,7 @@ const actions = {
const auths = sessionStorage.getItem('auths'); const auths = sessionStorage.getItem('auths');
const userType = sessionStorage.getItem('userType'); const userType = sessionStorage.getItem('userType');
const orgType = sessionStorage.getItem('orgType'); const orgType = sessionStorage.getItem('orgType');
const roles = sessionStorage.getItem('roles');
if (user) { if (user) {
commit("SET_USER", user); commit("SET_USER", user);
@ -158,12 +173,16 @@ const actions = {
if (orgType) { if (orgType) {
commit("SET_ORG_TYPE", parseInt(orgType)); commit("SET_ORG_TYPE", parseInt(orgType));
} }
if (roles) {
commit("SET_ROLES", JSON.parse(roles));
}
resolve({ resolve({
user: state.user, user: state.user,
auths: state.auths, auths: state.auths,
userType: state.userType, userType: state.userType,
orgType: state.orgType orgType: state.orgType,
roles: state.roles
}); });
}); });
}, },
@ -188,6 +207,7 @@ const actions = {
sessionStorage.removeItem('userType'); sessionStorage.removeItem('userType');
sessionStorage.removeItem('orgType'); sessionStorage.removeItem('orgType');
sessionStorage.removeItem('mybalance'); sessionStorage.removeItem('mybalance');
sessionStorage.removeItem('roles'); // 新增:清除角色信息
// reset visited views and cached views // reset visited views and cached views
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485 // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
@ -218,6 +238,7 @@ const actions = {
sessionStorage.removeItem('auths'); sessionStorage.removeItem('auths');
sessionStorage.removeItem('userType'); sessionStorage.removeItem('userType');
sessionStorage.removeItem('orgType'); sessionStorage.removeItem('orgType');
sessionStorage.removeItem('roles'); // 新增:清除角色信息
resolve(); resolve();
}); });
}, },
@ -250,5 +271,4 @@ export default {
state, state,
mutations, mutations,
actions, actions,
}; };

View File

@ -1,13 +1,69 @@
<template> <template>
<div class="container"> <div class="container">
<el-card> <el-card>
<el-table v-loading="loading" ref="table" :data="tableData" tooltip-effect="dark" style="width: 100%" <!-- 搜索表单 -->
@selection-change="handleSelectionChange" height="calc(100vh - 190px)"> <el-form :model="query" inline class="search-form">
<el-form-item label="客户名称">
<el-input
v-model="query.orgname"
placeholder="请输入客户名称"
size="small"
clearable
@keyup.enter.native="handleSearch">
</el-input>
</el-form-item>
<el-form-item label="联系方式">
<el-input
v-model="query.contactor_phone"
placeholder="请输入联系方式"
size="small"
clearable
@keyup.enter.native="handleSearch">
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
<el-button size="small" @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<!-- 客户表格 -->
<el-table
v-loading="loading"
ref="table"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
height="calc(100vh - 320px)">
<el-table-column type="selection" width="55"></el-table-column> <el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="orgname" label="客户名称"></el-table-column> <el-table-column prop="orgname" label="客户名称">
<template slot-scope="scope">
{{ scope.row.orgname || scope.row.contactor_phone || '未知客户' }}
</template>
</el-table-column>
<el-table-column label="联系方式" prop="contactor_phone"></el-table-column> <el-table-column label="联系方式" prop="contactor_phone"></el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.address || '未填写地址' }}
</template>
</el-table-column>
</el-table> </el-table>
<!-- 分页组件 -->
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="query.page"
:page-sizes="[10, 20, 50, 100]"
:page-size="query.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<!-- 操作按钮 -->
<div class="button-container"> <div class="button-container">
<el-button @click="selectSales()" size="small" type="primary" :disabled="!hasSelection" class="action-button"> <el-button @click="selectSales()" size="small" type="primary" :disabled="!hasSelection" class="action-button">
选择销售 选择销售
@ -18,13 +74,14 @@
</el-button> </el-button>
</div> </div>
</el-card> </el-card>
<!-- 选择销售对话框 -->
<el-dialog class="myDialog" title="选择销售人员" :visible.sync="isShow" width="30%" :before-close="handleClose"> <el-dialog class="myDialog" title="选择销售人员" :visible.sync="isShow" width="30%" :before-close="handleClose">
<el-form ref="form" :model="form" label-width="130px"> <el-form ref="form" :model="form" label-width="130px">
<el-form-item label="请选择销售人员:" style="width: 80%;" prop="sales"> <el-form-item label="请选择销售人员:" style="width: 100%;" prop="sales">
<!-- 添加一个容器来应用滚动样式 -->
<div class="radio-group-container"> <div class="radio-group-container">
<el-radio-group v-model="form.id"> <el-radio-group v-model="form.id">
<div class="radio" v-for="(item, index) in salesData" :key="index"> <div class="radio-item" v-for="(item, index) in salesData" :key="index">
<el-radio :label="item.id">{{ item.username }}</el-radio> <el-radio :label="item.id">{{ item.username }}</el-radio>
</div> </div>
</el-radio-group> </el-radio-group>
@ -49,19 +106,22 @@ export default {
tableData: [], tableData: [],
salesData: [], salesData: [],
isShow: false, isShow: false,
page: 1, total: 0,
form: { form: {
username: '', username: '',
id: '' id: ''
}, },
defaultProps: {
children: "children",
label: "username",
},
customerid: [], // id customerid: [], // id
hasSelection: false, // hasSelection: false, //
userId: sessionStorage.getItem("userId"), userId: sessionStorage.getItem("userId"),
orgid: sessionStorage.getItem("orgid"), orgid: sessionStorage.getItem("orgid"),
query: {
page: 1,
size: 10,
orgid: this.orgid,
orgname: '',
contactor_phone: ''
},
}; };
}, },
created() { created() {
@ -70,25 +130,26 @@ export default {
}, },
methods: { methods: {
getNoinvitationcode() { // getNoinvitationcode() { //
getNoinvitationcodeAPI({ orgid: this.orgid }).then(res => { this.loading = true;
getNoinvitationcodeAPI(this.query).then(res => {
this.loading = false; this.loading = false;
this.tableData = res.data.rows; this.tableData = res.data.rows;
// console.log(res); this.total = res.pagination.total;
}).catch(() => {
this.loading = false;
}); });
}, },
getSales() { // getSales() { //
getSalesAPI({ role: "销售", userid: this.userId }).then(res => { getSalesAPI({ role: "销售", userid: this.userId }).then(res => {
// console.log(res); if (res.data && res.data.length > 0) {
if (res.data.length > 0) {
this.salesData = res.data.map((item) => { this.salesData = res.data.map((item) => {
return { return {
username: item.username, username: item.username,
id: item.id, id: item.id,
}; };
}); });
// } else {
// this.salesData = [];
// this.form.id = this.salesData[0]?.id || '';
} }
}); });
}, },
@ -98,14 +159,12 @@ export default {
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
// ID // ID
this.customerid = val.map(item => item.id); // this.customerid = val.map(item => item.id);
// //
this.hasSelection = this.customerid.length > 0; this.hasSelection = this.customerid.length > 0;
// console.log(this.customerid);
}, },
cancelSelection() { cancelSelection() {
this.$refs.table.clearSelection(); this.$refs.table.clearSelection();
// clearSelection handleSelectionChange
this.hasSelection = false; this.hasSelection = false;
this.customerid = []; this.customerid = [];
}, },
@ -163,54 +222,84 @@ export default {
cancel() { cancel() {
this.isShow = false; this.isShow = false;
}, },
// getFormData(object) { // formdata - 使 handleSearch() {
// const formData = new FormData(); this.query.page = 1; //
// Object.keys(object).forEach(key => { this.getNoinvitationcode();
// const value = object[key]; },
// if (Array.isArray(value)) { handleReset() {
// value.forEach((subValue, i) => { this.query = {
// formData.append(key + `[${i}]`, subValue) page: 1,
// }) size: 10,
// } else { orgid: this.orgid,
// formData.append(key, object[key]) orgname: '',
// } contactor_phone: ''
// }) };
// return formData; this.getNoinvitationcode();
// }, },
handleSizeChange(size) {
this.query.size = size;
this.getNoinvitationcode();
},
handleCurrentChange(page) {
this.query.page = page;
this.getNoinvitationcode();
}
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
.container { .container {
padding: 20px;
.search-form {
margin-bottom: 20px;
.el-form-item {
margin-bottom: 10px;
margin-right: 15px;
}
}
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: center;
}
.button-container { .button-container {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
gap: 10px; // gap: 10px;
}
.action-button { .action-button {
padding: 8px 16px; // padding: 8px 16px;
font-size: 14px; // font-size: 14px;
border-radius: 4px; // border-radius: 4px;
}
} }
.myDialog { .myDialog {
.radio-group-container { .radio-group-container {
//
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
border: 1px solid #e4e7ed; // border: 1px solid #e4e7ed;
border-radius: 4px; // border-radius: 4px;
padding: 5px; // padding: 10px;
} }
.radio { .radio-item {
// margin-bottom: 8px;
margin-bottom: 5px; // padding: 5px;
border-radius: 4px;
transition: background-color 0.3s;
&:hover {
background-color: #f5f7fa;
}
&:last-child { &:last-child {
margin-bottom: 0; // margin-bottom: 0;
} }
} }
@ -220,4 +309,7 @@ export default {
} }
} }
} }
/deep/.el-table__row{
height: 62px!important;
}
</style> </style>