|
|
<template>
|
|
|
<div>
|
|
|
<Row :gutter="32">
|
|
|
<i-col span="32">
|
|
|
<row>
|
|
|
<row class="search-row">
|
|
|
<span class="left-15">选择日期</span>
|
|
|
<DatePicker v-model="dateRange" class="left-15 date-picker" type="daterange"
|
|
|
placement="bottom-start"
|
|
|
split-panels placeholder="请选择日期区间"></DatePicker>
|
|
|
<span class="left-15 txt-font-a">零售公司</span>
|
|
|
<Select v-model="companyId" filterable class="left-15 txt-font-a search-select"
|
|
|
@on-change="companySelect">
|
|
|
<Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
|
|
|
</Select>
|
|
|
<span class="left-15 txt-font-a">店铺</span>
|
|
|
<Select filterable placeholder="全部" v-model="shopId" class="left-15 txt-font-a search-select"
|
|
|
@on-change="downShopChange">
|
|
|
<Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.name }}</Option>
|
|
|
</Select>
|
|
|
|
|
|
<Button type="primary" @click="searchCustomerDataBtnClick"
|
|
|
class="txt-font-a search-btn">查询
|
|
|
</Button>
|
|
|
<Button type="primary" @click="exportData"
|
|
|
class="txt-font-a search-btn">导出数据
|
|
|
</Button>
|
|
|
|
|
|
</row>
|
|
|
<row>
|
|
|
<Table ref="table" :loading="loading" :columns="columns1" :data="data1" style="margin-top: 20px;" size="small"
|
|
|
no-data-text="--"></Table>
|
|
|
</row>
|
|
|
<Page :total="totalSize" :current="pageNum" :page-size="pageSize" show-elevator show-total
|
|
|
placement="top" @on-change="handlePage" class-name="ks-page"></Page>
|
|
|
</row>
|
|
|
</i-col>
|
|
|
</Row>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import customerDetail from "../../services/datacenter/DataCenter";
|
|
|
import zeroExtend from "../../services/customer/zeroExtend";
|
|
|
import staff from "../../services/staff/staff";
|
|
|
|
|
|
export default {
|
|
|
inject: ['checkParamBlank'],
|
|
|
data() {
|
|
|
return {
|
|
|
loading: false,
|
|
|
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
|
|
|
//开始时间，结束时间
|
|
|
totalSize: null,
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
startDate: null,
|
|
|
endDate: null,
|
|
|
customerName: null,
|
|
|
dateRange: [],
|
|
|
customerList: [],
|
|
|
companyList: [],
|
|
|
companyId: 0,
|
|
|
organizationalList: [],
|
|
|
shopId: null,
|
|
|
shopList: [],
|
|
|
customerData: {},
|
|
|
columns1: [
|
|
|
{
|
|
|
title: '序号',
|
|
|
key: 'number'
|
|
|
},
|
|
|
{
|
|
|
title: '店铺',
|
|
|
key: 'storeName'
|
|
|
},
|
|
|
{
|
|
|
title: '店铺编号',
|
|
|
key: 'storeCode'
|
|
|
},
|
|
|
{
|
|
|
title: '所属零售公司',
|
|
|
key: 'companyName'
|
|
|
},
|
|
|
{
|
|
|
title: '新增客户数',
|
|
|
key: 'newContactCnt'
|
|
|
},
|
|
|
{
|
|
|
title: '聊天总数',
|
|
|
key: 'chatCnt'
|
|
|
},
|
|
|
{
|
|
|
title: '发消息数',
|
|
|
key: 'messageCnt'
|
|
|
},
|
|
|
{
|
|
|
title: '已回复聊天占比',
|
|
|
key: 'replyPercentage'
|
|
|
},
|
|
|
{
|
|
|
title: '平均回复时长',
|
|
|
key: 'avgReplyTime'
|
|
|
},
|
|
|
{
|
|
|
title: '删除/拉黑成员客户数',
|
|
|
key: 'negativeFeedbackCnt'
|
|
|
}
|
|
|
],
|
|
|
data1: [
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
mounted: function () {
|
|
|
this.getStorerData();
|
|
|
this.getSelectList();
|
|
|
this.downShopData();
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
/**基础数据：区域list、零售公司list、好友list*/
|
|
|
getSelectList: function () {
|
|
|
let that = this;
|
|
|
let request = {
|
|
|
userId: this.userId,
|
|
|
};
|
|
|
zeroExtend.getSelectListRequest(request, function (data) {
|
|
|
if (data.data.code !== "0000") {
|
|
|
that.$Message.error("系统异常");
|
|
|
}
|
|
|
data = data.data.results;
|
|
|
if (data) {
|
|
|
that.organizationalList = data;
|
|
|
that.companyList = that.organizationalList.filter(item => item.level === 2);
|
|
|
}
|
|
|
//插入全部选项
|
|
|
that.insertAllOption();
|
|
|
});
|
|
|
},
|
|
|
searchCustomerDataBtnClick: function () {
|
|
|
this.totalSize = null;
|
|
|
this.getStorerData();
|
|
|
},
|
|
|
exportData() {
|
|
|
let that = this;
|
|
|
this.loading = true;
|
|
|
that.data1 = [];
|
|
|
let stdate = null;
|
|
|
let eddate = null;
|
|
|
if (that.dateRange[0]) {
|
|
|
stdate = this.$moment(that.dateRange[0]).format("YYYY-MM-DD");
|
|
|
eddate = this.$moment(that.dateRange[1]).format("YYYY-MM-DD");
|
|
|
}
|
|
|
|
|
|
let request =
|
|
|
{
|
|
|
userId: that.userId,
|
|
|
startDate: stdate,
|
|
|
endDate: eddate,
|
|
|
companyId: that.changeData(that.companyId),
|
|
|
shopId: that.changeData(that.shopId),
|
|
|
};
|
|
|
customerDetail.downloadstoreDataDetailExcel(request, null);
|
|
|
|
|
|
},
|
|
|
getStorerData: function () {
|
|
|
let that = this;
|
|
|
this.loading = true;
|
|
|
that.data1 = [];
|
|
|
let stdate = null;
|
|
|
let eddate = null;
|
|
|
if (that.dateRange[0]) {
|
|
|
stdate = this.$moment(that.dateRange[0]).format("YYYY-MM-DD");
|
|
|
eddate = this.$moment(that.dateRange[1]).format("YYYY-MM-DD");
|
|
|
}
|
|
|
|
|
|
let request =
|
|
|
{
|
|
|
userId: that.userId,
|
|
|
startDate: stdate,
|
|
|
endDate: eddate,
|
|
|
companyId: that.changeData(that.companyId),
|
|
|
shopId: that.changeData(that.shopId),
|
|
|
pageNum: that.pageNum,
|
|
|
pageSize: that.pageSize,
|
|
|
};
|
|
|
customerDetail.storeDataDetail(request, function (data) {
|
|
|
that.data1 = [];
|
|
|
that.loading = false;
|
|
|
data = data.data.results;
|
|
|
if (data) {
|
|
|
that.totalSize = data.total;
|
|
|
for (let i = 0; i < data.list.length; i++) {
|
|
|
let entity = data.list[i];
|
|
|
if (entity) {
|
|
|
that.data1.push(entity);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}, function () {
|
|
|
that.loading = false;
|
|
|
});
|
|
|
},
|
|
|
//插入全部选项
|
|
|
insertAllOption: function () {
|
|
|
if (this.companyList.length === 0 || this.companyList[0].id !== 0) {
|
|
|
this.companyList.splice(0, 0, {"id": 0, "name": "全部"});
|
|
|
}
|
|
|
if (this.shopList.length === 0 || this.shopList[0].id !== 0) {
|
|
|
this.shopList.splice(0, 0, {"id": 0, "name": "全部"});
|
|
|
}
|
|
|
},
|
|
|
downShopData: function (selected) {
|
|
|
let that = this;
|
|
|
let companyId = selected;
|
|
|
if (!selected) {
|
|
|
companyId = that.companyId;
|
|
|
}
|
|
|
let customerIds = [];
|
|
|
this.customerList = [];
|
|
|
if (companyId === 0) {
|
|
|
//
|
|
|
} else {
|
|
|
this.customerList = this.organizationalList.filter(item => item.parentId === companyId && item.level === 3);
|
|
|
this.insertAllOption();
|
|
|
}
|
|
|
customerIds = this.customerList.map(item => item.id);
|
|
|
|
|
|
let request =
|
|
|
{userId: that.userId, customerIds: JSON.stringify(customerIds)};
|
|
|
staff.downShopData(request, function (data) {
|
|
|
data = data.data.results;
|
|
|
if (data) {
|
|
|
that.shopList = [{"id": 0, "name": "全部"}];
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
let entity = data[i];
|
|
|
if (entity) {
|
|
|
that.shopList.push(entity);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//零售公司选择
|
|
|
companySelect: function () {
|
|
|
|
|
|
//加载店铺
|
|
|
this.downShopData(this.companyId);
|
|
|
|
|
|
this.selectedStore = 0;
|
|
|
|
|
|
let that = this;
|
|
|
that.downSellerData();
|
|
|
},
|
|
|
|
|
|
downShopChange: function () {
|
|
|
|
|
|
let that = this;
|
|
|
that.downSellerData();
|
|
|
},
|
|
|
changeData: function (value) {
|
|
|
if (value == 0) {
|
|
|
return null;
|
|
|
}
|
|
|
return value;
|
|
|
},
|
|
|
//切页处理
|
|
|
handlePage: function (value) {
|
|
|
this.pageNum = value;
|
|
|
this.getStorerData();
|
|
|
},
|
|
|
|
|
|
// /**商品mainList*/
|
|
|
// getMainList: function(){
|
|
|
//
|
|
|
// },
|
|
|
// //切页处理
|
|
|
// handlePage:function (value) {
|
|
|
//
|
|
|
// },
|
|
|
|
|
|
},
|
|
|
computed: {
|
|
|
options1() {
|
|
|
let that = this;
|
|
|
return {
|
|
|
disabledDate(date) {
|
|
|
if (that.endDate == null || that.endDate == "") {
|
|
|
return false;
|
|
|
} else {
|
|
|
return date && date.valueOf() > that.endDate;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
},
|
|
|
options2() {
|
|
|
let that = this;
|
|
|
return {
|
|
|
disabledDate(date) {
|
|
|
if (that.startDate == null || that.startDate == "") {
|
|
|
return false;
|
|
|
} else {
|
|
|
return date && date.valueOf() < that.startDate;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
|
|
|
.left-15 {
|
|
|
margin-left: 15px;
|
|
|
}
|
|
|
|
|
|
.txt-font-a {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
|
|
|
.search-row {
|
|
|
height: 90px;
|
|
|
background: #f7f8fa;
|
|
|
border: 1px solid #E8ECF2;
|
|
|
line-height: 90px;
|
|
|
}
|
|
|
|
|
|
.date-picker {
|
|
|
width: 240px;
|
|
|
}
|
|
|
|
|
|
.search-select {
|
|
|
width: 190px;
|
|
|
}
|
|
|
|
|
|
.search-btn{
|
|
|
margin-left: 20px;
|
|
|
}
|
|
|
|
|
|
</style>
|