From 8f709aa1f5f1167b47fb4f35ae411da7cd8bb743 Mon Sep 17 00:00:00 2001 From: lbw_9527443 <780139497@qq.com> Date: Mon, 18 Aug 2025 12:13:57 +0800 Subject: [PATCH] =?UTF-8?q?feat(DetailedDataTable):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E7=AD=9B=E9=80=89=E5=99=A8=E4=B8=BA=E5=B1=82=E7=BA=A7=E8=81=94?= =?UTF-8?q?=E5=8A=A8=E9=80=89=E6=8B=A9=E5=B9=B6=E6=B7=BB=E5=8A=A0=E7=A6=81?= =?UTF-8?q?=E7=94=A8=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 重构筛选器组件，将原有的独立下拉框改为基于组织架构的层级联动选择（中心领导->高级经理->经理），并添加禁用状态逻辑。当未选择上级时，下级选择器将被禁用。同时移除注释掉的代码和调试日志。 --- .../topOne/components/DetailedDataTable.vue | 71 ++++++- my-vue-app/src/views/topOne/topone.vue | 190 +++++------------- 2 files changed, 114 insertions(+), 147 deletions(-) diff --git a/my-vue-app/src/views/topOne/components/DetailedDataTable.vue b/my-vue-app/src/views/topOne/components/DetailedDataTable.vue index 7993250..2863a90 100644 --- a/my-vue-app/src/views/topOne/components/DetailedDataTable.vue +++ b/my-vue-app/src/views/topOne/components/DetailedDataTable.vue @@ -6,10 +6,33 @@
-
-
-
- +
+ + +
+
+ + +
+
+ + +
@@ -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; } diff --git a/my-vue-app/src/views/topOne/topone.vue b/my-vue-app/src/views/topOne/topone.vue index 13773a3..438cd52 100644 --- a/my-vue-app/src/views/topOne/topone.vue +++ b/my-vue-app/src/views/topOne/topone.vue @@ -70,6 +70,7 @@
@@ -674,34 +675,6 @@ async function getConversionComparison(data) { const res = await getCompanyConversionRateVsLast(params) console.log(111111,res) conversionComparison.value = res.data - /** - * "data": { - "user_name": "赵世敬", - "user_level": 5, - "check_type": "month", - "company_current_rate": { - "线索总数": 14050, - "加微": 3238, - "到课": 7613, - "付定金": 167, - "成交": 135 - }, - "company_last_rate": { - "线索总数": 17598, - "加微": 3328, - "到课": 3543, - "付定金": 0, - "成交": 0 - }, - "company_current_vs_last_rate": { - "线索总数": "-20.16%", - "加微": "-2.70%", - "到课": "+114.87%", - "付定金": "+∞%", - "成交": "+∞%" - } - } - */ } catch (error) { console.error("获取转化对比失败:", error); } @@ -942,25 +915,6 @@ async function getCenterSalesRank(data) { const res = await getCenterPerformanceRank(params) console.log(1222222,res) centerSalesRank.value = res.data - /** - * "data": { - "user_name": "赵世敬", - "user_level": 5, - "rank_type": "periods", - "center_performance_periods_rank": [ - { - "center_leader": "郭可英", - "total_deals": 0, - "average_deals_per_member": 0 - }, - { - "center_leader": "刘瑞", - "total_deals": 4, - "average_deals_per_member": 0 - } - ] - } - */ } catch (error) { console.error("获取全中心业绩排行榜失败:", error); } @@ -975,49 +929,6 @@ async function getCustomerTypeRatio(data) { const res = await getCustomerTypeDistribution(params) console.log(1222222,res) customerTypeRatio.value = res.data - /** - * data -: -customer_type_distribution -: -Array(7) -0 -: -{category: '初二', ratio: '37.50%'} -1 -: -{category: '高一', ratio: '18.75%'} -2 -: -{category: '初一', ratio: '12.50%'} -3 -: -{category: '五年级', ratio: '12.50%'} -4 -: -{category: '六年级', ratio: '6.25%'} -5 -: -{category: '三年级以下', ratio: '6.25%'} -6 -: -{category: '高三', ratio: '6.25%'} -length -: -7 -[[Prototype]] -: -Array(0) -distribution_type -: -"child_education" -user_level -: -5 -user_name -: -"赵世敬" - */ } catch (error) { console.error("获取客户类型占比失败:", error); } @@ -1029,50 +940,6 @@ async function getCustomerUrgency() { const res = await getUrgentNeedToAddress() console.log(1222222,res) customerUrgency.value = res.data - /** - * data -: -company_urgent_issue_counts -: -回归学校 -: -2 -少玩手机 -: -6 -心理健康 -: -0 -成绩提升 -: -8 -[[Prototype]] -: -Object -company_urgent_issue_ratio -: -回归学校 -: -"12.50%" -少玩手机 -: -"37.50%" -心理健康 -: -"0.00%" -成绩提升 -: -"50.00%" -[[Prototype]] -: -Object -user_level -: -5 -user_name -: -"赵世敬" - */ } catch (error) { console.error("获取客户迫切解决的问题排行榜失败:", error); } @@ -1084,6 +951,55 @@ async function CusotomGetLevelTree() { const res = await getLevelTree() console.log(1222222,res) levelTree.value = res.data + /** + * "data": { + "user_name": "赵世敬", + "user_level": 5, + "level_tree": { + "center_leaders": [ + { + "name": "郭可英", + "advanced_managers": [ + { + "name": "李小燕", + "managers": [] + }, + { + "name": "郭子奇", + "managers": [ + { + "name": "杨朵朵" + }, + { + "name": "张明起" + } + ] + } + ] + }, + { + "name": "刘瑞", + "advanced_managers": [ + { + "name": "陈盼良", + "managers": [ + { + "name": "马然" + }, + { + "name": "杨启晨" + }, + { + "name": "韦少杰" + } + ] + } + ] + } + ] + } + } + */ } catch (error) { console.error("获取级别树失败:", error); } @@ -1110,9 +1026,9 @@ onMounted(async() => { // await getConversionComparison('month') // await getCompanySalesRank('red') // await getCenterSalesRank('periods') - await getCustomerTypeRatio('child_education') - await getCustomerUrgency() - + // await getCustomerTypeRatio('child_education') + // await getCustomerUrgency() +await CusotomGetLevelTree() });