yos_web/src/SManagement/orderclue_detail/components/followDetail.vue

<template>
  <div>
    <div class="select">
      <span class="demonstration">日期范围:</span>
      <time-select @clearSelect="clearSelect" @timeChange="timeChange"></time-select>
    </div>
    <div style="height:calc(100vh - 300px);overflow: auto;">
      <el-timeline v-if="follow.length > 0" style="margin: 10px" v-for="item in follow" :key="item.index">
        <el-timeline-item :timestamp="item.createdate" placement="top"  color="#409eff">
          <el-card class="card-border">
            <el-row>
              <el-col :span="16">
                <div class="avatar">
                  <img class="avatar__image" v-if="item.headpic" :src="item.headpic" alt="">
                  <p v-else>{{item.createby.substr(0, 1)}}</p>
                </div>
                <div style="float:left;margin-left: 10px!important;">
                  <p>{{ item.createby }}&nbsp;</p>
                  <small style="color:#999999ad;margin-top:10px">部门：{{ item.depname?item.depname:"--" }}&emsp;职位：{{ item.position?item.position:"--" }}</small>
                </div>
              </el-col>
              <el-col :span="8">
                <div style="float: right;">
                  <editFollow :data="item" @onSuccess="onSuccess" :disabled="disabled" v-if="!disabled "></editFollow>
                  <upload
                      v-if="!disabled"
                      class="inline-16"
                      ref="upload"
                      :folderid="folderid"
                      @onSuccess="onSuccess"
                      :id="item.sat_ordercluefollowuplogid"
                      :disabled="disabled"
                      type="button">
                  </upload>
                  <el-button size="small" type="text" @click="onDel(item.sat_ordercluefollowuplogid)" :disabled="disabled" v-if="!disabled">删除</el-button>
                </div>
              </el-col>
              <el-col :span="24">
                <div style="float: left;margin-top: 10px">
                  <p>跟进类型：{{item.followupmode}}</p>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="div-border">
                  {{item.content}}
                </div>
              </el-col>
              <el-col :span="24" >
                <div v-if="item.attinfo" style="margin-top: 20px;margin-bottom: -10px">
                  <file-item
                      :marginRight="10"
                      :rowCount="5"
                      :isDownLoad="true"
                      :fileData="item.attinfo"
                      :isDelete="!disabled"
                      @deleteSuccess="deleteFile">
                  </file-item>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <el-empty title="暂无数据" v-else></el-empty>
    </div>

    <div style="margin-top:16px;text-align:right">
      <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="param.content.pageNumber"
          :page-size="param.content.pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import FileItem from '../../orderclue/components/file/index2'
import upload from './uploadNew.vue'
import editFollow from './editFollow'
import TimeSelect from '@/SManagement/submitedit_one/components/TimeSelect'
export default {
  name: 'followDetail',
  props:['disabled'],
  data() {
    return {
      bindData:{},
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      param: {
        "id": "20221101094602",
        "version":1,
        "content": {
            "sat_orderclueid": this.$route.query.id,
            "isdesc": 1,
            "pageNumber":1,
            "pageSize":20,
            "where": {
                "start": "",
                "end": ""
            },
            "sort": [
              {
                "reversed":0,
                "sorted":1,
                "sortid":0,
                "sortname":'默认'
              }
            ]
        }
      },
      handleTxt:{
        '跟进中':'跟进内容',
        '成交':'成交操作，添加备注',
        '丢单':'丢单操作，具体原因如下',
        '无效':'无效操作，具体原因如下',
      },
      follow:[],
      timeArr:[],
      attinfo:[],
      total:0
    };
  },
  components:{ TimeSelect , FileItem,upload,editFollow},
  computed:{
  },
  watch:{
  },
  created() {
    this.getFollowDetail()
  },
  methods: {
    async getFollowDetail() {
      let res = await this.$api.requested(this.param)
      this.follow = res.data
      this.total = res.total
      this.follow.forEach(item => {
        item.attinfo = this.fileType.fileList(item.attinfo)
      })
      this.param.content.sort = res.sort
      console.log(this.follow,'follow');
      console.log(this.follow.length,'lengyh');

    },
    handleCurrentChange(n) {
      this.param.content.pageNumber = n
      this.getFollowDetail()
    },
    clearSelect() {
      this.param.content.where.start = ''
      this.param.content.where.end = ''
      this.param.content.pageNumber = 1
      this.getFollowDetail()
    },
    timeChange(result) {
      this.param.content.where.start = result[0]
      this.param.content.where.end = result[1]
      this.param.content.pageNumber = 1
      this.getFollowDetail()
    },
    sortFun() {
      this.param.content.sort[0].reversed = this.param.content.sort[0].reversed == 0 ? 1 : 0
      this.getFollowDetail()
    },
    deleteFile (data) {
      this.follow.forEach(item => {
        item.attinfo.forEach((item2,index) => {
          if(item2.linksid == data.linksid) {
            console.log(item2,data);

            item.attinfo.splice(index,1)
          }
        })
      })

    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.getFollowDetail()
    },
   /* handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.getFollowDetail()
    },*/
    onDel(id){
      this.$confirm('确定删除该跟进记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$api.requested({
          "id": 20221208112002,
          "content": {
            "sat_ordercluefollowuplogid":id
          }
        })
        this.tool.showMessage(res,()=>{
          this.getFollowDetail()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    onSuccess () {
      this.getFollowDetail()
    },
  },
};
</script>

<style scoped>
*{
  box-sizing: border-box;
}
  .select{
    display: flex;
    align-items: center;
  }
  .demonstration {
    font-size: 14px;
    margin-right: 10px;
  }
  .avatar__image{
    height: 100%;
    width: 100%;
  }
  .avatar:hover .avatar__model{
    display: block;
  }
  .avatar{
    position: relative;
    float: left;
    margin-left: 0px;
    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;
  }
  .card-border{
    background: #F2F2F2;
  }
  .card-border .div-border{
    background: #FFFFFF;
    margin-top: 20px;
    padding: 10px;
    width: 100%;
    height: 90px;
    border-radius: 5px;
  }
  /deep/.el-descriptions__header {
    margin-bottom: 0 !important;
  }
  /deep/.el-card__body {
    padding: 10px;
  }
</style>