checkWorkAttendance.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <!-- 考勤统计 -->
  2. <template>
  3. <view class="container">
  4. <view class="table">
  5. <view class="table-date" v-if="currentDate">{{ currentDate.join(' 至 ') }}</view>
  6. <view class="table-box">
  7. <uni-table emptyText="暂无更多数据">
  8. <!-- 表头行 -->
  9. <uni-tr>
  10. <uni-th class="table-box-th" align="center" v-for="(item, index) in tableTh" :key="index" :width="item.width || ''">{{ item.field }}
  11. </uni-th>
  12. </uni-tr>
  13. <!-- 表格数据行 -->
  14. <uni-tr v-for="(item, index) in tableData.list" :key="index">
  15. <uni-td class="table-box-td" align="center">{{ item.road }}</uni-td>
  16. <uni-td class="table-box-td" align="center">{{ item.road }}</uni-td>
  17. <uni-td class="table-box-td" align="center">{{ item.num }}</uni-td>
  18. <uni-td class="table-box-td" align="center">{{ item.really }}</uni-td>
  19. <uni-td class="table-box-td" align="center">{{ item.really }}</uni-td>
  20. <uni-td class="table-box-td" align="center">{{ item.really }}</uni-td>
  21. </uni-tr>
  22. </uni-table>
  23. </view>
  24. <view class="table-pagination">
  25. <uni-pagination show-icon="true" :total="tableData.total" :current="tableData.current"></uni-pagination>
  26. </view>
  27. </view>
  28. </view>
  29. </template>
  30. <script>
  31. export default {
  32. props: {
  33. currentDate: {
  34. type: Array,
  35. default: []
  36. },
  37. tableTh: {
  38. type: Array,
  39. default: () => {
  40. return [
  41. { field: '工号', width: 80 },
  42. { field: '姓名', width: 80 },
  43. { field: '实出勤(天)', width: 90 },
  44. { field: '缺勤(天)', width: 80 },
  45. { field: '缺卡(次)', width: 80 },
  46. { field: '早退(次)', width: 80 },
  47. ]
  48. }
  49. },
  50. tableData: {
  51. type: Object,
  52. default: () => {
  53. return {
  54. current: 1,
  55. total: 30,
  56. list: [{
  57. num: 1001,
  58. name: 'xxx',
  59. road: '金科路',
  60. really: 80
  61. },
  62. {
  63. num: 1001,
  64. name: 'xxx',
  65. road: '金科路',
  66. should: 100,
  67. really: 80
  68. },
  69. {
  70. num: 1001,
  71. name: 'xxx',
  72. road: '金科路',
  73. should: 100,
  74. really: 80
  75. },
  76. {
  77. num: 1001,
  78. name: 'xxx',
  79. road: '金科路',
  80. should: 100,
  81. really: 80
  82. },
  83. {
  84. num: 1001,
  85. name: 'xxx',
  86. road: '金科路',
  87. should: 100,
  88. really: 80
  89. },
  90. {
  91. num: 1001,
  92. name: 'xxx',
  93. road: '金科路',
  94. should: 100,
  95. really: 80
  96. },
  97. {
  98. num: 1001,
  99. name: 'xxx',
  100. road: '金科路',
  101. should: 100,
  102. really: 80
  103. },
  104. {
  105. num: 1001,
  106. name: 'xxx',
  107. road: '金科路',
  108. should: 100,
  109. really: 80
  110. },
  111. {
  112. num: 1001,
  113. name: 'xxx',
  114. road: '金科路',
  115. should: 100,
  116. really: 80
  117. }
  118. ]
  119. }
  120. }
  121. }
  122. }
  123. }
  124. </script>
  125. <style lang="scss" scoped>
  126. @import './report.scss';
  127. </style>