element,循环数据的使用

<!--
 * @Author: ljw
 * @LastEditors: ljw
 * @Date: 2019-11-05 15:11:39
 * @LastEditTime: 2019-11-09 13:00:49
 * @Description: 服务记录详情的变更记录Item
 -->
<template>
  <div v-loading="addLoading" class="item-box">
    <!-- <h3 class="title">变更记录</h3> -->
    <div>
      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="(item, index) in listhis"
          :key="index"
          placement="top">
          <p class="time-line-p">{{ item.updatetimestamp | utcDateConvert('YYYY-MM-DD HH:mm') }}</p>
          <p class="time-line-p">
            <span v-if="item.lastobjid === '' " >{{ item.createdby_value }}</span>
             <span v-if="item.lastobjid !== '' ">{{ item.updateby_value }}</span>
            &nbsp;&nbsp;
            <span v-if="item.lastobjid === '' " >新增了服务记录:</span>
            <span v-if="item.lastobjid !== '' ">修改了服务记录:</span>
            <span v-if="item.lastobjid !== '' " class="toLink" @click="showContent(item, index)"> 查看详情</span>
          </p>
        </el-timeline-item>
      </el-timeline>
    </div>
    <!-- 2. 上传附件弹窗 -->
    <el-dialog v-loading="contentLoading" :visible.sync="contentVisible" title="变更记录详情" class="contentDialog" width="70%">
      <DetailInfo :data="contentData"/>
    </el-dialog>
  </div>
</template>

<script>
import { fetchPost } from 'sinitek-eccrm/src/api/mvcquery'
import DetailInfo from './detailInfo'
export default {
  components: {
    DetailInfo
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    queryId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      addLoading: false,
      listhis: [],
      contentVisible: false,
      contentLoading: false,
      contentData: {},
      listQuery: {
        total: 0,
        page: 1,
        limit: 10
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.getListhis()
    }, 300)
  },
  methods: {
    getListhis() {
      if (this.queryId) {
        this.addLoading = true
        const orderBy = 'createtimestamp desc'
        // fetchPost('activitylog/list', [`activity_id=${this.queryId}`, `viewid=469`], this.listQuery, orderBy)
        fetchPost('activity/getactivityhis', [`objid=${this.queryId}`])
          .then(result => {
            this.addLoading = false
            this.listhis = (result.data.value) || []
          }).catch(err => {
            this.addLoading = false
            this.$notify.error({ title: '错误', message: err.msg })
          })
      }
    },
    showContent(item, key) {
      this.contentVisible = true
      this.contentLoading = true
      const url = 'activity/getactivityhisDetail'
      fetchPost(url, [`objid=${item.objid}`]).then(result => {
        this.contentLoading = false
        this.contentData = result.data
      }).catch(err => {
        this.contentLoading = false
        this.$notify.error({ title: '错误', message: err.msg })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item-box{
  background: #fff;
  margin-bottom: 20px;
  .contentDialog{
    /deep/.el-dialog{
      width: 950px;
    }
  }
  /deep/.el-timeline{
    padding-left: 0;
  }
  .time-line-p{
    margin: 0 0 10px 0;
  }
}
</style>