yos_web/src/components/normal-basic-layout/details/modules/followUp/followUp.vue

<template>
  <div class="normal-panel follow__panel normal-margin">
    <div class="container flex-align-center flex-between">
      <p>跟进动态</p>
      <addLog :ownertable="ownertable" @onSuccess="queryLogs"></addLog>
    </div>
    <div  class="container">
      <div v-if="logList.length === 0">
        <el-empty description="暂无记录"></el-empty>
      </div>
      <div>
        <el-timeline>
          <el-timeline-item
            v-for="i in logList" :key="i.index"
            :timestamp="i.createdate">
              <div slot="dot" class="dot"></div>
              <div class="step__panel normal-margin">
                <div class="flex-align-stretch flex-between normal-margin">
                  <p><small>跟进人:</small>{{i.changeby}}</p>
                  <small style="color:#999">{{i.createdate}}</small>
                </div>
                <div class="follow-progress">
                  <p style="margin-bottom:5px;font-size:14px">{{i.content}}</p>
                  <div class="flex-align-center" style="margin-bottom:5px">
                    <previewImage v-show="checkFileType(img.postfix) === 'img'" style="width:80px;height:80px;margin-left:5px" v-for="img in i.attinfos" :key="img.index" :image="img" :deletebtn="true" @onSuccess="queryLogs"></previewImage>
                  </div>
                  <div v-show="checkFileType(file.postfix) === 'file'"  class="flex-align-center pionter" style="margin-bottom:10px;" v-for="file in i.attinfos" :key="file.index">
                    <a class="file__link" :href="file.url">{{file.document}}</a>
                    <i style="color:red;" class="el-icon-delete" @click="deleteFile(file)"></i>
                  </div>
                  <div style="text-align:right">
                    <upload class="inline-16" slot="upload" 
                      :folderid="folderid"
                      btntype="icon"
                      :bindData="{ ownertable: 'sys_datafollowup', ownerid: i.sys_datafollowupid,usetype: 'default' }"
                      @onSuccess="queryLogs">
                    </upload>
                    <el-button size="small" type="text" @click="deleteLogs(i)">删 除</el-button>
                  </div>
                </div>
              </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
import upload from '@/components/upload/hw_obs_upload.vue'
import previewImage from '@/components/previewImage/index.vue'

import addLog from './addLog.vue'
export default {
  props:['ownertable'],
  components:{
    addLog,
    upload,
    previewImage
  },
  data () {
    return {
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      logList:[]
    }
  },
  methods:{
    async queryLogs() {
      const res = await this.$api.requested({
        "id": 20220930121501,
        "content": {
            "ownertable":this.ownertable,
            "ownerid":this.$route.query.id
        }
      })
      this.logList = res.data
    },
    async deleteLogs (val) {
      const res = await this.$api.requested({
        "id": 20220930121701,
        "content": {
          "sys_datafollowupid":val.sys_datafollowupid
        }
      })
      this.tool.showMessage(res,()=>{
        this.queryLogs()
      })
    },
    checkFileType (type) {
      let arr = ['JPG','JPEG','PNG']
      if (arr.includes(type.toUpperCase())) {
        return 'img'
      } else {
        return 'file'
      }
    },
    async deleteFile (row) {
      const res = await this.$api.requested({
        "classname": "system.attachment.Attachment",
        "method": "deleteFileLink",
        "content": {
          "linksids":[row.linksid]
        }
      })
      this.tool.showMessage(res,()=>{
        this.queryLogs()
      })
    }
  },
  mounted () {
    this.queryLogs()
  },
  watch: {
    $route () {
      this.queryLogs()
    }
  }
}

</script>
<style>
.el-step__description{
  padding-right:0px !important;
}
</style>
<style scoped>
.step__panel{
  background-color: #eff4ff;
  padding: 16px;
  border-radius: 5px;
  color:#666
}
.follow-progress{
}
.file__link{
  color:#999;
  font-size: 12px;
  padding: 0 5px;
  display:block;
  width: 100%;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}
.pionter{
  cursor: pointer;
}
.sticky{
  position: sticky;
  top:0px;
  /* background: #fff; */
  z-index: 9999;
}
.dot{
  background:#fff;height:10px;width:10px;border-radius:100%;border:2px solid #3874F6;
}
</style>