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

<template>
  <div class="normal-panel follow__panel" id="containerFull">
    <div class="container flex-align-center flex-between">
      <div>
        <slot name="collapse"></slot>
        <p class="inline-16">{{$t(`跟进动态`)}}</p>
      </div>
      <div style="display: flex;justify-content: space-between">
        <fullScreen class="inline-16" domId="containerFull" @onFull="onFull" @backFull="backFull"></fullScreen>
        <addLog :ownertable="ownertable" @onSuccess="queryLogs" :status="status"></addLog>
      </div>
    </div>
    <div  class="container" >
      <div v-if="logList.length === 0">
        <el-empty description="暂无记录" :image-size="40"></el-empty>
      </div>
      <div :style="{overflow: isFull?'auto':'none',height:isFull?(windowHeight - 100) + 'px':''}">
        <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">{{$t(`部门`)}}：{{ i.userextend[0].depname?i.userextend[0].depname:"--" }}&emsp;{{$t(`职位`)}}：{{ 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">{{$t(`部门`)}}：{{"--" }}&emsp;{{$t(`职位`)}}：{{ "--" }}</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>{{$t('部门')}}:{{i.userextend[0].depname}}</small>
                    <small>职位:{{i.userextend[0].position}}</small>
                  </span>
                </div>-->
                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
                  <span>{{$t(`跟进类型`)}}：{{i.type}}</span>
                </div>
                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
                  <span>{{$t(`跟进对象`)}}：</span>
                  <span v-for="item in i.contacts" :key="item.index">
                    <span v-if="item.rowindex === i.contacts.length">
                      {{item.name}}
                    </span>
                    <span v-else>
                       {{item.name + ','}}
                    </span>

                  </span>
                </div>
                 <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
                  <span>{{$t(`目的`)}}：{{i.target}}</span>
                </div>
                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
                  <span>{{$t(`过程`)}}：{{i.content}}</span>
                </div>
                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
                  <span>{{$t(`结果`)}}：{{i.results}}</span>
                </div>
                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
                  <span>{{$t(`下次跟进计划`)}}：{{i.nextplan}}</span>
                </div>
                <div v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
                  <span>{{$t(`营销费用`)}}：</span>
                  <span v-if="i.salesfeesamount || i.salesfeesamount == 0">
                    <span style="color: red">¥ </span>
                      <span style="font-size: 12px;color: red">{{tool.formatAmount(i.salesfeesamount,2)}}</span>
                  </span>
                  <span v-else>--</span>
                </div>
                <div v-if="$route.path === '/projectChangeDetail'">
                  <marketingExpenses  class="inline-16" ownertable="sa_project" :ownerid="i.sys_datafollowupid" :dataTime="i.createdate" :userid="i.createuserid" @onSuccess="onSuccess"></marketingExpenses>
                </div>
                <div v-if="$route.path === '/customerDetail'">
                  <marketingExpenses  class="inline-16" ownertable="sa_customers" :ownerid="i.sys_datafollowupid" :dataTime="i.createdate" :userid="i.createuserid" @onSuccess="onSuccess"></marketingExpenses>
                </div>
                <div v-if="$route.path === '/PublicCustomerDetail'">
                  <marketingExpenses  class="inline-16" ownertable="sa_customers" :ownerid="i.sys_datafollowupid" :dataTime="i.createdate" :userid="i.createuserid" @onSuccess="onSuccess"></marketingExpenses>
                </div>
                <div class="follow-progress">
                  <p v-if="$route.path !== '/projectChangeDetail' && $route.path !== '/customerDetail' && $route.path !== '/PublicCustomerDetail'">{{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" ref="edits" :data="i" :ownertable="ownertable" @onSuccess="queryLogs"></editLog>
                    <el-popconfirm
                        :confirm-button-text="$t('确定')" :cancel-button-text="$t('取消')"
                        :title="$t('确定删除该跟进动态吗')+'？'"
                        @confirm="deleteLogs(i)"
                    >
                      <el-button slot="reference" icon="el-icon-delete" size="mini" type="text" :disabled="status === '已结案' || status === '已失败'">{{$t(`删 除`)}}</el-button>
                    </el-popconfirm>

                  </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 fullScreen from "@/views/salesData/components/fullScreen";
import addLog from './addLog.vue'
import editLog from './editLog.vue'
import marketingExpenses from '@/components/marketingExpenses/index'
export default {
  props:['ownertable','status'],
  components:{
    addLog,
    editLog,
    upload,
    previewImage,
    fullScreen,
    marketingExpenses
  },
  data () {
    return {
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      logList:[],
      nowUserid:'',
      ownertableNew:'',
      owneridNew:'',
      isFull:false,
      windowHeight: window.innerHeight,  //实时屏幕高度
    }
  },
  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 queryLogsNew(ownertable,ownerid) {
      this.owneridNew = ownerid
      this.ownertableNew = ownertable
      const res = await this.$api.requested({
        "id": 20220930121501,
        "content": {
          "ownertable":this.ownertableNew,
          "ownerid":this.owneridNew
        }
      })
      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()
      })
    },
    /*全屏*/
    onFull(){
      this.heightChart = this.windowWidth > 1128 ? 'calc(100vh - 85px)':'calc(100vh - 115px)'
      this.isFull = true
    },
    /*退出全屏*/
    backFull(val){
      this.heightChart = '100%'
      this.isFull = false
      this.$emit('backFull',val)
    },
    onSuccess(){
      this.queryLogs()
      this.$emit('logSuccess')
    }
  },
  mounted () {
    this.queryLogs()
    console.log(this.windowHeight,'windowHeight高度')
    this.nowUserid = JSON.parse(sessionStorage.getItem('active_account')).userid

    var that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        that.windowHeight = window.fullHeight; // 高
      })()
    };
  },
  watch: {
    $route () {
      this.queryLogs()
    },
    windowHeight (val) {
      console.log("实时屏幕高度：",val );
      console.log(this.windowHeight)
    }
  }
}

</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>