sen-yu-new-web/src/views/packing-list/packinglist-clothes/clothesAddDrawer.vue

<template>
  <!-- 新增成衣 -->
  <div id="clothesAddDrawer">
    <a-drawer
      :title="(editDecide == '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="formModel" :model="clothesAdd" :rules="validatorRules">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-model-item label="订单号" prop="orderNum">
                  {{clothesAdd.orderNum}}
                  <!-- <a-input placeholder="请输入订单号" v-model="clothesAdd.orderNum" readOnly></a-input> -->
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="款号" prop="styleNum">
                  {{clothesAdd.styleNum}}
                  <!-- <a-input placeholder="请输入款号" v-model="clothesAdd.styleNum" readOnly></a-input> -->
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="中文品名" prop="name">
                  {{clothesAdd.name}}
                  <!-- <a-input placeholder="请输入中文品名" v-model="clothesAdd.name"></a-input> -->
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="英文品名" prop="englishProductName">
                  {{clothesAdd.englishProductName | ellipsis}}
                  <!-- <a-input placeholder="请输入英文品名" v-model="clothesAdd.englishProductName"></a-input> -->
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="尺码范围" prop="sizeRange">
                  {{clothesAdd.sizeRange}}
                  <!-- <a-input placeholder="请输入尺码范围" v-model="clothesAdd.sizeRange" readOnly></a-input> -->
                  <!-- <a-select placeholder="请选择尺码范围">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option value="0">客户1</a-select-option>
                <a-select-option value="1">客户2</a-select-option>
                <a-select-option value="2">客户3</a-select-option>
              </a-select> -->
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="客户" prop="customer" :title="clothesAdd.customer">
                  {{clothesAdd.customer | ellipsis}}
                  <!-- <a-input placeholder="请输入客户" v-model="clothesAdd.customer" ></a-input> -->
                </a-form-model-item>
              </a-col>

              <!-- <a-col :md="6" :sm="8">
                <a-form-model-item label="集装箱代号" prop="containerCode">
                  {{clothesAdd.containerCode}}
                </a-form-model-item>
              </a-col> -->

              <a-col :md="6" :sm="8">
                <a-form-model-item label="集装箱号" prop="containerNo">
                  {{clothesAdd.containerNo}}
                  <!-- <a-input placeholder="请输入集装箱号" v-model="clothesAdd.containerNo" readOnly></a-input> -->
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="备注" prop="note">
                  <a-input placeholder="请输入备注" v-model="clothesAdd.note"></a-input>
                </a-form-model-item>
              </a-col>

              <!-- <a-col :md="6" :sm="8">
                <a-form-model-item label="成衣工厂" prop="clothesFactory">
                  <a-input placeholder="请输入成衣工厂" v-model="clothesAdd.clothesFactory"></a-input>
                </a-form-model-item>
              </a-col> -->

              <a-col :md="6" :sm="8">
                <a-form-model-item label="外销发票号" prop="exportInvoiceNo">
                  {{clothesAdd.exportInvoiceNo}}
                  <!-- <a-input placeholder="请输入外销发票号" v-model="clothesAdd.exportInvoiceNo"></a-input> -->
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="托书号" prop="bookNum">
                  {{clothesAdd.shippingOrderNumber}}
                  <!-- <a-input placeholder="请输入托书号" v-model="clothesAdd.bookNum" readOnly></a-input> -->
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="总箱数" prop="totalBoxes">
                  {{clothesAdd.totalBoxes}}
                  <!-- <a-input placeholder="请输入总箱数" v-model="clothesAdd.totalBoxes" readOnly></a-input> -->
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="总毛重" prop="totalGrossWeight">
                  {{clothesAdd.totalGrossWeight}}
                  <!-- <a-input placeholder="请输入总毛重" v-model="clothesAdd.totalGrossWeight" readOnly></a-input> -->
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="总净重" prop="totalNetWeight">
                  {{clothesAdd.totalNetWeight}}
                  <!-- <a-input placeholder="请输入总净重" v-model="clothesAdd.totalNetWeight" readOnly></a-input> -->
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="总体积" prop="totalVolume">
                  {{clothesAdd.totalVolume}}
                  <!-- <a-input placeholder="请输入总体积" v-model="clothesAdd.totalVolume" readOnly></a-input> -->
                </a-form-model-item>
              </a-col>
              <!-- <a-col :md="6" :sm="8">
                <a-form-model-item label="总价" prop="totalPrice">
                  <a-input placeholder="请输入总价" v-model="clothesAdd.totalPrice"></a-input>
                </a-form-model-item>
              </a-col> -->
              <a-col :md="6" :sm="8">
                <a-form-model-item label="总件数" prop="total">
                  {{clothesAdd.total}}
                  <!-- <a-input placeholder="请输入总件数" v-model="clothesAdd.total" readOnly></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>
        </div> -->

        <!-- 子表 :pagination="ipagination"  -->
        <a-spin :spinning="confirmLoading">
          <a-form-model ref="formRef">
            <a-table
              bordered
              :row-dataIndex       ="record => record.id"
              :columns="clothesAddColumns"
              :data-source="clothesAddData"
              :loading="loading"
              :pagination="false"
              :scroll="{ x: 1500,y: 350 }"
              @change="handleTableChange"
            >
             <!-- 自定义表头 -->
            <span slot="startingBoxNumberTitle" class="form-table-heard">
             起始箱号
            </span>
            <span slot="endCaseNumberTitle" class="form-table-heard">
             结束箱号
            </span>
            <span slot="netWeightTitle" class="form-table-heard">
             净重/箱
            </span>
            <span slot="grossWeightTitle" class="form-table-heard">
             毛重/箱
            </span>
            <span slot="outerBoxLengthTitle" class="form-table-heard">
             外箱长度
            </span>
            <span slot="outerBoxWidthTitle" class="form-table-heard">
             外箱宽度
            </span>
            <span slot="outerBoxHeightTitle" class="form-table-heard">
             外箱高度
            </span>
            <span slot="boxNumberTitle" class="form-table-heard">
             箱数
            </span>
            <!-- <span slot="netWeightTooTitle" class="form-table-heard">
             净净重
            </span> -->
             <!-- prepackSku  -->
             <template slot="prepackSku" slot-scope="text, record, index">
                <a-form-model-item prop="prepackSku" :rules="rules.prepackSku">
                  <a-input style="width:100%" type="text" v-model="record.prepackSku"  />
                </a-form-model-item>
              </template>
              <!-- 起始箱号 -->
              <template slot="startingBoxNumber" slot-scope="text, record, index">
                <a-form-model-item prop="startingBoxNumber" :rules="rules.startingBoxNumber">
                  <a-input style="width:100%" type="text" v-model="record.startingBoxNumber"  @change="handleValueChange(record)"/>
                </a-form-model-item>
              </template>
              <!-- 结束箱号 -->
              <template slot="endCaseNumber" slot-scope="text, record, index">
                <a-form-model-item prop="endCaseNumber" :rules="rules.endCaseNumber">
                  <a-input style="width:100%" type="text" v-model="record.endCaseNumber"  @change="handleValueChange(record)"/>
                </a-form-model-item>
              </template>
               <!-- 净重 -->
              <template slot="netWeight" slot-scope="text, record, index">
                <a-form-model-item prop="netWeight" :rules="rules.netWeight">
                  <a-input style="width:100%" type="text" v-model="record.netWeight"  @change="handleValueChange(record)"/>
                </a-form-model-item>
              </template>
              <!-- 毛重 -->
              <template slot="grossWeight" slot-scope="text, record, index">
                <a-form-model-item prop="grossWeight" :rules="rules.grossWeight">
                  <a-input style="width:100%" type="text" v-model="record.grossWeight"  @change="handleValueChange(record)"/>
                </a-form-model-item>
              </template>
              <!-- 外箱长度 -->
              <template slot="outerBoxLength" slot-scope="text, record, index">
                <a-form-model-item prop="outerBoxLength" :rules="rules.outerBoxLength">
                  <a-input style="width:100%" type="text" v-model="record.outerBoxLength"  @change="handleValueChange(record)"/>
                </a-form-model-item>
              </template>
              <!-- 外箱宽度 -->
               <template slot="outerBoxWidth" slot-scope="text, record, index">
                <a-form-model-item prop="outerBoxWidth" :rules="rules.outerBoxWidth">
                  <a-input style="width:100%" type="text" v-model="record.outerBoxWidth" @change="handleValueChange(record)" />
                </a-form-model-item>
              </template>
              <!-- 外箱高度 -->
              <template slot="outerBoxHeight" slot-scope="text, record, index">
                <a-form-model-item prop="outerBoxHeight" :rules="rules.outerBoxHeight">
                  <a-input style="width:100%" type="text" v-model="record.outerBoxHeight" @change="handleValueChange(record)" />
                </a-form-model-item>
              </template>
               <!-- 件数每箱 -->
               <template slot="totalPack" slot-scope="text, record, index">
                <a-form-model-item prop="totalPack" :rules="rules.totalPack">
                  <a-input style="width:100%" type="text" v-model="record.totalPack" @change="handleValueChange(record)"/>
                </a-form-model-item>
              </template>
              <!-- 包数/箱 -->
              <template slot="packBox" slot-scope="text, record, index">
                <a-form-model-item prop="packBox" :rules="rules.packBox">
                  <a-input style="width:100%" type="text" v-model="record.packBox" @change="handleValueChange(record)"/>
                </a-form-model-item>
              </template>
              <!-- 包数 -->
              <template slot="packs" slot-scope="text, record, index">
                <a-form-model-item prop="packs" :rules="rules.packs">
                  <a-input style="width:100%" type="text" v-model="record.packs"  @change="handleValueChange(record)"/>
                </a-form-model-item>
              </template>
              <!-- 净净重 -->
              <template slot="netWeightToo" slot-scope="text, record, index">
                <a-form-model-item prop="netWeightToo" :rules="rules.netWeightToo">
                  <a-input style="width:100%" type="text" v-model="record.netWeightToo"  @change="handleValueChange(record)"/>
                </a-form-model-item>
              </template>
               <!-- 尺码字段 -->
             <template v-for="i in inputName" :slot="i" slot-scope="text, record, index">
               <a-form-model-item prop="i" :rules="rules.i" :key="i">
                   <a-input style="width:100%" type="text" v-model="record[i]"  @change="handleValueChange(record)"/>
                </a-form-model-item>
              </template>
              <!-- 操作 -->
              <span slot="operation" slot-scope="text, record,index">
                 <a @click="copy(record)">复制</a>
                 <a-divider type="vertical"/>
                 <a-popconfirm title="确定删除吗？" @confirm="handleDelete(record)">
                   <a>删除</a>
                </a-popconfirm>
              </span>
            </a-table>
            <!-- <j-vxe-table
              ref="vTable"
              toolbar
              row-number
              row-selection
              drag-sort
              keep-source
              :height="350"
              :loading="loading"
              :dataSource="clothesAddData"
              :columns="clothesAddColumns"
              :alwaysEdit=true
              :bordered=true
              :scroll="{ x: 1500,y: 350 }"
              style="margin-top: 5px;"
              :toolbarConfig="toolbarConfig"
              @valueChange="handleValueChange"
            > -->
            <!-- 起始箱号 -->
            <!-- <template v-slot:startingBoxNumber="record" >
              <a-input  v-model="record.row.startingBoxNumber"  style="border-color: red;"></a-input>
           </template> -->
           <!-- 结束箱号 -->
           <!-- <template v-slot:endCaseNumber="record" >
              <a-input  v-model="record.row.endCaseNumber"  style="border-color: red;"></a-input>
           </template> -->
           <!-- 净重/箱 -->
           <!-- <template v-slot:netWeight="record" >
              <a-input  v-model="record.row.netWeight"  style="border-color: red;"></a-input>
           </template> -->
           <!-- 毛重/箱 -->
           <!-- <template v-slot:grossWeight="record" >
              <a-input  v-model="record.row.grossWeight"  style="border-color: red;"></a-input>
           </template> -->
           <!-- 外箱长度 -->
           <!-- <template v-slot:outerBoxLength="record" >
              <a-input  v-model="record.row.outerBoxLength"  style="border-color: red;"></a-input>
           </template> -->
           <!-- 外箱高度 -->
           <!-- <template v-slot:outerBoxHeight="record" >
              <a-input  v-model="record.row.outerBoxHeight"  style="border-color: red;"></a-input>
           </template> -->
           <!-- 外箱宽度 -->
           <!-- <template v-slot:outerBoxWidth="record" >
              <a-input  v-model="record.row.outerBoxWidth"  style="border-color: red;"></a-input>
           </template> -->
           <!-- 箱数 -->
           <!-- <template v-slot:boxNumber="record" >
              <a-input  v-model="record.row.boxNumber"  style="border-color: red;"></a-input>
           </template> -->
           <!-- 净净重 -->
           <!-- <template v-slot:netWeightToo="record" >
              <a-input  v-model="record.row.netWeightToo"  style="border-color: red;"></a-input>
           </template>
            <template v-slot:action="props">
              <a @click="copy(props)">复制</a>
              <a-divider type="vertical"/>
              <a-popconfirm title="确定删除吗？" @confirm="handleDelete(props)">
                <a>删除</a>
              </a-popconfirm>
            </template>
            <template v-slot:toolbarSuffix>
              <a-button type="primary" @click="referadvancePackingList" icon="ordered-list">参照预装箱单</a-button>
            </template>
            </j-vxe-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"  :disabled="confirmLoading">
          保存
        </a-button>
      </div>
    </a-drawer>

    <!-- 参照预装箱单 -->
    <reference-pre-packlist ref="ReferencePrePacklist" @callback='referCallback' :father="aa" @ok="modalFormOk"></reference-pre-packlist>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import JEllipsis from '@/components/jeecg/JEllipsis'
