|
@@ -2,26 +2,51 @@
|
|
<div id="customer-statistics-container" class="customer-statistics-container">
|
|
<div id="customer-statistics-container" class="customer-statistics-container">
|
|
<div class="search-zone">
|
|
<div class="search-zone">
|
|
<div class="search-box">
|
|
<div class="search-box">
|
|
- <el-input v-model="searchParams.Keyword" placeholder="请输入客户名称" clearable class="search-item"
|
|
|
|
- @input="searchList" prefix-icon="el-icon-search" style="width: 240px;" ></el-input>
|
|
|
|
- <el-cascader :options="serviceList" style="width: 240px;margin: 0 0 8px 20px;" filterable v-model="checkedService"
|
|
|
|
- @change="serviceChange" placeholder="请选择套餐信息" clearable collapse-tags :show-all-levels="false"
|
|
|
|
- :props="{multiple:true,label:'title',value:'service_template_id',children:'children',emitPath:false}" key="serivce" >
|
|
|
|
- </el-cascader>
|
|
|
|
- <div class="date-box">
|
|
|
|
- <el-date-picker v-model="searchDate" type="daterange" @change="currentDateTab=0" style="max-width: 240px;margin-right: 20px;"
|
|
|
|
- value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
|
|
|
- <el-select v-model="searchParams.TimeType" placeholder="请选择日期类型" @change="searchList"
|
|
|
|
- style="width: 240px;margin-right: 20px;" clearable>
|
|
|
|
- <el-option :label="item.label" :value="item.value" v-for="item in timeTypeData" :key="item.value"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- <div class="composition-button-tabs">
|
|
|
|
- <el-button size="large" v-for="(item,index) in dateButtonData" :key="item.tabId"
|
|
|
|
- class="date-button"
|
|
|
|
- :class="[index==0?'first-button':index==(dateButtonData.length-1)?'last-button':'inner-button',currentDateTab==item.tabId?'selectTab':'']"
|
|
|
|
- @click="changeDateType(item)">{{ item.text }}</el-button>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <el-form label-width="0" :inline="true" :model="formInline">
|
|
|
|
+ <el-form-item label="">
|
|
|
|
+ <el-input v-model="searchParams.Keyword" placeholder="请输入客户名称" clearable class="search-item"
|
|
|
|
+ @input="searchList" prefix-icon="el-icon-search" style="width: 240px;" ></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="" v-if="currentSdId==AdminId ||Role=='admin'||Role=='ficc_admin'||Role=='rai_admin'">
|
|
|
|
+ <el-cascader :options="saleList" style="width: 240px;margin: 0 0 8px 0;" filterable v-model="checkedSale"
|
|
|
|
+ @change="saleChange" placeholder="请选择销售" clearable collapse-tags :show-all-levels="false"
|
|
|
|
+ :props="{multiple:true,label:'RealName',value:'AdminId',children:'ChildrenList',emitPath:false}" key="sale" >
|
|
|
|
+ </el-cascader>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="">
|
|
|
|
+ <el-cascader :options="serviceList" style="width: 240px;margin: 0 0 8px 0;" filterable v-model="checkedService"
|
|
|
|
+ @change="serviceChange" placeholder="请选择套餐信息" clearable collapse-tags :show-all-levels="false"
|
|
|
|
+ :props="{multiple:true,label:'title',value:'service_template_id',children:'children',emitPath:false}" key="serivce" >
|
|
|
|
+ </el-cascader>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="">
|
|
|
|
+ <div class="date-box">
|
|
|
|
+ <el-date-picker v-model="searchDate" type="daterange" @change="currentDateTab=0" style="max-width: 240px;margin-right: 15px;"
|
|
|
|
+ value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
|
|
|
+ <div class="composition-button-tabs">
|
|
|
|
+ <el-button size="large" v-for="(item,index) in dateButtonData" :key="item.tabId"
|
|
|
|
+ class="date-button"
|
|
|
|
+ :class="[index==0?'first-button':index==(dateButtonData.length-1)?'last-button':'inner-button',currentDateTab==item.tabId?'selectTab':'']"
|
|
|
|
+ @click="changeDateType(item)">{{ item.text }}</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="">
|
|
|
|
+ <el-select v-model="searchParams.TimeType" placeholder="请选择日期类型" @change="searchList" style="width: 240px;" clearable>
|
|
|
|
+ <el-option :label="item.label" :value="item.value" v-for="item in timeTypeData" :key="item.value"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="">
|
|
|
|
+ <el-select v-model="searchParams.HasInvoice" placeholder="请选择开票状态" @change="searchList" style="width: 240px;" clearable>
|
|
|
|
+ <el-option :label="item.label" :value="item.value" v-for="item in invoiceData" :key="item.value"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="">
|
|
|
|
+ <el-select v-model="searchParams.HasPayment" placeholder="请选择到款状态" @change="searchList" style="width: 240px;" clearable>
|
|
|
|
+ <el-option :label="item.label" :value="item.value" v-for="item in paymentData" :key="item.value"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="amount-show-zone">
|
|
<div class="amount-show-zone">
|
|
@@ -174,12 +199,17 @@ import {customInterence} from '@/api/api.js'
|
|
|
|
|
|
this.payTypeArray=[{id:0,type:''},{id:1,type:'年付'},{id:2,type:'半年付'},{id:3,type:'季付'},{id:4,type:'次付'}]
|
|
this.payTypeArray=[{id:0,type:''},{id:1,type:'年付'},{id:2,type:'半年付'},{id:3,type:'季付'},{id:4,type:'次付'}]
|
|
this.timeTypeData=[{label:'开票日期',value:1},{label:'到款日期',value:2},{label:'开票日期&到款日期',value:3}]
|
|
this.timeTypeData=[{label:'开票日期',value:1},{label:'到款日期',value:2},{label:'开票日期&到款日期',value:3}]
|
|
|
|
+ this.invoiceData=[{label:'未开票',value:0 },{label:'已开票',value:1}]
|
|
|
|
+ this.paymentData=[{label:'未到款',value:0 },{label:'到款',value:1}]
|
|
this.dateButtonData=[{text:'近1周',tabId:1,type:'week',diff:1},{text:'近1月',tabId:2,type:'month',diff:1},
|
|
this.dateButtonData=[{text:'近1周',tabId:1,type:'week',diff:1},{text:'近1月',tabId:2,type:'month',diff:1},
|
|
{text:'近2月',tabId:3,type:'month',diff:2},{text:'近3月',tabId:4,type:'month',diff:3}]
|
|
{text:'近2月',tabId:3,type:'month',diff:2},{text:'近3月',tabId:4,type:'month',diff:3}]
|
|
|
|
|
|
return {
|
|
return {
|
|
|
|
+ currentSdId:process.env.NODE_ENV=='production'?13:233,
|
|
serviceList:[],
|
|
serviceList:[],
|
|
|
|
+ saleList:[],
|
|
checkedService:[],
|
|
checkedService:[],
|
|
|
|
+ checkedSale:[],
|
|
searchParams:{
|
|
searchParams:{
|
|
CurrentIndex:1,
|
|
CurrentIndex:1,
|
|
PageSize:10,
|
|
PageSize:10,
|
|
@@ -191,6 +221,9 @@ import {customInterence} from '@/api/api.js'
|
|
TimeType:1,
|
|
TimeType:1,
|
|
SortType:'',
|
|
SortType:'',
|
|
SortParam:'',
|
|
SortParam:'',
|
|
|
|
+ HasInvoice:'',// 开票状态 0未开票,1已开票
|
|
|
|
+ HasPayment:'',// 到款状态 0未到款,1到款
|
|
|
|
+ SellerIds:''
|
|
},
|
|
},
|
|
currentDateTab:0,
|
|
currentDateTab:0,
|
|
searchDate:[startDate,endDate],
|
|
searchDate:[startDate,endDate],
|
|
@@ -206,6 +239,9 @@ import {customInterence} from '@/api/api.js'
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created(){
|
|
created(){
|
|
|
|
+ if(this.currentSdId==this.AdminId ||this.Role=='admin'||this.Role=='ficc_admin'||this.Role=='rai_admin'){
|
|
|
|
+ this.saleSelect()
|
|
|
|
+ }
|
|
this.getSimpleServiceList()
|
|
this.getSimpleServiceList()
|
|
this.getList()
|
|
this.getList()
|
|
},
|
|
},
|
|
@@ -224,7 +260,15 @@ import {customInterence} from '@/api/api.js'
|
|
computed:{
|
|
computed:{
|
|
isAdmin(){
|
|
isAdmin(){
|
|
return localStorage.getItem('Role').indexOf('admin')!=-1 || localStorage.getItem('RoleIdentity').indexOf('ficc_group')!=-1
|
|
return localStorage.getItem('Role').indexOf('admin')!=-1 || localStorage.getItem('RoleIdentity').indexOf('ficc_group')!=-1
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ Role() {
|
|
|
|
+ let role = localStorage.getItem('Role') || '';
|
|
|
|
+ return role;
|
|
|
|
+ },
|
|
|
|
+ AdminId() {
|
|
|
|
+ let role = localStorage.getItem('AdminId') || '';
|
|
|
|
+ return role;
|
|
|
|
+ },
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
getSimpleServiceList(){
|
|
getSimpleServiceList(){
|
|
@@ -266,6 +310,10 @@ import {customInterence} from '@/api/api.js'
|
|
this.searchParams.CurrentIndex = pageNo
|
|
this.searchParams.CurrentIndex = pageNo
|
|
this.getList()
|
|
this.getList()
|
|
},
|
|
},
|
|
|
|
+ saleChange(value){
|
|
|
|
+ this.searchParams.SellerIds = value.join(',')
|
|
|
|
+ this.searchList()
|
|
|
|
+ },
|
|
serviceChange(value){
|
|
serviceChange(value){
|
|
this.searchParams.ServiceType = value.join(',')
|
|
this.searchParams.ServiceType = value.join(',')
|
|
this.searchList()
|
|
this.searchList()
|
|
@@ -299,6 +347,13 @@ import {customInterence} from '@/api/api.js'
|
|
disabledCheck(e){
|
|
disabledCheck(e){
|
|
if(!this.domList[e]) return true
|
|
if(!this.domList[e]) return true
|
|
return this.domList[e].offsetWidth<=this.domList[e].parentNode.offsetWidth
|
|
return this.domList[e].offsetWidth<=this.domList[e].parentNode.offsetWidth
|
|
|
|
+ },
|
|
|
|
+ // 获取销售下拉列表
|
|
|
|
+ saleSelect(){
|
|
|
|
+ customInterence.sellerSelectList({}).then(res=>{
|
|
|
|
+ console.log(res)
|
|
|
|
+ this.saleList = res.Data.List || []
|
|
|
|
+ })
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted(){
|
|
mounted(){
|
|
@@ -323,18 +378,17 @@ import {customInterence} from '@/api/api.js'
|
|
background-color: white;
|
|
background-color: white;
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
.search-box{
|
|
.search-box{
|
|
- margin-left: -20px;
|
|
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
.search-item{
|
|
.search-item{
|
|
width: 232px;
|
|
width: 232px;
|
|
- margin: 0 0 8px 20px;
|
|
|
|
|
|
+ margin: 0 0 8px 0;
|
|
}
|
|
}
|
|
.date-box{
|
|
.date-box{
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
- margin: 0 0 8px 20px;
|
|
|
|
|
|
+ margin: 0 0 8px 0;
|
|
.composition-button-tabs{
|
|
.composition-button-tabs{
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
.date-button{
|
|
.date-button{
|
|
@@ -468,4 +522,7 @@ import {customInterence} from '@/api/api.js'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .el-form-item{
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|