sen-yu-new-web/src/views/book/addBookDrawer.vue

<template>
  <!-- 新增托书  -->
  <div id="addBookDrawer">
    <a-drawer
      title="新增托书"
      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="addBook" :rules="validatorRules">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-model-item label="托书日期" prop="shippingOrderDate">
                  <a-date-picker
                    placeholder="请选择托书日期"
                    style="width:100%;"
                    :format="dateFormat"
                    v-model="addBook.shippingOrderDate"
                  />
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="托书号" prop="shippingOrderNumber">
                  <a-input placeholder="请输入托书号" v-model="addBook.shippingOrderNumber"></a-input>
                </a-form-model-item>
              </a-col>

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

              <a-col :md="6" :sm="8">
                <a-form-model-item label="经营单位" prop="unitInOperation">
                  <!-- <a-input placeholder="请输入经营单位" v-model="addBook.unitInOperation"></a-input> -->
                   <j-search-select-tag
                    placeholder="请选择收货人"
                    v-model="addBook.unitInOperation"
                    @change="unitInOperationChange"
                    dict="test-200">
                  </j-search-select-tag>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="经营单位地址" prop="unitInOperationAddress">
                   <a-input placeholder="根据经营单位自动带出" v-model="addBook.unitInOperationAddress"></a-input>
                </a-form-model-item>
              </a-col>
              <!-- <a-col :md="6" :sm="8">
                <a-form-model-item label="海关代码" prop="customsCode">
                   <a-input placeholder="根据经营单位自动带出" v-model="addBook.customsCode"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-model-item label="税号" prop="dutyParagraph">
                   <a-input placeholder="根据经营单位自动带出" v-model="addBook.dutyParagraph"></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="请选择装运期限"
                    style="width:100%;"
                    :format="dateFormat"
                    v-model="addBook.latestDateOfShipment"
                  />
                </a-form-model-item>
              </a-col>


              <a-col :md="6" :sm="8">
                <a-form-model-item label="最终船期" prop="theFinalShippingDate">
                  <a-date-picker
                    placeholder="请选择装运期限"
                    style="width:100%;"
                    :format="dateFormat"
                    v-model="addBook.theFinalShippingDate"
                  />
                </a-form-model-item>
              </a-col>

               <a-col :md="6" :sm="8">
                <a-form-model-item label="运抵国别" prop="arriveInCountry">
                   <j-search-select-tag
                    placeholder="请选择运抵国别"
                    v-model="addBook.arriveInCountry"
                    dict="country_of_arrival">
                  </j-search-select-tag>
                  <!-- <a-input placeholder="请输入运抵国别" v-model="addBook.arriveInCountry"></a-input> -->
                </a-form-model-item>
              </a-col>

              
              <a-col :md="6" :sm="8">
                <a-form-model-item label="贸易国别" prop="tradeCountry">
                   <j-search-select-tag
                    placeholder="请选择贸易国别"
                    v-model="addBook.tradeCountry"
                    dict="trade_country">
                  </j-search-select-tag>
                  <!-- <a-input placeholder="请输入贸易国别" v-model="addBook.tradeCountry"></a-input> -->
                </a-form-model-item>
              </a-col>

               <a-col :md="6" :sm="8">
                <a-form-model-item label="收货人" prop="consignee">
                  <!-- <j-dict-select-tag 
                   style="width:100%;margin-bottom: 10px;"  v-model="addBook.consignee" 
                  dictCode="sys_dict_item,item_text,description,dict_id in(select id from sys_dict where dict_code='receiving_goods_info')"
                  @change="consigneeSelectChange"/> -->
                  <j-search-select-tag
                    placeholder="请选择收货人"
                    v-model="addBook.consignee"
                    @change="consigneeSelectChange"
                    dict="receiving_goods_info">
                  </j-search-select-tag>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="收货人地址" prop="consigneeAddress">
                  <a-input placeholder="根据收货人自动带出" v-model="addBook.consigneeAddress" ></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="通知方" prop="notifyParty">
                  <a-input placeholder="根据收货人自动带出" v-model="addBook.notifyParty" ></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="通知方地址" prop="notifyPartyAddress">
                  <a-input placeholder="根据收货人自动带出" v-model="addBook.notifyPartyAddress" ></a-input>
                </a-form-model-item>
              </a-col>


             
              <a-col :md="6" :sm="8">
                <a-form-model-item label="出口口岸" prop="exportPort">
                    <j-search-select-tag
                    placeholder="请选择出口口岸"
                    v-model="addBook.exportPort"
                    dict="export_port">
                  </j-search-select-tag>
                  <!-- <a-input placeholder="请输入出口口岸" v-model="addBook.exportPort"></a-input> -->
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="目的港" prop="destinationPort">
                  <j-search-select-tag
                    placeholder="请选择目的港"
                    v-model="addBook.destinationPort"
                    dict="port_of_destination">
                  </j-search-select-tag>
                  <!-- <a-input placeholder="请输入目的港" v-model="addBook.destinationPort"></a-input> -->
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="收汇方式" prop="exchangeEarningsValue">
                   <j-search-select-tag
                    placeholder="请选择收汇方式"
                    v-model="addBook.exchangeEarningsValue"
                    dict="collection_method">
                  </j-search-select-tag>
                  <!-- <a-input placeholder="请输入收汇方式" v-model="addBook.exchangeEarningsValue"></a-input> -->
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="成交方式" prop="termsOfDeliveryvalue">
                  <j-search-select-tag
                    placeholder="请选择成交方式"
                    v-model="addBook.termsOfDeliveryvalue"
                    dict="transaction_method"
                    change>
                  </j-search-select-tag>
                  <!-- <a-input placeholder="请输入成交方式" v-model="addBook.termsOfDeliveryvalue"></a-input> -->
                </a-form-model-item>
              </a-col>

               <a-col :md="6" :sm="8">
                <a-form-model-item label="金额" prop="money">
                  <a-input placeholder="请输入金额" v-model="addBook.money"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="运输方式" prop="typeOfShipping">
                    <j-search-select-tag
                    placeholder="请选择运输方式"
                    v-model="addBook.typeOfShipping"
                    dict="test0902001">
                  </j-search-select-tag>
                </a-form-model-item>
              </a-col>

             

              <!-- <a-col :md="6" :sm="8">
                <a-form-model-item label="人民币" prop="cny">
                  <a-input placeholder="请输入人民币" v-model="addBook.cny"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="美元" prop="usd">
                  <a-input placeholder="请输入美元" v-model="addBook.usd"></a-input>
                </a-form-model-item>
              </a-col> -->
            </a-row>
          </a-form-model>
        </div>
      </a-card>

      <!--操作按钮区域 参照装箱单  増行-->
      <a-card :bordered="true" style="margin:10px 0  40px 0;">
        <div class="table-operator">
          <a-button type="primary" @click="referPackingList('0')" icon="ordered-list">参照装箱单-成衣</a-button>
          <a-button type="primary" @click="referPackingList('1')" 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" :rules="validatorRules">
            <a-table
              bordered
              :row-key="record => record.id"
              :columns="addBookColumns"
              :data-source="addBookData"
              :loading="loading"
              :pagination="ipagination"
              :scroll="{ x: 1500 }"
              @change="handleTableChange"
              :footer="addBookFooterShow"
            >
              <!-- 集装箱代号 输入框 -->
              <template slot="containerCode" slot-scope="text, record, index">
                <a-form-model-item prop="containerCode" :rules="rules.containerCode" >
                  <a-input style="width:100%" type="text" v-model="record.containerCode" />
                </a-form-model-item>
              </template>

              <!-- 集装箱号 输入框-->
              <template slot="containerNumber" slot-scope="text, record, index">
                <a-form-model-item prop="containerNumber" :rules="rules.containerNumber">
                  <a-input style="width:100%" type="text" v-model="record.containerNumber" />
                </a-form-model-item>
              </template>

              <!-- 操作 -->
              <span slot="operationSlot" slot-scope="text, record,index">
                <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(index)">
                  <a href="javascript:void(0);" style="color:red;">删除</a>
                </a-popconfirm>
              </span>
            </a-table>
          </a-form-model>

          <!-- 人民币、美金 -->
          <a-row style="margin:60px 0;">
            <div class="purchase-order-table" style="width:48%;marginRight:4%;float:left;">
              <h6 class="table-title">人民币</h6>
              <a-table
                :row-key="record => record.id"
                :loading="loading"
                :columns="CNYColumns"
                :data-source="rmbList"
                :scroll="{ y: 200 }"
                bordered
                :pagination="false"
              >
              <template slot="CNYfreighForward" slot-scope="text, record, index">
                <a-form-model-item prop="CNYfreighForward" :rules="rules.CNYfreighForward" >
                  <a-input placeholder="请输入货代" v-model="record.freightForwarder" />
                </a-form-model-item>
              </template>
              <template slot="CNYmoney" slot-scope="text, record, index">
                <a-form-model-item prop="CNYmoney" :rules="rules.CNYmoney" >
                  <a-input placeholder="请输入金额" v-model="record.amount" />
                </a-form-model-item>
              </template>
                <!-- CNY项目列 -->
                <template slot="CNYProjectList" slot-scope="text, record, index">
                  <a-form-model-item prop="CNYProjectList" :rules="rules.CNYProjectList">
                    <a-select v-model="record.itemColumn" style="width:100%" placeholder="请输入项目列">
                      <a-select-option value="1">项目列1</a-select-option>
                      <a-select-option value="2">项目列2</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </template>
              </a-table>
            </div>

            <div class="purchase-order-table" style="width:48%;float:right;">
              <h6 class="table-title">美金</h6>
              <a-table
                :row-key="record => record.id"
                :loading="loading"
                :columns="USDColumns"
                :data-source="usdList"
                :scroll="{ y: 200 }"
                bordered
                :pagination="false"
              >
               <template slot="USDfreighForward" slot-scope="text, record, index">
                <a-form-model-item prop="USDfreighForward" :rules="rules.USDfreighForward" >
                  <a-input placeholder="请输入货代" v-model="record.freightForwarder" />
                </a-form-model-item>
              </template>
              <template slot="USDmoney" slot-scope="text, record, index">
                <a-form-model-item prop="USDmoney" :rules="rules.USDmoney" >
                  <a-input placeholder="请输入金额" v-model="record.amount" />
                </a-form-model-item>
              </template>
                <!-- USD项目列 -->
                <template slot="USDProjectList" slot-scope="text, record, index">
                  <a-form-model-item prop="USDProjectList" :rules="rules.USDProjectList">
                    <a-select v-model="record.itemColumn" style="width:100%">
                      <a-select-option value="1">项目列1</a-select-option>
                      <a-select-option value="2">项目列2</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </template>
              </a-table>
            </div>
          </a-row>
        </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: 1
        }"
      >
        <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>
    <!-- 参照装箱单 -->
    <packingList-modal ref="packingListModal" :father="aa" @ok="modalFormOk" @callback="referCallback"></packingList-modal>
    <packing-list-modal-fabrics  ref="packingListModalFabrics" :father="aa" @ok="modalFormOk" @callback="referCallback"></packing-list-modal-fabrics>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'
