<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="" :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="" 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="" 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="" 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="" label="基础数据">

            <el-table-column header-align="center" align="center" min-width="" 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="" label="销售数据">

            <el-table-column header-align="center" align="center" min-width="" 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="" 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="" 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="" 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="">

          <!--编辑功能-->

          <template slot-scope="scope">

            <span class="span-icon">

                <i class="el-icon-download" v-if="$filterBtn('bankData:brandData:dataMonitor:download') &&

                (scope.row.contractNum >'' || scope.row.saReceiptNum >'' || scope.row.saDoNum >''

                || scope.row.saOrderNum >'' || scope.row.saSettlementNum >'')"  @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:,   //标识，初始化默认选中第一项

        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: ,

          rows: ,

          supplierCode:''

        },

        tableKey: ,

        //下载数据

        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 ===  ){

              console.log(this.orgOptions[].code,'')

                this.listQuery.supplierCode = this.orgOptions[].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 == '' ) {

                   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>

根据table返回来的数据，动态展示组织名称的更多相关文章

  1. ecshop后台根据条件查询后不填充table 返回的json数据，content为空？

    做ecshop后台开发的时,根据条件查询后,利用ajax返回的content json数据内容为空,没有填充table 效果 预期效果 问题: make_json_result($smarty -&g ...

  2. angular中ng-model，返回数据，拆分数据，展示，名称相同，重新赋值会有冲突

    本问题出在angular,1.X版本,我用的是1.5的版本: 问题原因: <input type="number" ng-mode="a" /> & ...

  3. echarts 地图 动态 展示 结合css+js

    echarts地图展示功能非常强大,官网上静态展示的样例非常多了,动态的资料少.研究了下.我眼下实现的通过ajax从server获取数据动态展示地图. 另外,我们有时候希望在地图之上做些自己定义的东西 ...

  4. 利用 Flask 动态展示 Pyecharts 图表数据的几种方法

    本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀- Flask 模板渲染 1. 新建一个项目fla ...

  5. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  6. 微信小程序结合后台数据管理实现商品数据的动态展示、维护

    微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示.维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通 ...

  7. 数据可视化之powerBI技巧（一）PowerBI可视化技巧：KPI指标动态展示之TOPN及其他

    ​本文来自星友Beau的分享,在进行数据指标的展现时,对关键的少数单独展示,而对剩余的大多数折叠为其他项,是一个很常用的做法.Beau同学通过一个日常的办公场景,详细介绍了PowerBI实现的步骤,值 ...

  8. SpringMVC4+thymeleaf3的一个简单实例（篇五：页面和MySql的数据交互-展示以及存储）

    这一篇将介绍怎样把页面数据保存的MySQL数据库,并将数据库内容展示到页面上.首先做一个基础工作,添加以下jar到lib:1: mysql-connector-Java-5.1.40-bin.jar ...

  9. python操作三大主流数据库(14)python操作redis之新闻项目实战②新闻数据的展示及修改、删除操作

    python操作三大主流数据库(14)python操作redis之新闻项目实战②新闻数据的展示及修改.删除操作 项目目录: ├── flask_redis_news.py ├── forms.py ├ ...

随机推荐

  1. Openstack贡献者须知 2 — 社区工作运作 & 代码贡献流程

    目录 目录 前文列表 订阅邮件列表 Mailing Lists 社区工作运作流程 Openstack 代码贡献流程 PEP8 Python编程风格 查阅相关资源 前文列表 Openstack贡献者须知 ...

  2. 5天玩转C#并行和多线程编程 —— 第一天 认识Parallel 转载 https://www.cnblogs.com/yunfeifei/p/3993401.html

    5天玩转C#并行和多线程编程系列文章目录 5天玩转C#并行和多线程编程 —— 第一天 认识Parallel 5天玩转C#并行和多线程编程 —— 第二天 并行集合和PLinq 5天玩转C#并行和多线程编 ...

  3. 剑指offer——28对称的二叉树

    题目描述 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的.     题解: 使用正常前序遍历与反向的前序遍历进行比较结果即可,注意,需将空 ...

  4. java执行spark查询hbase的jar包出现错误提示：ob aborted due to stage failure: Master removed our application: FAILED

    执行java调用scala 打包后的jar时候出现异常 /14 23:57:08 WARN TaskSchedulerImpl: Initial job has not accepted any re ...

  5. Round Numbers /// 组合计数 oj21455

    题目大意: 给定a,b 输出[a,b]的闭区间中round number的数量 所谓round就是一个数在二进制下0的个数大于等于1的个数 0的个数>=1的个数 也就是1的个数<=0的个数 ...

  6. vue created与activated的区别

    搬运自:https://www.cnblogs.com/goloving/p/9256212.html 使用<keep-alive>会将数据保留在内存中,如果要在每次进入页面的时候获取最新 ...

  7. JavaScript——基本语法

    单词掌握 BOM 浏览器对象模型 DOM 文档对象模型 document 文档 break 中断 continue 继续 1.js脚本位置 通常可以在三个地方编写js脚本代码,一是在网页文件的< ...

  8. C/C++实现单向循环链表(尾指针，带头尾节点)

    C语言实现单向循环链表,主要功能为空链表创建,链表初始化(头插法,尾插法),链表元素读取,按位置插入,(有序链表)按值插入,按位置删除,按值删除,清空链表,销毁链表. 单向循环链表和单向链表的区别:( ...

  9. 洛谷 P2114 [NOI2014]起床困难综合症

    题目描述 21世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm一直坚持与起床困难综合症作斗争.通过研究相关文献,他找到了该病的发病原因 ...

  10. JSF(JavaServer Faces)简介

    JavaServer Faces (JSF) 是一种用于构建Java Web 应用程序的标准框架(是Java Community Process 规定的JSR-127标准).它提供了一种以组件为中心的 ...