sen-yu-new-web/src/views/shipment-details/shipmentList.vue

<template>

  <!-- 发运明细 列表 -->
  <div id="ShipmentList">
    <!-- 查询 回显 且 可编辑 -->
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="25">
            <a-col :md="5" :sm="8">
              <a-form-item label="订单号">
                <a-input placeholder="请输入订单号" v-model="queryParam.orderNumber"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="8">
                <a-form-item label="款号">
                  <a-input placeholder="请输入款号" v-model="queryParam.itemNumber"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="8">
                <a-form-model-item label="类型">
                  <a-select v-model="queryParam.flourOrGarment">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="1">成衣</a-select-option>
                    <a-select-option value="0">面辅料</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>

              
            <a-col :md="5" :sm="8">
              <a-form-item label="预发货日期">
                <a-range-picker
                  :placeholder="['开始时间', '结束时间']"
                  format="YYYY-MM-DD"
                  style="width: 100%"
                  v-model="preDeliveryDate"
                  @change="deliveryDateChange"
                />
              </a-form-item>
            </a-col>

            <template v-if="toggleSearchStatus">
               <a-col :md="5" :sm="8">
                <a-form-item label="账套号">
                  <!-- <a-input placeholder="请输入供应商" v-model="queryParam.supplier"></a-input> -->
                   <j-search-select-tag
                  placeholder="请选择账套号"
                  v-model="queryParam.account"
                  dict="view_account,account,account">
                </j-search-select-tag>
                </a-form-item>
              </a-col>
             <a-col :md="5" :sm="8">
                <a-form-item label="业务员">
                  <!-- <a-input placeholder="请输入业务员" v-model="queryParam.salesman"></a-input> -->
                    <j-search-select-tag
                  placeholder="请选择业务员"
                  v-model="queryParam.salesman"
                  dict="view_salesman,salesman,salesman">
                </j-search-select-tag>
                </a-form-item>
              </a-col>
              
              <a-col :md="5" :sm="8">
                <a-form-item label="是否被参照">
                  <a-select v-model="queryParam.refer">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="0">否</a-select-option>
                    <a-select-option value="1">是</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

               <a-col :md="5" :sm="8">
                <a-form-item label="是否提交">
                  <a-select v-model="queryParam.submitStatus">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="0">否</a-select-option>
                    <a-select-option value="1">是</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="8">
                <a-form-item label="小po">
                  <a-input placeholder="请输入小po" v-model="queryParam.smallPo"></a-input>
                </a-form-item>
              </a-col>

             <a-col :md="5" :sm="8">
              <a-form-item label="起始时间">
                <a-range-picker
                  style="width: 100%"
                  v-model="timeRange"
                  format="YYYY-MM-DD"
                  :placeholder="['开始时间', '结束时间']"
                  @change="onDateChange"
                  @ok="onDateOk"
                />
              </a-form-item>
            </a-col>


              <a-col :md="5" :sm="8">
                <a-form-item label="供应商">
                  <!-- <a-input placeholder="请输入供应商" v-model="queryParam.supplier"></a-input> -->
                   <j-search-select-tag
                  placeholder="请选择供应商"
                  v-model="queryParam.supplier"
                  dict="view_supplier,supplier,supplier">
                </j-search-select-tag>
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="8">
                <a-form-item label="分销点">
                  <!-- <a-input placeholder="请输入供应商" v-model="queryParam.supplier"></a-input> -->
                   <j-search-select-tag
                  placeholder="请选择分销点"
                  v-model="queryParam.distributionPoint"
                  dict="view_distributionpoint,distributionPoint,distributionPoint">
                </j-search-select-tag>
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="8">
                <a-form-item label="客户简称">
                  <!-- <a-input placeholder="请输入供应商" v-model="queryParam.supplier"></a-input> -->
                   <j-search-select-tag
                  placeholder="请选择客户简称"
                  v-model="queryParam.customerAbbreviation"
                  dict="view_customer,customername,customername">
                </j-search-select-tag>
                </a-form-item>
              </a-col>
              

              <a-col :md="5" :sm="8">
                <a-form-model-item label="申报要素是否维护">
                  <a-select v-model="queryParam.isElement">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="1">已维护</a-select-option>
                    <a-select-option value="0">未维护</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>

              <a-col :md="5" :sm="8">
                <a-form-model-item label="是否全选">
                  <a-select v-model="allList">
                    <a-select-option value="1">全选</a-select-option>
                    <a-select-option value="0">勾选</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>

            </template>

            <a-col :md="4" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <!-- 操作按钮区域 -->
    <a-spin :spinning="loading">
    <a-card :bordered="false" style=" marginTop:10px;">
      <div class="table-operator">
        <!-- <a-button type="primary" @click.stop="addShipDet" icon="plus">新增</a-button> -->
        <a-button type="primary" @click.stop="referOrderDataOpen" icon="plus" >参照订单数据</a-button>
        <a-button type="primary" icon="download" @click="handleExportXls('出运成衣')" :disabled="exportButton == '1'">成衣导出-预装箱单</a-button>
        <a-button type="primary" icon="download" @click="handleExportXls('出运面辅料')" :disabled="exportButton1 == '1'">面辅料导出-装箱单</a-button>
        <a-button type="primary" icon="download" @click="exportXlsShipment('出运明细列表')">出运明细导出</a-button>
        <a-button type="primary" icon="check" @click="submit">批量提交</a-button>
        <a-button type="primary" icon="close" @click="cancelSubmit">批量取消提交</a-button>
        <a-button type="primary" icon="close" @click="batchDelete">批量删除</a-button>
      </div>
      
      <!-- 测试 -->
      <ve-table :columns="columns" :virtual-scroll-option="virtualScrollOption"  :max-height="600" :table-data="shipmentListData" style="width:100%" :border-y="true" :sort-option="sortOption" :scroll-width="1500"  row-key-field-name="itemIds"   :checkbox-option="checkboxOption">
      </ve-table>
      <div v-show="showEmpty" class="empty-data">暂无数据</div>
      <span style="margin-right: 55%;">共勾选{{selectedNumber}}条数</span>
      <span >总数量：{{ allMoney }}</span>
    </a-card>
  </a-spin>
    <!-- 抽屉  -->
    <div>
      <!-- <addShipDet-drawer ref="addShipDetDrawer" :fatherList="getShipmentList" @ok="modalFormOk" @close="closeAdd"></addShipDet-drawer> -->
       <!-- 参照订单数据 -->
      <referOrderData-modal ref="referOrderDataModal" @close="closeAdd" ></referOrderData-modal>

      <editShipDet-drawer ref="editShipDetDrawer" :fatherList="getShipmentList" @ok="modalFormOk"  @close='closeAddEdit'></editShipDet-drawer>

      <detailsShipDet-drawer ref="detailsShipDetDrawer" @ok="modalFormOk"></detailsShipDet-drawer>
      <!-- 申报要素 弹框 -->
      <declareElements-modal ref="declareElementsModal" @table="getShipmentList" @save-information="saveInformation"  @close-declare="closeDeclare"  @close-data="closeData"></declareElements-modal>

      <!-- 维护款号成分 -->
      <itemNumEle-modal ref="itemNumEleModal" @close="closeItemNumEle"  @closeItem="changeList"></itemNumEle-modal>
    </div>
  </div>

