crm-mobile/pages_task/components/childTaskItem.vue

<template>
  <view class="child-task">
    <view class="task-main" @click="handleEdit">
      <view class="top">
        <!-- <view
					:class="{over: isOver}"
					class="task-checkbox"
					@click.stop="updateTaskStatus">
          <image
						v-if="isOver"
						:src="$static('images/oa/task-check.png')"
						alt
						class="icon" />
        </view> -->
        <view
          :class="{over: isOver}"
          class="check-box"
          @click.stop="updateTaskStatus">
          <text class="icon wk wk-check" />
        </view>
        <view :class="{over: isOver}" class="task-title">
          {{ itemData.name }}
        </view>
      </view>

      <view class="bottom">
        <view
          v-if="itemData.stopTime"
          class="task-time">
          <image :src="$static('images/icon/time.png')" alt="" class="icon" />
          {{ itemData.stopTime }}截止
        </view>
        <wk-avatar
          v-if="itemData.mainUserId"
          :name="itemData.mainUser.realname"
          :avatar="itemData.mainUser.img"
          :size="12"
          class="avatar" />
      </view>
    </view>
    <text class="wk wk-close task-delete" @click="handleDelete" />
  </view>
</template>

<script>
  import { SetWorkChildTaskStatus } from 'API/oa/task'

  export default {
    name: 'ChildTaskItem',
    props: {
      itemData: {
        type: Object,
        required: true
      }
    },
    computed: {
      isOver() {
        return this.itemData.status === 5
      }
    },
    methods: {
      /**
       * 更改子任务状态
       */
      updateTaskStatus() {
        // this.$message.confirm('您确定要更改子任务的状态吗?').then(() => {
        //   SetWorkChildTaskStatus({
        //     taskId: this.itemData.taskId,
        //     status: this.isOver ? 1 : 5
        //   }).then(() => {
        //     this.isOver = !this.isOver
        //   }).catch()
        // }).catch();
        this.$emit('status', {
          taskId: this.itemData.taskId,
          status: this.isOver ? 1 : 5,
          index: this.index
        })
      },

      /**
       * 编辑子任务
       */
      handleEdit() {
        getApp().globalData.formBridge = {
          default: {
            name: this.itemData.name,
            mainUserId: [this.itemData.mainUser],
            stopTime: this.itemData.stopTime
          }
        }
        this.$Router.navigateTo({
          url: '/pages_task/add',
          query: {
            id: this.itemData.taskId,
            pid: this.itemData.pid
          }
        })
      },

      /**
       * 删除子任务
       */
      handleDelete() {
        this.$emit('delete', this.itemData.taskId)
      }
    }
  }
</script>

<style lang="scss" scoped>
.child-task {
  @include left;
  margin: 10rpx 0;
  .task-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .top {
      width: 100%;
      @include left;
      .check-box {
        width: 36rpx;
        height: 36rpx;
        border: 1rpx solid #ccc;
        border-radius: 6rpx;
        overflow: hidden;
        margin-right: 25rpx;
        margin-top: 5rpx;
        @include center;
        &.over {
          background-color: $theme-color;
          border-color: $theme-color;
        }
        .icon {
          font-size: 26rpx;
          line-height: 1;
          color: white;
        }
      }
      .task-title {
        flex: 1;
        font-size: 30rpx;
        @include ellipsis;
        &.over {
          text-decoration: line-through;
          color: $gray;
        }
      }
    }

    .bottom {
      @include left;
      margin-top: 10rpx;
      padding-left: 50rpx;
      .task-time {
        font-size: 26rpx;
        color: $light;
        @include center;
        margin-right: 20rpx;
        .icon {
          width: 30rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
      }

      .avatar {
        width: 60rpx;
        height: 60rpx;

      }
    }
  }

  .task-delete {
    font-size: 32rpx;
    font-weight: bold;
    color: $light;
    margin-right: 30rpx;
  }
}
</style>