crm_pc/src/componentView/CustomerDetail.vue

<template>
<div style="padding-bottom:20px;">
  <el-row :gutter="5">
    <el-col :span="8">


      <el-card class="box-card">
        <div slot="header" class="clearfix">

           <el-row :gutter="10" style="font-size:20px;font-weight:bold">
              <el-col :span="8">
                <span style="float:right">客户名称：</span>
              </el-col>
              <el-col :span="16">
                <span>{{customerCard.customerName}}</span>
              </el-col>
          </el-row>
           
        </div>

        <div>
       
            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">所属集团：</span>
              </el-col>
              <el-col :span="16">
                <span class="cust-card-ct">{{customerCard.groupName}}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">客户状态：</span>
              </el-col>
              <el-col :span="16">
                <span class="cust-card-ct">{{customerCard.customeStatusName}}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">客户等级：</span>
              </el-col>
              <el-col :span="16">
                <span class="cust-card-ct">{{customerCard.customeLevelName}}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">社会信用代码：</span>
              </el-col>
              <el-col :span="16">
                <span class="cust-card-ct">{{customerCard.scode}}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">客户区域：</span>
              </el-col>
              <el-col :span="16">
                <span class="cust-card-ct">{{customerCard.rangeName }}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">客户省份：</span>
              </el-col>
              <el-col :span="16">
                <span class="cust-card-ct">{{customerCard.province }}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">客户地址：</span>
              </el-col>
              <el-col :span="16">
                <span class="cust-card-ct">{{customerCard.address }}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">负责人：</span>
              </el-col>
              <el-col :span="16">
                <span class="cust-card-ct">{{customerCard.directorName }}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">创建人：</span>
              </el-col>
              <el-col :span="16">
                <span class="cust-card-ct">{{customerCard.createrName }}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">创建日期：</span>
              </el-col>
              <el-col :span="16">
                <span class="cust-card-ct">{{customerCard.createtime }}</span>
              </el-col>
            </el-row>

            <el-row :gutter="10" class="cust-card-row">
              <el-col :span="8">
                <span class="cust-card-tt">备注：</span>
              </el-col>
              <el-col :span="16">
                <span class="cust-card-ct">{{customerCard.remark }}</span>
              </el-col>
            </el-row>
   
        </div>
        <!-- <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div> -->
      </el-card>
 
    </el-col>
    <el-col :span="16">

        <div class="search">

       
                <el-select v-model="tableObj.getdataListParm.parammaps.businessName" placeholder="业务" class="filter-item" style="width: 120px;" clearable filterable>
                  <el-option v-for="(item,index) in businessNameList" :key="index" :label="item.name" :value="item.id" />
                </el-select>

                <el-date-picker v-model="tableObj.getdataListParm.parammaps.inputDatetime" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;" />



                 <el-input v-model="tableObj.getdataListParm.parammaps.directorName" placeholder="负责人" style="width: 180px;" class="filter-item" clearable />

                <el-select v-model="tableObj.getdataListParm.parammaps.customeStatus" placeholder="客户状态" class="filter-item" style="width: 120px;" clearable>
                  <el-option v-for="(item,index) in customeStatusList" :key="index" :label="item.name" :value="item.id" />
                </el-select>

                <el-input v-model="tableObj.getdataListParm.parammaps.beginMoney" placeholder="金额" style="width:80px"></el-input>
                -
                <el-input v-model="tableObj.getdataListParm.parammaps.endMoney" placeholder="金额" style="width:80px"></el-input>

                <el-button class="successBorder" @click="form_search">查询</el-button>
                <el-button class="successBorder" @click="form_clear">重置</el-button>

        </div>
        <div>
          <el-divider></el-divider>
   
          <div class="block" style="height:320px;overflow:auto">

            <el-timeline>

              <el-timeline-item type="success" color="#409EFF" size="large" :timestamp="item.date" placement="top" v-for="item in customerResumeList"   class = "cust-line-bx">

                <div style="position: absolute;top:0px;right:0px;">
                  <span>负责人：</span>
                  <span>{{item.directorName}}</span>
                </div>

                <el-card>
                 
                      <div class = "cust-ex-item">
                        <span class = "cust-ex-tt">业务：</span>
                        <span class = "cust-ex-ct">{{item.businessName}}</span>
                      </div>
                      <div class = "cust-ex-item">
                        <span class = "cust-ex-tt">状态：</span>
                        <span class = "cust-ex-ct">{{item.customeStatus}}</span>
                      </div>
                      <!-- <div class = "cust-ex-item">
                        <span class = "cust-ex-tt">详情：</span>
                        <span class = "cust-ex-ct">{{item.businessName}}</span>
                      </div> -->
                      <div class = "cust-ex-item">
                        <span class = "cust-ex-tt">待付金额（元）：</span>
                        <span class = "cust-ex-ct">{{item.paidPrice}}</span>
                      </div>
                      <div class = "cust-ex-item">
                        <span class = "cust-ex-tt">支付状态：</span>
                        <span class = "cust-ex-ct">{{item.payStatus}}</span>
                      </div>
                    
              
                </el-card>
              </el-timeline-item>

            </el-timeline>
          </div>
          <el-divider></el-divider>


          <div>
            <div class = "cust-rest">
              <span>待付总金额（元）：</span>
              <span>{{sunPrice.planPaySumMoney}}</span>
            </div>
            <div class = "cust-rest">
              <span>已付金额（元）：</span>
              <span>{{sunPrice.payMoney}}</span>
            </div>
            <div class = "cust-rest">
              <span>未付金额（元）：</span>
              <span>{{sunPrice.planPayMoney}}</span>
            </div>
          </div>
      

        </div>
      

    </el-col>
  </el-row>
