<template> <div> <!-- 分区销售日报 --> <h2 class="table-title" v-if="tableData.length">{{ month.replace('-','年')+'月' }} 分区销售日报(截止{{ nowDate }})</h2> <table class="table-box" id="day-table-3" v-if="tableData.length"> <colgroup><col><col><col><col><col><col><col><col><col><col><col><col><col><col><col></colgroup> <thead class="ant-table-thead"> <tr> <th key="managerNameList" rowspan="2" style="text-align: center;"> <span class="ant-table-header-column"><div><span class="ant-table-column-title">区域负责人</span><span class="ant-table-column-sorter"></span></div></span> </th> <th key="subareaName" rowspan="2" style="text-align: center;"> <span class="ant-table-header-column"><div><span class="ant-table-column-title">分区</span><span class="ant-table-column-sorter"></span></div></span> </th> <th key="2" colspan="8" class="ant-table-align-center" style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">品牌</span><span class="ant-table-column-sorter"></span></div></span></th> <th key="3" colspan="4" class="ant-table-align-center" style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">轮胎</span><span class="ant-table-column-sorter"></span></div></span></th> <th key="4" colspan="1" class="ant-table-align-center ant-table-row-cell-last" style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">品牌+轮胎</span><span class="ant-table-column-sorter"></span></div></span></th> </tr> <tr> <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">年度目标</span><span class="ant-table-column-sorter"></span></div></span></th> <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">截止1-4月完成</span><span class="ant-table-column-sorter"></span></div></span></th> <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">5月销售额截止达成</span><span class="ant-table-column-sorter"></span></div></span></th> <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">累计5月截止完成</span><span class="ant-table-column-sorter"></span></div></span></th> <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title red">年度完成率</span><span class="ant-table-column-sorter"></span></div></span></th> <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">5月业绩目标</span><span class="ant-table-column-sorter"></span></div></span></th> <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title red">达成率</span><span class="ant-table-column-sorter"></span></div></span></th> <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">今日销售额</span><span class="ant-table-column-sorter"></span></div></span></th> <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">截止1-4月销售额</span><span class="ant-table-column-sorter"></span></div></span></th> <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">5月销售额截止达成</span><span class="ant-table-column-sorter"></span></div></span></th> <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">累计5月截止完成</span><span class="ant-table-column-sorter"></span></div></span></th> <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">今日销售额</span><span class="ant-table-column-sorter"></span></div></span></th> <th class="ant-table-align-center ant-table-row-cell-break-word ant-table-row-cell-last" style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">5月销售额截止达成</span><span class="ant-table-column-sorter"></span></div></span></th> </tr> </thead> <tbody> <tr v-for="(item, index) in list" :key="index"> <td v-for="(sitem,si) in columns" :key="sitem.dataIndex+index" :class="sitem.title.indexOf('率')>=0?'red '+(hjRow.indexOf(index)>=0?'hj':''):(hjRow.indexOf(index)>=0?'hj':'')" style="text-align: center;" v-if="!(index==list.length-1&&si==0)" :colspan="index==list.length-1&&si==1?2:1" :style="index==list.length-1?'color: red;font-weight:bold;background:#dfdeff;border-color:#c7c7ff;':''" > {{ item[sitem.dataIndex].toString() }}{{ sitem.title.indexOf('率')>=0?'%':'' }} </td> </tr> </tbody> </table> <div v-else class="noData"> 暂无数据,请点击查询 </div> </div> </template> <script> export default { name: 'Table3', props: { tableData: { type: Array, default: () => [] }, month: { type: String, default: () => '' }, nowDate: { type: String, default: () => '' } }, watch: { tableData: { handler (val) { this.$nextTick(() => { this.tableHeight = window.innerHeight - 360 }) }, deep: true } }, mounted () { this.$nextTick(() => { this.tableHeight = window.innerHeight - 360 }) }, data () { return { tableHeight: 300 } }, computed: { list () { return this.tableData }, hjRow () { const ret = [] this.list.forEach((item, index) => { if (item.subareaName.indexOf('合计') >= 0 || item.subareaName.indexOf('云南省') >= 0) { ret.push(index) } }) return ret }, months () { return this.month.split('-')[1] }, columns () { return [ { title: '区域负责人', dataIndex: 'managerNameList', align: 'center', width: '250' }, { title: '分区', dataIndex: 'subareaName', align: 'center', width: '250' }, { title: '年度目标', dataIndex: 'yearTarget', align: 'center', width: '100' }, { title: '截止1-' + (this.months[1] - 1) + '月完成', dataIndex: 'histSalesReal', align: 'center', width: '100' }, { title: this.months[1] + '月销售额截止达成', dataIndex: 'currSalesReal', align: 'center', width: '130' }, { title: '累计' + this.months[1] + '月截止完成', dataIndex: 'accuSalesReal', align: 'center', width: '100' }, { title: '年度完成率', dataIndex: 'yearTargetRate', align: 'center', width: '100' }, { title: this.months[1] + '月业绩目标', dataIndex: 'currTarget', align: 'center', width: '100' }, { title: '达成率', dataIndex: 'currTargetRate', align: 'center', width: '100' }, { title: '今日销售额', dataIndex: 'todaySalesReal', align: 'center', width: '100' }, { title: '截止1-' + (this.months[1] - 1) + '月销售额', dataIndex: 'histSalesRealTireAmount', align: 'center', width: '100' }, { title: this.months[1] + '月销售额截止达成', dataIndex: 'currSalesTireReal', align: 'center', width: '130' }, { title: '累计' + this.months[1] + '月截止完成', dataIndex: 'accuSalesRealTireAmount', align: 'center', width: '100' }, { title: '今日销售额', dataIndex: 'todaySalesTireReal', align: 'center', width: '100' }, { title: this.months[1] + '月销售额截止达成', dataIndex: 'totalCurrSalesTireReal', align: 'center', width: '130' } ] } }, methods: { getTable () { return document.getElementById('day-table-3') } } } </script> <style lang="less" scoped> .table-title{ margin-bottom: 10px; font-size: 16px; font-weight: bold; width: 100%; text-align: center; } .noData{ width: 100%; text-align: center; font-size: 16px; color: #999; min-height: 300px; line-height: 300px; } .table-box{ width: 100%; font-size: 14px; tr > th{ padding: 6px 8px; border: 1px solid #dedede; text-align: center; } .red{ color: red; } .hj{ font-weight: bold; background-color: #f4f5ff; } tr > td{ padding: 5px; border: 1px solid #dedede; } tr{ &:hover{ td{ background-color: #ffd6d4; } } } } </style>