crm_pc/src/componentView/ContractCustomerDetail.vue

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


      <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.contractBeginDate}}</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.contractEndDate}}</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" style = "color:#409EFF; cursor: pointer;" @click="form_see()">查看</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.moneyStep }}</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.contractMoney }}</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.serviceCost }}</span>
              </el-col>
            </el-row>


            <block v-for="item in cardStagesList" >

                  <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">{{item.stages }}</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">{{item.planCostRate }}</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">{{item.planCost}}</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">{{item.returnCost}}</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">{{item.getCostDate }}</span>
                    </el-col>
                  </el-row>
            </block>
            

          



            <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"  :gutter="20">

     
        <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.resumeTime" placement="top" v-for="item in customerResumeList"   class = "cust-line-bx">

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

                <el-card>
                 
                      <div class = "cust-ex-item">
                        <span class = "cust-ex-tt">业务：</span>
                        <span class = "cust-ex-ct">{{item.typeName}}</span>
                      </div>
                      <div class = "cust-ex-item">
                        <span class = "cust-ex-tt">状态：</span>
                        <span class = "cust-ex-ct">{{item.statusName}}</span>
                      </div>
                      <!-- <div class = "cust-ex-item">
                        <span class = "cust-ex-tt">详情：</span>
                        <span class = "cust-ex-ct">{{item.businessName}}</span>
                      </div> -->
                   
                    
              
                </el-card>
              </el-timeline-item>

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


 

        </div>
      

    </el-col>
  </el-row>

  <!-- 新增/编辑 -->
    <el-dialog  title="货物详情" :visible.sync="createSee.dialogFormVisible"  append-to-body  width="95%">
    

        <div class="table"   style="margin-top:140px">
          <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed">

            
    
            <el-table-column label="序号" align="center" type="index" width="50px">
                      <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column label="货品名称" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span>{{ scope.row.productsName }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="型号" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span>{{ scope.row.model }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="规格" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span>{{ scope.row.Specifications }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="数量" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span>{{ scope.row.nums }}</span>
      
                      </template>
                    </el-table-column>
                    <el-table-column label="单价(元)" min-width="110px" align="center">
                            <template slot-scope="scope">
                              <span>{{ scope.row.price }}</span>
                            </template>
                    </el-table-column>

                    <el-table-column label="总价(元)" min-width="110px" align="center">
                            <template slot-scope="scope">
                              <span>{{ scope.row.sumPrice  }}</span>
                            </template>
                    </el-table-column> 

                    <el-table-column label="备注" min-width="280px" align="center">
                      <template slot-scope="scope">
                        <span>{{ scope.row.remark }}</span>
                      </template>
                    </el-table-column>
     

          </el-table>

        

          <pagination v-show="tableObj.total>=0" :total="tableObj.total" :page.sync="tableObj.getdataListParm.offset" :limit.sync="tableObj.getdataListParm.pagecount" @pagination="get_table_data" />
        </div>
         
      
        <div slot="footer" class="dialog-footer">     
          <el-button class="cancelClose" @click="createSee.dialogFormVisible = false">关闭</el-button>
        </div>
 
    </el-dialog>
</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: 'ContractCustomerDetail',
  props: {
    concustomerData: {
      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: 'getContractGoodsByCid2',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            id: ''

          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true,
      },
    
      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"},
      ],

      cardStagesList:[],

      createSee: {
        dialogFormVisible: false,

      },

       rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
       cellStyle: { padding: 0 + 'px' }

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

        

        this.get_card_list()

        this.get_card_stages()
        this.get_resume_list()
      
      }
    },
 
  },
  mounted() {
     
  },


  created() {
     this.get_card_list()
     this.get_card_stages()
     this.get_resume_list()
    
  },
  beforeDestroy() {
    
  },
  methods: {
     
    //AJAX事件 - 获取卡片 
    get_card_list() {
      var send_data = {
          name: 'getContractApplicationById',
          parammaps: {
            id:this.concustomerData.id,
          }
     }
      GetDataByName(send_data).then(response => {
        console.log('卡片数据', response )
        if (response.data.list !== null) {
          this.customerCard = response.data.list[0]
        } else {
          this.customerCard = {}
        }
      })
    },
    //AJAX事件 - 获取卡片 - 款项分期
    get_card_stages(){
      console.log("测试==============")
      var send_data2 = {
          name: 'getContractCost',
           parammaps: {
            id:this.concustomerData.id,
          }
     }
      GetDataByName(send_data2).then(response => {
        console.log('卡片款项分期数据', response )
        if (response.data.list !== null) {
          this.cardStagesList = response.data.list
        } else {
          this.cardStagesList = []
        }
      })
    },
  

    //AJAX事件 - 获取卡片列表
    get_resume_list() {
      var send_data2 = {
          name: 'getContractResume',
           parammaps: {
            id:this.concustomerData.id,
          }
     }
      GetDataByName(send_data2).then(response => {
        console.log('卡片列表数据', response )
        if (response.data.list !== null) {
          this.customerResumeList = response.data.list
        } else {
          this.customerResumeList = []
        }
      })
    },

    
    //查看货物信息
    form_see() {
      this.createSee.dialogFormVisible = true
      this.tableObj.getdataListParm.parammaps.id = this.concustomerData.id
      this.get_table_data()

     
    },
    

        //加载表格
    get_table_data() {
      this.tableObj.listLoading = true
      console.log("this.tableObj.getdataListParm======>", this.tableObj.getdataListParm)
      GetDataByName(this.tableObj.getdataListParm).then(response => {
        console.log('table数据======>', response.data.list)
        if (response.data.list !== null) {

          this.tableObj.list = response.data.list
          this.tableObj.pageNum = response.data.pageNum
          this.tableObj.pageSize = response.data.pageSize
          this.tableObj.total = response.data.total

          console.log('table数据======>', this.tableObj.list)
        } else {
          this.tableObj.list = []
        }
        setTimeout(() => {
          this.tableObj.listLoading = false
        }, 100)
      })
    }

     
  }
}
</script>