业绩查询功能

src/views/ebiz/performance/Performance.vue

@@ -1,142 +1,314 @@
 <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>
+    <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">
+        {{titleTime}}
+        <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="c-gray-base fs13 ml25 mt10" v-if="mask=='1'">
+      所在机构：
+      <span>大直辖一</span>
+    </div>
+    <div class="flex align-items-c h86 content1 bg-white mt10" v-if="mask=='1'">
+      <div class="w40 h60 ml15 text-center" v-for="item in headerList">
+        <img v-if="item.agentHeadUrl!==null" class="h40 w40" :src="item.agentHeadUrl" alt />
+        <img v-if="item.agentHeadUrl == null" class="h40 w40" src="@/assets/images/u188.png" alt />
+        <div class="fs13">{{item.agentName}}</div>
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+        <div class="fs13">掌声及</div>
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+        <div class="fs13">掌声</div>
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+        <div class="fs13">掌声</div>
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+        <div class="fs13">掌声</div>
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+        <div class="fs13">掌声及</div>
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+        <div class="fs13">掌声及</div>
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+      </div>
+      <div class="w40 h60 ml15 text-center">
+        <img class="w40 h40" src="@/assets/images/u188.png" alt />
+      </div>
+    </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">{{cbbb}}</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">{{cbjs}}</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">{{cfyc}}</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">{{zcbf}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5" v-if="isShow">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>本月预收标保（元）</div>
+          <div class="red">{{ysbb}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5" v-if="isShow">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>本月预收件数</div>
+          <div class="red">{{ysjs}}</div>
+        </div>
+      </div>
+      <div class="h50 bg-white content mh-auto fs13 fw500 mt5" v-if="isShow">
+        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
+          <div>本月预收FYC（元）</div>
+          <div class="red">{{yfyc}}</div>
+        </div>
+      </div>
+    </div>
+    <div class="mt10 mh-auto content fs12 red">注：统计截至时间：2020-01-12 16：30</div>
+    <div
+      v-if="mask!=='1'"
+      class="h40 bg-red footer absolute bottom0 text-center fs14 fw500 white"
+      @click="checkTeam(obj)"
+    >查看团队业绩</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')
-            },
-        }
+import { getBaseAgentInfo,getPerformanceHeader,getPerformanceDetail } from '@/api/ebiz/performance/performance'
+import utils from '@/assets/js/utils/date-utils'
+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(),
+      titleTime: '',
+      date1: {
+        date: '2020-07-01',
+      },
+      agentGrade: '',
+      isShow: true,
+      obj:{},
+      agentCode:'',
+      cbbb:'',
+      cbjs:'',
+      ysjs:'',
+      cfyc:'0.00',
+      zcbf:'0.00',
+      ysbb:'0.00',
+      yfyc:'0.00',
+      timeCode:'',
+      mask:'',
+      headerList:[]
     }
+  },
+  created() {
+    // console.log('=======' + this.$route.params.parmas)
+    if(this.$route.params.parmas!==undefined){
+      this.mask = JSON.parse(this.$route.params.parmas).mask
+      this.titleTime=JSON.parse(this.$route.params.parmas).date.slice(0,7),
+      this.dateTime=JSON.parse(this.$route.params.parmas).date
+    }
+    
+    if (this.mask !== '1') {
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        EWebBridge.webCallAppInJs('webview_right_button', {
+          btns: [
+            {
+              title: '考勤记录',
+              route: { flag: '', extra: {} },
+            },
+          ],
+        })
+      }, 1000)
+    }
+
+    // this.performanceData()
+    this.getPerformanceHeader1()
+    this.formatDate1()
+    this.getBaseAgentInfo1()
+  },
+  mounted() {
+    window.appCallBack = this.appCallBack
+  },
+  methods: {
+    appCallBack(data) {
+      if (data.trigger == 'right_button_click') {
+        this.$jump({
+          flag: 'h5',
+          extra: {
+            url: location.origin + `/#/attendance/Attendance`,
+          },
+          routerInfo: {
+            path: `/attendance/Attendance`,
+          },
+        })
+      }
+      if (data.trigger == 'left_button_click') {
+        this.$jump({
+          flag: 'home',
+        })
+      }
+    },
+    timePopup() {
+      this.dateShow = true
+    },
+    handleCancel() {
+      this.dateShow = false
+    },
+    //开始时间
+    handleEndDateConfirm(e) {
+      this.dateShow = false
+      this.titleTime = utils.formatDate(e, 'yyyy-MM')
+      this.timeCode=utils.formatDate(e, 'yyyy-MM-dd')
+       this.obj.date=this.timeCode
+       this.getPerformanceDetailC()
+      if (this.titleTime !== utils.formatDate(this.currentDate, 'yyyy-MM')) {
+        this.isShow = false
+      } else {
+        this.isShow = true
+      }
+    },
+    formatDate1() {
+      // console.log(utils.formatDate("2020-1-1"))
+      if(this.$route.params.parmas!==undefined){
+        this.titleTime=JSON.parse(this.$route.params.parmas).date.slice(0,7),
+        this.timeCode=JSON.parse(this.$route.params.parmas).date
+      }else{
+         this.titleTime = utils.formatDate(this.currentDate, 'yyyy-MM')
+         this.timeCode=utils.formatDate(this.currentDate, 'yyyy-MM-dd')
+      }
+      this.obj.date=this.timeCode
+      // console.log(this.titleTime)
+    },
+    checkTeam(obj) {
+      console.log(obj)
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/performance/PerformanceList/${JSON.stringify(obj)}`,
+        },
+        routerInfo: {
+          path: `/performance/PerformanceList/${JSON.stringify(obj)}`,
+        },
+      })
+    },
+    //获取代理人关系
+    getBaseAgentInfo1() {
+      let date = {}
+      getBaseAgentInfo(date).then(res => {
+        // console.log(res)
+        if (res.result == 0) {
+          this.agentGrade = res.agentGrade,
+          this.unitName=res.unitName,
+          this.agentCode=res.jobNo,
+          this.obj.agentGrade=this.agentGrade,
+          this.obj.agentCode=this.agentCode
+          if (this.agentGrade == 'A101') {
+            this.mask = 1
+          }
+         this.getPerformanceDetailC()
+        }
+      })
+    },
+    //获取代理人下级头像
+    getPerformanceHeader1(){
+      let date = {}
+      getPerformanceHeader(date).then(res=>{
+          console.log(res)
+          if(res.result==0){
+            this.headerList=res.content
+          }
+      })
+    },
+     //获取代理人相关信息
+  getPerformanceDetailC(){
+    // console.log(this.agentCode)
+      let code = {
+        date: this.timeCode,
+        agentCode:this.agentCode
+      }
+      getPerformanceDetail(code).then((res) => {
+        // console.log(res)
+        if(res.result==0){
+            this.cbbb=res.content.list[0].cbbb,
+            this.cbjs=res.content.list[0].cbjs,
+            this.ysjs=res.content.list[0].ysjs,
+            this.agentCode=res.content.list[0].code
+        }
+      })
+    }
+  },
+}
 </script>
 <style scoped>
-    .header{
-        width:92%;
-    }
-    .content{
-        width:80%;
-    }
+.header {
+  width: 92%;
+}
+.content {
+  width: 86%;
+}
+.footer {
+  width: 100%;
+  line-height: 40px;
+}
+.content1 {
+  width: 100%;
+  overflow-x: scroll;
+}
 </style>