<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="任务编号" prop="SeqNo">
        <el-input
          v-model="queryParams.SeqNo"
          placeholder="请输入任务编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户信息" prop="CustomerInfo">
        <el-input
          v-model="queryParams.CustomerInfo"
          placeholder="请输入客户信息"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="下单日期">
        <el-date-picker
          v-model="daterangeOrderDate"
          style="width: 340px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-date-picker>
      </el-form-item>
      <!--      <el-form-item label="交货日期" prop="DeliveryDate">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.DeliveryDate"-->
      <!--          placeholder="请输入交货日期"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="订单所属" prop="OrderOwner">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.OrderOwner"-->
      <!--          placeholder="请输入订单所属"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="输送带长度规格" prop="BeltLengthSpecifications">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.BeltLengthSpecifications"-->
      <!--          placeholder="请输入输送带长度规格"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="primary"-->
      <!--          plain-->
      <!--          icon="el-icon-plus"-->
      <!--          size="mini"-->
      <!--          @click="handleAdd"-->
      <!--          v-hasPermi="['mes/prod:prodOrderDetail:add']"-->
      <!--        >新增-->
      <!--        </el-button>-->
      <!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['mes/prod:prodOrderDetail:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['mes/prod:prodOrderDetail:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['mes/prod:prodOrderDetail:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="prodOrderDetailList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="主键标识" align="center" prop="objId" v-if="columns[0].visible"/>
      <el-table-column label="任务编号" align="center" prop="SeqNo" v-if="columns[1].visible" fixed="left" width="130"/>
      <el-table-column label="下单日期" align="center" prop="OrderDate" width="100" v-if="columns[2].visible">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.OrderDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交货日期" align="center" prop="DeliveryDate" width="100" v-if="columns[3].visible">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.DeliveryDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="产品类型" align="center" prop="ProductType" v-if="columns[4].visible"/>
      <el-table-column label="产品状态" align="center" prop="ProductStatus" v-if="columns[5].visible" width="100"/>
      <el-table-column label="订单所属" align="center" prop="OrderOwner" v-if="columns[6].visible"/>
      <el-table-column label="客户信息" align="center" prop="CustomerInfo" v-if="columns[7].visible"/>
      <el-table-column label="输送带长度规格" align="center" prop="BeltLengthSpecifications" v-if="columns[8].visible"
                       width="230"
      />
      <el-table-column label="面积与重量" align="center" prop="AreaAndWeight" v-if="columns[9].visible" width="200"/>
      <el-table-column label="使用原材料" align="center" prop="UsingRawMaterials" v-if="columns[10].visible" width="230"/>
      <el-table-column label="输送带宽度" align="center" prop="BeltWidth" v-if="columns[11].visible"/>
      <el-table-column label="输送带布层" align="center" prop="BeltClothLayer" v-if="columns[12].visible"/>
      <el-table-column label="客户要求输送带长度" align="center" prop="BeltRequiredLength" v-if="columns[13].visible"
                       width="100"
      />
      <el-table-column label="客户要求上胶厚度" align="center" prop="GluingRequiredThickness" v-if="columns[14].visible"/>
      <el-table-column label="客户要求下胶厚度" align="center" prop="LowerGlueRequiredThickness" v-if="columns[15].visible"/>
      <el-table-column label="生产上胶厚度" align="center" prop="ProductionGluingThickness" v-if="columns[16].visible"/>
      <el-table-column label="上缓冲胶厚度" align="center" prop="UpperBufferAdhesiveThickness" v-if="columns[17].visible"/>
      <el-table-column label="生产下胶厚度" align="center" prop="ProductionLowerGlueThickness" v-if="columns[18].visible"/>
      <el-table-column label="下缓冲胶厚度" align="center" prop="LowerBufferAdhesiveThickness" v-if="columns[19].visible"/>
      <el-table-column label="布胶厚度" align="center" prop="ClothGlueThickness" v-if="columns[20].visible"/>
      <el-table-column label="小布用布布层" align="center" prop="SmallClothFabricLayer" v-if="columns[21].visible"/>
      <el-table-column label="小布布料厚度" align="center" prop="SmallClothThickness" v-if="columns[22].visible"/>
      <el-table-column label="是否需要每层加厚" align="center" prop="IsNeedThicken" v-if="columns[23].visible"/>
      <el-table-column label="每层加厚厚度" align="center" prop="EachLayerThickenThickness" v-if="columns[24].visible"/>
      <el-table-column label="额外加厚厚度" align="center" prop="ExtraThickeningThickness" v-if="columns[25].visible"/>
      <el-table-column label="生产总厚度" align="center" prop="TotalProductionThickness" v-if="columns[26].visible"/>
      <el-table-column label="压延追加厚度" align="center" prop="AdditionalThickness" v-if="columns[27].visible"/>
      <el-table-column label="推荐垫铁厚度" align="center" prop="RecommendedShimThickness" v-if="columns[28].visible"/>
      <el-table-column label="推荐半成品宽度" align="center" prop="SemiFinishedProductWidth" v-if="columns[29].visible"/>
      <el-table-column label="压延生产米数" align="center" prop="RollingProductionMeters" v-if="columns[30].visible"/>
      <el-table-column label="推荐垫布宽度" align="center" prop="RecommendedPadWidth" v-if="columns[31].visible"/>
      <el-table-column label="大布厂家" align="center" prop="BigFabricManufacturer" v-if="columns[32].visible"/>
      <el-table-column label="布料规格" align="center" prop="FabricSpecifications" v-if="columns[33].visible">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="detailsSearch(scope.row,1)"
          >查看详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="预计布料使用量" align="center" prop="EstimatedFabricUsage" v-if="columns[34].visible"/>
      <el-table-column label="布宽度" align="center" prop="ClothWidth" v-if="columns[35].visible"/>
      <el-table-column label="布重量" align="center" prop="ClothWeight" v-if="columns[36].visible"/>
      <el-table-column label="小布使用布料规格" align="center" prop="SmallFabricSpecificationsDic" v-if="columns[37].visible">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="detailsSearch(scope.row,2)"
          >查看详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="小布宽度" align="center" prop="SmallClothWidth" v-if="columns[38].visible"/>
      <el-table-column label="小布布料使用量" align="center" prop="SmallClothUsage" v-if="columns[39].visible"/>
      <el-table-column label="小布用布重量" align="center" prop="SmallClothWeight" v-if="columns[40].visible"/>
      <el-table-column label="用胶工艺" align="center" prop="GluingProcess" v-if="columns[41].visible"/>
      <el-table-column label="上下胶使用胶料" align="center" prop="UpperLowerGlue" v-if="columns[42].visible">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="detailsSearch(scope.row,3)"
          >查看详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="上下胶系数" align="center" prop="UpperLowerGlueCoefficient" v-if="columns[43].visible"/>
      <el-table-column label="上下胶标准用胶量" align="center" prop="UpperLowerGlueUsage" v-if="columns[44].visible"/>
      <el-table-column label="下胶使用胶料" align="center" prop="LowerGlue" v-if="columns[45].visible">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="detailsSearch(scope.row,4)"
          >查看详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="下胶系数" align="center" prop="LowerGlueCoefficient" v-if="columns[46].visible"/>
      <el-table-column label="下胶标准用胶量" align="center" prop="LowerGlueUsage" v-if="columns[47].visible"/>
      <el-table-column label="大布胶使用胶料" align="center" prop="LargeClothGlue" v-if="columns[48].visible">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="detailsSearch(scope.row,5)"
          >查看详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="大布胶系数" align="center" prop="LargeClothGlueCoefficient" v-if="columns[49].visible"/>
      <el-table-column label="胶布标准用胶量" align="center" prop="LargeClothGlueUsage" v-if="columns[50].visible"/>
      <el-table-column label="上下缓冲胶标准用胶量" align="center" prop="BufferGlueUsage" v-if="columns[51].visible" width="100"/>
      <el-table-column label="中间胶" align="center" prop="MiddleGlue" v-if="columns[52].visible">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="detailsSearch(scope.row,6)"
          >查看详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="中间胶系数" align="center" prop="MiddleGlueCoefficient" v-if="columns[53].visible"/>
      <el-table-column label="中间胶使用量" align="center" prop="MiddleGlueUsage" v-if="columns[54].visible"/>
      <el-table-column label="小条宽度" align="center" prop="SmallBarWidth" v-if="columns[55].visible"/>
      <el-table-column label="小条厚度" align="center" prop="SmallBarThickness" v-if="columns[56].visible"/>
      <el-table-column label="小条标准使用量" align="center" prop="SmallBarStandardUsage" v-if="columns[57].visible"/>
      <el-table-column label="成型面积" align="center" prop="FormingArea" v-if="columns[58].visible"/>
      <el-table-column label="压延包胶面积" align="center" prop="RollCoatingArea" v-if="columns[59].visible"/>
      <el-table-column label="压延出布面积" align="center" prop="RolledFabricArea" v-if="columns[60].visible"/>
      <el-table-column label="硫化面积" align="center" prop="SulfurizationArea" v-if="columns[61].visible"/>
      <el-table-column label="大布面积" align="center" prop="LargeClothArea" v-if="columns[62].visible"/>
      <el-table-column label="小布面积" align="center" prop="SmallClothArea" v-if="columns[63].visible"/>
      <el-table-column label="输送带总面积" align="center" prop="BeltTotalArea" v-if="columns[64].visible"/>
      <el-table-column label="裙边面积" align="center" prop="SkirtArea" v-if="columns[65].visible"/>
      <el-table-column label="隔板面积" align="center" prop="PartitionArea" v-if="columns[66].visible"/>
      <el-table-column label="挡边带总面积" align="center" prop="EdgeBandingTotalArea" v-if="columns[67].visible"/>
      <el-table-column label="钢丝绳输送带工资总面积" align="center" prop="WireropeBeltTotalArea" v-if="columns[68].visible"
                       width="100"
      />
      <el-table-column label="创建者" align="center" prop="createdBy" v-if="columns[69].visible"/>
      <el-table-column label="创建时间" align="center" prop="createdTime" width="180" v-if="columns[70].visible">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新者" align="center" prop="updatedBy" v-if="columns[71].visible"/>
      <el-table-column label="更新时间" align="center" prop="updatedTime" width="180" v-if="columns[72].visible">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updatedTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-button-->
      <!--            size="mini"-->
      <!--            type="text"-->
      <!--            icon="el-icon-edit"-->
      <!--            @click="handleUpdate(scope.row)"-->
      <!--            v-hasPermi="['mes/prod:prodOrderDetail:edit']"-->
      <!--          >修改-->
      <!--          </el-button>-->
      <!--          <el-button-->
      <!--            size="mini"-->
      <!--            type="text"-->
      <!--            icon="el-icon-delete"-->
      <!--            @click="handleDelete(scope.row)"-->
      <!--            v-hasPermi="['mes/prod:prodOrderDetail:remove']"-->
      <!--          >删除-->
      <!--          </el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改订单明细对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="任务编号" prop="SeqNo">
          <el-input v-model="form.SeqNo" placeholder="请输入任务编号"/>
        </el-form-item>
        <el-form-item label="下单日期" prop="OrderDate">
          <el-date-picker clearable
                          v-model="form.OrderDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择下单日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="交货日期" prop="DeliveryDate">
          <el-input v-model="form.DeliveryDate" placeholder="请输入交货日期"/>
        </el-form-item>
        <el-form-item label="订单所属" prop="OrderOwner">
          <el-input v-model="form.OrderOwner" placeholder="请输入订单所属"/>
        </el-form-item>
        <el-form-item label="客户信息" prop="CustomerInfo">
          <el-input v-model="form.CustomerInfo" placeholder="请输入客户信息"/>
        </el-form-item>
        <el-form-item label="输送带长度规格" prop="BeltLengthSpecifications">
          <el-input v-model="form.BeltLengthSpecifications" placeholder="请输入输送带长度规格"/>
        </el-form-item>
        <el-form-item label="面积与重量" prop="AreaAndWeight">
          <el-input v-model="form.AreaAndWeight" placeholder="请输入面积与重量"/>
        </el-form-item>
        <el-form-item label="使用原材料" prop="UsingRawMaterials">
          <el-input v-model="form.UsingRawMaterials" placeholder="请输入使用原材料"/>
        </el-form-item>
        <el-form-item label="输送带宽度" prop="BeltWidth">
          <el-input v-model="form.BeltWidth" placeholder="请输入输送带宽度"/>
        </el-form-item>
        <el-form-item label="输送带布层" prop="BeltClothLayer">
          <el-input v-model="form.BeltClothLayer" placeholder="请输入输送带布层"/>
        </el-form-item>
        <el-form-item label="客户要求输送带长度" prop="BeltRequiredLength">
          <el-input v-model="form.BeltRequiredLength" placeholder="请输入客户要求输送带长度"/>
        </el-form-item>
        <el-form-item label="客户要求上胶厚度" prop="GluingRequiredThickness">
          <el-input v-model="form.GluingRequiredThickness" placeholder="请输入客户要求上胶厚度"/>
        </el-form-item>
        <el-form-item label="客户要求下胶厚度" prop="LowerGlueRequiredThickness">
          <el-input v-model="form.LowerGlueRequiredThickness" placeholder="请输入客户要求下胶厚度"/>
        </el-form-item>
        <el-form-item label="生产上胶厚度" prop="ProductionGluingThickness">
          <el-input v-model="form.ProductionGluingThickness" placeholder="请输入生产上胶厚度"/>
        </el-form-item>
        <el-form-item label="上缓冲胶厚度" prop="UpperBufferAdhesiveThickness">
          <el-input v-model="form.UpperBufferAdhesiveThickness" placeholder="请输入上缓冲胶厚度"/>
        </el-form-item>
        <el-form-item label="生产下胶厚度" prop="ProductionLowerGlueThickness">
          <el-input v-model="form.ProductionLowerGlueThickness" placeholder="请输入生产下胶厚度"/>
        </el-form-item>
        <el-form-item label="下缓冲胶厚度" prop="LowerBufferAdhesiveThickness">
          <el-input v-model="form.LowerBufferAdhesiveThickness" placeholder="请输入下缓冲胶厚度"/>
        </el-form-item>
        <el-form-item label="布胶厚度" prop="ClothGlueThickness">
          <el-input v-model="form.ClothGlueThickness" placeholder="请输入布胶厚度"/>
        </el-form-item>
        <el-form-item label="小布用布布层" prop="SmallClothFabricLayer">
          <el-input v-model="form.SmallClothFabricLayer" placeholder="请输入小布用布布层"/>
        </el-form-item>
        <el-form-item label="小布布料厚度" prop="SmallClothThickness">
          <el-input v-model="form.SmallClothThickness" placeholder="请输入小布布料厚度"/>
        </el-form-item>
        <el-form-item label="是否需要每层加厚" prop="IsNeedThicken">
          <el-input v-model="form.IsNeedThicken" placeholder="请输入是否需要每层加厚"/>
        </el-form-item>
        <el-form-item label="每层加厚厚度" prop="EachLayerThickenThickness">
          <el-input v-model="form.EachLayerThickenThickness" placeholder="请输入每层加厚厚度"/>
        </el-form-item>
        <el-form-item label="额外加厚厚度" prop="ExtraThickeningThickness">
          <el-input v-model="form.ExtraThickeningThickness" placeholder="请输入额外加厚厚度"/>
        </el-form-item>
        <el-form-item label="生产总厚度" prop="TotalProductionThickness">
          <el-input v-model="form.TotalProductionThickness" placeholder="请输入生产总厚度"/>
        </el-form-item>
        <el-form-item label="压延追加厚度" prop="AdditionalThickness">
          <el-input v-model="form.AdditionalThickness" placeholder="请输入压延追加厚度"/>
        </el-form-item>
        <el-form-item label="推荐垫铁厚度" prop="RecommendedShimThickness">
          <el-input v-model="form.RecommendedShimThickness" placeholder="请输入推荐垫铁厚度"/>
        </el-form-item>
        <el-form-item label="推荐半成品宽度" prop="SemiFinishedProductWidth">
          <el-input v-model="form.SemiFinishedProductWidth" placeholder="请输入推荐半成品宽度"/>
        </el-form-item>
        <el-form-item label="压延生产米数" prop="RollingProductionMeters">
          <el-input v-model="form.RollingProductionMeters" placeholder="请输入压延生产米数"/>
        </el-form-item>
        <el-form-item label="推荐垫布宽度" prop="RecommendedPadWidth">
          <el-input v-model="form.RecommendedPadWidth" placeholder="请输入推荐垫布宽度"/>
        </el-form-item>
        <el-form-item label="大布厂家" prop="BigFabricManufacturer">
          <el-input v-model="form.BigFabricManufacturer" placeholder="请输入大布厂家"/>
        </el-form-item>
        <el-form-item label="布料规格" prop="FabricSpecifications">
          <el-input v-model="form.FabricSpecifications" placeholder="请输入布料规格"/>
        </el-form-item>
        <el-form-item label="预计布料使用量" prop="EstimatedFabricUsage">
          <el-input v-model="form.EstimatedFabricUsage" placeholder="请输入预计布料使用量"/>
        </el-form-item>
        <el-form-item label="布宽度" prop="ClothWidth">
          <el-input v-model="form.ClothWidth" placeholder="请输入布宽度"/>
        </el-form-item>
        <el-form-item label="布重量" prop="ClothWeight">
          <el-input v-model="form.ClothWeight" placeholder="请输入布重量"/>
        </el-form-item>
        <el-form-item label="小布使用布料规格" prop="SmallFabricSpecificationsDic">
          <el-input v-model="form.SmallFabricSpecificationsDic" placeholder="请输入小布使用布料规格"/>
        </el-form-item>
        <el-form-item label="小布宽度" prop="SmallClothWidth">
          <el-input v-model="form.SmallClothWidth" placeholder="请输入小布宽度"/>
        </el-form-item>
        <el-form-item label="小布布料使用量" prop="SmallClothUsage">
          <el-input v-model="form.SmallClothUsage" placeholder="请输入小布布料使用量"/>
        </el-form-item>
        <el-form-item label="小布用布重量" prop="SmallClothWeight">
          <el-input v-model="form.SmallClothWeight" placeholder="请输入小布用布重量"/>
        </el-form-item>
        <el-form-item label="用胶工艺" prop="GluingProcess">
          <el-input v-model="form.GluingProcess" placeholder="请输入用胶工艺"/>
        </el-form-item>
        <el-form-item label="上下胶使用胶料" prop="UpperLowerGlue">
          <el-input v-model="form.UpperLowerGlue" placeholder="请输入上下胶使用胶料"/>
        </el-form-item>
        <el-form-item label="上下胶系数" prop="UpperLowerGlueCoefficient">
          <el-input v-model="form.UpperLowerGlueCoefficient" placeholder="请输入上下胶系数"/>
        </el-form-item>
        <el-form-item label="上下胶标准用胶量" prop="UpperLowerGlueUsage">
          <el-input v-model="form.UpperLowerGlueUsage" placeholder="请输入上下胶标准用胶量"/>
        </el-form-item>
        <el-form-item label="下胶使用胶料" prop="LowerGlue">
          <el-input v-model="form.LowerGlue" placeholder="请输入下胶使用胶料"/>
        </el-form-item>
        <el-form-item label="下胶系数" prop="LowerGlueCoefficient">
          <el-input v-model="form.LowerGlueCoefficient" placeholder="请输入下胶系数"/>
        </el-form-item>
        <el-form-item label="下胶标准用胶量" prop="LowerGlueUsage">
          <el-input v-model="form.LowerGlueUsage" placeholder="请输入下胶标准用胶量"/>
        </el-form-item>
        <el-form-item label="大布胶使用胶料" prop="LargeClothGlue">
          <el-input v-model="form.LargeClothGlue" placeholder="请输入大布胶使用胶料"/>
        </el-form-item>
        <el-form-item label="大布胶系数" prop="LargeClothGlueCoefficient">
          <el-input v-model="form.LargeClothGlueCoefficient" placeholder="请输入大布胶系数"/>
        </el-form-item>
        <el-form-item label="胶布标准用胶量" prop="LargeClothGlueUsage">
          <el-input v-model="form.LargeClothGlueUsage" placeholder="请输入胶布标准用胶量"/>
        </el-form-item>
        <el-form-item label="上下缓冲胶标准用胶量" prop="BufferGlueUsage">
          <el-input v-model="form.BufferGlueUsage" placeholder="请输入上下缓冲胶标准用胶量"/>
        </el-form-item>
        <el-form-item label="中间胶" prop="MiddleGlue">
          <el-input v-model="form.MiddleGlue" placeholder="请输入中间胶"/>
        </el-form-item>
        <el-form-item label="中间胶系数" prop="MiddleGlueCoefficient">
          <el-input v-model="form.MiddleGlueCoefficient" placeholder="请输入中间胶系数"/>
        </el-form-item>
        <el-form-item label="中间胶使用量" prop="MiddleGlueUsage">
          <el-input v-model="form.MiddleGlueUsage" placeholder="请输入中间胶使用量"/>
        </el-form-item>
        <el-form-item label="小条宽度" prop="SmallBarWidth">
          <el-input v-model="form.SmallBarWidth" placeholder="请输入小条宽度"/>
        </el-form-item>
        <el-form-item label="小条厚度" prop="SmallBarThickness">
          <el-input v-model="form.SmallBarThickness" placeholder="请输入小条厚度"/>
        </el-form-item>
        <el-form-item label="小条标准使用量" prop="SmallBarStandardUsage">
          <el-input v-model="form.SmallBarStandardUsage" placeholder="请输入小条标准使用量"/>
        </el-form-item>
        <el-form-item label="成型面积" prop="FormingArea">
          <el-input v-model="form.FormingArea" placeholder="请输入成型面积"/>
        </el-form-item>
        <el-form-item label="压延包胶面积" prop="RollCoatingArea">
          <el-input v-model="form.RollCoatingArea" placeholder="请输入压延包胶面积"/>
        </el-form-item>
        <el-form-item label="压延出布面积" prop="RolledFabricArea">
          <el-input v-model="form.RolledFabricArea" placeholder="请输入压延出布面积"/>
        </el-form-item>
        <el-form-item label="硫化面积" prop="SulfurizationArea">
          <el-input v-model="form.SulfurizationArea" placeholder="请输入硫化面积"/>
        </el-form-item>
        <el-form-item label="大布面积" prop="LargeClothArea">
          <el-input v-model="form.LargeClothArea" placeholder="请输入大布面积"/>
        </el-form-item>
        <el-form-item label="小布面积" prop="SmallClothArea">
          <el-input v-model="form.SmallClothArea" placeholder="请输入小布面积"/>
        </el-form-item>
        <el-form-item label="输送带总面积" prop="BeltTotalArea">
          <el-input v-model="form.BeltTotalArea" placeholder="请输入输送带总面积"/>
        </el-form-item>
        <el-form-item label="裙边面积" prop="SkirtArea">
          <el-input v-model="form.SkirtArea" placeholder="请输入裙边面积"/>
        </el-form-item>
        <el-form-item label="隔板面积" prop="PartitionArea">
          <el-input v-model="form.PartitionArea" placeholder="请输入隔板面积"/>
        </el-form-item>
        <el-form-item label="挡边带总面积" prop="EdgeBandingTotalArea">
          <el-input v-model="form.EdgeBandingTotalArea" placeholder="请输入挡边带总面积"/>
        </el-form-item>
        <el-form-item label="钢丝绳输送带工资总面积" prop="WireropeBeltTotalArea">
          <el-input v-model="form.WireropeBeltTotalArea" placeholder="请输入钢丝绳输送带工资总面积"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 布料 抽屉   -->
    <el-drawer
      :title="clothTitle"
      :visible.sync="clothTable"
      direction="rtl"
      size="30%"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="材料编号：">{{ clothData.MaterialNo }}</el-form-item>
        <el-form-item label="材料名称：">{{ clothData.MaterialName }}</el-form-item>
        <el-form-item label="材料规格：">{{ clothData.MaterialSpecification }}</el-form-item>
        <el-form-item label="材料大类：">{{ clothData.MaterialLargeCategories }}</el-form-item>
        <el-form-item label="材料小类：">{{ clothData.MaterialSmallCategories }}</el-form-item>
      </el-form>
    </el-drawer>

    <!-- 胶料 抽屉   -->
    <el-drawer
      :title="glueTitle"
      :visible.sync="glueTable"
      direction="rtl"
      size="50%"
    >
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="加促后重量合计：">{{ glueData.AfterPromotionTotalWeight }}</el-form-item>
      </el-form>
      <el-table :data="glueData.MaterialList_1">
        <el-table-column property="MaterialNo" label="第一次投料材料编号"></el-table-column>
        <el-table-column property="MaterialName" label="材料名称"></el-table-column>
        <el-table-column property="MaterialSpecification" label="材料规格"></el-table-column>
        <el-table-column property="EnterSecondLaneWeight" label="进入二道时重量（KG）"></el-table-column>
      </el-table>
      <el-table :data="glueData.MaterialList_2">
        <el-table-column property="MaterialNo" label="第二次投料材料编号"></el-table-column>
        <el-table-column property="MaterialName" label="材料名称"></el-table-column>
        <el-table-column property="MaterialSpecification" label="材料规格"></el-table-column>
        <el-table-column property="ProductionRequiresWeight" label="生产需要重量（kg）"></el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
import {
  listProdOrderDetail,
  getProdOrderDetail,
  delProdOrderDetail,
  addProdOrderDetail,
  updateProdOrderDetail
} from '@/api/mes/prod/prodOrderDetail'

export default {
  name: 'ProdOrderDetail',
  data() {
    return {
      //布料弹出抽屉
      clothTable: false,
      clothData: {},
      clothTitle: '',
      glueTable: false,
      glueData: {},
      glueTitle: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单明细表格数据
      prodOrderDetailList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 更新时间时间范围
      daterangeOrderDate: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        SeqNo: null,
        OrderDate: null,
        DeliveryDate: null,
        ProductType: null,
        ProductStatus: null,
        OrderOwner: null,
        CustomerInfo: null,
        BeltLengthSpecifications: null,
        AreaAndWeight: null,
        UsingRawMaterials: null,
        BeltWidth: null,
        BeltClothLayer: null,
        BeltRequiredLength: null,
        GluingRequiredThickness: null,
        LowerGlueRequiredThickness: null,
        ProductionGluingThickness: null,
        UpperBufferAdhesiveThickness: null,
        ProductionLowerGlueThickness: null,
        LowerBufferAdhesiveThickness: null,
        ClothGlueThickness: null,
        SmallClothFabricLayer: null,
        SmallClothThickness: null,
        IsNeedThicken: null,
        EachLayerThickenThickness: null,
        ExtraThickeningThickness: null,
        TotalProductionThickness: null,
        AdditionalThickness: null,
        RecommendedShimThickness: null,
        SemiFinishedProductWidth: null,
        RollingProductionMeters: null,
        RecommendedPadWidth: null,
        BigFabricManufacturer: null,
        FabricSpecifications: null,
        EstimatedFabricUsage: null,
        ClothWidth: null,
        ClothWeight: null,
        SmallFabricSpecificationsDic: null,
        SmallClothWidth: null,
        SmallClothUsage: null,
        SmallClothWeight: null,
        GluingProcess: null,
        UpperLowerGlue: null,
        UpperLowerGlueCoefficient: null,
        UpperLowerGlueUsage: null,
        LowerGlue: null,
        LowerGlueCoefficient: null,
        LowerGlueUsage: null,
        LargeClothGlue: null,
        LargeClothGlueCoefficient: null,
        LargeClothGlueUsage: null,
        BufferGlueUsage: null,
        MiddleGlue: null,
        MiddleGlueCoefficient: null,
        MiddleGlueUsage: null,
        SmallBarWidth: null,
        SmallBarThickness: null,
        SmallBarStandardUsage: null,
        FormingArea: null,
        RollCoatingArea: null,
        RolledFabricArea: null,
        SulfurizationArea: null,
        LargeClothArea: null,
        SmallClothArea: null,
        BeltTotalArea: null,
        SkirtArea: null,
        PartitionArea: null,
        EdgeBandingTotalArea: null,
        WireropeBeltTotalArea: null,
        createdBy: null,
        createdTime: null,
        updatedBy: null,
        updatedTime: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        objId: [
          { required: true, message: ' 主键标识不能为空', trigger: 'blur' }
        ],
        SeqNo: [
          { required: true, message: '任务编号不能为空', trigger: 'blur' }
        ]
      },
      columns: [
        { key: 0, label: ` 主键标识`, visible: false },
        { key: 1, label: `任务编号`, visible: true },
        { key: 2, label: `下单日期`, visible: true },
        { key: 3, label: `交货日期`, visible: true },
        { key: 4, label: `产品类型`, visible: true },
        { key: 5, label: `产品状态`, visible: true },
        { key: 6, label: `订单所属`, visible: true },
        { key: 7, label: `客户信息`, visible: true },
        { key: 8, label: `输送带长度规格`, visible: true },
        { key: 9, label: `面积与重量`, visible: true },
        { key: 10, label: `使用原材料`, visible: true },
        { key: 11, label: `输送带宽度`, visible: true },
        { key: 12, label: `输送带布层`, visible: true },
        { key: 13, label: `客户要求输送带长度`, visible: true },
        { key: 14, label: `客户要求上胶厚度`, visible: true },
        { key: 15, label: `客户要求下胶厚度`, visible: true },
        { key: 16, label: `生产上胶厚度`, visible: true },
        { key: 17, label: `上缓冲胶厚度`, visible: true },
        { key: 18, label: `生产下胶厚度`, visible: true },
        { key: 19, label: `下缓冲胶厚度`, visible: true },
        { key: 20, label: `布胶厚度`, visible: true },
        { key: 21, label: `小布用布布层`, visible: true },
        { key: 22, label: `小布布料厚度`, visible: true },
        { key: 23, label: `是否需要每层加厚`, visible: true },
        { key: 24, label: `每层加厚厚度`, visible: true },
        { key: 25, label: `额外加厚厚度`, visible: true },
        { key: 26, label: `生产总厚度`, visible: true },
        { key: 27, label: `压延追加厚度`, visible: true },
        { key: 28, label: `推荐垫铁厚度`, visible: true },
        { key: 29, label: `推荐半成品宽度`, visible: true },
        { key: 30, label: `压延生产米数`, visible: true },
        { key: 31, label: `推荐垫布宽度`, visible: true },
        { key: 32, label: `大布厂家`, visible: true },
        { key: 33, label: `布料规格`, visible: true },
        { key: 34, label: `预计布料使用量`, visible: true },
        { key: 35, label: `布宽度`, visible: true },
        { key: 36, label: `布重量`, visible: true },
        { key: 37, label: `小布使用布料规格`, visible: true },
        { key: 38, label: `小布宽度`, visible: true },
        { key: 39, label: `小布布料使用量`, visible: true },
        { key: 40, label: `小布用布重量`, visible: true },
        { key: 41, label: `用胶工艺`, visible: true },
        { key: 42, label: `上下胶使用胶料`, visible: true },
        { key: 43, label: `上下胶系数`, visible: true },
        { key: 44, label: `上下胶标准用胶量`, visible: true },
        { key: 45, label: `下胶使用胶料`, visible: true },
        { key: 46, label: `下胶系数`, visible: true },
        { key: 47, label: `下胶标准用胶量`, visible: true },
        { key: 48, label: `大布胶使用胶料`, visible: true },
        { key: 49, label: `大布胶系数`, visible: true },
        { key: 50, label: `胶布标准用胶量`, visible: true },
        { key: 51, label: `上下缓冲胶标准用胶量`, visible: true },
        { key: 52, label: `中间胶`, visible: true },
        { key: 53, label: `中间胶系数`, visible: true },
        { key: 54, label: `中间胶使用量`, visible: true },
        { key: 55, label: `小条宽度`, visible: true },
        { key: 56, label: `小条厚度`, visible: true },
        { key: 57, label: `小条标准使用量`, visible: true },
        { key: 58, label: `成型面积`, visible: true },
        { key: 59, label: `压延包胶面积`, visible: true },
        { key: 60, label: `压延出布面积`, visible: true },
        { key: 61, label: `硫化面积`, visible: true },
        { key: 62, label: `大布面积`, visible: true },
        { key: 63, label: `小布面积`, visible: true },
        { key: 64, label: `输送带总面积`, visible: true },
        { key: 65, label: `裙边面积`, visible: true },
        { key: 66, label: `隔板面积`, visible: true },
        { key: 67, label: `挡边带总面积`, visible: true },
        { key: 68, label: `钢丝绳输送带工资总面积`, visible: true },
        { key: 69, label: `创建者`, visible: false },
        { key: 70, label: `创建时间`, visible: false },
        { key: 71, label: `更新者`, visible: false },
        { key: 72, label: `更新时间`, visible: false }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询订单明细列表 */
    getList() {
      this.loading = true
      this.queryParams.params = {}
      if (null != this.daterangeOrderDate && '' != this.daterangeOrderDate) {
        this.queryParams.params['beginOrderDate'] = this.daterangeOrderDate[0]
        this.queryParams.params['endOrderDate'] = this.daterangeOrderDate[1]
      }
      listProdOrderDetail(this.queryParams).then(response => {
        this.prodOrderDetailList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        objId: null,
        SeqNo: null,
        OrderDate: null,
        DeliveryDate: null,
        ProductType: null,
        ProductStatus: null,
        OrderOwner: null,
        CustomerInfo: null,
        BeltLengthSpecifications: null,
        AreaAndWeight: null,
        UsingRawMaterials: null,
        BeltWidth: null,
        BeltClothLayer: null,
        BeltRequiredLength: null,
        GluingRequiredThickness: null,
        LowerGlueRequiredThickness: null,
        ProductionGluingThickness: null,
        UpperBufferAdhesiveThickness: null,
        ProductionLowerGlueThickness: null,
        LowerBufferAdhesiveThickness: null,
        ClothGlueThickness: null,
        SmallClothFabricLayer: null,
        SmallClothThickness: null,
        IsNeedThicken: null,
        EachLayerThickenThickness: null,
        ExtraThickeningThickness: null,
        TotalProductionThickness: null,
        AdditionalThickness: null,
        RecommendedShimThickness: null,
        SemiFinishedProductWidth: null,
        RollingProductionMeters: null,
        RecommendedPadWidth: null,
        BigFabricManufacturer: null,
        FabricSpecifications: null,
        EstimatedFabricUsage: null,
        ClothWidth: null,
        ClothWeight: null,
        SmallFabricSpecificationsDic: null,
        SmallClothWidth: null,
        SmallClothUsage: null,
        SmallClothWeight: null,
        GluingProcess: null,
        UpperLowerGlue: null,
        UpperLowerGlueCoefficient: null,
        UpperLowerGlueUsage: null,
        LowerGlue: null,
        LowerGlueCoefficient: null,
        LowerGlueUsage: null,
        LargeClothGlue: null,
        LargeClothGlueCoefficient: null,
        LargeClothGlueUsage: null,
        BufferGlueUsage: null,
        MiddleGlue: null,
        MiddleGlueCoefficient: null,
        MiddleGlueUsage: null,
        SmallBarWidth: null,
        SmallBarThickness: null,
        SmallBarStandardUsage: null,
        FormingArea: null,
        RollCoatingArea: null,
        RolledFabricArea: null,
        SulfurizationArea: null,
        LargeClothArea: null,
        SmallClothArea: null,
        BeltTotalArea: null,
        SkirtArea: null,
        PartitionArea: null,
        EdgeBandingTotalArea: null,
        WireropeBeltTotalArea: null,
        createdBy: null,
        createdTime: null,
        updatedBy: null,
        updatedTime: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeOrderDate = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.objId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加订单明细'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const objId = row.objId || this.ids
      getProdOrderDetail(objId).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改订单明细'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.objId != null) {
            updateProdOrderDetail(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addProdOrderDetail(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },

    //表格查看详情
    detailsSearch(row, type) {
      this.clothData = {};
      this.glueData = {};
      if (type === 1) {
        this.clothTable = true
        this.clothData = JSON.parse(row.FabricSpecifications)
        this.clothTitle = '布料规格|任务编号:' + row.SeqNo
        return
      }
      if (type === 2) {
        this.clothTable = true
        this.clothData = JSON.parse(row.SmallFabricSpecificationsDic)
        this.clothTitle = '小布使用布料规格|任务编号:' + row.SeqNo
        return
      }
      if ([3, 4, 5, 6].includes(type)) {
        if (type === 3){
          this.glueData = JSON.parse(row.UpperLowerGlue)
          this.glueTitle = '上下胶使用胶料|任务编号:' + row.SeqNo
        } else if (type === 4) {
          this.glueData = JSON.parse(row.LowerGlue)
          this.glueTitle = '下胶使用胶料|任务编号:' + row.SeqNo
        } else if (type === 5) {
          this.glueData = JSON.parse(row.LargeClothGlue)
          this.glueTitle = '大布胶使用胶料|任务编号:' + row.SeqNo
        } else if (type === 6) {
          this.glueData = JSON.parse(row.MiddleGlue)
          this.glueTitle = '中间胶|任务编号:' + row.SeqNo
        }
        this.glueData.MaterialList_1.forEach(item => {
          item.MaterialName = item.Material.MaterialName
          item.MaterialSpecification = item.Material.MaterialSpecification
          item.MaterialLargeCategories = item.Material.MaterialLargeCategories
          item.MaterialSmallCategories = item.Material.MaterialSmallCategories
        })
        this.glueData.MaterialList_2.forEach(item => {
          item.MaterialName = item.Material.MaterialName
          item.MaterialSpecification = item.Material.MaterialSpecification
          item.MaterialLargeCategories = item.Material.MaterialLargeCategories
          item.MaterialSmallCategories = item.Material.MaterialSmallCategories
        })
        this.glueTable = true
      }
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const objIds = row.objId || this.ids
      this.$modal.confirm('是否确认删除订单明细编号为"' + objIds + '"的数据项？').then(function() {
        return delProdOrderDetail(objIds)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('mes/prod/prodOrderDetail/export', {
        ...this.queryParams
      }, `prodOrderDetail_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
