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

<script>
import ProjectPartTable from "../../../../components/selector/table/projectPartTable.vue";
import {
  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 {
  queryQuoteGroupDetail,
  removeQuoteGroupDetail,
  saveQuoteGroupDetail, updateCurrentQuoteGroupDetailItemNo
} from "../../../../api/quote/quoteGroupDetail";
import QuoteDetail from "./quoteDetail.vue";
import QuoteDetailCalculation from "./primary/quoteDetailCalculation.vue";

export default {
  name: "quoteGroupDetail",
  components: {
    QuoteDetailCalculation,
    QuoteDetail,
    PartTable,
    QuoteDetailOther, QuoteDetailRouting, QuoteDetailBom, QuoteDetailTool, QuoteDetailCost, ProjectPartTable},
  props:{
    quote:{
      type:Object,
      required:true
    },
    height:{
      type:[Number,String],
      default:300
    },
    authFlag:{
      type:Boolean,
      default:false
    }
  },
  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: '5011Table2PartNo',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'partNo',
          headerAlign: 'center',
          align: 'left',
          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: 'left',
          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: 'right',
          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: 'left',
          columnLabel: '备注',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 200
        },
      ],
      partVisible:false,
      activeName:'bom',

      quoteGroupDetail:{},
      drawerVisible:false,
    }
  },
  methods:{
    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,
        }
        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,
        }
        removeQuoteGroupDetail(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(val){
      let params = {
        quoteId: this.quote.id,
      }
      if (!val){
        this.queryLoading = true;
      }
      queryQuoteGroupDetail(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,
      }
      this.saveLoading = true;
      saveQuoteGroupDetail(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);
      })
    },
    handleClickTab(tab){
      if (this.activeName === 'routing'){
        this.$refs.routing.handleQueryQuoteDetailBomTree()
      }
    },
    handleQueryQuoteDetailByDetailId(row){
      this.quoteGroupDetail = {
        ...row
      }
      this.drawerVisible = true;
    },
    rowStyle({row}){
      if (row.id === this.quoteGroupDetail.id){
        return {background:'#E8F7F6'}
      }
    },
    quoteGroupDetailRowClick(row){
      this.quoteGroupDetail = {
        ...row
      }
    },
    handleCurrentQuoteDetailItemNo(val){
      updateCurrentQuoteGroupDetailItemNo(this.quoteGroupDetail).then(({data})=>{
        if (data && data.code === 0){
          // this.$message.success(data.msg);
          this.handleQueryQuoteDetail(true);
        }else {
          this.$message.warning(data.msg);
          this.quoteGroupDetail.currentQuoteDetailItemNo = val;
        }
      }).catch((error)=>{
        this.$message.error(error);
        this.quoteGroupDetail.currentQuoteDetailItemNo = val;
      })
    },
    handleClose(){
      this.drawerVisible = false
      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();
      }
    },
  }
}
</script>

<template>
<div class="rq">
  <el-button type="primary" v-if="!authFlag" :disabled="quote.status === '下达' || !quote.status" @click="handleSaveQuoteDetail(null)">新增</el-button>

  <el-table  v-loading="queryLoading" border :data="dataList" style="width: 100%;margin-top: 5px" :height="height">
    <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="handleDeleteQuoteDetail(row)">删除</a>
        <a @click="handleQueryQuoteDetailByDetailId(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">
                <a @click="partVisible = true">物料名称</a>
            </span>
            <el-input v-model="saveQuoteDetail.partNo" @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-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>


  <el-dialog title="报价明细" v-drag :visible.sync="drawerVisible" top="10vh" width="1200px" append-to-body :close-on-click-modal="false">
    <el-table v-loading="queryLoading"
              @row-click="quoteGroupDetailRowClick" :row-style="rowStyle" border :data="dataList" style="width: 100%;margin-top: 5px;" :height="'30vh'">
      <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">
          <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>
      </el-table-column>
    </el-table>
    <quote-detail
        v-if="drawerVisible"
        style="margin-top: 20px"
        @close="handleClose"
        :quote="quote"
        :quote-group-detail="quoteGroupDetail"
        :auth-flag="false"
        :height="'33vh'"
        @currentQuoteDetailItemNo="handleCurrentQuoteDetailItemNo">

    </quote-detail>
    <div slot="footer" class="dialog-footer">
      <el-button @click="drawerVisible = 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>
</div>
</template>

<style scoped>

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