123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- <template>
- <div>
- <!-- 全国销售日报 -->
- <h2 class="table-title" v-if="tableData.length">{{ month.replace('-','年')+'月' }} 全国销售日报(截止{{ nowDate }})</h2>
- <table class="table-box" id="day-table-0" v-if="tableData.length">
- <thead class="ant-table-thead">
- <tr>
- <th v-for="(item,index) in columns" :key="index">{{ item }}</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="item in list" :key="item.key">
- <td
- v-for="cols in columns.length"
- :key="cols+'td'"
- :width="cols==2?350:150"
- v-if="item['col'+cols]!==''"
- :rowspan="hasRowspan(item['col'+cols])[1]"
- :align="typeof item['col'+cols] == 'number' ? (hasRate(item)&&cols>2?'center':'right'):'center'"
- :class="item.key=='currRealFinish'||item.key=='currRealTireFinish'?'red':''"
- >
- {{ hasRowspan(item['col'+cols])[1] ? hasRowspan(item['col'+cols])[0] : item['col'+cols] }}{{ hasRate(item)&&cols>2?'%':'' }}
- </td>
- </tr>
- </tbody>
- </table>
- <div v-else class="noData">
- 暂无数据,请点击查询
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'Table0',
- props: {
- tableData: {
- type: Array,
- default: () => []
- },
- month: {
- type: String,
- default: () => ''
- },
- columns: {
- type: Array,
- default: () => []
- },
- nowDate: {
- type: String,
- default: () => ''
- }
- },
- computed: {
- months () {
- return this.month.split('-')[1]
- },
- list () {
- const rets = []
- const row1 = [
- '年度目标|yearTarget',
- '截止1-' + (this.months - 1) + '月销售实际完成|histSalesReal',
- '累计' + this.months + '月销售实际截止完成|accuSalesReal',
- '年度完成率|yearTargetRate',
- '本月目标|currTarget',
- '本月实际销售|currSalesReal',
- '本月销售实际退货|currReturnReal',
- '本月销售实际完成|currRealFinish',
- '本月达成率|currTargetRate',
- '预估订单|currExpect',
- '预估完成|currExpectFinish',
- '离目标差额|currTargetDiff'
- ]
- const row2 = [
- '年度目标|yearTargetTire',
- '截止1-' + (this.months - 1) + '月销售实际完成条数|histSalesRealTireNum',
- '截止1-' + (this.months - 1) + '月销售实际完成销售额|histSalesRealTireAmount',
- '截止' + this.months + '月销售实际完成条数|accuSalesRealTireNum',
- '累计' + this.months + '月销售实际截止完成|accuSalesRealTireAmount',
- '年度完成率|yearTargetTireRate',
- '本月目标条数|currTargetTireNum',
- '本月销售条数|currSalesTireNum',
- '本月达成率|currTargetTireRate',
- '本月实际销售|currSalesTireReal',
- '本月销售实际退货|currReturnTireReal',
- '本月销售实际完成|currRealTireFinish',
- '预估订单|currExpectTire',
- '预估完成|currExpectTireFinish',
- '离目标差额|currTargetTireDiff'
- ]
- const row3 = ['本月实际销售额|totalCurrRealFinish', '本月预估完成|totalCurrExpectFinish']
- const getRows = function (row, arr, name) {
- row.forEach((item, i) => {
- const nameArr = item.split('|')
- if (i == 0) {
- arr.push({ col1: name + 'rowspan' + row.length, col2: nameArr[0], key: nameArr[1] })
- } else {
- arr.push({ col1: '', col2: nameArr[0], key: nameArr[1] })
- }
- })
- }
- // 品牌
- getRows(row1, rets, '品牌')
- // 轮胎
- getRows(row2, rets, '轮胎')
- // 品牌+轮胎
- getRows(row3, rets, '品牌+轮胎')
- // 循环列
- rets.forEach(item => {
- this.tableData.forEach((cols, i) => {
- for (const key in cols) {
- if (key === item.key) {
- item['col' + (i + 3)] = cols[key]
- }
- }
- })
- })
- return rets
- }
- },
- methods: {
- hasRowspan (row) {
- console.log(row && row.toString().split('rowspan')[1])
- return row && row.toString().split('rowspan')
- },
- hasRate (row) {
- return ['yearTargetRate', 'currTargetRate', 'yearTargetTireRate', 'currTargetTireRate'].includes(row.key)
- },
- getTable () {
- return document.getElementById('day-table-0')
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .table-title{
- margin-bottom: 10px;
- font-size: 16px;
- font-weight: bold;
- width: 100%;
- max-width: 1024px;
- text-align: center;
- }
- .noData{
- width: 100%;
- text-align: center;
- font-size: 16px;
- color: #999;
- min-height: 300px;
- line-height: 300px;
- }
- .table-box{
- width: 100%;
- max-width: 1024px;
- font-size: 14px;
- .red{
- color: red;
- }
- tr > th{
- padding: 6px 8px;
- border: 1px solid #dedede;
- text-align: center;
- }
- tr > td{
- padding: 5px;
- border: 1px solid #dedede;
- }
- tr{
- &:hover{
- td{
- background-color: #ffd6d4;
- }
- }
- }
- }
- </style>
|