[FIX]【nbs】 页面补充

src/views/ebiz/nbs/CrewList.vue

@@ -1,7 +1,32 @@
 <template>
   <div class="crew-list-container">
     <van-sticky>
-      <table class="top-table">
+      <div class="header" v-if="verifyUserType">
+        <div class="title">
+          <div class="left">
+            <van-button round type="info" size="mini" @click="setDateType(1)" :class="{ default: 1, checked: params.dateType === 1 }">今日</van-button>
+            <van-button round type="info" size="mini" @click="setDateType(2)" :class="{ default: 1, checked: params.dateType === 2 }">当月</van-button>
+          </div>
+          <div class="right" @click="showTimeSelector">
+            <span>选择日期</span>
+            <van-icon name="calender-o" size="4.73333vw" />
+          </div>
+        </div>
+        <div class="piker">
+          <div class="sb" v-if="$store.state.agentGrade >= 400">所在区：{{ params.area.areaName }}</div>
+          <div @click="showPopPrker(1)" v-if="$store.state.agentGrade >= 300" :class="{ hideDrop: $store.state.agentGrade < 400 }">
+            所在部：{{ params.picker_1.name }}
+          </div>
+          <div
+            @click="showPopPrker(2)"
+            v-if="$store.state.agentGrade >= 200"
+            :class="{ hideDrop: $store.state.agentGrade < 300 || pickerData.branchGroupBaseDtoList.toString() === '' }"
+          >
+            所在组：{{ pickerData.branchGroupBaseDtoList.toString() === '' ? '暂无' : params.picker_2.name }}
+          </div>
+        </div>
+      </div>
+      <table class="top-table" v-if="!verifyUserType">
         <tr>
           <td>
             <div class="status">状态</div>
@@ -14,9 +39,43 @@
           </td>
         </tr>
       </table>
+
+      <div class="max" v-else>
+        <table class="top-table max" :style="{ transform: `translateX(${-topTableLeft}px)` }">
+          <tr>
+            <td v-if="$store.state.agentGrade >= 400">
+              <div class="status">营业部代码</div>
+            </td>
+            <td v-if="$store.state.agentGrade >= 400">
+              <div class="name">营业部</div>
+            </td>
+            <td v-if="$store.state.agentGrade >= 300">
+              <div class="date">营业组代码</div>
+            </td>
+            <td v-if="$store.state.agentGrade >= 300">
+              <div class="status">营业组</div>
+            </td>
+            <td>
+              <div class="name max">代理人代码</div>
+            </td>
+            <td>
+              <div class="date">代理人姓名</div>
+            </td>
+            <td>
+              <div class="status">入职时间</div>
+            </td>
+            <td>
+              <div class="name">职级</div>
+            </td>
+            <td>
+              <div class="date">生成报告数量</div>
+            </td>
+          </tr>
+        </table>
+      </div>
     </van-sticky>
-    <table class="main-table">
-      <tr v-for="item in data" @click="entryResult(item)">
+    <table class="main-table" v-if="!verifyUserType">
+      <tr v-for="(item, i) in data" :key="i" @click="entryResult(item)">
         <td>
           <div class="status">{{ getTypeText(code) }}</div>
         </td>
@@ -28,38 +87,246 @@
         </td>
       </tr>
     </table>
+
+    <div style="overflow-x:auto;" class="max" @scroll="scrollChange" v-else>
+      <table class="max main-table" v-if="tableData">
+        <tr v-for="(item, i) in tableData.list" :key="i">
+          <td v-if="$store.state.agentGrade >= 400">
+            <div class="status">{{ item.departmentCode }}</div>
+          </td>
+          <td v-if="$store.state.agentGrade >= 400">
+            <div class="name">{{ item.departmentName }}</div>
+          </td>
+          <td v-if="$store.state.agentGrade >= 300">
+            <div class="date">{{ item.branchCode }}</div>
+          </td>
+          <td v-if="$store.state.agentGrade >= 300">
+            <div class="status">{{ item.branchName }}</div>
+          </td>
+          <td>
+            <div class="name max">{{ item.agentCode }}</div>
+          </td>
+          <td>
+            <div class="date">{{ item.agentName }}</div>
+          </td>
+          <td>
+            <div class="status">{{ transformTime(item.hireDate) }}</div>
+          </td>
+          <td>
+            <div class="name">{{ item.rank }}</div>
+          </td>
+          <td>
+            <div class="date">{{ item.nbsAmount }}</div>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <van-popup v-model="showPiker" position="bottom">
+      <van-picker
+        :title="pickerType === 1 ? '所在部' : '所在组'"
+        show-toolbar
+        :columns="pickerType === 1 ? pickerData.deptList : pickerData.branchGroupBaseDtoList"
+        @cancel="closePiker"
+        @confirm="selectPiker"
+      />
+    </van-popup>
+    <van-popup v-model="showTime" position="bottom">
+      <van-datetime-picker
+        v-model="currentDate"
+        type="date"
+        title="选择年月日"
+        :min-date="minDate"
+        :max-date="maxDate"
+        @confirm="setDateType"
+        @cancel="showTimeSelector"
+      />
+    </van-popup>
   </div>
 </template>
 <script>
