|
|
@@ -1,36 +1,73 @@
|
|
|
<template>
|
|
|
<div class="app-container" v-loading="loading">
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- border
|
|
|
- fit
|
|
|
- highlight-current-row
|
|
|
- style="width: 100%; margin-top: 25px;"
|
|
|
- >
|
|
|
- <el-table-column align="center" :label="$t('bonus.welcomeBonus')" prop="BONUS_TG.value" v-show="welcomeBonusSwitch === 1"></el-table-column>
|
|
|
- <el-table-column align="center" :label="$t('bonus.teamBonus')" prop="ORI_BONUS_QY.value" v-show="teamBonusSwitch === 1"></el-table-column>
|
|
|
- <el-table-column align="center" :label="$t('bonus.directorBonus')" prop="ORI_BONUS_BS.value"></el-table-column>
|
|
|
- <el-table-column align="center" :label="$t('bonus.quarterlyBonus')" prop="ORI_BONUS_QUARTER.value"></el-table-column>
|
|
|
- <el-table-column align="center" :label="$t('bonus.stockistCommission')" prop="BONUS_BD.value" v-show="stockistCommissionSwitch === 1"></el-table-column>
|
|
|
- <el-table-column align="center" :label="$t('bonus.totalBonus')" prop="BONUS_TOTAL.value"></el-table-column>
|
|
|
- </el-table>
|
|
|
+ <el-table border :data="userData" style="width: 100%" :cell-style="tableCellStyle">
|
|
|
+ <el-table-column :label="$t('bonus.personalDetails')">
|
|
|
+ <el-table-column type="index" :index="indexMethod" width="60px" label=""></el-table-column>
|
|
|
+ <el-table-column min-width="120px" prop="number" :label="$t('shop.memberCode')"></el-table-column>
|
|
|
+ <el-table-column min-width="210px" prop="name" :label="$t('shop.memberName')"></el-table-column>
|
|
|
+ <el-table-column min-width="70px" prop="perf_status_name" :label="$t('bonus.status')"></el-table-column>
|
|
|
+ <el-table-column min-width="120px" prop="user_perf" :label="$t('bonus.personalBV')">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{ row.user_perf | toThousandFilter }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column min-width="120px" prop="team_perf" :label="$t('bonus.PGS')">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{ row.team_perf | toThousandFilter }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column min-width="120px" prop="total_perf" :label="$t('bonus.totalBV')">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{ row.total_perf | toThousandFilter }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <el-table border :data="tableData" style="width: 100%;margin-top:20px;" :cell-style="tableCellStyle">
|
|
|
+ <el-table-column label="Team Details">
|
|
|
+ <el-table-column type="index" :index="indexMethod" width="60px" label=""></el-table-column>
|
|
|
+ <el-table-column min-width="120px" prop="number" :label="$t('shop.memberCode')"></el-table-column>
|
|
|
+ <el-table-column min-width="210px" prop="name" :label="$t('shop.memberName')"></el-table-column>
|
|
|
+ <el-table-column min-width="70px" prop="perf_status_name" :label="$t('bonus.status')"></el-table-column>
|
|
|
+ <el-table-column min-width="120px" prop="user_perf" :label="$t('bonus.personalBV')">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{ row.user_perf | toThousandFilter }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column min-width="120px" prop="team_perf" :label="$t('bonus.PGS')">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{ row.team_perf | toThousandFilter }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column min-width="120px" prop="total_perf" :label="$t('bonus.totalBV')">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{ row.total_perf | toThousandFilter }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <el-descriptions :column="2">
|
|
|
+ <el-descriptions-item :label="$t('bonus.latestCalculationTime')">{{ getWatTime(calcTime) }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {fetchHistoricalCumulativeBonus} from '@/api/bonus'
|
|
|
+import {fetchTeamInquiry} from '@/api/bonus'
|
|
|
+import tool from "@/utils/tool"
|
|
|
|
|
|
export default {
|
|
|
name: 'teamInquiry',
|
|
|
data() {
|
|
|
return {
|
|
|
+ calcTime: '',
|
|
|
+ userData: [],
|
|
|
tableData: [],
|
|
|
- total: 0,
|
|
|
loading: true,
|
|
|
|
|
|
- welcomeBonusSwitch: 0,
|
|
|
- teamBonusSwitch: 0,
|
|
|
- stockistCommissionSwitch: 0,
|
|
|
+ tool: tool,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -39,16 +76,94 @@ export default {
|
|
|
methods: {
|
|
|
getList() {
|
|
|
this.loading = true
|
|
|
- fetchHistoricalCumulativeBonus().then(response => {
|
|
|
- const {tableData, bonusSwitch} = response.data
|
|
|
- this.tableData = tableData
|
|
|
- this.welcomeBonusSwitch = bonusSwitch.welcomeBonusSwitch
|
|
|
- this.teamBonusSwitch = bonusSwitch.teamBonusSwitch
|
|
|
- this.stockistCommissionSwitch = bonusSwitch.stockistCommissionSwitch
|
|
|
+ fetchTeamInquiry().then(response => {
|
|
|
+ this.calcTime = response.data.calcAt
|
|
|
+ this.tableData = response.data.team
|
|
|
+ this.userData = response.data.user
|
|
|
|
|
|
this.loading = false
|
|
|
})
|
|
|
},
|
|
|
+ tableCellStyle ({row, column, rowIndex, columnIndex}) {
|
|
|
+ if (row.perf_status === '0' && columnIndex === 3) {
|
|
|
+ return 'background-color:rgb(225, 25, 98);font-weight:bold'
|
|
|
+ } else if (row.perf_status === '1' && columnIndex === 3) {
|
|
|
+ return 'background-color:rgb(31, 156, 18);font-weight:bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ indexMethod(index) {
|
|
|
+ return index + 1
|
|
|
+ },
|
|
|
+ getWatTime(ts) {
|
|
|
+ ts = parseInt(ts)
|
|
|
+ if (ts) {
|
|
|
+ return this.$moment(ts * 1000).utcOffset('+0100').format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ } else {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+<style scoped>
|
|
|
+.leo-filter {
|
|
|
+ padding: 0 0 15px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.leo-filter .filter-hidden {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-item {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 768px) {
|
|
|
+ .leo-filter {
|
|
|
+ }
|
|
|
+
|
|
|
+ .leo-filter .filter-item {
|
|
|
+ display: inline-block;
|
|
|
+ max-width: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .leo-filter .filter-item.filter-date-month-picker {
|
|
|
+ display: inline-block;
|
|
|
+ max-width: 220px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .leo-filter .filter-item.filter-date-range-picker {
|
|
|
+ display: inline-block;
|
|
|
+ max-width: 380px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .leo-filter .filter-item.filter-filter-btn {
|
|
|
+ height: 38px;
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .leo-filter .filter-hidden {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+.dialog-footer:after{content: '';
|
|
|
+ clear: both;display: table;
|
|
|
+}
|
|
|
+.el-table .warning-row {
|
|
|
+ background: oldlace;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table .success-row {
|
|
|
+ background: #f0f9eb;
|
|
|
+ /* color:rgb(225, 25, 98) */
|
|
|
+}
|
|
|
+.el-descriptions {
|
|
|
+ margin-top:20px;
|
|
|
+}
|
|
|
+/deep/ .el-descriptions-item__container {
|
|
|
+ margin-top:10px;
|
|
|
+}
|
|
|
+/deep/ .el-descriptions-item__label.has-colon {
|
|
|
+ margin-left:10px;
|
|
|
+}
|
|
|
+</style>
|