按钮和tab栏权限设计

rain

2025-04-16 150ccce27e0d3684784559bf0a11083f6e9916e8

按钮和tab栏权限设计

 src/views/tickets/ticket.vue

@@ -1,7 +1,7 @@
<template>
  <basic-container>
    <el-tabs v-model="activeTab" @tab-click="handleTabChange">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="`${tab.label} (${tab.count})`" :name="tab.name">
      <el-tab-pane v-for="tab in filteredTabs" :key="tab.name" :label="`${tab.label} (${tab.count})`" :name="tab.name">
        <div class="tab-content">
          <!-- 查询条件筛选栏 -->
          <div class="filter-bar">
@@ -30,13 +30,13 @@
          <!-- 表格部分 -->
          <avue-crud ref="avueCrud" v-model="tableData" :option="option" :data="tableData" v-model:page="page"
            @size-change="sizeChange" @current-change="handleCurrentChange" :table-loading="loading"
            @selection-change="handleSelectionChange">
            @selection-change="handleSelectionChange" :permission="permissionList">
            <template #menu-left>
              <el-button v-if="activeTab === 'all' || activeTab === 'myTickets'" type="primary" icon="el-icon-plus"
              <el-button v-if="(activeTab === 'all' || activeTab === 'myTickets') && permissionList.addBtn" type="primary" icon="el-icon-plus"
                @click="handleAdd">新建工单</el-button>
              <el-button v-if="activeTab === 'pending'" type="success" icon="el-icon-check"
              <el-button v-if="activeTab === 'pending' && permissionList.reviewBtn" type="success" icon="el-icon-check"
                @click="openReviewDialog">批量审核</el-button>
              <el-button type="success" plain icon="el-icon-download" @click="exportData">导出</el-button>
              <el-button v-if="permissionList.exportBtn" type="success" plain icon="el-icon-download" @click="exportData">导出</el-button>
            </template>
            <template #menu="{ row }">
              <template v-if="row.status === -1">
@@ -445,14 +445,15 @@
  data() {
    return {
      activeTab: "all",
      // tabs 只保留静态结构，不做权限判断
      tabs: [
        { label: "全部工单", name: "all", value: null, count: 0, isShow: true },
        { label: "待审核", name: "pending", value: 2, count: 0, isShow: true },
        { label: "待处理", name: "processing", value: 0, count: 0, isShow: true },
        { label: "处理中", name: "inProgress", value: 3, count: 0, isShow: true },
        { label: "已完成", name: "completed", value: 4, count: 0, isShow: true },
        { label: "已完结", name: "closed", value: 5, count: 0, isShow: false },
        { label: "我发起的工单", name: "myTickets", value: null, count: 0, isShow: false },
        { label: "全部工单", name: "all", value: null, count: 0 },
        { label: "待审核", name: "pending", value: 2, count: 0 },
        { label: "待处理", name: "processing", value: 0, count: 0 },
        { label: "处理中", name: "inProgress", value: 3, count: 0 },
        { label: "已完成", name: "completed", value: 4, count: 0 },
        { label: "已完结", name: "closed", value: 5, count: 0 },
        { label: "我发起的工单", name: "myTickets", value: null, count: 0 },
      ],
      filters: {
        keyword: "",
@@ -595,6 +596,8 @@
    this.loadAMapScripts();
    this.fetchDropdownData();
    this.fetchTabCounts(); // 新增：初始化时获取 tab 数据
    console.log('permission', this.permission.tickets_tab_status);
    console.log('permission', this.permission.tickets_tab_pending);
  },
  mounted() {
    this.fetchTableData();
@@ -711,7 +714,38 @@
      }
      return this.fixedStatuses; // 默认流程
    },
    ...mapGetters(['userInfo']),
    ...mapGetters(['userInfo', 'permission']),
    // 动态过滤tabs，保证isShow为true/false
    filteredTabs() {
      // 统一处理权限，undefined视为false
      const tabStatus = this.permission?.tickets_tab_status === true;
      const tabPending = this.permission?.tickets_tab_pending === true;
      const tabMyTickets = this.permission?.tickets_tab_mytickets === true;
      return this.tabs.map(tab => {
        if (tab.name === 'all') {
          return { ...tab, isShow: true };
        }
        if (tab.name === 'pending') {
          return { ...tab, isShow: tabPending };
        }
        if (['processing', 'inProgress', 'completed', 'closed'].includes(tab.name)) {
          return { ...tab, isShow: tabStatus };
        }
        if (tab.name === 'myTickets') {
          return { ...tab, isShow: tabMyTickets };
        }
        return { ...tab, isShow: false };
      }).filter(tab => tab.isShow);
    },
    permissionList() {
      // 可根据实际后端权限key调整
      return {
        addBtn: this.validData(this.permission.tickets_add , false),
        delBtn: this.validData(this.permission.tickets_delete , false),
        exportBtn: this.validData(this.permission.tickets_export , false,),
        reviewBtn: this.validData(this.permission.tickets_review , false),
      };
    },
  },
  methods: {
    async loadAMapScripts() {