yos_web/src/HManagement/clueManage/clue_private/modules/detail.vue

<template>
  <div>
    <basicDetails
        ref="details"
        :titleText="mainData.enterprisename_customer"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        turnPageId="20221101094302"
        delApiId="20221101100502"
        idname="sat_orderclueid"
        :tabs="['跟进记录','详细信息']"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)">
      <div slot="tags">
      </div>
      <div slot="customOperation">
        <edit class="inline-16" :data="mainData" @onSuccess="queryMainData" v-if="tool.checkAuth($route.name,'update') && mainData.allocationstatus == '待分配'"/>
        <distobutionOne v-if="tool.checkAuth($route.name,'oneDistribution') && mainData.allocationstatus == '待分配'" @onSuccess="$store.dispatch('changeDetailDrawer',false),$router.back()" />
        <recall class="inline-16" v-if="mainData.allocationstatus != '待分配' && mainData.status === '待跟进' || mainData.status === '跟进中' && mainData.isTeam !== '团队' && tool.checkAuth($route.name,'recall')" :data="mainData" @onSuccess="queryMainData"></recall>
      </div>
      <div slot="slot1" class="container normal-panel">
        <BaseInfo :detailInfo="detailInfo"/>
      </div>
      <div slot="slot0" class="container normal-panel">
        <el-descriptions>
          <div slot="title">跟进记录 &nbsp;<i @click="followRecord(param.content.sort[0].reversed = param.content.sort[0].reversed == 1 ? 0 : 1)" :class="param.content.sort[0].reversed == 1?'fa fa-sort-amount-asc':'fa fa-sort-amount-desc'"></i></div>
        </el-descriptions>
        <div class="flex-align-center normal-margin">
          <p>日期:&nbsp;</p>
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            size="small"
            @change="dateChange"
            clearable>
          </el-date-picker>
        </div>
        <div class="detail" v-if="recordlist.length > 0">
          <div class="item" v-for="(item,index) in recordlist" :key="index">
            <p>{{index + 1}}.{{item.createdate}},&nbsp;由<span style="font-weight:bold;margin:0 6px;font-size:13px">{{item.createby}}</span>开始跟进,跟进方式:<span style="font-weight:bold;margin:0 5px">{{item.followupmode}}</span>,{{handleTxt[item.logtype]}}</p>
            <div class="content">
              <div style="margin-bottom:10px">
                <p v-if="item.competitor">已购买品牌:{{item.competitor}}</p>
                {{item.content}}
              </div>
              <file-item 
                :marginRight="10"
                :rowCount="5"
                :isDownLoad="true" 
                :fileData="item.attinfo">
              </file-item>
            </div>
          </div>
        </div>
        <el-empty title="暂无数据" v-else></el-empty>
        <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>
    </basicDetails>
  </div>
</template>