</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'

import { downFile } from '@/api/manage'

import addShipDetDrawer from '@views/shipment-details/addShipDetDrawer.vue'
import detailsShipDetDrawer from '@views/shipment-details/detailsShipDetDrawer.vue'
import editShipDetDrawer from '@views/shipment-details/editShipDetDrawer.vue'
import declareElementsModal from '@views/shipment-details/declareElementsModal.vue'
import Drapp from './dropp.vue'
import ReferOrderDataModal from '@views/shipment-details/referOrderDataModal.vue'
import itemNumEleModal from '@views/shipment-details/itemNumEleModal.vue'
import { randomUUID } from '@/utils/util'
import { USER_AUTH } from "@/store/mutation-types"
import {
  shipmentList,
  deleteShipment,
  submitShipment,
  shipmentQueryById,
  queryByDetails,
  queryDeclarationElements,
  cancelSubmitShipment,
  pushShipment,
  rePushShipment,
  exportXls,
  listExportXls,
  deleteBatch
} from '@api/document/shipmentList'
export default {
  name: 'ShipmentList', // 发运明细列表
  mixins: [JeecgListMixin],
  components: {
    JEllipsis,
    moment,
    addShipDetDrawer,
    detailsShipDetDrawer,
    editShipDetDrawer,
    declareElementsModal,
    ReferOrderDataModal,
    cancelSubmitShipment,
    pushShipment,
    rePushShipment,
    itemNumEleModal,
    Drapp,
  },

  data() {
    let ellipsis = (v,l) => <j-ellipsis value={v} length={l} />
    return {
      loading: false, // 表格加载
      exportButton: '1',
      exportButton1:'1',
      id: '',
      authority:true,
      selectedNumber:0,//已选择条数
      monthStartDate:'',//本月1号
      nextMonthStartDate:'',//下月1号
      nextMonthEndDate:'',//下月最后一天
      allList:'0',
      virtualScrollOption: {
        // 是否开启
         enable: false,
      },
      checkboxOption: {
                     selectedRowKeys: [],
                    // 行选择改变事件
                    selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
                      this.checkboxOption.selectedRowKeys = selectedRowKeys
                      this.selectedRowKeys = selectedRowKeys;
                      var rows=[]
                      this.shipmentListData.map(item=>{
                        this.selectedRowKeys.map(event=>{
                          if(item.itemIds == event) {rows.push(item)}
                        })
                        
                      })
                        this.selectedRows= rows
                       this.selectedNumber =this.selectedRowKeys.length
                    },
                    // 全选改变事件
                    selectedAllChange: ({ isSelected, selectedRowKeys }) => {
                      this.checkboxOption.selectedRowKeys = []
                      this.checkboxOption.selectedRowKeys = selectedRowKeys
                      this.selectedRowKeys = selectedRowKeys;
                      if(isSelected){
                        this.selectedRows = []
                        this.selectedRows = this.shipmentListData
                      }else{
                      this.selectedRows = []
                      }
                      this.selectedNumber =this.selectedRowKeys.length
                    },
                },
                sortOption: {
                    sortChange: (params) => {
                        this.sortChange(params);
                    },
                },
      shipmentListColumns: [
        {
          title: '账套',
          dataIndex: 'account',
          width: 85,
           fixed: 'left',
          ellipsis: true,
          className: 'replacecolor',
          sorter:(a, b) => a.account - b.account,
        },
        {
          title: '销售订单号',
          dataIndex: 'orderNumber',
          // fixed: 'left',
          // customRender: t => ellipsis(t,17),
          width: 180,
           ellipsis: true,
          className: 'replacecolor',
          sorter:(a, b) => a.orderNumber - b.orderNumber,

        },
        {
          title: '款号',
          dataIndex: 'itemNumber',
          width: 130,
          ellipsis: true,
          className: 'replacecolor',
          sorter:(a, b) => a.itemNumber - b.itemNumber,

        },
        {
          title: '业务员',
          dataIndex: 'salesman',
          width: 100,
          ellipsis: true,
          className: 'replacecolor',
          sorter:(a, b) => a.salesman - b.salesman,
          
        },
        {
          title: '分销点',
          dataIndex: 'distributionPoint',
          width: 110,
          ellipsis: true,
          className: 'replacecolor',
          sorter:(a, b) => a.distributionPoint - b.distributionPoint,

        },
        {
          title: '小po',
          dataIndex: 'smallPo',
          width: 110,
          ellipsis: true,
          className: 'replacecolor',
          sorter:(a, b) => a.smallPo - b.smallPo,
        },

        {
          title: '存货名称',
          dataIndex: 'inventoryName',
          width: 220,
          className: 'replacecolor',
          ellipsis: true,
          sorter:(a, b) => a.inventoryName - b.inventoryName,
        },
        {
          title: '报关品名',
          dataIndex: 'declarationName',
          width: 175,
          className: 'replacecolor',
           ellipsis: true,
          sorter:(a, b) => a.declarationName - b.declarationName,
        },
        {
          title: '是否TC',
          dataIndex: 'isTc',
          width: 110,
          customRender: function(text) {
            if (text === '0') {
              return '否'
            }
            if (text === '1') {
              return '是'
            }
          },
          className: 'replacecolor',
          sorter:(a, b) => a.isTc - b.isTc,

        },
        {
          title: '预发货日期',
          dataIndex: 'preDeliveryDate',
          width: 120,
          customRender: text => {
            if (text == "" || text == null)
              return "";
            return moment(text).format('YYYY-MM-DD')
          },
          ellipsis: true,
          className: 'replacecolor',
          sorter:(a, b) => a.preDeliveryDate - b.preDeliveryDate,

        },
        {
          title: '数量',
          dataIndex: 'shipmentQuantity',
          width: 80,
          ellipsis: true,
          className: 'replacecolor',
          sorter:(a, b) => a.shipmentQuantity - b.shipmentQuantity,

        },
        {
          title: '报关单价',
          dataIndex: 'customsDeclarationUnitPrice',
          width: 80,
          className: 'replacecolor',
           ellipsis: true,
          sorter:(a, b) => a.customsDeclarationUnitPrice - b.customsDeclarationUnitPrice,

        },
        {
          title: '成衣工厂',
          dataIndex: 'garmentFactory',
          width: 100,
          className: 'replacecolor',
          ellipsis: true,
          sorter:(a, b) => a.garmentFactory - b.garmentFactory,

        },
        {
          title: 'HScode',
          dataIndex: 'hsCode',
          width: 120,
          className: 'replacecolor',
           ellipsis: true,
          sorter:(a, b) => a.hsCode - b.hsCode,

        },
        {
          title: '英文品名',
          dataIndex: 'englishProductName',
          width: 110,
          className: 'replacecolor',
          // customRender: t => ellipsis(t),
           ellipsis: true,
          sorter:(a, b) => a.englishProductName - b.englishProductName,

        },
        {
          title: '物料成分',
          dataIndex: 'materialComposition',
          width: 180,
          ellipsis: true,
          className: 'replacecolor',
          ellipsis: true,
          sorter:(a, b) => a.materialComposition - b.materialComposition,

        },
        {
          title: '采购/委外订单号',
          dataIndex: 'purOrSubOrder',
          width: 140,
          className: 'replacecolor',
          ellipsis: true,
          sorter:(a, b) => a.purOrSubOrder - b.purOrSubOrder,

        },
        {
          // （存货自定义项）
          title: '套装件数',
          dataIndex: 'numberOfSets',
          width: 90,
          className: 'replacecolor',
           ellipsis: true,
          sorter:(a, b) => a.numberOfSets - b.numberOfSets,

        },
        {
          title: 'pack id',
          dataIndex: 'packId',
          width: 110,
          ellipsis: true,
          className: 'replacecolor',
          sorter:(a, b) => a.packId - b.packId,

        },
        {
          title: '客户简称',
          dataIndex: 'customerAbbreviation',
          width: 100,
          align: 'left',
          ellipsis: true,
          className: 'replacecolor',
          sorter:(a, b) => a.customerAbbreviation - b.customerAbbreviation,

        },
        {
          title: '部门',
          dataIndex: 'salesDepartment',
          width: 100,
          ellipsis: true,
          className: 'replacecolor',
          sorter:(a, b) => a.salesDepartment - b.salesDepartment,

        },

        {
          title: '单据号',
          dataIndex: 'documentNo',
          // fixed: 'left',
          align: 'left',
          width: 140,
          ellipsis: true,
          className: 'replacecolor',
          sorter:(a, b) => a.documentNo - b.documentNo,

        },
  
        // {
        //   title: '推送结果',
        //   dataIndex: 'pushState',
        //   scopedSlots: { customRender: 'pushState' },
        //   fixed: 'right',
        //   width: 110,
        //   className: 'replacecolor',
        //   sorter:(a, b) => a.pushState - b.pushState,

        // },
        {
          title: '单据状态',
          dataIndex: 'submitStatus',
          scopedSlots: { customRender: 'state' },
          fixed: 'right',
          width: 110,
          className: 'replacecolor',
          sorter:(a, b) => a.submitStatus - b.submitStatus,

        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operationSlot' },
          fixed: 'right',
          width: 250,
          className: 'replacecolor',
        }
      ],
      shipmentListData: [], // 发运明细数据
      allMoney:'',
      copyTableData:[],//保存还未更新时的申报要素列表信息
      copyFromData:{},////保存修改报关要素所点击得那行数据
      // 查询条件
      queryParam: {
        flourOrGarment:'1'
      },
      selectedRowKeys:[],
      selectedRows:[],
      timeRange:[],//起始时间
      preDeliveryDate:[],//预发货日期
      returnId:'',//新增后返回的id筛选条件
      returnFlourOrGarment:'',//新增后返回类型条件
      showEmpty:true,
      pagination: {
        // total: '',
        // current: 0,
        // pageSize: 0
      },

      columns: [
          {field: "",key: "ju",type: "checkbox",title: "",width: 50, align: "center",ellipsis: {showTitle: true,},},
          { field: "account", key: "a", title: "账套", align: "center", width: 85,sortBy: "",ellipsis: {showTitle: true,},},
          { field: "orderNumber", key: "b", title: "销售订单号", align: "center",width: 180,sortBy: "",ellipsis: {showTitle: true,}, },
          { field: "itemNumber", key: "c", title: "款号", align: "center",width: 130,sortBy: "",ellipsis: {showTitle: true,}, },
          { field: "salesman", key: "d", title: "业务员", align: "center", width: 100,sortBy: "", ellipsis: {showTitle: true,},},
          { field: "distributionPoint", key: "e", title: "分销点", align: "center", width: 110,sortBy: "", ellipsis: {showTitle: true,},},
          { field: "smallPo", key: "f", title: "小po", align: "center", width: 110,sortBy: "", ellipsis: {showTitle: true,},},
          { field: "inventoryName", key: "g", title: "存货名称", align: "center", width: 220,sortBy: "", ellipsis: {showTitle: true,},},
          { field: "declarationName", key: "h", title: "报关品名", align: "center", width: 175,sortBy: "",ellipsis: {showTitle: true,}, },
          { field: "isTc", key: "i", title: "是否TC", align: "center", width: 110,sortBy: "", ellipsis: {showTitle: true,}, renderBodyCell: ({ row, column, rowIndex }, h) => {
                            const text = row[column.field];
                            if(text=='0'){
                              return (
                                <span>否</span>
                              ) 
                            }else if(text=='1'){
                              return (
                                <span>是</span>
                              );
                            }
                            
                        },},
          { field: "preDeliveryDate", key: "j", title: "预发货日期", align: "center", width: 120,sortBy: "", ellipsis: {showTitle: true,}, },
          { field: "shipmentQuantity", key: "k", title: "数量", align: "center", width: 80,sortBy: "", ellipsis: {showTitle: true,},},
          { field: "customsDeclarationUnitPrice", key: "m", title: "报关单价", align: "center", width: 100,sortBy: "",ellipsis: {showTitle: true,}, },
          { field: "garmentFactory", key: "l", title: "成衣工厂", align: "center", width: 100,sortBy: "" ,ellipsis: {showTitle: true,},},
          { field: "hsCode", key: "n", title: "HScode", align: "center", width: 120,sortBy: "",ellipsis: {showTitle: true,}, },
          { field: "englishProductName", key: "o", title: "英文品名", align: "center", width: 110,sortBy: "",ellipsis: {showTitle: true,},  },
          { field: "materialComposition", key: "p", title: "物料成分", align: "center", width: 180,sortBy: "",ellipsis: {showTitle: true,}, },
          { field: "purOrSubOrder", key: "q", title: "采购/委外订单号", align: "center", width: 180,sortBy: "",ellipsis: {showTitle: true,}, },
          { field: "numberOfSets", key: "r", title: "套装件数", align: "center", width: 100,sortBy: "",ellipsis: {showTitle: true,}, },
          { field: "packId", key: "s", title: "pack id", align: "center", width: 110,sortBy: "",ellipsis: {showTitle: true,}, },
          { field: "customerAbbreviation", key: "t", title: "客户简称", align: "center", width: 100,sortBy: "",ellipsis: {showTitle: true,}, },
          { field: "salesDepartment", key: "u", title: "部门", align: "center", width: 100,sortBy: "",ellipsis: {showTitle: true,}, },
          { field: "documentNo", key: "v", title: "单据号", align: "center", width: 140,sortBy: "",ellipsis: {showTitle: true,}, },
          { field: "submitStatus", key: "w", title: "单据状态",fixed: "right", align: "center", width: 110,sortBy: "" ,ellipsis: {showTitle: true,}, renderBodyCell: ({ row, column, rowIndex }, h) => {
                            const text = row[column.field];
                            if(text=='0'){
                              return (
                                <a-tag color="orange" >已保存</a-tag>
                              ) 
                            }else{
                              return (
                                <a-tag color="green">已提交</a-tag>
                              );
                            }
                        }},
          { field: "operation", key: "x",fixed: "right" , title: "操作", align: "center", width: 250, renderBodyCell: ({ row, column, rowIndex }, h) => {
                            return <Drapp  row={row}  column={column} rowIndex={rowIndex} on-details={() => this.details(row)} on-push={() => this.push(row)} on-rePush={() => this.rePush(row)}  on-edit={() => this.edit(row)} on-handleDelete={() => this.handleDelete(row)} on-triggerT={() => this.declareElements(row)}  on-triggerW={()=>this.itemNumberElement(row)}/>;
                        }}
        ],
        tableData: [
          {
            account:'1',
            orderNumber:'2',
            itemNumber:'3',
            salesman:'4',
            itemIds:'1'
          },
          {
            account:'2',
            orderNumber:'2',
            itemNumber:'3',
            salesman:'4',
            itemIds:'2'
          },
          {
            account:'3',
            orderNumber:'2',
            itemNumber:'3',
            salesman:'4',
            itemIds:'3'
          },
        ],
      dateFormat: 'YYYY-MM-DD',
      
    }
  },
  created() {
    // this.getShipmentList() // 渲染 发运明细列表
    // this.defalutDate()
  },
  mounted(){
  },
  methods: {
    moment,
    //默认预发货日期
    defalutDate(){
     var now = new Date(); //当前日期 
      var nowMonth = now.getMonth(); //当前月 
      var nextMonth = nowMonth+1; //下个月
      var nowYear = now.getFullYear(); //当前年
      this.monthStartDate = moment(new Date(nowYear, nowMonth, 1)).format('YYYY-MM-DD');  
      this.nextMonthStartDate = moment(new Date(nowYear, nextMonth, 1)).format('YYYY-MM-DD');  
      if([1, 3, 5, 7, 8, 10, 12].indexOf(nextMonth+1) > -1){
        this.nextMonthEndDate = moment(new Date(nowYear, nextMonth, 31)).format('YYYY-MM-DD');  
      }else {
        this.nextMonthEndDate = moment(new Date(nowYear, nextMonth, 30)).format('YYYY-MM-DD'); 
      }
      this.preDeliveryDate.push(this.nextMonthStartDate,this.nextMonthEndDate)
      this.queryParam.preDeliveryDateB = this.nextMonthStartDate
      this.queryParam.preDeliveryDateE = this.nextMonthEndDate
    },
    // 分页查询 发运明细
    async getShipmentList() {
      this.loading = true
      this.copyTableData = []
      this.copyFromData = {} //保存修改报关要素所点击得那行数据
      await  shipmentList(this.queryParam).then(res => {
          if (res.success) {
           this.loading = false
           this.allMoney = res.message
           if(this.queryParam.flourOrGarment == '1'){
             this.exportButton ='0'
             this.exportButton1 = '1'
           }else {
             this.exportButton ='1'
             this.exportButton1 = '0'
           }
           let allAuthes = JSON.parse(sessionStorage.getItem(USER_AUTH));
           var quanXian = []
           allAuthes.map(item=>{ quanXian.push(item.action)})
           if(quanXian.indexOf('cymx:sbys')==-1 && this.queryParam.flourOrGarment=='0'){
            this.authority = true
           }else if(quanXian.indexOf('cymx:sbys')==-1 && this.queryParam.flourOrGarment=='1'){
            this.authority = false
           }
           this.shipmentListData = res.result.records
           this.showEmpty =  this.shipmentListData.length==0?true:false
           this.virtualScrollOption.enable =  this.shipmentListData.length>500?true:false
            for (var i=0; i<this.shipmentListData.length; i++){
              this.shipmentListData.randomId = randomUUID();
            }
            
            this.selectedRowKeys = []
            this.checkboxOption.selectedRowKeys = []
          }else {
             this.$message.error(res.message)
             this.loading = false
          }
        })
    },
    //关闭申报要素弹窗
     async closeDeclare(){
       //判断是否是新增的数据
      // await this.judageAdd()        
      var cc = []
      this.shipmentListData.map(item =>{
        this.selectedRows.map(item1 =>{
          if(item.itemIds == item1.itemIds){
            cc.push(item)
          }
        })
      })
      this.selectedRows = cc
      cc.map(item => this.selectedRowKeys.push(item.itemIds))
    },
    saveInformation(data){
      this.copyTableData = data.syDeclarationElementsItemList
    },

    //关闭维护款号成分弹窗
    closeItemNumEle(){

    },
    changeList(data,record){
      this.shipmentListData.map(item=>{
        if(item.itemNumber == record.itemNumber && item.inventoryName==record.inventoryName && item.orderNumber == record.orderNumber){
          item.isTc = data.isTc
          item.materialComposition = data.materialComposition
        }
      })
    },
    closeData(data,record){
      this.copyFromData = record//保存修改报关要素所点击得那行数据
      this.shipmentListData.map(item=>{
        if(item.orderNumber == record.orderNumber && item.itemNumber==record.itemNumber && item.account == record.account&& item.inventoryName == record.inventoryName){
          item.declarationName = data.declarationName
          item.hsCode = data.hsCode
          item.englishProductName = data.englishProductName
          item.declarationUnit = data.declarationUnit
        }
      })
    },
    // // 新增
    // addShipDet() {
    //   this.$refs.addShipDetDrawer.syShippingDetailsItemList = [];
    //   this.$refs.addShipDetDrawer.visible = true
    // },

    //参照订单数据
    referOrderDataOpen(){
      this.$refs.referOrderDataModal.referOrderDataModVis = true
      this.$refs.referOrderDataModal.range.push(this.monthStartDate)     
      this.$refs.referOrderDataModal.queryParam.preDeliveryDateS = this.monthStartDate;
      this.$refs.referOrderDataModal.queryParam.preDeliveryDateE  = '';
    },


    //  申报要素
    declareElements(record) {
      if (record.inventoryName == ""){
        this.$message.error('当前行存货名称为空，无法维护报关要素');
      }else{
        this.$refs.declareElementsModal.declareElementsModVis = true
        queryDeclarationElements({
          id: record.elementsId,
          syShippingids:record.itemIds
        }).then(res => {
          if (res.success) {
            // console.log('申报要素子表数据', res.result.syDeclarationElementsItemList)
            res.result['itemIds'] = record.itemIds;

            this.$refs.declareElementsModal.declareElements = res.result
            this.$refs.declareElementsModal.declareElements.declarationName  = record.declarationName
            this.$refs.declareElementsModal.declareElements.englishProductName  = record.englishProductName
            this.$refs.declareElementsModal.declareElements.hsCode  = record.hsCode
            this.$refs.declareElementsModal.flourOrGarment = this.queryParam.flourOrGarment
            this.$refs.declareElementsModal.orderNumber = record.orderNumber
            this.$refs.declareElementsModal.declareElements.declarationUnit = record.declarationUnit?record.declarationUnit:res.result.declarationUnit
            this.$refs.declareElementsModal.record = record
            if(!res.result.hsCode  || res.result.hsCode == ''){
             this.$refs.declareElementsModal.query = '0'
            }else{
             this.$refs.declareElementsModal.query = '1'
            }
          //判断报关要素保存时子表是否有数据以及再次点击时所点击行和报关要素修改行满不满足带出子表得条件
          if(this.copyTableData.length==0||!(this.copyFromData.orderNumber == record.orderNumber && this.copyFromData.itemNumber==record.itemNumber && this.copyFromData.account == record.account&& this.copyFromData.inventoryName == record.inventoryName)){
           // 子表赋值
            this.$refs.declareElementsModal.declareElementsData = res.result.syDeclarationElementsItemList
          }else{
            this.$refs.declareElementsModal.declareElementsData = this.copyTableData
          }
            if(record.pushState == '1' && record.submitStatus == '1'){
              this.$refs.declareElementsModal.pushState = true
          }
          }
        })
      }
    },

    //  维护款号成分
    itemNumberElement(record) {
      this.$refs.itemNumEleModal.itemNumEleModVis = true
      this.$refs.itemNumEleModal.editItemNumber.itemIds = record.itemIds
      this.$refs.itemNumEleModal.editItemNumber.itemNumber = record.itemNumber
      this.$refs.itemNumEleModal.record = record
      
      this.$refs.itemNumEleModal.editItemNumber.materialComposition = record.materialComposition
      this.$refs.itemNumEleModal.editItemNumber.isTc = record.isTc
      if(record.materialComposition == ''  || !record.materialComposition){
        var ccode = record.inventoryCcode.substring(0,2);
       
        if(ccode =='19'){ //如果是成衣取规格型号,否则取物料名称
          this.$refs.itemNumEleModal.editItemNumber.materialComposition = record.specificationAndModel
        }else{
          var split = record.inventoryName.split(" ");
          this.$refs.itemNumEleModal.editItemNumber.materialComposition = split[0];
        }
      }
    },

    //判断是否是新增的数据-刷新数据
   async judageAdd(){
     await this.getShipmentList()
      //  if(!this.queryParam.flourOrGarment || this.queryParam.flourOrGarment == ''){
      //     // this.queryParam ={}
      //     this.queryParam.id =  this.returnId
      //     this.queryParam.flourOrGarment =this.returnFlourOrGarment
      //     await this.getShipmentList()
      //     // this.queryParam = {}
      //     // this.defalutDate()
      //   }else{
      //     await this.getShipmentList()
      //   }
    },
    

    // 导出
    handleExportXls(fileName) {
       if(!this.queryParam.flourOrGarment || this.queryParam.flourOrGarment == ''){
          this.queryParam ={}
          this.queryParam.id =  this.returnId
          this.queryParam.flourOrGarment =this.returnFlourOrGarment
        }
      var obj ={},
      yesA = 'yes'
      if(this.allList == '1'){
        obj = this.queryParam
        obj.selectAll = '1'
      }else{
        if( this.selectedRowKeys.length==0){
          this.$message.error('请勾引数据')
          yesA = 'no'
        }else{
          var grouyIdList=[]
        this.shipmentListData.map(item=>{
          this.selectedRowKeys.map(e=>{
            if(item.itemIds == e){
              grouyIdList.push(item.groupId)
            }
          })
        })
        obj.groupidList = grouyIdList.toString()
        obj.selectAll = '0'
        obj.flourOrGarment =this.queryParam.flourOrGarment
        }
        
      }
      if(yesA == 'yes'){
        this.loading = true
        exportXls(obj).then(res =>{
        if(res.success==false){
          this.$message.error(res.message)
        }else{
          downFile('/shippingDetails/syShippingDetails/exportXls',obj).then(data => {
            this.loading = false
            // this.queryParam = {}
            // this.defalutDate()
            if (!data) {
              this.$message.warning('文件下载失败')
              return
            }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                  window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xlsx')
                } else {
                  let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                  let link = document.createElement('a')
                  link.style.display = 'none'
                  link.href = url
                  link.setAttribute('download', fileName + '.xlsx')
                  document.body.appendChild(link)
                  link.click()
                  document.body.removeChild(link) // 下载完成移除元素
                  window.URL.revokeObjectURL(url) // 释放掉blob对象
                }
          })
        }
      })
      }
      

     
    },

    //明细导出
     exportXlsShipment(fileName){
      var obj ={},
      yesA = 'yes'
      if(this.allList == '1'){
        obj = this.queryParam
        obj.selectAll = '1'
      }else{
        if(this.selectedRowKeys.length==0){
          this.$message.error('请勾引数据')
          yesA = 'no'
        }else{
          var grouyIdList=[]
        this.shipmentListData.map(item=>{
          this.selectedRowKeys.map(e=>{
            if(item.itemIds == e){
              grouyIdList.push(item.groupId)
            }
          })
        })
        obj.groupidList = grouyIdList.toString()
        obj.selectAll = '0'
        obj.flourOrGarment =this.queryParam.flourOrGarment
        }
        
      }
      if( yesA == 'yes'){
        this.loading = true
        listExportXls(obj).then(res =>{
        if(res.success==false){
          this.$message.error(res.message)
        }else{  
      downFile('/shippingDetails/syShippingDetails/exportXlsShipping',obj).then(data => {
        this.loading = false
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xlsx')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xlsx')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) // 下载完成移除元素
          window.URL.revokeObjectURL(url) // 释放掉blob对象
        }
      })
    }
     })
      }
      
    },

    //  编辑
    edit(record) {
      this.$refs.editShipDetDrawer.visible = true
      queryByDetails({ id: record.id,itemIds: record.itemIds }).then(res => {
        if (res.success) {
          // console.log('编辑对象', res.result)
          this.$refs.editShipDetDrawer.editShipDet = res.result
          res.result.syShippingDetailsItemList.map(item =>{
            item.manualYarnFlag =  res.result.syShippingDetailsItemList[0].mjudageAddanualYarnFlag
            item.customsDeclarationUnitPrice = item.salesUnitPrice - item.ymoney
            if(item.manualYarnFlag === 0){
               item.manualYarnUnitPrice = null
               item.manualYarnProportion = null
               this.$refs.editShipDetDrawer.manualYarnDisabled = true
              this.$forceUpdate()
            }else {
              this.$refs.editShipDetDrawer.manualYarnDisabled = false
            }      
          })
          this.$refs.editShipDetDrawer.syShippingDetailsItemList = res.result.syShippingDetailsItemList
          this.$refs.editShipDetDrawer.readyFabric = this.queryParam.flourOrGarment
        }
      })
    },
    //  详情
    details(record) {
      this.$refs.detailsShipDetDrawer.visible = true
      queryByDetails({ id: record.id,itemIds: record.itemIds}).then(res => {
        if (res.success) {
          console.log('点击的对象', res.result)
          // 把通过id查询到的对象，赋值给子组件
          this.$refs.detailsShipDetDrawer.detailsShipDet = res.result
          this.$refs.detailsShipDetDrawer.syShippingDetailsItemList = res.result.syShippingDetailsItemList
        }
      })
    },

    //  提交
    submit() {
      this.$nextTick(() => {
        // for(var i =0;i<this.selectedRows.length;i++){
        //   var selectRow = this.selectedRows[i]
        //   if(selectRow.elementsId===''||!selectRow.elementsId){
        //     this.$message.error('勾选的第'+(i+1)+'行数据报关要素未填写，不可提交！')
        //     return
        //   }
        // }
        var grouyIdList = []
        this.loading = true
        this.shipmentListData.map(item =>{
          this.selectedRowKeys.map(e=>{
            if(item.itemIds == e){
              grouyIdList.push(item.groupId)
            }
          })
        })
        submitShipment({ submitListId: this.selectedRowKeys, type: '1' ,grouyIdList:grouyIdList}).then(res => {
        this.loading = false
          if (res.success) {
            // this.shipmentListData.submitStatus = '1'
            this.shipmentListData.map(item =>{
              this.selectedRowKeys.map(e=>{
                if(item.itemIds == e){
                  item.submitStatus = '1'
              }
           })
        })
            this.selectedRowKeys =[]
            this.checkboxOption.selectedRowKeys = []
            //  this.judageAdd()
             // 渲染 发运明细列表
            this.$message.success('提交成功')
          }else {
            this.judageAdd()
             this.$message.error(res.message)
          }
        })
      })
    },
    // 取消提交
    cancelSubmit(record) {
      console.log('取消订单id:', record.id)
      this.$nextTick(() => {
        var grouyIdList = []
        this.loading = true
        this.shipmentListData.map(item =>{
          this.selectedRowKeys.map(e=>{
            if(item.itemIds == e){
              grouyIdList.push(item.groupId)
            }
          })
        })
        cancelSubmitShipment({ submitListId: this.selectedRowKeys, type: '2',grouyIdList:grouyIdList }).then(res => {
        this.loading = false
          if (res.success) {
            // this.shipmentListData.submitStatus = '0'
            this.shipmentListData.map(item =>{
              this.selectedRowKeys.map(e=>{
                if(item.itemIds == e){
                  item.submitStatus = '0'
              }
           })
          })
            this.selectedRowKeys = []
            // this.judageAdd()
            this.$message.success('取消提交成功')
          }else {
             this.$message.error(res.message)
          }
        })
      })
    },
    
    //批量删除
    batchDelete(){
      this.$nextTick(() => {
        var itemId = [],
        ids = []
        this.loading = true
        this.shipmentListData.map(item =>{
          this.selectedRowKeys.map(e=>{
            if(item.itemIds == e){
              itemId.push(item.itemIds)
              ids.push(item.id)
            }
          })
        })
        deleteBatch({ ids: ids ,itemId:itemId}).then(res => {
        this.loading = false
          if (res.success) {
            // console.log('提交成功，单据状态改为【已提交】')
            // this.shipmentListData.submitStatus = '1'
            this.selectedRowKeys =[]
            this.checkboxOption.selectedRowKeys = []
             this.judageAdd()
             // 渲染 发运明细列表
            this.$message.success('批量成功')
          }else {
            this.judageAdd()
             this.$message.error(res.message)
          }
        })
      })
    },
    sortChange(params) {
                this.shipmentListData.sort((a, b) => {
                  for (var key in params) {
                   if(params[key]){
                    if (params[key] === "asc") {
                            return a[key] - b[key];
                        } else if (params[key] === "desc") {
                            return b[key] - a[key];
                        } else {
                            return 0;
                        }
                   }
                  }
                });
            },


    //  推送
    push(record) {
      console.log('推送id:', record.id)
      this.$nextTick(() => {
        if(this.queryParam.flourOrGarment == '1'){
          this.$message.error("成衣不可推送！")
        }else {
          pushShipment({ id: record.id }).then(res => {
          if (res.success) {
            console.log('推送成功，推送状态【推送成功】')
            this.shipmentListData.pushState = '1'
            this.judageAdd()
            this.$message.success('推送成功')
          }else {
            this.$message.error(res.message)
          }
        })
        }
        
      })
    },

    // 重新推送
    rePush(record) {
      console.log('重新推送record:', record)
      this.$nextTick(() => {
        if(this.queryParam.flourOrGarment == '1'){
          this.$message.error("成衣不可推送！")
        }else {
          rePushShipment({ id: record.id }).then(res => {
          if (res.success) {
            console.log('重新推送成功，推送状态【推送成功】')
            this.shipmentListData.pushState = '1'
            this.judageAdd()
            this.$message.success('重新推送成功')
          }else {
            this.$message.error(res.message)
          }
        })
        }
        
      })
    },

    //  删除
    handleDelete(record) {
      console.log('点击删除项id:', record.id)
      this.$nextTick(() => {
        deleteShipment({ id: record.id,itemIds: record.itemIds }).then(res => {
          console.log('res:', res)
          this.judageAdd() // 渲染 发运明细列表
          this.$message.success('删除成功')
        })
      })
    },

    onDateChange(value, dateString) {
      console.log('查询开始时间', dateString[0], '查询结束时间', dateString[1])
      this.queryParam.startTime = dateString[0]
      this.queryParam.endTime = dateString[1]
    },

    onDateOk(value) {
      console.log('value', value)
    },

    deliveryDateChange(value, dateString) {
      console.log('预发货日期', dateString)
      this.queryParam.preDeliveryDateB = dateString[0]
      this.queryParam.preDeliveryDateE = dateString[1]
    },

    searchQuery() {
      this.toggleSearchStatus = false
      if(this.queryParam.flourOrGarment === '' || !this.queryParam.hasOwnProperty('flourOrGarment')){
       this.$message.error('请选择查询类型！');
      }else if(this.queryParam.flourOrGarment == '1' && 
      ((this.queryParam.itemNumber==''||!this.queryParam.itemNumber)&&
      (this.queryParam.orderNumber==''||!this.queryParam.orderNumber)&&
      (this.queryParam.salesman==''||!this.queryParam.salesman)&&
      (this.queryParam.supplier==''||!this.queryParam.supplier)&&
      (this.queryParam.customerAbbreviation==''||!this.queryParam.customerAbbreviation)&&
      this.preDeliveryDate.length == 0
      )){
        this.$message.error('款号/订单号/预发货日期/业务员/供应商/客户均未选择！');
      }else{
         if(this.preDeliveryDate.length ==2){
            var separator = "-"; //日期分隔符  
            var startDates = this.queryParam.preDeliveryDateB.split(separator);  
            var endDates = this.queryParam.preDeliveryDateE.split(separator);  
            var startDate = new Date(startDates[0], startDates[1]-1, startDates[2]);  
            var endDate = new Date(endDates[0], endDates[1]-1, endDates[2]);  
            var timeInterval= parseInt(Math.abs(endDate - startDate ) / 1000 / 60 / 60 /24) + 1;
            if(timeInterval > 60){
             this.$message.error('预发货时间区间超过60天，请重新选择！');
            }else { 
              this.queryParam.id = ''
             this.getShipmentList() 
             
           }       
         }else{
          this.queryParam.id = ''
           this.getShipmentList() 
         }
         
      }
    },

    searchReset() {
      this.queryParam = {
        flourOrGarment:'1'
      }
      this.timeRange = []
      this.preDeliveryDate = []
      // this.defalutDate()
      this.selectedRows = []
      this.selectedRowKeys = []
      this.checkboxOption.selectedRowKeys = []
      this.shipmentListData = [] // 渲染 发运明细列表
    },

    //选中行
    onSelectChange(keys,rows){
      this.selectedRowKeys = keys;
      this.selectedRows = rows;
    },

    // 分页变化时触发
    handleTableChange(pagination, filters, sorter) {
      this.queryParam.pageNo = pagination.current
      this.getShipmentList()
    },

    //关闭新增弹窗
    async closeAdd(data,id,range){  
      this.queryParam ={}
      this.queryParam.flourOrGarment = data
      this.queryParam.id = id
      this.preDeliveryDate=range
      this.queryParam.preDeliveryDateB =(this.preDeliveryDate[0]&&this.preDeliveryDate[0]!=='')? this.preDeliveryDate[0].format('YYYY-MM-DD'):''; 
      this.queryParam.preDeliveryDateE =(this.preDeliveryDate[1]&&this.preDeliveryDate[1]!=='')? this.preDeliveryDate[1].format('YYYY-MM-DD'):''; 
      //其他地方使用
      this.returnId = id
      this.returnFlourOrGarment = data
     await this.getShipmentList()
      // this.queryParam = {}
      // this.defalutDate()
    },
    async closeAddEdit(){
       this.judageAdd()
    }
  }
}
</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;
// }
// /deep/ .ant-form-item {
//   // margin-bottom: 0 !important;
// }
/deep/ .ant-table-tbody .ant-table-row td{
    padding-top: 8px;
    padding-bottom: 8px;
}
/deep/.ant-card-body{
padding-top: 10px !important;
padding-bottom: 0px !important;
}
/deep/.table-operator .ant-btn{
  margin: 0 8px 3px 0;
}
/deep/.table-page-search-wrapper .ant-form-inline .ant-form-item{
  margin-bottom: 10px;
}
/deep/.table-page-search-wrapper .table-page-search-submitButtons{
 margin-bottom: 10px;
}
/deep/ thead.ant-table-thead>tr{
      height: 0 !important;
}
/deep/ .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
  padding: 9px 16px
}
.empty-data {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
        width: 100%;
        color: #666;
        font-size: 16px;
        border: 1px solid #eee;
        border-top: 0;
    }
</style>