feat:动态tab

张含笑

2025-11-21 07363a43743da809249dc20025a0462d949cf7e6

feat:动态tab

 src/views/tickets/ticket.vue

@@ -4,7 +4,7 @@
      <el-tab-pane
        v-for="tab in filteredTabs"
        :key="tab.name"
        :label="`${tab.label} (${tab.count})`"
        :label="tab.name === 'myTickets' ? tab.label : `${tab.label} (${tab.count})`"
        :name="tab.name"
      >
        <basic-main-content>
@@ -146,8 +146,7 @@
           class="ztzf-public-general-el-table custom-header"
          ref="elTable"
          :data="tableData"
          v-loading="loading"
          
          v-loading="loading"    
          @selection-change="handleSelectionChange"
          border
          style="width: 100%"
@@ -160,10 +159,8 @@
              <el-tooltip-copy :content="row.orderNumber" :showCopyText="true" textAlign="left">
                {{ row.orderNumber }}
              </el-tooltip-copy>
              
            </template>
          </el-table-column>
          
          <el-table-column prop="orderName" label="工单名称" width="150" show-overflow-tooltip>
            <template #default="{ row }">
              <el-tooltip-copy :content="row.orderName" :showCopyText="true" textAlign="left">
@@ -393,7 +390,6 @@
  :recheck-data="reCheckData"
  @recheck-success="handleRecheckSuccess"
/>
  
  </basic-container>
</template>

@@ -562,33 +558,39 @@
const checkedKeys = ref([])
const inputMapShowDefaultCenter = ref(null)
const userInfo = computed(() => store.state.user.userInfo)
console.log('userInfo',userInfo);
const permission = computed(() => store.state.user.permission);
const permission = computed(() => store.state.user.permission); 
// console.log('userInfo',permission.value);
// 计算属性
const firstRowData = computed(() => {
  return tableData.value.length > 0 ? tableData.value[0] : null
})
 // 动态过滤tabs，保证isShow为true/false
 const filteredTabs = computed(() => {
  const tabStatus = permission.value?.tickets_tab_status === true
  const tabPending = permission.value?.tickets_tab_pending === true
  const tabMyTickets = permission.value?.tickets_tab_mytickets === true
  
  const tabStatus = permission.value?.tickets_tab_status === true 
  const tabPending = permission.value?.tickets_tab_pending === true//待审核
  const tabMyTickets = permission.value?.tickets_tab_mytickets === true  //我的工单
  const tabALL = permission.value?.tickets_allWorkOrders === true //全部工单
  const tabInProgress= permission.value?.tickets_inProgress === true //处理中 
  const tabProcessing= permission.value?.tickets_pending === true //待处理
  const tabCompleted= permission.value?.tickets_wasDone === true //已完成
  return tabs.value
    .map(tab => {
      if (tab.name === 'all') {
        return { ...tab, isShow: true }
  .map(tab => {
      switch (tab.name) {
        case 'all':
          return { ...tab, isShow: tabALL } // 全部工单
        case 'pending':
          return { ...tab, isShow: tabPending } // 待审核
        case 'myTickets':
          return { ...tab, isShow: tabMyTickets } // 我的工单
        case 'processing':
          return { ...tab, isShow: tabProcessing } // 待处理
        case 'inProgress':
          return { ...tab, isShow: tabInProgress } // 处理中
        case 'completed':
          return { ...tab, isShow: tabCompleted } // 已完成
        default:
          return { ...tab, isShow: false } // 其他标签默认隐藏
      }
      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)
})
@@ -601,6 +603,31 @@
    reviewBtn: validData(permission.value.tickets_review, false),
  }
})
// 计算默认激活的标签（无全部工单时优先激活待审核）
const defaultActiveTab = computed(() => {
  const hasAllTab = filteredTabs.value.some(tab => tab.name === 'all')
  const hasPendingTab = filteredTabs.value.some(tab => tab.name === 'pending')
  
  // 如果没有全部工单权限，但有待审核权限，则默认显示待审核
  if (!hasAllTab && hasPendingTab) {
    return 'pending'
  }
  // 如果有全部工单权限，则默认显示全部工单
  else if (hasAllTab) {
    return 'all'
  }
  // 否则显示第一个可用的tab
  else {
    return filteredTabs.value[0]?.name || 'all'
  }
})
// 提取状态列表计算属性
const statusList = computed(() => {
  const visibleTabs = filteredTabs.value;
  return visibleTabs
    .filter(tab => tab.name !== 'all' && tab.name !== 'myTickets' && tab.value !== undefined)
    .map(tab => String(tab.value));
});
const stepStatusList = computed(() => {
// “我发起的工单”tab用默认流程，其它tab用接口返回的stepInfos
  if (activeTab.value === 'myTickets') {
@@ -623,11 +650,6 @@
  }))
})
// 方法
function regExp(label, name) {
  const reg = new RegExp(label + '=([^&]*)(&|$)', 'g')
  return name.match(reg)[0].split('=')[1]
}

function validData(value, defaultValue) {
  return value !== undefined ? value : defaultValue
}
@@ -782,6 +804,7 @@
  if (isFetching.value) return
  isFetching.value = true
  loading.value = true
  const statusListVal = statusList.value;
  try {
    const currentTab = tabs.value.find(tab => tab.name === activeTab.value)
    const params = {
@@ -806,6 +829,7 @@
      user_id: currentTab?.name === 'myTickets' ? userInfo.value.user_id : undefined,
      is_review: filters.isReview === '' ? undefined : filters.isReview,
      source: 1,
      status_list: statusListVal 
    }

    const response = await getList(params)
@@ -891,7 +915,7 @@

function mapStatus(status) {
  const statusTextMap = {
    '-1': '草稿',
  
    2: '待审核',
    0: '待处理',
    3: '处理中',
@@ -911,16 +935,16 @@
  return colorMap[String(status)] || ''
}

async function fetchTabCounts(val) {
async function fetchTabCounts() {
 const statusListVal = statusList.value;
  const params = {
    status_list: val
    status_list: statusListVal
  }
  try {
    const response = await getstatusCount(params)
    const statusCount = response.data.data || {}
    
    const totalCount = Object.values(statusCount).reduce((sum, count) => sum + (count || 0), 0)
    
    const statusCount = response.data.data || {}  
    console.log('数据',statusCount);
    const totalCount = Object.values(statusCount).reduce((sum, count) => sum + (count || 0), 0)  
    tabs.value.forEach(tab => {
      if (tab.name === 'all') {
        tab.count = totalCount
@@ -940,8 +964,8 @@

function handleTabChange(tab) {
  activeTab.value = tab.props?.name || tab.name
  const statusList = ['0', '2', '3', '4']
  fetchTabCounts(statusList)
  
  fetchTabCounts()
  handleReset()
  page.currentPage = 1
  fetchTableData()
@@ -1446,7 +1470,8 @@
  inputMapShowDefaultCenter.value = null
  loadAMapScripts()
  fetchDropdownData()

 // 设置默认activeTab
  activeTab.value = defaultActiveTab.value
 const href = window.location.href;
  if (route?.query?.status !== undefined && route?.query?.status !== null) {
    filters.status = route?.query?.status + ''