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="起始时间">
                <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>

            </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-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>
      </div>

      <!-- 子表  :row-key="record => record.id"  :pagination="ipagination-->
      <a-table
        v-if="shipmentListData"
        bordered
        rowKey="itemIds"
        :columns="shipmentListColumns"
        :data-source="shipmentListData"
        :loading="loading"
        :pagination="false"
        :scroll="{ x: 1500 , y: 600}"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange"
      >
        <!-- 推送状态 -->
        <span slot="pushState" slot-scope="text, record">
          <a-tag color="#2db7f5" v-if="record.pushState == '0'">未推送</a-tag>
          <a-tag color="#87d068" v-if="record.pushState == '1'">推送成功</a-tag>
          <a-tag color="#f50" v-if="record.pushState == '2'">推送失败</a-tag>
        </span>

        <!-- 单据状态 -->
        <span slot="state" slot-scope="text, record">
          <a-tag color="orange" v-if="record.submitStatus == '0'">已保存</a-tag>
          <a-tag color="green" v-if="record.submitStatus == '1'">已提交</a-tag>
        </span>

        <!-- 操作 默认按钮  未提交未推送-->
        <span slot="operationSlot" slot-scope="text, record">
           <a href="javascript:void(0);" @click="declareElements(record)" style="color:green">报关要素</a>
           <a-divider type="vertical" />
          <a href="javascript:void(0);" @click="itemNumberElement(record)" style="color:green">维护款号成分</a>
          
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多<a-icon type="down"/></a>
            <!-- 已保存 -->
            <a-menu slot="overlay" v-if="record.submitStatus == '0'">
              <a-menu-item>
                <a @click="details(record)">详情</a>
              </a-menu-item>

              <a-menu-item>
                <a @click="edit(record)">编辑</a>
              </a-menu-item>

              <!-- <a-menu-item>
                <a-popconfirm title="确定提交吗?" ok-text="是" cancel-text="否" @confirm="submit(record)">
                  <a href="javascript:void(0);" style="color:green;">提交</a>
                </a-popconfirm>
              </a-menu-item> -->

              <a-menu-item>
                <a-popconfirm  arrowPointAtCenter title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record)">
                  <a href="javascript:void(0);" style="color:red;">删除</a>
                </a-popconfirm>
              </a-menu-item>

              <!-- <a-menu-item>
                <a href="javascript:void(0);" @click="itemNumberElement(record)">维护款号成分</a>
              </a-menu-item> -->
            </a-menu>

            <!-- 已提交 且 推送成功   -->
            <a-menu slot="overlay" v-if="record.pushState == '1' && record.submitStatus == '1'">
              <a-menu-item>
                <a @click="details(record)">详情</a>
              </a-menu-item>
            </a-menu>

            <!-- 已提交 且 推送失败  -->
            <a-menu slot="overlay" v-if="record.pushState == '2' && record.submitStatus == '1'">
              <a-menu-item>
                <a @click="details(record)">详情</a>
              </a-menu-item>

              <a-menu-item>
                <a-popconfirm title="确定重新推送吗?" ok-text="是" cancel-text="否" @confirm="rePush(record)">
                  <a href="javascript:void(0);" style="color:green;">重新推送</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>

            <!-- 已提交 -->
            <a-menu slot="overlay" v-if="record.submitStatus == '1'">
              <a-menu-item>
                <a @click="details(record)">详情</a>
              </a-menu-item>

              <!-- <a-menu-item>
                <a-popconfirm title="确定取消提交吗?" ok-text="是" cancel-text="否" @confirm="cancelSubmit(record)">
                  <a href="javascript:void(0);" style="color:red;">取消提交</a>
                </a-popconfirm>
              </a-menu-item> -->

              <a-menu-item>
                <a-popconfirm title="确定推送吗?" ok-text="是" cancel-text="否" @confirm="push(record)">
                  <a href="javascript:void(0);" style="color:green;">推送</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>

            <!-- 未推送 -->
            <a-menu slot="overlay" v-if="record.pushState == '0'">
              <a-menu-item>
                <a @click="details(record)">详情</a>
              </a-menu-item>

              <a-menu-item>
                <a-popconfirm title="确定推送吗?" ok-text="是" cancel-text="否" @confirm="push(record)">
                  <a href="javascript:void(0);" style="color:green;">推送</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
      <span >共勾选{{selectedNumber}}条数</span>
    </a-card>

    <!-- 抽屉  -->
    <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" @close-declare="closeDeclare"></declareElements-modal>

      <!-- 维护款号成分 -->
      <itemNumEle-modal ref="itemNumEleModal" @close="judageAdd"></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 ReferOrderDataModal from '@views/shipment-details/referOrderDataModal.vue'
