childTaskItem.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <template>
  2. <view class="child-task">
  3. <view class="task-main" @click="handleEdit">
  4. <view class="top">
  5. <!-- <view
  6. :class="{over: isOver}"
  7. class="task-checkbox"
  8. @click.stop="updateTaskStatus">
  9. <image
  10. v-if="isOver"
  11. :src="$static('images/oa/task-check.png')"
  12. alt
  13. class="icon" />
  14. </view> -->
  15. <view
  16. :class="{over: isOver}"
  17. class="check-box"
  18. @click.stop="updateTaskStatus">
  19. <text class="icon wk wk-check" />
  20. </view>
  21. <view :class="{over: isOver}" class="task-title">
  22. {{ itemData.name }}
  23. </view>
  24. </view>
  25. <view class="bottom">
  26. <view
  27. v-if="itemData.stopTime"
  28. class="task-time">
  29. <image :src="$static('images/icon/time.png')" alt="" class="icon" />
  30. {{ itemData.stopTime }}截止
  31. </view>
  32. <wk-avatar
  33. v-if="itemData.mainUserId"
  34. :name="itemData.mainUser.realname"
  35. :avatar="itemData.mainUser.img"
  36. :size="12"
  37. class="avatar" />
  38. </view>
  39. </view>
  40. <text class="wk wk-close task-delete" @click="handleDelete" />
  41. </view>
  42. </template>
  43. <script>
  44. import { SetWorkChildTaskStatus } from 'API/oa/task'
  45. export default {
  46. name: 'ChildTaskItem',
  47. props: {
  48. itemData: {
  49. type: Object,
  50. required: true
  51. }
  52. },
  53. computed: {
  54. isOver() {
  55. return this.itemData.status === 5
  56. }
  57. },
  58. methods: {
  59. /**
  60. * 更改子任务状态
  61. */
  62. updateTaskStatus() {
  63. // this.$message.confirm('您确定要更改子任务的状态吗?').then(() => {
  64. // SetWorkChildTaskStatus({
  65. // taskId: this.itemData.taskId,
  66. // status: this.isOver ? 1 : 5
  67. // }).then(() => {
  68. // this.isOver = !this.isOver
  69. // }).catch()
  70. // }).catch();
  71. this.$emit('status', {
  72. taskId: this.itemData.taskId,
  73. status: this.isOver ? 1 : 5,
  74. index: this.index
  75. })
  76. },
  77. /**
  78. * 编辑子任务
  79. */
  80. handleEdit() {
  81. getApp().globalData.formBridge = {
  82. default: {
  83. name: this.itemData.name,
  84. mainUserId: [this.itemData.mainUser],
  85. stopTime: this.itemData.stopTime
  86. }
  87. }
  88. this.$Router.navigateTo({
  89. url: '/pages_task/add',
  90. query: {
  91. id: this.itemData.taskId,
  92. pid: this.itemData.pid
  93. }
  94. })
  95. },
  96. /**
  97. * 删除子任务
  98. */
  99. handleDelete() {
  100. this.$emit('delete', this.itemData.taskId)
  101. }
  102. }
  103. }
  104. </script>
  105. <style lang="scss" scoped>
  106. .child-task {
  107. @include left;
  108. margin: 10rpx 0;
  109. .task-main {
  110. flex: 1;
  111. display: flex;
  112. flex-direction: column;
  113. overflow: hidden;
  114. .top {
  115. width: 100%;
  116. @include left;
  117. .check-box {
  118. width: 36rpx;
  119. height: 36rpx;
  120. border: 1rpx solid #ccc;
  121. border-radius: 6rpx;
  122. overflow: hidden;
  123. margin-right: 25rpx;
  124. margin-top: 5rpx;
  125. @include center;
  126. &.over {
  127. background-color: $theme-color;
  128. border-color: $theme-color;
  129. }
  130. .icon {
  131. font-size: 26rpx;
  132. line-height: 1;
  133. color: white;
  134. }
  135. }
  136. .task-title {
  137. flex: 1;
  138. font-size: 30rpx;
  139. @include ellipsis;
  140. &.over {
  141. text-decoration: line-through;
  142. color: $gray;
  143. }
  144. }
  145. }
  146. .bottom {
  147. @include left;
  148. margin-top: 10rpx;
  149. padding-left: 50rpx;
  150. .task-time {
  151. font-size: 26rpx;
  152. color: $light;
  153. @include center;
  154. margin-right: 20rpx;
  155. .icon {
  156. width: 30rpx;
  157. height: 30rpx;
  158. margin-right: 10rpx;
  159. }
  160. }
  161. .avatar {
  162. width: 60rpx;
  163. height: 60rpx;
  164. }
  165. }
  166. }
  167. .task-delete {
  168. font-size: 32rpx;
  169. font-weight: bold;
  170. color: $light;
  171. margin-right: 30rpx;
  172. }
  173. }
  174. </style>