</div> 
</template>
<script>
 

import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import Pagination from '@/components/Pagination'
import { MessageBox } from 'element-ui'
import { getToken } from '@/utils/auth'

export default {
  name: 'CustomerDetail',
  props: {
    customerData: {
      type: Object,
      required: true
    } 
  },
  data() {
    return {

      customerCard: {
          // "address":"1","createrId":"3072707379235128328","createrName":"管理员","createtime":"2022-05-11","customeLevelName":"2级","customeStatusName":"欠款客户","customerName":"测试12","directorId":24,"directorName":"康亮","enable":1,"groupId":207,"groupName":"星连星牧业","id":1425,"province":"1","rangeName":"西北区域","remark":"","scode":"123456789012345678" 
      }, 
      
    
      //列表请求
      tableObj: {
        getdataListParm: {
          name: 'getResumeByCustomerId',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            id:"",
            customerId: '',
            businessName: '',
            inputDatetime: '',
            beginDate: '',
            endDate: '',
            directorName: '',
            customeStatus: '已完成',
            beginMoney: '',
            endMoney: '',
          }
        },
        tableKey: 0,
        total: 0
      },
      businessNameList: [
        {id:"客户拜访", name:"客户拜访"},
        {id:"电话回访", name:"电话回访"},
        {id:"快递接送", name:"快递接送"},
        {id:"备货", name:"备货"},
        {id:"发货", name:"发货"},
        {id:"现场服务", name:"现场服务"},
        {id:"远程服务", name:"远程服务"},
        {id:"投诉", name:"投诉"},

      ],
      customeStatusList: [
        {id:"已完成", name:"已完成"},
        {id:"未完成", name:"未完成"},
      ],
      customerResumeList:[
        // {id:1, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-01"},
        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
      ],

      sunPrice:{
        // payMoney: '200', 
        // planPayMoney: '50', 
        // planPaySumMoney: '300'
      }

      
    }
  },
 watch: {
    customerData: {
      deep: true,
      handler: function (item) {
        console.log("父组件：", item)

        this.form_clear() 

        

        this.get_card_list()
        this.get_resume_list()
        this.get_sum_money()
      }
    },
 
  },
  mounted() {
     
  },


  created() {
     this.get_card_list()
     this.get_resume_list()
     this.get_sum_money()
  },
  beforeDestroy() {
    
  },
  methods: {
     
    //AJAX事件 - 获取卡片 
    get_card_list() {
      var send_data = {
          name: 'getCustomerById',
          parammaps: {
            id:this.customerData.id,
          }
     }
      GetDataByName(send_data).then(response => {
        console.log('卡片数据', response )
        if (response.data.list !== null) {
          this.customerCard = response.data.list[0]
        } else {
          this.customerCard = {}
        }
      })
    },

    //监听 - 表单查询
    form_search() {
      console.log('点击了查询 - 客户详情列表',this.tableObj.getdataListParm.parammaps)
      if (this.tableObj.getdataListParm.parammaps.inputDatetime !== '' && this.tableObj.getdataListParm.parammaps.inputDatetime !== null) {
        this.tableObj.getdataListParm.parammaps.beginDate = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
        this.tableObj.getdataListParm.parammaps.endDate = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
      } else {
        this.tableObj.getdataListParm.parammaps.inputDatetime = ''
        this.tableObj.getdataListParm.parammaps.beginDate = ''
        this.tableObj.getdataListParm.parammaps.endDate = ''
      }
      this.tableObj.getdataListParm.parammaps.id = this.customerData.id
      this.tableObj.getdataListParm.offset = 1
      this.get_resume_list()
      this.get_sum_money()
    },

    //事件 - 清空所有表单信息
    form_clear() {
      console.log('点击了重置')
      this.tableObj.getdataListParm.parammaps.id = ''
      this.tableObj.getdataListParm.parammaps.customerId = ''
      this.tableObj.getdataListParm.parammaps.businessName = ''
      this.tableObj.getdataListParm.parammaps.inputDatetime = ''
      this.tableObj.getdataListParm.parammaps.beginDate = ''
      this.tableObj.getdataListParm.parammaps.endDate = ''
      this.tableObj.getdataListParm.parammaps.directorName = ''
      this.tableObj.getdataListParm.parammaps.customeStatus = ''
      this.tableObj.getdataListParm.parammaps.beginMoney = ''
      this.tableObj.getdataListParm.parammaps.endMoney = ''
      this.tableObj.getdataListParm.offset = 1
      this.get_resume_list()
      this.get_sum_money()
    },

    //AJAX事件 - 获取卡片列表
    get_resume_list() {

 
      this.tableObj.getdataListParm.parammaps.customerId = this.customerData.id
      var send_data2 = {
          name: 'getResumeByCustomerId',
          parammaps: this.tableObj.getdataListParm.parammaps
     }
      GetDataByName(send_data2).then(response => {
        console.log('卡片列表数据', response )
        if (response.data.list !== null) {
          this.customerResumeList = response.data.list
        } else {
          this.customerResumeList = []
        }
      })
    },

    //AJAX事件 - 获取金额总价
    get_sum_money() {
      var send_data3 = {
          name: 'getResumeMoney',
          parammaps: this.tableObj.getdataListParm.parammaps
     }
      GetDataByName(send_data3).then(response => {
        console.log('卡片总金额', response )
        this.sunPrice  = response.data.list[0]
        
      })
    },

     
  }
}
</script>