|
|
<style scoped>
|
|
|
.txt-font-a {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.txt-font-b {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
.margin-right {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
</style>
|
|
|
<template>
|
|
|
<div>
|
|
|
<Row :gutter="32">
|
|
|
<i-col span="32">
|
|
|
<row>
|
|
|
<row style="height: 90px;background: #f7f8fa;border: 1px solid #E8ECF2;line-height: 90px">
|
|
|
<span class="left-15">选择日期</span>
|
|
|
<DatePicker v-model="dateRange" class="left-15" type="daterange" placement="bottom-start" split-panels placeholder="请选择日期区间" style="width: 200px" ></DatePicker>
|
|
|
<!-- <span style="margin-left: 48px" class="txt-font-a" >开始时间</span>
|
|
|
<DatePicker v-model="startDate" class="left-15 txt-font-a" type="date" :options="options1" placeholder="选择开始时间" style="width: 200px"></DatePicker>
|
|
|
<span class="left-15 txt-font-a">结束时间</span>
|
|
|
<DatePicker v-model="endDate" class="left-15 txt-font-a" :options="options2" type="date" placeholder="选择结束时间" style="width: 200px"></DatePicker>-->
|
|
|
<span class="left-15 txt-font-a">零售公司</span>
|
|
|
<Select v-model="companyId" filterable class="left-15 txt-font-a" style="width:190px" @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" style="width:190px" @on-change="downShopChange">
|
|
|
<Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.name }}</Option>
|
|
|
</Select>
|
|
|
<span class="left-15 txt-font-a">导购</span>
|
|
|
<Select filterable placeholder="全部" v-model="sellerId" class="left-15 txt-font-a" style="width:190px" >
|
|
|
<Option v-for="item in sellerList" :value="item.id" :key="item.id">{{ item.name }}</Option>
|
|
|
</Select>
|
|
|
|
|
|
<Button type="primary" style="width: 90px;margin-left: 20px" @click="searchCustomerDataBtnClick" class="txt-font-a">查询</Button>
|
|
|
<Button type="primary" style="width: 90px;margin-left: 20px" @click="exportData" class="txt-font-a">导出数据</Button>
|
|
|
|
|
|
</row>
|
|
|
<row>
|
|
|
<Table ref="table" :columns="columns1" :data="data1" style="margin-top: 20px;" size="small" no-data-text="--"></Table>
|
|
|
</row>
|
|
|
<Modal v-model="modal12" draggable scrollable title="好友信息" :width="vipModalWidth+'px'" height="651px" >
|
|
|
<row style="padding: 10px 0">
|
|
|
<i-col span="24" v-if="ifVip" >
|
|
|
<row>
|
|
|
<span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: right">好友名称</span>
|
|
|
<i-input v-model="customerName" :placeholder="customerData.name" style="width: 300px;font-weight: 600" />
|
|
|
</row>
|
|
|
</i-col>
|
|
|
<i-col span="12" v-if="!ifVip" >
|
|
|
<row>
|
|
|
<span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: right">好友名称</span>
|
|
|
<i-input v-model="customerName" :placeholder="customerData.name" style="width: 300px;font-weight: 600" />
|
|
|
</row>
|
|
|
<!-- <row style="margin-top: 16px">-->
|
|
|
<!-- <span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: right">好友ID</span> -->
|
|
|
<!-- <span class="txt-font-b" style="font-weight: 600">{{customerId}}</span>-->
|
|
|
<!-- </row>-->
|
|
|
</i-col >
|
|
|
<i-col span="12" style="border-left: 1px solid #E8ECF2;" v-if="!ifVip" >
|
|
|
<row style="margin-left: 50px">
|
|
|
<span class="txt-font-b" style="width: 80px;display:inline-block;text-align: right;">关联会员</span>
|
|
|
</row>
|
|
|
<row style="margin-top: 16px;margin-left: 98px">
|
|
|
<span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left">会员名称</span>
|
|
|
<span class="txt-font-b" style="font-weight: 600">{{customerData.vipName}}</span>
|
|
|
<Button type="primary" size="small" style="margin-left: 10px;height: 19px;margin-bottom: 3px;" ></Button>
|
|
|
</row>
|
|
|
<row style="margin-top: 16px;margin-left: 98px">
|
|
|
<span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left;">手机号</span>
|
|
|
<span class="txt-font-b" style="font-weight: 600">{{customerData.vipPhone}}</span>
|
|
|
</row>
|
|
|
<row style="margin-top: 16px;margin-left: 98px">
|
|
|
<span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left;">会员生日</span>
|
|
|
<span class="txt-font-b" style="font-weight: 600">{{customerData.birthday}}</span>
|
|
|
</row>
|
|
|
<row style="margin-top: 16px;margin-left: 98px">
|
|
|
<span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left">消费次数</span>
|
|
|
<span class="txt-font-b" style="font-weight: 600">{{customerData.salesNum}}</span>
|
|
|
|
|
|
</row>
|
|
|
<row style="margin-top: 16px;margin-left: 98px">
|
|
|
<span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left">消费金额</span>
|
|
|
<span class="txt-font-b" style="font-weight: 600">{{customerData.salesAmt}}</span>
|
|
|
</row>
|
|
|
<row style="margin-top: 16px;margin-left: 98px">
|
|
|
<span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left">最近消费</span>
|
|
|
<span class="txt-font-b" style="font-weight: 600">{{customerData.lastSalesDay}}</span>
|
|
|
|
|
|
</row>
|
|
|
<row style="margin-top: 16px;margin-left: 98px">
|
|
|
<span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left">专属导购</span>
|
|
|
<span class="txt-font-b" style="font-weight: 600">{{customerData.sellerName}}</span>
|
|
|
</row>
|
|
|
<row style="margin-top: 16px;margin-left: 98px">
|
|
|
<span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left">所属门店</span>
|
|
|
<span class="txt-font-b" style="font-size: 16px;font-weight: 600">{{customerData.shopName}}</span>
|
|
|
</row>
|
|
|
</i-col>
|
|
|
</row>
|
|
|
<div slot="footer">
|
|
|
<Button type="primary" size="large" @click="asyncOK" style="float: left;margin-left: 110px">保存</Button>
|
|
|
|
|
|
<Button type="text" size="large" @click="asyncCancel" style="margin-left: 42px;float: left;border:none">取消</Button>
|
|
|
<i-input style="background-color: Transparent;visibility:hidden;height: 50px" />
|
|
|
</div>
|
|
|
|
|
|
</Modal>
|
|
|
<Page :total="totalSize" :current="pageNum" :page-size="pageSize" show-elevator show-total
|
|
|
placement="top" @on-change="handlePage" style="margin: 20px 50px 0 0;right:0px;position: absolute;"></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 {
|
|
|
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
|
|
|
//开始时间，结束时间
|
|
|
totalSize: null,
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
modal12: false,
|
|
|
startDate: null,
|
|
|
endDate: null,
|
|
|
customerName: null,
|
|
|
dateRange: [],
|
|
|
customerList: [],
|
|
|
companyList: [],
|
|
|
companyId: 0,
|
|
|
organizationalList: [],
|
|
|
shopId: null,
|
|
|
shopList: [],
|
|
|
sellerId: null,
|
|
|
sellerList: [],
|
|
|
customerData: {},
|
|
|
vipModalWidth: 997,
|
|
|
columns1: [
|
|
|
{
|
|
|
title: '序号',
|
|
|
key: 'number'
|
|
|
},
|
|
|
{
|
|
|
title: '好友名称',
|
|
|
key: 'name'
|
|
|
},
|
|
|
{
|
|
|
title: '所属门店',
|
|
|
key: 'shopName'
|
|
|
},
|
|
|
{
|
|
|
title: '店铺编号',
|
|
|
key: 'shopCode'
|
|
|
},
|
|
|
{
|
|
|
title: '所属导购',
|
|
|
key: 'sellerName'
|
|
|
},
|
|
|
{
|
|
|
title: '工号',
|
|
|
key: 'sellerCode'
|
|
|
},
|
|
|
{
|
|
|
title: '创建时间',
|
|
|
key: 'createTime'
|
|
|
},
|
|
|
{
|
|
|
title: '好友手机号',
|
|
|
key: 'phone'
|
|
|
},
|
|
|
{
|
|
|
title: '关联会员',
|
|
|
key: 'vipName'
|
|
|
},
|
|
|
{
|
|
|
title: '会员等级',
|
|
|
key: 'vipLevel'
|
|
|
},
|
|
|
|
|
|
{
|
|
|
title: '会员生日',
|
|
|
key: 'birthday'
|
|
|
}
|
|
|
|
|
|
/*,
|
|
|
{
|
|
|
title: '消费次数',
|
|
|
key: 'salesNum'
|
|
|
},
|
|
|
{
|
|
|
title: '消费金额',
|
|
|
key: 'salesAmt'
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
|
key: 'operation',
|
|
|
render: (h, params) => {
|
|
|
let that = this;
|
|
|
return h('a', {
|
|
|
on: {
|
|
|
'click': () => {
|
|
|
that.customerData = that.data1[params.index];
|
|
|
that.ifVip();
|
|
|
that.customerName = null;
|
|
|
that.modal12 = true
|
|
|
}
|
|
|
}
|
|
|
},[
|
|
|
h('span', {
|
|
|
domProps: {
|
|
|
innerHTML: '查看详情'
|
|
|
}
|
|
|
})
|
|
|
]
|
|
|
|
|
|
);
|
|
|
}
|
|
|
}*/
|
|
|
],
|
|
|
data1: [
|
|
|
{
|
|
|
id: 1,
|
|
|
customerName: '会员名称',
|
|
|
customerPhone: '会员手机',
|
|
|
seller: '会员导购',
|
|
|
vipName: 'vip名称',
|
|
|
salesNum: '消费次数',
|
|
|
salesAmt: '消费金额',
|
|
|
vipLevel: '会员等级',
|
|
|
vipBirth: '会员生日'
|
|
|
},
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
mounted: function () {
|
|
|
this.getCustomerData();
|
|
|
this.getSelectList();
|
|
|
this.downSellerData();
|
|
|
this.downShopData();
|
|
|
this.downRegionData();
|
|
|
|
|
|
},
|
|
|
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();
|
|
|
});
|
|
|
},
|
|
|
//对象属性空检查
|
|
|
checkParamBlank: function(obj){
|
|
|
for(let param in obj){
|
|
|
obj[param] = this.checkBlank(obj[param]);
|
|
|
}
|
|
|
},
|
|
|
//数据空检查
|
|
|
checkBlank: function(data){
|
|
|
if(!data || data === ''){
|
|
|
return "--";
|
|
|
}else{
|
|
|
return data;
|
|
|
}
|
|
|
},
|
|
|
searchCustomerDataBtnClick: function () {
|
|
|
this.totalSize= null;
|
|
|
|
|
|
this.getCustomerData();
|
|
|
|
|
|
},
|
|
|
exportData(){
|
|
|
let that = this;
|
|
|
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 csvdata = [];
|
|
|
let request =
|
|
|
{ userId: that.userId,
|
|
|
startDate: stdate,
|
|
|
endDate: eddate,
|
|
|
companyId: that.changeData(that.companyId),
|
|
|
shopId: that.changeData(that.shopId),
|
|
|
sellerId: that.changeData(that.sellerId),
|
|
|
pageNum : 1,
|
|
|
pageSize : that.totalSize};
|
|
|
customerDetail.dataDetail(request, function (data) {
|
|
|
data = data.data.results;
|
|
|
if(data){
|
|
|
for(let i=0;i<data.length;i++){
|
|
|
let entity = data[i];
|
|
|
if(entity){
|
|
|
if(i === 0) that.totalSize = entity.totalSize;
|
|
|
let birthday = entity.birthday;
|
|
|
let createTime = entity.createTime;
|
|
|
if(birthday){
|
|
|
entity.birthday = that.$moment(birthday).format("MM-DD")
|
|
|
}
|
|
|
if(createTime){
|
|
|
entity.createTime = that.$moment(createTime).format("YYYY-MM-DD")
|
|
|
}
|
|
|
that.checkParamBlank(entity);
|
|
|
csvdata.push(entity);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
if(stdate == null){stdate = "--";}
|
|
|
if(eddate == null){eddate = "--";}
|
|
|
|
|
|
let title = "客户明细";
|
|
|
require.ensure([], () => {
|
|
|
const { export_json_to_excel } = require('../excel/Export2Excel');
|
|
|
const tHeader = ['序号', '好友名称', '所属门店', '店铺编号', '所属导购', '工号', '创建时间','好友手机号','关联会员','会员等级','会员生日'];
|
|
|
// 属性名
|
|
|
const filterVal = ['number', 'name', 'shopName', 'shopCode', 'sellerName', 'sellerCode', 'createTime','phone','vipName','vipLevel','birthday'];
|
|
|
// 数据
|
|
|
const list = csvdata; //把data里的tableData存到list
|
|
|
const data = that.formatJson(filterVal, list);
|
|
|
export_json_to_excel(tHeader, data, title);
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
|
|
|
},
|
|
|
formatJson(filterVal, jsonData) {
|
|
|
return jsonData.map(v => filterVal.map(j => v[j]))
|
|
|
},
|
|
|
getCustomerData: function () {
|
|
|
let that = this;
|
|
|
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),
|
|
|
sellerId: that.changeData(that.sellerId),
|
|
|
pageNum : that.pageNum,
|
|
|
pageSize : that.pageSize,};
|
|
|
customerDetail.dataDetail(request, function (data) {
|
|
|
data = data.data.results;
|
|
|
if(data){
|
|
|
for(let i=0;i<data.length;i++){
|
|
|
let entity = data[i];
|
|
|
if(entity){
|
|
|
if(i === 0) that.totalSize = entity.totalSize;
|
|
|
let birthday = entity.birthday;
|
|
|
let createTime = entity.createTime;
|
|
|
if(birthday){
|
|
|
entity.birthday = that.$moment(birthday).format("MM-DD")
|
|
|
}
|
|
|
if(createTime){
|
|
|
entity.createTime = that.$moment(createTime).format("YYYY-MM-DD")
|
|
|
}
|
|
|
that.data1.push(entity);
|
|
|
that.checkParamBlank(entity);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
downSellerData: function () {
|
|
|
let that = this;
|
|
|
that.sellerList = [{"id":0,"name":"全部"}];
|
|
|
let request = {userId: that.userId, companyId: that.changeData(that.companyId), shopId:that.changeData( that.shopId)};
|
|
|
customerDetail.downSellerData(request, function (data) {
|
|
|
data = data.data.results;
|
|
|
if(data){
|
|
|
for(let i=0;i<data.length;i++){
|
|
|
let entity = data[i];
|
|
|
if(entity){
|
|
|
that.sellerList.push(entity);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//插入全部选项
|
|
|
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 = null;
|
|
|
this.customerList = [];
|
|
|
if(companyId === 0){
|
|
|
//
|
|
|
}else{
|
|
|
this.customerList = this.organizationalList.filter(item => item.parentId === companyId && item.level === 3);
|
|
|
this.insertAllOption();
|
|
|
customerIds = "-1";
|
|
|
this.customerList.forEach(function (data) {
|
|
|
customerIds = customerIds + ","+data.id;
|
|
|
})
|
|
|
}
|
|
|
|
|
|
let request =
|
|
|
{userId: that.userId,customerId: 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;
|
|
|
},
|
|
|
asyncOK: function(){
|
|
|
let that = this;
|
|
|
if(that.customerName){
|
|
|
let request =
|
|
|
{customerId: that.customerData.id,name: that.customerName};
|
|
|
customerDetail.editCustomerData(request,null);
|
|
|
that.getCustomerData();
|
|
|
}
|
|
|
that.asyncCancel();
|
|
|
},
|
|
|
asyncCancel: function(){
|
|
|
let that = this;
|
|
|
that.modal12 = false;
|
|
|
|
|
|
},
|
|
|
ifVip: function(){
|
|
|
let that = this;
|
|
|
let vp = that.customerData.vipName !== '--';
|
|
|
if(!vp)that.vipModalWidth = 500;
|
|
|
return vp;
|
|
|
},
|
|
|
//切页处理
|
|
|
handlePage:function (value) {
|
|
|
this.pageNum = value;
|
|
|
this.getCustomerData();
|
|
|
},
|
|
|
|
|
|
// /**商品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;
|
|
|
}
|
|
|
|
|
|
</style>
|