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