'个人业绩查询优化'

src/views/ebiz/performance/Performance.vue

@@ -1,31 +1,54 @@
 <template>
   <div v-cloak>
-    <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 style="justify-content: space-between" class="border-gb mt20 header mh-auto van-cell:not(:last-child)::after h50 flex align-items-c">
+      <div style="flex-shrink: 0" class="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>
       </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"
+      <div class="status">
+        <van-field
+          :value="filterStatus | filterStatusMethod"
+          readonly
+          label=""
+          name=""
+          right-icon="arrow-down"
+          placeholder="状态选择"
+          v-validate="'required'"
+          @click="toSelect('1')"
         />
-      </van-popup>
+        <!-- <FieldDatePicter
+          label=""
+          name=""
+          :isDefault="true"
+          :value.sync="filterDate"
+          type="datetime"
+          :flag="true"
+          placeholder="时间筛选"
+          @confirm="onDateConfirm($event, '2')"
+          :maxDate="maxDate"
+        ></FieldDatePicter> -->
+      </div>
+    </div>
+    <!-- 机构筛选 -->
+    <div class="classification">
+      <span>机构名称: </span>
+      <span @click="toSelect('2')">
+        <span>{{ orgs[0].name }}</span>
+        <van-icon name="arrow-down" />
+      </span>
+      <template>
+        <span @click="toSelect('3')">
+          <span>{{ orgs[1].name }}</span>
+          <van-icon name="arrow-down" />
+        </span>
+        <span @click="toSelect('4')">
+          <span>{{ orgs[2].name }}</span>
+          <van-icon name="arrow-down" />
+        </span>
+      </template>
     </div>
     <!-- <div class="c-gray-base fs13 ml25 mt10" v-if="mask=='1'">
       所在机构：
@@ -48,14 +71,14 @@
     <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>{{orgs[orgLev].name}}佣金（元）</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>{{orgs[orgLev].name}}合格人力</div>
+          <div class="red">{{ cbjs }}</div>
         </div>
       </div>
       <!-- <div class="h50 bg-white content mh-auto fs13 fw500 mt5">
@@ -71,20 +94,20 @@
         </div>
       </div>-->
       <div v-if="isShow">
-         <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">{{ysbb}}</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">{{ ysbb }}</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">{{ysjs}}</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">{{ ysjs }}</div>
           </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>
@@ -93,24 +116,71 @@
       </div>-->
     </div>
     <div>
-      <div class="h40 bg-red absolute bottom0 footer text-center fs13 fw500 white"  v-if="mask1" @click="checkTeam(obj)">
-        {{footerText}}
+      <div class="h40 bg-red absolute bottom0 footer text-center fs13 fw500 white" v-if="mask1" @click="checkTeam(obj)">
+        {{ footerText }}
       </div>
     </div>
+    <!-- 字段选择 -->
+    <van-popup v-model="popupShow" position="bottom"><van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="popupShow = false" /></van-popup>
+    <!-- 筛选年月日 -->
+    <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>
 </template>
 <script>
 import { getBaseAgentInfo, getPerformanceHeader, getPerformanceDetail, getHeader } from '@/api/ebiz/performance/performance'
 import utils from '@/assets/js/utils/date-utils'
