fix: simplify dept switcher labels

This commit is contained in:
Your Name 2026-03-31 10:40:08 +08:00
parent bf13d13ba0
commit 9fa05ac39a

View File

@ -12,16 +12,16 @@
<a-select
v-if="switchableDepartments.length > 0"
v-model:value="currentDeptView"
style="width: 120px; margin-right: 8px;"
style="width: 220px; margin-right: 8px;"
size="middle"
@change="handleDeptViewChange"
class="dept-view-select"
>
<a-select-option :value="undefined">
{{ userDeptName }}
{{ userDeptDisplayName }}
</a-select-option>
<a-select-option v-for="dept in switchableDepartments" :key="dept.deptId" :value="dept.deptId">
{{ dept.deptName }}
{{ dept.displayName }}
</a-select-option>
</a-select>
<a-month-picker
@ -2596,11 +2596,12 @@ interface DepartmentViewOption {
deptId: number
deptName: string
deptType: 'demand' | 'receiving' | 'primary_demand'
displayName?: string
}
type ManagedDepartment = DepartmentViewOption
const switchableDepartments = ref<DepartmentViewOption[]>([]) // 用户可切换的其他部门身份
const switchableDepartmentsRaw = ref<DepartmentViewOption[]>([]) // 用户可切换的其他部门身份(原始列表)
const managedDepartments = ref<ManagedDepartment[]>([]) // 用户管理的所有部门
const currentDeptView = ref<number | undefined>(undefined) // 当前选择的部门视角,undefined表示使用用户自己的部门
const userDeptId = ref<number | null>(null)
@ -2609,6 +2610,86 @@ const userDeptType = ref<string>('')
const exportLoading = ref(false) // 导出加载状态
const withdrawingTaskId = ref<number | null>(null) // 正在撤回的任务ID
const TASK_CREATE_PUBLISHER_DEPT_KEY = 'task_create_publisher_dept_id'
const departmentOptions = ref<departmentApi.DepartmentOverview[]>([])
const departmentMap = computed(() => {
const map = new Map<number, departmentApi.DepartmentOverview>()
departmentOptions.value.forEach((dept) => {
map.set(dept.id, dept)
})
return map
})
const buildDepartmentDisplayName = (deptId?: number | null, fallbackName = '') => {
if (!deptId) {
return fallbackName
}
const names: string[] = []
const visited = new Set<number>()
let currentId: number | undefined = deptId
while (currentId && !visited.has(currentId)) {
visited.add(currentId)
const dept = departmentMap.value.get(currentId)
if (!dept) {
break
}
names.unshift(dept.deptName)
currentId = dept.parentId || undefined
}
if (!names.length) {
return fallbackName
}
return names.join(' / ')
}
const isAncestorDepartment = (ancestorDeptId: number, deptId: number) => {
const visited = new Set<number>()
let currentId: number | undefined = deptId
while (currentId && !visited.has(currentId)) {
if (currentId === ancestorDeptId) {
return true
}
visited.add(currentId)
const dept = departmentMap.value.get(currentId)
currentId = dept?.parentId || undefined
}
return false
}
const switchableDepartments = computed<DepartmentViewOption[]>(() => {
const rawDepartments = switchableDepartmentsRaw.value
if (!rawDepartments.length) {
return []
}
return rawDepartments
.filter((dept) => {
if (dept.deptId === currentDeptView.value) {
return true
}
return !rawDepartments.some((otherDept) =>
otherDept.deptId !== dept.deptId &&
otherDept.deptType === dept.deptType &&
isAncestorDepartment(dept.deptId, otherDept.deptId)
)
})
.map((dept) => ({
...dept,
displayName: buildDepartmentDisplayName(dept.deptId, dept.deptName)
}))
})
const userDeptDisplayName = computed(() => {
return buildDepartmentDisplayName(userDeptId.value, userDeptName.value || '我的部门')
})
// 获取当前有效的部门类型(根据选择的视角)
const effectiveDeptType = computed(() => {
@ -2727,7 +2808,7 @@ const initDeptViewData = async () => {
managedDepartments.value = []
}
switchableDepartments.value = Array.from(switchableMap.values())
switchableDepartmentsRaw.value = Array.from(switchableMap.values())
if (currentDeptView.value !== undefined && !switchableMap.has(currentDeptView.value)) {
currentDeptView.value = undefined
@ -3579,6 +3660,7 @@ const loadConfigs = async () => {
// 🔥 加载接单部门列表
const deptResponse = await departmentApi.getDepartmentList()
if (deptResponse && deptResponse.data) {
departmentOptions.value = deptResponse.data
// 过滤出接单部门(deptType === 'receiving'),只保留一级和二级部门
const allDepts = deptResponse.data
const level1DeptIds = new Set(
@ -6935,11 +7017,16 @@ onUnmounted(() => {
// 部门视角切换下拉框样式
.dept-view-select {
:deep(.ant-select-selection-item) {
max-width: 100px;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:deep(.ant-select-item-option-content) {
white-space: normal;
line-height: 1.4;
}
}
}