-import { Sticky } from 'vant'
-import { nbsTable, makeCustomerPDF } from '@/api/ebiz/nbs'
+import { Sticky, Popup, Picker, DatetimePicker } from 'vant'
+import { nbsTable, makeCustomerPDF, getRankList, getGankLevel, getTableList, exportExcel } from '@/api/ebiz/nbs'
 import config from '@/config'
 
 export default {
   components: {
-    [Sticky.name]: Sticky
+    [Sticky.name]: Sticky,
+    [Popup.name]: Popup,
+    [Picker.name]: Picker,
+    [DatetimePicker.name]: DatetimePicker
   },
   data() {
     return {
+      topTableLeft: '',
+      minDate: new Date('1999/01/01'),
+      maxDate: new Date(`${new Date().getFullYear() + 5}/12/31`),
+      currentDate: new Date(),
+      columns: [],
       data: [],
       code: this.$route.params.code,
       pdfUrl: '',
-      downLoadUrl: ''
+      downLoadUrl: '',
+      showTime: false, //显示时间选择器
+      showPiker: false, //显示picker
+      params: {
+        //删选条件 的数据
+        dateType: '1999-06-28T16:00:00.000Z', //筛选日期
+        area: {
+          areaName: '',
+          areaCode: ''
+        },
+        picker_1: {
+          //所在部
+          agentgroup: '',
+          name: ''
+        },
+        picker_2: {
+          //所在组
+          agentgroup: '',
+          name: '请选择'
+        }
+      },
+      pickerData: {
+        //picker所需的数据
+        response: {}, //当前用户个人信息数据
+        deptList: [], //部列表
+        branchGroupBaseDtoList: [] //组列表
+      },
+      pickerType: 1, //picker列表的内容是部还是组，1是部
+      userInfo: {},
+      tableData: {
+        list: []
+      },
+      excelUrl: ''
     }
   },
-  created() {
+  computed: {
+    verifyUserType() {
+      if (this.$store.state.agentGrade) return this.$store.state.agentGrade >= 200
+      return false
+    },
+    transformTime() {
+      return time => {
+        const date = new Date(time)
+        const [Y, M, D] = [
+          date.getFullYear(),
+          date.getMonth() + 1 < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1,
+          date.getDate() < 9 ? '0' + date.getDate() : date.getDate()
+        ]
+        return `${Y}-${M}-${D}`
+      }
+    },
+    formatTime() {
+      return type => {
+        const date = new Date()
+        switch (type) {
+          case 1:
+            return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+          case 2:
+            return `${date.getFullYear()}-${date.getMonth() + 1}-01`
+          default: {
+            const selectDate = new Date(type)
+            return `${selectDate.getFullYear()}-${selectDate.getMonth() + 1}-${selectDate.getDate()}`
+          }
+        }
+      }
+    }
+  },
+  async created() {
+    this.$store.commit('setAgentGrade', 301)
+    // this.exportExcel()
     setTimeout(() => {
       this.filterBtn() // 初始化下载按钮
       window.appCallBack = this.appCallBack //app回调
     }, 1000)
-    nbsTable({
-      nbsState: this.code
-    }).then(res => {
-      let data = res.content.proposalNbsCustomerDTOLst
-      this.data = data
-    })
+    if (this.verifyUserType) {
+      await this.getRankList()
+      await this.getUserRankInfo()
+      this.getTableList()
+    } else {
+      nbsTable({
+        nbsState: this.code
+      }).then(res => {
+        let data = res.content.proposalNbsCustomerDTOLst
+        this.data = data
+      })
+    }
   },
   methods: {
+    async getTableList() {
+      const rs = await getTableList({
+        departmentCode: this.params.picker_1.agentgroup ? this.params.picker_1.agentgroup : '',
+        branchCode: this.params.picker_2.agentgroup ? this.params.picker_2.agentgroup : '',
+        distict: this.params.area.areaCode,
+        startTime: this.formatTime(this.params.dateType),
+        pageSize: 0,
+        pageNum: 0
+      })
+      this.tableData = rs.content
+    },
+    scrollChange(e) {
+      this.topTableLeft = e.target.scrollLeft
+    },
+    async getUserRankInfo() {
+      this.params.area = {
+        areaName: this.pickerData.response.areaName,
+        areaCode: this.pickerData.response.areaCode
+      }
+      this.params.picker_1 = {
+        agentgroup: this.pickerData.response.deptCode,
+        name: this.pickerData.response.deptName
+      }
+    },
+    async getRankList() {
+      const rs = await getRankList()
+      rs.content.branchGroupBaseDtoList.map(item => {
+        return (item.text = item.name)
+      })
+      rs.content.deptList.map(item => {
+        return (item.text = item.name)
+      })
+      this.pickerData.response = rs.content
+      if (this.$store.state.agentGrade >= 400) {
+        this.pickerData.deptList = rs.content.deptList
+        this.params.picker_1 = rs.content.deptList[0]
+      } else if (this.$store.state.agentGrade >= 300) {
+        this.pickerData.branchGroupBaseDtoList = rs.content.branchGroupBaseDtoList
+      } else if (this.$store.state.agentGrade >= 200) {
+        this.params.picker_2 = rs.content.branchGroupBaseDtoList[0]
+      }
+    },
+    async selectPiker(data) {
+      this.closePiker()
+      this.params[`picker_${this.pickerType}`] = data
+      if (this.pickerType === 1) {
+        this.pickerData.branchGroupBaseDtoList = (await getGankLevel(this.params.picker_1.agentgroup)).content
+      }
+      this.getTableList()
+    },
+    closePiker() {
+      this.showPiker = false
+    },
+    showPopPrker(type) {
+      switch (type) {
+        case 1:
+          if (this.$store.state.agentGrade >= 300 && this.$store.state.agentGrade < 400) return
+          break
+        case 2:
+          if (this.$store.state.agentGrade >= 400 && this.params.picker_1.agentgroup === '') return this.$toast('请选择所在部')
+          if (this.$store.state.agentGrade < 300 || this.pickerData.branchGroupBaseDtoList.toString() === '') return
+          break
+      }
+      this.pickerType = type
+      this.showPiker = true
+    },
+    setDateType(type) {
+      this.showTime = false
+      this.params.dateType = type
+      this.getTableList()
+    },
+    showTimeSelector() {
+      this.showTime = !this.showTime
+    },
     // 下载按钮
     filterBtn() {
       window.EWebBridge.webCallAppInJs('webview_right_button', {
@@ -70,7 +337,23 @@ export default {
         ]
       })
     },
-    appCallBack(data) {
+    // 统计导出
+    async exportExcel() {
+      const rs = await exportExcel({
+        type: String(parseInt(this.$store.state.agentGrade / 100)),
+        getNbsListReqDTO: {
+          departmentCode: this.params.picker_1.agentgroup ? this.params.picker_1.agentgroup : '',
+          branchCode: this.params.picker_2.agentgroup ? this.params.picker_2.agentgroup : '',
+          distict: this.params.area.areaCode,
+          startTime: this.formatTime(this.params.dateType),
+          pageSize: 0,
+          pageNum: 0
+        }
+      })
+      console.log(rs)
+      this.excelUrl = config.imgDomain + '/returnDirectStream?imgPath=' + rs.content
+    },
+    async appCallBack(data) {
       if (data.trigger == 'right_button_click') {
         let params = { nbsState: this.$route.params.code }
         makeCustomerPDF(params).then(res => {
@@ -81,11 +364,12 @@ export default {
             }
           } else return this.$toast(res.resultMessage)
         })
+        await this.exportExcel()
         setTimeout(() => {
           // eslint-disable-next-line no-undef
           EWebBridge.webCallAppInJs('download', {
             name: '客户清单.pdf',
-            url: this.downLoadUrl
+            url: this.$store.state.agentGrade < 200 ? this.downLoadUrl : this.excelUrl
           })
         }, 1000)
       }
@@ -126,6 +410,10 @@ export default {
   overflow: hidden;
   padding-top: 10px;
 }
+
+div.max {
+  padding: 0 10px;
+}
 .top-table,
 .main-table {
   margin: 0 auto;
@@ -144,6 +432,9 @@ export default {
   .status,
   .name {
     width: 99px;
+    &.max {
+      width: 130px;
+    }
   }
   .date {
     width: 151px;
@@ -159,4 +450,73 @@ export default {
     background: #ffe6e6;
   }
 }
+.header {
+  background-color: #f5f5f5;
+  .piker {
+    display: flex;
+    padding: 0 10px;
+    justify-content: space-between;
+    height: 30px;
+    align-items: center;
+    .sb {
+      font-size: 12px;
+      padding-right: 10px;
+    }
+    & > div:not(.sb) {
+      position: relative;
+      font-size: 12px;
+      padding-right: 10px;
+      &.hideDrop {
+        &:after {
+          display: none;
+        }
+      }
+      &:after {
+        content: '';
+        display: block;
+        border: 3px solid transparent;
+        border-left-color: #999;
+        position: absolute;
+        transition: all 0.2s;
+        font-size: 5px;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 40px;
+    border: 1px solid #eee;
+    border-left: 0;
+    border-right: 0;
+    padding: 0 10px;
+    .left {
+      /deep/ button:nth-child(1) {
+        margin-right: 10px;
+      }
+      .default {
+        background: transparent;
+        color: #999;
+        border-color: #999;
+        &.checked {
+          background: #e4393c;
+          border-color: #e4393c;
+          color: #fff;
+        }
+      }
+    }
+    .right {
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      span {
+        padding-right: 5px;
+      }
+    }
+  }
+}
 </style>