-import { Popup, DatetimePicker,Button } from 'vant'
+import { Popup, DatetimePicker, Button } from 'vant'
+import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
+import { getOrgList } from '@/api/ebiz/branchOffice/branchOffice'
+let statuss = [
+  {
+    id: 1,
+    text: '预收状态',
+  },
+  {
+    id: 2,
+    text: '承保状态',
+  },
+]
 export default {
   name: 'performance',
   components: {
     [Popup.name]: Popup,
     [DatetimePicker.name]: DatetimePicker,
+    FieldDatePicter,
   },
   data() {
     return {
+      popupShow: false,//字段选择框
+      columns: [],//字段选择list
+      pickType: '',//toSelect选择值
+      filterStatus: 1,//保单状态 1为预收状态 2 承保状态
+      orgLev:0,//当前选择的机构等级
+      orgs: [//机构分级
+        {
+          name: '全部',
+          code: '',
+        },
+        {
+          name: '全部',
+          code: '',
+        },
+        {
+          name: '全部',
+          code: '',
+        },
+      ],
+      orgsColumns: [],
       currentDate: new Date(),
       dateShow: false,
       minDate: new Date(2020, 0, 1),
@@ -137,13 +207,24 @@ export default {
       Name: '',
       code: '',
       isShowImg: true,
-      buName:'',
-      mask1:false,
-      footerText:''
+      buName: '',
+      mask1: false,
+      footerText: '',
     }
   },
+  filters: {
+    filterStatusMethod(val) {
+      let str = ''
+      statuss.filter((item) => {
+        if (val == item.id) {
+          str = item.text
+        }
+      })
+      return str
+    },
+  },
   created() {
-    if(this.mask=="1"){
+    if (this.mask == '1') {
       this.getPerformanceDetailC()
     }
     this.formatDate1()
@@ -151,23 +232,127 @@ export default {
     if (this.code !== '') {
       this.getHeader1()
     }
-      setTimeout(() => {
-        // eslint-disable-next-line no-undef
-        EWebBridge.webCallAppInJs('webview_right_button', {
-          btns: [
-            {
-              title: '考勤记录',
-              title_color: 'FF0000',
-            },
-          ],
-        })
-      }, 1000)
-    
+    getOrgList({
+      bussinessType: 'normal',
+      manageCode: '',
+      manageLv: '',
+    }).then((res) => {
+      // this.orgsColumns.push(...res.content)
+      this.orgs[0] = res.content[0]
+    })
+    setTimeout(() => {
+      // eslint-disable-next-line no-undef
+      EWebBridge.webCallAppInJs('webview_right_button', {
+        btns: [
+          {
+            title: '考勤记录',
+            title_color: 'FF0000',
+          },
+        ],
+      })
+    }, 1000)
   },
   mounted() {
     window.appCallBack = this.appCallBack
   },
   methods: {
+    onConfirm(value) {
+      switch (this.pickType) {
+        case '1':
+          this.filterStatus = value.id
+          break
+        case '2':
+          this.orgLev = 0;
+          this.orgs[0].code = value.id
+          this.orgs[0].name = value.text
+          this.orgs[1].code = ''
+          this.orgs[1].name = '全部'
+          this.orgs[2].code = ''
+          this.orgs[2].name = '全部'
+          break
+        case '3':
+          this.orgLev = 1;
+          this.orgs[1].code = value.id
+          this.orgs[1].name = value.text
+          this.orgs[2].code = ''
+          this.orgs[2].name = '全部'
+          break
+        case '4':
+          this.orgLev = 2;
+          this.orgs[2].code = value.id
+          this.orgs[2].name = value.text
+          break
+      }
+      this.popupShow = false
+    },
+    async toSelect(pickType) {
+      let res = {};
+      this.columns = [];
+      console.log(pickType)
+      switch (pickType) {
+        case '1':
+          this.columns = statuss
+          break
+        case '2':
+          res = await getOrgList({
+            bussinessType: 'normal',
+            manageCode: '',
+            manageLv: '',
+          })
+          if (res.result == 0) {
+            res.content.forEach((item) => {
+              console.log(item)
+              this.columns.push({
+                id: item.code,
+                text: item.name,
+              })
+            })
+            // this.columns = this.orgsColumns
+          } else {
+            return this.$toast(res.resultMessage)
+          }
+          break
+        case '3':
+          if (!this.orgs[0].code) return this.$toast('请先选择上一级机构')
+          res = await getOrgList({
+            bussinessType: 'normal',
+            manageCode: this.orgs[0].code,
+            manageLv: '02',
+          })
+          if (res.result == 0) {
+            res.content.forEach((item) => {
+              console.log(item)
+              this.columns.push({
+                id: item.code,
+                text: item.name,
+              })
+            })
+          } else {
+            return this.$toast(res.resultMessage)
+          }
+          break
+        case '4':
+          if (!this.orgs[1].code) return this.$toast('请先选择上一级机构')
+          res = await getOrgList({
+            bussinessType: 'normal',
+            manageCode: this.orgs[1].code,
+            manageLv: '03',
+          })
+          if (res.result == 0) {
+            res.content.forEach((item) => {
+              console.log(item)
+              this.columns.push({
+                id: item.code,
+                text: item.name,
+              })
+            })
+          } else {
+            return this.$toast(res.resultMessage)
+          }
+          break
+      }
+      ;[this.pickType, this.popupShow] = [pickType, true]
+    },
     appCallBack(data) {
       if (data.trigger == 'right_button_click') {
         this.$jump({
@@ -235,30 +420,28 @@ export default {
       getBaseAgentInfo(date).then((res) => {
         console.log(res)
         if (res.result == 0) {
-          ;(this.agentGrade = res.agentGrade),
-            (this.unitName = res.unitName),
-            (this.saleArea = res.saleArea)
-            if(window.localStorage.getItem('parmas2') == null){
-                (this.agentCode = res.jobNo)
-            }else{
-              this.agentCode=JSON.parse(window.localStorage.getItem('parmas2')).agentCode
-            }
-            
-            (this.obj.agentGrade = this.agentGrade),
+          ;(this.agentGrade = res.agentGrade), (this.unitName = res.unitName), (this.saleArea = res.saleArea)
+          if (window.localStorage.getItem('parmas2') == null) {
+            this.agentCode = res.jobNo
+          } else {
+            this.agentCode = JSON.parse(window.localStorage.getItem('parmas2')).agentCode
+          }
+
+          ;(this.obj.agentGrade = this.agentGrade),
             (this.obj.agentCode = this.agentCode),
             (this.branchCode = res.branchCode),
             (this.deptCode = res.deptCode),
             (this.areaCode = res.areaCode)
-            if (this.agentGrade.slice(0, 2) == 'A1') {
+          if (this.agentGrade.slice(0, 2) == 'A1') {
             this.mask1 = false
-            this.footerText=''
-          }else if (this.agentGrade.slice(0, 2) == 'A2') {
+            this.footerText = ''
+          } else if (this.agentGrade.slice(0, 2) == 'A2') {
             this.mask1 = true
-            this.footerText='查看团队业绩'
+            this.footerText = '查看团队业绩'
             ;(this.obj.unitName = this.unitName), (this.obj.code = this.branchCode)
           } else if (this.agentGrade.slice(0, 2) == 'A3') {
             this.mask1 = true
-            this.footerText='查看团队业绩'
+            this.footerText = '查看团队业绩'
             ;(this.obj.unitName = this.saleArea), (this.obj.code = this.deptCode)
           } else if (this.agentGrade.slice(0, 2) == 'A4') {
           }
@@ -308,19 +491,49 @@ export default {
           ;(this.cbbb = res.content.list[0].cbbb),
             (this.cbjs = res.content.list[0].cbjs),
             (this.ysjs = res.content.list[0].ysjs),
-            (this.ysbb = res.content.list[0].ysbb),(this.agentCode = res.content.list[0].code)
+            (this.ysbb = res.content.list[0].ysbb),
+            (this.agentCode = res.content.list[0].code)
         }
       })
-    }
+    },
   },
   destroyed: function () {
-           console.log("我已经离开了！");
-             window.localStorage.removeItem('parmas1');
-            window.localStorage.removeItem('parmas2');
-            window.localStorage.removeItem('obj1')
- },
+    console.log('我已经离开了！')
+    window.localStorage.removeItem('parmas1')
+    window.localStorage.removeItem('parmas2')
+    window.localStorage.removeItem('obj1')
+  },
 }
 </script>
+<style lang="scss" scoped>
+.status {
+  margin-left: 30px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+.classification {
+  font-size: 14px;
+  padding: 15px;
+}
+.van-icon {
+  font-weight: bolder;
+}
+
+::v-deep .classification .van-icon {
+  vertical-align: middle;
+  margin-right: 5px;
+  margin-bottom: 3px;
+}
+
+::v-deep .van-tab--active {
+  font-size: 16px;
+  font-weight: bolder;
+  transition: all 0.1s ease;
+}
+/deep/.van-field__label {
+  width: 0px;
+}
+</style>
 <style scoped>
 .header {
   width: 92%;
@@ -333,7 +546,7 @@ export default {
   line-height: 40px;
 }
 :footer([v-cloak]) {
-  display:none !important;
+  display: none !important;
 }
 .content1 {
   width: 100%;