table2.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <template>
  2. <div>
  3. <div v-if="tableData.length">
  4. <!-- 全国销售日报 -->
  5. <table class="table-box" id="day-table-2" >
  6. <thead class="ant-table-thead">
  7. <tr>
  8. <th :colspan="cloumns.length">
  9. <div class="table-title">{{ dateStr }} 项目销售日报2 <span v-if="showDz">(截止{{ nowDate }})</span></div>
  10. </th>
  11. </tr>
  12. <tr>
  13. <th v-for="item in cloumns" :key="item">{{ item }}</th>
  14. </tr>
  15. </thead>
  16. <tbody>
  17. <tr v-for="(item,index) in list" :key="index">
  18. <td align="center">{{ item.proName }}</td>
  19. <td align="center">{{ item.userName }}</td>
  20. <td align="center">{{ Number(item.bymb).toFixed(2) }}</td>
  21. <td align="center">{{ Number(item.amount).toFixed(2) }}</td>
  22. <td align="center" class="red">{{ item.wcl }}</td>
  23. </tr>
  24. </tbody>
  25. </table>
  26. </div>
  27. <div v-else class="noData">
  28. 暂无数据,请点击查询
  29. </div>
  30. </div>
  31. </template>
  32. <script>
  33. export default {
  34. name: 'Table2',
  35. props: {
  36. tableData: {
  37. type: Array,
  38. default: () => []
  39. },
  40. month: {
  41. type: String,
  42. default: () => ''
  43. },
  44. nowDate: {
  45. type: String,
  46. default: () => ''
  47. }
  48. },
  49. data () {
  50. return {
  51. months: '',
  52. list: [],
  53. showDz: false,
  54. dateStr: ''
  55. }
  56. },
  57. computed: {
  58. cloumns () {
  59. const m = this.month.split('-')
  60. return ['项目', '品类经理', m[1] + '月业绩目标', m[1] + '月销售额截止达成', '达成率']
  61. }
  62. },
  63. methods: {
  64. getmonths () {
  65. this.months = this.month.split('-')[1]
  66. this.dateStr = this.month.replace('-', '年') + '月'
  67. },
  68. getshowDz () {
  69. const nowMonths = new Date().getMonth() + 1
  70. this.showDz = this.months == nowMonths
  71. },
  72. getlist () {
  73. this.list = this.tableData
  74. },
  75. getTable () {
  76. return document.getElementById('day-table-2')
  77. },
  78. pageInit () {
  79. this.getmonths()
  80. this.getshowDz()
  81. this.getlist()
  82. }
  83. }
  84. }
  85. </script>
  86. <style lang="less" scoped>
  87. .table-title{
  88. font-size: 16px;
  89. font-weight: bold;
  90. width: 100%;
  91. max-width: 1400px;
  92. text-align: center;
  93. }
  94. .noData{
  95. width: 100%;
  96. text-align: center;
  97. font-size: 16px;
  98. color: #999;
  99. min-height: 300px;
  100. line-height: 300px;
  101. }
  102. .table-box{
  103. width: 100%;
  104. max-width: 1400px;
  105. font-size: 14px;
  106. .red{
  107. color: red;
  108. }
  109. tr > th{
  110. padding: 6px 8px;
  111. border: 1px solid #dedede;
  112. text-align: center;
  113. }
  114. tr > td{
  115. padding: 5px;
  116. border: 1px solid #dedede;
  117. }
  118. tr{
  119. &:hover{
  120. td{
  121. background-color: #ffd6d4;
  122. }
  123. }
  124. }
  125. }
  126. </style>