加客户列表

This commit is contained in:
dengbw
2022-12-20 17:31:49 +08:00
parent 6070aaf59a
commit 348c7ce808
3 changed files with 281 additions and 0 deletions
+28
View File
@@ -68,6 +68,20 @@ export async function getGroupsStatisticsConsultant(params) {
return Promise.reject(new Error(res.data.message));
}
/**
* 获取客户数据
* @param params 查询条件
*/
export async function getGroupsStatisticsCustomer(params) {
const res = await request.get('/sylive/groupsStatistics/customer', {
params
});
if (res.data.code === 0) {
return res.data.data;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 获取观看下单统计折线图数据
* @param params 查询条件
@@ -109,3 +123,17 @@ export async function exportGroupsStatisticsConsultant(params) {
}
return Promise.reject(new Error(res.data.message));
}
/**
* 导出客户
* @param params 查询条件
*/
export async function exportGroupsStatisticsCustomer(params) {
const res = await request.get('/sylive/groupsStatistics/customer_export', {
params
});
if (res.data.code === 0) {
return res.data.data;
}
return Promise.reject(new Error(res.data.message));
}
@@ -0,0 +1,250 @@
<template>
<el-card shadow="never">
<!-- 数据表格 -->
<ele-pro-table
ref="table"
title="客户列表"
:columns="columns"
:datasource="datasource"
size="mini"
>
<template v-slot:toolkit>
<div class="list-tool-item">
<el-select
v-model="itemId"
clearable
class="ele-fluid"
@input="updateValue"
>
<el-option
v-for="item in data.goods"
:key="item.value"
:value="item.value"
:label="item.name"
/>
</el-select>
</div>
<div class="list-tool-divider">
<el-divider direction="vertical" />
</div>
<el-button
size="small"
type="primary"
class="ele-btn-icon"
icon="el-icon-download"
@click="exportData"
>
导出
</el-button>
<div class="list-tool-divider">
<el-divider direction="vertical" />
</div>
</template>
</ele-pro-table>
</el-card>
</template>
<script>
import {
getGroupsStatisticsCustomer,
exportGroupsStatisticsCustomer
} from '@/api/sylive/groups-statistics';
import { utils, writeFile } from 'xlsx';
export default {
props: { data: Object },
data() {
return {
activityId: null,
itemId: '',
// 表格列配置
columns: [
{
prop: 'nickname',
label: '昵称',
align: 'center',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'createTime',
label: '创建时间',
align: 'center',
showOverflowTooltip: true,
minWidth: 90
},
{
prop: 'browseTime',
label: '首次浏览时间',
align: 'center',
showOverflowTooltip: true,
minWidth: 90
},
{
prop: 'subscribeTime',
label: '预约时间',
align: 'center',
showOverflowTooltip: true,
minWidth: 90
},
{
prop: 'liveTime',
label: '首次观看时间',
align: 'center',
showOverflowTooltip: true,
minWidth: 90
},
{
prop: 'playDuration',
label: '观看时长(分)',
align: 'center',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'livePV',
label: '观看次数',
align: 'center',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'insiders',
label: '内部人员',
align: 'center',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'consultantName',
label: '归属顾问',
align: 'center',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'levelName1',
label: '战区',
align: 'center',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'levelName2',
label: '战队',
align: 'center',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'bizName',
label: '门店',
align: 'center',
showOverflowTooltip: true,
minWidth: 110
}
]
};
},
methods: {
/* 表格数据源 */
datasource({ page, limit, order }) {
return getGroupsStatisticsCustomer({
...order,
page,
limit,
activityId: this.activityId,
itemId: this.itemId
});
},
/* 导出数据 */
exportData() {
const array = [
[
'昵称',
'创建时间',
'首次浏览时间',
'预约时间',
'首次观看时间',
'观看时长(分)',
'观看次数',
'内部人员',
'归属顾问',
'战区',
'战队',
'门店'
]
];
const loading = this.$loading({ lock: true });
this.$refs.table.doRequest(({ where, order }) => {
exportGroupsStatisticsCustomer({
...where,
...order,
activityId: this.activityId,
itemId: this.itemId
})
.then((data) => {
loading.close();
data.forEach((d) => {
array.push([
d.nickname,
d.createTime,
d.browseTime,
d.subscribeTime,
d.liveTime,
d.playDuration,
d.livePV,
d.insiders,
d.consultantName,
d.levelName1,
d.levelName2,
d.bizName
]);
});
writeFile(
{
SheetNames: ['Sheet1'],
Sheets: {
Sheet1: utils.aoa_to_sheet(array)
}
},
'客户列表.xlsx'
);
})
.catch((e) => {
loading.close();
this.$message.error(e.message);
});
});
},
/* 更新选中数据 */
updateValue() {
this.$refs.table.reload({ page: 1 });
}
},
watch: {
$route: {
handler(route) {
const { path } = route;
if (path !== '/sylive/groups-statistics') {
return;
}
const activityId = this.$route.query.id;
if (!activityId || activityId == this.activityId) {
return;
}
this.activityId = activityId;
if (this.$refs.table) {
this.$refs.table.reload({ page: 1 });
}
},
immediate: true
}
}
};
</script>
<style lang="scss" scoped>
.list-tool-divider {
padding: 0 12px;
}
</style>
@@ -134,6 +134,7 @@
/>
<biz-table :data="statistics.tableData" />
<consultant-table :data="statistics.tableData" />
<customer-table :data="statistics.tableData" />
</div>
</template>
@@ -154,6 +155,7 @@
import LevelTable from './components/level-table.vue';
import BizTable from './components/biz-table.vue';
import ConsultantTable from './components/consultant-table.vue';
import CustomerTable from './components/customer-table.vue';
import watchOrderLinechart from './components/watchOrder-linechart.vue';
use([CanvasRenderer, TooltipComponent, FunnelChart]);
@@ -165,6 +167,7 @@
LevelTable,
BizTable,
ConsultantTable,
CustomerTable,
watchOrderLinechart
},
mixins: [echartsMixin(['funnelChart'])],