263 lines
6.8 KiB
Vue
263 lines
6.8 KiB
Vue
<template>
|
||
<view class="workbench-container">
|
||
<custom-nav-bar>
|
||
<view class="workbench-title" slot="left">
|
||
<text>工作台</text>
|
||
</view>
|
||
</custom-nav-bar>
|
||
|
||
<!-- 按分类展示入口项 -->
|
||
<view class="category-container" v-for="(group, category) in groupedEntries" :key="category">
|
||
<!-- 分类标题 -->
|
||
<view class="category-title">
|
||
<text>{{ category || '其他' }}</text>
|
||
</view>
|
||
|
||
<!-- 分类下的入口列表 -->
|
||
<view class="entry-list">
|
||
<view
|
||
v-for="item in group"
|
||
:key="item.text"
|
||
class="entry-item"
|
||
@click="handleEntryClick(item)"
|
||
>
|
||
<image class="entry-icon" :src="item.icon" mode="aspectFit" />
|
||
<text class="entry-text">{{ item.text }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import CustomNavBar from '@/components/CustomNavBar/index.vue';
|
||
import { getUserProfile } from '@/api/oa/user.js';
|
||
|
||
export default {
|
||
name: "WorkbenchIndex",
|
||
components: {
|
||
CustomNavBar,
|
||
},
|
||
onShow() {
|
||
console.log('页面onShow被调用');
|
||
this.fetchUserProfile();
|
||
},
|
||
data() {
|
||
return {
|
||
roleGroup: [], // 存储用户拥有的权限集合
|
||
loading: true,
|
||
entryList: [
|
||
{
|
||
text: '每日报工',
|
||
icon: '/static/images/baogong.png',
|
||
url: '/pages/workbench/reportWork/reportWork',
|
||
category: "信息中心"
|
||
// 未设置access时默认允许所有用户访问
|
||
},
|
||
{
|
||
text: '任务中心',
|
||
icon: '/static/images/task.png',
|
||
url: '/pages/workbench/task/task',
|
||
category: "信息中心"
|
||
},
|
||
{
|
||
text: '项目排产',
|
||
icon: '/static/images/paichan.png',
|
||
url: '/pages/workbench/reportSchedule/reportSchedule',
|
||
category: '车间管理'
|
||
},
|
||
{
|
||
text: '施工进度',
|
||
icon: '/static/images/shigong.png',
|
||
url: '/pages/workbench/construction/construction',
|
||
category: '车间管理'
|
||
},
|
||
{
|
||
text: '快递信息',
|
||
icon: '/static/images/express.svg',
|
||
url: '/pages/workbench/express/express',
|
||
category: '车间管理'
|
||
},
|
||
{
|
||
text: '人员考勤',
|
||
icon: '/static/images/kaoqin.png',
|
||
url: '/pages/workbench/attendance/attendance',
|
||
category: '车间管理'
|
||
},
|
||
{
|
||
text: '项目中心',
|
||
icon: '/static/images/project.png',
|
||
url: '/pages/workbench/project/project',
|
||
category: "信息中心"
|
||
},
|
||
{
|
||
text: '问题反馈',
|
||
icon: '/static/images/wenti.png',
|
||
url: '/pages/workbench/feedback/feedback',
|
||
category: "信息中心"
|
||
},
|
||
{
|
||
text: '库存盘点',
|
||
icon: '/static/images/stock.png',
|
||
url: '/pages/workbench/wms/wms',
|
||
category: "库房管理"
|
||
},
|
||
{
|
||
text: '项目盈亏',
|
||
icon: '/static/images/yingkui.png',
|
||
url: '/pages/workbench/profit/profit',
|
||
category: '财务中心',
|
||
access: ['vice', 'baomi', 'ceo'] // 需要特定权限才能访问
|
||
},
|
||
{
|
||
text: '智慧库房',
|
||
icon: '/static/images/smartStock.png',
|
||
url: '/pages/workbench/smartWM/smartWM',
|
||
category: '库房管理',
|
||
},
|
||
{
|
||
text: '采购进度',
|
||
icon: '/static/images/purchase.png',
|
||
url: '/pages/workbench/wms/purchase',
|
||
category: '库房管理',
|
||
},
|
||
{
|
||
text: '入库记录',
|
||
icon: '/static/images/ruku.png',
|
||
url: '/pages/workbench/wms/in',
|
||
category: '库房管理',
|
||
},
|
||
{
|
||
text: '出库记录',
|
||
icon: '/static/images/chuku.png',
|
||
url: '/pages/workbench/wms/out',
|
||
category: '库房管理',
|
||
},
|
||
{
|
||
text: '线上营销',
|
||
icon: '/static/images/yingxiao.png',
|
||
url: '/pages/workbench/sales/sales',
|
||
},
|
||
],
|
||
};
|
||
},
|
||
computed: {
|
||
// 按category分组并过滤权限的计算属性
|
||
groupedEntries() {
|
||
const groups = {};
|
||
this.entryList.forEach(item => {
|
||
// 权限判断逻辑：
|
||
// 1. 如果item没有access属性，默认允许访问
|
||
// 2. 如果有access属性，检查用户权限(roleGroup)是否包含其中任意一个
|
||
const hasAccess = !item.access || item.access.some(access => this.roleGroup.includes(access));
|
||
|
||
// 没有权限则跳过当前项
|
||
if (!hasAccess) return;
|
||
|
||
// 按分类分组
|
||
const category = item.category || '其他';
|
||
if (!groups[category]) {
|
||
groups[category] = [];
|
||
}
|
||
groups[category].push(item);
|
||
});
|
||
return groups;
|
||
}
|
||
},
|
||
methods: {
|
||
async fetchUserProfile() {
|
||
console.log('fetchUserProfile方法开始执行');
|
||
try {
|
||
// this.loading = true;
|
||
uni.showLoading()
|
||
console.log('开始调用getUserProfile API');
|
||
const response = await getUserProfile();
|
||
console.log('用户个人信息:', response);
|
||
// 从接口返回数据中提取用户权限(roleKey)
|
||
const roles = response.data.user?.roles?.map(item => item.roleKey) || [];
|
||
console.log('用户权限字段', roles);
|
||
this.roleGroup = roles;
|
||
uni.hideLoading()
|
||
} catch (error) {
|
||
console.error('获取用户个人信息失败:', error);
|
||
// 错误处理：可以设置默认权限或提示用户
|
||
this.roleGroup = [];
|
||
}
|
||
},
|
||
handleEntryClick(item) {
|
||
if (item.url) {
|
||
uni.navigateTo({ url: item.url });
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.workbench-container {
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.workbench-title {
|
||
padding-left: 44rpx;
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
color: #0c1c33;
|
||
}
|
||
|
||
// 分类容器样式
|
||
.category-container {
|
||
margin-top: 30rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
margin-left: 30rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
// 分类标题样式
|
||
.category-title {
|
||
padding: 28rpx 44rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
background-color: #fafafa;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
// 入口列表样式
|
||
.entry-list {
|
||
display: flex;
|
||
flex-wrap: wrap; // 允许换行
|
||
padding: 10rpx 0;
|
||
}
|
||
|
||
// 入口项样式
|
||
.entry-item {
|
||
display: flex;
|
||
flex-direction: column; // 纵向排列（图标在上，文字在下）
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 25%; // 一行显示4个
|
||
padding: 30rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.entry-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-bottom: 16rpx; // 图标与文字间距
|
||
}
|
||
|
||
.entry-text {
|
||
color: #333;
|
||
font-size: 26rpx;
|
||
text-align: center; // 文字居中
|
||
white-space: nowrap; // 防止文字换行
|
||
overflow: hidden;
|
||
text-overflow: ellipsis; // 文字过长时显示省略号
|
||
width: 100%; // 限制文字宽度
|
||
}
|
||
</style> |