im-uniapp/pages/workbench/index/index.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',
					access: ['vice, admin', 'doctor', 'ceo', '13'],
          category: "项目中心"
        },
				{
					text: '项目进度',
					icon: '/static/images/progress.png',
					url: '/pages/workbench/project/schedule',
					category: '项目中心'
				},
				{
				  text: '问题反馈',
				  icon: '/static/images/wenti.png',
				  url: '/pages/workbench/feedback/feedback',
					category: "信息中心"
				},
				{
					text: '采购需求',
					icon: '/static/images/requirement.png',
					url: '/pages/workbench/requirement/requirement',
					category: "信息中心"
				},
				{
					text: '客户管理',
					icon: '/static/images/customer.png',
					url: '/pages/workbench/customer/customer',
					category: '信息中心'
				},
				{
					text: '通知公告',
					icon: '/static/images/notice.png',
					url: '/pages/workbench/notice/notice',
					category: '信息中心'
				},
				{
					text: '我的代办',
					icon: '/static/images/todo.png',
					url: '/pages/workbench/hrm/approve/approve',
					category: '办公管理'
				},
				{
					text: '抄送我的',
					icon: '/static/images/cc.png',
					url: '/pages/workbench/hrm/cc/cc',
					category: '办公管理'
				},
				{
					text: '我的申请',
					icon: '/static/images/hrm_apply.png',
					url: '/pages/workbench/hrm/apply/apply',
					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/profitpro.png',
					url: '/pages/workbench/profit/project',
					category: '财务中心',
					// access: ['vice', 'baomi', 'ceo'] // 需要特定权限才能访问
				},
				{
					text: '项目成本',
					icon: '/static/images/cost.png',
					url: '/pages/workbench/cost/cost',
					category: '财务中心',
				},
				{
					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/todo.png',
				// 	url: '/pages/workbench/workflow/todo/todo',
				// 	category: '办公流程'
				// },
				// {
				// 	text: '已办任务',
				// 	icon: '/static/images/finished.png',
				// 	url: '/pages/workbench/workflow/finished/finished',
				// 	category: '办公流程'
				// },
				{
				  text: '线上营销',
				  icon: '/static/images/yingxiao.png',
				  url: '/pages/workbench/sales/sales',
				},
				{
					text: "用户管理",
					icon: '/static/images/user.png',
					url: '/pages/workbench/user/user',
					access: ['vice', 'ceo']
				}
      ],
    };
  },
  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) || [];
				this.$store.commit('oa/SET_STATE', response.data.user)
        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>