yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: crm statistics customer

pull/155/head
xingyu4j 2025-06-22 19:43:31 +08:00
parent f5f28380db
commit b2310b226c
4 changed files with 997 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
apps/web-antd/src/api/crm/statistics/customer.ts
View File

@ -97,6 +97,71 @@ export namespace CrmStatisticsCustomerApi {
interval: number;
deptId: number;
userId: number;
userIds: number[];
}
}
export function getDatas(activeTabName: any, params: any) {
switch (activeTabName) {
case 'conversionStat': {
return getContractSummary(params);
}
case 'customerSummary': {
return getCustomerSummaryByUser(params);
}
case 'dealCycleByArea': {
return getCustomerDealCycleByArea(params);
}
case 'dealCycleByProduct': {
return getCustomerDealCycleByProduct(params);
}
case 'dealCycleByUser': {
return getCustomerDealCycleByUser(params);
}
case 'followUpSummary': {
return getFollowUpSummaryByUser(params);
}
case 'followUpType': {
return getFollowUpSummaryByType(params);
}
case 'poolSummary': {
return getPoolSummaryByUser(params);
}
default: {
return [];
}
}
}
export function getChartOptions(activeTabName: any, params: any) {
switch (activeTabName) {
case 'conversionStat': {
return getCustomerSummaryByDate(params);
}
case 'customerSummary': {
return getCustomerSummaryByDate(params);
}
case 'dealCycleByArea': {
return getCustomerDealCycleByArea(params);
}
case 'dealCycleByProduct': {
return getCustomerDealCycleByProduct(params);
}
case 'dealCycleByUser': {
return getCustomerDealCycleByUser(params);
}
case 'followUpSummary': {
return getFollowUpSummaryByDate(params);
}
case 'followUpType': {
return getFollowUpSummaryByType(params);
}
case 'poolSummary': {
return getPoolSummaryByDate(params);
}
default: {
return [];
}
}
}

529
apps/web-antd/src/views/crm/statistics/customer/chartOptions.ts Normal file
View File

