sen-yu-new-web/src/views/packing-list/packinglist-fabrics/addFabricDrawer.vue

<template>
  <!-- 新增面料 装箱单  -->
  <div id="addFabricDrawer">
    <a-drawer :title="(defaultMethod == 'add')?'新增面料':'编辑面料'" width="89%" placement="right" :closable="true" :visible="visible" @close="handleCancel">
      <!-- 主表信息 填写-->
      <a-card :bordered="true">
        <div class="table-page-search-wrapper">
          <a-form-model layout="inline" ref="form" :model="addFabric" :rules="validatorRules">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-model-item label="单号" prop="oddNum">
                  {{addFabric.documentNo}}
                  <!-- <a-input placeholder="自动生成" v-model="addFabric.documentNo"></a-input> -->
                </a-form-model-item>
              </a-col>

              <!-- <a-col :md="6" :sm="8">
                <a-form-model-item label="订单号" prop="oddNum">
                  <a-input placeholder="选择子表自动生成" v-model="addFabric.orderNumber"></a-input>
                </a-form-model-item>
              </a-col> -->

              <a-col :md="6" :sm="8">
                <a-form-model-item label="集装箱号" prop="containerNumber">
                  <a-input placeholder="请输入集装箱号" v-model="addFabric.containerNumber"></a-input>
                </a-form-model-item>
              </a-col>

                 <a-col :md="6" :sm="8">
                <a-form-model-item label="铅分号" prop="plumbumNo">
                  <a-input placeholder="请输入铅分号" v-model="addFabric.plumbumNo"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="装柜日期" prop="latestDateOfShipment">
                  <a-date-picker
                    placeholder="请选择装柜日期"
                    :format="dateFormat"
                    style="width: 100%"
                    v-model="addFabric.latestDateOfShipment"
                  />
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="成衣工厂" prop="garmentFactory">
                  <a-input placeholder="勾选数据自动生成" v-model="addFabric.garmentFactory"></a-input>
                </a-form-model-item>
              </a-col>

              <!-- <a-col :md="6" :sm="8">
                <a-form-model-item label="发票号" prop="invoiceNum">
                  <a-input placeholder="请输入发票号" v-model="addFabric.invoiceNo"></a-input>
                </a-form-model-item>
              </a-col> -->

              <!-- <a-col :md="6" :sm="8">
                <a-form-model-item label="制单人" prop="preparedBy">
                  <a-input placeholder="请输入制单人" v-model="addFabric.preparedBy"></a-input>
                </a-form-model-item>
              </a-col> -->

              <!-- <a-col :md="6" :sm="8">
                <a-form-model-item label="制单日期" prop="preparedDate">
                  <a-date-picker
                    placeholder="请选择制单日期"
                    :format="dateFormat"
                    style="width: 100%"
                    v-model="addFabric.preparedDate"
                  />
                </a-form-model-item>
              </a-col> -->

              <a-col :md="6" :sm="8">
                <a-form-model-item label="外销发票号" prop="exportInvoiceNo">
                  <a-input placeholder="请输入外销发票号" v-model="addFabric.exportInvoiceNo" @blur="convertUppercase(addFabric.exportInvoiceNo)"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="托书号" prop="shippingOrderNumber">
                  <a-input placeholder="请输入托书号" v-model="addFabric.shippingOrderNumber" @blur="convertUppercaseNumber(addFabric.shippingOrderNumber)"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="备注" prop="remarks">
                  <a-input placeholder="请输入备注" v-model="addFabric.remarks"></a-input>
                </a-form-model-item>
              </a-col>

           
            </a-row>
          </a-form-model>
        </div>
      </a-card>

      <!--操作按钮区域 参照发运明细 増行-->
      <a-card :bordered="true" style="margin:10px 0 60px 0;">
        <div class="table-operator">
          <a-button type="primary" @click="referadvancePackingList" icon="ordered-list">参照出运明细</a-button>
          <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
        </div>

        <!-- 子表   -->
        <a-spin :spinning="confirmLoading">
          <a-form-model ref="formRef" >
            <a-table
              bordered
              :columns="addFabricColumns"
              :data-source="addFabricData"
              :loading="loading"
              :scroll="{ x: 1500,y: 350 }"
              @change="handleTableChange"
            >
            <!-- 自定义表头 -->
             <span slot="netWeightTitle" class="form-table-heard">
             净重/NW/kg
            </span>
            <span slot="grossWeightTitle" class="form-table-heard">
             毛重/GW/kg
            </span>
            <span slot="dyelotNumberTitle" class="form-table-heard">
             缸号/Batch no.
            </span>
            <span slot="actualDeclaredQuantityTitle" class="form-table-heard">
             实际报关数量
            </span>
              <!-- 操作 -->
              <span slot="operationSlot" slot-scope="text, record,index">
                <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record,index)">
                  <a href="javascript:void(0);" style="color:red;">删除</a>
                </a-popconfirm>
                <a-divider type="vertical"/> 
                <a href="javascript:void(0);" @click="copy(record,index)">复制</a>
              </span>
                <!-- 备注 -->
              <template slot="remarks2" slot-scope="text, record, index">
                <a-form-model-item prop="remarks2">
                  <a-input style="width:100%" type="text" v-model="record.remarks2" />
                </a-form-model-item>
              </template>
              
              <!-- 缸号 -->
               <template slot="dyelotNumber" slot-scope="text, record, index">
                <a-form-model-item prop="dyelotNumber">
                  <a-input style="width:100%" type="text" v-model="record.dyelotNumber" />
                </a-form-model-item>
              </template>

              
              <!-- 成分 -->
              <template slot="composition" slot-scope="text, record, index">
                <a-form-model-item prop="composition">
                  <a-input style="width:100%" type="text" v-model="record.composition" />
                </a-form-model-item>
              </template>


              <!-- 门幅 -->
              <template slot="width" slot-scope="text, record, index">
                <a-form-model-item prop="width">
                  <a-input style="width:100%" type="text" v-model="record.width"  @change="changeNetWeight(record)"/>
                </a-form-model-item>
              </template>

              <!-- 匹数 -->
               <template slot="rolls" slot-scope="text, record, index">
                <a-form-model-item prop="rolls">
                  <a-input style="width:100%" type="text" v-model="record.rolls" />
                </a-form-model-item>
              </template>

              <!-- 毛重 -->
              <template slot="grossWeight" slot-scope="text, record, index">
                <a-form-model-item prop="grossWeight">
                  <a-input style="width:100%" type="text" v-model="record.grossWeight" />
                </a-form-model-item>
              </template>

              <!-- 净重 -->
              <template slot="netWeight" slot-scope="text, record, index">
                <a-form-model-item prop="netWeight">
                  <a-input style="width:100%" type="text" v-model="record.netWeight" @change="changeNetWeight(record)" />
                </a-form-model-item>
              </template>

              <!-- 染后重 -->
              <template slot="afterHeavy" slot-scope="text, record, index">
                <a-form-model-item prop="afterHeavy">
                  <a-input style="width:100%" type="text" v-model="record.afterHeavy" />
                </a-form-model-item>
              </template>

              <!-- 拷布重 -->
              <template slot="kaoClothWeight" slot-scope="text, record, index">
                <a-form-model-item prop="kaoClothWeight">
                  <a-input style="width:100%" type="text" v-model="record.kaoClothWeight" />
                </a-form-model-item>
              </template>

              <!-- 供应商编码 （染厂）-->
              <template slot="supplierCodeDyeingPlant" slot-scope="text, record, index">
                <a-form-model-item prop="supplierCodeDyeingPlant">
                  <a-input style="width:100%" type="text" v-model="record.supplierCodeDyeingPlant" />
                </a-form-model-item>
              </template>

              <!-- 供应商（染厂） -->
              <template slot="supplierDyeingPlant" slot-scope="text, record, index">
                <a-form-model-item prop="supplierDyeingPlant">
                  <a-input style="width:100%" type="text" v-model="record.supplierDyeingPlant" />
                </a-form-model-item>
              </template>
          

              <!-- 供应商编码（印厂） -->
              <template slot="supplierCodePrintingPlant" slot-scope="text, record, index">
                <a-form-model-item prop="supplierCodePrintingPlant">
                  <a-input style="width:100%" type="text" v-model="record.supplierCodePrintingPlant" />
                </a-form-model-item>
              </template>

              <!-- 供应商（印厂） -->
              <template slot="supplierPrintingPlant" slot-scope="text, record, index">
                <a-form-model-item prop="supplierPrintingPlant">
                  <a-input style="width:100%" type="text" v-model="record.supplierPrintingPlant" />
                </a-form-model-item>
              </template>

              <!-- 包装方式 -->
              <template slot="mannerOfPacking" slot-scope="text, record, index">
                <a-form-model-item prop="mannerOfPacking">
                  <a-input style="width:100%" type="text" v-model="record.mannerOfPacking" />
                </a-form-model-item>
              </template>
             <!-- 处理方式 -->
              <template slot="treatmentMethod" slot-scope="text, record, index">
                <a-form-model-item prop="treatmentMethod">
                  <a-input style="width:100%" type="text" v-model="record.treatmentMethod" />
                </a-form-model-item>
              </template>
               <!-- 手册纱 -->
                <template slot="manualYarnFlag" slot-scope="text, record, index">
                <a-form-model-item prop="manualYarnFlag">
                  <a-select v-model="record.manualYarnFlag" @change='changeManualYarnFlag'>
                    <a-select-option :value="1">是</a-select-option>
                    <a-select-option :value="0">否</a-select-option>
                  </a-select>
                </a-form-model-item>
              </template>

                <!--手册纱单价 -->
              <template slot="manualYarnUnitPrice" slot-scope="text, record, index">
                <a-form-model-item prop="manualYarnUnitPrice">
                  <a-input style="width:100%" type="text" v-model="record.manualYarnUnitPrice" :disabled='manualYarnDisabled' @change="changeManualYarn('Price',record.manualYarnUnitPrice)" />
                </a-form-model-item>
              </template>

              <!--手册纱占比 -->
              <template slot="manualYarnProportion" slot-scope="text, record, index">
                <a-form-model-item prop="manualYarnProportion">
                  <a-input style="width:100%" type="text" v-model="record.manualYarnProportion"  :disabled='manualYarnDisabled' @change="changeManualYarn('Proportion',record.manualYarnProportion)" />
                </a-form-model-item>
              </template>

              <!-- 柜号 -->
              <template slot="containerNumber" slot-scope="text, record, index">
                <a-form-model-item prop="containerNumber">
                  <a-input style="width:100%" type="text" v-model="record.containerNumber" />
                </a-form-model-item>
              </template>

              <!-- 入库数量 -->
              <template slot="inventoryQuantity" slot-scope="text, record, index">
                <a-form-model-item prop="inventoryQuantity">
                  <a-input style="width:100%" type="text" v-model="record.inventoryQuantity" @change="inventoryQuantityChange(record)" />
                </a-form-model-item>
              </template>

              <!-- 实际报关数量 -->
              <template slot="actualDeclaredQuantity" slot-scope="text, record, index">
                <a-form-model-item prop="actualDeclaredQuantity">
                  <a-input style="width:100%" type="text" v-model="record.actualDeclaredQuantity" @change="actualDeclaredQuantityChange(record)"/>
                </a-form-model-item>
              </template> 
            

            </a-table>
          </a-form-model>
        </a-spin>
      </a-card>
      <!-- 页面底部提交取消 -->
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 999
        }"
      >
        <a-popconfirm title="确定放弃新增？" @confirm="handleCancel" okText="确定" cancelText="取消">
          <a-button :style="{ marginRight: '8px' }">取消</a-button>
        </a-popconfirm>
        <a-button type="primary" @click="submitAdd">
         保存
        </a-button>
      </div>
    </a-drawer>

    <!-- 参照发运明细弹框 -->
    <referShipDetails-modal ref="referShipDetailsModal" :father="aa" @callback="getFabricData" @ok="modalFormOk"></referShipDetails-modal>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getShippingDetailId,addFabricList,editFabricList} from '@api/document/packing-list/packinglist-fabrics'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'