import ReferencePrePacklist from '@views/packing-list/packinglist-clothes/referencePrePacklist'
import { orderSpltListId,addSpltList,editSpltList } from '@api/document/packing-list/packinglist-clothes.js'


export default {
  name: 'ClothesAddDrawer', //  新增-装箱单 -成衣
  mixins: [JeecgListMixin],
  computed: {},
  components: { ReferencePrePacklist, JEllipsis }, // 参照预装箱单 弹框
  data() {
    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />

    return {

      toolbarConfig: {
          // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
          btn: []
        },
        inputName:[],
      // 表头
      clothesAddColumns: [
         {
          title: '账套',
          dataIndex: 'acSetNo',
          width: 80,
          // fixed: 'left',
            className: 'replacecolor',
            ellipsis: true,
        },
        {
          title: '成衣工厂',
          dataIndex: 'garmentFactory',
          width: 120,
          // fixed: 'left',
            className: 'replacecolor',
            ellipsis: true,
        },
        {
          title: 'HOD',
          dataIndex: 'hod',
          width: 110,
           className: 'replacecolor',
           ellipsis: true,
        },
        {
          title: 'STYLE NO.',
          dataIndex: 'styleNo',
          width: 120,
           className: 'replacecolor',
           ellipsis: true,
        },
        {
          title: 'PO NO.',
          dataIndex: 'poNo',
          width: 90,
            className: 'replacecolor',
            ellipsis: true,
        },

        {
          title: 'ITEM NO./SKU NO./UPC NO./PACKS CODE',
          dataIndex: 'itemCode',
          width: 310,
           className: 'replacecolor',
           ellipsis: true,
        },
         {
          title: 'PREPACK SKU',
          dataIndex: 'prepackSku',
          width: 200,
          className: 'replacecolor',
          scopedSlots: { customRender: 'prepackSku' },
          ellipsis: true,
        },
        {
          title: '分销点/DC/LABEL',
          dataIndex: 'distributionPoint',
          width: 120,
           className: 'replacecolor',
          insertAfter:true,
          ellipsis: true,
        },
        {
          // title: '起始箱号',
          dataIndex: 'startingBoxNumber',
          className: 'replacecolor',
          scopedSlots: { customRender: 'startingBoxNumber' }  ,    
          slots:{title:'startingBoxNumberTitle'} ,   
          width: 120,
          ellipsis: true,
        },

        {
          // title: '结束箱号',
          dataIndex: 'endCaseNumber',
          width: 120,
           className: 'replacecolor',
           scopedSlots: { customRender: 'endCaseNumber' }  ,
          slots:{title:'endCaseNumberTitle'},
          ellipsis: true,
        },

        {
          title: '颜色（中英文）',
          dataIndex: 'colour',
          width: 120,
          className: 'replacecolor',
          ellipsis: true,
        },
        {
          title: '配码',
          dataIndex: 'withCode',
          width: 120,
          className: 'replacecolor',
          ellipsis: true,
        },
        {
          title: '件数/箱',
          dataIndex: 'piecesBox',
          width: 90,
          // type: JVXETypes.normal 
        },
        {
          // title: '箱数',
          dataIndex: 'boxNumber',
          width: 90,
           className: 'replacecolor',
           scopedSlots: { customRender: 'boxNumber' }  , 
           slots:{title:'boxNumberTitle'}
        },
        {
          title: '计划尺码数量',
          dataIndex: 'planSize',
           width: 180,
           className: 'replacecolor',
           customRender: t => ellipsis(t),
        },
        {
          title: '计划装箱数量',
          dataIndex: 'planQuantity',
          width: 180,
           className: 'replacecolor'
        },
        {
          title: '总件数',
          dataIndex: 'total',
          width: 90,
           className: 'replacecolor'
        },
        {
          // title: '净重/箱',
          dataIndex: 'netWeight',
          width: 120,
           className: 'replacecolor',
           scopedSlots: { customRender: 'netWeight' }  , 
           slots:{title:'netWeightTitle'}
        },
        {
          title: '总净重',
          dataIndex: 'totalNetWeight',
          width: 90,
           className: 'replacecolor'
        },
        {
          // title: '毛重/箱',
          dataIndex: 'grossWeight',
          width: 120,
           className: 'replacecolor',
           scopedSlots: { customRender: 'grossWeight' }  , 
           slots:{title:'grossWeightTitle'}
        },
        {
          title: '总毛重',
          dataIndex: 'totalGrossWeight',
          width: 90,
           className: 'replacecolor'
        },
        {
          // title: '外箱长度',
          dataIndex: 'outerBoxLength',
          width: 120,
          className: 'replacecolor',
          scopedSlots: { customRender: 'outerBoxLength' }  , 
          slots:{title:'outerBoxWidthTitle'}
        },
        {
          // title: '外箱宽度',
          dataIndex: 'outerBoxWidth',
          width: 120,
           className: 'replacecolor',
           scopedSlots: { customRender: 'outerBoxWidth' }  , 
           slots:{title:'outerBoxWidthTitle'}
        },
        {
          // title: '外箱高度',
          dataIndex: 'outerBoxHeight',
          width: 120,
           className: 'replacecolor',
           scopedSlots: { customRender: 'outerBoxHeight' }  ,
           slots:{title:'outerBoxWidthTitle'} 
        },
        {
          title: '总体积',
          dataIndex: 'totalVolume',
          width: 90,
           className: 'replacecolor'
        },
        {
          title: '件数/包',
          dataIndex: 'totalPack',
          className: 'replacecolor',
          width: 90,
          ellipsis: true,
          scopedSlots: { customRender: 'totalPack' },
        },
        {
          title: '包数/箱',
          dataIndex: 'packBox',
          className: 'replacecolor',
          width: 90,
          ellipsis: true,
          scopedSlots: { customRender: 'packBox' },
        },
        {
          title: '包数',
          dataIndex: 'packs',
          className: 'replacecolor',
          width: 90,
          ellipsis: true,
          scopedSlots: { customRender: 'packs' },
        },
        // {
        //   title: '净净重',
        //   dataIndex: 'netWeightToo',
        //   width: 120,
        //    className: 'replacecolor',
        //    scopedSlots: { customRender: 'netWeightToo' }  , 

        // },
        // {
        //   title: '单价',
        //   dataIndex: 'unitPrice',
        //   width: 120,
        //    className: 'replacecolor'
        // },
        // {
        //   title: '总价',
        //   dataIndex: 'totalPrice',
        //   width: 120,
        //    className: 'replacecolor'
        // },
        {
          title: '备注',
          dataIndex: 'remarks',
          width: 140,
          
          // fixed: 'right',
          className: 'replacecolor',
          scopedSlots: { customRender: 'remarks' }  , 
          ellipsis: true,
        },
        {
          title: '操作',
          dataIndex: 'operation',
           className: 'replacecolor',
          width: 160,
          fixed: 'right',
          align: 'center',
          scopedSlots: { customRender: 'operation' }  ,
        }
      ],
      clothesAddData: [],
      judge:0,
      loading: false, // 表格加载
      clothesAdd: {},
       pagination: {
        // total: '',
        // current: 0,
        // pageSize: 0
      },
      editDecide:'add',
      visible: false,
      sizeFields:[], // 尺码字段
      confirmLoading: false,
      validatorRules: {
        // orderNum: [{ required: true, message: '订单号不能为空', trigger: 'blur' }],
        // styleNum: [{ required: true, message: '款号不能为空', trigger: 'blur' }],
        // name: [{ required: true, message: '中文品名不能为空', trigger: 'blur' }],
        // // englishProductName: [{ required: true, message: '英文品名不能为空', trigger: 'blur' }],
        // // sizeRange: [{ required: true, message: '品名不能为空', trigger: 'blur' }],
        // // sizeRange
        // // 待确定还有哪些必填信息
      }
      // dateFormat: 'YYYY-MM-DD'
    }
  },
   // 接收父组件查询方法
  props: {
    fatherList: {
      type: Function,
      default: null
    }
  },
  created() {},
  mounted() {},
  filters: {
                //文字数超出时，超出部分使用...
                ellipsis(value) {
                    if (!value) return ''
                    if (value.length > 20) {
                        return value.slice(0, 30) + '...'
                    }
                    return value
                }
            },
  methods: {
    // 参照回调
    referCallback(idArr){
     this.clothesAdd = {}
     this.clothesAddData = []
     this.sizeFields = []
     var preId = idArr[0]
     orderSpltListId({id:preId}).then(res => {
          var data = res.result
          if (res.success) {
            this.clothesAdd = {
              documentNo:data.documentNo,
              orderNum: data.orderNumber,
              styleNum: data.itemNumber,
              name: data.productName,
              englishProductName:data.englishProductName,
              sizeRange: data.sizeRange,
              customer:  data.customer,
              containerCode: data.containerCode,
              containerNo: data.containerNumber,
              note: data.u8Remarks,
              // clothesFactory: data.garmentFactory,
              exportInvoiceNo: data.exportInvoiceNo,
              bookNum: data.shippingOrderNumber,
              syPreAssembledPackingListId:data.syPreAssembledPackingListId,
              elementsId:data.elementsId,
              business_Type_Value:data.business_Type_Value,
              salesman:data.salesman,
              salesDepartment:data.salesDepartment,
              ompoId:data.ompoId,
              purchase:data.purchase,
              customerAbbreviation:data.customerAbbreviation,
              depositaryReceiptNo:data.depositaryReceiptNo
            }
          this.setHeadCalField(data.syPackingListTailoringItemList)
          this.dynamicColumns(data.sizeTables)
          this.clothesAddData = data.syPackingListTailoringItemList
          this.clothesAddData.map(item =>{
              var str =item.hod
              var n=str.split(" ");
              item.hod = n[0]
              var row = item;
              var sizeTables = row.sizeTables;
              for (var j=0; j<sizeTables.length;j++){
               row['size-'+sizeTables[j].size] = sizeTables[j].proportion;
              }
            })
          }else {
            this.$message.error(res.message);
          }
        })
    },

    dynamicColumns(sizeTables){
       this.initializationColumns()
       var newColumns = this.clothesAddColumns
       this.sizeFields = [];
        if (sizeTables != null){
          var i = 0
        for(;i < newColumns.length ; i++){
         if(newColumns[i].insertAfter){
           break;
         }
       }
        // 插入数据
        for (var j=0;j<sizeTables.length;j++){
          this.sizeFields.push('size-'+sizeTables[j].size);
          var field = {
              title: sizeTables[j].size,
              dataIndex: 'size-'+sizeTables[j].size,
              type: JVXETypes.inputNumber ,
              width: 80,
              isSize:true,
              scopedSlots: { customRender: 'size-'+sizeTables[j].size },
          };
          this.inputName.push('size-'+sizeTables[j].size)
          newColumns.splice(i+1+j,0,field);
        }
        
        this.clothesAddColumns = newColumns
        }
    },

    //计算主表中所需计算的值
     setHeadCalField(data){
         var totalBoxes = 0;
         var totalNetWeight = 0;
         var totalGrossWeight = 0;
         var totalVolume = 0;
         var totalPrice = 0;
         var total = 0
       for(var i =0;i<data.length;i++){
          var rowData = data[i];
          totalBoxes += rowData.boxNumber;
          if (rowData.totalNetWeight != undefined && rowData.totalNetWeight != ""){
           totalNetWeight += rowData.totalNetWeight*1;
          }
          if (rowData.totalGrossWeight != undefined && rowData.totalGrossWeight != ""){
           totalGrossWeight += rowData.totalGrossWeight*1;
          }
          if (rowData.totalVolume != undefined && rowData.totalVolume != ""){
           totalVolume += rowData.totalVolume*1;
          }
          if (rowData.totalPrice != undefined && rowData.totalPrice != ""){
            totalPrice += rowData.totalPrice*1;
          }
          if (rowData.total != undefined && rowData.total != ""){
            total += rowData.total*1;
          }
         }
         this.clothesAdd.totalBoxes = totalBoxes
         this.clothesAdd.totalGrossWeight = totalGrossWeight
         this.clothesAdd.totalNetWeight = totalNetWeight
         this.clothesAdd.totalVolume = totalVolume
         this.clothesAdd.totalPrice = totalPrice
         this.clothesAdd.total = total
         this.$forceUpdate()
     },
    // 参照预装箱单
    referadvancePackingList() {
      console.log('打开参照订单数据')
      // 打开订单数据弹框
      this.$refs.ReferencePrePacklist.referencePrePacklist = true
      this.$refs.ReferencePrePacklist.queryParam = {}
      this.$refs.ReferencePrePacklist.searchQuery()
    },
   
    // -------------------------------------
    // 操作 删除
    handleDelete(ind) {
     var delectId = ind.rowIndex
     this.clothesAddData.splice(delectId, 1);
     console.log(this.clothesAddData)
     this.setHeadCalField(this.clothesAddData)
    },

     handleValueChange(record) {
       var dataRow = record
       if (dataRow.startingBoxNumber != undefined && dataRow.startingBoxNumber != "" &&
        dataRow.endCaseNumber != undefined && dataRow.endCaseNumber != ""){
          dataRow.boxNumber = dataRow.endCaseNumber*1-dataRow.startingBoxNumber*1+1;
      }
      var allSizeSum = this.getAllSizeSum(dataRow);
      dataRow.piecesBox = allSizeSum
      dataRow.total = dataRow.piecesBox*dataRow.boxNumber
      if (record.totalPack != "" && record.totalPack != undefined&&record.totalPack!=='0'){
        record.packBox =(Number(record.piecesBox)/Number(record.totalPack)).toFixed(2)
      }
      if(record.packBox!=='' &&record.packBox){
          record.packs = Number(record.packBox)*Number(record.boxNumber)
        }
      if (dataRow.netWeight != "" && dataRow.netWeight != undefined){
        dataRow.totalNetWeight = dataRow.netWeight * dataRow.boxNumber;
      }
      if (dataRow.grossWeight != "" && dataRow.grossWeight != undefined){
        dataRow.totalGrossWeight = dataRow.grossWeight * dataRow.boxNumber;
      }
      if (dataRow.outerBoxLength != "" && dataRow.outerBoxLength != undefined &&
      dataRow.outerBoxWidth != "" && dataRow.outerBoxWidth != undefined &&
      dataRow.outerBoxHeight != "" && dataRow.outerBoxHeight != undefined){
      dataRow.totalVolume = (dataRow.outerBoxLength * dataRow.outerBoxWidth * dataRow.outerBoxHeight * dataRow.boxNumber/1000000).toFixed(3)
      }
      if (dataRow.unitPrice != undefined && dataRow.unitPrice != ""){
        dataRow.totalPrice = (dataRow.unitPrice*dataRow.total).toFixed(2)
      }
      this.setHeadCalField(this.clothesAddData)
     },

    // 操作按钮 复制
    copy(record) {
      var newRow = JSON.parse(JSON.stringify(record));
      newRow.isAdd = 1
      this.clothesAddData.push(newRow);
      this.setHeadCalField(this.clothesAddData)
    },
    // -------------------------------------

    // 抽屉 取消
    handleCancel() {
      console.log('点击抽屉取消')
      this.close()
    },
    // 抽屉 提交
    submitAdd() {
      const that = this;
      // 触发表单验证
      that.$refs.formModel.validate(async valid => {
        if (valid) {
          if (this.sizeFields.length == 0){
          this.$message.error('当前记录没有尺码字段，无法保存');
          return;
          }
          // that.confirmLoading = true
          var newObj = {}
          newObj.itemNumber = this.clothesAdd.styleNum
          newObj.orderNumber = this.clothesAdd.orderNum
          newObj.productName = this.clothesAdd.name
          newObj.sizeRange = this.clothesAdd.sizeRange
          newObj.customer = this.clothesAdd.customer
          newObj.containerCode = this.clothesAdd.containerCode
          newObj.containerNumber = this.clothesAdd.containerNo
          newObj.u8Remarks = this.clothesAdd.note
          // newObj.garmentFactory = this.clothesAdd.clothesFactory
          newObj.exportInvoiceNo = this.clothesAdd.exportInvoiceNo
          newObj.shippingOrderNumber = this.clothesAdd.bookNum
          newObj.id = this.clothesAdd.id
          newObj.totalBoxes = this.clothesAdd.totalBoxes
          newObj.totalGrossWeight = this.clothesAdd.totalGrossWeight
          newObj.totalNetWeight = this.clothesAdd.totalNetWeight
          newObj.totalVolume = this.clothesAdd.totalVolume
          newObj.totalPrice = this.clothesAdd.totalPrice
          newObj.total = this.clothesAdd.total
          newObj.syPackingListTailoringItemList = this.clothesAddData
          newObj.syPreAssembledPackingListId=this.clothesAdd.syPreAssembledPackingListId,
          newObj.elementsId=this.clothesAdd.elementsId,
          newObj.business_Type_Value=this.clothesAdd.business_Type_Value,
          newObj.salesman=this.clothesAdd.salesman,
          newObj.salesDepartment=this.clothesAdd.salesDepartment,
          newObj.ompoId=this.clothesAdd.ompoId,
          newObj.purchase=this.clothesAdd.purchase,
          newObj.customerAbbreviation=this.clothesAdd.customerAbbreviation,
          newObj.depositaryReceiptNo = this.clothesAdd.depositaryReceiptNo
          await this.JudgeVluabled()
          this.confirmLoading = true
          if(this.judge == 0){
             if(this.editDecide === 'edit'){
               editSpltList(newObj).then(res => {
                this.confirmLoading = false
                if (res.success) {
                 this.$message.success('编辑成功')
                 this.close()
                //清空信息
                 newObj = {};
                 that.fatherList() // 调用父组件 查询方法
                }else{
                  this.$message.error(res.message)
              }
              })
              }else {
               addSpltList(newObj).then(res => {
                 this.confirmLoading = false
                  if (res.success) {
                    this.$message.success('新增成功')
                    this.close()
                  //清空信息
                    newObj = {};
                   that.fatherList() // 调用父组件 查询方法
                  }else{
                  this.$message.error(res.message)
               }
               })
            }
          }
        
        }
      })
    },

    JudgeVluabled(){
          var sort = 0
          this.judge = 0
          for (var i=0; i<this.clothesAddData.length;i++){
             var tableRow = this.clothesAddData[i];
             var allSizeSum = this.getAllSizeSum(tableRow);
             if (allSizeSum == 0){
               this.$message.error('第'+(i+1)+'行所有尺码数量为0,无法保存');
               this.judge+=1
               return;
             }

            //是否未填
             var Valuable=[
               {key:'startingBoxNumber',value:'起始箱号'},
               {key:'endCaseNumber',value:'结束箱号'},
               {key:'netWeight',value:'净重/箱'},
               {key:'grossWeight',value:'毛重/箱'},
               {key:'outerBoxLength',value:'外箱长度'},
               {key:'outerBoxWidth',value:'外箱宽度'},
               {key:'outerBoxHeight',value:'外箱高度'},
              //  {key:'netWeightToo',value:'净净重'},
               {key:'boxNumber',value:'箱数'},
               ]
             for(var j=0 ; j<Valuable.length;j++){
               
                if(tableRow[Valuable[j].key] == null || tableRow[Valuable[j].key] == "" || tableRow[Valuable[j].key] == undefined){
                  this.$message.error('第'+(i+1)+'行'+Valuable[j].value+'无值，无法保存');
                  this.judge+=1
                  return
                }
             }
             //是否为整
             var integer = [
               {key:'startingBoxNumber',value:'起始箱号'},
               {key:'piecesBox',value:'件数/箱'},
               {key:'endCaseNumber',value:'结束箱号'},
                {key:'boxNumber',value:'箱数'},
             ]
             for(var v=0 ; v<integer.length;v++){
                if(!Number.isInteger(Number(tableRow[integer[v].key]))){
                  this.$message.error('第'+(i+1)+'行'+integer[v].value+'不为整数，无法保存');
                  this.judge+=1
                  return
                }
             }

            //  //判断小数位数
            var Several = [
               {key:'netWeight',value:'净重/箱'},
               {key:'grossWeight',value:'毛重/箱'},
             ]
            for(var s=0 ; s<Several.length;s++){
                var position =  tableRow[Several[s].key].toString().indexOf('.')  + 1;   //小数点的位置
                var digit = tableRow[Several[s].key].toString().length - position;  //小数的位值
                if(digit > 2 && position!==0){
                 this.$message.error('第'+(i+1)+'行'+Several[s].value+'小数超过两位，无法保存');
                this.judge+=1
                 return 
              }
             }

            if(Number(tableRow.startingBoxNumber) > Number(tableRow.endCaseNumber)) {
              this.$message.error('第'+(i+1)+'行起始箱号大于结束箱号，无法保存');
              this.judge+=1
              return;
            }
           if (tableRow.boxNumber == "" || tableRow.boxNumber == 0){
              this.$message.error('第'+(i+1)+'行箱数，无法保存');
              this.judge+=1
              return;
           }
          //尺码赋值
          for (var j=0; j<tableRow.sizeTables.length; j++){
           var sizeTable = tableRow.sizeTables[j];
            var field = 'size-'+sizeTable.size;
            tableRow.sizeTables[j].proportion = tableRow[field];
          }
           tableRow.sort = ++sort;
         } 
    },

    // 获取不同尺码数量之和
    getAllSizeSum(record){
      var ret = 0;
      for (var i=0; i<this.sizeFields.length; i++){
        if (record[this.sizeFields[i]] != undefined && record[this.sizeFields[i]] != ""){
          ret += record[this.sizeFields[i]]*1;
        }
      }
      return ret;
    },

    // -------------------------------------
    close() {
      this.$emit('close')
      this.visible = false
      this.clothesAdd = {}
      this.clothesAddData = []
      this.sizeFields = []
      this.initializationColumns()
      this.editDecide = 'add'
      // this.$refs.form.resetFields()
    }, 

    //初始化表头
    initializationColumns(){
     this.clothesAddColumns= [
        {
          title: '账套',
          dataIndex       : 'acSetNo',
          width: 80,
          // fixed: 'left',
            className: 'replacecolor',
             ellipsis: true,
        },
        {
          title: '成衣工厂',
          dataIndex       : 'garmentFactory',
          width: 120,
          // fixed: 'left',
            className: 'replacecolor',
             ellipsis: true,
        },
        {
          title: 'HOD',
          dataIndex       : 'hod',
          width: 110,
           className: 'replacecolor',
            ellipsis: true,
        },
        {
          title: 'STYLE NO.',
          dataIndex       : 'styleNo',
          width: 120,
           className: 'replacecolor',
            ellipsis: true,
        },
        {
          title: 'PO NO.',
          dataIndex       : 'poNo',
          width: 90,
            className: 'replacecolor',
             ellipsis: true,
        },

        {
          title: 'ITEM NO./SKU NO./UPC NO./PACKS CODE',
          dataIndex       : 'itemCode',
          width: 310,
           className: 'replacecolor',
            ellipsis: true,
        },
          {
          title: 'PREPACK SKU',
          dataIndex       : 'prepackSku',
          width: 200,
          className: 'replacecolor',
          scopedSlots: { customRender: 'prepackSku' }  ,
        },
        {
          title: '分销点/DC/LABEL',
          dataIndex       : 'distributionPoint',
          width: 120,
           className: 'replacecolor',
          insertAfter:true,
           ellipsis: true,
        },
        {
          // title: '起始箱号',
          dataIndex       : 'startingBoxNumber',
          className: 'replacecolor',          
          width: 120,
          scopedSlots: { customRender: 'startingBoxNumber' }  ,
          slots:{title:'startingBoxNumberTitle'}
        },

        {
          // title: '结束箱号',
          dataIndex       : 'endCaseNumber',
          width: 120,
          className: 'replacecolor', 
          scopedSlots: { customRender: 'endCaseNumber' }  ,     
          slots:{title:'endCaseNumberTitle'}
        },

        {
          title: '颜色（中英文）',
          dataIndex       : 'colour',
          width: 120,
          className: 'replacecolor',
           ellipsis: true,
        },
        {
          title: '配码',
          dataIndex       : 'withCode',
          width: 120,
          className: 'replacecolor',
           ellipsis: true,
        },
        {
          title: '件数/箱',
          dataIndex       : 'piecesBox',
          width: 90,
          // type: JVXETypes.normal 
           ellipsis: true,
        },
        {
          title: '箱数',
          dataIndex       : 'boxNumber',
          width: 90,
           className: 'replacecolor',
           scopedSlots: { customRender: 'replacecolor' }  ,
          slots:{title:'boxNumberTitle'}           
        },
        {
          title: '计划尺码数量',
          dataIndex       : 'planSize',
          width: 180,
           className: 'replacecolor',
            ellipsis: true,
        },
        {
          title: '计划装箱数量',
          dataIndex       : 'planQuantity',
          width: 140,
           className: 'replacecolor',
            ellipsis: true,
        },
        {
          title: '总件数',
          dataIndex       : 'total',
          width: 90,
           className: 'replacecolor',
            ellipsis: true,
        },
        {
          // title: '净重/箱',
          dataIndex       : 'netWeight',
          width: 120,
           className: 'replacecolor',
          scopedSlots: { customRender: 'netWeight' }  ,
          slots:{title:'netWeightTitle'}
        },
        {
          title: '总净重',
          dataIndex       : 'totalNetWeight',
          width: 90,
           className: 'replacecolor',
            ellipsis: true,
        },
        {
          // title: '毛重/箱',
          dataIndex       : 'grossWeight',
          width: 120,
           className: 'replacecolor',
           scopedSlots: { customRender: 'grossWeight' }  ,
          slots:{title:'grossWeightTitle'}
        },
        {
          title: '总毛重',
          dataIndex       : 'totalGrossWeight',
          width: 90,
           className: 'replacecolor',
            ellipsis: true,
        },
        {
          // title: '外箱长度',
          dataIndex       : 'outerBoxLength',
          width: 120,
          className: 'replacecolor',
          scopedSlots: { customRender: 'outerBoxLength' }  ,
          slots:{title:'outerBoxLengthTitle'}

        },
        {
          // title: '外箱宽度',
          dataIndex       : 'outerBoxWidth',
          width: 120,
           className: 'replacecolor',
           scopedSlots: { customRender: 'outerBoxWidth' }  ,
          slots:{title:'outerBoxWidthTitle'}

        },
        {
          // title: '外箱高度',
          dataIndex       : 'outerBoxHeight',
          width: 120,
           className: 'replacecolor',
           scopedSlots: { customRender: 'outerBoxHeight' }  ,
          slots:{title:'outerBoxHeightTitle'}

           
        },
        {
          title: '总体积',
          dataIndex       : 'totalVolume',
          width: 90,
           className: 'replacecolor',
            ellipsis: true,
        },
        {
          title: '件数/包',
          dataIndex: 'totalPack',
          className: 'replacecolor',
          width: 90,
          ellipsis: true,
          scopedSlots: { customRender: 'totalPack' },
        },
        {
          title: '包数/箱',
          dataIndex: 'packBox',
          className: 'replacecolor',
          width: 90,
          ellipsis: true,
          scopedSlots: { customRender: 'packBox' },
        },
        {
          title: '包数',
          dataIndex: 'packs',
          className: 'replacecolor',
          width: 90,
          ellipsis: true,
          scopedSlots: { customRender: 'packs' },
        },
        // {
        //   title: '净净重',
        //   dataIndex       : 'netWeightToo',
        //   width: 120,
        //    className: 'replacecolor',
        //    scopedSlots: { customRender: 'netWeightToo' }  ,
        // },
        {
          title: '备注',
          dataIndex       : 'remarks',
          width: 140,
          
          // fixed: 'right',
          className: 'replacecolor',
          scopedSlots: { customRender: 'remarks' }  ,
        },
        {
          title: '操作',
          dataIndex       : 'operation',
           className: 'replacecolor',
          width: 160,
          fixed: 'right',
          align: 'center',
          scopedSlots: { customRender: 'operation' }  ,
        }
      ]
    },
    // - father------------------------------------
    aa() {},
    modalFormOk() {},

    // 分页、排序、筛选变化时触发
    handleTableChange(pagination, filters, sorter) {
      this.queryParam.pageNo = pagination.current
      this.referCallback()
    }
  }
}
</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;
}
/deep/.ant-table-row-cell-break-word >.ant-form-item{
  margin-bottom: 0px !important;
}
/deep/.ant-table-tbody .ant-table-row td{
      padding-top: 8px !important;
    padding-bottom: 8px !important;
}
</style>