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