我的奖金功能发布

package.json

@@ -22,7 +22,7 @@
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",
     "echarts": "4.2.1",
-    "element-ui": "2.13.2",
+    "element-ui": "^2.15.12",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
     "js-cookie": "2.2.0",

src/api/bonus.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 奖金列表
+export function fetchBonusList() {
+  return request({
+    url: '/v1/bonus/other',
+    method: 'get',
+    params: {}
+  })
+}
+
+// 奖金详情
+export function fetchBonusDetail(data) {
+  return request({
+    url: '/v1/bonus/new',
+    method: 'get',
+    data
+  })
+}

src/lang/en.js

@@ -230,6 +230,7 @@ export default {
     action: 'Action',
     yes: 'YES',
     no: 'NO',
+    view: 'View',
   },
 
   shop: {
@@ -291,6 +292,8 @@ export default {
     memberLevel: 'Member Level',
     highestDirector: 'Highest Director',
     highestCrown: 'Highest Crown',
+    latestDirector: 'Latest Director',
+    latestCrown: 'Latest Crown',
     currentPayCycle: 'Current Pay Cycle',
     currentSystemTime: 'Current System Time',
     memberJoinTime: 'Member Join Time',
@@ -303,5 +306,19 @@ export default {
     title: 'Title',
     createTime: 'Create Time',
   },
-
+  bonus: {
+    payCycle: 'Pay Cycle',
+    welcomeBonus: 'Welcome Bonus',
+    teamBonus: 'Team Bonus',
+    directorBonus: 'Director Bonus',
+    quarterlyBonus: 'Quarterly Bonus',
+    stockistCommission: 'Stockist Commission',
+    actualBonus: 'Actual Bonus',
+    totalBonus: 'Total Bonus',
+    leftNewlyIncreasedPerformance: 'Left Newly Increased Performance',
+    rightNewlyIncreasedPerformance: 'Right Newly Increased Performance',
+    leftSurplusPerformance: 'Left Surplus Performance',
+    rightSurplusPerformance: 'Right Surplus Performance',
+    periodBonus: 'Period %s Bonus',
+  },
 }

src/lang/zh.js

@@ -216,12 +216,10 @@ export default {
     more: '更多',
     articleNotification: '系统通知'
   },
-
   currency: {
     unit: '元',
     sign: '￥'
   },
-
   common: {
     save: '保存',
     modify: '修改',
@@ -231,8 +229,8 @@ export default {
     action: '操作',
     yes: '是',
     no: '否',
+    view: '查看',
   },
-
   shop: {
     productCode: '商品编号',
     productName: '商品名称',
@@ -265,11 +263,9 @@ export default {
     goBack: '返回',
     goPay: '支付',
   },
-
   user: {
     email: '电子邮箱'
   },
-
   config: {
     consignee: '收货人',
     detailedAddress: '详细地址',
@@ -280,7 +276,6 @@ export default {
     createAddress: '添加地址',
     editAddress: '修改地址',
   },
-
   profile: {
     personalInformation: '个人资料',
     account: '账户',
@@ -295,12 +290,30 @@ export default {
     memberLevel: '会员等级',
     highestDirector: '最高管理聘级',
     highestCrown: '最高皇冠星级',
+    latestDirector: '最新管理星级',
+    latestCrown: '最新皇冠星级',
     joiningPeriod: '加入期数',
     whetherUpgrade: '是否已升级',
+    loginPasswordSuccessTips: '登录密码已修改成功',
+    paymentPasswordSuccessTips: '支付密码已修改成功',
   },
-
   article: {
     title: '标题',
     createTime: '发布时间',
   },
+  bonus: {
+    payCycle: '期数',
+    welcomeBonus: '销售奖金',
+    teamBonus: '绩效奖',
+    directorBonus: '管理奖',
+    quarterlyBonus: '季度分红',
+    stockistCommission: '服务中心',
+    actualBonus: '实发奖金',
+    totalBonus: '奖金合计',
+    leftNewlyIncreasedPerformance: '左市场新增',
+    rightNewlyIncreasedPerformance: '右市场新增',
+    leftSurplusPerformance: '左市场结余',
+    rightSurplusPerformance: '右市场结余',
+    periodBonus: '第 %s 期奖金',
+  },
 }

src/router/index.js

@@ -16,6 +16,7 @@ import profileRouter from "@/router/modules/profile";
 import configRouter from "@/router/modules/config";
 import atlasRouter from "@/router/modules/atlas";
 import articleRouter from "@/router/modules/article";
+import bonusRouter from "@/router/modules/bonus";
 
 /**
  * Note: sub-menu only appear when route children.length >= 1
@@ -203,6 +204,7 @@ export const asyncRoutes = [
   configRouter,
   atlasRouter,
   articleRouter,
+  bonusRouter,
 
   {
     path: '/error',
@@ -242,129 +244,6 @@ export const asyncRoutes = [
     ]
   },
 
-  // {
-  //   path: '/excel',
-  //   component: Layout,
-  //   redirect: '/excel/export-excel',
-  //   name: 'Excel',
-  //   meta: {
-  //     title: 'excel',
-  //     icon: 'excel'
-  //   },
-  //   children: [
-  //     {
-  //       path: 'export-excel',
-  //       component: () => import('@/views/excel/export-excel'),
-  //       name: 'ExportExcel',
-  //       meta: { title: 'exportExcel' }
-  //     },
-  //     {
-  //       path: 'export-selected-excel',
-  //       component: () => import('@/views/excel/select-excel'),
-  //       name: 'SelectExcel',
-  //       meta: { title: 'selectExcel' }
-  //     },
-  //     {
-  //       path: 'export-merge-header',
-  //       component: () => import('@/views/excel/merge-header'),
-  //       name: 'MergeHeader',
-  //       meta: { title: 'mergeHeader' }
-  //     },
-  //     {
-  //       path: 'upload-excel',
-  //       component: () => import('@/views/excel/upload-excel'),
-  //       name: 'UploadExcel',
-  //       meta: { title: 'uploadExcel' }
-  //     }
-  //   ]
-  // },
-  //
-  // {
-  //   path: '/zip',
-  //   component: Layout,
-  //   redirect: '/zip/download',
-  //   alwaysShow: true,
-  //   name: 'Zip',
-  //   meta: { title: 'zip', icon: 'zip' },
-  //   children: [
-  //     {
-  //       path: 'download',
-  //       component: () => import('@/views/zip/index'),
-  //       name: 'ExportZip',
-  //       meta: { title: 'exportZip' }
-  //     }
-  //   ]
-  // },
-  //
-  // {
-  //   path: '/pdf',
-  //   component: Layout,
-  //   redirect: '/pdf/index',
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/pdf/index'),
-  //       name: 'PDF',
-  //       meta: { title: 'pdf', icon: 'pdf' }
-  //     }
-  //   ]
-  // },
-  // {
-  //   path: '/pdf/download',
-  //   component: () => import('@/views/pdf/download'),
-  //   hidden: true
-  // },
-  //
-  // {
-  //   path: '/theme',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/theme/index'),
-  //       name: 'Theme',
-  //       meta: { title: 'theme', icon: 'theme' }
-  //     }
-  //   ]
-  // },
-  //
-  // {
-  //   path: '/clipboard',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/clipboard/index'),
-  //       name: 'ClipboardDemo',
-  //       meta: { title: 'clipboardDemo', icon: 'clipboard' }
-  //     }
-  //   ]
-  // },
-
-  // {
-  //   path: '/i18n',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/i18n-demo/index'),
-  //       name: 'I18n',
-  //       meta: { title: 'i18n', icon: 'international' }
-  //     }
-  //   ]
-  // },
-  //
-  // {
-  //   path: 'external-link',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       path: 'https://github.com/PanJiaChen/vue-element-admin',
-  //       meta: { title: 'externalLink', icon: 'link' }
-  //     }
-  //   ]
-  // },
-
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

src/router/modules/bonus.js

@@ -0,0 +1,21 @@
+import Layout from '@/layout'
+
+const bonusRouter = {
+  path: '/bonus',
+  component: Layout,
+  redirect: '/bonus/bonus-list',
+  name: 'Bonus Management',
+  meta: {
+    title: 'bonus',
+    icon: 'el-icon-coin'
+  },
+  children: [
+    {
+      path: 'other',  // 奖金列表
+      component: () => import('@/views/bonus/bonus-list'),
+      name: 'BonusList',
+      meta: { title: 'bonusList', icon: 'el-icon-coin' }
+    },
+  ]
+}
+export default bonusRouter

src/views/bonus/bonus-list.vue

@@ -0,0 +1,100 @@
+<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 width="100px" align="center" :label="$t('bonus.payCycle')" prop="PERIOD_NUM.value"></el-table-column>
+			<el-table-column width="140px" align="center" :label="$t('bonus.welcomeBonus')" prop="BONUS_TG.value" v-show="welcomeBonusSwitch === 1"></el-table-column>
+      <el-table-column width="120px" align="center" :label="$t('bonus.teamBonus')" prop="ORI_BONUS_QY.value" v-show="teamBonusSwitch === 1"></el-table-column>
+      <el-table-column width="130px" align="center" :label="$t('bonus.directorBonus')" prop="ORI_BONUS_BS.value"></el-table-column>
+      <el-table-column width="180px" align="center" :label="$t('bonus.quarterlyBonus')" prop="ORI_BONUS_QUARTER.value"></el-table-column>
+			<el-table-column width="180px" align="center" :label="$t('bonus.stockistCommission')" prop="BONUS_BD.value" v-show="stockistCommissionSwitch === 1"></el-table-column>
+			<el-table-column width="180px" align="center" :label="$t('bonus.actualBonus')" prop="BONUS_REAL.value"></el-table-column>
+      <el-table-column align="center" :label="$t('common.action')">
+        <template slot-scope="{row}">
+					<el-button-group>
+						<el-button type="primary" size="mini" @click="getOne(row.PERIOD_NUM.value)">{{ $t('common.view') }}</el-button>
+					</el-button-group>
+        </template>
+      </el-table-column>
+    </el-table>
+
+		<el-dialog :title="bonusPayCycle" :visible.sync="dialog" width="60%">
+			<el-descriptions title="" class="bonus-list" :column="2" border size="medium" style="width: 100%" v-if="bonusData">
+				<el-descriptions-item class="bonus-item" :label="$t('shop.memberCode')">{{ bonusData.USER_NAME.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('bonus.payCycle')">{{ bonusData.PERIOD_NUM.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('profile.memberLevel')">{{ bonusData.LAST_DEC_LV.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('profile.latestDirector')">{{ bonusData.LAST_EMP_LV.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('profile.latestCrown')">{{ bonusData.LAST_CROWN_LV.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('bonus.welcomeBonus')" v-if="bonusData.ORI_BONUS_TG_SWITCH === 1">{{ bonusData.ORI_BONUS_TG.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('bonus.teamBonus')" v-if="bonusData.ORI_BONUS_QY_SWITCH === 1">{{ bonusData.ORI_BONUS_QY.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('bonus.directorBonus')">{{ bonusData.ORI_BONUS_BS.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('bonus.quarterlyBonus')">{{ bonusData.ORI_BONUS_QUARTER.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('bonus.stockistCommission')" v-if="bonusData.BONUS_BD_SWITCH === 1">{{ bonusData.BONUS_BD.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('bonus.totalBonus')">{{ bonusData.BONUS_TOTAL.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('bonus.actualBonus')">{{ bonusData.BONUS_REAL.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('bonus.leftNewlyIncreasedPerformance')">{{ bonusData.PV_1L.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('bonus.leftSurplusPerformance')">{{ bonusData.SURPLUS_1L.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('bonus.rightNewlyIncreasedPerformance')">{{ bonusData.PV_2L.value }}</el-descriptions-item>
+				<el-descriptions-item class="bonus-item" :label="$t('bonus.rightSurplusPerformance')">{{ bonusData.SURPLUS_2L.value }}</el-descriptions-item>
+			</el-descriptions>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+import {fetchBonusList, fetchBonusDetail} from '@/api/bonus'
+import waves from '@/directive/waves'
+import Pagination from '@/components/Pagination'
+
+export default {
+  name: 'myBonusList',
+  components: { Pagination },
+  directives: { waves },
+  data() {
+    return {
+			tableData: [],
+      total: 0,
+			loading: true,
+
+			welcomeBonusSwitch: 0,
+			teamBonusSwitch: 0,
+			stockistCommissionSwitch: 0,
+
+			dialog: false,
+			bonusData: null,
+			bonusPayCycle: ''
+    }
+  },
+  created() {
+    this.getList()
+  },
+	methods: {
+    getList() {
+      this.loading = true
+			fetchBonusList().then(response => {
+				const {tableData, bonusSwitch} = response.data
+				this.tableData = tableData
+				this.welcomeBonusSwitch = bonusSwitch.welcomeBonusSwitch
+				this.teamBonusSwitch = bonusSwitch.teamBonusSwitch
+				this.stockistCommissionSwitch = bonusSwitch.stockistCommissionSwitch
+
+				this.loading = false
+      })
+    },
+		getOne(periodNum) {
+			this.loading = true
+			this.bonusPayCycle = this.$t('bonus.periodBonus').replace('%s', periodNum)
+			fetchBonusDetail({periodNum: periodNum}).then(response => {
+				this.bonusData = response.data
+				this.dialog = true
+				this.loading = false
+			})
+		},
+  }
+}
+</script>