index.vue

<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-card>
        <div slot="header" class="card-title">{{$t('拆单申请')}}-{{orderData.orderNo||''}}</div>
        <div class="btn-header">
          <span class="card-title">{{$t('原单信息')}}</span>
        </div>
        <el-descriptions :column="4">
            <el-descriptions-item :label="$t('唛头')">
                {{orderData.marks?orderData.marks:$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('已到箱数/总箱数')">
                <span>{{orderData.sumNum||0}}/{{orderData.costVO?orderData.costVO.totalNum:0}}</span>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('订单状态')">
              <!-- <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="orderData.status" /> -->
              {{orderData.abnormalState!=0?$t('异常'):$t('正常')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('送货日期')">
              {{orderData.deliveryDate||$t('无')}}
            </el-descriptions-item>
          <el-descriptions-item :label="$t('运输方式')">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />
          </el-descriptions-item>
          <el-descriptions-item :label="$t('始发地')" >
              <template v-if="orderData.logisticsInfoDto">
                {{$l(orderData.logisticsInfoDto, 'startTitle')}}
              </template>
              <template v-else>{{$t('无')}}</template>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('目的地')" :span="2">
            <template v-if="orderData.logisticsInfoDto">
              {{$l(orderData.logisticsInfoDto, 'destTitle')}}
            </template>
            <template v-else>{{$t('无')}}</template>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('发货人姓名')">
              {{orderData.consignorVO?orderData.consignorVO.name||$t('无'):$t('无')}}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('发货公司')">
              {{orderData.consignorVO?orderData.consignorVO.company||$t('无'):$t('无')}}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('发货电话')">
                {{!orderData.consignorVO?$t('无'):!orderData.consignorVO.phone?$t('无'):(checkCode(orderData.consignorVO.countryCode)+orderData.consignorVO.phone)}}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="4">
            <el-descriptions-item :label="$t('收货人姓名')">
                {{orderData.consigneeVO?orderData.consigneeVO.name||$t('无'):$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货公司')">
                {{orderData.consigneeVO?orderData.consigneeVO.company||$t('无'):$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货电话')">
              {{!orderData.consigneeVO?$t('无'):!orderData.consigneeVO.phone?$t('无'):(checkCode(orderData.consigneeVO.countryCode)+orderData.consigneeVO.phone)}}
            </el-descriptions-item>
        </el-descriptions>

    </el-card>
    <el-card class="card">
      <!-- 列表 -->
      <div slot="header" class="card-title">{{$t('货物信息')}}</div>
      <el-table id='table' v-loading="loading"  border :data="orderData.orderItemVOList"  :summary-method="getSummaries" show-summary>
        <el-table-column :label="$t('序号')" align="center" prop="id" type="index" width="60">
          <template slot-scope="scope" >
              <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('品名')" align="center">
          <template slot-scope="scope">
             <el-row>{{scope.row.prodTitleEn}}</el-row>
             <el-row>{{scope.row.prodTitleZh}}</el-row>
          </template>
        </el-table-column>
        <el-table-column :label="$t('填单货物属性')" align="center" width="200">
            <template slot-scope="scope">
              <el-row>
                <span>{{$t('品牌')}}：
                  <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType" />
                </span>
              </el-row>
              <el-row>
                <span>{{$t('箱数')}}：{{scope.row.num||$t('未填')}}</span>
              </el-row>
              <el-row>
                <span>{{$t('体积')}}：{{scope.row.volume||$t('未填')}}m³</span>
              </el-row>
              <el-row>
                <span>{{$t('重量')}}：{{scope.row.weight||$t('未填')}}kg</span>
              </el-row>
            </template>
        </el-table-column>
        <el-table-column :label="$t('入库货物属性')" align="center" width="400">
            <template slot-scope="scope">
              <el-row v-if="scope.row.warehouseInInfoVO">
                <span>{{$t('规格')}}：{{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.boxGauge:0}}</span>
              </el-row>
              <el-row v-if="scope.row.warehouseInInfoVO">
                <span>{{$t('品牌')}}：
                  <template v-if="scope.row.brandName">{{scope.row.brandName}}</template>
                  <dict-tag v-else :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.feeType" />
                </span>
                <span style="margin-left: 10px;">{{$t('箱数')}}：{{!scope.row.warehouseInInfoVO?0:scope.row.warehouseInInfoVO.cartonsNum}}</span>
                <span style="margin-left: 10px;">{{$t('体积')}}：{{!scope.row.warehouseInInfoVO?0:scope.row.warehouseInInfoVO.volume}}m³</span>
                <span style="margin-left: 10px;">{{$t('重量')}}：{{!scope.row.warehouseInInfoVO?0:scope.row.warehouseInInfoVO.weight}}kg</span>
                <span style="margin-left: 10px;">{{$t('数量(个)')}}：{{!scope.row.warehouseInInfoVO?0:scope.row.warehouseInInfoVO.quantityAll}}</span>
              </el-row>
              <el-row v-if="!scope.row.warehouseInInfoVO">
                <span>{{$t('暂时没有入仓信息')}}</span>
              </el-row>
            </template>
        </el-table-column>
        <el-table-column :label="$t('最后操作时间')" align="center">
        <template slot-scope="scope">
                <span>{{parseTime(scope.row.updateTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('状态')" align="center">
           <template slot-scope="scope">
             <!-- {{orderData.abnormalState!=0?$t('异常'):$t('正常')}} -->
               <dict-tag :type="DICT_TYPE.ORDER_ITEM_STATUS" :value="scope.row.itemStatus" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="card">
      <!-- 列表 -->
      <div slot="header" class="card-title flex">
        <div style="flex: 1; display: flex; align-items: center">{{$t('拆单信息')}}</div>
        <div>
          <span v-if="orderData.abnormalState!=0" class="red">{{$t('异常无法拆单')}}</span>
          <el-button v-else type="primary" @click="addSplit" :disabled="orderData.inWarehouseState==207">{{$t('新建拆单')}} </el-button>
        </div>
      </div>
      <template  v-if="splitData.length>0">
        <div v-for="(item, index) in splitData" :key="index">
          <div class="btn-header">
            <div>
              <p class="card-info">
                <span class="card-title">
                {{item.orderNo}}
                </span>
                <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="item.transportId" />
                <span>{{$t('发往')}}：{{importCityName(item.dstWarehouseId)}}</span>
              </p>
            </div>
            <div>
              <el-button type="primary" @click="addShop(index)">{{$t('放入')}}</el-button>
              <el-button :disabled="index < splitData.length - 1" type="primary" plain @click="deleteSplit(item.id)">{{$t('删除')}}</el-button>
            </div>
          </div>
          <el-table v-if="item.orderSplitItemBackVOList"  border :data="item.orderSplitItemBackVOList">
            <el-table-column :label="$t('序号')" align="center" prop="id" type="index">
              <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('中文名')" align="center" prop="prodTitleZh" />
            <el-table-column :label="$t('英文名')" align="center" prop="prodTitleEn" />
            <el-table-column :label="$t('品牌')" align="center">
              <template slot-scope="scope">
                <template v-if="scope.row.brandName">{{scope.row.brandName}}</template>
                <dict-tag v-else :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.feeType" />
              </template>
            </el-table-column>

            <el-table-column :label="$t('入仓体积')" align="center" >
              <template slot-scope="scope">
                {{scope.row.volume}}m³
              </template>
            </el-table-column>
            <el-table-column :label="$t('收费体积')" align="center" >
              <template slot-scope="scope">
                <el-input v-model="scope.row.chargeVolume" @change="updateField(scope.row, 'chargeVolume')" size="mini" disabled>
                  <span slot="append">m³</span>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column :label="$t('入仓重量')" align="center">
              <template slot-scope="scope">
                {{scope.row.weight}}kg
              </template>
              </el-table-column>
            <el-table-column :label="$t('收费重量')" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.chargeWeight" @change="updateField(scope.row, 'chargeWeight')" size="mini" disabled>
                  <span slot="append">kg</span>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column :label="$t('货值')" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.worth" @change="updateField(scope.row, 'worth')" size="mini" disabled>
                  <span slot="append">{{ $t('元') }}</span>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column :label="$t('箱数')" align="center" prop="num">
              <template slot-scope="scope">
                <el-button type="text" @click="currentWarehouseRecord=scope.row.specsRecordVOList">
                  {{ scope.row.num }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column :label="$t('数量(个)')" align="center" prop="quantity"></el-table-column>
            <el-table-column :label="$t('操作')" align="center">
              <template slot-scope="scope">
               <el-button size="mini" type="text" icon="el-icon-delete" @click="removeShop(scope.row.id)">{{$t('移出')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <el-empty v-else></el-empty>
    </el-card>
    <work-flow xmlkey="split_order" v-model="selectedUsers"></work-flow>
    <div slot="footer" class="card footer_btn" v-if="orderData.abnormalState==0">
        <template v-if="orderData.inWarehouseState!=207">
          <el-button type="primary" @click="submitForm">{{$t('提交申请')}}</el-button>
          <el-button plain type="primary" @click="cancel">{{$t('取消')}}</el-button>
          <el-button type="primary" @click="reset">{{$t('重置')}}</el-button>
        </template>
        <template v-else>
          <el-button type="primary" @click="$router.push(`/bpm/process-instance/detail?id=`+orderApprovalBackVO.applyingFormId)">{{$t('审核中')}}</el-button>
          <el-button plain type="primary" @click="dialogVisible = true">{{$t('取消审核')}}</el-button>
          <el-button plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('返回')}}</el-button>
        </template>
    </div>
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="$t('新建拆单')" :visible.sync="open" width="400px" append-to-body>
      <el-form ref="formSplit" :model="form" :rules="rules" label-width="80px">
          <el-form-item :label="$t('运输方式')">
             <dict-selector :clearable="true" :type="DICT_TYPE.ECW_TRANSPORT_TYPE" @change="changeTransport" v-model="form.transportId" />
          </el-form-item>
          <el-form-item :label="$t('出货渠道')" v-if="getDictData(DICT_TYPE.ECW_TRANSPORT_TYPE, form.transportId).cssClass == 'channel'">
            <el-select v-model="form.channelId" :placeholder="$t('请选择出货渠道')" :clearable="true">
                 <el-option :disabled="getDictData(DICT_TYPE.ECW_TRANSPORT_TYPE, form.transportId).cssClass != 'channel'" v-for="item in channelData" :key="item.channelId" :label="$l(item, 'name')" :value="item.channelId"/>
             </el-select>
          </el-form-item>

          <el-form-item :label="$t('目的仓库')" >
              <el-select v-model="form.destWarehouseId" @change="changeDeatWarehouseId" :placeholder="$t('请选择目的仓库')" :clearable="true">
               <el-option v-for="items in importCityList" :label="$l(items, 'title')" :value="items.id" :key="items.id" ></el-option>
              </el-select>
          </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="haddleAdd">{{$t('确定')}}</el-button>
        <el-button @click="cancel">{{$t('取消')}}</el-button>
      </div>
    </el-dialog>
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="$t('放入品名')" :visible.sync="shopOpen" width="1500px" append-to-body>
     <el-form ref="shopForm" :model="shopForm" :rules="shopRules" label-width="120px" inline>
      <el-form-item :label="$t('中文品名')">
         <el-select v-model="shopForm.orderItemId" :placeholder="$t('请选择中文品名')">
          <el-option v-for="item in orderData.orderItemVOList" :label="item.prodTitleZh" :value="item.orderItemId" :key="item.prodTitleZh" ></el-option>
         </el-select>
      </el-form-item>
      <el-form-item :label="$t('英文品名')">
         <el-select v-model="shopForm.orderItemId" :placeholder="$t('请选择英文品名')">
          <el-option v-for="item in orderData.orderItemVOList" :label="item.prodTitleEn" :value="item.orderItemId" :key="item.prodTitleEn" ></el-option>
         </el-select>
      </el-form-item>
       <el-card>
         <div slot="header" class="page-title">{{$t('品名可拆数据')}}</div>
         <div class="pl-20">
           <span class="mr-10">{{$t('箱数')}}：{{ leftData.num || 0 }}</span>
           <span class="mr-10">{{ $t('入仓方数') }}：{{ leftData.volume || 0 }}m³</span>
           <span class="mr-10">{{ $t('收费方数') }}：{{ leftData.chargeVolume || 0 }}m³</span>
           <span class="mr-10">{{ $t('入仓重量') }}：{{ leftData.weight || 0 }}kg</span>
           <span class="mr-10">{{ $t('收费重量') }}：{{ leftData.chargeWeight || 0 }}kg</span>
           <span class="mr-10">{{ $t('数量(个)') }}：{{ leftData.quantity || 0 }}</span>
           <span class="mr-10">{{ $t('剩余货值') }}：{{ leftData.worth || 0 }}{{ $t('元') }}</span>
         </div>
       </el-card>


       <el-card class="mt-10">
         <div slot="header" class="page-title">{{$t('可拆入仓记录')}}</div>
        <el-table
         :data="getOrderItemWarehouseIn(shopForm.orderItemId)"
         style="width: 100%">
         <el-table-column :label="$t('箱数')">
           <template v-slot="{row,$index}">
             <!--{{row.cartonsNum}}-->
             {{getWarehouseLeftData(row, 'num')}}
             <dict-tag :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" v-model="row.specificationType"></dict-tag>
           </template>
         </el-table-column>
         <el-table-column :label="$t('包装类型')">
           <template v-slot="{row,$index}">
               <dict-tag :type="DICT_TYPE.ECW_PACKAGING_TYPE" v-model="row.unit"></dict-tag>
           </template>
         </el-table-column>
         <el-table-column label="长(cm)">
           <template v-slot="{row,$index}">
             {{row.boxGauge1}}
           </template>
         </el-table-column>
         <el-table-column label="宽(cm)">
           <template v-slot="{row,$index}">
             {{ row.boxGauge2 }}
           </template>
         </el-table-column>
         <el-table-column label="高(cm)">
           <template v-slot="{row,$index}">
             {{ row.boxGauge3 }}
           </template>
         </el-table-column>
         <el-table-column label="入仓体积(m³)">
           <template v-slot="{row,$index}">
             {{getWarehouseLeftData(row, 'volume')}}
           </template>
         </el-table-column>
         <el-table-column label="入仓重量(Kg)" prop="weight">
           <template v-slot="{row,$index}">
             {{getWarehouseLeftData(row, 'weight')}}
           </template>
         </el-table-column>
         <el-table-column :label="$t('数量')" prop="quantity">
           <template v-slot="{row,$index}">
             {{getWarehouseLeftData(row, 'quantity')}}
           </template>
         </el-table-column>
         <el-table-column :label="$t('快递单号')" prop="expressNo"></el-table-column>
         <el-table-column :label="$t('储位')" prop="orderLocationBackVOList">
           <template v-slot="{ row, column, $index }">
             {{getLocationName(row.orderLocationBackVOList)}}
           </template>
         </el-table-column>
         <el-table-column :label="$t('操作')">
           <template v-slot="{ row, column, $index}">
             <el-tag v-if="getWarehouseInSplitData(row.id,'num') >= row.cartonsNum" disabled size="mini" type="primary" >{{$t('已拆完')}}</el-tag>
             <el-button v-else size="mini" type="primary" @click="putInRecord(row)">放入</el-button>
           </template>
         </el-table-column>
        </el-table>
       </el-card>
       <el-card class="mt-10">
         <div slot="header" class="flex-between mt-20 mb-10">
           <div class="page-title" style="margin: 0">
             {{$t('已放入入仓记录')}}
           </div>
           <el-button type="danger" size="mini" @click="clearAll">清空放入数据</el-button>
         </div>
         <el-table
           :data="shopForm.specsRecordVOList"
           style="width: 100%">
           <el-table-column :label="$t('箱数')" width="200px">
             <template v-slot="{row,$index}">
               {{row.num}}
               <dict-tag :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" v-model="row.specificationType"></dict-tag>
             </template>
           </el-table-column>
           <el-table-column :label="$t('包装类型')" width="100px">
             <template v-slot="{row,$index}">
               <dict-tag :type="DICT_TYPE.ECW_PACKAGING_TYPE" v-model="row.unit"></dict-tag>
             </template>
           </el-table-column>
           <el-table-column label="长(cm)">
             <template v-slot="{row,$index}">
               {{row.boxGauge1}}
             </template>
           </el-table-column>
           <el-table-column label="宽(cm)">
             <template v-slot="{row,$index}">
               {{ row.boxGauge2 }}
             </template>
           </el-table-column>
           <el-table-column label="高(cm)">
             <template v-slot="{row,$index}">
               {{ row.boxGauge3 }}
             </template>
           </el-table-column>
           <el-table-column label="入仓体积(m³)">
             <template v-slot="{row,$index}">
               {{row.volume}}
             </template>
           </el-table-column>
           <!--<el-table-column label="收费体积(m³)" prop="chargeVolume"></el-table-column>-->
           <el-table-column label="入仓重量(Kg)" prop="weight"></el-table-column>
           <!--<el-table-column label="收费重量(Kg)" prop="chargeWeight"></el-table-column>-->
           <el-table-column :label="$t('数量')" width="130px" prop="quantity"></el-table-column>
           <el-table-column :label="$t('快递单号')" prop="expressNo"></el-table-column>
           <el-table-column :label="$t('储位')" prop="orderLocationBackVOList">
             <template v-slot="{ row, column, $index }">
               {{getLocationName(row.orderLocationList)}}
             </template>
           </el-table-column>
           <el-table-column :label="$t('操作')">
             <template v-slot="{ row, column, $index}">
               <el-button size="mini" type="primary" @click="deleteRow($index)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-card>
       <el-card class="mt-10">
         <div slot="header" class="page-title">放入数据</div>
         <div>
           <div class="pl-20 mb-10">
             <span class="mr-10">{{$t('箱数')}}：{{ putin.num || 0 }}，</span>
             <span class="mr-10">{{ $t('数量(个)') }}：{{ putin.quantity || 0 }}，</span>
             <span class="mr-10">{{ $t('入仓方数') }}：{{ putin.volume || 0 }}m³， </span>
             <span class="mr-10">{{ $t('入仓重量') }}：{{ putin.weight || 0 }}kg</span>
           </div>
           <el-form-item :label="$t('收费方数')" prop="chargeVolume">
             <el-input-number v-model="shopForm.chargeVolume" controls-position="right"></el-input-number>m³
           </el-form-item>
           <el-form-item :label="$t('收费重量')" prop="chargeWeight">
             <el-input-number v-model="shopForm.chargeWeight" controls-position="right"></el-input-number>kg
           </el-form-item>

           <el-form-item :label="$t('放入货值')">
             <el-input-number v-model="shopForm.worth" controls-position="right"  :min="0" :max="mainOrderItem.worth">
               <template slot="append">{{ $t('元') }}</template>
             </el-input-number>
           </el-form-item>
           <el-form-item :label="$t('备注信息')">
             <el-input v-model="shopForm.remark"></el-input>
           </el-form-item>
         </div>
       </el-card>

     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="shopAdd" :disabled="!shopForm.specsRecordVOList || !shopForm.specsRecordVOList.length">{{$t('确定')}}</el-button>
       <el-button @click="shopCancel">{{$t('取消')}}</el-button>
     </div>
    </el-dialog>
    <el-dialog
     :title="$t('提示')"
     :visible.sync="dialogVisible"
     width="30%">
     <span class="cancel_notice">{{$t('拆单申请正在审核中，你确定取消拆单申请吗？')}}</span>
     <div class="cancel_content">
       <span>{{$t('取消原因：')}}</span>
       <el-input v-model="reason" :placeholder="$t('请输入取消原因')"></el-input>
     </div>

     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">{{$t('取消')}}</el-button>
       <el-button type="primary" @click="cancelSplit">{{$t('确定')}}</el-button>
     </span>
    </el-dialog>

    <el-dialog
      :title="$t('提示')"
      :visible.sync="dialogVisible"
      width="30%">
      <span class="cancel_notice">{{$t('拆单申请正在审核中，你确定取消拆单申请吗？')}}</span>
      <div class="cancel_content">
        <span>{{$t('取消原因：')}}</span>
        <el-input v-model="reason" :placeholder="$t('请输入取消原因')"></el-input>
      </div>

      <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">{{$t('取消')}}</el-button>
       <el-button type="primary" @click="cancelSplit">{{$t('确定')}}</el-button>
     </span>
    </el-dialog>

    <warehouse-record
      v-if="currentWarehouseRecord"
      :list="currentWarehouseRecord"
      :warehouseId="currentWarehouseId"
      @close="currentWarehouseRecord=null"></warehouse-record>
    <put-in
      v-if="currentPutIn"
      :warehouse-record="currentPutIn"
      @close="currentPutIn=null"
      @submit="handlePutin"
      :warehouse-id="currentWarehouseId"
      :max-num="orderData.sumNum"
    ></put-in>
  </div>
</template>

<script>
import {getDictData, getDictDatas,DICT_TYPE} from '@/utils/dict'
import {
  getSplitList,
  splitApply,
  createSplit,
  cancelApply,
  createSplitItem,
  deleteSplitItem,
  deleteSplit,
  deleteAllSplit
} from "@/api/ecw/orderHandle"
import {getWarehouseList, quantityRequired} from '@/api/ecw/warehouse'
import {getChannelList} from '@/api/ecw/channel'
import WorkFlow from '@/components/WorkFlow'
import {getOrder, getOrderWarehouseIn, splitItemUpdate} from '@/api/ecw/order'
import Decimal from 'decimal.js'
import WarehouseAreaSelect from "@/components/WarehouseAreaSelect";
import WarehouseDetail from "@/views/ecw/order/components/WarehouseDetail";
import WarehouseRecord from "@/views/ecw/order/splitApply/components/WarehouseRecord";
import PutIn from "@/views/ecw/order/splitApply/components/PutIn.vue";
import Template from "@/views/cms/template/index.vue";

export default {
  name: "SplitApply",
  components: {
    Template,
    WarehouseRecord,
    WarehouseDetail,
    WarehouseAreaSelect,
    WorkFlow,
    PutIn
  },
  data() {
    return {
      checked:false,
      reason:'',
      dialogVisible:false,
      orderData:{},
      splitData:[],
      orderApprovalBackVO:{},
      splitIndex:0,
      channelData:[],
      tradeCityList:[],
      multipleSelection:[],
      loading:false,
      open:false,
      form:{

      },
      importCityList:[],
      selectedUsers:[],
      shopOpen:false,
      quantityshow:false,
      shopForm:{
        specsRecordVOList: []
      },
      // 表单校验
      rules: {
        transportId: [{ required: true, message: this.$t("请选择运输方式"), trigger: "change" }],
        warehouseIds: [{ required: true, message: this.$t("请选择目的仓库"), trigger: "change" }],
        channelId: [{ required: true, message: this.$t("请选择出货渠道"), trigger: "change" }],
      },
      // 表单校验
      shopRules: {
        chargeVolume: [{ required: true, message: this.$t("请填写收费方数"), trigger: "blur" }],
        chargeWeight: [{ required: true, message: this.$t("请填写收费重量"), trigger: "blur" }],
      },
      queryParams:{
        orderId: null,
        lang:0
      },
      query:{
        page:1,
        rows:20
      },
      // splitItemIndex:0,
      quantitySum:0,
      // 当前查看的入仓记录
      currentWarehouseRecord: null,
      // 订单入仓记录
      warehouseInList: [],
      // 当前选择的入仓记录ID
      // selectedWarehouseInId: null,
      // 当前正在放入的入仓记录
      currentPutIn: null
    };
  },
  async created() {
    this.getChannel()
    getWarehouseList().then(res => {
      this.tradeCityList = res.data
      this.importCityList = this.tradeCityList.filter(item => item.type == 1)
    })
    if (this.$route.query.orderId) {
      this.queryParams.orderId = this.$route.query.orderId
    }
    Promise.all([this.getList(), this.getOrder()]).then(res => {
      console.log("拆单数据", this.splitData, this.splitData.length)
      if(this.orderData.inWarehouseState != 207 &&  this.splitData.length){
        this.reset()
      }
    })
    // 获取入仓记录
    getOrderWarehouseIn(this.queryParams.orderId).then(res => {
      this.warehouseInList = res.data
    })
  },
  watch: {
    //监听table这个对象
    tableData: {
      // 立即监听
      immediate: true,
      handler() {
        this.$nextTick(() => {
          const tds = document.querySelectorAll(
            "#table .el-table__footer-wrapper tr>td"
          );
          // colSpan合并列
          tds[1].colSpan = 5;
          tds[1].style.textAlign = "left";
          tds[2].style.display = "none";
          tds[3].style.display = "none";
          tds[4].style.display = "none";
          tds[5].style.display = "none";
        });
      },
    },
    // 关闭放入弹层的时候清理弹层表单内容
    shopOpen(show){
        if(!show){
          this.shopForm = {}
        }
    },
    // 切换品名需要重置已放入的记录
    'shopForm.orderItemId'(){
      // 默认取以前放入的品名
      let split = this.splitData.find(item => item.id == this.splitData[this.splitIndex].id)
      this.shopForm.specsRecordVOList = []
      if(split) {
        let specsRecordVOList = split.orderSplitItemBackVOList.find(item => item.orderItemId == this.shopForm.orderItemId)?.specsRecordVOList || []
        specsRecordVOList.forEach(item => {
          const [boxGauge1, boxGauge2, boxGauge3] = item.boxGauge.split('*')
          this.shopForm.specsRecordVOList.push({...item, boxGauge1, boxGauge2, boxGauge3})
        })
      }
    }
  },
  computed:{
    getDictData(){
        return (type, value) => getDictData(type, value) || {}
    },
    getDictDatas(){
        return getDictDatas
    },
    // 放入品名试选择的商品项
    orderItem(){
      if(!this.orderData || !this.shopForm.orderItemId) return {}
      return this.orderData.orderItemVOList.find(item => item.orderItemId == this.shopForm.orderItemId) || {}
    },
    // 主单数据，也就是拆分剩余的数据，可用来限制拆单放入的最大值
    mainOrderItem(){
      if(!this.shopForm.orderItemId) return {}
      return this.orderData.orderItemVOList.find(item => item.orderItemId === this.shopForm.orderItemId)
    },
    // 剩余可拆数据，父订单的入仓数据 - 全部拆单的品名数据
    leftData(){
      if(!this.shopForm.orderItemId) return {}

      let data = {
        num: new Decimal(this.orderItem.warehouseInInfoVO?.cartonsNum || 0),
        volume: new Decimal(this.orderItem.warehouseInInfoVO?.volume || 0),
        weight: new Decimal(this.orderItem.warehouseInInfoVO?.weight || 0),
        quantity: new Decimal(this.orderItem.warehouseInInfoVO?.quantityAll || 0),
        chargeVolume: new Decimal(this.orderItem.chargeVolume || 0),
        chargeWeight: new Decimal(this.orderItem.chargeWeight || 0),
        worth: new Decimal(this.orderItem.worth || 0),
      }
      // 全部拆单的放入数据累减
      this.splitData.forEach(split => {
        split.orderSplitItemBackVOList.forEach(splitItem => {

          // 正在拆的要排除，不然会重复计算
          if(splitItem.orderItemId == this.shopForm.orderItemId && split.id == this.splitData[this.splitIndex].id){
            return
          }

          // 每个品名的入仓记录挨个累减其他数据
          if(splitItem.orderItemId == this.shopForm.orderItemId){
            // 每个品名都要累减收费数据
            data.chargeVolume = data.chargeVolume.minus(new Decimal(splitItem.chargeVolume || 0))
            data.chargeWeight = data.chargeWeight.minus(new Decimal(splitItem.chargeWeight || 0))
            data.worth = data.worth.minus(new Decimal(splitItem.worth || 0))

            data.num = data.num.minus(new Decimal(splitItem.num || 0))
            data.volume = data.volume.minus(new Decimal(splitItem.volume || 0))
            data.weight = data.weight.minus(new Decimal(splitItem.weight || 0))
            data.quantity = data.quantity.minus(new Decimal(splitItem.quantity || 0))
          }
        })
      })
      return data
    },
    // 放入数据
    putin(){
      let data = {
        num: new Decimal(0),
        volume: new Decimal(0),
        weight: new Decimal(0),
        quantity: new Decimal(0)
      }
      this.shopForm.specsRecordVOList && this.shopForm.specsRecordVOList.forEach(item => {
        data.num = data.num.plus(new Decimal(item.num || 0))
        data.volume = data.volume.plus(new Decimal(item.volume || 0))
        data.weight = data.weight.plus(new Decimal(item.weight || 0))
        data.quantity = data.quantity.plus(new Decimal(item.quantity || 0))
      })
      return {
        num: data.num.toNumber(),
        volume: data.volume.toNumber(),
        weight: data.weight.toNumber(),
        quantity: data.quantity.toNumber()
      }
    },
    // 当前仓库ID，选择储位的时候需要用到
    currentWarehouseId(){
      return this.orderData.adjustToDestWarehouseId || this.orderData.logisticsInfoDto.startWarehouseId
    },
    // 当前选择的入仓记录
    /*currentWarehouseItem(){
      return this.getOrderItemWarehouseIn(this.shopForm.orderItemId).find(item => item.id === this.selectedWarehouseInId)
    },*/
    // 根据orderItemId获取入仓记录
    getOrderItemWarehouseIn() {
      return orderItemId => {
        const list = this.warehouseInList.find(item => item.orderItemId == orderItemId)?.orderWarehouseInBackItemDoList || []
        return list.map(item => {
          let [boxGauge1, boxGauge2, boxGauge3] = item.boxGauge.split('*')
          let labelArr = [
            this.$t('{num}箱', {num: item.cartonsNum}),
            this.$l(this.getDictDatas(this.DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE).find(dict => dict.value == item.specificationType), 'label'),
            this.$t('长{boxGauge1}cm', {boxGauge1}),
            this.$t('宽{boxGauge2}cm', {boxGauge2}),
            this.$t('高{boxGauge3}cm', {boxGauge3}),
            this.$t('方数{volume}m³', {volume: item.volume}),
            this.$t('重量{weight}kg', {weight: item.weight})
          ]
          if (item.quantityAll) {
            labelArr.push(this.$t('数量{n}', {n: item.quantityAll}))
          }
          if (item.expressNo) {
            labelArr.push(this.$t('快递{expressNo}', {expressNo: item.expressNo}))
          }
          if (item.orderLocationBackVOList && item.orderLocationBackVOList.length) {
            labelArr.push(this.$t('储位{location}', {
              location: item.orderLocationBackVOList.map(v => v.code || v.areaName + (v.locationName || '')).join(',')
            }))
          }
          item.boxGauge1 = boxGauge1
          item.boxGauge2 = boxGauge2
          item.boxGauge3 = boxGauge3
          item.text = labelArr.join(',')
          return item
        })
      }
    },
    // 根据入仓记录ID筛选出他的全部拆出记录
    getWarehouseInspecsRecordVOList(){
      return warehouseInId => {
        let specsRecordVOList = []
        // 这里是全部已放入的
        this.splitData.forEach((split, splitIndex) => {
          split.orderSplitItemBackVOList.forEach(splitItem => {
            // 当前正在拆的品名不包含，因为后面shopForm.specsRecordVOList会包含
            if(splitIndex == this.splitIndex && splitItem.orderItemId == this.shopForm.orderItemId){
              return
            }
            splitItem.specsRecordVOList && splitItem.specsRecordVOList.forEach(specs => {
              if(specs.warehouseInId === warehouseInId){
                specsRecordVOList.push(specs)
              }
            })
          })
        })
        // 这里是全部正在操作放入，但是还没确定提交的
        this.shopForm.specsRecordVOList.forEach(item => {
          if(item.warehouseInId == warehouseInId)specsRecordVOList.push(item)
        })
        return specsRecordVOList
      }
    },
    // 根据入仓ID获取拆出数据
    getWarehouseInSplitData(){
      return (warehouseInId, field) => {
        let total = new Decimal(0)
        this.getWarehouseInspecsRecordVOList(warehouseInId).forEach(item => {
          total = total.plus(new Decimal(item[field] || 0))
        })
        return total.toNumber()
      }
    },
    // 获取入仓记录的剩余数据
    getWarehouseLeftData(){
      return (warehouseRecord, field) => {
        let warehouseField = field
        if(field == 'num') warehouseField = 'cartonsNum'
        if(field == 'quantity') warehouseField = 'quantityAll'
        let total = new Decimal(warehouseRecord[ warehouseField ] || 0)
        this.getWarehouseInspecsRecordVOList(warehouseRecord.id).forEach(item => {
          total = total.minus(new Decimal(item[field] || 0))
        })
        return total.toNumber()
      }
    }
  },
  methods: {
    /*检查并提交字段(体积，重量)修改*/
    updateField(row, field){
      let val = parseFloat(row[field])
      if(!val || val < 0){
        this.$message.error(this.$t('数据无效'))
        return this.getList()
      }
      splitItemUpdate(row).then(() => {
        this.$message.success(this.$t('修改成功'))
      }).finally(() => {
        this.getList()
      })
    },
    checkCode(data){
      if(data.indexOf('+')==-1){
      	return '+'+data
      }
      return data
    },
    changeTransport(e){
      this.$set(this.form,'transportId',e)
      console.log(this.form.transportId)
      this.$forceUpdate()
    },
    changeDeatWarehouseId(e){
      this.$forceUpdate()
      this.$set(this.form,'destWarehouseId',e)
      console.log(this.form.destWarehouseId)
    },
    getOrder(){
      this.loading = true;
      return getOrder(this.queryParams.orderId).then(response => {
        this.orderData = response.data
        this.query.destWarehouseId = response.data.logisticsInfoDto.startWarehouseId
        this.loading = false

      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      return getSplitList(this.queryParams).then(response => {

        this.splitData = response.data.orderSplitBackVOList
        this.orderApprovalBackVO = response.data
        this.loading = false;
      });
    },
    getChannel(){
      getChannelList().then(res=>this.channelData = res.data)
    },
    changeDest(){
      this.query.warehouseIds = this.form.destWarehouseId
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex==this.orderData.orderItemVOList.length) {
        if (columnIndex === 1) {
          return [2, 3];
        } else if (columnIndex > 1) {
          return [0, 0];
        }
      }
    },
    getSummaries(){
      const sums = [];

      sums[0] = this.$t('小计')
      if(!this.orderData || !this.orderData.orderItemVOList ||this.orderData.length==0){
        return sums
      }
      var orderSum = 0
      var orderV = 0
      var orderW = 0
      var leviteSum = 0
      var leviteV = 0
      var leviteW = 0
      this.orderData.orderItemVOList.forEach((column, index) => {
          orderSum += column.num
          orderV += column.volume
          orderW += column.weight
          leviteSum += column.warehouseInInfoVO?column.warehouseInInfoVO.cartonsNum:0
          leviteV += column.warehouseInInfoVO?column.warehouseInInfoVO.volume:0
          leviteW += column.warehouseInInfoVO?column.warehouseInInfoVO.weight:0
      });
      sums[1] = this.$t('下单统计')+' '+ orderSum+' '+this.$t('箱')+' '+ orderV.toFixed(2) +' m³ ' + orderW + ' kg ' + ' '+this.$t('入仓统计：')+ leviteSum+' '+this.$t('箱')+' '+ leviteV.toFixed(2) +' m³ ' + leviteW + ' kg'

      return sums;
    },

    importCityName(id){
        var arr = this.tradeCityList.filter(item => item.id == id)
        return arr.length>0?arr[0].titleZh:this.$t('无')
    },
    submitForm(){
      if(this.splitData.length==0){
         this.$modal.msgError(this.$t("请先新建拆单"))
         return
      }

      var params = {
        orderId:this.queryParams.orderId,
        copyUserId:this.selectedUsers
      }
      splitApply(params).then(res=>{
        this.$modal.msgSuccess(this.$t("申请成功"));
        this.$store.dispatch('tagsView/delCurrentView')
      })
    },
    addShop(index){
      this.splitIndex = index
      this.shopOpen = true
      // 重置表单数据
      this.shopForm = {specsRecordVOList:[]}
    },
    addSplit(){
      this.form.transportId = this.orderData.transportId
      this.form.destWarehouseId = this.orderData.destWarehouseId
      if(this.orderData.logisticsInfoDto&&this.orderData.logisticsInfoDto.destTitleZh){
        this.form.destWarehouseId = this.importCityList.find(item=>item.titleZh==this.orderData.logisticsInfoDto.destTitleZh).id
        if(this.orderData.logisticsInfoDto&&this.orderData.logisticsInfoDto.channelId){
          this.form.channelId = this.orderData.logisticsInfoDto.channelId
          }
      }
      this.open = true
    },
    // 查询数量是否必填
    numcheck(){
      quantityRequired(this.orderData.lineId).then(res=>{
        this.quantityshow = res.data
      })
    },
    // 输入方数箱数后，按照平均值计算数量和体积重量数据
    numChange(){
      /*var sum =  parseInt(this.quantitySum/this.shopForm.num)
      this.$set(this.shopForm,'quantity',sum)*/
      let rate = this.shopForm.num/this.mainOrderItem.num
      this.$set(this.shopForm, 'quantity',      Math.ceil(this.mainOrderItem.quantity * rate))
      this.$set(this.shopForm, 'volume',        (this.mainOrderItem.volume * rate).toFixed(2))
      this.$set(this.shopForm, 'chargeVolume',  (this.mainOrderItem.chargeVolume * rate).toFixed(2))
      this.$set(this.shopForm, 'weight',        (this.mainOrderItem.weight * rate).toFixed(2))
      this.$set(this.shopForm, 'chargeWeight',  (this.mainOrderItem.chargeWeight * rate).toFixed(2))
      this.$set(this.shopForm, 'worth',  (this.mainOrderItem.worth * rate).toFixed(2))
    },
    /*changeProdTitleEn(){
        var list = []
        list = this.splitData[0].orderSplitItemBackVOList.filter(item=>item.prodTitleEn == this.shopForm.prodTitleEn)
        this.shopForm.sum = list[0].num
        this.quantitySum = list[0].quantity
        this.shopForm.prodTitleZh = list[0].prodTitleZh
    },*/
    haddleAdd(){
      let that = this
      if(!that.form.transportId){
        that.$message.error(this.$t("请选择运输方式"));
        return
      }
      if(!that.form.destWarehouseId){
        that.$message.error(this.$t("请选择目的仓库"));
        return
      }
      // if(!this.form.channelId){
      //   this.$modal.msgError("请选择出货渠道");
      // }
      var params = {
          dstWarehouseId: that.form.destWarehouseId,
          parentOrderId: that.orderData.orderId,
          parentOrderNo: that.orderData.orderNo,
          transportId: that.form.transportId,
          channelId:that.form.channelId
      }
      createSplit(params).then(res=>{
        that.getList()
      })
      that.open = false
    },
    /*cancel(){
      this.open = false
      this.form = {}
    },*/
    shopAdd(){
      this.$refs["shopForm"].validate(valid => {
        if (!valid) {
          return;
        }
        if(!this.shopForm.specsRecordVOList.length){
          return this.$message.error(this.$t("请放入品名"));
        }
        // 放入数据不能大于可拆数据
        if(this.putin.num > this.leftData.num){
          return this.$message.error(this.$t("放入箱数不能大于可拆箱数"));
        }
        this.shopForm.specsRecordVOList.forEach(item => {
          item.boxGauge = `${item.boxGauge1}*${item.boxGauge2}*${item.boxGauge3}`
        })
        var params = {
          num:this.putin.num,
          orderItemId:this.shopForm.orderItemId,
          orderSplitId:this.splitData[this.splitIndex].id,
          remark:this.shopForm.remark,
          volume: this.putin.volume,
          chargeVolume: this.shopForm.chargeVolume,
          weight: this.putin.weight,
          quantity: this.putin.quantity,
          chargeWeight: this.shopForm.chargeWeight,
          worth: this.shopForm.worth || 0,
          specsRecordVOList:this.shopForm.specsRecordVOList
        }

        // 体积重量不能为0
        const fields = {
          'volume': this.$t('体积'),
          'weight': this.$t('重量'),
          'chargeVolume': this.$t('收费体积'),
          'chargeWeight': this.$t('收费重量'),
        }
        let errFields = []
        Object.keys(fields).forEach(field => {
          if(params[field] < 0.01){
            errFields.push(fields[field])
          }
        })
        if(errFields.length){
          return this.$message.error(this.$t("{field}最少为0.01", {field: errFields.join(",")}))
        }
        /*if(this.quantityshow){
          params.quantity = this.shopForm.quantity
        }*/

        createSplitItem(params).then(async res=>{
          this.$message.success(this.$t("放入成功"));
          await this.getList()
          this.shopForm = {}
          this.shopOpen = false
        })
      })
    },
    removeShop(id){
      let that = this
      that.$confirm(that.$t('是否移除货物吗?')).then(function () {
        deleteSplitItem(id).then(res=>{
          that.$message.success(that.$t("移除成功"));
           that.getList()
        })
      })
    },
    cancelSplit(){
      let that = this
      if(!that.reason){
        that.$message.error(that.$t("请输入取消原因"));
        return
      }
        cancelApply({orderId:that.queryParams.orderId,reason:that.reason}).then(res=>{
          that.$message.success(that.$t("取消成功"));
          that.$store.dispatch('tagsView/delCurrentView')
        })
    },
    shopCancel(){
      this.shopOpen = false
      this.shopForm = {}
    },
    /** 删除按钮操作 */
    deleteSplit(id) {
      let that = this
      that.$confirm(that.$t('是否确认删除新拆的订单吗?')).then(function () {
        deleteSplit(id).then(res=>{
          that.$message.success(that.$t("删除成功"));
           that.getList()
        })
      })
    },
    // 删除一行，可选参数index表上行号，参数不是数字则删除最后一行
    deleteRow(index){
      const spliceIndex = typeof index !== 'number' ? this.shopForm.specsRecordVOList.length - 1 : index
      this.shopForm.specsRecordVOList.splice(spliceIndex, 1)
      this.calcDefaultData()
    },
    // 计算体积
    calcVolume(row){
      let volume = Decimal(row.boxGauge1 || 0)
          .times(Decimal(row.boxGauge2 || 0))
          .times(Decimal(row.boxGauge3 || 0)).div(1000000)
      // 如果是箱的单位要乘以箱数
      if(row.specificationType === 1) {
        row.volume = volume.times(Decimal(row.num || 0))
      }

      // 最低0.01
      volume = Math.max(0.01, volume.toNumber().toFixed(2))
      this.$set(row, 'volume', volume)
      this.$set(row, 'chargeVolume', volume)
    },
    // 显示入库记录
    showWarehouse(row){
      if(!row.specsRecordVOList){
        return this.$message.info(this.$t('暂无入仓记录'))
      }
      this.currentWarehouseRecord = row.specsRecordVOList
    },
    // 获取储位名称
    getLocationName(locationArr){
      if(!locationArr || !locationArr.length) return ''
      let arr = []
      locationArr.forEach(item => {
        arr.push(`${item.areaName || ''}${item.locationName || ''}`)
      })
      return Array.from(new Set(arr)).join(",")
    },
    // 根据入仓记录打开放入弹层
    putInRecord(row){
      this.currentPutIn = row
      // 此条入仓记录已拆出的入仓记录，这样在放入的时候可以确保不超过此入仓记录的数量
      let specsRecordVOList = this.getWarehouseInspecsRecordVOList(row.id)
      this.currentPutIn.specsRecordVOList = specsRecordVOList
    },
    // 放入回调
    handlePutin(list){
      if(!list.length){
        return this.$message.error(this.$t("请至少放入一条数据"))
      }
      list.forEach(item => {
        this.shopForm.specsRecordVOList.push({...item})
      })
      this.currentPutIn = null
      this.calcDefaultData()
    },
    // 清空放入记录
    clearAll(){
      this.$confirm(this.$t("确定要清空放入数据么?")).then(res => {
        this.shopForm.specsRecordVOList = []
        this.calcDefaultData()
      })
    },
    // 计算放入的默认值
    calcDefaultData(){
      const orderItem = this.orderData.orderItemVOList.find(item => item.orderItemId == this.shopForm.orderItemId)
      const rate = this.putin.num / orderItem.warehouseInInfoVO.cartonsNum
      /*
      * 1 普货 2 重货 3 泡货
      * 普货 收费数据=入仓数据
      * 泡货 收费方数=入仓方数 收费重量 = 品名收费重量*比例
      * 重货 收费方数=品名收费方数*比例 收费重量 = 入仓重量
      * */
      const chargeVolume = orderItem.itemType === 2 ? (orderItem.chargeVolume*rate).toFixed(2) : this.putin.volume
      const chargeWeight = orderItem.itemType === 3 ? (orderItem.chargeWeight*rate).toFixed(2) : this.putin.weight
      this.$set(this.shopForm, 'chargeVolume', chargeVolume)
      this.$set(this.shopForm, 'chargeWeight', chargeWeight)
      this.$set(this.shopForm, 'worth', (orderItem.worth*rate).toFixed(2))
    },
    // 重置
    reset(){
      return deleteAllSplit(this.queryParams.orderId).then(res => {
        this.getList()
      })
    },
    // 取消
    async cancel(){
      await this.reset()
      this.$store.dispatch('tagsView/delCurrentView')
    }
  }
}
</script>
<style scoped>
.page-title{
  margin: 0;
}
  .card-title{
      font-size: 18px;
      font-weight: bold;
       margin-top: 10px;
  }
  .card-info{
    font-size: 16px;
  }
  .card{
    margin-top: 20px;
  }
  .btn-header{
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
  }
  .red{
    color:#ff3430;
    font-size: 15px;
  }
  .footer_btn{
    padding-bottom: 60px;
  }
  .cancel_notice{
    font-size: 16px;
    font-weight: 600;
  }
  .cancel_content{
    display: flex;
    align-items: center;
    padding-top: 20px;
  }
  .cancel_content span{
    width: 100px;
  }

  ::v-deep .el-form-item--mini.is-error{
    margin-bottom: 18px;
  }
</style>