supplier-dispatch-h5/src/views/kpi/components/noFit-table.vue

<template>
  <div class="wrap">
    <el-table :data="tableData"
              stripe
              border
              style="width: 100%"
              height="100%"
              v-loading="loading"
              :cell-style="setTableCellStyle"
              class="custom-table">
      <template v-if="active===1">
        <el-table-column v-for="item in labelList" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
          <template slot-scope="scope">{{scope.row[item.prop]}}  </template>
        </el-table-column>
      </template>
      <template v-else-if="active===4">
        <el-table-column v-for="(column,index) in filteredLabelList" :key="column.prop" :prop="column.prop" :label="column.label"
                         :fixed="index===0" align="center"  min-width="100"
                         :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
          <template slot-scope="scope">
            <span v-if="column.label === '师傅姓名'">
              {{ scope.row[column.prop] }}
              <span style=" color: #FFBA00;" v-if="scope.row.starRank"><i class="el-icon-star-on star"></i>{{scope.row.starRank}}</span>
            </span>
            <span v-else>{{ scope.row[column.prop] }}</span>
          </template>
        </el-table-column>
      </template>
      <template v-else>
        <el-table-column v-for="column in labelList" :key="column.prop" :prop="column.prop" :label="column.label"
                         align="center"  min-width="100" :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "noFit-table",
  props: ['tableData', 'labelList', 'loading', 'isMobile','active'],
  data() {
    return {}
  },
  mounted() {
  },
  computed: {
    filteredLabelList() {
      if(this.active!==4){
        return
      }
      return this.labelList.filter(column => column.label !== '星级评分');
    }
  },
  methods: {
    setTableCellStyle({ row, column,columnIndex }) {
      // 月总表格被转置，原始方法失效，重新定义对比
      if(this.active===1){
        if(row.month == '3′接单率(%)'){
          if(columnIndex){
            let res=row[column.property]
            const rate = parseFloat(res && res.replace('%', ''));
            if(rate < 95){
              return {backgroundColor: '#F1B289'}
            }
          }
        }
        if(row.month == '接单时效(分)'){
          if(columnIndex){
            let res=row[column.property]
            if(res > 5){
              return {backgroundColor: '#F1B289'}
            }
          }
        }
        if(row.month == '到达时效(分)'){
          if(columnIndex){
            let res=row[column.property]
            if(res > 40){
              return {backgroundColor: '#F1B289'}
            }
          }
        }
        if(row.month == '总聚合成功率(%)'){
          if(columnIndex){
            let res=row[column.property]
            const rate = parseFloat(res && res.replace('%', ''));
            if(rate < 80){
              return {backgroundColor: '#F1B289'}
            }
          }
        }
        if(row.month == '使用率(%)'){
          if(columnIndex){
            let res=row[column.property]
            const rate = parseFloat(res && res.replace('%', ''));
            if(rate < 95){
              return {backgroundColor: '#F1B289'}
            }
          }
        }
        if(row.month == '投诉率(%)'){
          if(columnIndex){
            let res=row[column.property]
            const rate = parseFloat(res && res.replace('%', ''));
            if(rate > 0.1){
              return {backgroundColor: '#F1B289'}
            }
          }
        }
      }
      // 接单率
      if(column.property=='threeMinutesReceivingRate'){
        if(columnIndex){
          const rate = parseFloat(row.threeMinutesReceivingRate && row.threeMinutesReceivingRate.replace('%', ''));
          if(rate < 95){
            return {backgroundColor: '#F1B289'}
          }
        }
      }
      //师傅接单时效》5
      if(column.property=='receiving'){
        if(columnIndex){
          if(row.receiving > 5){
            return {backgroundColor: '#F1B289'}
          }
        }
      }
      //到达时效》40
      if(column.property=='arriving'){
        if(columnIndex){
          if(row.arriving > 40){
            return {backgroundColor: '#F1B289'}
          }
        }
      }
      //聚合成功率《80
      if(column.property=='polymerizationSuccessRate'){
        if(columnIndex){
          const rate = parseFloat(row.polymerizationSuccessRate && row.polymerizationSuccessRate.replace('%', ''));
          if(rate < 80){
            return {backgroundColor: '#F1B289'}
          }
        }
      }
      //app使用率《95
      if(column.property=='appRate'){
        if(columnIndex){
          const rate = parseFloat(row.appRate && row.appRate.replace('%', ''));
          if(rate < 95){
            return {backgroundColor: '#F1B289'}
          }
        }
      }
      //催促率》3
      if(column.property=='urgeRate'){
        if(columnIndex){
          const rate = parseFloat(row.urgeRate && row.urgeRate.replace('%', ''));
          if(rate > 3){
            return {backgroundColor: '#F1B289'}
          }
        }
      }
      //投诉率》0.1
      if(column.property=='complainOrderRate'){
        if(columnIndex){
          const rate = parseFloat(row.complainOrderRate.replace('%', ''));
          if(rate > 0.1){
            return {backgroundColor: '#F1B289'}
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
::v-deep .el-table{
  font-size: 11px;
}
::v-deep .el-table thead{
  color: #1D2129;
  font-weight: bold;
}
::v-deep .el-table th.el-table__cell.is-leaf {
  background-color: #E5E6EB;
}
::v-deep .el-table .el-table__cell{
  padding: 4px 0 !important;
}
</style>