import itemNumEleModal from '@views/shipment-details/itemNumEleModal.vue'
import { randomUUID } from '@/utils/util'

import {
  shipmentList,
  deleteShipment,
  submitShipment,
  shipmentQueryById,
  queryByDetails,
  queryDeclarationElements,
  cancelSubmitShipment,
  pushShipment,
  rePushShipment,
  exportXls
} from '@api/document/shipmentList'

export default {
  name: 'ShipmentList', // 发运明细列表
  mixins: [JeecgListMixin],
  components: {
    JEllipsis,
    moment,
    addShipDetDrawer,
    detailsShipDetDrawer,
    editShipDetDrawer,
    declareElementsModal,
    ReferOrderDataModal,
    cancelSubmitShipment,
    pushShipment,
    rePushShipment,
    itemNumEleModal
  },

  data() {
    let ellipsis = (v,l) => <j-ellipsis value={v} length={l} />
    return {
      loading: false, // 表格加载
      exportButton: '1',
      exportButton1:'1',
      id: '',
      selectedNumber:0,//已选择条数
      monthStartDate:'',//本月1号
      nextMonthStartDate:'',//下月1号
      nextMonthEndDate:'',//下月最后一天
      shipmentListColumns: [
        {
          title: '账套',
          dataIndex: 'account',
          width: 90,
           fixed: 'left',
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '单据号',
          dataIndex: 'documentNo',
          // fixed: 'left',
          align: 'left',
          width: 140,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '销售订单号',
          dataIndex: 'orderNumber',
          // fixed: 'left',
          // customRender: t => ellipsis(t,17),
          width: 200,
           ellipsis: true,
          className: 'replacecolor'
        },

        {
          title: '客户简称',
          dataIndex: 'customerAbbreviation',
          width: 220,
          align: 'left',
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '部门',
          dataIndex: 'salesDepartment',
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '业务员',
          dataIndex: 'salesman',
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '小po',
          dataIndex: 'smallPo',
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },

        {
          title: 'pack id',
          dataIndex: 'packId',
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '分销点',
          dataIndex: 'distributionPoint',
          width: 120,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '款号',
          dataIndex: 'itemNumber',
          width: 80,
          ellipsis: true,
          className: 'replacecolor'
        },
         {
          title: '数量',
          dataIndex: 'shipmentQuantity',
          width: 80,
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '物料成分',
          dataIndex: 'materialComposition',
          width: 180,
          ellipsis: true,
          className: 'replacecolor',
          ellipsis: true,
        },
        {
          title: '预发货日期',
          dataIndex: 'preDeliveryDate',
          width: 120,
          customRender: text => {
            if (text == "" || text == null)
              return "";
            return moment(text).format('YYYY-MM-DD')
          },
          ellipsis: true,
          className: 'replacecolor'
        },

        {
          title: '存货名称',
          dataIndex: 'inventoryName',
          width: 240,
          className: 'replacecolor',
          ellipsis: true,
        },
         {
          title: 'HScode',
          dataIndex: 'hsCode',
          width: 120,
          className: 'replacecolor',
           ellipsis: true,
        },
        {
          title: '报关品名',
          dataIndex: 'declarationName',
          width: 120,
          className: 'replacecolor',
           ellipsis: true,
        },
        {
          title: '英文品名',
          dataIndex: 'englishProductName',
          width: 120,
          className: 'replacecolor',
          // customRender: t => ellipsis(t),
           ellipsis: true,
        },

        {
          title: '采购/委外订单号',
          dataIndex: 'purOrSubOrder',
          width: 180,
          className: 'replacecolor',
          ellipsis: true,
        },
        {
          // （存货自定义项）
          title: '套装件数',
          dataIndex: 'numberOfSets',
          width: 120,
          className: 'replacecolor',
           ellipsis: true,
        },
        {
          title: '是否TC',
          dataIndex: 'isTc',
          width: 90,
          customRender: function(text) {
            if (text === '0') {
              return '否'
            }
            if (text === '1') {
              return '是'
            }
          },
          className: 'replacecolor'
        },
       

        {
          title: '成衣工厂',
          dataIndex: 'garmentFactory',
          width: 120,
          className: 'replacecolor',
          ellipsis: true,
        },
        {
          title: '报关单价',
          dataIndex: 'customsDeclarationUnitPrice',
          width: 90,
          className: 'replacecolor',
           ellipsis: true,
        },
        {
          title: '推送结果',
          dataIndex: 'pushState',
          scopedSlots: { customRender: 'pushState' },
          fixed: 'right',
          width: 90,
          className: 'replacecolor',
        },
        {
          title: '单据状态',
          dataIndex: 'submitStatus',
          scopedSlots: { customRender: 'state' },
          fixed: 'right',
          width: 90,
          className: 'replacecolor',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operationSlot' },
          fixed: 'right',
          width: 250,
          className: 'replacecolor',
        }
      ],
      shipmentListData: [], // 发运明细数据

      // 查询条件
      queryParam: {
      },
      selectedRowKeys:[],
      selectedRows:[],
      timeRange:[],//起始时间
      preDeliveryDate:[],//预发货日期
      returnId:'',//新增后返回的id筛选条件
      returnFlourOrGarment:'',//新增后返回类型条件
      pagination: {
        // total: '',
        // current: 0,
        // pageSize: 0
      },
      dateFormat: 'YYYY-MM-DD',
      
    }
  },
  created() {
    // this.getShipmentList() // 渲染 发运明细列表
    this.defalutDate()
  },
   watch:{
    selectedRowKeys(newVal){
       this.selectedNumber =newVal.length
    }
  },
  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
      await  shipmentList(this.queryParam).then(res => {
          if (res.success) {
           this.loading = false
           if(this.queryParam.flourOrGarment == '1'){
             this.exportButton ='0'
             this.exportButton1 = '1'
           }else {
             this.exportButton ='1'
             this.exportButton1 = '0'
           }
           this.shipmentListData = res.result.records
            for (var i=0; i<this.shipmentListData.length; i++){
              this.shipmentListData.randomId = randomUUID();
            }
            this.selectedRowKeys = []
            this.pagination = {
              total: res.result.total,
              current: res.result.current,
              pageSize: res.result.size
            }
          }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))
    },

    // // 新增
    // 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
            if(!res.result.hsCode  || res.result.hsCode == ''){
             this.$refs.declareElementsModal.query = '0'
            }else{
             this.$refs.declareElementsModal.query = '1'
            }
          
            // 子表赋值
            this.$refs.declareElementsModal.declareElementsData = res.result.syDeclarationElementsItemList
            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.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(){
       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
        }
      exportXls(this.queryParam).then(res =>{
        if(res.success==false){
          this.$message.error(res.message)
        }else{
          downFile('/shippingDetails/syShippingDetails/exportXls',this.queryParam).then(data => {
            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对象
                }
          })
        }
      })

     
    },

    //明细导出
    async exportXlsShipment(fileName){
      if(!this.queryParam.flourOrGarment || this.queryParam.flourOrGarment == ''){
          this.queryParam ={}
          this.queryParam.id =  this.returnId
          this.queryParam.flourOrGarment =this.returnFlourOrGarment
        }
      downFile('/shippingDetails/syShippingDetails/exportXlsShipping',this.queryParam).then(data => {
          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对象
        }
      })
    },

    //  编辑
    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].manualYarnFlag
            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.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 => {
          if (res.success) {
            console.log('提交成功，单据状态改为【已提交】')
            this.shipmentListData.submitStatus = '1'
            this.selectedRowKeys =[]
            //判断是否是新增的数据
             this.judageAdd()
             // 渲染 发运明细列表
            this.$message.success('提交成功')
          }else {
            this.judageAdd()
             this.$message.error(res.message)
          }
        })
      })
    },
    // 取消提交
    cancelSubmit(record) {
      console.log('取消订单id:', record.id)
      this.$nextTick(() => {
        cancelSubmitShipment({ submitListId: this.selectedRowKeys, type: '2' }).then(res => {
          if (res.success) {
            console.log('取消提交成功，单据状态改为【仅保存】')
            this.shipmentListData.submitStatus = '0'
            this.selectedRowKeys = []
            this.judageAdd()
            this.$message.success('取消提交成功')
          }else {
             this.$message.error(res.message)
          }
        })
      })
    },

    //  推送
    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.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.getShipmentList() 
             
           }       
         }else{
           this.getShipmentList() 
         }
         
      }
    },

    searchReset() {
      this.queryParam = {}
      this.timeRange = []
      this.preDeliveryDate = []
      this.defalutDate()
      this.selectedRows = []
      this.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){   
      this.queryParam ={}
      this.queryParam.flourOrGarment = data
      this.queryParam.id = id
      //其他地方使用
      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
}
</style>