clock-steps.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <template>
  2. <!-- 在考勤组 -->
  3. <view class="steps">
  4. <u-steps
  5. :key="enterRangeCode"
  6. dot
  7. :current="current"
  8. direction="column"
  9. >
  10. <u-steps-item>
  11. <view class="go-work-content" slot="desc">
  12. <!--title-->
  13. <view class="step-item-title">
  14. 上班 {{ detailsInfo.clockInTime }}
  15. </view>
  16. <!--content-->
  17. <view class="step-item-content">
  18. <!--已打上班卡(正常、迟到、旷工)-->
  19. <checkedInWork
  20. :detailsInfo="detailsInfo"
  21. v-if="
  22. [
  23. statusKeys.CHECK_IN,
  24. statusKeys.BE_LATE,
  25. statusKeys.ABSENTEEISM,
  26. ].includes(clockStatus)
  27. "
  28. />
  29. <!--未打上班卡,在地点和时间范围内,可打卡-->
  30. <clockableView
  31. v-else-if="showViewUp"
  32. :currentTime="currentTime"
  33. @punchClock="punchClock"
  34. />
  35. <!--未打上班卡,在时间范围,不在地点范围内,不可打卡-->
  36. <cannotClockIn
  37. v-else-if="showClockInUp"
  38. :clockAddr="clockAddr"
  39. :currentTime="currentTime"
  40. @reloadLocation="$emit('reloadLocation')"
  41. />
  42. <!--未打上班卡,但是已过打卡时间(缺卡)-->
  43. <clockInTimeout
  44. :clockStatus="clockStatus"
  45. v-if="[statusKeys.CHECK_NO].includes(clockStatus)"
  46. />
  47. </view>
  48. </view>
  49. </u-steps-item>
  50. <u-steps-item>
  51. <view class="off-work-content" slot="desc">
  52. <view class="step-item-title-ash">
  53. 下班 {{ detailsInfo.clockOutTime }}
  54. </view>
  55. <view class="step-item-content">
  56. <!--下班为空-还没有到打卡时间-->
  57. <view v-if="notClockingIn" style="color: #8c8c8c">
  58. 未打卡
  59. </view>
  60. <!--已打下班卡(正常、加班、早退、旷工)-->
  61. <checkedInWork
  62. :detailsInfo="detailsInfo"
  63. @punchClock="punchClock"
  64. type="1"
  65. v-if="
  66. [
  67. statusKeys.CHECK_OUT,
  68. statusKeys.OVERTIME,
  69. statusKeys.LEAVE_EARLY,
  70. statusKeys.ABSENTEEISM,
  71. ].includes(clockStatusDown)
  72. "
  73. />
  74. <!--未打下班卡,在地点和时间范围内,可打卡-->
  75. <clockableView
  76. v-else-if="showViewDown"
  77. type="1"
  78. :currentTime="currentTime"
  79. @punchClock="punchClock"
  80. />
  81. <!--未打下班卡,在时间范围,不在地点范围内,不可打卡-->
  82. <cannotClockIn
  83. v-else-if="showClockInDown"
  84. type="1"
  85. :clockAddr="clockAddr"
  86. :currentTime="currentTime"
  87. @reloadLocation="$emit('reloadLocation')"
  88. />
  89. <!--未打下班卡,但是已过打卡时间(缺卡)-->
  90. <clockInTimeout
  91. type="1"
  92. :clockStatus="clockStatusDown"
  93. v-if="[statusKeys.CHECK_NO].includes(clockStatusDown)"
  94. />
  95. </view>
  96. </view>
  97. </u-steps-item>
  98. </u-steps>
  99. </view>
  100. </template>
  101. <script>
  102. import cannotClockIn from '@/pages/attendanceClock/workContent/cannotClockIn.vue'; // 不在打卡范围内,不可打卡
  103. import checkedInWork from '@/pages/attendanceClock/workContent/checkedInWork.vue'; // 已打上班卡
  104. import clockInTimeout from '@/pages/attendanceClock/workContent/clockInTimeout.vue'; // 未打卡(缺卡)
  105. import clockableView from '@/pages/attendanceClock/workContent/clockableView.vue'; // 在打卡范围内,可打卡状态
  106. import { statusKeys } from '@/pages/attendanceClock/com/allCheckData.js';
  107. export default {
  108. name: 'clockSteps',
  109. components: {
  110. cannotClockIn,
  111. checkedInWork,
  112. clockInTimeout,
  113. clockableView,
  114. },
  115. props: {
  116. enterRangeCode: String, // 0不在范围内 1在范围内
  117. clockAddr: String, // 地点名,不在考勤范围内需显示
  118. detailsInfo: {
  119. // 打卡详情
  120. default: () => ({}),
  121. type: Object,
  122. },
  123. current: Number, // 当前steps
  124. currentTime: String, // hh:MM:ss 本机时间
  125. },
  126. computed: {
  127. // 上班---
  128. clockStatus() {
  129. // 上班status
  130. const detailVO = this.detailsInfo?.clockInDetailVO || {};
  131. return detailVO.status;
  132. },
  133. showViewUp() {
  134. // enterRangeCode在打卡范围 并且 步骤为0 并且上班打卡状态为null
  135. const { enterRangeCode, current, clockStatus } = this;
  136. return enterRangeCode === '1' && current === 0 && !clockStatus;
  137. },
  138. showClockInUp() {
  139. // enterRangeCode不在在打卡范围 并且 步骤为0 并且上班打卡状态为null
  140. const { enterRangeCode, current, clockStatus } = this;
  141. return enterRangeCode === '0' && current === 0 && !clockStatus;
  142. },
  143. // 下班---
  144. notClockingIn() {
  145. // 下班打卡的状态为空
  146. return !this.clockStatusDown;
  147. },
  148. clockStatusDown() {
  149. // 下班status
  150. const detailVO = this.detailsInfo?.clockOutDetailVO || {};
  151. return detailVO.status;
  152. },
  153. showViewDown() {
  154. // 在打卡范围 并且 步骤为1 并且 下班打卡的状态为null
  155. const { enterRangeCode, current, clockStatusDown } = this;
  156. return (
  157. enterRangeCode === '1' && current === 1 && clockStatusDown
  158. );
  159. },
  160. showClockInDown() {
  161. // 不在在打卡范围 并且 步骤为1
  162. const { enterRangeCode, current, clockStatusDown } = this;
  163. return (
  164. enterRangeCode === '0' && current === 1 && !clockStatusDown
  165. );
  166. },
  167. // com
  168. },
  169. data() {
  170. return {
  171. statusKeys,
  172. };
  173. },
  174. methods: {
  175. punchClock(type) {
  176. this.$emit('punchClock', type); //0上班,1下班,2更新打卡
  177. },
  178. },
  179. };
  180. </script>
  181. <style scoped lang="scss">
  182. .steps {
  183. /deep/.u-steps-item__wrapper__dot {
  184. width: 8px;
  185. height: 8px;
  186. }
  187. /deep/ .u-steps-item__wrapper {
  188. background-color: #f8f8f8;
  189. }
  190. .step-item-title {
  191. color: #152f62;
  192. font-size: 14px;
  193. }
  194. .step-item-title-ash {
  195. font-size: 14px;
  196. color: #656972;
  197. }
  198. .step-item-content {
  199. position: relative;
  200. padding: 40rpx;
  201. background-color: #fff;
  202. border-radius: 4px;
  203. margin-top: 8rpx;
  204. }
  205. }
  206. </style>