ebiz-h5/src/views/ebiz/institutionalPerform/Organization.vue

<template>
  <div>
    <van-tabs v-model="active">
      <van-tab title="中心支公司"></van-tab>
      <van-tab title="营销服务部"></van-tab>
      <van-tab title="下辖营业区"></van-tab>
    </van-tabs>
    <div class="table-wrapper">
      <table class="myTable mb30" :style="widthObj" cellspacing="0" cellpadding="0">
        <tr>
          <th class="sticky th-rank">排名</th>
          <th v-for="(column, index) in columns" :key="index" :class="{ fixedWidth: index === 0, orgName: index === 0 }">
            {{ column.name }}
          </th>
        </tr>
        <tr v-show="values.length !== 0">
          <td class="sticky bleft bright" colspan="2">合计</td>
          <td class="bright" v-for="(total, i) in totals" :key="i">{{ total | blankFilter }}</td>
        </tr>
        <tr v-for="(value, index) in values" :key="index">
          <td class="sticky bleft bright">{{ index + 1 }}</td>
          <td v-for="(key, i) in needGettingKey" :key="i" class="bright" :class="{ orgName: i === 0 }">
            {{ value[key] | blankFilter }}
          </td>
        </tr>
        <tr v-if="values.length === 0">
          <td class="nodata bleft bright" :colspan="columns.length + 1">暂无数据</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs } from 'vant'