<script>
import BaseInfo from '@/HDrpManagement/projectChange/modules/modules/baseInfo/baseInfo'
import recall from './recall.vue'
import edit from './edit'
import distobutionOne from './distobutionOne'
import FileItem from '@/SManagement/orderclue/components/file/index2'
export default {
  name: "detail",
  data() {
    return {
      mainData:{},
      mainAreaData:{},
      detailInfo:{},
      recordlist:[],
      isdesc:1,
      value2:'',
      dateParam:{
        "start": "",
        "end": ""
      },
      param: {
        "id":20221101094602,
        "content": {
          "pageNumber":1,
          "pageSize":20,
          "sat_orderclueid": this.$route.query.id,
          "where": this.dateParam,
          "sort": [
            {
              "reversed":0,
              "sorted":1,
              "sortid":0,
              "sortname":'默认'
            }
          ]
        }
      },
      handleTxt:{
        '跟进中':'跟进内容',
        '成交':'成交操作，添加备注',
        '丢单':'丢单操作，具体原因如下',
        '无效':'无效操作，具体原因如下',
      },
      total:0
    }
  },
  components:{
    BaseInfo,recall,edit,distobutionOne,FileItem
  },
  methods:{
    async followRecord () {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.orderclue.publicclue.PublicClue",
        "method": "getFollowList",
        "content": {
          "sat_orderclueid": this.$route.query.id,
          "isdesc": this.isdesc,
          "where": this.dateParam
        }
      })
      this.recordlist = res.data
    },
    dateChange (val) {
      if (!val) {val = []}
      this.dateParam.start = val[0]
      this.dateParam.end = val[1]
      this.followRecord()
    },
    async queryMainData(id) {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.orderclue.publicclue.PublicClue",
        "method": "selectDetail",
        "content": {
            "sat_orderclueid": this.$route.query.id

        }
      })
      this.mainData = res.data
      console.log(this.mainData);
      
      this.changeDataStructure()

      this.$refs['details'].$refs['group'].queryGroup()

    },
    changeDataStructure() {
      let that = this
      this.mainAreaData = [
          {
          label:'客户名称',
          value:this.mainData.enterprisename_customer
        },
        {
          label:'联系人',
          value:this.mainData.name
        },
        {
          label:'手机号',
          value:this.mainData.phonenumber
        },
        {
          label:'来源',
          value:this.mainData.cluesource
        },
        {
          label:'市场活动',
          value:this.mainData.campaign_name
        },
        {
          label:'负责人',
          value:this.mainData.allocationstatus === '已分配'?this.mainData.leader[0].name:'--'
        },
        {
          label:'所属经销商',
          value:this.mainData.enterprisename
        },
        {
          label:'跟进状态',
          value:this.mainData.status,
          style:function () {
            let style = {}
            switch (that.mainData.status) {
              case '已过期':
                style = {color:'#999999'}
                break;
              case '跟进中':
                style = {color:'#52c41a'}
                break;
              case '待跟进':
                style = {color:'#3874f6'}
                break;
              case '已转化':
                style = {color:'#fa8c16'}
                break; 
              case '已无效':
                style = {color:'#333333'}
                break; 
              default:
                break;
            }
            return style
            
          }
        },
        {
          label:'分配状态',
          value:this.mainData.allocationstatus,
          style:function () {
            let style = {}
            switch (that.mainData.allocationstatus) {
              case '已分配':
                style = {color:'#333333'}
                break;
              case '待分配':
                style = {color:'#3874f6'}
                break;
              default:
                break;
            }
            return style
          }

        },
      ]
      this.detailInfo = {
        baseInfo: [
          {
            label:'客户名称',
            value:this.mainData.name
          },
          {
            label:'手机号',
            value:this.mainData.phonenumber
          },
          {
            label:'省市县',
            value:`${this.mainData.province}-${this.mainData.city}-${this.mainData.county}`
          },
          {
            label:'地址',
            value:this.mainData.address
          },
          {
            label:'来源',
            value:this.mainData.cluesource
          },
          {
            label:'负责人',
            value:this.mainData.allocationstatus === '已分配'?this.mainData.leader[0].name:'--'
          },
          {
            label:'备注',
            value:this.mainData.notes
          },
          {
            label:'所属经销商',
            value:this.mainData.enterprisename
          },
          {
            label:'跟进状态',
            value:this.mainData.status,
            style:function () {
              let style = {}
              switch (that.mainData.status) {
                case '已过期':
                  style = {color:'#999999'}
                  break;
                case '跟进中':
                  style = {color:'#52c41a'}
                  break;
                case '待跟进':
                  style = {color:'#3874f6'}
                  break;
                case '已转化':
                  style = {color:'#fa8c16'}
                  break;
                case '已无效':
                  style = {color:'#333333'}
                  break;
                default:
                  break;
              }
              return style

            }
          },
          {
            label:'分配状态',
            value:this.mainData.allocationstatus,
            style:function () {
              let style = {}
              switch (that.mainData.allocationstatus) {
                case '已分配':
                  style = {color:'#333333'}
                  break;
                case '待分配':
                  style = {color:'#3874f6'}
                  break;
                default:
                  break;
              }
              return style
            }

          },
          /*{
            label:'转手次数',
            value:this.mainData.enterprisename
          },*/
        ],
        systemInfo: [
          {label:'创建人',value:this.mainData.createBy},
          {label:'分配人',value:this.mainData.assignedBy},
          {label:'最近跟进人',value:this.mainData.followBy},
          {label:'转移人',value:this.mainData.changeBy},
          {label:'最近编辑人',value:this.mainData.editBy},
          {label:'创建时间',value:this.mainData.createDate},
          {label:'分配时间',value:this.mainData.assignedDate},
          {label:'最近跟进时间',value:this.mainData.followDate},
          {label:'最近转移时间',value:this.mainData.changeDate},
          {label:'最近编辑时间',value:this.mainData.editDate},
        ]
      }
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex) {
      this.flag = false
      this.$router.replace({path:'/clueDetail_private',query:{id:id,rowindex:rowindex}})
      this.queryMainData(id)
    },
    async followRecord () {
      this.param.content.sat_orderclueid = this.$route.query.id
      this.param.content.where = this.dateParam
      const res = await this.$api.requested(this.param)
      this.total = res.total
      this.param.content.sort = res.sort
      this.recordlist = res.data
      this.recordlist.forEach(item => {
        item.attinfo = this.fileType.fileList(item.attinfo)
      })
      console.log(this.recordlist);
      
    },
    dateChange (val) {
      console.log(val)
      if (!val) {val = []}
      this.dateParam.start = val[0]
      this.dateParam.end = val[1]
      this.followRecord()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.followRecord()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.followRecord()
    },
  },
  mounted () {
    this.queryMainData(this.$route.query.id)
  },
  created() {
    this.followRecord()
    
  }
}
</script>

<style scoped>
.content {
  margin: 10px 0 16px 0;
  background: #F2F2F2;
  padding: 16px;
  border-radius: 5px;
  font-size: 14px;
}
.detail {
  overflow-y: scroll;
  height: calc(100vh - 400px);
  padding-right: 10px;
}
</style>