根据table返回来的数据，动态展示组织名称

<template>
  <div class="app-container calendar-list-container">
      <el-card class="box-card-bottom detail-top-card" >
        <div style="display: flex;justify-content:space-between;overflow-x: auto;white-space: nowrap;">
          <a>
          <span v-for="(item,index) in orgOptions" :key="index" style="width:200px;height:40px;line-height:40px;font-size:14px;padding:0px 10px 0 5px;display:inline-block;" :style="{'background':item.background,'color':item.color}" :class="{'bor':clicked==index}" @click="changeTab(index,item)">{{item.name}}</span>
          </a>
        </div>
      </el-card>

    <el-table max-height="390" :key='tableKey' :data="list" border fit highlight-current-row style="width: 100%">
        <el-table-column  header-align="center" align="center" :show-overflow-tooltip="true" min-width="60" label="年月" >
          <template slot-scope="scope">
            <span>{{scope.row.dataMonth}}</span>
          </template>
        </el-table-column>
        <div v-if="false">
            <el-table-column  header-align="center" align="left" :show-overflow-tooltip="true" min-width="150" label="供应商编码" >
              <template slot-scope="scope">
                <span>{{scope.row.supplierCode}}</span>
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="left" :show-overflow-tooltip="true" min-width="150" label="供应商名称">
              <template slot-scope="scope">
                <span>{{scope.row.supplierName}}</span>
              </template>
            </el-table-column>
        </div>
        
        <el-table-column header-align="left" align="center" min-width="80" label="基础数据">
            <el-table-column header-align="center" align="center" min-width="60" label="合同">
              <template slot-scope="scope">
                <span class="span-icon">
                  <i v-if="scope.row.contractNum > '0'"  style="color: #7fbe64" class="el-icon-erp-shixinyuan" title="成功"></i>
                  <i v-else style="color: #d73d32" class="el-icon-erp-shixinyuan" title="失败"></i>
                </span>
              </template>
            </el-table-column>
        </el-table-column>
        <el-table-column header-align="left" align="center" min-width="60" label="销售数据">
            <el-table-column header-align="center" align="center" min-width="60" label="收款">
              <template slot-scope="scope">
                <span class="span-icon">
                  <i v-if="scope.row.saReceiptNum > '0'"  style="color: #7fbe64" class="el-icon-erp-shixinyuan" title="成功"></i>
                  <i v-else style="color: #d73d32" class="el-icon-erp-shixinyuan" title="失败"></i>
                </span>
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" min-width="60" label="发货">
              <template slot-scope="scope">
                <span class="span-icon">
                  <i v-if="scope.row.saDoNum > '0'"  style="color: #7fbe64" class="el-icon-erp-shixinyuan" title="成功"></i>
                  <i v-else style="color: #d73d32" class="el-icon-erp-shixinyuan" title="失败"></i>
                </span>
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" min-width="60" label="订单">
              <template slot-scope="scope">
                <span class="span-icon">
                  <i v-if="scope.row.saOrderNum > '0'"  style="color: #7fbe64" class="el-icon-erp-shixinyuan" title="成功"></i>
                  <i v-else style="color: #d73d32" class="el-icon-erp-shixinyuan" title="失败"></i>
                </span>
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" min-width="60" label="结算">
              <template slot-scope="scope">
                <span class="span-icon">
                  <i v-if="scope.row.saSettlementNum > '0'"  style="color: #7fbe64" class="el-icon-erp-shixinyuan" title="成功"></i>
                  <i v-else style="color: #d73d32" class="el-icon-erp-shixinyuan" title="失败"></i>
                </span>
              </template>
            </el-table-column>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="80">
          <!--编辑功能-->
          <template slot-scope="scope">
            <span class="span-icon">
                <i class="el-icon-download" v-if="$filterBtn('bankData:brandData:dataMonitor:download') && 
                (scope.row.contractNum >'0' || scope.row.saReceiptNum >'0' || scope.row.saDoNum >'0' 
                || scope.row.saOrderNum >'0' || scope.row.saSettlementNum >'0')"  @click="downData(scope.row)" title="下载数据" style="color: #7fbe64"></i>
                <i class="el-icon-download icon-gray" v-else></i>
            </span>
          </template>
        </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import * as index from '@/api/index'
  import * as filter from '@/filters/index'
  import {mapGetters} from 'vuex'

  export default {
    data() {
      return {
        clicked:0,   //标识，初始化默认选中第一项
        orgOptions:[],  //bank用户登陆查询和其相关联的品牌厂商
        colorList:[     //根据返回的品牌厂商添加对应的背景颜色
          {background:'#d9edf7',color:'#57b5e3'},
          {background:'rgb(251, 225, 239)',color:'rgb(243, 115, 161)'},
          {background:'rgb(233, 213, 245)',color:'rgb(216, 118, 232)'},
          {background:'rgb(222, 224, 226)',color:'rgb(152, 145, 156)'},
          {background:'rgb(191, 245, 218)',color:'rgb(93, 183, 175)'},
          {background:'rgb(243, 235, 194)',color:'rgb(198, 199, 142)'},
          {background:'rgb(215, 211, 245)',color:'rgb(172, 164, 228)'},
          {background:'rgba(149, 199, 249, 0.61)',color:'rgb(107, 177, 193)'},
          {background:'rgba(236, 249, 135, 0.61)',color:'rgb(189, 214, 59)'},
          {background:'rgba(161, 234, 167, 0.37)',color:'rgb(156, 230, 176)'},
          {background:'rgba(185, 107, 232, 0.37)',color:'rgb(213, 122, 234)'},
          {background:'#d9edf7',color:'#57b5e3'},
          {background:'rgb(251, 225, 239)',color:'rgb(243, 115, 161)'},
          {background:'rgb(233, 213, 245)',color:'rgb(216, 118, 232)'},
          {background:'rgb(222, 224, 226)',color:'rgb(152, 145, 156)'},
          {background:'rgb(191, 245, 218)',color:'rgb(93, 183, 175)'},
          {background:'rgb(243, 235, 194)',color:'rgb(198, 199, 142)'},
          {background:'rgb(215, 211, 245)',color:'rgb(172, 164, 228)'},
          {background:'rgba(149, 199, 249, 0.61)',color:'rgb(107, 177, 193)'},
          {background:'rgba(236, 249, 135, 0.61)',color:'rgb(189, 214, 59)'},
          {background:'rgba(161, 234, 167, 0.37)',color:'rgb(156, 230, 176)'},
          {background:'rgba(185, 107, 232, 0.37)',color:'rgb(213, 122, 234)'},
        ],  
        list: null,
        total: null,
        listQuery: {
          page: 1,
          rows: 10,
          supplierCode:''
        },
        tableKey: 0,
        //下载数据
        downQuery:{     
          dataMonth:'', //年月
          supplierCode:'' //供应商编码
        }  
      }
    },
    created() {
      //this.getList()
      this.getOrgList()
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    
    methods: {
      changeTab (index,item){
            this.clicked = index;
            this.listQuery.supplierCode = item.code
            this.handleFilter()
        },
      //bank用户登陆查询和其相关联的品牌厂商
      getOrgList() {
          index.pageList('/api/admin/organization/findListByBank').then(response => {
            this.orgOptions = response.data.content
            this.orgOptions.forEach((val, index)=> {
              Object.assign(val,this.colorList[index])
            })
            //品牌厂商默认第一个 传对应的 code
            if(this.clicked === 0 ){
              console.log(this.orgOptions[0].code,'9999')
                this.listQuery.supplierCode = this.orgOptions[0].code
                this.getList()
            }

          })
      },
      getList() {
        index.getObj('/api/dc/supplierData/list/' + this.listQuery.supplierCode).then(response => {
          this.list = response.data.content;
          //this.total = response.data.content.totalElements
        })
      },
      handleFilter() {
        this.getList()
      },//按月下载数据
      downData(row) { 
           this.downQuery.dataMonth =  row.dataMonth,
           this.downQuery.supplierCode = row.supplierCode
         index.page(this.downQuery,"/api/dc/supplierData/exportExcelByDataMonth")
                .then(response=>{
              if (response.data.resultCode == '000' ) {
                   let fileName = response.data.fileName
                   let extension = response.data.extension
                  window.location.href = this.$api.exportPath + '/api/dc/supplierData/downloadFiles/' + fileName + '/sd/' + extension
                  this.$success("导出成功!")
              }else {
                 this.$error("导出失败!")
              }
                })
      }
    }
  }
</script>
<style scoped="scoped">
.bor{
   border-left:2px solid #57b5e3;
   font-size:15px !important;
   font-weight: bold;
}

</style>