import { orgShortNames } from '@/assets/js/utils/orgShortName'
export default {
  name: 'Organization',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  props: {
    dataType: {
      // 0: 业绩, 1: 人力, 2: 产品
      type: Number,
      default: 0
    },
    timeType: {
      type: Number,
      default: 0
    }
  },
  computed: {
    // 获取需要显示的列名称
    columns() {
      this.widthObj.minWidth = '200vw'
      if (this.dataType === 0) {
        switch (this.timeType) {
          case 0:
          case 3:
            return this.tableColumns[0][0]
          case 1:
            return this.tableColumns[0][1]
          case 2:
            if (this.active <= 1) {
              return this.tableColumns[0][2]
            } else {
              this.widthObj.minWidth = '100%'
              return this.tableColumns[0][3]
            }
          default:
            return []
        }
      } else {
        return this.tableColumns[this.dataType]
      }
    },
    needGettingKey() {
      let keys = []
      this.columns.forEach(element => {
        keys.push(element.key)
      })
      return keys
    }
  },
  data() {
    return {
      widthObj: {
        minWidth: '200vw'
      },
      active: 0,
      tableColumns: [
        [
          [
            { isInt: false, name: '机构', key: 'name' },
            { isInt: false, name: '预收保费(万元)', key: 'ysbb' },
            { isInt: true, name: '预收件数(件)', key: 'ysjs' },
            { isInt: false, name: '承保保费(万元)', key: 'bzbf' },
            { isInt: true, name: '承保件数(件)', key: 'cbjs' }
          ],
          [
            { isInt: false, name: '机构', key: 'name' },
            { isInt: false, name: '预收保费(万元)', key: 'ysbb' },
            { isInt: true, name: '预收件数(件)', key: 'ysjs' },
            { isInt: false, name: '承保保费(万元)', key: 'bzbf' },
            { isInt: true, name: '承保件数(件)', key: 'cbjs' },
            { isInt: false, name: '承保同比', key: 'cbtb' },
            { isInt: false, name: '承保环比', key: 'cbhb' }
          ],
          [
            { isInt: false, name: '机构', key: 'name' },
            { isInt: false, name: '承保保费(万元)', key: 'bzbf' },
            { isInt: false, name: '保费目标', key: 'bbmb' },
            { isInt: false, name: '保费目标达成率', key: 'bbmbdcl' },
            { isInt: false, name: '差距', key: 'cj' }
          ],
          [
            { isInt: false, name: '机构', key: 'name' },
            { isInt: false, name: '承保保费(万元)', key: 'bzbf' }
          ]
        ],
        [
          { isInt: false, name: '机构', key: 'name' },
          { isInt: true, name: '活动人力(人)', key: 'hdrl' },
          { isInt: true, name: '合格人力(人)', key: 'hgrl' },
          { isInt: true, name: '桂冠人力(人)', key: 'ggrl' },
          { isInt: true, name: '桂冠正式会员(人)', key: 'gghy' },
          { isInt: true, name: '双冠人力(人)', key: 'sgrl' },
          { isInt: true, name: '新增人力(人)', key: 'xzrl' }
        ],
        [
          { isInt: false, name: '产品', key: 'productName' },
          { isInt: false, name: '承保保费(万元)', key: 'cbbb' },
          { isInt: true, name: '承保件数(件)', key: 'cbItems' },
          { isInt: false, name: '保费占比(%)', key: 'percent' }
        ]
      ],
      values: [],
      totals: []
    }
  },
  methods: {
    calculateTotal() {
      this.totals = []
      let columns = JSON.parse(JSON.stringify(this.columns))
      // 排除第一列(排名)
      columns.splice(0, 1)
      for (let column of columns) {
        let key = column.key
        let total = this.values.reduce((prevVal, currVal) => {
          let count = column.isInt ? parseInt(currVal[key]) : parseFloat(currVal[key])
          return prevVal + count
        }, 0)

        if (column.isInt) {
          this.totals.push(total)
        } else {
          this.totals.push(parseFloat(total.toFixed(2)))
        }
      }
    },
    // setShortName() {
    //   for (let org of this.values) {
    //     for (let shortName of orgShortNames) {
    //       if (org.code === shortName.code) {
    //         org.name = shortName.name
    //       }
    //     }
    //   }
    // },
    setTableData(data, type) {
      switch (type) {
        case 'prem':
          this.values = data.list ? data.list : []
          // this.setShortName()
          this.calculateTotal()
          break
        case 'active':
          this.values = data.listRL ? data.listRL : []
          // this.setShortName()
          this.calculateTotal()
          break
        case 'product':
          this.values = data.productDTO ? data.productDTO : []
          this.calculate()
          this.calculateTotal()
          break
      }
    },
    calculate() {
      let allPrice = this.values.reduce((prevVal, currVal) => {
        return prevVal + parseFloat(currVal.cbbb)
      }, 0)
      this.values.map(product => {
        product.allPrice = allPrice
        let percent = ((product.cbbb / allPrice) * 100).toFixed(8)
        product.percent = percent
        return product
      })
    }
  },
  watch: {
    active: {
      handler(nv) {
        this.$emit('updateQueryCom', nv)
      }
    }
  },
  filters: {
    blankFilter(val) {
      if (isNaN(parseFloat(val))) {
        return val ? val : '-'
      } else {
        let res = parseFloat(val).toFixed(2)
        if (res.endsWith('.00')) {
          return res.split('.')[0]
        } else {
          return res
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$border: 1px solid #e4e4e4;
$bgRed: #f03;
$white: #fff;
::v-deep .van-tabs__wrap {
  padding: 10px;
}

::v-deep .van-tabs__nav {
  border-radius: 5px;
  border: 1px solid #e4e4e4;
  padding-bottom: 0;
}

::v-deep .van-tabs__line {
  bottom: 0;
}

::v-deep .van-tab--active {
  font-size: 16px;
  font-weight: bolder;
  transition: all 0.1s ease;
}

.table-wrapper {
  overflow: auto;
  margin: 0 10px;
}

.myTable {
  text-align: center;
}

.myTable td,
.myTable th {
  font-size: 14px;
  padding: 10px 5px;
  border-bottom: $border;
  border-collapse: collapse;
  background-color: $white;
}

.myTable th {
  background-color: $bgRed;
  border: none;
  color: $white;
}

.sticky {
  position: sticky;
  left: 0;
}

.bleft {
  border-left: $border;
}

.bright {
  border-right: $border;
}

.nodata {
  text-align: left;
  text-indent: 10em;
}

th.fixedWidth {
  width: 8em;
}

.th-rank {
  width: 50px;
}

.orgName {
  position: sticky;
  left: 59px;
}

*::-webkit-scrollbar {
  display: none;
}
</style>