crm-mobile/pages_task/components/taskItem.vue

<template>
  <view class="task-item" @click="handleDetail">
    <view class="wk-list-item">
      <view :style="{backgroundColor: prioritColor}" class="badge" />
			
      <view class="item-top">
        <view
          :class="{over: isOver}"
          class="checkbox"
          @tap.stop="changeTaskStatus">
          <text v-if="isOver" class="icon wk wk-check" />
        </view>
			
        <view class="item-content">
          <view class="item-title" :class="{'over': isOver}">
            <view>{{ itemData.taskName || itemData.name }}</view>
          </view>
        </view>
      </view>
			
      <view class="item-bottom">
        <view v-if="itemData.stopTime" class="item-bottom-left">
          <image :src="$static('images/icon/time.png')" alt class="img-icon" />
          <text
            :style="{color: (itemData.status === 2 && !itemData.isEnd) ? 'red' : ''}">
            {{ itemData.stopTime | formatTime }} 截止
          </text>
        </view>
        <view v-if="showCreate" class="item-bottom-left">
          <text>
            {{ itemData.createTime | formatTime }} 创建
          </text>
        </view>
        <view class="item-bottom-right">
          <view v-if="itemData.relationCount" class="bottom-icon">
            <image :src="$static('images/oa/link.png')" alt class="img-icon" />
            <text>{{ itemData.relationCount }}</text>
          </view>
          <view v-if="itemData.childAllCount" class="bottom-icon">
            <image :src="$static('images/oa/organization.png')" alt class="img-icon" />
            <text>{{ itemData.childWCCount }}/{{ itemData.childAllCount }}</text>
          </view>
          <view v-if="itemData.fileCount" class="bottom-icon">
            <image :src="$static('images/oa/path.png')" alt class="img-icon" />
            <text>{{ itemData.fileCount }}</text>
          </view>
          <view v-if="itemData.commentCount" class="bottom-icon">
            <image :src="$static('images/oa/task-comment.png')" alt class="img-icon" />
            <text>{{ itemData.commentCount }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import moment from 'moment'
	
  export default {
    name: 'TaskItem',
    filters: {
      formatTime(date) {
        if (!date) return ''
        return moment(date).format('YYYY-MM-DD')
      }
    },
    props: {
      itemData: {
        type: Object,
        required: true,
      },
      index: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {}
    },
    computed: {
      isOver() {
        return this.itemData.status === 5 // 1正在进行 2延期 5结束
      },
      prioritColor() {
        // 优先级列表
        const priorityData = [
          {id: 3, name: '高', color: '#E60000'},
          {id: 2, name: '中', color: '#FFA200'},
          {id: 1, name: '低', color: '#5DBC47'},
          {id: 0, name: '无', color: '#FFFFFF'},
        ]
        let findRes = priorityData.find(item => item.id === this.itemData.priority)
        if (findRes) return findRes.color
        return '#cccccc'
      },
			
      showCreate() {
        return !this.itemData.stopTime &&
          !this.itemData.relationCount &&
          !this.itemData.childAllCount &&
          !this.itemData.fileNum &&
          !this.itemData.commentCount
      }
    },
    methods: {
      /**
       * 转到任务详情
       */
      handleDetail() {
        this.$Router.navigateTo({
          url: '/pages_task/detail',
          query: {
            id: this.itemData.taskId
          }
        })
      },
			
      /**
       * 更改任务状态
       */
      changeTaskStatus() {
        this.$emit('status', {
          taskId: this.itemData.taskId,
          status: this.isOver ? 1 : 5,
          index: this.index
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	.task-item {
		position: relative;
		font-size: 24rpx;
		text-align: left;
		border-radius: 0;
		
		.wk-list-item::after {
			left: 0;
			width: 100%;
		}
		
		.item-top {
			display: flex;
			align-items: center;
		
			.checkbox {
				width: 40rpx;
				height: 40rpx;
				margin-right: 25rpx;
				border: 1rpx solid #ccc;
				border-radius: 6rpx;
				overflow: hidden;
				@include center;
				.icon {
					font-size: 28rpx;
					line-height: 1;
					color: white;
				}
				&.over {
					background-color: $theme-color;
					border-color: $theme-color;
				}
			}
		
			.item-content {
				display: flex;
				flex: 1;
				overflow: hidden;
				align-items: center;
				.item-title {
					flex: 1;
					color: $dark;
					font-size: 32rpx;
					overflow: hidden;
					margin-right: 20rpx;
					div {
						@include ellipsis;
					}
				}
				.over {
					text-decoration: line-through;
					color: $gray;
				}
			}
		}
		
		.item-bottom {
			padding-left: 60rpx;
			padding-top: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			color: $light;
			.item-bottom-left {
				@include left;
			}
			.item-bottom-right {
				flex: 1;
				@include left;
				.bottom-icon {
					margin-left: 18rpx;
					@include center;
				}
			}
			.img-icon {
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
		}
		
		.badge {
			position: absolute;
			top: 0;
			left: 0;
			width: 10rpx;
			height: 100%;
			border-top-left-radius: 10rpx;
			border-bottom-left-radius: 10rpx;
			overflow: hidden;
		}
	}
</style>