web-retail-admin/src/views/settlementCenter/totalBonus/index.vue

1063 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
* @Descripttion:
* @version:
* @Author: kBank
* @Date: 2022-10-24 15:45:01
-->
<template>
<div class="page">
<topBar v-if="topList.length > 0" :top-list="topList" :moren="moren" />
<div class="main">
<el-form
ref="select"
:model="select"
style="padding: 0px 10px 0px 0; background: #fff"
label-width="auto"
>
<el-row :gutter="20">
<!-- 一层 -->
<el-col :span="4">
<el-form-item :label="'结算期数'">
<div style="display: flex">
<div>
<el-input v-model="select.period" clearable />
</div>
<!-- <span style="margin: 0 10px">至</span>-->
<!-- <div>-->
<!-- <el-input v-model="select.endPeriod" clearable />-->
<!-- </div>-->
</div>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'币种展示'">
<el-select v-model="select.pkCurrency" clearable placeholder="">
<el-option
v-for="item in acList"
: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"
format="yyyy-MM-dd"
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
@change="changeTime"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="'隶属体系'">
<el-cascader
v-model="select.pkBdVertexStred"
:options="verList"
:props="props"
collapse-tags
clearable
@change="getPkBdVertexStr"
/>
</el-form-item>
</el-col>
<!-- <el-row>
<el-col>
<el-form-item :label="'隶属体系'" style="margin-top: -5px">
<el-checkbox-group v-model="pkVertex">
<el-checkbox
v-for="item in verList"
:key="item.value"
:value="item.pkId"
:label="item.vertexName"
@change="vertCheck($event,item)"
/>
</el-checkbox-group>
</el-form-item>
</el-col>
</el-row> -->
<!-- <el-row>
<el-col>
<el-form-item :label="'隶属团队'" style="margin-top: -15px">
<el-checkbox-group v-model="pkMemberTeam">
<el-checkbox
v-for="item in memberList"
:key="item.value"
:value="item.pkId"
:label="item.teamName"
@change="teamCheck($event,item)"
/>
</el-checkbox-group>
</el-form-item>
</el-col>
</el-row> -->
<el-col :span="4">
<el-button type="primary" class="my_search" @click="getDataList">
{{ '搜索' }}</el-button>
<el-button
style="margin-left: 20px"
class="my_reset"
@click="reset"
>
{{ '重置' }}</el-button>
</el-col>
</el-row>
</el-form>
<div class="maintop">
<div class="mainbtn">
<el-button
v-has-buttons="['totalBonusExport']"
size="small"
class="thebtn2"
@click="exports"
>
{{ '导出' }}</el-button>
</div>
<!-- <div>
<el-dropdown :hide-on-click="false">
<span class="el-dropdown-link kuang">
{{'筛选字段'}}<i class="el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="item in menuList"
:key="item.id"
>
<el-checkbox
v-model="item.checked"
@change="getMenu($event,item.id)"
>{{ item.text }}</el-checkbox>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> -->
</div>
<div class="maintable">
<div>
<el-table
v-loading="loading"
:data="tableData.censusSummaryList"
height="610px"
style="width: 100%"
:header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column
align="center"
prop="period"
width="130"
:label="'结算期数'"
/>
<el-table-column
align="center"
prop="settleDate"
width="200"
:label="'结算时间'"
/>
<el-table-column
align="center"
prop="retailRangeIncome"
width="130"
:label="$t('直推收益') + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="retailSameLevelIncome"
width="130"
:label="$t('平级收益') + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="retailAreaIncome"
width="130"
:label="$t('区域分红') + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="retailBenefitRangeIncome"
width="130"
:label="$t('福利级差收益') + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="repurRangeIncome"
width="130"
:label="$t('复购级差收益') + '(¥)'"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="retailMonthRepurchaseIncome"
width="160"
:label="$t('月复购级差收益') + '(¥)'"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="coachIncome"
width="130"
:label="$t('培育津贴') + '(¥)'"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="retailBenefitAvgIncome"
width="160"
:label="$t('福利分红平均收益') + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="retailBenefitIncome"
width="160"
:label="$t('福利分红加权收益') + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="backPoints"
width="130"
:label="$t('重消收益') + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<!-- <el-table-column
align="center"
prop="globalPointsOri"
width="130"
:label="$t('直推级差') + '(¥)'"
:formatter="stateFormat"
/> -->
<!-- <el-table-column
align="center"
prop="realIncomeTotalOri"
width="130"
v-if="allTxt.realIncomeTotalOri"
:label="'实发收益总计' + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<el-table-column
v-if="allTxt.realIncomeTotal"
align="center"
prop="realIncomeTotal"
width="130"
:label="'实发收益总计' + '($)'"
:formatter="stateFormat"
/> -->
<!-- <el-table-column
align="center"
prop="settleDate"
width="200"
:label="'开始日期'"
v-if="allTxt.settleDate"
/> -->
<el-table-column
v-if="allTxt.realIncomeTotal"
align="center"
prop="realIncomeTotal"
width="130"
:label="'实发收益总计' + '(¥)'"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="time"
width="150"
:label="'操作'"
>
<template slot-scope="scope">
<el-button
style="color: #e70dec"
type="text"
size="small"
@click="bonusTap(scope.row)"
>
{{ '奖金明细' }}
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- <div class="heji">-->
<!-- <div-->
<!-- v-for="item in menuList"-->
<!-- v-if="item.checked&&item.id != 0&&item.id > 13"-->
<!-- :key="item.id"-->
<!-- class="dis"-->
<!-- >-->
<!-- <div>{{ item.text }}</div>-->
<!-- <div>{{ tableData[item.prop] }}</div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getDataList"
/>
</div>
</template>
<script>
import topBar from '@/components/topBar'
import * as api from '@/api/settle.js'
import { classifyUpdate, classifySave } from '@/api/product'
import { queryBonusDetail, queryBonusTotal } from '@/api/bonus'
import { isLocalSymbol, stateFormat } from '@/utils/numberToCurrency'
import { getRoleMenu } from '@/api/notice'
export default {
name: 'Bzpz',
components: {
topBar
},
filters: {
isAgree(val) {
if (!val) {
return '允许'
} else {
return '禁止'
}
}
},
data() {
return {
typeList: [
{
value: 0,
label: '前台'
},
{
value: 1,
label: '后台'
}
],
digList: [
{
value: 0,
label: '允许'
},
{
value: 1,
label: '禁止'
}
],
menuList: [
{
id: 0,
text: '全选',
checked: true
},
{
id: 31,
text: '复购券',
checked: true,
prop: 'repurCoupon',
flag: 1
}
],
creationTime: [],
creationTime1: [],
select: {
// pkVertex: [],
// pkMemberTeam: [],
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 50
},
addOrEdit: '',
total: 0,
dialogVisible: false,
loading: false,
tableData: {
censusSummaryList: []
},
moren: '/settlementCenter/totalBonus',
topList: [
{
name: '奖金汇总',
path: '/settlementCenter/totalBonus'
}
],
form: {
name: ''
},
rules: {
name: [
{ required: true, message: '请输入规格类型', trigger: 'blur' }
]
},
acList: [],
verList: [],
memberList: [],
pkMemberTeam: [],
pkVertex: [],
pkTeamId: '', // 隶属团队id
pkVertId: '', // 隶属体系id
dataList: [
{
name: 'period',
key: ''
},
{
name: 'directIncomeOri',
key: ''
},
{
name: 'directIncome',
key: ''
},
{
name: 'expandIncomeOri',
key: ''
},
{
name: 'expandIncome',
key: ''
},
{
name: 'coachIncomeOri',
key: ''
},
{
name: 'coachIncome',
key: ''
},
{
name: 'shareIncomeOri',
key: ''
},
{
name: 'shareIncome',
key: ''
},
{
name: 'serviceIncomeOri',
key: ''
},
// 10
{
name: 'serviceIncome',
key: ''
},
{
name: 'cloudDirectIncomeOri',
key: ''
},
{
name: 'cloudDirectIncome',
key: ''
},
{
name: 'cloudPurIncomeOri',
key: ''
},
{
name: 'cloudPurIncome',
key: ''
},
{
name: 'cloudRepurIncomeOri',
key: ''
},
{
name: 'cloudRepurIncome',
key: ''
},
{
name: 'repurRangeIncomeOri',
key: ''
},
{
name: 'repurRangeIncome',
key: ''
},
{
name: 'repurExpandIncomeOri',
key: ''
},
// 20
{
name: 'repurExpandIncome',
key: ''
},
{
name: 'repurCoupon',
key: ''
},
{
name: 'repurCouponShareOri',
key: ''
},
{
name: 'backPointsOri',
key: ''
},
{
name: 'backPoints',
key: ''
},
{
name: 'serviceSpendOri',
key: ''
},
{
name: 'serviceSpend',
key: ''
},
{
name: 'globalPoints',
key: ''
},
{
name: 'carAwardPoints',
key: ''
},
{
name: 'storeIncome',
key: ''
},
// 30
{
name: 'hiFunIncomeOri',
key: ''
},
{
name: 'makerDirectIncomeOri',
key: ''
},
{
name: 'makerShareIncomeOri',
key: ''
},
{
name: 'purRealSubtotalOri',
key: ''
},
{
name: 'purRealSubtotal',
key: ''
},
{
name: 'cloudRealSubtotalOri',
key: ''
},
{
name: 'cloudRealSubtotal',
key: ''
},
{
name: 'repurRealSubtotalOri',
key: ''
},
{
name: 'repurRealSubtotal',
key: ''
},
{
name: 'repurCouponSubtotalOri',
key: ''
},
// 40
{
name: 'makerRealSubtotalOri',
key: ''
},
{
name: 'realIncomeTotalOri',
key: ''
},
{
name: 'realIncomeTotal',
key: ''
},
{
name: 'settleDate',
key: ''
},
{
name: 'hiFunIncome',
key: ''
}
],
flag: false,
allTxt: {},
props: {
multiple: true,
expandTrigger: 'hover',
value: 'pkId',
label: 'vertexName',
children: 'childList'
}
}
},
mounted() {
// 获取下拉
this.getData()
// 获取列表
this.getUserRole()
var s1 = this.getStartTime()
var s2 = this.getEndTime()
this.select.startDate = s1
this.select.endDate = s2
this.creationTime = [s1, s2]
setTimeout(() => {
this.getDataList()
}, 10)
},
methods: {
getPkBdVertexStr(e) {
const arr = e.map((item) => item[1])
const pkBdVertexStr = arr.join(',')
this.$set(this.select, 'pkBdVertexStr', pkBdVertexStr)
},
getStartTime() {
const date = new Date()
// console.error(date.getDate()==1?date.getMonth():date.getMonth() + 1)
const year = date.getFullYear() // 得到当前年份
let month = date.getDate() === 1 ? date.getMonth() : date.getMonth() + 1 // 得到当前月份0-11月份+1是当前月份
date.setDate(1) // 将当前时间的日期设置成第一天
month = month >= 10 ? month : '0' + month // 补零
let day = date.getDate() // 得到当前天数实际是本月第一天因为前面setDate(1) 设置过了
day = day >= 10 ? day : '0' + day // 补零
return year + '-' + month + '-' + day
},
getEndTime() {
var date = new Date()
var year = date.getFullYear() // 年
let month = date.getDate() === 1 ? date.getMonth() : date.getMonth() + 1 // 得到当前月份0-11月份+1是当前月份
var day = date.getDate() > 1 ? date.getDate() - 1 : date.getDate() // 日
const day1 = date.getDate()
var hour = date.getHours() // 时
var minutes = date.getMinutes() // 分
var seconds = date.getSeconds() // 秒
// 给一位数的数据前面加 “0”
if (month >= 1 && month <= 9) {
month = '0' + month
}
if (day >= 0 && day <= 9) {
day = '0' + day
}
if (hour >= 0 && hour <= 9) {
hour = '0' + hour
}
if (minutes >= 0 && minutes <= 9) {
minutes = '0' + minutes
}
if (seconds >= 0 && seconds <= 9) {
seconds = '0' + seconds
}
if (day1 == 1) {
var date2 = new Date()
var year2 = date2.getFullYear()
var month2 = date2.getMonth()
// let dates =this.getMonthDay(year2,month2,0)
var dates = new Date(year2, month2, 0).getDate()
day = dates
}
return year + '-' + month + '-' + day
},
isLocalSymbol,
// getUserRole() {
// getRoleMenu('totalBonus').then((res) => {
// this.dataList.forEach((item) => {
// res.data.forEach((items) => {
// if (item.name == items) {
// item.key = items
// }
// })
// })
// this.flag = true
// })
// },
getUserRole() {
getRoleMenu('totalBonus').then((res) => {
const obj = {}
res.data.forEach((item) => {
obj[item] = 1
})
this.allTxt = obj
this.$nextTick(() => {
this.$refs.table.doLayout()
})
})
},
stateFormat,
vertCheck(index, item) {
if (this.pkVertex.length > 1) {
this.pkVertex.splice(0, 1)
this.pkVertId = item.pkId
} else if (this.pkVertex.length == 1) {
this.pkVertId = item.pkId
} else {
this.pkVertId = ''
}
},
teamCheck(index, item) {
if (this.pkMemberTeam.length > 1) {
this.pkMemberTeam.splice(0, 1)
this.pkTeamId = item.pkId
} else if (this.pkMemberTeam.length == 1) {
this.pkTeamId = item.pkId
} else {
this.pkTeamId = ''
}
},
bonusTap(item) {
this.$router.push({
path: '/settlementCenter/bonusDetail'
})
},
reset() {
this.select = {
// pkVertex: [],
// pkMemberTeam: [],
}
this.creationTime = []
this.pkVertex = []
this.pkMemberTeam = []
this.getDataList()
},
getMenu(e, id) {
if (e && id == 0) {
this.menuList.forEach((item) => {
this.$set(item, 'checked', true)
})
} else if (!e && id == 0) {
this.menuList.forEach((item) => {
this.$set(item, 'checked', false)
})
}
},
getData() {
api.accountList().then((res) => {
this.acList = res.data
})
api.vertexChild().then((res) => {
this.verList = res.data
})
api.memberTeam().then((res) => {
this.memberList = res.rows
})
},
changeTime(val) {
if (val) {
this.select.startDate = val[0]
this.select.endDate = val[1]
}
},
changeTime1(val) {
this.select.startEffectDate = val[0]
this.select.endEffectDate = val[1]
},
// 点击修改
toFixed(id) {
this.addOrEdit = false
this.dialogVisible = true
this.$router.push({
path: 'noticeList/details',
query: {
pkId: id
}
})
},
getSummaries(param) {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '小计' + '(¥)'
return
}
if (index === 1) {
sums[index] = ''
return
}
const values = data.map((item) => Number(item[column.property]))
if (!values.every((value) => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
// sums[index] += ' 元'
} else {
sums[index] = ''
}
})
return sums
},
// 删除
handleDelete(id) {
this.$confirm('确认删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
api.classifyDel(id).then((res) => {
this.getDataList()
})
})
},
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let url = ''
if (this.addOrEdit == true) {
url = classifySave
} else {
url = classifyUpdate
}
url(this.form).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
})
this.dialogVisible = false
// 充值数据
this.$refs[formName].resetFields()
// 获取列表
this.getDataList()
}
})
} else {
return false
}
})
},
handleClose() {
this.dialogVisible = false
this.$refs['form'].clearValidate()
this.$refs['form'].resetFields()
},
openDig() {
this.$router.push({
path: 'noticeList/details'
})
},
getDataList() {
this.loading = true
if (this.select.period) {
this.select.period = parseInt(this.select.period)
}
if (this.creationTime == '' || this.creationTime == null) {
this.select.startDate = ''
this.select.endDate = ''
}
queryBonusTotal(
Object.assign(
{},
{ pkVertex: this.pkVertId, pkTeamCode: this.pkTeamId },
this.select
),
`?pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`
).then((res) => {
this.loading = false
this.tableData.censusSummaryList = res.rows
this.total = res.total
})
},
handleSelectionChange(val) {},
/** 导出按钮操作 */
exports() {
this.$confirm('是否确认导出所有数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then((_) => {
this.download(
'/bonus/manage/bonus/export-bonus-total',
Object.assign({}, this.queryParams, this.select),
`${'奖金汇总'}-${new Date().getTime()}.xlsx`
)
})
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return 'warning-row'
} else if (rowIndex % 2 == 0) {
return 'success-row'
}
return ''
}
}
}
</script>
<style scoped lang="scss">
::v-deep .el-table__body-wrapper {
// height: 740px!important;
}
::v-deep .el-range-editor.el-input__inner {
width: 100%;
}
::v-deep .el-form-item {
margin-bottom: 0;
}
::v-deep .el-button {
padding: 8px 20px;
}
::v-deep .el-date-editor .el-range__close-icon {
margin-top: -10px;
}
::v-deep .el-date-editor .el-range-separator {
margin-top: -10px;
}
::v-deep .el-date-editor .el-range__icon {
margin-top: -10px;
}
::v-deep .el-input__inner {
//height:28px;
//line-height: 28px;
}
::v-deep .el-form-item__label {
color: #333;
font-weight: inherit;
}
::v-deep .el-table .warning-row {
background: #f9f9f9;
}
::v-deep .el-table .success-row {
background: #ffffff;
}
::v-deep .el-table thead {
color: #000000;
}
::v-deep .el-select {
width: 100%;
}
.uploadIcon ::v-deep .el-upload--picture-card {
display: none !important; /* 上传按钮隐藏 */
}
.page {
padding: 20px;
background: #f9f9f9;
font-size: 14px;
.main {
background: #f9f9f9;
//border-radius: 8px;
//box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
.maintop {
display: flex;
//padding: 10px 0px;
justify-content: space-between;
align-items: center;
.mainbtn {
.thebtn1 {
background: #3181e5;
color: #ffffff;
}
.thebtn2 {
background: #ffad41;
color: #ffffff;
}
}
.maintitle {
font-size: 10px;
font-family: MicrosoftYaHei;
color: #999999;
}
}
}
.tem {
display: flex;
align-items: center;
justify-content: center;
img {
width: 28px;
height: 20px;
margin-right: 3px;
}
}
.isRed {
color: #ed1d25;
}
.isGreen {
color: #1ab62b;
}
.bgImg {
width: 48px;
height: 48px;
}
}
.openClose {
text-align: right;
margin-right: 10px;
color: #3181e5;
}
.kuang {
padding: 5px 20px;
background: rgba(255, 255, 255, 0);
border-radius: 4px;
border: 1px solid #cccccc;
}
::v-deep .el-cascader {
width: 100%;
}
.heji {
margin-top: 10px;
.dis {
display: flex;
justify-content: right;
padding: 5px 10px;
font-size: 14px;
color: #333333;
:nth-child(1) {
font-size: 14px;
font-weight: bold;
color: #333333;
margin-right: 20px;
}
}
}
// el-table__body-wrapper is-scrolling-left
/* 设置滚动条宽度和高度 */
</style>
<!-- <style>
.itemTrading .el-table {
overflow: auto;
}
.itemTrading .el-table__body-wrapper,
.itemTrading .el-table__header-wrapper,
.itemTrading .el-table__footer-wrapper {
overflow: visible;
}
.itemTrading .el-table::after {
position: relative !important;
}
.body-theme-grenn .el-table--scrollable-x .el-table__body-wrapper {
overflow: visible;
}
</style> -->