ccl_plm-vue/src/views/modules/quotation/sellForQuotation/customerInfo.vue

<template>
  <div class="mode-config">
    <el-divider content-position="left">直接客户</el-divider>
    <el-form  label-position="top" label-width="100px" >
      <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content bg-purple">
          <el-form-item :label="'客户代码'">
            <el-input v-model="customerData.customerNo" readonly  ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item :label="'客户名称'">
            <el-input v-model="customerData.customerDesc" readonly  ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">
          <el-form-item :label="'客户币种'">
            <el-input v-model="customerData.customerCurrency" readonly ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">
          <el-form-item :label="'年营业额'">
            <el-input v-model="customerData.turnoverOfYear" readonly  ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">
          <el-form-item :label="'年潜在投入'">
            <el-input v-model="customerData.potentialRevenueOfYear" readonly  ></el-input>
          </el-form-item>
        </div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content bg-purple">
          <el-form-item :label="'重要程度'">
            <el-input v-model="customerData.importantCustomer" readonly ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">
          <el-form-item :label="'客户状态'">
            <el-input v-model="customerData.customerStatus" readonly ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple">
          <el-form-item :label="'客户描述'">
            <el-input v-model="customerData.customerDescription" readonly ></el-input>
          </el-form-item>
        </div></el-col>
      </el-row>
      <el-divider content-position="left">终端客户</el-divider>
      <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content bg-purple">
          <el-form-item :label="'终端客户代码'">
            <el-input v-model="finalCustomerData.customerNo" readonly  ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item :label="'终端客户名称'">
            <el-input v-model="finalCustomerData.customerDesc" readonly  ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">
          <el-form-item :label="'客户币种'">
            <el-input v-model="finalCustomerData.customerCurrency" readonly ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">
          <el-form-item :label="'年营业额'">
            <el-input v-model="finalCustomerData.turnoverOfYear" readonly  ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">
          <el-form-item :label="'年潜在投入'">
            <el-input v-model="finalCustomerData.potentialRevenueOfYear" readonly  ></el-input>
          </el-form-item>
        </div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content bg-purple">
          <el-form-item :label="'重要程度'">
            <el-input v-model="finalCustomerData.importantCustomer" readonly ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">
          <el-form-item :label="'客户状态'">
            <el-input v-model="finalCustomerData.customerStatus" readonly ></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple">
          <el-form-item :label="'客户描述'">
            <el-input v-model="finalCustomerData.customerDescription" readonly ></el-input>
          </el-form-item>
        </div></el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {queryProjectCustomer, queryProjectFinalCustomer} from "../../../../api/project/project";

export default {
  name: "customerInfo",
  props: {
    height:{
      type:[Number,String],
      default:280,
    },
    project:{
     type: Object,
     default:()=>{}
    }
  },
  data(){
    return{
      customerData:{},
      finalCustomerData:{},
    }
  },
  methods:{
    queryCustomerInfoBySiteAndProjectId(){
      if (this.project.site && this.project.projectId){
        let params = {
          site:this.project.site,
          projectId:this.project.projectId
        }
        queryProjectCustomer(params).then(({data})=>{
          if (data && data.code === 0){
            if (data.row){
              this.customerData = {...data.row}
            }else {
              this.customerData = {}
            }
          }
        })
      }
    },
    queryFinalCustomerInfoBySiteAndProjectId(){
      if (this.project.site && this.project.projectId){
        let params = {
          site:this.project.site,
          projectId:this.project.projectId
        }
        queryProjectFinalCustomer(params).then(({data})=>{
          if (data.row){
            this.finalCustomerData = {...data.row}
          }else {
            this.finalCustomerData = {}
          }
        })
      }
    }
  },
  watch:{
    project(newVal,oldVal){
      if (newVal){
        this.queryCustomerInfoBySiteAndProjectId();
        this.queryFinalCustomerInfoBySiteAndProjectId();
      }
    },
  }
}
</script>

<style scoped>

</style>