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 {
  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";

export default {
  name: "quoteDetail",
  components: {QuoteDetailOther, QuoteDetailRouting, QuoteDetailBom, QuoteDetailTool, QuoteDetailCost, ProjectPartTable},
  props:{
    quote:{
      type:Object,
      required:true
    },
    height:{
      type:[Number,String],
      default:300
    },
  },
  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,
        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']}],
      },
      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: 200
        },
        {
          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: 200
        },
        {
          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: '5011Table2PartCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'partCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '计算后材料成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2MachineCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'machineCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '计算后机器成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2LabourCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'labourCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '计算后人工成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2FabricateCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'fabricateCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '计算后制造费用',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2tToolCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'toolCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '计算后工具成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2AdjustPartCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'adjustPartCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '调整后材料成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },

        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2BomUnYield',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'bomUnYield',
          headerAlign: 'center',
          align: 'right',
          columnLabel: 'BOM Unyield',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2AdjustBomUnYield',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'adjustBomUnYield',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '调整的BOM Unyield',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 130
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2AdjustMachineCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'adjustMachineCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '调整后机器成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2AdjustLabourCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'adjustLabourCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '调整后人工成本',
          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: '调整后制造费用',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2AdjustToolCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'adjustToolCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '调整后工具成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2OtherCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'otherCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '其他成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2ManageCost',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'manageCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '管理成本',
          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: '总成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2ProfitRate',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'profitRate',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '利润率%',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2ProfitAmount',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'profitAmount',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '利润额',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2UnitPrice',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'unitPrice',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '未税单价',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2TotalPrice',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'totalPrice',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '未税总价',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2TaxRate',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'taxRate',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '税率%',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2TaxUnitPrice',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'taxUnitPrice',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '含税单价',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2TaxTotalPrice',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'taxTotalPrice',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '含税总价',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2ProcessTime',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'processTime',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '处理时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2Yield',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'yield',
          headerAlign: 'center',
          align: 'right',
          columnLabel: 'Yield',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2BomYield',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'bomYield',
          headerAlign: 'center',
          align: 'right',
          columnLabel: 'BOM Yield',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2ParentAttritionRate',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'parentAttritionRate',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '母件损耗率',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2ChildAttritionRate',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'childAttritionRate',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '子件损耗率',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table2Status',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'status',
          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: '5011Table2CreateBy',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'createBy',
          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: '5011Table2CreateDate',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'createDate',
          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: '5011Table2UpdateBy',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'updateBy',
          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: '5011Table2UpdateDate',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'updateDate',
          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: '5011Table2Remark',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'remark',
          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: '5011Table2InternalInquiryNo',
          tableId: '5011Table2',
          tableName: '报价详情信息表',
          columnProp: 'internalInquiryNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '询价单号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
      ],
      projectPartVisible:false,
      activeName:'bom',
    }
  },
  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,
        }
        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.projectPartVisible = false;
    },
    handlePartNoBlur(){
      let params = {
        partNo: this.saveQuoteDetail.partNo,
        projectNo: this.quote.projectNo,
      }
      queryProjectPart(params).then(({data})=>{
        if (data && data.code === 0){
          if (data.rows.length === 1){
            this.saveQuoteDetail.partId = data.rows[0].id;
            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,
      }
      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.saveQuoteDetailForm.validate((valid,obj) => {
        if (valid){
          if (this.saveQuoteDetail.id){
            this.handleUpdate();
          }else {
            this.handleSave();
          }
        }else {

        }
      })
    },
    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;
      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);
      })
    }
  },
  watch:{
    quote(newVal,oldVal){
      if (newVal.id){
        this.handleQueryQuoteDetail();
      }else {
        this.dataList = [];
      }
    },
  }
}
</script>

<template>
<div>
  <el-button type="primary" :disabled="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">
        <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 label="操作" fixed="right" align="center" width="120">
      <template slot-scope="{row,$index}">
        <a type="text" v-if="row.status === '草稿'" @click="handleComputeYield(row)">计算</a>
        <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="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">
                <a @click="projectPartVisible = 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-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></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="saveQuoteDetail.remark" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-tabs v-model="activeName" v-if="saveQuoteDetail.id">
      <el-tab-pane label="材料" name="bom">
        <quote-detail-bom v-if="saveVisible" v-model:quoteDetail="saveQuoteDetail"></quote-detail-bom>
      </el-tab-pane>
      <el-tab-pane label="工艺" name="routing">
        <quote-detail-routing v-if="saveVisible" 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-model:quoteDetail="saveQuoteDetail"></quote-detail-cost>
      </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>

  <project-part-table v-if="saveVisible" v-model="projectPartVisible" :project-no="saveQuoteDetail.projectNo" :part-no="saveQuoteDetail.partNo" @dblclick="handleDblClick"></project-part-table>
</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>