crm_pc/src/componentView/RemotePayDetail.vue

<template>
<div style="padding-bottom:20px;">
  <el-row :gutter="15">
    <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.remoteCode}}</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.statusName}}</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.customerName}}</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.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.receiverName}}</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.remoteBeginDate }}</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.remoteEndDate }}</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.employeeName }}</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.visitCode }}</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.telvisitCode }}</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.content }}</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>

            <el-divider></el-divider>

            <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.costStatus }}</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.remoteCost }}</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">
         <h3>反馈记录</h3>
                <el-row  >

                  

                  <div v-for="(item) in feedRecordList"   >
             
                    <div>
                      <span> {{item.sort }} . </span>
                      <span>{{item.remark }}</span>
                    </div>
                    <el-row type="flex"  justify="end">
                      <el-col :span="6">
                        {{item.createDate   }}
                      </el-col>
                      <el-col :span="6">
                        反馈人：{{item.employeeName}}
                      </el-col>
                    </el-row>
                    <el-divider></el-divider>
                  </div>
        </el-row>
  
    
      

    </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: 'RemotePayDetail',
  props: {
    remoteData: {
      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" 
      }, 
      
 
 
      //反馈记录
      feedRecordList:[
        // {id:1, num: 1, txt: '主板缺失零件，疫情关系，无法采购，延期1天',   director:'epans', date:"2022-12-01"},
        // {id:1, num: 1, txt: '主板缺失零件，疫情关系，无法采购，延期1天',   director:'epans', date:"2022-12-01"},
        // {id:1, num: 1, txt: '主板缺失零件，疫情关系，无法采购，延期1天',   director:'epans', date:"2022-12-01"},
      ],

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

        

        this.get_card_list()
        this.get_feedRecord()
 
      }
    },
 
  },
  mounted() {
     
  },


  created() {
     this.get_card_list()
     this.get_feedRecord()
     
  },
  beforeDestroy() {
    
  },
  methods: {
     
    //AJAX事件 - 获取服务款项详情
    get_card_list() {
      var send_data = {
          name: 'getRemoteCostById',
          parammaps: {
            id:this.remoteData.id,
          }
     }
      GetDataByName(send_data).then(response => {
        console.log('卡片服务款项详情数据', response )
        if (response.data.list !== null) {
          this.customerCard = response.data.list[0]
        } else {
          this.customerCard = {}
        }
      })
    },

    
  

  

    // 查看中的反馈记录
    get_feedRecord() {
      var send_data3 = {
          name: 'getRemoteFeedbackById',
          parammaps: {
            id:this.remoteData.id,
          }
     }

      GetDataByName(send_data3).then(response => {
        console.log("查看中的反馈记录", response.data.list)
        if (response.data.list !== null) {
          this.feedRecordList = response.data.list
        } else {
          this.feedRecordList = []
        }
      })
    }

     
  }
}
</script>