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

<template>
  <div class="normal-panel follow__panel" >
    <div class="container flex-align-center flex-between">
      <div>
        <slot name="collapse"></slot>
        <p class="inline-16">跟进动态</p>
      </div>
      <addLog :ownertable="ownertable" @onSuccess="queryLogs" :status="status"></addLog>
    </div>
    <div  class="container scroll" >
      <div v-if="logList.length === 0">
        <el-empty description="暂无记录" :image-size="40"></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-center " style="margin-bottom:10px" v-if="i.userextend.length > 0">
                  <!-- <p><small>跟进人:</small>{{i.changeby}}</p> -->
<!--                    <img height="30" width="30" :src="i.headpic" alt="">-->
                      <div class="avatar" >
                        <img class="avatar__image" v-if="i.headpic" :src="i.headpic" alt="">
                        <p v-else>{{i.userextend[0].name.substr(0, 1)}}</p>
                      </div>
                      <div style="margin-left: 10px">
                        <p>{{ i.userextend[0].name }}&nbsp;</p>
                        <small style="color:#999999ad;margin-top:10px">部门：{{ i.userextend[0].depname?i.userextend[0].depname:"--" }}&emsp;职位：{{ i.userextend[0].position?i.userextend[0].position:"--" }}</small>
                      </div>
<!--                  <div style="margin-left: 20px">
                    <small style="color:#999">{{i.createdate}}</small>
                  </div>-->

                </div>
                <div class="flex-align-center " style="margin-bottom:10px" v-else>
                  <!-- <p><small>跟进人:</small>{{i.changeby}}</p> -->
                  <!--                    <img height="30" width="30" :src="i.headpic" alt="">-->
                  <div class="avatar" >
                    <img class="avatar__image" v-if="i.headpic" :src="i.headpic" alt="">
                    <p v-else>{{i.createby.substr(0, 1)}}</p>
                  </div>
                  <div style="margin-left: 10px">
                    <p>{{ i.createby }}&nbsp;</p>
                    <small style="color:#999999ad;margin-top:10px">部门：{{"--" }}&emsp;职位：{{ "--" }}</small>
                  </div>
                  <!--                  <div style="margin-left: 20px">
                                      <small style="color:#999">{{i.createdate}}</small>
                                    </div>-->

                </div>
<!--                <div >
                  <span>{{i.userextend[0].name}}</span>
                  <span>
                    <small>部门:{{i.userextend[0].depname}}</small>
                    <small>职位:{{i.userextend[0].position}}</small>
                  </span>
                </div>-->
                <div class="follow-progress">
                  <p>{{i.content}}</p>
                  <div>
                    <!-- <previewImage v-show="checkFileType(img.postfix) === 'img'" style="width:60px;height:60px;margin-left:5px" v-for="img in i.attinfos" :key="img.index" :image="img" :deletebtn="true" @onSuccess="queryLogs"></previewImage> -->
                    <div class="flex-align-center flex-between pionter" v-for="img in i.attinfos" :key="img.index" style="padding:10px;margin-bottom:5px">
                      <div class="flex-align-center" style="flex:1;width:100%">
                        <img width="30" :src="checkFileType(img.postfix) === 'file'?require('@/assets/file_icons/file.svg'):img.url" class="inline-16" alt="">
                        <div class="file__link">
                          <a :href="img.url">{{img.document}}</a>
                          <p>{{(img.contentlength / 1024).toFixed(2)}}kb</p>
                        </div>
                      </div>
                      <i style="color:red;" class="el-icon-delete" v-if="nowUserid === i.createuserid" @click="deleteFile(img)"></i>
                    </div>
                  </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" v-if="nowUserid === i.createuserid">
                    <upload class="inline-16" slot="upload"
                      :folderid="folderid"
                      :status="status"
                      btntype="icon"
                      :bindData="{ ownertable: 'sys_datafollowup', ownerid: i.sys_datafollowupid,usetype: 'default' }"
                      @onSuccess="queryLogs">
                    </upload>
                    <editLog :status="status" :data="i" :ownertable="ownertable" @onSuccess="queryLogs"></editLog>
                    <el-button icon="el-icon-delete" size="mini" type="text" @click="deleteLogs(i)" :disabled="status === '已结案' || status === '已失败'">删 除</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'
import editLog from './editLog.vue'
export default {
  props:['ownertable','status'],
  components:{
    addLog,
    editLog,
    upload,
    previewImage
  },
  data () {
    return {
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      logList:[],
      nowUserid:''
    }
  },
  methods:{
    async queryLogs() {
      const res = await this.$api.requested({
        "id": 20220930121501,
        "content": {
            "ownertable":this.ownertable,
            "ownerid":this.$route.query.id
        }
      })
      this.logList = res.data
      console.log(this.logList,'跟进数据')
      console.log(this.logList.length,'数据')
    },
    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()
    this.nowUserid = JSON.parse(sessionStorage.getItem('active_account')).userid
  },
  watch: {
    $route () {
      this.queryLogs()
    }
  }
}

</script>
<style>
.el-step__description{
  padding-right:0px !important;
}
</style>
<style scoped>
.step__panel{
  background-color: #eff4ff;
  padding: 10px;
  border-radius: 5px;
  color:#666
}
.follow-progress p{
  width:100%;
  margin-bottom:5px;
  font-size:14px;
  word-wrap: break-word;
}
.file__link{
  color:#999;
  font-size: 12px;
  padding: 0 5px;
  display:block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pionter{
  margin:6px 0;
  padding: 10px;
  transition: .2s linear;
  cursor: pointer;
  border-radius: 5px;
  background: #ffff;
}
.pionter:hover{
  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
.sticky{
  position: sticky;
  top:0px;
  /* background: #fff; */
  z-index: 9999;
}
.dot{
  background:#fff;height:10px;width:10px;border-radius:100%;border:2px solid #3874F6;
}
.normal-panel{
  border-radius: 5px;
}
.avatar__image{
  height: 100%;
  width: 100%;
}
.avatar:hover .avatar__model{
  display: block;
}
.avatar{
  position: relative;
  height:40px;
  width: 40px;
  margin-bottom: 5px;
  border-radius: 100%;
  text-align: center;
  line-height: 40px;
  color:#fff;
  font-weight: 500;
  background: #3874F6;
  cursor: pointer;
  overflow: hidden;
}
.scroll{
  height: 410px;
  overflow: auto;
}
.scroll::-webkit-scrollbar-thumb { /*滚动条滑块*/
  border-radius: 10px;
  background-color: #CACACA;
}
.flex-wrap{
  flex-wrap: wrap
};
</style>