crm_pc/src/componentView/RepairPayDetail.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.repairCode }}</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.typeName }}</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.serviceBeginDate  }}</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.serviceSuccessDate  }}</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.talkResult  }}</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.problem  }}</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.repairResult  }}</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.postCode  }}</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.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.serviceCost  }}</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.payDate  }}</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.collectDate  }}</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.serviceSummary  }}</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-form ref="temp"   :model="stockCard" label-position="right" label-width="150px" style="width: 95%;margin:0 auto 50px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="备货单号：" prop="orderDate">
                  <el-input v-model="stockCard.stockupCode" placeholder="" style="width:100%" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单来源：" prop="orderDate">
                  <el-input v-model="stockCard.sourceName" placeholder="" style="width:100%" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="下单日期：" prop="orderDate">
                  <el-input v-model="stockCard.orderDate" placeholder="" style="width:100%" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关联接收快递：" prop="orderDate">
                  <el-input v-model="stockCard.postalName" placeholder="" style="width:100%" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="备货原因：" prop="orderDate">
                  <el-input v-model="stockCard.reasonName" placeholder="" style="width:100%" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预定发货时间：" prop="orderDate">
                  <el-input v-model="stockCard.planSendDate" placeholder="" style="width:100%" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注：" prop="orderDate">
                  <el-input v-model="stockCard.remark" placeholder="" style="width:100%" disabled></el-input>
              </el-form-item>
            </el-col>
    
          </el-row>
        </el-form>

      

        <h3>备货清单</h3>

        <el-row>
          <el-table :data="tableStockList" 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.categoryName }}</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.productsName }}</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>
        </el-row>

        <el-row type="flex" justify="end">
                   <el-col style="color:#FF4949" :span="6" :offset="18">列表货物总价：{{stockSumPrice}}</el-col>
        </el-row>

              
                <el-divider></el-divider>

        <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: 'RepairPayDetail',
  props: {
    repairData: {
      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" 
      }, 

      stockCard: {
          // "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" 
      }, 
      
      //备货表格
      tableStockList:[],
 
      //反馈记录
      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"},
      ],
 
      stockSumPrice:0,
      requestParam: {},
      isokDisable: false,
      selectList: [],
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }

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

        

        this.get_card_list()
        this.get_feedRecord()
      
      
 
      }
    },
    tableStockList: {
      deep: true,
      handler: function (item) {
          //计算总价格
          var sum = 0
          this.tableStockList.forEach(function(i){
              sum = parseInt(i.nums) * parseFloat(i.price) + sum
          })
          this.stockSumPrice = sum
         
      }
    },
 
  },
  mounted() {
     
  },


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

        } else {
          this.customerCard = {}
        }
      })
    },

    
    // 备货表格
    get_tableStock() {
      var send_data4 = {
          name: 'getStockGoodsBySid',
          parammaps: {
            id:this.customerCard.stockupId,
          }
     }

      GetDataByName(send_data4).then(response => {
        console.log("备货", response.data.list)
        if (response.data.list !== null) {
          this.tableStockList = response.data.list
        }else{
          this.tableStockList = []
        }
      })
    },

    // 备货表格
    get_stock_card() {
     var send_data5 = {
          name: 'getStockupById',
          parammaps: {
            id:this.customerCard.stockupId,
          }
     }
      GetDataByName(send_data5).then(response => {
        console.log('详情数据', response )
        if (response.data.list !== null) {
          this.stockCard = response.data.list[0]
        } else {
          this.stockCard = {}
        }
      })
    },

  

    // 查看中的反馈记录
    get_feedRecord() {
      var send_data3 = {
          name: 'getRepairFeedbackById',
          parammaps: {
            id:this.repairData.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>