103 lines
3.1 KiB
Vue
103 lines
3.1 KiB
Vue
<template>
|
|
<div v-loading="loading">
|
|
<div class="heior_box">
|
|
<div class="search-box">
|
|
<el-date-picker
|
|
size="small"
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
></el-date-picker>
|
|
<el-input v-model="searchModel.keyWord" placeholder="请输入产品名称" clearable size="small">
|
|
<el-button slot="append" icon="el-icon-search" @click="get"></el-button>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
<el-table
|
|
:data="retData"
|
|
border
|
|
size="medium"
|
|
:height="$getHeight(150)"
|
|
:span-method="mergeSpan"
|
|
show-summary
|
|
>
|
|
<el-table-column prop="ProductName" label="产品"></el-table-column>
|
|
<el-table-column prop="PackageName" label="套餐"></el-table-column>
|
|
<el-table-column prop="NewBuyCount" label="新开个数"></el-table-column>
|
|
<el-table-column prop="NewBuyAmount" label="新开金额"></el-table-column>
|
|
<el-table-column prop="AgainBuyCount" label="续费个数"></el-table-column>
|
|
<el-table-column prop="AgainBuyAmount" label="续费金额"></el-table-column>
|
|
<el-table-column prop="RefundCount" label="退货个数"></el-table-column>
|
|
<el-table-column prop="RefundAmount" label="退货金额"></el-table-column>
|
|
<!-- <el-table-column prop="PaymentAmount" label="换货个数"></el-table-column>
|
|
<el-table-column prop="PaymentAmount" label="换货金额"></el-table-column>-->
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'treeTable',
|
|
components: {},
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
retData: [],
|
|
dateRange: [],
|
|
searchModel: {
|
|
PageIndex: 1,
|
|
keyWord: '',
|
|
Status: 0,
|
|
PayType: 0,
|
|
Btime: '',
|
|
Etime: ''
|
|
},
|
|
flagMap: {}
|
|
}
|
|
},
|
|
mounted () {
|
|
this.$store.commit('setCurrentNav', '销售管理>>统计分析')
|
|
this.get()
|
|
},
|
|
methods: {
|
|
get () {
|
|
this.flagMap = {}
|
|
if (this.dateRange && this.dateRange.length === 2) {
|
|
this.searchModel.Btime = this.dateRange[0]
|
|
this.searchModel.Etime = this.dateRange[1]
|
|
}
|
|
this.$api.get('course/v1/order/Statistics', this.searchModel).then(res => {
|
|
this.retData = res.Data
|
|
this.retData.forEach(item => {
|
|
var flag = this.flagMap[item.ProductName]
|
|
if (!flag) {
|
|
this.flagMap[item.ProductName] = true
|
|
var count = this.retData.filter(m => m.ProductName === item.ProductName).length
|
|
item.rSpan = count
|
|
item.cSpan = 1
|
|
} else {
|
|
item.rSpan = 0
|
|
item.cSpan = 0
|
|
}
|
|
})
|
|
})
|
|
},
|
|
mergeSpan ({row, column, rowIndex, columnIndex}) {
|
|
if (columnIndex === 0) {
|
|
console.log(`${row.rSpan}-${row.cSpan}`)
|
|
return {
|
|
rowspan: row.rSpan,
|
|
colspan: row.cSpan
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.el-table{
|
|
overflow:visible !important;
|
|
}
|
|
</style>
|