xujiecloud-vue/src/views/modules/quote/detail/quoteDetail.vue

<script>
import ProjectPartTable from "../../../../components/selector/table/projectPartTable.vue";
import {queryProjectPart} from "../../../../api/project/projectPart";
import {
  againQuoteDetail,
  deleteQuoteDetail,
  queryQuoteDetail, queryQuoteDetailYield,
  saveQuoteDetail,
  updateQuoteDetail
} from "../../../../api/quote/quoteDetail";
import QuoteDetailCost from "./primary/quoteDetailCost.vue";
import QuoteDetailTool from "./primary/quoteDetailTool.vue";
import QuoteDetailBom from "./primary/quoteDetailBom.vue";
import QuoteDetailRouting from "./primary/quoteDetailRouting.vue";
import QuoteDetailOther from "./primary/quoteDetailOther.vue";
import PartTable from "../../../../components/selector/table/partTable.vue";
import {handleQueryPart} from "../../../../api/part/partInformation";
import {updateColumnSize} from "../../../../api/table";
import QuoteDetailCalculation from "./primary/quoteDetailCalculation.vue";

export default {
  name: "quoteDetail",
  components: {
    QuoteDetailCalculation,
    PartTable,
    QuoteDetailOther, QuoteDetailRouting, QuoteDetailBom, QuoteDetailTool, QuoteDetailCost, ProjectPartTable},
  props:{
    quote:{
      type:Object,
      required:true
    },
    height:{
      type:[Number,String],
      default:300
    },
    authFlag:{
      type:Boolean,
      default:false
    },
    quoteGroupDetail:{
      type:Object,
    },
    saveAuth:{
      type:Boolean,
      default:true
    },
  },
  data(){
    return{
      quoteDetail:{
        id:null,
        partNo:'',
        partDesc:'',
        projectNo:'',
        projectDesc:'',
        qty:null,
        quoteCount:1,
        partCost:0,
        adjustPartCost:0,
        labourCost:0,
        adjustLabourCost:0,
        fabricateCost:0,
        adjustFabricateCost:0,
        toolCost:0,
        adjustToolCost:0,
        machineCost:0,
        adjustMachineCost:0,
        otherCost:0,
        manageCost:0,
        totalCost:0,
        profitRate:0,
        profitAmount:0,
        totalPrice:0,
        unitPrice:0,
        taxRate:13,
        taxTotalPrice:0,
        taxUnitPrice:0,
        quoteTotalCost:0,
        quoteProfitRate:0,
        quoteProfitAmount:0,
        quoteTotalPrice:0,
        quoteUnitPrice:0,
        quoteTaxRate:0,
        quoteTaxTotalPrice:0,
        quoteTaxUnitPrice:0,
        currency1:undefined,
        currency2:undefined,
        exchangeRate1:undefined,
        exchangeRate2:undefined,
        currencyTotalCost1:0,
        currencyTotalCost2:0,
        quoteCurrencyTotalCost1:0,
        quoteCurrencyTotalCost2:0,
        moq:'Standard 250K',
        type:'Standard TP',
        costModel:'UFIDA',
        remark:'',
      },
      saveQuoteDetail:{

      },
      dataList:[],
      saveLoading:false,
      queryLoading:false,
      saveVisible:false,
      saveQuoteDetailRules:{
        partNo: [{required: true, message: '请输入物料编码', trigger: ['blur','change']}],
        partDesc: [{required: true, message: '请输入物料名称', trigger: ['blur','change']}],
        qty: [{required: true, message: '请输入数量', trigger: ['blur','change']}],
        type: [{required: true, message: '请选择TP类型', trigger: ['blur','change']}],
        costModel: [{required: true, message: '请选择Cost Model', trigger: ['blur','change']}],
      },
      columns: [
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2CostModel',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'costModel',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'Cost Model',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2PartNo',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'partNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '物料编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2PartDesc',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'partDesc',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '物料名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 320
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2Qty',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'qty',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '报价数量',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2AdjustBomUnYield',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'adjustBomUnYield',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '报价成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 130
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2AdjustLabourCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'adjustLabourCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: 'DL',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2AdjustFabricateCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'adjustFabricateCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: 'VOH',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2AdjustMachineCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'adjustMachineCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: 'FOH',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        }
        ,{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2TotalCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'totalCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: 'Total Cost(RMB.KCT)',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2QuoteProfitRate',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'quoteProfitRate',
          headerAlign: 'center',
          align: 'right',
          columnLabel: 'markup(%)',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2Weighted',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'weighted',
          headerAlign: 'center',
          align: 'right',
          columnLabel: 'Weighted TP for MOQ>250K(USD/KCT)',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 260
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2Weighted2',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'weighted2',
          headerAlign: 'center',
          align: 'right',
          columnLabel: 'Weighted TP for MOQ>5M(USD/KCT)',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 260
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2Weighted',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'weighted',
          headerAlign: 'center',
          align: 'right',
          columnLabel: 'Standard TP for MOQ>250K(USD/KCT)',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 260
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2Weighted2',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'weighted2',
          headerAlign: 'center',
          align: 'right',
          columnLabel: 'Standard TP for MOQ>5M(USD/KCT)',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 260
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2Remark',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'remark',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '备注',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 200
        },
      ],
      partVisible:false,
      activeName:'bom',
    }
  },
  methods:{
    handleColumnResize(newWidth, oldWidth, column, event){
      let inData= this.columnList.filter(item => item.columnProp === column.property)[0]
      inData.columnWidth=newWidth
      updateColumnSize(inData).then(({data}) => {
        if (data.code === 0) {
          console.log("栏位宽度保存成功！")
        }
      })
    },
    handleSaveQuoteDetail(row){
      this.$nextTick(()=>{
        if (this.$refs.handleSaveQuoteDetailClick){
          this.$refs.saveQuoteDetailForm.clearValidate();
        }
      })
      if (row){
        this.saveQuoteDetail = {
          ...row
        }
      }else {
        this.saveQuoteDetail = {
          ...this.quoteDetail,
          createBy:this.$store.state.user.name,
          status:'草稿',
          active:'Y',
          qty:1,
          isDetail:false,
        }
        if (this.quoteGroupDetail){
          this.saveQuoteDetail.partId = this.quoteGroupDetail.partId
          this.saveQuoteDetail.partNo = this.quoteGroupDetail.partNo
          this.saveQuoteDetail.partDesc = this.quoteGroupDetail.partDesc
        }
        this.$nextTick(()=>{
          this.saveQuoteDetail.projectNo = this.quote.projectNo
        })
      }
      this.activeName = 'bom';
      this.saveVisible = true;
    },
    handleDetail(row){
      this.saveQuoteDetail = {
        ...row
      }
      this.activeName = 'bom';
      this.saveVisible = true;
    },
    handleDeleteQuoteDetail(row){
      this.$alert('确认删除该条报价明细吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.id,
        }
        deleteQuoteDetail(params).then(({data}) => {
          if (data && data.code === 0) {
            this.$message.success(data.msg);
            this.handleQueryQuoteDetail();
          } else {
            this.$message.warning(data.msg);
          }
        }).catch((error) => {
          this.$message.error(error);
        })
      }).catch(() => {
      })
    },
    handleDblClick(row){
      this.saveQuoteDetail.partId = row.id;
      this.saveQuoteDetail.partNo = row.partNo;
      this.saveQuoteDetail.partDesc = row.partDesc;
      this.partVisible = false;
    },
    handlePartNoBlur(){
      let params = {
        userName: this.$store.state.user.name,
        partNo: this.saveQuoteDetail.partNo,
      }
      handleQueryPart(params).then(({data})=>{
        if (data && data.code === 0){
          if (data.rows.length === 1){
            this.saveQuoteDetail.partId = data.rows[0].id;
            this.saveQuoteDetail.partNo = data.rows[0].partNo;
            this.saveQuoteDetail.partDesc = data.rows[0].partDesc;
          }else {
            this.saveQuoteDetail.partId = undefined;
            this.saveQuoteDetail.partDesc = '';
          }
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    handleQueryQuoteDetail(){
      let params = {
        quoteId: this.quote.id,
      }
      if (this.quoteGroupDetail){
        params.quoteGroupDetailId=this.quoteGroupDetail.id;
      }
      this.queryLoading = true;
      queryQuoteDetail(params).then(({data})=>{
        if (data && data.code === 0){
          this.dataList = data.rows
        }else {
          this.$message.warning(data.msg);
        }
        this.queryLoading = false;
      }).catch((error)=>{
        this.$message.error(error);
        this.queryLoading = false;
      })
    },
    handleSaveQuoteDetailClick(){
      // this.$refs.cost.handleValidate();
      this.$refs.saveQuoteDetailForm.validate((valid,obj) => {
        if (valid){
          if (this.saveQuoteDetail.id){
            this.handleUpdate();
          }else {
            this.handleSave();
          }
        }else {
          let i = 1;
          for (let item in obj){
            this.$message.error(obj[item][0].message);
            if (i === 1){
              return
            }
            i++;
          }
        }
      })
    },
    handleSave(){
      let params = {
        ...this.saveQuoteDetail,
        quoteId: this.quote.id,
        quoteNo:this.quote.quoteNo,
        site:this.quote.site,
        buNo:this.quote.buNo,
        versionNo:this.quote.versionNo,
        createBy:this.saveQuoteDetail.createBy,
        active:'Y',
        status:'草稿',
        internalInquiryNo:this.quote.insideInquiryNo,
      }
      if (this.quoteGroupDetail){
        params.quoteGroupDetailId=this.quoteGroupDetail.id;
      }
      this.saveLoading = true;
      saveQuoteDetail(params).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.handleQueryQuoteDetail();
          if (this.saveQuoteDetail.isDetail){
            this.saveQuoteDetail = {
              ...data.row,
            }
          }else {
            this.saveVisible = false;
          }
        }else {
          this.$message.warning(data.msg);
        }
        this.saveLoading = false
      }).catch((error)=>{
        this.$message.error(error);
        this.saveLoading = false
      })
    },
    handleUpdate(){
      let params = {
        ...this.saveQuoteDetail,
        updateBy:this.$store.state.user.name,
      }
      updateQuoteDetail(params).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.handleQueryQuoteDetail();
          this.saveVisible = false;
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    handleComputeYield(row){
      let params = {
        id: row.id,
      }
      queryQuoteDetailYield(params).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.handleQueryQuoteDetail();
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    handleClickTab(tab){
      if (this.activeName === 'routing'){
        this.$refs.routing.handleQueryQuoteDetailBomTree()
      }
    },
    againQuoteDetail(row){
      let params = {
        ...row
      }
      againQuoteDetail(params).then(({data})=>{
        if (data && data.code === 0){
          this.handleQueryQuoteDetail();
          this.$message.success(data.msg);
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    handleClose(){
      this.$emit('close');
      this.saveVisible = false
    },
  },
  watch:{
    quote(newVal,oldVal){
      if (newVal.id){
        this.quoteDetail.profitRate = this.quote.markup
        this.quoteDetail.quoteProfitRate = this.quote.markup
        this.handleQueryQuoteDetail();
      }else {
        this.dataList = [];
      }
    },
    "saveQuoteDetail.partNo"(newVal,oldVal){
      if (newVal){
        this.saveQuoteDetail.partNo = newVal.toUpperCase();
      }
    },
    quoteGroupDetail(newVal,oldVal){
      if (newVal){
        this.quoteDetail.profitRate = this.quote.markup
        this.quoteDetail.quoteProfitRate = this.quote.markup
        this.handleQueryQuoteDetail();
      }
    },
    'quoteGroupDetail.currentQuoteDetailItemNo'(newVal,oldVal){
      // console.log(this.quoteGroupDetail)
      // emit事件触发修改
      if (this.quoteGroupDetail && newVal){
        this.$emit('currentQuoteDetailItemNo',oldVal);
      }
    }
  },
  created() {
    this.quoteDetail.profitRate = this.quote.markup
    this.quoteDetail.quoteProfitRate = this.quote.markup
    this.handleQueryQuoteDetail();
  }
}
</script>

<template>
<div class="rq">
  <template v-if="saveAuth">
    <el-button type="primary" v-if="!authFlag" :disabled="quote.status === '下达' || !quote.status" @click="handleSaveQuoteDetail(null)">新增</el-button>
  </template>
  <el-table  v-loading="queryLoading" border :data="dataList" style="width: 100%;margin-top: 5px" :height="height" @header-dragend="handleColumnResize">
    <el-table-column width="80" align="center" label="默认报价行" v-if="quoteGroupDetail && quoteGroupDetail.status === '草稿'">
      <template slot-scope="{row}">
        <el-radio
          class="radio"
          :label="row.itemNo"
          v-model="quoteGroupDetail.currentQuoteDetailItemNo"
        ></el-radio>
      </template>
    </el-table-column>·
    <el-table-column type="index" width="55" align="center" label="序号"></el-table-column>
    <el-table-column
      v-for="(item,index) in columns" :key="index"
      :sortable="item.columnSortable"
      :prop="item.columnProp"
      :header-align="item.headerAlign"
      :show-overflow-tooltip="item.showOverflowTooltip"
      :align="item.align"
      :fixed="item.fixed === ''?false:item.fixed"
      :min-width="item.columnWidth"
      :label="item.columnLabel">
      <template slot-scope="scope">
        <template v-if="item.columnLabel === 'Weighted TP for MOQ>250K(USD/KCT)' || item.columnLabel === 'Weighted TP for MOQ>5M(USD/KCT)'">
          <span v-if="scope.row.type && scope.row.type === 'Weighted TP'"> {{scope.row[item.columnProp] }}</span>
        </template>
        <template v-else-if="item.columnLabel === 'Standard TP for MOQ>250K(USD/KCT)' || item.columnLabel === 'Standard TP for MOQ>5M(USD/KCT)'">
          <span v-if="!scope.row.type || scope.row.type === 'Standard TP'">{{scope.row[item.columnProp] }}</span>
        </template>
        <template v-else>
          <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </template>
    </el-table-column>
    <el-table-column label="操作" v-if="!authFlag" fixed="right" align="center" width="120">
      <template slot-scope="{row,$index}">
        <a type="text" v-if="row.status === '草稿'" @click="handleSaveQuoteDetail(row)">编辑</a>
        <a type="text" v-if="row.status === '草稿'" @click="handleDeleteQuoteDetail(row)">删除</a>
<!--        <a type="text" v-if="row.status !== '下达'" @click="againQuoteDetail(row)">重新报价</a>-->
        <a type="text" v-if="row.status === '下达'" @click="handleDetail(row)">详情</a>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog :title="`报价明细`" top="10vh" v-drag :visible.sync="saveVisible" append-to-body :width="`${saveQuoteDetail.id?1200:600}px`" :close-on-click-modal="false">
    <el-form :model="saveQuoteDetail" ref="saveQuoteDetailForm" :rules="saveQuoteDetailRules" label-position="top" v-if="!saveQuoteDetail.id">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="物料编码" prop="partNo" :show-message="false">
            <span slot="label" v-if="!quoteGroupDetail">
                <a @click="partVisible = true">物料编码</a>
            </span>
            <el-input v-model="saveQuoteDetail.partNo" :disabled="quoteGroupDetail" @blur="handlePartNoBlur"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="物料描述" prop="partDesc" :show-message="false">
            <el-input v-model="saveQuoteDetail.partDesc" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="报价数量" prop="qty" :show-message="false">
            <el-input-number style="width: 100%;"  v-model="saveQuoteDetail.qty" :min="1" :step="0" :precision="0" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="TP类型" prop="type" :show-message="false">
            <el-select v-model="saveQuoteDetail.type" placeholder="请选择" style="width: 100%;">
              <el-option label="Standard TP" value="Standard TP"></el-option>
              <el-option label="Weighted TP" value="Weighted TP"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Cost Model" prop="costModel" :show-message="false">
            <el-select v-model="saveQuoteDetail.costModel" style="width: 100%;">
              <el-option label="2020" value="2020"></el-option>
              <el-option label="UFIDA" value="UFIDA"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="" :show-message="false">
            <el-checkbox v-model="saveQuoteDetail.isDetail">保存进入报价页面</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" class="auto" :show-message="false">
            <el-input type="textarea" v-model="saveQuoteDetail.remark" :autosize="{minRows: 3, maxRows: 3}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form v-else :model="saveQuoteDetail" ref="saveQuoteDetailForm" :rules="saveQuoteDetailRules" label-position="top">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="物料编码" prop="partNo" :show-message="false">
            <el-input v-model="saveQuoteDetail.partNo" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物料描述" prop="partDesc" :show-message="false">
            <el-input v-model="saveQuoteDetail.partDesc" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="报价数量" prop="qty" :show-message="false">
            <el-input-number v-model="saveQuoteDetail.qty" style="width: 100%;" :controls="false" :disabled="saveQuoteDetail.status === '下达'"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="TP类型" prop="type" :show-message="false">
            <el-select v-model="saveQuoteDetail.type" placeholder="请选择" style="width: 100%;">
              <el-option label="Standard TP" value="Standard TP"></el-option>
              <el-option label="Weighted TP" value="Weighted TP"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="Cost Model" prop="costModel" :show-message="false">
            <el-select v-model="saveQuoteDetail.costModel" style="width: 100%;">
              <el-option label="2020" value="2020"></el-option>
              <el-option label="UFIDA" value="UFIDA"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="19">
          <el-form-item label="备注" class="auto" :show-message="false">
            <el-input type="textarea" resize="none" :autosize="{minRows: 3, maxRows: 3}" v-model="saveQuoteDetail.remark" :disabled="saveQuoteDetail.status === '下达'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-tabs v-model="activeName" v-if="saveQuoteDetail.id" @tab-click="handleClickTab">
      <el-tab-pane label="材料" name="bom">
        <quote-detail-bom v-if="saveVisible" @close="handleClose" v-model:quoteDetail="saveQuoteDetail"></quote-detail-bom>
      </el-tab-pane>
      <el-tab-pane label="工艺" name="routing">
        <quote-detail-routing ref="routing" v-if="saveVisible" @close="handleClose" v-model:quoteDetail="saveQuoteDetail"></quote-detail-routing>
      </el-tab-pane>
      <el-tab-pane label="工具" name="tool">
        <quote-detail-tool v-if="saveVisible" v-model:quoteDetail="saveQuoteDetail"></quote-detail-tool>
      </el-tab-pane>
      <el-tab-pane label="其他成本" name="other">
        <quote-detail-other v-if="saveVisible" v-model:quoteDetail="saveQuoteDetail"></quote-detail-other>
      </el-tab-pane>
      <el-tab-pane label="成本&价格" name="cost">
        <quote-detail-cost v-if="saveVisible" ref="cost" v-model:quoteDetail="saveQuoteDetail"></quote-detail-cost>
      </el-tab-pane>
      <el-tab-pane label="2020 Rate" name="rate" v-if="saveQuoteDetail.costModel === '2020'">
        <quote-detail-calculation v-if="activeName === 'rate'" v-model:quote-detail="saveQuoteDetail"></quote-detail-calculation>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="saveQuoteDetail.status === '草稿'" :loading="saveLoading" @click="handleSaveQuoteDetailClick">确 定</el-button>
      <el-button @click="saveVisible = false">取 消</el-button>
    </div>
  </el-dialog>

  <part-table v-if="saveVisible" v-model="partVisible" :is-page="true" :part-no="saveQuoteDetail.partNo" @dblclick="handleDblClick"></part-table>
<!--  <project-part-table v-if="saveVisible" v-model="partVisible" :project-no="saveQuoteDetail.projectNo" :part-no="saveQuoteDetail.partNo" @dblclick="handleDblClick"></project-part-table>-->
</div>
</template>

<style scoped>

.auto /deep/ .el-form-item__content{
  height: auto;
  line-height: 1.5;
}


.radio /deep/ .el-radio__label{
  display: none;
}
</style>