crm-mobile/components/wk-audit-flow-item/wk-audit-flow-item.vue

<template>
  <view class="wk-audit-flow-item">
    <view class="audit-wrapper">
      <image
        v-if="user.userStr"
        :src="user.img"
        class="avatar" />
      <wk-avatar
        v-else
        :name="user.realname"
        :avatar="user.img"
        class="avatar" />
				
      <view class="audit-info">
        <view class="user">
          <view class="username">
            <text class="text">
              {{ user.realname }}
            </text>
            <text v-if="user.userStr" class="info">
              （{{ user.userStr }}）
            </text>
          </view>
          <view v-if="user.examineTime" class="check-time">
            {{ user.examineTime }}
          </view>
        </view>
				
        <view class="audit-status">
          <image :src="auditStatus[itemData.examineStatus].icon" alt="" class="icon" />
          <text class="text">
            {{ auditStatus[itemData.examineStatus].label }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {mapGetters} from 'vuex'
	
  export default {
    name: 'WkAuditFlowItem',
    props: {
      itemData: {
        type: Object,
        required: true
      },
      auditInfo: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        auditStatus: {
          0: {label: '待审核', icon: this.$static('images/audit/await.png')},
          1: {label: '通过', icon: this.$static('images/audit/pass.png')},
          2: {label: '拒绝', icon: this.$static('images/audit/refuse.png')},
          3: {label: '审核中', icon: this.$static('images/audit/await.png')},
          4: {label: '撤回', icon: this.$static('images/audit/cancel.png')},
          5: {label: '未提交', icon: this.$static('images/audit/create.png')},
          6: {label: '创建', icon: this.$static('images/audit/create.png')},
        },
      }
    },
    computed: {
			...mapGetters({
				calcAuditType: 'base/calcAuditType'
			}),
			user() {
				return this.calcUser()
			}
    },
    methods: {
      calcUser() {
        // if (this.itemData.flowId === 0) {
        // 	return this.auditInfo.createUser
        // } else {
        // }
        const status = Number(this.itemData.examineStatus) // 审核状态
        const userList = this.itemData.userList
				
        if (userList.length === 1) {
          return userList[0]
        } else {
          let userStr = userList.map(user => {
            return user.realname || user.username
          })
          return {
            img: this.$static('images/avatar.png'),
            realname: `${userList.length}人${this.getFlowAuditType(this.itemData)}`,
            userStr: userStr.join(',')
          }
        }
      },
			
      getFlowAuditType(flowItem) {
        return {
          1: '依次审批',
          2: '会签',
          3: '或签'
        }[flowItem.type] || ''
      },
    }
  }
</script>

<style scoped lang="scss">
	.wk-audit-flow-item {
		padding: 0 10rpx;
		
		.audit-wrapper {
			@include left;
			.avatar {
				width: 86rpx;
				height: 86rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			
			.audit-info {
				flex: 1;
				margin-left: 20rpx;

				.user {
					@include left;
					.username {
						flex: 1;
						font-size: 30rpx;
						overflow: hidden;
						@include left;
						.text {}
						.info {
							width: 0;
							flex: 1;
							font-size: 26rpx;
							color: $gray;
							@include ellipsis;
						}
					}
					.check-time {
						font-size: 24rpx;
						color: #999;
					}
				}
			
				.audit-status {
					margin-top: 10rpx;
					@include left;
					.icon {
						width: 36rpx;
						height: 36rpx;
						margin-right: 10rpx;
					}
					.text {
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>