You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
411 lines
16 KiB
Vue
411 lines
16 KiB
Vue
<template>
|
|
<div>
|
|
<Row class="search-row">
|
|
<i-col span="24" class="search-col">
|
|
<Row class="row-style">
|
|
<span class="search-span">选择日期</span>
|
|
<DatePicker :option="dateOption" @on-change="onChangeDateLister" :value="selectDate"
|
|
type="daterange" split-panels
|
|
placeholder="请选择日期" class="date-picker"></DatePicker>
|
|
<span class="search-span">零售公司</span>
|
|
<Select v-model="selectedCompany" @on-change="storeOfCompany" filterable class="search-select">
|
|
<Option v-for="item in companyList" :value="item.id" :key="'gs' + item.id">{{ item.name }}
|
|
</Option>
|
|
</Select>
|
|
<span class="search-span">店铺</span>
|
|
<Select v-model="selectedStore" filterable @on-change="sellerOfStore" class="search-select">
|
|
<Option v-for="item in storeList" :value="item.id" :key="'dp' + item.id">{{ item.name }}
|
|
</Option>
|
|
</Select>
|
|
|
|
<span class="search-span">导购</span>
|
|
<Select v-model="selectedStaff" filterable class="search-select">
|
|
<Option v-for="item in staffList" :value="item.id" :key="'dg' + item.id">{{ item.name }}
|
|
</Option>
|
|
</Select>
|
|
|
|
<Button type="primary" @click="generalizeOfSeller" class="search-btn">查询</Button>
|
|
|
|
<div class="search-div-btn">
|
|
<Button type="primary" :loading="loading" @click="exportZeroExtend">导出数据</Button>
|
|
</div>
|
|
</Row>
|
|
</i-col>
|
|
</Row>
|
|
|
|
<Table :loading="tableLoading" :columns="columns1" :data="data1" style="margin-top: 20px;" ref="table"
|
|
size="small"></Table>
|
|
<Page :total="totalSize" :current="pageNum" :page-size="pageSize" show-elevator show-total
|
|
placement="top" @on-change="handlePage" class-name="ks-page"></Page>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import IncreaseData from "../../services/generalize/IncreaseData";
|
|
|
|
export default {
|
|
name: "IncreaseDataStaff",
|
|
data() {
|
|
return {
|
|
dateOption: {
|
|
disabledDate(date) {
|
|
return date && date.valueOf() < Date.now();
|
|
}
|
|
},
|
|
selectedCompany: null,
|
|
companyList: [],
|
|
selectedStore: null,
|
|
storeList: [],
|
|
selectedStaff: null,
|
|
staffList: [],
|
|
columns1: [
|
|
{
|
|
title: '序号',
|
|
key: 'index',
|
|
width: '80px'
|
|
},
|
|
{
|
|
title: '导购名称',
|
|
key: 'sellerName'
|
|
},
|
|
{
|
|
title: '工号',
|
|
key: 'sellerCode'
|
|
},
|
|
{
|
|
title: '所属店铺',
|
|
key: 'shopName',
|
|
width: '250px'
|
|
},
|
|
{
|
|
title: '店铺编码',
|
|
key: 'shopCode'
|
|
},
|
|
{
|
|
title: '所属零售公司',
|
|
key: 'companyName',
|
|
width: '250px'
|
|
},
|
|
{
|
|
title: '总好友数',
|
|
key: 'allCustomer'
|
|
},
|
|
{
|
|
title: '总好友数（去重）',
|
|
key: 'effectiveCustomer',
|
|
render: (h, params) => {
|
|
let that = this;
|
|
if (that.data1[params.index].effectiveCustomer != null) {
|
|
return h('div', [
|
|
h('span', {}, that.data1[params.index].effectiveCustomer),
|
|
])
|
|
} else {
|
|
return h('div', [
|
|
h('span', {}, '0'),
|
|
])
|
|
}
|
|
|
|
}
|
|
},
|
|
{
|
|
title: '新增好友数',
|
|
key: 'newCustomer'
|
|
},
|
|
{
|
|
title: '新增好友数（去重）',
|
|
key: 'newEffectiveCustomer'
|
|
},
|
|
{
|
|
title: '日增好友平均（去重）',
|
|
key: 'avgNewCustomer'
|
|
},
|
|
{
|
|
title: '历史门店拓客总数',
|
|
key: 'historyAllCustomers'
|
|
},
|
|
{
|
|
title: '历史门店新增好友数',
|
|
key: 'historyAddCustomers'
|
|
}
|
|
],
|
|
data1: [],
|
|
//分页内容
|
|
totalSize: 0,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
selectDate: [],
|
|
loading: false,
|
|
tableLoading: false
|
|
}
|
|
},
|
|
mounted: function () {
|
|
let startDate = this.$moment(new Date()).add(-29, "day").format("YYYY-MM-DD");
|
|
let endDate = this.$moment(new Date()).format("YYYY-MM-DD");
|
|
this.selectDate.push(startDate);
|
|
this.selectDate.push(endDate);
|
|
this.allCompany();
|
|
this.storeInit();
|
|
this.sellerInit();
|
|
this.generalizeOfSeller();
|
|
},
|
|
methods: {
|
|
onChangeDateLister(date) {
|
|
this.selectDate = date;
|
|
},
|
|
allCompany() {
|
|
let that = this;
|
|
let request = {
|
|
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
|
|
};
|
|
this.companyList = [];
|
|
IncreaseData.listOfRetailCompany(request, function (data) {
|
|
data = data.data;
|
|
if (data.code === '0001') {
|
|
that.$Message.error("查询零售公司出错!");
|
|
return;
|
|
}
|
|
if (data.code === '0000') {
|
|
that.companyList.push({id: '-1', name: "全部"});
|
|
that.selectedCompany = "-1";
|
|
data.results.forEach(da => {
|
|
that.companyList.push(da);
|
|
})
|
|
}
|
|
})
|
|
},
|
|
storeInit() {
|
|
let that = this;
|
|
let request = {
|
|
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
|
|
};
|
|
this.storeList = [];
|
|
IncreaseData.storeInit(request, function (data) {
|
|
data = data.data;
|
|
if (data.code === '0001') {
|
|
that.$Message.error("查询零售公司的店铺出错!");
|
|
return;
|
|
}
|
|
if (data.code === '0000') {
|
|
that.storeList.push({
|
|
id: '-1',
|
|
name: "全部"
|
|
})
|
|
that.selectedStore = '-1';
|
|
data.results.forEach(da => {
|
|
that.storeList.push(da);
|
|
})
|
|
}
|
|
})
|
|
},
|
|
sellerInit() {
|
|
let that = this;
|
|
let request = {
|
|
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
|
|
};
|
|
this.staffList = [];
|
|
IncreaseData.sellerInit(request, function (data) {
|
|
data = data.data;
|
|
if (data.code === '0001') {
|
|
that.$Message.error("查询零售公司的店铺出错!");
|
|
return;
|
|
}
|
|
if (data.code === '0000') {
|
|
that.staffList.push({
|
|
id: '-1',
|
|
name: "全部"
|
|
});
|
|
that.selectedStaff = '-1';
|
|
data.results.forEach(da => {
|
|
that.staffList.push(da);
|
|
})
|
|
}
|
|
})
|
|
},
|
|
storeOfCompany() {
|
|
let that = this;
|
|
this.selectedStore = "";
|
|
let orgId = this.selectedCompany;
|
|
if (this.selectedCompany === "-1") {
|
|
orgId = null;
|
|
}
|
|
let request = {
|
|
orgId: orgId
|
|
};
|
|
this.storeList = [];
|
|
IncreaseData.listOfStoreByCompany(request, function (data) {
|
|
data = data.data;
|
|
if (data.code === '0001') {
|
|
that.$Message.error("查询零售公司的店铺出错!");
|
|
return;
|
|
}
|
|
if (data.code === '0000') {
|
|
that.storeList.push({
|
|
id: '-1',
|
|
name: "全部"
|
|
});
|
|
that.selectedStore = '-1';
|
|
data.results.forEach(da => {
|
|
that.storeList.push(da);
|
|
})
|
|
}
|
|
})
|
|
},
|
|
sellerOfStore() {
|
|
let that = this;
|
|
this.selectedStaff = "";
|
|
let shopId = this.selectedStore;
|
|
if (this.selectedStore === '-1') {
|
|
shopId = null;
|
|
}
|
|
let request = {
|
|
shopId: shopId
|
|
};
|
|
this.staffList = [];
|
|
IncreaseData.listOfSellerByStore(request, function (data) {
|
|
data = data.data;
|
|
if (data.code === '0001') {
|
|
that.$Message.error("查询零售公司的店铺出错!");
|
|
return;
|
|
}
|
|
if (data.code === '0000') {
|
|
that.staffList.push({
|
|
id: '-1',
|
|
name: "全部"
|
|
});
|
|
that.selectedStaff = '-1';
|
|
data.results.forEach(da => {
|
|
that.staffList.push(da);
|
|
})
|
|
}
|
|
})
|
|
},
|
|
generalizeOfSeller() {
|
|
this.tableLoading = true;
|
|
if (this.selectDate[0] === "") {
|
|
this.$Message.info("请选择日期");
|
|
return
|
|
}
|
|
let that = this;
|
|
let sellerId = this.selectedStaff;
|
|
if (this.selectedStaff === "-1") {
|
|
sellerId = null;
|
|
}
|
|
let shopId = this.selectedStore;
|
|
if (this.selectedStore === "-1") {
|
|
shopId = null;
|
|
}
|
|
let orgId = this.selectedCompany;
|
|
if (this.selectedCompany === "-1") {
|
|
orgId = null;
|
|
}
|
|
let request = {
|
|
startTime: this.selectDate[0],
|
|
endTime: this.selectDate[1],
|
|
orgId: orgId,
|
|
shopId: shopId,
|
|
sellerId: sellerId,
|
|
pageNum: this.pageNum,
|
|
pageSize: this.pageSize,
|
|
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
|
|
};
|
|
this.data1 = [];
|
|
IncreaseData.generalizeOfSeller(request, function (data) {
|
|
that.data1 = [];
|
|
that.tableLoading = false;
|
|
data = data.data;
|
|
if (data.code === '0001') {
|
|
that.$Message.error("查询零售公司的店铺出错!");
|
|
return;
|
|
}
|
|
if (data.code === '0000') {
|
|
that.data1 = data.results.dataVOS;
|
|
for (let i = 0; i < that.data1.length; i++) {
|
|
that.data1[i].index = (that.pageNum - 1) * that.pageSize + i + 1;
|
|
}
|
|
that.totalSize = data.results.sizeNum;
|
|
}
|
|
})
|
|
},
|
|
//切页处理
|
|
handlePage: function (value) {
|
|
this.pageNum = value;
|
|
this.generalizeOfSeller();
|
|
},
|
|
//零推广导出
|
|
exportZeroExtend: function () {
|
|
this.loading = true;
|
|
if (this.selectDate[0] === "") {
|
|
this.$Message.info("请选择日期");
|
|
return
|
|
}
|
|
let sellerId = this.selectedStaff;
|
|
if (this.selectedStaff === "-1") {
|
|
sellerId = null;
|
|
}
|
|
let shopId = this.selectedStore;
|
|
if (this.selectedStore === "-1") {
|
|
shopId = null;
|
|
}
|
|
let orgId = this.selectedCompany;
|
|
if (this.selectedCompany === "-1") {
|
|
orgId = null;
|
|
}
|
|
let that = this;
|
|
let request = {
|
|
startTime: this.selectDate[0],
|
|
endTime: this.selectDate[1],
|
|
orgId: orgId,
|
|
shopId: shopId,
|
|
sellerId: sellerId,
|
|
pageNum: 1,
|
|
pageSize: this.totalSize,
|
|
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
|
|
};
|
|
let originAllData = [];
|
|
IncreaseData.generalizeOfSeller(request, function (data) {
|
|
if (data.data.code !== "0000") {
|
|
that.$Message.error("系统异常");
|
|
}
|
|
data = data.data.results.dataVOS;
|
|
if (data && data.length > 0) {
|
|
that.loading = false;
|
|
for (let i = 0; i < data.length; i++) {
|
|
let entity = data[i];
|
|
entity.index = i + 1;
|
|
originAllData.push(entity);
|
|
}
|
|
let title = "导购推广情况" + that.selectDate[0] + '-' + that.selectDate[1];
|
|
require.ensure([], () => {
|
|
const {export_json_to_excel} = require('../../excel/Export2Excel');
|
|
const tHeader = ['序号', '导购名称', '工号', '所属店铺', '店铺编码', '所属零售公司', '总好友数', '总好友数（去重）', '新增好友数', '新增好友数（去重）', '日增好友平均（去重）'];
|
|
// 属性名
|
|
const filterVal = ['index', 'sellerName', 'sellerCode', 'shopName', 'shopCode', 'companyName', 'allCustomer', 'effectiveCustomer', 'newCustomer', 'newEffectiveCustomer', 'avgNewCustomer'];
|
|
// 数据
|
|
//把data里的tableData存到list
|
|
const data = that.formatJson(filterVal, originAllData);
|
|
export_json_to_excel(tHeader, data, title);
|
|
});
|
|
}
|
|
if (!data || data.length === 0) {
|
|
that.$Message.info("暂无数据");
|
|
}
|
|
});
|
|
},
|
|
formatJson(filterVal, jsonData) {
|
|
return jsonData.map(v => filterVal.map(j => v[j]))
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
|
|
.search-col {
|
|
text-align: left;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
|
|
</style>
|