xujiecloud-vue/src/views/modules/quote/quoteDetailReport.vue

<script>

import {getSiteAndBuByUserName} from "../../../api/qc/qc";
import {queryQuoteDetailById, queryQuoteDetailReport, updateQuoteDetail} from "../../../api/quote/quoteDetail";
import {getItemListByInquiryPartAndCodeNo} from "../../../api/inquiry/inquiryDetail";
import BreakdownCost from "./detail/breakdownCost.vue";
import BuSelect from "../../../components/selector/select/BuSelect.vue";
import {queryPropertyTemplate} from "../../../api/property/template";
import {queryPropertyTemplateDetailAvailableList} from "../../../api/property/templateDetail";
import {againQuote} from "../../../api/quote/quote";
import QuoteDetailTool from "./detail/primary/quoteDetailTool.vue";
import QuoteDetailBom from "./detail/primary/quoteDetailBom.vue";
import QuoteDetailOther from "./detail/primary/quoteDetailOther.vue";
import QuoteDetailCost from "./detail/primary/quoteDetailCost.vue";
import QuoteDetailRouting from "./detail/primary/quoteDetailRouting.vue";
import TpCost from "./detail/tpCost.vue";

export default {
  name: "quoteDetailReport",
  components: {
    TpCost,
    QuoteDetailRouting,
    QuoteDetailCost,
    QuoteDetailOther,
    QuoteDetailBom,
    QuoteDetailTool,
    BuSelect,
    BreakdownCost
  },
  props: {
    height: {
      type: [String, Number],
      default: "38vh"
    }
  },
  data() {
    return {
      queryForm: {
        buId: '',
        customerNo: '',
        customerDesc: '',
        partNo: '',
        partDesc: ''
      },
      no: 1,
      size: 20,
      total: 0,
      dataList: [],
      queryLoading: false,
      userBuList: [],
      columns: [
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1BuDesc',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'buDesc',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'BU',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1QuoteVersionNo',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'quoteVersionNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '报价单',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1CustomerNo',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'customerNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '客户编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1CustomerDesc',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'customerDesc',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '客户名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1QuoteDate',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'quoteDate',
          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: 5013,
          serialNumber: '5011Table1CustomerInquiryNo',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'customerInquiryNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '客户询价单号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1PartNo',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'partNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '物料编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1PartDesc',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'partDesc',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '物料描述',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1Status',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'status',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '状态',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1CreateDate',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'createDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '创建日期',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 130
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1CreateBy',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'createBy',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '创建人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1Site',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'site',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '工厂编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
      ],
      currentRow: {},
      activeName: 'detail',
      inquiryDataList: [],
      queryPropertyLoading: false,
      propertyVisible: false,
      propertyList: [],

      currentProperty: {
        id: undefined,
        codeNo: '',
        codeDesc: '',
      },
      propertyItemList: [],
      saveQuoteDetailRules: {
        partNo: [{required: true, message: '请输入物料编码', trigger: ['blur', 'change']}],
        partDesc: [{required: true, message: '请输入物料名称', trigger: ['blur', 'change']}],
        qty: [{required: true, message: '请输入数量', trigger: ['blur', 'change']}],
      },
      quoteDetail: {},
      quoteDetailVisible: false,
      quoteDetailActiveName: 'bom',
      saveLoading: false,
    }
  },
  methods: {
    getSiteAndBuByUserName() {
      let tempData = {
        username: this.$store.state.user.name,
      }
      getSiteAndBuByUserName(tempData).then(({data}) => {
        if (data.code === 0) {
          this.userBuList = data.rows
        }
      })
    },
    handleQuery() {
      let list = [];
      if (this.propertyItemList.length > 0) {
        list = this.propertyItemList.filter(item => item.textValue || item.numValue);
      }
      let params = {
        ...this.queryForm,
        no: this.no,
        size: this.size,
        codeId: this.currentProperty.id,
        list,
      }
      this.queryLoading = true
      queryQuoteDetailReport(params).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.rows
          this.total = data.total
          if (this.total === 0) {
            this.currentRow = {}
          } else if (this.currentRow.id !== undefined) {
            // this.currentRow = {}
          } else {
            this.currentRow = this.dataList[0]
          }
        } else {
          this.$message.warning(data.msg)
        }
        this.queryLoading = false
      }).catch((error) => {
        this.$message.error(error)
        this.queryLoading = false
      })
    },
    handleRowClick(row) {
      this.currentRow = {...row}
    },
    rowStyle({row}) {
      if (this.currentRow && this.currentRow.id === row.id) {
        return {'background-color': '#E8F7F6'};
      } else {
        return {}
      }
    },
    handleSizeChange(val) {
      this.size = val
      this.handleQuery()
    },
    handlePageChange(val) {
      this.no = val
      this.handleQuery()
    },
    handleQueryInquiryProperties() {
      if (this.currentRow.id === undefined) {
        this.inquiryDataList = []
        return
      }
      let params = {
        inquiryPartId: this.currentRow.rfqDetailId,
        buNo: this.currentRow.buNo,
        site: this.currentRow.site,
        recordType: 'PRICECHECK',
      }
      this.queryPropertyLoading = true
      getItemListByInquiryPartAndCodeNo(params).then(({data}) => {
        if (data && data.code === 0) {
          this.inquiryDataList = data.rows
        } else {
          this.$message.warning(data.msg)
        }
        this.queryPropertyLoading = false
      }).catch((error) => {
        this.$message.error(error)
        this.queryPropertyLoading = false
      })
    },
    handleClickProperty() {
      if (!this.queryForm.buId) {
        this.$message.warning('请先选择BU')
        return
      }
      // this.handleQueryProperty();
      this.propertyVisible = true;
    },
    handleQueryProperty() {
      let params = {
        buId: this.queryForm.buId,
        createBy: this.$store.state.user.name,
        functionType: 'IP'
      }
      queryPropertyTemplate(params).then(({data}) => {
        if (data && data.code === 0) {
          this.propertyList = data.rows
          if (this.propertyList.length > 0) {
            this.currentProperty.id = this.propertyList[0].id
            this.currentProperty.codeNo = this.propertyList[0].codeNo
          }
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    handleQueryPropertyTemplateDetailAvailableList() {
      let params = {
        headerId: this.currentProperty.id,
      }
      this.propertyItemList = []
      queryPropertyTemplateDetailAvailableList(params).then(({data}) => {
        if (data && data.code === 0) {
          this.propertyItemList = data.rows
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    handleAgainQuote(row) {
      this.quoteDetail = {};
      this.$confirm('确定重新报价该报价单吗？').then(() => {
        this.handleAgainQuoteOption(row);
      })
    },
    handleAgainQuoteOption(row) {
      let params = {
        id: row.quoteId,
        createBy: this.$store.state.user.name,
      }
      this.queryLoading = true
      againQuote(params).then(({data}) => {
        if (data && data.code === 0) {
          this.$message.success(data.msg)
          this.handleQuery();
          let params = {
            id: data.id,
          }
          this.handleQueryQuoteDetailById(params);
        } else {
          this.$message.warning(data.msg)
          this.queryLoading = false
        }
      }).catch((error) => {
        this.$message.error(error)
        this.queryLoading = false
      })
    },
    handleQueryQuoteDetailById(row) {
      let params = {
        id: row.id,
      }
      queryQuoteDetailById(params).then(({data}) => {
        if (data && data.code === 0) {
          this.quoteDetail = data.row;
          this.quoteDetailVisible = true;
          this.quoteDetailActiveName = 'bom';
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    handleClickTab(tab) {
      if (this.activeName === 'routing') {
        this.$refs.routing.handleQueryQuoteDetailBomTree()
      }
    },
    handleSaveQuoteDetailClick() {
      this.$refs.saveQuoteDetailForm.validate((valid, obj) => {
        if (valid) {
          this.handleUpdate();
        }
      })
    },
    handleUpdate() {
      let params = {
        ...this.quoteDetail,
        updateBy: this.$store.state.user.name,
      }
      updateQuoteDetail(params).then(({data}) => {
        if (data && data.code === 0) {
          this.$message.success(data.msg);
          this.quoteDetailVisible = false;
        } else {
          this.$message.warning(data.msg);
        }
      }).catch((error) => {
        this.$message.error(error);
      })
    },
  },
  created() {
    this.getSiteAndBuByUserName();
    this.handleQuery();
  },
  watch: {
    currentRow(newVal, oldVal) {
      if (newVal) {
        this.handleQueryInquiryProperties()
      }
    },
    'queryForm.buId'(newVal, oldVal) {
      this.currentProperty.id = undefined
      this.currentProperty.codeNo = ''
      this.propertyItemList = []
      if (newVal) {
        this.handleQueryProperty();
      }
    },
    'currentProperty.id'(newVal, oldVal) {
      if (newVal) {
        this.handleQueryPropertyTemplateDetailAvailableList();
      }
    }
  }
}
</script>

<template>
  <div>
    <div style="width: 1200px">
      <el-form :model="queryForm" label-position="top">
        <el-row :gutter="10">
          <el-col :span="3">
            <el-form-item label="BU">
              <bu-select v-model="queryForm.buId">
                <el-option label="全部" value=""></el-option>
              </bu-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="客户编码">
              <el-input v-model="queryForm.customerNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="客户名称">
              <el-input v-model="queryForm.customerDesc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="产品编码">
              <el-input v-model="queryForm.partNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="产品描述">
              <el-input v-model="queryForm.partDesc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="报价单号">
              <el-input v-model="queryForm.quoteVersionNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label=" ">
              <el-button type="primary" @click="handleClickProperty">属性</el-button>
              <el-button type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table v-loading="queryLoading" :data="dataList" border :height="height" :row-style="rowStyle"
              @row-click="handleRowClick">
      <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-column fixed="right"
                       header-align="center"
                       align="center"
                       width="100"
                       label="操作">
        <template slot-scope="{row,$index}">
          <el-link @click="handleAgainQuote(row)">重新报价</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handlePageChange"
                   :current-page="no"
                   :page-sizes="[20, 50, 100, 200, 500]"
                   :page-size="size"
                   :total="total"
                   layout="total,sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-tabs v-model="activeName">
      <el-tab-pane label="详情" name="detail">
        <el-form :model="currentRow" label-position="top" style="width: 1000px">
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item label="报价单号">
                <el-input v-model="currentRow.quoteVersionNo" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="BU">
                <el-input v-model="currentRow.buDesc" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="工厂编码">
                <el-input v-model="currentRow.site" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item label="客户编码">
                <el-input v-model="currentRow.customerNo" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户名称">
                <el-input v-model="currentRow.customerDesc" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="状态">
                <el-input v-model="currentRow.status" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="报价备注" class="auto" :show-message="false">
                <el-input type="textarea" v-model="currentRow.quoteRemark" resize="none" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="报价详情备注" class="auto" :show-message="false">
                <el-input type="textarea" v-model="currentRow.remark" resize="none" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item label="创建人">
                <el-input v-model="currentRow.createBy" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建日期">
                <el-input v-model="currentRow.createDate" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="最近更新人">
                <el-input v-model="currentRow.updateBy" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="最近更新日期">
                <el-input v-model="currentRow.updateDate" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="inquiry" label="询价单信息">
        <el-form :model="currentRow" label-position="top" style="width: 1000px">
          <el-row :gutter="10">
            <el-col :span="5">
              <el-form-item label="询价单号">
                <el-input v-model="currentRow.internalInquiryNo" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="询价日期">
                <el-input v-model="currentRow.requestDate" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="PJM">
                <el-input v-model="currentRow.requesterName" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="5">
              <el-form-item label="客户询价单号">
                <el-input v-model="currentRow.customerInquiryNo" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="要求报价日期">
                <el-input v-model="currentRow.requiredCompletionDate" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="优先等级">
                <el-input v-model="currentRow.priorityLevel" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="状态">
                <el-input v-model="currentRow.rfqStatus" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="备注" class="auto" :show-message="false">
                <el-input type="textarea" v-model="currentRow.rfqRemark" resize="none" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="inquiryDataList" v-loading="queryPropertyLoading" height="19vh"
                  style="margin-top: 10px;width: 1000px" border>
          <el-table-column label="属性编码" header-align="center" min-width="100" prop="itemNo"></el-table-column>
          <el-table-column label="属性名称" header-align="center" min-width="160" prop="itemDesc"></el-table-column>
          <el-table-column label="属性类型" header-align="center" min-width="80" prop="valueType"></el-table-column>
          <el-table-column label="属性值" header-align="center" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.valueType === '文本'">{{ scope.row.textValue }}</span>
              <span v-if="scope.row.valueType === '数字'">{{ scope.row.numValue }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="breakdown" label="Cost Breakdown">
        <breakdown-cost :quote-detail="currentRow" height="36vh"></breakdown-cost>
      </el-tab-pane>
      <el-tab-pane name="tp" label="TP">
        <tp-cost :quote-detail="currentRow" height="36vh"></tp-cost>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="属性详情" v-drag :visible.sync="propertyVisible" :close-on-click-modal="false" append-to-body
               width="800px">
      <el-form :model="currentProperty" label-position="top">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-form-item label="BU">
              <bu-select v-model="queryForm.buId" disabled></bu-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="属性模板">
              <el-select v-model="currentProperty.id" style="width: 100%;">
                <el-option v-for="item in propertyList" :key="item.id" :label="item.codeDesc" :value="item.id">
                  <div style="float:left;">{{ item.codeDesc }}</div>
                  <div style="float:right;">{{ item.codeNo }}</div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="propertyItemList" border height="300px">
        <el-table-column label="属性编码" header-align="center" min-width="120" prop="itemNo"></el-table-column>
        <el-table-column label="属性名称" header-align="center" min-width="180" prop="itemDesc"></el-table-column>
        <el-table-column label="属性类型" header-align="center" align="center" min-width="80" prop="valueType"></el-table-column>
        <el-table-column label="属性值" header-align="center" min-width="140" prop="value">
          <template slot-scope="scope">
            <template v-if="scope.row.valueTypeDb==='T' && scope.row.valueChooseFlag==='Y'">
              <el-select v-model="scope.row['textValue']" placeholder="请选择" style="width: 100%" clearable>
                <el-option :label="available.availableValue" :value="available.availableValue" :key="available.id"
                           v-for="(available) in scope.row.availableList"></el-option>
              </el-select>
            </template>
            <template v-else-if="scope.row.valueTypeDb==='N' && scope.row.valueChooseFlag==='Y'">
              <el-select v-model="scope.row['numValue']" placeholder="请选择" style="width: 100%" clearable>
                <el-option :label="available.availableValue" :value="available.availableValue" :key="available.id"
                           v-for="(available) in scope.row.availableList"></el-option>
              </el-select>
            </template>
            <template v-else-if="scope.row.valueTypeDb==='T'">
              <el-input v-model="scope.row['textValue']"></el-input>
            </template>
            <template v-else-if="scope.row.valueTypeDb==='N'">
              <el-input-number style="width: 100%" :controls="false" :step="0"
                               v-model="scope.row['numValue']"></el-input-number>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="propertyVisible = false">确 定</el-button>
        <el-button @click="propertyVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="`报价明细`" top="10vh" v-drag :visible.sync="quoteDetailVisible" append-to-body
               :width="`${quoteDetail.id?1200:600}px`" :close-on-click-modal="false">
      <el-form :model="quoteDetail" 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="quoteDetail.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="quoteDetail.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="quoteDetail.qty" style="width: 100%;" :controls="false" disabled></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="备注" class="auto" :show-message="false">
              <el-input type="textarea" resize="none" :autosize="{minRows: 3, maxRows: 3}" v-model="quoteDetail.remark" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-tabs v-model="quoteDetailActiveName" @tab-click="handleClickTab">
        <el-tab-pane label="材料" name="bom">
          <quote-detail-bom v-if="quoteDetailVisible" v-model:quoteDetail="quoteDetail"></quote-detail-bom>
        </el-tab-pane>
        <el-tab-pane label="工艺" name="routing">
          <quote-detail-routing ref="routing" v-if="quoteDetailVisible"
                                v-model:quoteDetail="quoteDetail"></quote-detail-routing>
        </el-tab-pane>
        <el-tab-pane label="工具" name="tool">
          <quote-detail-tool v-if="quoteDetailVisible" v-model:quoteDetail="quoteDetail"></quote-detail-tool>
        </el-tab-pane>
        <el-tab-pane label="其他成本" name="other">
          <quote-detail-other v-if="quoteDetailVisible" v-model:quoteDetail="quoteDetail"></quote-detail-other>
        </el-tab-pane>
        <el-tab-pane label="成本&价格" name="cost">
          <quote-detail-cost v-model:quoteDetail="quoteDetail"></quote-detail-cost>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="saveLoading" @click="handleSaveQuoteDetailClick">确 定</el-button>
        <el-button @click="quoteDetailVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.el-table /deep/ .cell {
  height: auto;
  line-height: 1.5;
}

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