From 07363a43743da809249dc20025a0462d949cf7e6 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Fri, 21 Nov 2025 15:06:00 +0800
Subject: [PATCH] feat:动态tab
---
src/views/tickets/ticket.vue | 105 ++++++++++++++++++++++++++++++++--------------------
1 files changed, 65 insertions(+), 40 deletions(-)
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index 7432210..747e7d3 100644
--- a/src/views/tickets/ticket.vue
+++ b/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 + ''
--
Gitblit v1.9.3