table0.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <div>
  3. <!-- 全国销售日报 -->
  4. <h2 class="table-title" v-if="tableData.length">{{ month.replace('-','年')+'月' }} 全国销售日报(截止{{ nowDate }})</h2>
  5. <table class="table-box" id="day-table-0" v-if="tableData.length">
  6. <thead class="ant-table-thead">
  7. <tr>
  8. <th v-for="(item,index) in columns" :key="index">{{ item }}</th>
  9. </tr>
  10. </thead>
  11. <tbody>
  12. <tr v-for="item in list" :key="item.key">
  13. <td
  14. v-for="cols in columns.length"
  15. :key="cols+'td'"
  16. :width="cols==2?350:150"
  17. v-if="item['col'+cols]!==''"
  18. :rowspan="hasRowspan(item['col'+cols])[1]"
  19. :align="typeof item['col'+cols] == 'number' ? (hasRate(item)&&cols>2?'center':'right'):'center'"
  20. :class="item.key=='currRealFinish'||item.key=='currRealTireFinish'?'red':''"
  21. >
  22. {{ hasRowspan(item['col'+cols])[1] ? hasRowspan(item['col'+cols])[0] : item['col'+cols] }}{{ hasRate(item)&&cols>2?'%':'' }}
  23. </td>
  24. </tr>
  25. </tbody>
  26. </table>
  27. <div v-else class="noData">
  28. 暂无数据,请点击查询
  29. </div>
  30. </div>
  31. </template>
  32. <script>
  33. export default {
  34. name: 'Table0',
  35. props: {
  36. tableData: {
  37. type: Array,
  38. default: () => []
  39. },
  40. month: {
  41. type: String,
  42. default: () => ''
  43. },
  44. columns: {
  45. type: Array,
  46. default: () => []
  47. },
  48. nowDate: {
  49. type: String,
  50. default: () => ''
  51. }
  52. },
  53. computed: {
  54. months () {
  55. return this.month.split('-')[1]
  56. },
  57. list () {
  58. const rets = []
  59. const row1 = [
  60. '年度目标|yearTarget',
  61. '截止1-' + (this.months - 1) + '月销售实际完成|histSalesReal',
  62. '累计' + this.months + '月销售实际截止完成|accuSalesReal',
  63. '年度完成率|yearTargetRate',
  64. '本月目标|currTarget',
  65. '本月实际销售|currSalesReal',
  66. '本月销售实际退货|currReturnReal',
  67. '本月销售实际完成|currRealFinish',
  68. '本月达成率|currTargetRate',
  69. '预估订单|currExpect',
  70. '预估完成|currExpectFinish',
  71. '离目标差额|currTargetDiff'
  72. ]
  73. const row2 = [
  74. '年度目标|yearTargetTire',
  75. '截止1-' + (this.months - 1) + '月销售实际完成条数|histSalesRealTireNum',
  76. '截止1-' + (this.months - 1) + '月销售实际完成销售额|histSalesRealTireAmount',
  77. '截止' + this.months + '月销售实际完成条数|accuSalesRealTireNum',
  78. '累计' + this.months + '月销售实际截止完成|accuSalesRealTireAmount',
  79. '年度完成率|yearTargetTireRate',
  80. '本月目标条数|currTargetTireNum',
  81. '本月销售条数|currSalesTireNum',
  82. '本月达成率|currTargetTireRate',
  83. '本月实际销售|currSalesTireReal',
  84. '本月销售实际退货|currReturnTireReal',
  85. '本月销售实际完成|currRealTireFinish',
  86. '预估订单|currExpectTire',
  87. '预估完成|currExpectTireFinish',
  88. '离目标差额|currTargetTireDiff'
  89. ]
  90. const row3 = ['本月实际销售额|totalCurrRealFinish', '本月预估完成|totalCurrExpectFinish']
  91. const getRows = function (row, arr, name) {
  92. row.forEach((item, i) => {
  93. const nameArr = item.split('|')
  94. if (i == 0) {
  95. arr.push({ col1: name + 'rowspan' + row.length, col2: nameArr[0], key: nameArr[1] })
  96. } else {
  97. arr.push({ col1: '', col2: nameArr[0], key: nameArr[1] })
  98. }
  99. })
  100. }
  101. // 品牌
  102. getRows(row1, rets, '品牌')
  103. // 轮胎
  104. getRows(row2, rets, '轮胎')
  105. // 品牌+轮胎
  106. getRows(row3, rets, '品牌+轮胎')
  107. // 循环列
  108. rets.forEach(item => {
  109. this.tableData.forEach((cols, i) => {
  110. for (const key in cols) {
  111. if (key === item.key) {
  112. item['col' + (i + 3)] = cols[key]
  113. }
  114. }
  115. })
  116. })
  117. return rets
  118. }
  119. },
  120. methods: {
  121. hasRowspan (row) {
  122. console.log(row && row.toString().split('rowspan')[1])
  123. return row && row.toString().split('rowspan')
  124. },
  125. hasRate (row) {
  126. return ['yearTargetRate', 'currTargetRate', 'yearTargetTireRate', 'currTargetTireRate'].includes(row.key)
  127. },
  128. getTable () {
  129. return document.getElementById('day-table-0')
  130. }
  131. }
  132. }
  133. </script>
  134. <style lang="less" scoped>
  135. .table-title{
  136. margin-bottom: 10px;
  137. font-size: 16px;
  138. font-weight: bold;
  139. width: 100%;
  140. max-width: 1024px;
  141. text-align: center;
  142. }
  143. .noData{
  144. width: 100%;
  145. text-align: center;
  146. font-size: 16px;
  147. color: #999;
  148. min-height: 300px;
  149. line-height: 300px;
  150. }
  151. .table-box{
  152. width: 100%;
  153. max-width: 1024px;
  154. font-size: 14px;
  155. .red{
  156. color: red;
  157. }
  158. tr > th{
  159. padding: 6px 8px;
  160. border: 1px solid #dedede;
  161. text-align: center;
  162. }
  163. tr > td{
  164. padding: 5px;
  165. border: 1px solid #dedede;
  166. }
  167. tr{
  168. &:hover{
  169. td{
  170. background-color: #ffd6d4;
  171. }
  172. }
  173. }
  174. }
  175. </style>