@ -0,0 +1,529 @@
import { DICT_TYPE, getDictLabel } from '#/utils';
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
case 'conversionStat': {
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
series: [
{
name: '客户转化率',
type: 'line',
data: res.map((item: any) => {
return {
name: item.time,
value: item.customerCreateCount
? (
(item.customerDealCount / item.customerCreateCount) *
100
).toFixed(2)
: 0,
};
}),
},
],
toolbox: {
feature: {
dataZoom: {
xAxisIndex: false, // 数据区域缩放：Y 轴不缩放
},
brush: {
type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '客户转化率分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
yAxis: {
type: 'value',
name: '转化率(%)',
},
xAxis: {
type: 'category',
name: '日期',
data: res.map((s: any) => s.time),
},
};
}
case 'customerSummary': {
return {
grid: {
bottom: '5%',
containLabel: true,
left: '5%',
right: '5%',
top: '5 %',
},
legend: {},
series: [
{
name: '新增客户数',
type: 'bar',
yAxisIndex: 0,
data: res.map((item: any) => item.customerCreateCount),
},
{
name: '成交客户数',
type: 'bar',
yAxisIndex: 1,
data: res.map((item: any) => item.customerDealCount),
},
],
toolbox: {
feature: {
dataZoom: {
xAxisIndex: false, // 数据区域缩放：Y 轴不缩放
},
brush: {
type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
yAxis: [
{
type: 'value',
name: '新增客户数',
min: 0,
minInterval: 1, // 显示整数刻度
},
{
type: 'value',
name: '成交客户数',
min: 0,
minInterval: 1, // 显示整数刻度
splitLine: {
lineStyle: {
type: 'dotted', // 右侧网格线虚化, 减少混乱
opacity: 0.7,
},
},
},
],
xAxis: {
type: 'category',
name: '日期',
data: res.map((item: any) => item.time),
},
};
}
case 'dealCycleByArea': {
const data = res.map((s: any) => {
return {
areaName: s.areaName,
customerDealCycle: s.customerDealCycle,
customerDealCount: s.customerDealCount,
};
});
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
series: [
{
name: '成交周期(天)',
type: 'bar',
data: data.map((s: any) => s.customerDealCycle),
yAxisIndex: 0,
},
{
name: '成交客户数',
type: 'bar',
data: data.map((s: any) => s.customerDealCount),
yAxisIndex: 1,
},
],
toolbox: {
feature: {
dataZoom: {
xAxisIndex: false, // 数据区域缩放：Y 轴不缩放
},
brush: {
type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
yAxis: [
{
type: 'value',
name: '成交周期(天)',
min: 0,
minInterval: 1, // 显示整数刻度
},
{
type: 'value',
name: '成交客户数',
min: 0,
minInterval: 1, // 显示整数刻度
splitLine: {
lineStyle: {
type: 'dotted', // 右侧网格线虚化, 减少混乱
opacity: 0.7,
},
},
},
],
xAxis: {
type: 'category',
name: '区域',
data: data.map((s: any) => s.areaName),
},
};
}
case 'dealCycleByProduct': {
const data = res.map((s: any) => {
return {
productName: s.productName ?? '未知',
customerDealCycle: s.customerDealCount,
customerDealCount: s.customerDealCount,
};
});
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
series: [
{
name: '成交周期(天)',
type: 'bar',
data: data.map((s: any) => s.customerDealCycle),
yAxisIndex: 0,
},
{
name: '成交客户数',
type: 'bar',
data: data.map((s: any) => s.customerDealCount),
yAxisIndex: 1,
},
],
toolbox: {
feature: {
dataZoom: {
xAxisIndex: false, // 数据区域缩放：Y 轴不缩放
},
brush: {
type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
yAxis: [
{
type: 'value',
name: '成交周期(天)',
min: 0,
minInterval: 1, // 显示整数刻度
},
{
type: 'value',
name: '成交客户数',
min: 0,
minInterval: 1, // 显示整数刻度
splitLine: {
lineStyle: {
type: 'dotted', // 右侧网格线虚化, 减少混乱
opacity: 0.7,
},
},
},
],
xAxis: {
type: 'category',
name: '产品名称',
data: data.map((s: any) => s.productName),
},
};
}
case 'dealCycleByUser': {
const customerDealCycleByDate = res.customerDealCycleByDate;
const customerDealCycleByUser = res.customerDealCycleByUser;
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
series: [
{
name: '成交周期(天)',
type: 'bar',
data: customerDealCycleByDate.map((s: any) => s.customerDealCycle),
yAxisIndex: 0,
},
{
name: '成交客户数',
type: 'bar',
data: customerDealCycleByUser.map((s: any) => s.customerDealCount),
yAxisIndex: 1,
},
],
toolbox: {
feature: {
dataZoom: {
xAxisIndex: false, // 数据区域缩放：Y 轴不缩放
},
brush: {
type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
yAxis: [
{
type: 'value',
name: '成交周期(天)',
min: 0,
minInterval: 1, // 显示整数刻度
},
{
type: 'value',
name: '成交客户数',
min: 0,
minInterval: 1, // 显示整数刻度
splitLine: {
lineStyle: {
type: 'dotted', // 右侧网格线虚化, 减少混乱
opacity: 0.7,
},
},
},
],
xAxis: {
type: 'category',
name: '日期',
data: customerDealCycleByDate.map((s: any) => s.time),
},
};
}
case 'followUpSummary': {
return {
grid: {
left: 20,
right: 30, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
series: [
{
name: '跟进客户数',
type: 'bar',
yAxisIndex: 0,
data: res.map((s: any) => s.followUpCustomerCount),
},
{
name: '跟进次数',
type: 'bar',
yAxisIndex: 1,
data: res.map((s: any) => s.followUpRecordCount),
},
],
toolbox: {
feature: {
dataZoom: {
xAxisIndex: false, // 数据区域缩放：Y 轴不缩放
},
brush: {
type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '客户跟进次数分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
yAxis: [
{
type: 'value',
name: '跟进客户数',
min: 0,
minInterval: 1, // 显示整数刻度
},
{
type: 'value',
name: '跟进次数',
min: 0,
minInterval: 1, // 显示整数刻度
splitLine: {
lineStyle: {
type: 'dotted', // 右侧网格线虚化, 减少混乱
opacity: 0.7,
},
},
},
],
xAxis: {
type: 'category',
name: '日期',
axisTick: {
alignWithLabel: true,
},
data: res.map((s: any) => s.time),
},
};
}
case 'followUpType': {
return {
title: {
text: '客户跟进方式分析',
left: 'center',
},
legend: {
orient: 'vertical',
left: 'left',
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c}% ',
},
toolbox: {
feature: {
saveAsImage: { show: true, name: '客户跟进方式分析' }, // 保存为图片
},
},
series: [
{
name: '跟进方式',
type: 'pie',
radius: '50%',
data: res.map((s: any) => {
return {
name: getDictLabel(
DICT_TYPE.CRM_FOLLOW_UP_TYPE,
s.followUpType,
),
value: s.followUpRecordCount,
};
}),
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
};
}
case 'poolSummary': {
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
series: [
{
name: '进入公海客户数',
type: 'bar',
yAxisIndex: 0,
data: res.map((s: any) => s.customerPutCount),
},
{
name: '公海领取客户数',
type: 'bar',
yAxisIndex: 1,
data: res.map((s: any) => s.customerTakeCount),
},
],
toolbox: {
feature: {
dataZoom: {
xAxisIndex: false, // 数据区域缩放：Y 轴不缩放
},
brush: {
type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '公海客户分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
yAxis: [
{
type: 'value',
name: '进入公海客户数',
min: 0,
minInterval: 1, // 显示整数刻度
},
{
type: 'value',
name: '公海领取客户数',
min: 0,
minInterval: 1, // 显示整数刻度
splitLine: {
lineStyle: {
type: 'dotted', // 右侧网格线虚化, 减少混乱
opacity: 0.7,
},
},
},
],
xAxis: {
type: 'category',
name: '日期',
data: res.map((s: any) => s.time),
},
};
}
default: {
return {};
}
}
}

381
apps/web-antd/src/views/crm/statistics/customer/data.ts
View File

@ -16,6 +16,41 @@ import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
const userStore = useUserStore();
export const customerSummaryTabs = [
{
tab: '客户总量分析',
key: 'customerSummary',
},
{
tab: '客户跟进次数分析',
key: 'followUpSummary',
},
{
tab: '客户跟进方式分析',
key: 'followUpType',
},
{
tab: '客户转化率分析',
key: 'conversionStat',
},
{
tab: '公海客户分析',
key: 'poolSummary',
},
{
tab: '员工客户成交周期分析',
key: 'dealCycleByUser',
},
{
tab: '地区客户成交周期分析',
key: 'dealCycleByArea',
},
{
tab: '产品客户成交周期分析',
key: 'dealCycleByProduct',
},
];
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
@ -72,64 +107,290 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useSummaryGridColumns(): VxeTableGridOptions['columns'] {
return [
{
type: 'seq',
title: '序号',
},
{
field: 'ownerUserName',
title: '员工姓名',
minWidth: 100,
},
{
field: 'customerCreateCount',
title: '新增客户数',
minWidth: 200,
},
{
field: 'customerDealCount',
title: '成交客户数',
minWidth: 200,
},
{
field: 'customerDealRate',
title: '客户成交率(%)',
minWidth: 200,
formatter: ({ row }) => {
return erpCalculatePercentage(
row.customerDealCount,
row.customerCreateCount,
);
},
},
{
field: 'contractPrice',
title: '合同总金额',
minWidth: 200,
formatter: 'formatAmount2',
},
{
field: 'receivablePrice',
title: '回款金额',
minWidth: 200,
formatter: 'formatAmount2',
},
{
field: 'creceivablePrice',
title: '未回款金额',
minWidth: 200,
formatter: ({ row }) => {
return erpCalculatePercentage(row.receivablePrice, row.contractPrice);
},
},
{
field: 'ccreceivablePrice',
title: '回款完成率(%)',
formatter: ({ row }) => {
return erpCalculatePercentage(row.receivablePrice, row.contractPrice);
},
},
];
export function useGridColumns(
activeTabName: any,
): VxeTableGridOptions['columns'] {
switch (activeTabName) {
case 'conversionStat': {
return [
{
type: 'seq',
title: '序号',
},
{
field: 'customerName',
title: '客户名称',
minWidth: 100,
},
{
field: 'contractName',
title: '合同名称',
minWidth: 200,
},
{
field: 'totalPrice',
title: '合同总金额',
minWidth: 200,
formatter: 'formatAmount2',
},
{
field: 'receivablePrice',
title: '回款金额',
minWidth: 200,
formatter: 'formatAmount2',
},
{
field: 'source',
title: '客户来源',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
},
},
{
field: 'industryId',
title: '客户行业',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
},
},
{
field: 'ownerUserName',
title: '负责人',
minWidth: 200,
},
{
field: 'creatorUserName',
title: '创建人',
minWidth: 200,
},
{
field: 'createTime',
title: '创建时间',
minWidth: 200,
formatter: 'formatDateTime',
},
{
field: 'orderDate',
title: '下单日期',
minWidth: 200,
formatter: 'formatDateTime',
},
];
}
case 'customerSummary': {
return [
{
type: 'seq',
title: '序号',
},
{
field: 'ownerUserName',
title: '员工姓名',
minWidth: 100,
},
{
field: 'customerCreateCount',
title: '新增客户数',
minWidth: 200,
},
{
field: 'customerDealCount',
title: '成交客户数',
minWidth: 200,
},
{
field: 'customerDealRate',
title: '客户成交率(%)',
minWidth: 200,
formatter: ({ row }) => {
return erpCalculatePercentage(
row.customerDealCount,
row.customerCreateCount,
);
},
},
{
field: 'contractPrice',
title: '合同总金额',
minWidth: 200,
formatter: 'formatAmount2',
},
{
field: 'receivablePrice',
title: '回款金额',
minWidth: 200,
formatter: 'formatAmount2',
},
{
field: 'creceivablePrice',
title: '未回款金额',
minWidth: 200,
formatter: ({ row }) => {
return erpCalculatePercentage(
row.receivablePrice,
row.contractPrice,
);
},
},
{
field: 'ccreceivablePrice',
title: '回款完成率(%)',
formatter: ({ row }) => {
return erpCalculatePercentage(
row.receivablePrice,
row.contractPrice,
);
},
},
];
}
case 'dealCycleByArea': {
return [
{
type: 'seq',
title: '序号',
},
{
field: 'areaName',
title: '区域',
minWidth: 200,
},
{
field: 'customerDealCycle',
title: '成交周期(天)',
minWidth: 200,
},
{
field: 'customerDealCount',
title: '成交客户数',
minWidth: 200,
},
];
}
case 'dealCycleByProduct': {
return [
{
type: 'seq',
title: '序号',
},
{
field: 'productName',
title: '产品名称',
minWidth: 200,
},
{
field: 'customerDealCycle',
title: '成交周期(天)',
minWidth: 200,
},
{
field: 'customerDealCount',
title: '成交客户数',
minWidth: 200,
},
];
}
case 'dealCycleByUser': {
return [
{
type: 'seq',
title: '序号',
},
{
field: 'ownerUserName',
title: '日期',
minWidth: 200,
},
{
field: 'customerDealCycle',
title: '成交周期(天)',
minWidth: 200,
},
{
field: 'customerDealCount',
title: '成交客户数',
minWidth: 200,
},
];
}
case 'followUpSummary': {
return [
{
type: 'seq',
title: '序号',
},
{
field: 'ownerUserName',
title: '员工姓名',
minWidth: 200,
},
{
field: 'followUpRecordCount',
title: '跟进次数',
minWidth: 200,
},
{
field: 'followUpCustomerCount',
title: '跟进客户数',
minWidth: 200,
},
];
}
case 'followUpType': {
return [
{
type: 'seq',
title: '序号',
},
{
field: 'followUpType',
title: '跟进方式',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_FOLLOW_UP_TYPE },
},
},
{
field: 'followUpRecordCount',
title: '个数',
minWidth: 200,
},
{
field: 'portion',
title: '占比(%)',
minWidth: 200,
},
];
}
case 'poolSummary': {
return [
{
type: 'seq',
title: '序号',
},
{
field: 'ownerUserName',
title: '员工姓名',
minWidth: 200,
},
{
field: 'customerPutCount',
title: '进入公海客户数',
minWidth: 200,
},
{
field: 'customerTakeCount',
title: '公海领取客户数',
minWidth: 200,
},
];
}
default: {
return [];
}
}
}

164
apps/web-antd/src/views/crm/statistics/customer/index.vue
View File

@ -13,91 +13,25 @@ import { Tabs } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
getCustomerDealCycleByUser,
getCustomerSummaryByDate,
getCustomerSummaryByUser,
getDatas,
} from '#/api/crm/statistics/customer';
import { useGridFormSchema, useSummaryGridColumns } from './data';
import { getChartOptions } from './chartOptions';
import { customerSummaryTabs, useGridColumns, useGridFormSchema } from './data';
const activeTabName = ref('customerSummary');
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
async function setChartData(res: any) {
renderEcharts({
grid: {
bottom: '5%',
containLabel: true,
left: '5%',
right: '5%',
top: '5 %',
},
legend: {},
series: [
{
name: '新增客户数',
type: 'bar',
yAxisIndex: 0,
data: res.map((item: any) => item.customerCreateCount),
},
{
name: '成交客户数',
type: 'bar',
yAxisIndex: 1,
data: res.map((item: any) => item.customerDealCount),
},
],
toolbox: {
feature: {
dataZoom: {
xAxisIndex: false, // 数据区域缩放：Y 轴不缩放
},
brush: {
type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
yAxis: [
{
type: 'value',
name: '新增客户数',
min: 0,
minInterval: 1, // 显示整数刻度
},
{
type: 'value',
name: '成交客户数',
min: 0,
minInterval: 1, // 显示整数刻度
splitLine: {
lineStyle: {
type: 'dotted', // 右侧网格线虚化, 减少混乱
opacity: 0.7,
},
},
},
],
xAxis: {
type: 'category',
name: '日期',
data: res.map((item: any) => item.time),
},
});
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useSummaryGridColumns(),
columns: useGridColumns(activeTabName.value),
height: 'auto',
keepSource: true,
pagerConfig: {
@ -107,8 +41,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
ajax: {
query: async (_, formValues) => {
const res = await getCustomerSummaryByDate(formValues);
setChartData(res);
return await getCustomerSummaryByUser(formValues);
renderEcharts(getChartOptions(activeTabName.value, res));
return await getDatas(activeTabName.value, formValues);
},
},
},
@ -122,9 +56,79 @@ const [Grid, gridApi] = useVbenVxeGrid({
} as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUser>,
});
function handleTabChange(key: any) {
async function handleTabChange(key: any) {
activeTabName.value = key;
gridApi.query();
const params = (await gridApi.formApi.getValues()) as any;
switch (key) {
case 'conversionStat': {
gridApi.setGridOptions({
columns: useGridColumns(key),
});
const data = await getCustomerSummaryByUser(params);
renderEcharts(getChartOptions(key, data), true);
break;
}
case 'customerSummary': {
gridApi.setGridOptions({
columns: useGridColumns(key),
});
const data = await getCustomerSummaryByUser(params);
renderEcharts(getChartOptions(key, data), true);
break;
}
case 'dealCycleByArea': {
gridApi.setGridOptions({
columns: useGridColumns(key),
});
const data = await getCustomerDealCycleByUser(params);
renderEcharts(getChartOptions(key, data), true);
break;
}
case 'dealCycleByProduct': {
gridApi.setGridOptions({
columns: useGridColumns(key),
});
const data = await getCustomerDealCycleByUser(params);
renderEcharts(getChartOptions(key, data), true);
break;
}
case 'dealCycleByUser': {
gridApi.setGridOptions({
columns: useGridColumns(key),
});
const data = await getCustomerDealCycleByUser(params);
renderEcharts(getChartOptions(key, data), true);
break;
}
case 'followUpSummary': {
gridApi.setGridOptions({
columns: useGridColumns(key),
});
const data = await getCustomerSummaryByUser(params);
renderEcharts(getChartOptions(key, data), true);
break;
}
case 'followUpType': {
gridApi.setGridOptions({
columns: useGridColumns(key),
});
const data = await getCustomerSummaryByUser(params);
renderEcharts(getChartOptions(key, data), true);
break;
}
case 'poolSummary': {
gridApi.setGridOptions({
columns: useGridColumns(key),
});
const data = await getCustomerSummaryByUser(params);
renderEcharts(getChartOptions(key, data), true);
break;
}
default: {
break;
}
}
gridApi.reload();
}
</script>
@ -134,13 +138,9 @@ function handleTabChange(key: any) {
<template #top>
<Tabs v-model:active-key="activeTabName" @change="handleTabChange">
<Tabs.TabPane
tab="客户总量分析"
key="customerSummary"
:force-render="true"
/>
<Tabs.TabPane
tab="客户跟进次数分析"
key="followUpSummary"
v-for="item in customerSummaryTabs"
:key="item.key"
:tab="item.tab"
:force-render="true"
/>
</Tabs>