web-base-admin/src/views/statistics/directStatistics.vue

341 lines
8.0 KiB
Vue

<template>
<div class="page">
<topBar
v-if="topList.length > 0"
:top-list="topList"
:moren="moren"
/>
<div class="thetopbox">
<el-form label-width="100px">
<el-row>
<el-col :span="4">
<el-form-item :label="'订单业绩'">
<el-input
v-model="select.orderAchieve"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'订单类型'">
<el-select
v-model="select.orderType"
>
<el-option
v-for="item in orderList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="'注册日期'">
<el-date-picker
v-model="creationTime"
value-format="yyyy-MM-dd"
type="daterange"
:clearable="false"
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
@change="changeTime"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<div class="searchbox">
<el-button
class="my_search"
@click="getSearch"
>
{{ '搜索' }}</el-button>
<el-button
class="my_reset"
@click="reChongzhi"
>
{{ '重置' }}</el-button>
</div>
</el-col>
</el-row>
</el-form>
</div>
<div class="main">
<div class="maintop">
<div class="mainbtn">
<el-button
size="small"
class="thebtn1"
@click="handleExport"
>
{{ '导出' }}</el-button>
</div>
</div>
<div class="maintable">
<el-table
v-loading="loading"
:data="tableData"
height="700px"
style="width: 100%"
:header-cell-style="{ background: '#EEEEEE' }"
@selection-change="handleSelectionChange"
>
<el-table-column
prop="colsele"
type="selection"
width="55"
/>
<el-table-column
align="center"
prop="memberCode"
:label="'会员编号'"
min-width="120px"
/>
<el-table-column
align="center"
prop="memberName"
:label="'会员姓名'"
/>
<el-table-column
align="center"
prop="phone"
:label="'联系方式'"
min-width="120px"
/>
<el-table-column
align="center"
prop="pkRegisterGradeVal"
:label="'注册等级'"
/>
<el-table-column
align="center"
prop="pkAwardsVal"
:label="'荣誉奖衔'"
/>
<el-table-column
align="center"
prop="vertexName"
:label="'隶属体系'"
/>
<el-table-column
align="center"
prop="teamName"
:label="'隶属团队'"
/>
<el-table-column
align="center"
prop="parMemberCode"
min-width="120px"
:label="'推荐编号'"
/>
<el-table-column
align="center"
prop="parMemberName"
:label="'推荐姓名'"
/>
<el-table-column
align="center"
prop="placeMemberCode"
min-width="120px"
:label="'安置编号'"
/>
<el-table-column
align="center"
prop="placeMemberName"
:label="'安置姓名'"
/>
<el-table-column
align="center"
prop="orderAchieve"
min-width="100px"
:label="'订单业绩' + `(PV)`"
/>
<el-table-column
align="center"
prop="orderTypeVal"
:label="'订单类型'"
/>
<el-table-column
min-width="150px"
align="center"
prop="creationTime"
:label="'注册日期'"
/>
</el-table>
</div>
</div>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getSearch"
/>
</div>
</template>
<script>
import topBar from '@/components/topBar'
import * as api from '@/api/statistics'
import { isLocals, isLocalSymbol } from '@/utils/numberToCurrency'
export default {
name: 'DirectStatistics',
components: {
topBar
},
data() {
return {
moren: 'directStatistics',
topList: [
{
name: '直推统计',
path: 'directStatistics'
}
],
tableData: [],
loading: false,
queryParams: {
pageNum: 1,
pageSize: 50
},
select: {
orderType: 1
},
creationTime: [],
total: 0,
multipleSelection: [],
tableData: [],
orderList: []
}
},
created() {
this.getSearch()
this.getData()
},
methods: {
getData() {
api.orderBusiness().then(res => {
this.orderList = res.data
})
},
isLocalSymbol,
isLocals,
changeTime(val) {
this.select.startDate = val ? val[0] : ''
this.select.endDate = val ? val[1] : ''
},
// 导出
handleExport() {
this.$confirm('是否确认导出所有数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then((_) => {
this.download(
'/report/manager/member-awards/export-directPush',
Object.assign({}, this.queryParams, this.select),
`${'直推统计'}${new Date().getTime()}.xlsx`
)
})
},
handleSelectionChange(val) {
this.multipleSelection = val
},
reChongzhi() {
this.select = {
orderType: 1
}
this.creationTime = []
this.getSearch()
},
getSearch() {
this.loading = true
api
.directPushStatList(Object.assign({}, this.queryParams, this.select))
.then((res) => {
this.tableData = res.rows
this.total = res.total
this.loading = false
})
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-image-viewer__close {
right: 500px;
}
::v-deep .dizhi .el-cascader {
width: 100%;
}
::v-deep .el-range-editor.el-input__inner {
width: 100%;
}
::v-deep .el-table thead {
color: #000000;
}
::v-deep .el-table .warning-row {
background: #f9f9f9;
}
.page {
padding: 10px 20px;
background: #f9f9f9;
font-size: 14px;
.thetopbox {
padding: 15px 20px 15px 0;
background: #ffffff;
border-radius: 8px;
.searchbox {
display: flex;
align-items: center;
margin-left: 40px;
}
.searchtitle {
margin-right: 10px;
}
.searchbtn {
background: #08143f;
color: #ffffff;
}
}
.main {
//margin-top: 20px;
background: #f9f9f9;
//border-radius: 8px;
//box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
.maintop {
display: flex;
// padding: 10px 0;
justify-content: space-between;
align-items: center;
.mainbtn {
.thebtn1 {
color: #ffffff;
background: #ffad41;
width: 68px;
height: 32px;
}
.thebtn2 {
color: #ffffff;
background: #009b58;
width: 68px;
height: 32px;
}
.thebtn3 {
color: #ffffff;
background: #c8161d;
width: 68px;
height: 32px;
}
}
}
}
}
</style>