列表分组动态显示

This commit is contained in:
dengbw
2023-03-23 16:15:56 +08:00
parent d8cecb1b54
commit 2a0dda7de3
8 changed files with 139 additions and 791 deletions
+15 -78
View File
@@ -87,66 +87,7 @@
currentStatus: {},
useType: 0,
// 表格列配置
columns: [
{
prop: 'customerId',
label: 'ID',
minWidth: 45,
align: 'center',
showOverflowTooltip: true,
fixed: 'left'
},
{
prop: 'name',
label: '姓名',
showOverflowTooltip: true,
minWidth: 60
},
{
prop: 'mobile',
label: '手机号',
showOverflowTooltip: true,
minWidth: 60
},
{
prop: 'consultant',
label: '顾问',
showOverflowTooltip: true,
minWidth: 60
},
{
prop: 'levelName1',
label: '战区',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'levelName2',
label: '战队',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'stores',
label: '门店',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'statusName',
label: '状态',
align: 'center',
showOverflowTooltip: true,
minWidth: 60
},
{
prop: 'visitTagName',
label: '回访标签',
align: 'center',
showOverflowTooltip: true,
minWidth: 80
}
]
columns: []
};
},
methods: {
@@ -155,16 +96,19 @@
this.showImport = true;
},
/* 表格数据源 */
datasource({ page, limit, where, order }) {
const activityId = this.activityId;
async datasource({ page, limit, where, order }) {
this.useType = where ? where.useType : 0;
return listGroupsCustomer({
const result = await listGroupsCustomer({
...where,
...order,
page,
limit,
activityId
activityId: this.activityId
});
if (!this.columns.length && result.columns) {
this.columns = result.columns;
}
return { count: result.count, list: result.list };
},
query() {
this.loading = true;
@@ -193,26 +137,19 @@
},
/* 导出数据 */
exportData() {
const array = [
['姓名', '手机号', '顾问', '战区', '战队', '门店', '状态', '回访标签']
];
const loading = this.$loading({ lock: true });
this.$refs.table.doRequest(({ where, order }) => {
const activityId = this.activityId;
exportGroupsCustomer({ ...where, ...order, activityId })
.then((data) => {
loading.close();
data.forEach((d) => {
array.push([
d.name,
d.mobile,
d.consultant,
d.levelName1,
d.levelName2,
d.stores,
d.statusName,
d.visitTagName
]);
const array = [data.columns];
data.list.forEach((d) => {
let arrayItem = [];
for (let key in d) {
arrayItem.push(d[key]);
}
array.push(arrayItem);
});
writeFile(
{
+15 -119
View File
@@ -134,88 +134,7 @@
currentStatus: {},
useType: 0,
// 表格列配置
columns: [
{
prop: 'id',
label: 'ID',
minWidth: 45,
align: 'center',
showOverflowTooltip: true,
fixed: 'left'
},
{
prop: 'uname',
label: '姓名',
showOverflowTooltip: true,
minWidth: 60
},
{
prop: 'mobile',
label: '手机号',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'itemTitle',
label: '商品标题',
showOverflowTooltip: true,
minWidth: 130
},
{
prop: 'totalPrice',
label: '订单价格',
showOverflowTooltip: true,
minWidth: 60
},
{
prop: 'consultant',
label: '顾问',
showOverflowTooltip: true,
minWidth: 60
},
{
prop: 'levelName1',
label: '战区',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'levelName2',
label: '战队',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'stores',
label: '门店',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'exchangeName',
label: '核销类型',
align: 'center',
showOverflowTooltip: true,
minWidth: 60
},
{
prop: 'useStatus',
label: '状态',
align: 'center',
showOverflowTooltip: true,
minWidth: 60,
slot: 'useStatus'
},
{
columnKey: 'action',
label: '操作',
align: 'center',
showOverflowTooltip: true,
width: 150,
resizable: false,
slot: 'action'
}
]
columns: []
};
},
methods: {
@@ -263,16 +182,19 @@
};
},
/* 表格数据源 */
datasource({ page, limit, where, order }) {
const activityId = this.activityId;
async datasource({ page, limit, where, order }) {
this.useType = where ? where.useType : 0;
return listGroupsExchange({
const result = await listGroupsExchange({
...where,
...order,
page,
limit,
activityId
activityId: this.activityId
});
if (!this.columns.length && result.columns) {
this.columns = result.columns;
}
return { count: result.count, list: result.list };
},
query() {
this.loading = true;
@@ -297,45 +219,19 @@
},
/* 导出数据 */
exportData() {
const array = [
[
'订单号',
'姓名',
'手机号',
'商品标题',
'订单价格',
'顾问',
'战区',
'战队',
'门店',
'核销类型',
'状态',
'所选经销商',
'地址'
]
];
const loading = this.$loading({ lock: true });
this.$refs.table.doRequest(({ where, order }) => {
const activityId = this.activityId;
exportGroupsExchange({ ...where, ...order, activityId })
.then((data) => {
loading.close();
data.forEach((d) => {
array.push([
d.sid,
d.uname,
d.mobile,
d.itemTitle,
d.totalPrice,
d.consultant,
d.levelName1,
d.levelName2,
d.stores,
d.exchangeName,
d.useStatusName,
d.biz,
d.address
]);
const array = [data.columns];
data.list.forEach((d) => {
let arrayItem = [];
for (let key in d) {
arrayItem.push(d[key]);
}
array.push(arrayItem);
});
writeFile(
{
+20 -131
View File
@@ -48,104 +48,23 @@
title: '权益订单',
loading: true,
// 表格列配置
columns: [
{
prop: 'id',
label: 'ID',
minWidth: 45,
align: 'center',
showOverflowTooltip: true,
fixed: 'left'
},
{
prop: 'uname',
label: '姓名',
showOverflowTooltip: true,
minWidth: 60
},
{
prop: 'mobile',
label: '手机号',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'itemTitle',
label: '商品标题',
showOverflowTooltip: true,
minWidth: 130
},
{
prop: 'totalPrice',
label: '订单价格',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 70
},
{
prop: 'payTime',
label: '付款时间',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 100,
formatter: (_row, _column, cellValue) => {
return this.$util.toDateString(cellValue);
}
},
{
prop: 'createTime',
label: '创建时间',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 100,
formatter: (_row, _column, cellValue) => {
return this.$util.toDateString(cellValue);
}
},
{
prop: 'consultant',
label: '顾问',
showOverflowTooltip: true,
minWidth: 60
},
{
prop: 'typeName',
label: '订单类型',
showOverflowTooltip: true,
minWidth: 70
},
{
prop: 'statusName',
label: '状态',
showOverflowTooltip: true,
minWidth: 60
},
{
prop: 'levelName1',
label: '战区',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'levelName2',
label: '战队',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'stores',
label: '门店',
showOverflowTooltip: true,
minWidth: 80
}
]
columns: []
};
},
methods: {
/* 表格数据源 */
datasource({ page, limit, where, order }) {
const activityId = this.activityId;
return listGroupsOrder({ ...where, ...order, page, limit, activityId });
async datasource({ page, limit, where, order }) {
const result = await listGroupsOrder({
...where,
...order,
page,
limit,
activityId: this.activityId
});
if (!this.columns.length && result.columns) {
this.columns = result.columns;
}
return { count: result.count, list: result.list };
},
query() {
this.loading = true;
@@ -169,49 +88,19 @@
},
/* 导出数据 */
exportData() {
const array = [
[
'订单号',
'姓名',
'手机号',
'商品标题',
'订单价格',
'付款时间',
'创建时间',
'战区',
'战队',
'门店',
'顾问',
'订单类型',
'状态',
'所选经销商',
'地址'
]
];
const loading = this.$loading({ lock: true });
this.$refs.table.doRequest(({ where, order }) => {
const activityId = this.activityId;
exportGroupsOrder({ ...where, ...order, activityId })
.then((data) => {
loading.close();
data.forEach((d) => {
array.push([
d.sid,
d.uname,
d.mobile,
d.itemTitle,
d.totalPrice,
this.$util.toDateString(d.payTime),
this.$util.toDateString(d.createTime),
d.levelName1,
d.levelName2,
d.stores,
d.consultant,
d.typeName,
d.statusName,
d.biz,
d.address
]);
const array = [data.columns];
data.list.forEach((d) => {
let arrayItem = [];
for (let key in d) {
arrayItem.push(d[key]);
}
array.push(arrayItem);
});
writeFile(
{
@@ -78,133 +78,35 @@
day: '',
itemId: '',
selection: [],
isUpdateValue: false,
// 表格列配置
columns: [
{
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: 120
},
{
prop: 'consultant',
label: '参与顾问数',
align: 'center',
showOverflowTooltip: true,
minWidth: 85
},
{
prop: 'allConsultant',
label: '全部顾问数',
align: 'center',
showOverflowTooltip: true,
minWidth: 85
},
{
prop: 'consultantPer',
label: '开工率',
align: 'center',
showOverflowTooltip: true,
minWidth: 75
},
{
prop: 'browse',
label: '浏览数(人)',
align: 'center',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 115
},
{
prop: 'subscribe',
label: '预约数(人)',
align: 'center',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 115
},
{
prop: 'watch',
label: '观看数(人)',
align: 'center',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 115
},
{
prop: 'order',
label: '订单数(单)',
align: 'center',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 115
},
{
prop: 'livePV',
label: '观看数(人次)',
align: 'center',
showOverflowTooltip: true,
minWidth: 100
},
{
prop: 'watchDuration',
label: '人均观看(分)',
align: 'center',
showOverflowTooltip: true,
minWidth: 100
}
]
columns: []
};
},
methods: {
/* 表格数据源 */
datasource({ page, limit, order }) {
if (!this.itemId && this.data.goods[1]) {
this.itemId = this.data.goods[1]['value'];
}
return getGroupsStatisticsBiz({
async datasource({ page, limit, order }) {
const result = await getGroupsStatisticsBiz({
...order,
page,
limit,
activityId: this.activityId,
day: this.day,
itemId: this.itemId
itemId: this.itemId,
levels: this.data.levels
});
if (result.columns) {
this.columns = result.columns;
}
return { count: result.count, list: result.list };
},
/* 导出数据 */
exportData() {
const array = [
[
'战区',
'战队',
'门店',
'参与顾问数',
'全部顾问数',
'开工率',
'浏览数(人)',
'预约数(人)',
'观看数(人)',
'订单数(单)',
'观看数(人次)',
'人均观看(分)'
]
];
const array = [];
const arrayItem = [];
this.columns.forEach((d) => {
arrayItem.push(d.label);
});
array.push(arrayItem);
const loading = this.$loading({ lock: true });
this.$refs.table.doRequest(({ where, order }) => {
exportGroupsStatisticsBiz({
@@ -212,25 +114,17 @@
...order,
activityId: this.activityId,
day: this.day,
itemId: this.itemId
itemId: this.itemId,
levels: this.data.levels
})
.then((data) => {
loading.close();
data.forEach((d) => {
array.push([
d.levelName1,
d.levelName2,
d.bizName,
d.consultant,
d.allConsultant,
d.consultantPer,
d.browse,
d.subscribe,
d.watch,
d.order,
d.livePV,
d.watchDuration
]);
let arrayItem = [];
for (let key in d) {
arrayItem.push(d[key]);
}
array.push(arrayItem);
});
writeFile(
{
@@ -77,98 +77,34 @@
day: '',
itemId: '',
// 表格列配置
columns: [
{
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: 120
},
{
prop: 'consultantName',
label: '顾问',
align: 'center',
showOverflowTooltip: true,
minWidth: 90
},
{
prop: 'browse',
label: '浏览数(人)',
align: 'center',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 120
},
{
prop: 'subscribe',
label: '预约数(人)',
align: 'center',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 120
},
{
prop: 'watch',
label: '观看数(人)',
align: 'center',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 120
},
{
prop: 'order',
label: '订单数(单)',
align: 'center',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 120
}
]
columns: []
};
},
methods: {
/* 表格数据源 */
datasource({ page, limit, order }) {
return getGroupsStatisticsConsultant({
async datasource({ page, limit, order }) {
const result = await getGroupsStatisticsConsultant({
...order,
page,
limit,
activityId: this.activityId,
day: this.day,
itemId: this.itemId
itemId: this.itemId,
levels: this.data.levels
});
if (result.columns) {
this.columns = result.columns;
}
return { count: result.count, list: result.list };
},
/* 导出数据 */
exportData() {
const array = [
[
'战区',
'战队',
'门店',
'顾问',
'浏览数(人)',
'预约数(人)',
'观看数(人)',
'订单数(单)',
'观看数(人次)',
'人均观看(分)'
]
];
const array = [];
const arrayItem = [];
this.columns.forEach((d) => {
arrayItem.push(d.label);
});
array.push(arrayItem);
const loading = this.$loading({ lock: true });
this.$refs.table.doRequest(({ where, order }) => {
exportGroupsStatisticsConsultant({
@@ -176,23 +112,17 @@
...order,
activityId: this.activityId,
day: this.day,
itemId: this.itemId
itemId: this.itemId,
levels: this.data.levels
})
.then((data) => {
loading.close();
data.forEach((d) => {
array.push([
d.levelName1,
d.levelName2,
d.bizName,
d.consultantName,
d.browse,
d.subscribe,
d.watch,
d.order,
d.livePV,
d.watchDuration
]);
let arrayItem = [];
for (let key in d) {
arrayItem.push(d[key]);
}
array.push(arrayItem);
});
writeFile(
{
@@ -95,106 +95,26 @@
groupsId: null,
itemId: '',
// 表格列配置
columns: [
{
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
},
{
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
}
]
columns: []
};
},
methods: {
/* 表格数据源 */
datasource({ page, limit, order }) {
return getGroupsStatisticsCustomer({
async datasource({ page, limit, order }) {
const result = await getGroupsStatisticsCustomer({
...order,
page,
limit,
activityId: this.activityId,
groupsId: this.groupsId,
insiders: this.insiders,
itemId: this.itemId
itemId: this.itemId,
levels: this.data.levels
});
if (result.columns) {
this.columns = result.columns;
}
return { count: result.count, list: result.list };
},
/* 查询分组 */
groupsQuery() {
@@ -212,47 +132,31 @@
},
/* 导出数据 */
exportData() {
const array = [
[
'战区',
'战队',
'门店',
'昵称',
'创建时间',
'首次浏览时间',
'预约时间',
'首次观看时间',
'观看时长(分)',
'观看次数',
'内部人员',
'归属顾问'
]
];
const array = [];
const arrayItem = [];
this.columns.forEach((d) => {
arrayItem.push(d.label);
});
array.push(arrayItem);
const loading = this.$loading({ lock: true });
this.$refs.table.doRequest(({ where, order }) => {
exportGroupsStatisticsCustomer({
...where,
...order,
activityId: this.activityId,
itemId: this.itemId
groupsId: this.groupsId,
insiders: this.insiders,
itemId: this.itemId,
levels: this.data.levels
})
.then((data) => {
loading.close();
data.forEach((d) => {
array.push([
d.levelName1,
d.levelName2,
d.bizName,
d.nickname,
d.createTime,
d.browseTime,
d.subscribeTime,
d.liveTime,
d.playDuration,
d.livePV,
d.insiders,
d.consultantName
]);
let arrayItem = [];
for (let key in d) {
arrayItem.push(d[key]);
}
array.push(arrayItem);
});
writeFile(
{
+1 -1
View File
@@ -181,7 +181,7 @@
activityData1: { list: [], style: '' },
activityData2: { list: [], style: '' },
levelData: [],
tableData: { days: [], goods: [] }
tableData: { days: [], goods: [], levels: [] }
},
loading: true,
browseRank: { area: [], biz: [], consultant: [] },
+20 -122
View File
@@ -45,97 +45,23 @@
title: '中奖名单',
loading: true,
// 表格列配置
columns: [
{
prop: 'id',
label: 'ID',
minWidth: 45,
align: 'center',
showOverflowTooltip: true,
fixed: 'left'
},
{
prop: 'uname',
label: '姓名',
showOverflowTooltip: true,
minWidth: 60
},
{
prop: 'mobile',
label: '手机号',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'itemTitle',
label: '商品标题',
showOverflowTooltip: true,
minWidth: 130
},
{
prop: 'totalPrice',
label: '订单价格',
showOverflowTooltip: true,
minWidth: 60
},
{
prop: 'payTime',
label: '付款时间',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 100,
formatter: (_row, _column, cellValue) => {
return this.$util.toDateString(cellValue);
}
},
{
prop: 'winTime',
label: '中奖时间',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 100,
formatter: (_row, _column, cellValue) => {
return this.$util.toDateString(cellValue);
}
},
{
prop: 'winName',
label: '中奖类型',
showOverflowTooltip: true,
minWidth: 90
},
{
prop: 'consultant',
label: '顾问',
showOverflowTooltip: true,
minWidth: 60
},
{
prop: 'levelName1',
label: '战区',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'levelName2',
label: '战队',
showOverflowTooltip: true,
minWidth: 80
},
{
prop: 'stores',
label: '门店',
showOverflowTooltip: true,
minWidth: 80
}
]
columns: []
};
},
methods: {
/* 表格数据源 */
datasource({ page, limit, where, order }) {
const activityId = this.activityId;
return listGroupsWin({ ...where, ...order, page, limit, activityId });
async datasource({ page, limit, where, order }) {
const result = await listGroupsWin({
...where,
...order,
page,
limit,
activityId: this.activityId
});
if (!this.columns.length && result.columns) {
this.columns = result.columns;
}
return { count: result.count, list: result.list };
},
query() {
this.loading = true;
@@ -159,47 +85,19 @@
},
/* 导出数据 */
exportData() {
const array = [
[
'订单号',
'姓名',
'手机号',
'商品标题',
'订单价格',
'付款时间',
'中奖时间',
'中奖类型',
'顾问',
'战区',
'战队',
'门店',
'所选经销商',
'地址'
]
];
const loading = this.$loading({ lock: true });
this.$refs.table.doRequest(({ where, order }) => {
const activityId = this.activityId;
exportGroupsWin({ ...where, ...order, activityId })
.then((data) => {
loading.close();
data.forEach((d) => {
array.push([
d.sid,
d.uname,
d.mobile,
d.itemTitle,
d.totalPrice,
this.$util.toDateString(d.payTime),
this.$util.toDateString(d.winTime),
d.winName,
d.consultant,
d.levelName1,
d.levelName2,
d.stores,
d.biz,
d.address
]);
const array = [data.columns];
data.list.forEach((d) => {
let arrayItem = [];
for (let key in d) {
arrayItem.push(d[key]);
}
array.push(arrayItem);
});
writeFile(
{