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.
510 lines
21 KiB
Vue
510 lines
21 KiB
Vue
<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" size="small"></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 filterable placeholder="请选择区域" v-model="regionId" class="left-15 txt-font-a" style="width:190px" size="small" @on-change="downRegionChange">-->
|
|
<!-- <Option v-for="item in regionList" :value="item.id" :key="item.id">{{ item.name }}</Option>-->
|
|
<!-- </Select>-->
|
|
<span class="left-15 txt-font-a">零售公司</span>
|
|
<Select filterable placeholder="请选择公司" v-model="regionId" class="left-15 txt-font-a" style="width:190px" size="small" @on-change="downRegionChange">
|
|
<Option v-for="item in regionList" :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" size="small" @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" size="small">
|
|
<Option v-for="item in sellerList" :value="item.id" :key="item.id">{{ item.name }}</Option>
|
|
</Select>
|
|
|
|
<Button type="primary" style="width: 70px;margin-left: 20px" @click="searchCustomerDataBtnClick" size="small" class="txt-font-a">查询</Button>
|
|
<Button type="primary" style="width: 70px;margin-left: 20px" @click="exportData" size="small" 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, {downCompanyData} from "../services/datacenter/DataCenter";
|
|
export default {
|
|
inject:['checkParamBlank'],
|
|
data() {
|
|
return {
|
|
//开始时间，结束时间
|
|
totalSize: null,
|
|
pageNum: 1,
|
|
pageSize: 3,
|
|
modal12: false,
|
|
startDate: null,
|
|
endDate: null,
|
|
regionId: null,
|
|
customerName: null,
|
|
dateRange: [],
|
|
regionList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
|
|
shopId: null,
|
|
shopList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
|
|
sellerId: null,
|
|
sellerList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
|
|
customerData: {},
|
|
vipModalWidth: 997,
|
|
accUserId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
|
|
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.downSellerData();
|
|
this.downShopData();
|
|
this.downRegionData();
|
|
|
|
},
|
|
methods: {
|
|
//对象属性空检查
|
|
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 title = "客户明细数据";
|
|
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.accUserId,
|
|
startDate: stdate,
|
|
endDate: eddate,
|
|
regionId: that.changeData(that.regionId),
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
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.accUserId,
|
|
startDate: stdate,
|
|
endDate: eddate,
|
|
regionId: that.changeData(that.regionId),
|
|
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.accUserId, regionId: that.changeData(that.regionId), 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);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
downShopData: function () {
|
|
let that = this;
|
|
that.shopList = [{"id":0,"name":"全部"}];
|
|
let request =
|
|
{userId: that.accUserId,regionId: that.changeData(that.regionId)};
|
|
customerDetail.downShopData(request, function (data) {
|
|
data = data.data.results;
|
|
if(data){
|
|
for(let i=0;i<data.length;i++){
|
|
let entity = data[i];
|
|
if(entity){
|
|
that.shopList.push(entity);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
downRegionData: function () {
|
|
let that = this;
|
|
that.regionList = [{"id":0,"name":"全部"}];
|
|
let request =
|
|
{userId: that.accUserId};
|
|
customerDetail.downCompanyData(request, function (data) {
|
|
data = data.data.results;
|
|
if(data){
|
|
for(let i=0;i<data.length;i++){
|
|
let entity = data[i];
|
|
if(entity){
|
|
that.regionList.push(entity);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
downShopChange: function () {
|
|
let that = this;
|
|
that.downSellerData();
|
|
},
|
|
downRegionChange: function () {
|
|
let that = this;
|
|
this.downShopData();
|
|
if(!that.shopId){
|
|
that.downShopChange();
|
|
}
|
|
},
|
|
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>
|