import referShipDetailsModal from '@views/packing-list/packinglist-fabrics/referShipDetailsModal.vue'

export default {
  name: 'AddFabricDrawer', //  新增 装箱单 -面料
  mixins: [JeecgListMixin],
  computed: {},
  components: { JEllipsis, referShipDetailsModal,moment }, // 参照发运明细 弹框
  props: {
    fatherList: {
      type: Function,
      default: null
    }
  },
  data() {
    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
    return {
      // 表头
      addFabricColumns: [
        {
          title: '业务员 Merchandiser',
          dataIndex: 'salesman',
          width: 120,
          // fixed: 'left',
          className: 'replacecolor'
        },
        {
          title: '计划单号',
          dataIndex: 'planLotNumber',
          width: 160,
          // fixed: 'left',
          className: 'replacecolor'
        },
        {
          title: '款号/Kimball',
          dataIndex: 'itemNumber',
          width: 120,
          className: 'replacecolor'
        },
        {
          // title: '缸号/Batch no.',
          dataIndex: 'dyelotNumber',
          scopedSlots: { customRender: 'dyelotNumber' },
          slots:{title:'dyelotNumberTitle'},
          width: 170,
          className: 'replacecolor'
        },
        {
          title: '颜色/Color',
          dataIndex: 'colour',
          width: 120,
          className: 'replacecolor'
        },

        {
          title: '项目/Item(存货编码)',
          dataIndex: 'inventoryCode',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '存货名称(辅料名称)',
          dataIndex: 'inventoryName',
          width: 160,
          className: 'replacecolor'
        },

        {
          title: '报关品名',
          dataIndex: 'declarationName',
          width: 120,
          className: 'replacecolor'
        },

        {
          title: '成分/Composition',
          dataIndex: 'composition',
          scopedSlots: { customRender: 'composition' },
          width: 150,
          className: 'replacecolor'
        },

        {
          title: '门幅/Width',
          dataIndex: 'width',
          // scopedSlots: { customRender: 'width' },
          width: 140,
          className: 'replacecolor'
        },
        {
          title: '匹数/Rolls',
          dataIndex: 'rolls',
          scopedSlots: { customRender: 'rolls' },
          width: 120,
          className: 'replacecolor'
        },
        {
          // title: '毛重/GW/kg',
          dataIndex: 'grossWeight',
          scopedSlots: { customRender: 'grossWeight' },
          width: 170,
          className: 'replacecolor',
          slots:{title:'grossWeightTitle'}
        },
        {
          // title: '净重/NW/kg',
          scopedSlots: { customRender: 'netWeight' },
          dataIndex: 'netWeight',
          width: 170,
          className: 'replacecolor',
           slots:{title:'netWeightTitle'}
        },

        {
          title: '染后重',
          dataIndex: 'afterHeavy',
          scopedSlots: { customRender: 'afterHeavy' },
          width: 90,
          className: 'replacecolor'
        },
        {
          title: '拷布重',
          dataIndex: 'kaoClothWeight',
          scopedSlots: { customRender: 'kaoClothWeight' },
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '米数/Length/m',
          dataIndex: 'meter',
          width: 130,
          className: 'replacecolor'
        },
          {
          // title: '实际报关数量',
          dataIndex: 'actualDeclaredQuantity',
          scopedSlots: { customRender: 'actualDeclaredQuantity' },
          width: 170,
          className: 'replacecolor',
          slots:{title:'actualDeclaredQuantityTitle'}
        },
        // {
        //   title: '价格',
        //   dataIndex: 'price',
        //   width: 120,
        //   className: 'replacecolor'
        // },
        {
          title: '克重/G',
          dataIndex: 'gramWeight',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '供应商编码(染厂)',
          dataIndex: 'supplierCodeDyeingPlant',
          // scopedSlots: { customRender: 'supplierCodeDyeingPlant' },
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '供应商(染厂)',
          dataIndex: 'supplierDyeingPlant',
          // scopedSlots: { customRender: 'supplierDyeingPlant' },
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '供应商编码(印厂)',
          // scopedSlots: { customRender: 'supplierCodePrintingPlant' },
          dataIndex: 'supplierCodePrintingPlant',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '供应商(印厂)',
          dataIndex: 'supplierPrintingPlant',
          // scopedSlots: { customRender: 'supplierPrintingPlant' },
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '包装方式',
          dataIndex: 'mannerOfPacking ',
          scopedSlots: { customRender: 'mannerOfPacking' },
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '处理方式',
          scopedSlots: { customRender: 'treatmentMethod' },
          dataIndex: 'treatmentMethod',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '是否手册纱',
          dataIndex: 'manualYarnFlag',
          scopedSlots: { customRender: 'manualYarnFlag' },
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '手册纱单价',
          dataIndex: 'manualYarnUnitPrice',
          scopedSlots: { customRender: 'manualYarnUnitPrice' },
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '手册纱占比%',
          dataIndex: 'manualYarnProportion',
          scopedSlots: { customRender: 'manualYarnProportion' },
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '柜号',
          dataIndex: 'containerNumber',
          scopedSlots: { customRender: 'containerNumber' },
          width: 120,
          className: 'replacecolor'
        },

        // {
        //   title: '备注',
        //   dataIndex: 'memo',
        //   width: 160,
        //   customRender: t => ellipsis(t),
        //   className: 'replacecolor'
        // },
        // {
        //   title: '入库数量',
        //   dataIndex: 'inventoryQuantity',
        //   scopedSlots: { customRender: 'inventoryQuantity' },
        //   width: 120,
        //   className: 'replacecolor'
        // },
        {
          title: '规格型号',
          dataIndex: 'specificationAndModel',
          width: 120,
          className: 'replacecolor'
        },
      
        {
          title: '超发',
          dataIndex: 'excessQuantity',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '单位',
          dataIndex: 'masterMetering',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '备注(U8)',
          dataIndex: 'remarks2',
          width: 160,
          // fixed: 'right',
          scopedSlots: { customRender: 'remarks2' },          
          className: 'replacecolor'
        },

        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operationSlot' },
          width: 120,
          fixed: 'right',
          className: 'replacecolor'
        }
      ],
      addFabricData: [],
      loading: false, // 表格加载
      addFabric: {},
      visible: false,
      judge : 0,
      manualYarnDisabled:false,
      confirmLoading: false,
      defaultMethod:'add',
      validatorRules: {
        plumbumNo: [{ required: true, message: '铅分号不能为空'}],
        containerNumber: [{ required: true, message: '集装箱号不能为空'}],
        exportInvoiceNo: [{ required: true, message: '外销发票号不能为空'}],
        latestDateOfShipment: [{ required: true, message: '装柜日期不能为空'}],
        garmentFactory: [{ required: true, message: '成衣工厂不能为空'}],
        // 待确定还有哪些必填信息
      },
      dateFormat: 'YYYY-MM-DD'
    }
  },
  created() {},
  mounted() {},
  methods: {
    moment,

     //外销发票转化大写
    convertUppercase(val){
      this.addFabric.exportInvoiceNo = val.toUpperCase()
    },

    //托书号
    convertUppercaseNumber(val) {
      this.addFabric.shippingOrderNumber = val.toUpperCase()
    },

    // 参照发运明细 弹框
    referadvancePackingList() {
      console.log('打开参照发运明细 弹框')
      this.$refs.referShipDetailsModal.referShipDetailsModVis = true
      this.$refs.referShipDetailsModal.getReferenceList()
      if(this.addFabricData.length !== 0){
      this.$refs.referShipDetailsModal.fatherFactory = this.addFabric.garmentFactory
      }
    },
    getFabricData(rows,token) {
      // this.addFabric = {}
      // this.addFabricData = []
      var rowsId = [],
         group = []
      rows.map(item => {rowsId.push(item.id),group.push(item.groupId)} )
      var ids = rowsId.toString(),
          groupId =group.toString()
      getShippingDetailId({ids:ids,groupIds:groupId}).then(res => {
          if (res.success) {
            var data = res.result
            if(this.addFabricData.length == 0){
               this.addFabric ={
              // id:data.id,
              // orderNumber:data.orderNumber,
              documentNo:data.documentNo,
              containerNumber : data.containerNumber,
              latestDateOfShipment : data.latestDateOfShipment,
              garmentFactory : data.garmentFactory,
              invoiceNo : data.invoiceNo,
              // preparedBy : data.preparedBy,
              preparedDate :  moment(new Date()).format('YYYY-MM-DD'),
              exportInvoiceNo : data.exportInvoiceNo,
              shippingOrderNumber : data.shippingOrderNumber,
              plumbumNo : data.plumbumNo,
              customer : data.customer,
              customerAbbreviation : data.customerAbbreviation
            }
            }else {
              data.syPackingListFabricItem.map(item =>{
                item.isAdd = 1
              })
            }
            this.addFabricData = this.addFabricData.concat(data.syPackingListFabricItem )
            this.addFabricData.map(item =>{
              // item.inventoryQuantity = 0
              item.meter = 0
              item.excessQuantity = item.actualDeclaredQuantity - item.remainingQuantity
              if(item.excessQuantity < 0){
                item.excessQuantity = 0
              }
              if(item.manualYarnFlag == 0){
                 this.manualYarnDisabled = true
              }else {
                 this.manualYarnDisabled = false
              }
              var code = item.inventoryCcode.slice(0,2)
              if(!((code =='03' || code == '04') && (item.inventoryCcode !== '0399' || item.inventoryCcode !== '0499'))){
                item.actualDeclaredQuantity = item.inventoryQuantity
              }
            })
          }else {
            this.$message.error(res.message);
          }
        })
    },
    changeNetWeight(event){
      if(Number(event.netWeight) !==0 && Number(event.width) !== 0 && Number(event.gramWeight) !== 0 && event.netWeight!==null && event.netWeight!=="" && event.width !== "" && event.gramWeight !== ""){
        event.meter = (event.netWeight/(event.width/100)/(event.gramWeight/1000)).toFixed(2)
      }else {
        event.meter = 0
      }
      var code = event.inventoryCcode.slice(0,2)
      if((code =='03' || code == '04') && (event.inventoryCcode !== '0399' || event.inventoryCcode !== '0499')){
        event.actualDeclaredQuantity = event.meter
      }
    },
    // 増行
    handleAddColumn() {
      console.log('増行')
      const addrow = {
        accountSet: '',
        clothesFactory: '',
        hod: '',
        styleNo: '',
        poNo: '',
        itemNo: '',
        dcLabel: '',
        s: '',
        m: '',
        l: '',
        xl: '',
        xxl: '',
        xxxl: '',
        inceptionBoxNo: '',
        endBoxNo: '',
        colorChUsa: '',
        configCode: '',
        packagesBox: '',
        boxes: '',
        totalPackagesNum: '',
        suttle: '',
        totalSuttle: '',
        roughWeight: '',
        totalRoughWeigh: '',
        boxLength: '',
        boxWidth: '',
        boxHeight: '',
        totalVolume: '',
        netNetWeight: '',
        price: '',
        totalPrices: '',
        note: '',
        operation: ''
      }
      this.addFabricData.push(addrow)
    },

    judageCloumn(){
      this.addFabricColumns.map(item => {
        if(item.title ==  "匹数/Rolls"){
          item.title = '箱数'
        }
      })
      var obj = {
          title: '尺码',
          dataIndex: 'size',
          width: 120,
          className: 'replacecolor'
      }
      this.addFabricColumns.splice(30,0,obj)
   },

    // -------------------------------------
    // 操作 删除
    handleDelete(record,index) {
      this.addFabricData.splice(index, 1);
    },
      //修改是否为手册纱时触发
    changeManualYarnFlag(val) {
      this.addFabricData.map(item =>{
      item.manualYarnFlag = null
      item.manualYarnFlag = val
      //是手工纱时
      if(val === 0){
        item.manualYarnUnitPrice = ""
        item.manualYarnProportion = ""
        this.manualYarnDisabled = true
      }else {
        this.manualYarnDisabled = false
      }
      })
      this.$forceUpdate()
   },
   //输入手册纱单价或者手册纱占比时触发
   changeManualYarn(data,val){
     this.addFabricData.map(item => {
       if(data === 'Price'){item.manualYarnUnitPrice = val}
       else{item.manualYarnProportion = val}
     })
     this.$forceUpdate()
   },

    //操作 复制
    copy(record,index){
      var newRow = JSON.parse(JSON.stringify(record));
      newRow.isAdd = 1
      this.addFabricData.splice(index+1, 0, newRow);
    },
    // -------------------------------------

    // 抽屉 取消
    handleCancel() {
      console.log('点击抽屉取消')
      this.close()
    },
    // 抽屉 提交
    submitAdd() {
      console.log('保存新增、刷新装箱单-面料')
      const that = this
      // 触发表单验证
      this.$refs.form.validate(async valid => {
        if (valid) {
          // that.confirmLoading = true
          var newObj = {
            documentNo:this.addFabric.documentNo,
            plumbumNo:this.addFabric.plumbumNo,
            // orderNumber:this.addFabric.orderNumber,
            containerNumber:this.addFabric.containerNumber,
            latestDateOfShipment:this.addFabric.latestDateOfShipment,
            garmentFactory:this.addFabric.garmentFactory,
            invoiceNo:this.addFabric.invoiceNo,
            preparedBy:this.addFabric.preparedBy,
            preparedDate:this.addFabric.preparedDate,
            exportInvoiceNo:this.addFabric.exportInvoiceNo,
            shippingOrderNumber:this.addFabric.shippingOrderNumber,
            remarks:this.addFabric.remarks,
            customer : this.addFabric.customer,
            customerAbbreviation : this.addFabric.customerAbbreviation,
            syPackingListFabricItem:this.addFabricData
          }
         await this.JudgeVluabled(newObj)
         if(this.judge == 0){
           if(this.defaultMethod === 'add'){
            addFabricList(newObj).then(res => {
             if (res.success) {
              this.$message.success('新增成功')
              this.close()
              //清空信息
              newObj = {};
             that.fatherList() // 调用父组件 查询方法
            }else{
              this.$message.error(res.message)
              this.close()
            }
           })
          }else {
            newObj.id = this.addFabric.id,
            editFabricList(newObj).then(res => {
             if (res.success) {
              this.$message.success('编辑成功')
              this.close()
              //清空信息
              newObj = {};
              that.fatherList() // 调用父组件 查询方法
            }else{
              this.$message.error(res.message)
              this.close()
            }
           })
          }
         }
          
          
        }
      })
      // this.close()
      // this.getShipmentList() // 刷新 装箱单-面料
    },

     JudgeVluabled(data){
          this.judge = 0
           for (var i=0; i<data.syPackingListFabricItem.length;i++){
             var tableRow = data.syPackingListFabricItem[i];
            //是否未填
            var required = [
           {key:'dyelotNumber',value:'缸号'},
           {key:'grossWeight',value:'毛重/GW/kg'},
           {key:'netWeight',value:'净重/NW/kg'},
           {key:'actualDeclaredQuantity',value:'实际报关数量'},
              ]
             for(var j=0 ; j<required.length;j++){
                if(tableRow[required[j].key] == null || tableRow[required[j].key] == "" || tableRow[required[j].key] == undefined){
                  this.$message.error('第'+(i+1)+'行'+required[j].value+'无值，无法保存');
                  this.judge+=1
                  return
                }
             }
           }
      
    },

    // -------------------------------------
    close() {
      this.$emit('close')
      this.visible = false
      this.defaultMethod = 'add'
      this.addFabric = {}
      this.addFabricData = []
      this.addFabricColumns = this.addFabricColumns.filter(item => item.title !== '尺码')
      this.addFabricColumns.map(item => {
        if(item.title ==  "箱数"){
          item.title = '匹数/Rolls'
        }
      })
      this.$refs.form.resetFields()
    },
    // - father------------------------------------
    aa() {},
    modalFormOk() {},
    inventoryQuantityChange(record){
      record.actualDeclaredQuantity = record.inventoryQuantity
    },
    actualDeclaredQuantityChange(record){
      if(record.actualDeclaredQuantity !== '' || !record.actualDeclaredQuantity){
        record.excessQuantity = record.actualDeclaredQuantity - record.remainingQuantity
        if(record.excessQuantity < 0){
          record.excessQuantity = 0}
      }

    },

    // 分页、排序、筛选变化时触发
    // handleTableChange(pagination, filters, sorter) {
    //   // console.log('当前页信息>>>>',pagination)
    //   this.queryParam.pageNo = pagination.current
    //   this.getAnnList()
    // }'
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

// /deep/ th.replacecolor {
//   background-color: #ccc;
// }

// 抽屉里的card样式
/deep/ .ant-drawer-content {
  background-color: #f0f2f5;
}
/deep/ .ant-drawer-body {
  padding: 10px;
}
</style>