crm-mobile/pages_crm/components/detailSection/activityListItem.vue

<template>
  <view class="activity-list-item">
    <template v-for="(field, index) in fieldsMap[itemData.activityType]">
      <view
        :key="index"
        class="row-item">
        <text class="row-item__label">
          {{ getLabel(field) }}：
        </text>
        
        <view
          v-if="['products'].includes(field.fieldName)"
          class="row-item__content">
          <template v-if="getContent(field).length">
            <view
              v-for="(child, childIndex) in getContent(field)"
              :key="childIndex"
              :class="{ 'special': !!field.type }"
              @click="handleClick(field.type, child.id)">
              {{ childIndex == getContent(field).length - 1 && child.name || (child.name + '，') }}
            </view>
          </template>
        </view>
					
        <view
          v-else-if="['contractId'].includes(field.typeName)"
          class="row-item__content">
          <template v-if="getContent(field).length">
            <view
              :class="{ 'special': !!field.type }"
              @click="handleClick(field.type, itemData.content[field.typeName])">
              {{ getContent(field) || '' }}
            </view>
          </template>
        </view>
        
        <view
          v-else
          class="row-item__content">
          <view
            v-if="field.type && !field.disabled"
            class="special"
            @click="handleClick(field.type, itemData[field.idField] ? itemData[field.idField] : null)">
            {{ getContent(field) || '' }}
          </view>
          <view v-else>
            {{ getContent(field) || '' }}
          </view>
          
          <view
            v-if="getShowTag(field)"
            :style="{
              color: examineStautsObj.color,
              backgroundColor: examineStautsObj.bg
            }"
            class="tag">
            {{ examineStautsObj.label }}
          </view>
        </view>
      </view>
    </template>
    <!-- </view> -->
  </view>
  </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { isObject } from '@/utils/types'
	
  import moment from 'moment'
  
  export default {
    name: 'ActivityListItem',
    props: {
      itemData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        fieldsMap: {
          // 线索
          1: [
            { fieldName: 'name', name: '线索名称', type: 'leads' }
          ],
          // 客户
          2: [
            { fieldName: 'name', name: '客户名称', type: 'customer', idField: 'activityTypeId' },
            { fieldName: 'industry', name: '客户行业' },
            { fieldName: 'level', name: '客户级别' }
          ],
          // 联系人
          3: [
            { fieldName: 'name', name: '联系人名称', type: 'contacts', idField: 'activityTypeId' },
            { fieldName: 'post', name: '职务' },
            { fieldName: 'mobile', name: '手机' }
          ],
          // 产品
          4: [
            { fieldName: 'name', name: '产品名称', type: 'product' }
          ],
          // 商机
          5: [
            { fieldName: 'name', name: '商机名称', type: 'business', idField: 'activityTypeId' },
            { fieldName: 'money', name: '商机金额' },
            { fieldName: 'flowName', name: '商机状态组' },
            { fieldName: 'products', name: '相关产品', type: 'product' }
          ],
          // 合同
          6: [
            { fieldName: 'name', name: '合同名称', type: 'contract', idField: 'activityTypeId' },
            { fieldName: 'num', name: '合同编号' },
            { fieldName: 'money', name: '合同金额' },
            // { fieldName: 'timeLine', name: '合同有效期' }
          ],
          // 回款
          7: [
            { fieldName: 'name', name: '回款编号', type: 'receivables', idField: 'activityTypeId' },
            { fieldName: 'contractNum', name: '合同编号', type: 'contract', typeName: 'contractId' },
            { fieldName: 'num', name: '回款编号' },
            { fieldName: 'money', name: '回款金额' },
            { fieldName: 'returnTime', name: '回款日期' }
          ],
          // 日志
          8: [
            { fieldName: 'name', name: '日志名称', type: 'log', idField: 'activityTypeId' },
            { fieldName: 'content', name: '日志内容' }
          ],
          // 审批
          9: [
            { fieldName: 'name', name: '审批名称', type: 'examine', idField: 'activityTypeId' },
            { fieldName: 'type', name: '审批类型' },
            { fieldName: 'content', name: '' },
            { fieldName: 'endAddress', name: '出差地点' },
            { fieldName: 'duration', name: '出差总天数' },
            { fieldName: 'timeLine', name: '起止时间' }
          ],
          // 日程
          10: [
            { fieldName: 'name', name: '日程内容' },
            { fieldName: 'type', name: '日程类型' },
            { fieldName: 'timeLine', name: '起止时间' }
          ],
          // 任务
          11: [
            { fieldName: 'name', name: '任务名称', type: 'task', idField: 'activityTypeId' },
            { fieldName: 'ownerUser', name: '负责人' },
            { fieldName: 'timeLine', name: '起止时间' },
            { fieldName: 'tasks', name: '子任务', type: 'task', disabled: true }
          ],
          // 发邮件
          12: [],
          // 回款计划
          14: [
            { fieldName: 'name', name: '计划回款期数', type: 'receivablesPlan', idField: 'activityTypeId', disabled: true },
            { fieldName: 'contractNum', name: '合同编号', type: 'contract', typeName: 'contractId' },
            { fieldName: 'money', name: '计划回款金额' },
            { fieldName: 'returnTime', name: '计划回款日期' }
          ]
        }
      }
    },
    computed: {
      ...mapGetters({
        calcStatus: 'base/calcStatus'
      }),
      
      contentData() {
        return this.itemData.content || {}
      },
      
      examineStautsObj() {
        if (!this.contentData.hasOwnProperty('checkStatus')) return {}
        return this.calcStatus(this.contentData.checkStatus)
      }
    },
    methods: {
      /**
       * 判断字段是否展示
       * @param field
       * @return {boolean}
       */
      getShow(field) {
        if (field.fieldName === 'timeLine') return true
        return this.contentData.hasOwnProperty(field.fieldName)
      },
			
      formatTime(time) {
        if (!time) return ''
        return moment(time).format('YYYY-MM-DD HH:mm')
      },
      
      /**
       * 获取字段名
       * @param field
       * @return {string}
       */
      getLabel(field) {
        if (
          this.itemData.activityType === 9 &&
          field.fieldName === 'content'
        ) {
          // type 审批类型 1 普通审批 2 请假审批 3 出差审批 4 加班审批 5 差旅报销 6 借款申请 0 自定义审批
          return {
            1: '审批内容',
            2: '请假原因',
            3: '出差原因',
            4: '加班原因',
            5: '差旅报销',
            6: '审批内容',
            0: '审批内容'
          }[this.contentData.type] || ''
        }
        return field.name
      },
      
      /**
       * 获取字段值
       * @param field
       * @return {string|*}
       */
      getContent(field) {
        if (
          field.fieldName === 'timeLine' &&
          (
            this.contentData.hasOwnProperty('startTime') ||
            this.contentData.hasOwnProperty('endTime')
          )
        ) {
          return `${this.contentData.startTime}~${this.contentData.endTime}`
        }
      
        if (
          this.itemData.activityType === 9 &&
          field.fieldName === 'type'
        ) {
          return {
            1: '普通审批',
            2: '请假审批',
            3: '出差审批',
            4: '加班审批',
            5: '差旅报销',
            6: '借款申请',
            0: '自定义审批'
          }[this.contentData.type]
        }

        if ([
          'tasks'
        ].includes(field.fieldName)) {
          return (this.contentData[field.fieldName] || [])
            .map(item => item.name)
            .join('、')
        }

        if ([
          'products'
        ].includes(field.fieldName)) {
          return this.contentData[field.fieldName] || []
        }

        if (field.fieldName === 'ownerUser') {
          const userData = this.contentData[field.fieldName]
          return isObject(userData) ? userData.realname : ''
        }

        return this.contentData[field.fieldName]
      },
      
      /**
       * 判断是否展示审批状态标签
       * @param {Object} field
       */
      getShowTag(field) {
        return field.fieldName === 'name' && this.contentData.hasOwnProperty('checkStatus')
      },
      
      /**
       * 点击跳转到详情
       * @param {Object} type
       * @param {Object} id
       */
      handleClick(type, id) {
        console.log('click', type, id)
        switch (type) {
        case 'examine': 
          this.$Router.navigateTo({
            url: `/pages_examine/detail`,
            query: {
              id: id
            }
          })
          return;
        case 'log':
          this.$Router.navigateTo({
            url: `/pages_log/detail`,
            query: {
              id: id
            }
          })
          return;
        case 'task':
          this.$Router.navigateTo({
            url: `/pages_task/detail`,
            query: {
              id: id
            }
          })
          return;
        }
        this.$Router.navigateTo({
          url: `/pages_crm/${type}/detail`,
          query: {
            id: id
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .activity-list-item {
		.activity-item {
			.user-info {
				margin-bottom: 20rpx;
					@include left;
					.avatar {
						width: 65rpx;
						height: 65rpx;
					}
					.info {
						flex: 1;
						margin-left: 16rpx;
						.username {
							font-size: $wk-font-base;
							color: #333;
							@include left;
							.dynamic-name {
								margin-left: 10rpx;
							}
						}
						.text {
							font-size: $wk-font-mini;
							color: $light;
						}
					}
					.category {
						font-size: $wk-font-mini;
						color: $light;
						background-color: #EEEEEE;
						border-radius: 5rpx;
						padding: 5rpx 15rpx;
					}
			}
		}
    .row-item {
      display: flex;
      align-items: flex-start;
			padding-left: 10rpx;
      justify-content: flex-start;
      font-size: $wk-font-base;
      
      .row-item__label {
        color: $gray;
      }
      
      .row-item__content {
        @include left;
				flex-wrap: wrap;
				flex: 1;
        .special {
          color: $theme-color;
        }
        .tag {
          margin-left: 10rpx;
          padding: 5rpx 10rpx;
          border-radius: 4rpx;
          font-size: $wk-font-sm;
          float: right;
        }
      }
    }
  }
</style>