业绩查询页面搭建

src/api/ebiz/performance/performance.js

@@ -0,0 +1,2 @@
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'

src/router/ebiz/attendance.js

@@ -0,0 +1,23 @@
+const attendance = () => import('@/views/ebiz/attendance/Attendance')
+const monthly = () => import('@/views/ebiz/attendance/Monthly')
+
+export default [
+    {
+      path: '/attendance/Attendance',
+      name: 'Attendance',
+      component: attendance,
+      meta: {
+        title: '考勤统计',
+        index: 1
+      }
+    },
+    {
+      path: '/attendance/Monthly',
+      name: 'Monthly',
+      component: monthly,
+      meta: {
+        title: '考勤统计',
+        index: 2
+      }
+    }
+  ]

src/router/ebiz/index.js

@@ -16,6 +16,8 @@ import manpower from './manpower'
 import cardList from './cardList'
 import claims from './claims'
 import productStore from './product-store'
+import performance from './performance'
+import attendance from './attendance'
 export default [
   ...proposal,
   ...sale,
@@ -33,5 +35,7 @@ export default [
   ...nbs,
   ...manpower,
   ...claims,
-  ...productStore
+  ...productStore,
+  ...performance,
+  ...attendance
 ] //根据需要进行删减

src/router/ebiz/performance.js

@@ -0,0 +1,22 @@
+const performance = () => import('@/views/ebiz/performance/Performance')
+
+export default [
+    {
+      path: '/performance/Performance',
+      name: 'Performance',
+      component: performance,
+      meta: {
+        title: '业绩查询',
+        index: 1
+      }
+    },
+    // {
+    //   path: '/poster/posterPreview',
+    //   name: 'posterPreview',
+    //   component: posterPreview,
+    //   meta: {
+    //     title: '海报预览',
+    //     index: 2
+    //   }
+    // }
+  ]

src/views/ebiz/attendance/Attendance.vue

@@ -0,0 +1,114 @@
+<template>
+    <div>
+        <div class='border-gb  header mh-auto  h50 flex align-items-c  bg-white'>
+            <van-button  round @click="goDetail(order)" size="small" class="ml15" type="danger" v-no-more-click="1000">当月</van-button>
+             <div @click="timePopup" class="fs12 red ml15">2019-05
+                <img src="@/assets/images/u79.png" alt="" class="absolute mt2 ml5">
+            </div>
+            <van-popup v-model="dateShow" position="bottom">
+                <van-datetime-picker
+                    v-model="currentDate" 
+                    type="year-month"
+                    title="选择年月日"
+                    :min-date="minDate"
+                    :max-date="maxDate" 
+                    @cancel="handleCancel"
+                    @confirm="handleEndDateConfirm"
+                />
+            </van-popup>
+       </div>
+       <div class="mt10 bg-white">
+           <div class="flex h70 align-items-c border-gb">
+              <img src="@/assets/images/u1203.png" alt="" class="h40 w40 ml15"/>
+              <span class="ml10 fs14">王昭君</span>
+              <div class="absolute right20 flex" @click="month">
+                <div class="mt10">
+                    <img src="@/assets/images/u1188.png" alt="" class="" />
+                </div>
+                <div class="fs14 red mt10">打卡月历</div>
+              </div>
+             
+           </div>
+           <div class="flex h50 border-gb ml15 align-items-c">
+               <div>应出勤天数</div>
+               <div class='absolute right30'>20天</div>
+           </div>
+           <div class="flex h50 border-gb ml15 align-items-c">
+               <div>实际出勤天数</div>
+               <div class='absolute right30'>20天</div>
+           </div>
+           <div class="flex h50 border-gb ml15 align-items-c">
+               <div>实时出勤率</div>
+               <div class='absolute right30'>20%</div>
+           </div>
+           <div class="flex h50 border-gb ml15 align-items-c fwb">
+               <div>迟到</div>
+               <div class='absolute right30 c-gray-base '>0次</div>
+           </div>
+           <div class="flex h50 border-gb ml15 align-items-c fwb">
+               <div>早退</div>
+               <div class='absolute right30 red'>1次，共307分钟</div>
+           </div>
+           <div class="flex h50 border-gb ml15 align-items-c fwb">
+               <div>缺卡</div>
+               <div class='absolute right30 red'>1次</div>
+           </div>
+           <div class="flex h50 ml15 align-items-c fwb">
+               <div>旷工</div>
+               <div class='absolute right30 red'>1天</div>
+           </div>
+       </div>
+       <div class="fs13 red mt10 ml15">
+           注：本出勤率只统计工作日出勤情况
+       </div>
+    </div>
+</template>
+<script>
+    import {  Popup,DatetimePicker } from 'vant';
+    export default {
+        name: 'attendance',
+        components: {
+            [Popup.name]: Popup,
+            [DatetimePicker.name]: DatetimePicker,
+        },
+        data() {
+            return {
+                currentDate: new Date(),
+                dateShow: false,
+                minDate: new Date(2020, 0, 1),
+                maxDate: new Date(2025, 10, 1),
+            }
+        },
+        created() {
+
+        },
+        methods:{
+            timePopup(){
+                this.dateShow = true;
+            },
+            handleCancel () {
+                this.dateShow = false;
+            },
+            //开始时间
+            handleEndDateConfirm (e) {
+                this.dateShow = false;
+                console.log(e)
+                // this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
+            },
+            month(){
+                this.$jump({
+                    flag: 'h5',
+                    extra: {
+                    url: location.origin + `/#/attendance/Monthly`
+                    },
+                    routerInfo: {
+                    path: `/attendance/Monthly`
+                    }
+                })
+            }
+        }
+    }
+</script>
+<style  scoped>
+
+</style>

src/views/ebiz/attendance/Monthly.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <div class="bg-white">
+              <div class="flex h70 align-items-c border-gb">
+              <img src="@/assets/images/u1203.png" alt="" class="h40 w40 ml15"/>
+              <span class="ml10 fs14">王昭君</span>
+              <div class="absolute right20 flex" >
+                  2020-06-01 星期一
+              </div>
+             
+           </div> 
+        </div>
+        <div>
+            <van-cell title="选择单个日期" :value="date" @click="show = true" />
+            <van-calendar v-model="show" @confirm="onConfirm" />
+        </div>
+    </div>
+</template>
+<script>
+    import { Calendar } from 'vant';
+    export default {
+        name:'monthly',
+        components: {
+            [Calendar.name]: Calendar,
+        },
+        data() {
+            return {
+                date: '',
+                show: false,
+            };
+        },
+        methods: {
+            formatDate(date) {
+                return `${date.getMonth() + 1}/${date.getDate()}`;
+            },
+            onConfirm(date) {
+                this.show = false;
+                this.date = this.formatDate(date);
+            },
+        },
+    }
+</script>
+<style  scoped>
+
+</style>

src/views/ebiz/performance/Performance.vue

@@ -0,0 +1,142 @@
+<template>
+    <div>
+       <div class='border-gb mt20 header mh-auto van-cell:not(:last-child)::after h50 flex align-items-c'>
+            <van-button  round @click="goDetail(order)" size="small" class="ml15" type="danger" v-no-more-click="1000">当月</van-button>
+            <div @click="timePopup" class="fs12 red ml15">2019-05
+                <img src="@/assets/images/u79.png" alt="" class="absolute mt2 ml5">
+            </div>
+            <van-popup v-model="dateShow" position="bottom">
+                <van-datetime-picker
+                    v-model="currentDate" 
+                    type="year-month"
+                    title="选择年月日"
+                    :min-date="minDate"
+                    :max-date="maxDate" 
+                    @cancel="handleCancel"
+                    @confirm="handleEndDateConfirm"
+                />
+            </van-popup>
+       </div>
+        <div class='mt20'>
+            <div class='h50  bg-white content mh-auto  fs13 fw500'>
+                <div class='pl10 pr10 pt15 flex justify-content-s  align-items-c'>
+                    <div >个人承保标保（元）</div>
+                    <div class='red'>230000:00</div>
+                </div>
+            </div>
+            <div class='h50  bg-white content mh-auto  fs13 fw500 mt5'>
+                <div class='pl10 pr10 pt15 flex justify-content-s  align-items-c'>
+                    <div >寿险承保件</div>
+                    <div class='red'>230000:00</div>
+                </div>
+            </div>
+            <div class='h50  bg-white content mh-auto  fs13 fw500 mt5'>
+                <div class='pl10 pr10 pt15 flex justify-content-s  align-items-c'>
+                    <div >承保FYC（元）</div>
+                    <div class='red'>230000:00</div>
+                </div>
+            </div>
+            <div class='h50  bg-white content mh-auto  fs13 fw500 mt5'>
+                <div class='pl10 pr10 pt15 flex justify-content-s  align-items-c'>
+                    <div >综合开拓承保保费（元）</div>
+                    <div class='red'>230000:00</div>
+                </div>
+            </div>
+            <div class='h50  bg-white content mh-auto  fs13 fw500 mt5'>
+                <div class='pl10 pr10 pt15 flex justify-content-s  align-items-c'>
+                    <div >本月预收标保（元）</div>
+                    <div class='red'>230000:00</div>
+                </div>
+            </div>
+            <div class='h50  bg-white content mh-auto  fs13 fw500 mt5'>
+                <div class='pl10 pr10 pt15 flex justify-content-s  align-items-c'>
+                    <div >本月预收件数</div>
+                    <div class='red'>230000:00</div>
+                </div>
+            </div>
+            <div class='h50  bg-white content mh-auto  fs13 fw500 mt5'>
+                <div class='pl10 pr10 pt15 flex justify-content-s  align-items-c'>
+                    <div >本月预收FYC（元）</div>
+                    <div class='red'>230000:00</div>
+                </div>
+            </div>
+        </div>
+        <div class='mt10 mh-auto content fs12 red'>
+            注：统计截至时间：2020-01-12  16：30
+        </div>
+    </div>
+</template>
+<script>
+    import {  Popup,DatetimePicker } from 'vant';
+    export default {
+        name: 'performance',
+        components: {
+            [Popup.name]: Popup,
+            [DatetimePicker.name]: DatetimePicker,
+        },
+        data() {
+            return {
+                currentDate: new Date(),
+                dateShow: false,
+                minDate: new Date(2020, 0, 1),
+                maxDate: new Date(2025, 10, 1),
+            }
+        },
+        created() {
+             setTimeout(() => {
+                // eslint-disable-next-line no-undef
+                EWebBridge.webCallAppInJs('webview_right_button', {
+                    btns: [
+                    {
+                        title: "考勤记录",
+                        route: { flag: '', extra: {} }
+                    }
+                    ]
+                })
+            }, 1000)
+        },
+         mounted() {
+            window.appCallBack = this.appCallBack
+        },
+        methods:{
+             appCallBack(data) {
+                if (data.trigger == 'right_button_click') {
+                    this.$jump({
+                    flag: 'h5',
+                    extra: {
+                        url: location.origin + `/#/performance/Performance`
+                    },
+                    routerInfo: {
+                        path: `/performance/Performance`
+                    }
+                    })
+                }
+                if (data.trigger == 'left_button_click') {
+                    this.$jump({
+                    flag: 'home'
+                    })
+                }
+            },
+            timePopup(){
+                this.dateShow = true;
+            },
+            handleCancel () {
+                this.dateShow = false;
+            },
+            //开始时间
+            handleEndDateConfirm (e) {
+                this.dateShow = false;
+                console.log(e)
+                // this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
+            },
+        }
+    }
+</script>
+<style scoped>
+    .header{
+        width:92%;
+    }
+    .content{
+        width:80%;
+    }
+</style>