LiuRui/DJKB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(DetailedDataTable): 重构筛选器为层级联动选择并添加禁用状态

Browse Source 
重构筛选器组件，将原有的独立下拉框改为基于组织架构的层级联动选择（中心领导->高级经理->经理），并添加禁用状态逻辑。当未选择上级时，下级选择器将被禁用。同时移除注释掉的代码和调试日志。
This commit is contained in:
lbw_9527443
2025-08-18 12:13:57 +08:00
parent 80f4d82a75
commit 8f709aa1f5
2 changed files with 114 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
my-vue-app/src/views/topOne/components/DetailedDataTable.vue
View File

@@ -6,10 +6,33 @@
<div class="data-table-container">
<!-- 筛选器 -->
<div class="table-filters">
<div class="filter-group"><label>中心:</label><select v-model="filters.department"><option value="">全部中心</option><option>销售一部</option><option>销售二部</option><option>销售三部</option></select></div>
<div class="filter-group"><label>高级经理:</label><select v-model="filters.position"><option value="">全部高级经理</option><option>经理1</option><option>经理2</option><option>经理3</option></select></div>
<div class="filter-group"><label>经理:</label><select v-model="filters.timeRange"><option value="today">经理1</option><option value="week">经理2</option><option value="month">经理3</option></select></div>
<!-- <div class="filter-group"><label>成交状态:</label><select v-model="filters.dealStatus"><option value="">全部</option><option>已成交</option><option>跟进中</option><option>已失效</option></select></div> -->
<div class="filter-group">
<label>中心领导:</label>
<select v-model="filters.centerLeader" @change="onCenterLeaderChange">
<option value="">全部中心领导</option>
<option v-for="leader in centerLeaders" :key="leader.name" :value="leader.name">
{{ leader.name }}
</option>
</select>
</div>
<div class="filter-group">
<label>高级经理:</label>
<select v-model="filters.advancedManager" @change="onAdvancedManagerChange" :disabled="!filters.centerLeader">
<option value="">全部高级经理</option>
<option v-for="manager in availableAdvancedManagers" :key="manager.name" :value="manager.name">
{{ manager.name }}
</option>
</select>
</div>
<div class="filter-group">
<label>经理:</label>
<select v-model="filters.manager" :disabled="!filters.advancedManager">
<option value="">全部经理</option>
<option v-for="manager in availableManagers" :key="manager.name" :value="manager.name">
{{ manager.name }}
</option>
</select>
</div>
</div>
<!-- 数据表格 -->
@@ -58,25 +81,52 @@
import { ref, computed } from 'vue';
const props = defineProps({
tableData: { type: Array, required: true },
selectedPerson: { type: Object, default: null }
});
tableData: { type: Array, required: true },
selectedPerson: { type: Object, default: null },
levelTree: { type: Object, default: () => ({}) }
});
defineEmits(['update:selectedPerson']);
const filters = ref({ department: '', position: '', timeRange: 'month', dealStatus: '' });
const filters = ref({ centerLeader: '', advancedManager: '', manager: '', dealStatus: '' });
const sortField = ref('dealRate');
const sortOrder = ref('desc');
const centerLeaders = computed(() => {
return props.levelTree?.level_tree?.center_leaders || [];
});
const availableAdvancedManagers = computed(() => {
if (!filters.value.centerLeader) return [];
const leader = centerLeaders.value.find(l => l.name === filters.value.centerLeader);
return leader ? leader.advanced_managers || [] : [];
});
const availableManagers = computed(() => {
if (!filters.value.advancedManager) return [];
const manager = availableAdvancedManagers.value.find(m => m.name === filters.value.advancedManager);
return manager ? manager.managers || [] : [];
});
const filteredTableData = computed(() => {
let filtered = props.tableData;
if (filters.value.department) filtered = filtered.filter(item => item.department === filters.value.department);
if (filters.value.position) filtered = filtered.filter(item => item.position === filters.value.position);
if (filters.value.centerLeader) filtered = filtered.filter(item => item.centerLeader === filters.value.centerLeader);
if (filters.value.advancedManager) filtered = filtered.filter(item => item.advancedManager === filters.value.advancedManager);
if (filters.value.manager) filtered = filtered.filter(item => item.manager === filters.value.manager);
return filtered.sort((a, b) => {
const aValue = a[sortField.value], bValue = b[sortField.value];
return sortOrder.value === 'desc' ? bValue - aValue : aValue - bValue;
});
});
const onCenterLeaderChange = () => {
filters.value.advancedManager = '';
filters.value.manager = '';
};
const onAdvancedManagerChange = () => {
filters.value.manager = '';
};
const sortBy = (field) => {
if (sortField.value === field) sortOrder.value = sortOrder.value === 'desc' ? 'asc' : 'desc';
else { sortField.value = field; sortOrder.value = 'desc'; }
@@ -100,6 +150,7 @@ const formatDuration = (minutes) => {
.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-group label { font-size: 12px; font-weight: 600; color: #4a5568; }
.filter-group select { padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 6px; }
.filter-group select:disabled { background-color: #f7fafc; color: #a0aec0; cursor: not-allowed; }
.data-table { overflow-x: auto; border-radius: 8px; border: 1px solid #e2e8f0; }
table { width: 100%; border-collapse: collapse; }
th { background: #f7fafc; padding: 12px 16px; text-align: left; font-weight: 600; color: #4a5568; border-bottom: 1px solid #e2e8f0; font-size: 12px; }