import {addPackingList,editPackingList} from '@api/document/book.js'
import packingListModal from '@views/book/packingListModal.vue'
import packingListModalFabrics from '@views/book/packingListModalFabrics.vue'

export default {
  name: 'AddBookDrawer', // 新增 托书
  mixins: [JeecgListMixin],
  components: { packingListModal, JEllipsis, moment,packingListModalFabrics }, // 参照装箱单 弹框
  data() {
    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
    return {
      // 表头
      addBookColumns: [
        // {
        //   title: '单据号',
        //   dataIndex: 'documentNo',
        //   width: 120,
        //   ellipsis: true,
        //   fixed: 'left',
        //   className: 'replacecolor'
        // },
        
        {
          title: '款号',
          dataIndex: 'itemNumber',
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },
         {
          title: '小po',
          dataIndex: 'smallPo',
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '数量',
          dataIndex: 'number',
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },
         {
          title: '箱数',
          dataIndex: 'planQuantity',
          width: 160,
          ellipsis: true,
          className: 'replacecolor'
        },
         {
          title: '毛重',
          dataIndex: 'grossWeight',
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '净重',
          dataIndex: 'netWeight',
          width: 120,
          ellipsis: true,
          // scopedSlots: { customRender: 'containerCode' },
          className: 'replacecolor'
        },
        {
          title: '体积',
          dataIndex: 'totalVolume',
          width: 120,
          ellipsis: true,
          // scopedSlots: { customRender: 'containerNo' },
          // className: 'replacecolor'
        },
        {
          title: '分销点',
          dataIndex: 'distributionPoint',
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '集装箱号',
          dataIndex: 'containerNumber',
          ellipsis: true,
          scopedSlots: { customRender: 'containerNumber' },
          width: 120,
          // fixed: 'left',
          className: 'replacecolor'
        },
          {
          title: '集装箱代号',
          dataIndex: 'containerCode',
          scopedSlots: { customRender: 'containerCode' },
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },
          {
          title: '单价',
          dataIndex: 'price',
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '金额',
          dataIndex: 'totalPrice',
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },

         {
          title: '制单人',
          dataIndex: 'createBy',
          width: 120,
          ellipsis: true,
          // fixed: 'left',
          className: 'replacecolor'
        },
           {
          title: '采购/委外订单号',
          dataIndex: 'purOrSubOrder',
          width: 160,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '英文名称',
          dataIndex: 'englishProductName',
          width: 160,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          ellipsis: true,
          scopedSlots: { customRender: 'operationSlot' },
          width: 160,
          fixed: 'right',
          className: 'replacecolor'
        }
      ],
      addBookData: [],
      CNYColumns: [
        {
          title: '货代',
          dataIndex: 'freightForwarder',
          scopedSlots: { customRender: 'CNYfreighForward' },
          width: 60,
          className: 'replacecolor'
        },
        {
          title: '金额',
          dataIndex: 'amount',
          scopedSlots: { customRender: 'CNYmoney' },
          width: 60,
          className: 'replacecolor'
        },
        {
          title: '项目列',
          dataIndex: 'itemColumn',
          width: 60,
          scopedSlots: { customRender: 'CNYProjectList' },
          className: 'replacecolor'
        }
      ],
      rmbList: [{}],
      USDColumns: [
        {
          title: '货代',
          dataIndex: 'freightForwarder',
          scopedSlots: { customRender: 'USDfreighForward' },
          width: 20,
          className: 'replacecolor'
        },
        {
          title: '金额',
          dataIndex: 'amount',
          scopedSlots: { customRender: 'USDmoney' },
          width: 20,
          className: 'replacecolor'
        },
        {
          title: '项目列',
          dataIndex: 'itemColumn',
          width: 90,
          scopedSlots: { customRender: 'USDProjectList' },
          className: 'replacecolor'
        }
      ],
      usdList: [{}],
      loading: false, // 表格加载
      addBook: {},
      defaultMethod : 'add',
      confirmLoading: false,
      visible: false,
      dateFormat: 'YYYY-MM-DD',
      validatorRules: {
          shippingOrderDate:[{required: true, message: '托书日期不能为空!'}],
          shippingOrderNumber:[{required: true, message: '托书号不能为空!'}],
          consignee:[{required: true, message: '收货人不能为空!'}],
          unitInOperation:[{required: true, message: '经营单位不能为空!'}],
          // unitInOperationAddress:[{required: true, message: '经营单位地址不能为空!'}],
          tradeCountry:[{required: true, message: '贸易国别不能为空!'}],
          arriveInCountry:[{required: true, message: '运抵国别不能为空!'}],
          exportPort:[{required: true, message: '出口口岸不能为空!'}],
          destinationPort:[{required: true, message: '目的港不能为空!'}],
      }
    }
  },
  created() {},
  methods: {
    // 参照装箱单
    referPackingList(data) {
      console.log('打开参照装箱单')
      if(data === '0'){
         this.$refs.packingListModal.packingListModVis = true
         this.$refs.packingListModal.queryParam.tailoringOrFabric = data
         this.$refs.packingListModal.getPackingList()
         if(this.addBookData.length !== 0){
         this.$refs.packingListModal.fatherList = this.addBookData
         }
      }else {
        this.$refs.packingListModalFabrics.packingListModalFabrics = true
        this.$refs.packingListModalFabrics.queryParam.tailoringOrFabric = data
        this.$refs.packingListModalFabrics.getPackingList()
        if(this.addBookData.length !== 0){
         this.$refs.packingListModal.fatherList = this.addBookData
         }
      }
    },
    referCallback(data){
      data.map(item=>{
         item.readyFabric=item.readyFabric
         item.tailoringFabricItemId=item.itemId
         item.tailoringFabricId=item.id
         item.clientAbbreviation = item.customerAbbreviation
         item.styleNumber = item.itemNumber
         var str = item.preDeliveryDate
         var n=str.split(" ");
         item.preDeliveryDate = n[0]
         item.price = (Number(item.price)).toFixed(4)
      })
        // var subList = this.convertReferToSub(data);
        this.addBookData = this.addBookData.concat(data);
        this.addBook.termsOfDeliveryvalue = 'T/T'
        this.addBook.exchangeEarningsValue = 'FOB'
        this.addBook.exportPort='宁波'
        var dd = moment(new Date()).format('YYYY-MM-DD')
         this.$set( this.addBook,'shippingOrderDate',dd)
        this.setHeadCalField()
    },

    // 参照数据转换成子表
    // convertReferToSub(dataList){
    //   var ret = [];
    //   for (var i=0; i<dataList.length; i++){
    //     var data = dataList[i];
    //     var sub = {
        
    //      documentNo:data.documentNo,
    //      createBy:data.createBy,

    //     };
    //     ret.push(sub);
    //   }
    //   return ret;
    // },
    // 増行
    // handleAddColumn() {
    //   console.log('増行')

    //   const addrow = {
    //     englishName: '',
    //     styleNum: '',
    //     smallPoNum: '',
    //     quantity: '',
    //     boxedNum: '',
    //     roughWeigh: '',
    //     suttle: '',
    //     volume: '',
    //     distributionPoint: '',
    //     containerCode: '',
    //     containerNo: '',
    //     price: '',
    //     preShipmentDate: '',
    //     salesman: '',
    //     operatingDepartment: '',
    //     purchaseAboardOrderNum: '',
    //     purchaseAboardFactory: '',
    //     operation: ''
    //   }

    //   this.addBookData.push(addrow)
    // },

     // 收货人下拉框
    consigneeSelectChange(value){
        if(value !=null && value !='' &&value != 'undefined'){
        var valueArr = value.split("+")
        this.addBook.consignee = valueArr[0];
        if (valueArr.length == 4){
          this.addBook.consigneeAddress = valueArr[1];
          this.addBook.notifyParty = valueArr[2];
          this.addBook.notifyPartyAddress = valueArr[3];
        }else{
           this.$message.error('收货信息维护有问题，请检查！')
        }
        }else{
          this.addBook.consigneeAddress = '';
          this.addBook.notifyParty = '';
          this.addBook.notifyPartyAddress = '';
        }
      },
    unitInOperationChange(val){
      if(val !=null && val !='' &&val != 'undefined'){
        var valueArr = val.split("+")
        this.addBook.unitInOperation = valueArr[0]
        this.addBook.unitInOperationAddress = valueArr[3]
        this.addBook.customsCode = valueArr[1]
        this.addBook.dutyParagraph = valueArr[2]
      }
      
    },
        // 设置表头计算值,直接设置表头值对象不能刷新，把表头对象换了就可以了
    setHeadCalField(){
      var headData = JSON.parse(JSON.stringify(this.addBook));
      var moneyAll = 0;
      for (var i=0; i<this.addBookData.length; i++){
        var rowData = this.addBookData[i];
        if (rowData.totalPrice != undefined && rowData.totalPrice != ""){
          moneyAll += rowData.totalPrice*1;
        }
      }
      headData.money = moneyAll;
      this.addBook = headData;
    },
    // 新增托书 子表合计
    addBookFooterShow(data) {
      console.log('新增托书 子表 ----合计行')
      console.log('data', data)
      return (
        <a-table
          rowKey={Math.random}
          bordered={false}
          pagination={false}
          columns={this.addBookColumns}
          dataSource={this.addBookFooterDataSource || []}
          showHeader={false}
        ></a-table>
      )
    },

    // 操作 删除
    handleDelete(index) {
      this.addBookData.splice(index, 1);
      this.setHeadCalField()
    },
    // 抽屉 取消
    handleCancel() {
      console.log('点击抽屉取消')
      this.close()
    },
    // 抽屉 提交
    submitAdd() {
      console.log('保存新增、刷新托书')
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          // that.confirmLoading = true
          var newObj = this.addBook
          newObj.rmbList = this.rmbList
          newObj.usdList = this.usdList
          newObj.syShippingOrderItemList = this.addBookData
            for(var i =0;i<newObj.syShippingOrderItemList.length;i++){
             var row = newObj.syShippingOrderItemList[i]
             if(row.containerCode === '' || !row.containerCode){
                this.$message.error('第'+(i+1)+'行集装箱代号未填，无法保存！');
                return
              }
             if(row.containerNumber === '' || !row.containerNumber){
                this.$message.error('第'+(i+1)+'行集装箱号未填，无法保存！');
                return
              }
            }
          if(this.defaultMethod === 'add'){
           addPackingList(newObj).then(res => {
            if (res.success) {
              this.$message.success('添加成功')
              this.$emit('back')
              this.close()
            }else {
             this.$message.error(res.message);
            }
           })
        }else {
          newObj.syShippingOrderItemList.map(item =>{
             item.smailPo = item.smallPo
                item.styleNumber = item.itemNumber
                item.volume = item.totalVolume
                item.unitPrice = item.price
          })
          editPackingList(newObj).then(res => {
            if (res.success) {
              this.$message.success('编辑成功')
              this.$emit('back')
              this.close()
            }else {
             this.$message.error(res.message);
            }
           })
        }
        
        }
      })
      // this.getShipmentList() // 刷新托书列表
    },
    close() {
      this.addBook ={}
      this.addBookData =[]
      this.rmbList = [{}]
      this.usdList = [{}]
      this.visible = false
      this.defaultMethod = 'add'
      this.$refs.form.resetFields()
    },

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

  // 出现滚动条，合计栏跟随 table 滚动
  watch: {
    dataSource(val) {
      console.log(val)
      // 同步表与footer滚动
      let dom = this.$refs.TableInfo.$el.querySelectorAll('.ant-table-body')[0]
      dom.addEventListener(
        'scroll',
        () => {
          this.$refs.TableInfo.$el.querySelectorAll('.ant-table-body')[1].scrollLeft = dom.scrollLeft
          console.log('走到这')
        },
        true
      )
    }
  },
  // 构建合计数据 --合计
  // TODO:合计行 有滚动待解决
  computed: {
    addBookFooterDataSource() {
      // 新增托书  子表 合计
      const total = Object.assign({}, this.addBookData[0])
      for (const attr in total) {
        total[attr] = '合计'
        break
      }
      return [total]
    }
  },
  mounted() {}
}
</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-footer .ant-table.body {
  // overflow: hidden !important;
}
/deep/ .ant-table.ant-table-bordered .ant-table-footer {
  border: none;
  padding: 0;
}
</style>