@logwire/logwire-wms-pda-ui 1.1.17 → 1.1.18

package/src/components/page/outbound/bale/checkBale/action/index.vue

@@ -1,1330 +1,1330 @@
-;<!--
-  复核捆包执行页
-  @author: 张文
-  @date: 2022-06-30
--->
-<template>
-
-  <div>
-    <lw-nav-bar :title="$lwLanguage.get('','复核捆包')"/>
-
-    <div class="lw-global-page-box">
-
-      <!-- 门店信息 -->
-      <store-info-sku-list
-        :item="checkData.boxData"
-        :customer-code="checkData.containerData.customerCode"
-        :customer-name="checkData.containerData.customerName"
-        show-bale-info
-      >
-        <div
-          style="text-align: center"
-          class="lw-global-row-end lw-global-value-bold-red"
-        >
-          {{ $lwLanguage.get('','当前还未执行捆包，请扫描商品号执行捆包') }}
-        </div>
-      </store-info-sku-list>
-
-      <!-- 复核操作 -->
-      <template v-if="!fromAllCheck">
-
-        <div
-          style="border: solid 2px #D50000"
-          class="lw-global-model-box"
-        >
-
-          <lw-input
-            :title="$lwLanguage.get('','商品号')"
-            v-model="actionCheck.sku.value"
-            :get-focus.sync="actionCheck.sku.focus"
-            auto-clear-val
-            @confirm="actionCheckSkuConfirm"
-          />
-
-          <template v-if="Object.keys(actionCheck.skuInfo).length">
-
-            <lw-input
-              :title="$lwLanguage.get('','复核数量')"
-              v-model="actionCheck.qty.value"
-              :get-focus.sync="actionCheck.qty.focus"
-              type="digit"
-              @confirm="actionCheckQtyConfirm"
-            >
-
-              <template #button>
-                <lw-button
-                  mini
-                  round
-                  @click="actionCheckQtyConfirm"
-                >{{ $lwLanguage.get('','确认复核') }}</lw-button>
-              </template>
-
-            </lw-input>
-
-            <lw-sku-info-module
-              :sku-name="actionCheck.skuInfo.skuName"
-              :sku-code="actionCheck.skuInfo.skuCode"
-              :show-right="false"
-            />
-
-            <div class="lw-global-flex-between lw-global-row-end">
-
-              <lw-title-value-cell
-                :title="$lwLanguage.get('','最小销售数')"
-                :value="actionCheck.skuInfo.minSellQty"
-                val-bold
-                val-red
-                :is-row="false"
-              />
-
-              <div>
-              <span class="lw-global-title">
-                {{ $lwLanguage.get('','数量') }}
-              </span>
-                <span class="lw-global-value">
-                <span class="lw-global-value-bold-red">
-                  {{ actionCheck.skuInfo.packQty }}
-                </span>
-                 / {{ actionCheck.skuInfo.totalQty }}
-              </span>
-              </div>
-
-            </div>
-          </template>
-
-        </div>
-
-      </template>
-
-      <!-- 容器信息 -->
-      <container-info
-        style="margin-top: 10px"
-        :container="checkData.containerData.pickContainer"
-        :sku-count="checkData.containerData.skuTypeCount"
-        :over-count="checkData.containerData.packQty"
-        :wait-count="checkData.containerData.waitPackQty"
-        :abnormal-count="checkData.containerData.abnormalQty"
-        :sku-list="checkData.containerData.packSkuList"
-        :show-abn-btn="!fromAllCheck"
-        :show-all-check="!fromAllCheck && allowAllCheck"
-        :abn-confirm="abnConfirm"
-      />
-
-    </div>
-
-    <lw-bottom-bar-btn-hidden
-      v-if="checkData.boxData && Object.keys(checkData.boxData).length"
-      :btn-list="btnList"
-    />
-
-    <!-- 复核序列号 -->
-    <lw-popup
-      :title="$lwLanguage.get('','复核序列号')"
-      v-model="checkPopup.show"
-      @closed="checkPopupOff"
-    >
-
-      <lw-sku-info-module
-        :sku-name="actionCheck.skuInfo.skuName"
-        :sku-code="actionCheck.skuInfo.skuCode"
-        :qty="actionCheck.skuInfo.minSellQty"
-        :qty-text="$lwLanguage.get('','最小销售量')"
-      />
-
-      <div class="lw-global-row lw-global-flex-between">
-
-        <lw-title-value-cell
-          :title="$lwLanguage.get('','待复核量')"
-          :value="actionCheck.skuInfo.totalQty - actionCheck.skuInfo.packQty"
-          val-red
-          val-bold
-          :is-row="false"
-        />
-
-        <lw-title-value-cell
-          :title="$lwLanguage.get('','当前扫描数量')"
-          :value="checkPopup.nowScanNum"
-          val-red
-          val-bold
-          :is-row="false"
-        />
-
-      </div>
-
-      <lw-input
-        :title="$lwLanguage.get('','序列号')"
-        v-model="checkPopup.sn.value"
-        :get-focus.sync="checkPopup.sn.focus"
-        auto-clear-val
-        @confirm="checkPopupSnConfirm"
-      />
-
-      <div
-        class="lw-global-flex-between lw-global-row"
-        v-for="(i,k) in checkPopup.snList"
-        :key="k"
-      >
-        <div class="col-2">{{ i.sn }}</div>
-        <div class="col-1">{{ i.qty }}</div>
-        <div class="col-3">
-          <van-icon
-            color="#D50000"
-            name="clear"
-            size="20"
-            @click="checkPopupSnDel(k)"
-          />
-        </div>
-      </div>
-
-      <template #button>
-
-        <lw-button
-          type="last"
-          plain
-          @click="checkPopupRepeatScan"
-        >
-          {{ $lwLanguage.get('','重新扫描') }}
-        </lw-button>
-
-
-        <lw-button @click="checkPopupSubmit">
-          {{ $lwLanguage.get('','确认复核') }}
-        </lw-button>
-
-      </template>
-    </lw-popup>
-
-    <!-- 完成捆包弹框 -->
-    <lw-popup
-      :title="$lwLanguage.get('','完成捆包')"
-      v-model="overBalePopup.show"
-      @closed="overBaleOff"
-    >
-      <container-sku-qty
-        :box-no="checkData.boxData.boxNo"
-        :pack-qty="checkData.boxData.packQty"
-        :type-count="checkData.boxData.skuTypeCount"
-      />
-
-      <lw-title-value-cell
-        :title="$lwLanguage.get('','标准重量') + '(KG)'"
-        :value="overBalePopup.data.standardWeight"
-        val-bold
-      />
-
-      <lw-input
-        :title="$lwLanguage.get('','实际重量') + '(KG)'"
-        v-model="overBalePopup.real.value"
-        :get-focus.sync="overBalePopup.real.focus"
-        type="number"
-        @confirm="realConfirm"
-      />
-
-      <lw-input
-        :title="$lwLanguage.get('','捆包包材')"
-        v-model="overBalePopup.materials.value"
-        :get-focus.sync="overBalePopup.materials.focus"
-        :show-bottom-border="false"
-        @confirm="materialsConfirm"
-      />
-
-      <div
-        v-if="overBalePopup.materials.list.length"
-        class="materials-box"
-      >
-        <div
-          class="lw-global-flex-between lw-global-row-start"
-          style="padding: 5px 0"
-        >
-
-          <div class="lw-global-title col-1">
-            {{ $lwLanguage.get('','包材编码') }}
-          </div>
-
-          <div class="lw-global-title col-2">
-            {{ $lwLanguage.get('','包材规格') }}
-          </div>
-
-          <div class="col-3"></div>
-
-        </div>
-
-        <div style="max-height: 84px;overflow-y: scroll">
-          <div
-            class="lw-global-flex-between lw-global-row"
-            style="padding: 5px 0"
-            v-for="(i,k) in overBalePopup.materials.list"
-            :key="k"
-          >
-
-            <!-- 包材编码 -->
-            <div class="lw-global-value-bold col-1">{{ i.packMaterialCode }}</div>
-
-            <!-- 尺寸 -->
-            <div class="lw-global-value-bold col-2">
-              {{ i.length || '-' }} *
-              {{ i.width || '-' }} *
-              {{ i.height || '-' }}
-            </div>
-
-            <!-- 删除按钮 -->
-            <div class="col-3">
-              <van-icon
-                color="#D50000"
-                name="clear"
-                size="20"
-                @click="delMaterials(k)"
-              />
-            </div>
-
-          </div>
-        </div>
-
-
-      </div>
-
-      <template #button>
-        <lw-button
-          v-if="overBalePopup.materials.list.length"
-          @click="overBaleConfirm"
-        >
-          {{ $lwLanguage.get('','完成复核(封箱)') }}
-        </lw-button>
-        <lw-button
-          v-else
-          @click="overBaleConfirm"
-        >
-          {{ $lwLanguage.get('','无需包材(封箱)') }}
-        </lw-button>
-      </template>
-
-    </lw-popup>
-
-    <!-- 重新复核弹框 -->
-    <lw-popup
-      :title="$lwLanguage.get('','重新复核')"
-      v-model="repeatPopup.show"
-      @closed="repeatPopup.container.value=''"
-    >
-
-      <container-sku-qty
-        :box-no="checkData.boxData.boxNo"
-        :pack-qty="checkData.boxData.packQty"
-        :type-count="checkData.boxData.skuTypeCount"
-      />
-
-      <lw-input
-        :title="$lwLanguage.get('','商品撤回容器')"
-        v-model="repeatPopup.container.value"
-        :get-focus.sync="repeatPopup.container.focus"
-        :show-bottom-border="false"
-        required
-        @confirm="repeatConfirm"
-      />
-
-      <template #button>
-        <lw-button @click="repeatConfirm">
-          {{ $lwLanguage.get('','确认重新复核') }}
-        </lw-button>
-      </template>
-
-    </lw-popup>
-
-    <!-- 追加弹框 -->
-    <lw-popup
-      :title="$lwLanguage.get('','追加')"
-      v-model="addPopup.show"
-      @closed="addPopupOff"
-    >
-
-      <container-sku-qty
-        :box-no="checkData.boxData.boxNo"
-        :pack-qty="checkData.boxData.packQty"
-        :type-count="checkData.boxData.skuTypeCount"
-      />
-
-      <lw-input
-        :title="$lwLanguage.get('','拣选容器号')"
-        v-model="addPopup.container.value"
-        :get-focus.sync="addPopup.container.focus"
-        required
-        @confirm="addContainerConfirm"
-      />
-
-      <div
-        v-if="Object.keys(addPopup.data).length"
-        class="lw-global-flex-between lw-global-row-end"
-      >
-
-        <lw-title-value-cell
-          :title="$lwLanguage.get('','品种数')"
-          :value="addPopup.data.skuTypeCount"
-          val-bold
-          :is-row="false"
-        />
-
-        <lw-title-value-cell
-          :title="$lwLanguage.get('','待复核')"
-          :value="addPopup.data.waitPackQty"
-          val-bold
-          :is-row="false"
-        />
-
-      </div>
-
-      <template #button>
-
-        <lw-button @click="addConfirm">
-          {{ $lwLanguage.get('','确认追加') }}
-        </lw-button>
-
-      </template>
-
-    </lw-popup>
-
-    <!-- 剔除商品 -->
-    <lw-popup
-      :title="$lwLanguage.get('','剔除商品')"
-      v-model="delSkuPopup.show"
-      @closed="delSkuOff"
-    >
-
-      <container-sku-qty
-        :box-no="checkData.boxData.boxNo"
-        :pack-qty="checkData.boxData.packQty"
-        :type-count="checkData.boxData.skuTypeCount"
-      />
-
-      <!-- 商品条码 -->
-      <lw-input
-        :title="$lwLanguage.get('','商品条码')"
-        v-model="delSkuPopup.sku.value"
-        :get-focus.sync="delSkuPopup.sku.focus"
-        required
-        @confirm="delSkuSkuCodeConfirm"
-      />
-
-      <!-- 序列号 -->
-      <lw-input
-        v-if="delSkuPopup.isSn"
-        :title="$lwLanguage.get('','序列号')"
-        v-model="delSkuPopup.sn.value"
-        :get-focus.sync="delSkuPopup.sn.focus"
-        required
-        rule-key="delSkuSn"
-        rule-value-key="sn"
-        @confirm="delSkuSnConfirm"
-      />
-
-      <!-- 剔除数量 -->
-      <lw-input
-        :title="$lwLanguage.get('','剔除数量')"
-        v-model="delSkuPopup.qty.value"
-        :get-focus.sync="delSkuPopup.qty.focus"
-        type="digit"
-        :disabled="delSkuPopup.isSn"
-        required
-        @confirm="delSkuQtyConfirm"
-      >
-        <template #button>
-          <lw-tag
-            v-if="delSkuPopup.isSn"
-            type="danger"
-            plain
-            round
-          >{{ $lwLanguage.get('','不可修改') }}</lw-tag>
-        </template>
-      </lw-input>
-
-      <!-- 商品信息 -->
-      <lw-sku-info-module
-        :sku-code="delSkuPopup.data.skuCode"
-        :sku-name="delSkuPopup.data.skuName"
-        :qty="delSkuPopup.data.minSellQty"
-        :qty-text="$lwLanguage.get('','最小销售数')"
-        is-row
-      />
-
-      <!-- 剔除容器号 -->
-      <lw-input
-        :title="$lwLanguage.get('','容器号')"
-        v-model="delSkuPopup.container.value"
-        :get-focus="delSkuPopup.container.focus"
-        :show-bottom-border="false"
-        :placeholder="$lwLanguage.get('','剔除商品放入的容器号')"
-        required
-        @confirm="delSkuConfirm"
-      />
-
-      <template #button>
-
-        <lw-button @click="delSkuConfirm">
-          {{ $lwLanguage.get('','确认剔除') }}
-        </lw-button>
-
-      </template>
-
-    </lw-popup>
-
-    <!-- 全部拦截 -->
-    <all-block
-      v-model="allBlockShow"
-      :container="checkData.containerData.pickContainer"
-      :type-count="checkData.containerData.skuTypeCount"
-      :qty="checkData.containerData.blockQty"
-      @confirm="allBlockConfirm"
-    />
-
-    <!-- 部分拦截 -->
-    <part-block
-      v-model="partBlockPopup.show"
-      :pick-container="partBlockPopup.data.pickContainer"
-      :type-count="partBlockPopup.data.skuTypeCount"
-      :sku-qty="partBlockPopup.data.skuQty"
-      :block-data="partBlockPopup.data.blockData"
-      @confirm="partBlockConfirm"
-    />
-
-  </div>
-
-</template>
-
-<script>
-import containerInfo from './../../components/containerInfo/index.vue'
-import storeInfoSkuList from './../../components/storeInfoSkuList/index.vue'
-import containerSkuQty from './../../components/containerSkuQty/index.vue'
-import allBlock from './../../components/allBlock/index.vue'
-import partBlock from './../../components/partBlock/index.vue'
-import {
-  projectWmsContainerWholePack,
-  projectWmsMixPackQueryPackData
-} from "../../../../../../api/outbound/bale/checkBale/allCheck";
-import {
-  projectWmsMixPackAddContainerCheck,
-  projectWmsMixPackCheckSn,
-  projectWmsMixPackCloseBox,
-  projectWmsMixPackComputeBoxSuggest,
-  projectWmsMixPackContainerSkuBlock,
-  projectWmsMixPackContainerWholeBlock,
-  projectWmsMixPackDeleteSku,
-  projectWmsMixPackDeleteSkuWithSn,
-  projectWmsMixPackRePack, projectWmsMixPackSubmitAbnormal,
-  projectWmsMixPackSubmitSku,
-  projectWmsMixPackSubmitWithSn,
-  projectWmsOutbondQueryPackMaterial
-} from "../../../../../../api/outbound/bale/checkBale/action";
-
-export default {
-  name: "lwOutboundBaleActionPage",
-  components:{
-    containerInfo,
-    storeInfoSkuList,
-    containerSkuQty,
-    allBlock,
-    partBlock,
-  },
-  data() {
-    return {
-
-      // 复核的数据
-      checkData:{
-        "boxData": {
-          "boxNo": "BOX-001",
-          "boxId": 0,
-          "customerCode": "KH001",
-          "customerName": "客户001",
-          "skuTypeCount": 0,
-          "packQty": 10,
-          "skuList": [
-            {
-              "skuId": 0,
-              "skuCode": "LJ-001",
-              "skuName": "零件001",
-              "qty": 5,
-              "minSellQty": 0,
-              "needHandleSn": false
-            }
-          ],
-          "packSnList": [
-            {
-              "sn": "",
-              "qty": 0
-            }
-          ]
-        },
-        "containerData": {
-          "pickContainer": "RQ-001",
-          "canWholePack": false,
-          "skuTypeCount": 2,
-          "packQty": 4,
-          "waitPackQty": 6,
-          "abnormalQty": 0,
-          "blockStatus": "",
-          "blockQty": 0,
-          "packSkuList": [
-            {
-              "skuId": 0,
-              "skuCode": "LJ-001",
-              "skuName": "零件001",
-              "minSellQty": 0,
-              "totalQty": 10,
-              "packQty": 4,
-              "locationId": 0,
-              "locationCode": "",
-              "needHandleSn": false
-            }
-          ]
-        }
-      },
-
-      // 是否是全部复核进入
-      fromAllCheck: true,
-
-      // 允许全部复核
-      allowAllCheck: false,
-
-      // 开始复核
-      actionCheck:{
-        sku:{
-          value: '',
-          focus: false
-        },
-        qty:{
-          value: '',
-          focus: false
-        },
-
-        skuInfo:{}
-      },
-
-      // 序列号复核弹框
-      checkPopup:{
-        show: true,
-        // 当前扫描量
-        nowScanNum: 0,
-        sn:{
-          value:'',
-          focus: false
-        },
-        snList: []
-      },
-
-
-      // 完成捆包弹框
-      overBalePopup:{
-        show: false,
-        // 实际重量
-        real:{
-          value: '',
-          focus: false
-        },
-        // 包材输入框
-        materials:{
-          value:'',
-          focus:false,
-          list:[]
-        },
-        data:{}
-      },
-
-      // 重新复核
-      repeatPopup:{
-        show: false,
-        container:{
-          value: '',
-          focus: false
-        }
-      },
-
-      // 追加
-      addPopup:{
-        show: false,
-        container:{
-          value: '',
-          focus: false
-        },
-        data:{}
-      },
-
-      // 剔除商品
-      delSkuPopup:{
-        show: false,
-        // 是否需要扫描sn
-        isSn: false,
-        // 商品号
-        sku: {
-          value: '',
-          focus: false
-        },
-        // 序列号
-        sn: {
-          value: '',
-          focus: false
-        },
-        // 数量
-        qty: {
-          value: '',
-          focus: false
-        },
-        // 剔除容器号
-        container: {
-          value: '',
-          focus: false
-        },
-        data:{}
-      },
-
-      // 是否全部拦截
-      allBlockShow: true,
-
-      // 部分拦截弹框
-      partBlockPopup:{
-        show: false,
-        data:{
-          pickContainer:'',
-          skuTypeCount:'',
-          skuQty:'',
-          blockData:{}
-        }
-      },
-    }
-  },
-  computed:{
-    // 底部按钮
-    btnList(){
-      return [
-        {
-          text: this.$lwLanguage.get('','完成复核(封箱)'),
-          click: this.overBaleOpen
-        },
-        {
-          text: this.$lwLanguage.get('','重新复核'),
-          click: this.repeatOpen
-        },
-        {
-          text: this.$lwLanguage.get('','剔除商品'),
-          click: this.delSkuOpen
-        },
-        {
-          text: this.$lwLanguage.get('','追加'),
-          click: this.addSkuOpen
-        }
-      ]
-
-      // 是否显示追加商品按钮
-      /*if (this.showAddBtn){
-        list.push({
-          text: this.$lwLanguage.get('','追加'),
-          click: this.addSkuOpen
-        })
-      }*/
-
-      // return list
-    }
-  },
-  mounted() {
-    const query = this.$route.query
-    if (query.lwType === 'allCheck'){
-      this.fromAllCheck = true
-      this.allowAllCheck = false
-
-      projectWmsContainerWholePack({
-        pickContainer: query.lwContainer
-      }).then(res=>{
-        this.checkBlock(res)
-
-        this.checkData = res
-      })
-      return
-    }
-
-    this.getData()
-  },
-  methods: {
-    // 获取数据
-    getData(){
-      return new Promise((PR,PE)=>{
-
-        projectWmsMixPackQueryPackData({
-          queryContainer: this.$route.query.lwContainer
-        }).then(res=>{
-
-          if (res.containerData.blockStatus === '200') this.allBlockShow = true
-
-          this.checkData = res
-
-          PR()
-        }).catch(()=>{
-          PE()
-          history.go(-1)
-        })
-      })
-    },
-
-    // 开始复核 - 商品号确认
-    actionCheckSkuConfirm(val,{data}){
-
-      if (
-        Object.keys(this.actionCheck.skuInfo).length &&
-        data.key !== this.actionCheck.skuInfo.skuCode
-      ){
-        this.actionCheck.sku.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get(
-            '',
-            '当前扫描商品与上一次扫描商品不一致！如需更换商品，请完成上次商品复核或点击重新扫描按钮')
-        )
-        return
-      }
-
-      for (let i of this.checkData.containerData.packSkuList){
-
-        if (i.skuCode === data.key){
-
-          this.actionCheck.skuInfo = {
-            ...i,
-            waitQty: i.totalQty - i.packQty
-          }
-
-          if(i.needHandleSn){
-            this.checkPopup.show = true
-            this.checkPopup.sn.focus = true
-            this.getCheckPopupNum()
-          }else {
-            this.actionCheck.qty.value += Number(data.qty || 0)
-
-            if (this.actionCheck.qty.value === this.actionCheck.skuInfo.waitQty){
-              this.actionCheckQtyConfirm()
-            }
-          }
-          return
-        }
-
-      }
-
-      this.actionCheck.sku.focus = true
-      this.$lwShowErrorMsg(
-        this.$lwLanguage.get('','当前商品不在拣选容器中')
-      )
-      this.actionCheck.sku.value = ''
-
-    },
-    // 开始复核 - 商品数量确认
-    actionCheckQtyConfirm(){
-
-      const qty = Number(this.actionCheck.qty.value ||0)
-
-      if (!qty){
-        this.actionCheck.qty.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('','复核数不能为空，且应当是大于0的整数')
-        )
-        return
-      }
-
-      if (qty > this.actionCheck.skuInfo.waitQty){
-        this.actionCheck.qty.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('','复核数不能大于待复核数')
-        )
-        return
-      }
-
-
-      projectWmsMixPackSubmitSku({
-        boxId: this.checkData.containerData.boxId,
-        pickContainer: this.checkData.containerData.pickContainer,
-        skuId: this.actionCheck.skuInfo.skuId,
-        currentPackQty: qty
-      }).then(res=>{
-
-        this.checkData = res
-
-        if (res.containerPackFinish){
-          this.$lwToast.success(
-            this.$lwLanguage.get('','当前容器已复核完毕')
-          )
-
-          this.overBaleOpen()
-
-        }
-
-        this.actionCheck.sku.value = ''
-        this.actionCheck.sku.focus = true
-        this.actionCheck.qty.focus = ''
-        this.actionCheck.skuInfo = {}
-
-        this.checkBlock(res)
-      })
-    },
-
-    // 复核序列号 - 当前复核量
-    getCheckPopupNum(){
-      let num = 0
-      this.checkPopup.snList.forEach(item=>{
-        num += Number(item.qty || 0)
-      })
-      this.checkPopup.nowScanNum = num
-
-      if (num === this.actionCheck.skuInfo.waitQty){
-        this.checkPopupSubmit()
-      }
-
-    },
-    // 复核序列号 - 确认
-    checkPopupSnConfirm(val,{data}){
-      const sn = data.key
-      if (!sn){
-        this.checkPopup.sn.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('','序列号不能为空')
-        )
-        return
-      }
-
-      projectWmsMixPackCheckSn({
-        pickContainer:'',
-        skuId: this.actionCheck.skuInfo.skuId,
-        sn,
-        qty: data.qty || 0
-      }).then(res=>{
-        this.checkPopup.snList.unshift(res)
-        this.getCheckPopupNum()
-      })
-    },
-    // 复核序列号 - 删除
-    checkPopupSnDel(index){
-
-      this.checkPopup.snList.splice(index, 1)
-      this.getCheckPopupNum()
-
-    },
-    // 复核序列号 - 提交数据
-    checkPopupSubmit(){
-
-      const snList = this.checkPopup.snList
-      if (!snList.length){
-        this.checkPopup.sn.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('','请输入或扫描需要复核的序列号')
-        )
-        return
-      }
-
-      projectWmsMixPackSubmitWithSn({
-        boxId: this.checkData.containerData.boxId,
-        pickContainer: this.checkData.containerData.pickContainer,
-        skuId: this.actionCheck.skuInfo.skuId,
-        snList
-      }).then(res=>{
-        this.checkData = res
-
-        if (res.containerPackFinish){
-          this.$lwToast.success(
-            this.$lwLanguage.get('','当前容器已复核完毕')
-          )
-
-          this.overBaleOpen()
-        }
-
-        this.checkPopup.show = false
-
-        this.checkBlock(res)
-      })
-    },
-    // 复核序列号 - 重新扫描
-    checkPopupRepeatScan(){
-      this.$dialog.confirm({
-        title: this.$lwLanguage.get('','警告'),
-        message: this.$lwLanguage.get('','当前扫描数据将会被清空')
-      }).then(()=>{
-        this.checkPopup.sn = ''
-        this.snList = []
-        this.getCheckPopupNum()
-      }).catch(()=>{})
-    },
-    // 复核序列号 - 弹框关闭
-    checkPopupOff(){
-      this.checkPopup.sn = ''
-      this.snList = []
-      this.actionCheck.sku.value = ''
-      this.actionCheck.skuInfo = {}
-    },
-
-
-    // 完成捆包 - 打开弹框
-    overBaleOpen(){
-      projectWmsMixPackComputeBoxSuggest({
-        boxId: this.checkData.boxData.boxId
-      }).then(res=>{
-        this.overBalePopup.data = res
-        this.overBalePopup.show = true
-        this.overBalePopup.real.focus = true
-      })
-    },
-    // 完成捆包 - 实际重量确认
-    realConfirm(){
-      if (this.realCheck()) this.overBalePopup.materials.focus = true
-    },
-    // 完成捆包 - 实际重量校验
-    realCheck(){
-      const num = Number(this.overBalePopup.real.value || 0)
-
-      if (!num) return true
-
-      const data = this.overBalePopup.data
-      if (data.weightFloor > num){
-        this.overBalePopup.real.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('','实际重量不能低于标准重量下限') + ':' + data.weightFloor
-        )
-        return false
-      }
-      if (data.weightLimit < num){
-        this.overBalePopup.real.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('','实际重量不能大于标准重量上限') + ':' + data.weightLimit
-        )
-        return false
-      }
-
-      return true
-    },
-    // 完成捆包 - 包材确认
-    materialsConfirm(){
-      const materials = this.overBalePopup.materials.value
-      if (!materials){
-        this.overBalePopup.materials.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('','捆包包材不能为空')
-        )
-        return
-      }
-
-
-      projectWmsOutbondQueryPackMaterial({
-        packMaterialCode: materials
-      }).then(res=>{
-        this.overBalePopup.materials.list.unshift(res)
-      })
-    },
-    // 完成捆包 - 删除包材
-    delMaterials(index){
-      this.overBalePopup.materials.list.splice(index, 1)
-    },
-    // 完成捆包 - 封箱
-    overBaleConfirm(){
-      if (!this.realCheck()) return
-
-      // 通过包材长度判断是否是有包材还是无包材封箱
-      const list = this.overBalePopup.materials.list
-
-      // 获取每一个包材的使用量
-      let obj = {}
-      list.forEach(item=>{
-        if (obj[item.packMaterialId]){
-          obj[item.packMaterialId] = obj[item.packMaterialId] + 1
-        }else {
-          obj[item.packMaterialId] = 1
-        }
-      })
-      let packMaterialList = []
-      for (let i in obj){
-        packMaterialList.push({
-          packMaterialId: i,
-          qty: obj[i]
-        })
-      }
-
-      projectWmsMixPackCloseBox({
-        boxId: this.boxId,
-        packWeight: this.overBalePopup.real.value || this.overBalePopup.data.standardWeight,
-        packMaterialList
-      }).then(()=>{
-        this.$lwToast.success(
-          this.$lwLanguage.get('','捆包成功')
-        )
-        history.go(-1)
-      })
-
-    },
-    // 完成捆包 - 弹框关闭
-    overBaleOff(){
-      this.overBalePopup.materials.value = ''
-      this.overBalePopup.materials.list = []
-      this.overBalePopup.real.value = ''
-      this.overBalePopup.data = {}
-    },
-
-    // 重新复核 - 打开弹框
-    repeatOpen(){
-      this.repeatPopup.show = true
-      this.repeatPopup.container.focus = true
-    },
-    // 重新复核 - 确认
-    repeatConfirm(){
-      const container = this.repeatPopup.container.value
-      if (!container){
-        this.repeatPopup.container.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('','商品撤回容器号不能为空')
-        )
-        return
-      }
-
-      projectWmsMixPackRePack({
-        boxId: this.checkData.boxData.boxId,
-        toPickContainer: container
-      }).then(()=>{
-        this.$lwToast.success(
-          this.$lwLanguage.get('','操作成功')
-        )
-        history.go(-1)
-      })
-    },
-
-    // 追加 - 弹框打开
-    addSkuOpen(){
-      this.addPopup.container.focus = true
-      this.addPopup.show = true
-    },
-    // 追加 - 确认拣选容器号
-    addContainerConfirm(){
-      const container = this.addPopup.container.value
-      if (!container){
-        this.addPopup.container.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('','拣选容器号不能为空')
-        )
-        return
-      }
-
-      projectWmsMixPackAddContainerCheck({
-        boxId: this.checkData.boxData.boxId,
-        addPickContainer: container
-      }).then(res=>{
-        this.addPopup.data = res
-      })
-    },
-    // 追加 - 确认追加
-    addConfirm(){
-      this.checkData.containerData = this.$lwDeepCopy(this.addPopup.data)
-      this.addPopup.show = false
-    },
-    // 追加 - 弹框关闭
-    addPopupOff(){
-      this.addPopup.container.value = ''
-      this.addPopup.data = {}
-    },
-
-    // 剔除商品 - 打开弹框
-    delSkuOpen(){
-      this.delSkuPopup.show = true
-      this.delSkuPopup.sku.focus = true
-    },
-    // 剔除商品 - 商品号确认
-    delSkuSkuCodeConfirm(val, {data}){
-
-      for (let i of this.checkData.boxData.skuList) {
-        if (i.skuCode === data.key){
-          this.delSkuPopup.data = i
-
-          // 判断是否需要sn
-          if (i.needHandleSn){
-            this.delSkuPopup.isSn = true
-
-            // 看看条码是否解析出了sn
-            if (data.sn){
-              this.delSkuPopup.sn.value = data.sn
-              this.delSkuSnConfirm(data.sn,{data:{key:data.sn}})
-            }else {
-              this.delSkuPopup.sn.focus = ''
-            }
-
-          }else {
-            this.delSkuPopup.isSn = false
-            this.delSkuPopup.qty.focus = true
-          }
-          return
-        }
-      }
-
-
-      this.delSkuPopup.sku.focus = true
-      this.$lwShowErrorMsg(
-        this.$lwLanguage.get('','当前商品不在捆包箱中')
-      )
-      this.delSkuPopup.sku.value = ''
-    },
-    // 剔除商品 - 序列号确认
-    delSkuSnConfirm(val, {data}){
-
-      for (let i of this.checkData.boxData.packSnList) {
-        if (i.sn === data.key){
-          this.delSkuPopup.qty.value = i.qty
-          this.delSkuQtyConfirm()
-          return
-        }
-      }
-
-      this.delSkuPopup.sn.focus = true
-      this.$lwShowErrorMsg(
-        this.$lwLanguage.get('','当前商品序列号不在捆包箱中')
-      )
-      this.delSkuPopup.sn.value = ''
-
-    },
-    // 剔除商品 - 剔除数量确认
-    delSkuQtyConfirm(){
-      if(this.delSkuQtyCheck()) this.delSkuPopup.container.focus = true
-    },
-    // 剔除商品 - 剔除数量校验
-    delSkuQtyCheck(){
-      const qty = Number(this.delSkuPopup.qty.value || 0)
-
-      if(!qty){
-        this.delSkuPopup.qty.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('','剔除数量不能为空，且应当是大于0的整数')
-        )
-        return false
-      }
-
-      if (qty%this.delSkuPopup.data.minSellQty !== 0){
-        this.delSkuPopup.qty.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('','剔除数量必须是最小销售数的整数倍')
-        )
-        this.delSkuPopup.qty.value = ''
-        return false
-      }
-
-      return true
-
-    },
-    // 剔除商品 - 确认剔除
-    delSkuConfirm(){
-      const data = this.delSkuPopup
-      const container = data.container.value
-
-      if (!container){
-        this.delSkuPopup.container.focus = true
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('','剔除容器号不能为空')
-        )
-        return
-      }
-
-      // 判断当前是需要sn还是不需要
-      const fn = this.delSkuPopup.isSn ?
-        projectWmsMixPackDeleteSkuWithSn :
-        projectWmsMixPackDeleteSku
-
-      fn({
-        boxId: this.checkData.boxData.boxId,
-        deleteToContainer: container,
-        skuId: data.data.skuId,
-        // 按唯一号剔除需要
-        snList:[{sn: data.sn.value, qty: data.qty.value}],
-        // 按商品剔除需要
-        currentDeleteQty: data.qty.value
-      }).then(res=>{
-        if (res.boxDelAll){
-          this.$lwToast.success(
-            this.$lwLanguage.get('','当前箱已全部剔除')
-          )
-          history.go(-1)
-          return
-        }
-
-        this.$lwToast.success(
-          this.$lwLanguage.get('','剔除成功')
-        )
-        this.getData()
-        this.delSkuPopup.show = false
-      })
-    },
-    // 剔除商品 - 弹框关闭
-    delSkuOff(){
-      this.delSkuPopup.sku.value = ''
-      this.delSkuPopup.sn.value = ''
-      this.delSkuPopup.qty.value = ''
-      this.delSkuPopup.container.value = ''
-      this.delSkuPopup.isSn = false
-      this.delSkuPopup.data = {}
-    },
-
-    // 校验是否拦截
-    checkBlock(res){
-      if (res.containerBlockData.blockStatus === '200') this.allBlockShow = true
-      if (res.containerBlockData.blockStatus === '100') {
-        this.partBlockPopup.data={
-          pickContainer: res.containerData.pickContainer,
-          skuTypeCount:res.containerData.skuTypeCount,
-          skuQty:res.containerData.packQty,
-          blockData:res.containerBlockData.blockSkuList[0]
-        }
-      }
-    },
-    // 全部拦截
-    allBlockConfirm(){
-      projectWmsMixPackContainerWholeBlock({
-        pickContainer: this.checkData.containerData.pickContainer
-      }).then(()=>{
-        this.$lwToast.success(
-          this.$lwLanguage.get('','已拦截')
-        )
-        history.go(-1)
-      })
-    },
-    // 部分拦截
-    async partBlockConfirm(data){
-
-      const res = await projectWmsMixPackContainerSkuBlock({
-        pickContainer: data.container,
-        currentBlockQty: data.qty,
-        skuId: ''
-      })
-
-      await this.getData()
-
-      if (res.containerPackFinish){
-        this.$lwToast.success(
-          this.$lwLanguage.get('','当前容器已全部捆包')
-        )
-        this.overBaleOpen()
-      }
-    },
-
-    // 异常确认
-    abnConfirm(data){
-      return projectWmsMixPackSubmitAbnormal({
-        pickContainer: this.checkData.containerData.pickContainer,
-        ...data
-      })
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.materials-box{
-  margin-top: 5px;
-  padding: 0 5px;
-  border-radius: 5px;
-  border: solid 1px #f0f0f0;
-}
-
-.col-1{
-  width: 35%;
-  flex-shrink: 0;
-}
-.col-2{
-  width: 55%;
-  flex-shrink: 0;
-}
-.col-3{
-  width: 24px;
-  flex-shrink: 0;
-}
-</style>
+;<!--
+  复核捆包执行页
+  @author: 张文
+  @date: 2022-06-30
+-->
+<template>
+
+  <div>
+    <lw-nav-bar :title="$lwLanguage.get('','复核捆包')"/>
+
+    <div class="lw-global-page-box">
+
+      <!-- 门店信息 -->
+      <store-info-sku-list
+        :item="checkData.boxData"
+        :customer-code="checkData.containerData.customerCode"
+        :customer-name="checkData.containerData.customerName"
+        show-bale-info
+      >
+        <div
+          style="text-align: center"
+          class="lw-global-row-end lw-global-value-bold-red"
+        >
+          {{ $lwLanguage.get('','当前还未执行捆包，请扫描商品号执行捆包') }}
+        </div>
+      </store-info-sku-list>
+
+      <!-- 复核操作 -->
+      <template v-if="!fromAllCheck">
+
+        <div
+          style="border: solid 2px #D50000"
+          class="lw-global-model-box"
+        >
+
+          <lw-input
+            :title="$lwLanguage.get('','商品号')"
+            v-model="actionCheck.sku.value"
+            :get-focus.sync="actionCheck.sku.focus"
+            auto-clear-val
+            @confirm="actionCheckSkuConfirm"
+          />
+
+          <template v-if="Object.keys(actionCheck.skuInfo).length">
+
+            <lw-input
+              :title="$lwLanguage.get('','复核数量')"
+              v-model="actionCheck.qty.value"
+              :get-focus.sync="actionCheck.qty.focus"
+              type="digit"
+              @confirm="actionCheckQtyConfirm"
+            >
+
+              <template #button>
+                <lw-button
+                  mini
+                  round
+                  @click="actionCheckQtyConfirm"
+                >{{ $lwLanguage.get('','确认复核') }}</lw-button>
+              </template>
+
+            </lw-input>
+
+            <lw-sku-info-module
+              :sku-name="actionCheck.skuInfo.skuName"
+              :sku-code="actionCheck.skuInfo.skuCode"
+              :show-right="false"
+            />
+
+            <div class="lw-global-flex-between lw-global-row-end">
+
+              <lw-title-value-cell
+                :title="$lwLanguage.get('','最小销售数')"
+                :value="actionCheck.skuInfo.minSellQty"
+                val-bold
+                val-red
+                :is-row="false"
+              />
+
+              <div>
+              <span class="lw-global-title">
+                {{ $lwLanguage.get('','数量') }}
+              </span>
+                <span class="lw-global-value">
+                <span class="lw-global-value-bold-red">
+                  {{ actionCheck.skuInfo.packQty }}
+                </span>
+                 / {{ actionCheck.skuInfo.totalQty }}
+              </span>
+              </div>
+
+            </div>
+          </template>
+
+        </div>
+
+      </template>
+
+      <!-- 容器信息 -->
+      <container-info
+        style="margin-top: 10px"
+        :container="checkData.containerData.pickContainer"
+        :sku-count="checkData.containerData.skuTypeCount"
+        :over-count="checkData.containerData.packQty"
+        :wait-count="checkData.containerData.waitPackQty"
+        :abnormal-count="checkData.containerData.abnormalQty"
+        :sku-list="checkData.containerData.packSkuList"
+        :show-abn-btn="!fromAllCheck"
+        :show-all-check="!fromAllCheck && allowAllCheck"
+        :abn-confirm="abnConfirm"
+      />
+
+    </div>
+
+    <lw-bottom-bar-btn-hidden
+      v-if="checkData.boxData && Object.keys(checkData.boxData).length"
+      :btn-list="btnList"
+    />
+
+    <!-- 复核序列号 -->
+    <lw-popup
+      :title="$lwLanguage.get('','复核序列号')"
+      v-model="checkPopup.show"
+      @closed="checkPopupOff"
+    >
+
+      <lw-sku-info-module
+        :sku-name="actionCheck.skuInfo.skuName"
+        :sku-code="actionCheck.skuInfo.skuCode"
+        :qty="actionCheck.skuInfo.minSellQty"
+        :qty-text="$lwLanguage.get('','最小销售量')"
+      />
+
+      <div class="lw-global-row lw-global-flex-between">
+
+        <lw-title-value-cell
+          :title="$lwLanguage.get('','待复核量')"
+          :value="actionCheck.skuInfo.totalQty - actionCheck.skuInfo.packQty"
+          val-red
+          val-bold
+          :is-row="false"
+        />
+
+        <lw-title-value-cell
+          :title="$lwLanguage.get('','当前扫描数量')"
+          :value="checkPopup.nowScanNum"
+          val-red
+          val-bold
+          :is-row="false"
+        />
+
+      </div>
+
+      <lw-input
+        :title="$lwLanguage.get('','序列号')"
+        v-model="checkPopup.sn.value"
+        :get-focus.sync="checkPopup.sn.focus"
+        auto-clear-val
+        @confirm="checkPopupSnConfirm"
+      />
+
+      <div
+        class="lw-global-flex-between lw-global-row"
+        v-for="(i,k) in checkPopup.snList"
+        :key="k"
+      >
+        <div class="col-2">{{ i.sn }}</div>
+        <div class="col-1">{{ i.qty }}</div>
+        <div class="col-3">
+          <van-icon
+            color="#D50000"
+            name="clear"
+            size="20"
+            @click="checkPopupSnDel(k)"
+          />
+        </div>
+      </div>
+
+      <template #button>
+
+        <lw-button
+          type="last"
+          plain
+          @click="checkPopupRepeatScan"
+        >
+          {{ $lwLanguage.get('','重新扫描') }}
+        </lw-button>
+
+
+        <lw-button @click="checkPopupSubmit">
+          {{ $lwLanguage.get('','确认复核') }}
+        </lw-button>
+
+      </template>
+    </lw-popup>
+
+    <!-- 完成捆包弹框 -->
+    <lw-popup
+      :title="$lwLanguage.get('','完成捆包')"
+      v-model="overBalePopup.show"
+      @closed="overBaleOff"
+    >
+      <container-sku-qty
+        :box-no="checkData.boxData.boxNo"
+        :pack-qty="checkData.boxData.packQty"
+        :type-count="checkData.boxData.skuTypeCount"
+      />
+
+      <lw-title-value-cell
+        :title="$lwLanguage.get('','标准重量') + '(KG)'"
+        :value="overBalePopup.data.standardWeight"
+        val-bold
+      />
+
+      <lw-input
+        :title="$lwLanguage.get('','实际重量') + '(KG)'"
+        v-model="overBalePopup.real.value"
+        :get-focus.sync="overBalePopup.real.focus"
+        type="number"
+        @confirm="realConfirm"
+      />
+
+      <lw-input
+        :title="$lwLanguage.get('','捆包包材')"
+        v-model="overBalePopup.materials.value"
+        :get-focus.sync="overBalePopup.materials.focus"
+        :show-bottom-border="false"
+        @confirm="materialsConfirm"
+      />
+
+      <div
+        v-if="overBalePopup.materials.list.length"
+        class="materials-box"
+      >
+        <div
+          class="lw-global-flex-between lw-global-row-start"
+          style="padding: 5px 0"
+        >
+
+          <div class="lw-global-title col-1">
+            {{ $lwLanguage.get('','包材编码') }}
+          </div>
+
+          <div class="lw-global-title col-2">
+            {{ $lwLanguage.get('','包材规格') }}
+          </div>
+
+          <div class="col-3"></div>
+
+        </div>
+
+        <div style="max-height: 84px;overflow-y: scroll">
+          <div
+            class="lw-global-flex-between lw-global-row"
+            style="padding: 5px 0"
+            v-for="(i,k) in overBalePopup.materials.list"
+            :key="k"
+          >
+
+            <!-- 包材编码 -->
+            <div class="lw-global-value-bold col-1">{{ i.packMaterialCode }}</div>
+
+            <!-- 尺寸 -->
+            <div class="lw-global-value-bold col-2">
+              {{ i.length || '-' }} *
+              {{ i.width || '-' }} *
+              {{ i.height || '-' }}
+            </div>
+
+            <!-- 删除按钮 -->
+            <div class="col-3">
+              <van-icon
+                color="#D50000"
+                name="clear"
+                size="20"
+                @click="delMaterials(k)"
+              />
+            </div>
+
+          </div>
+        </div>
+
+
+      </div>
+
+      <template #button>
+        <lw-button
+          v-if="overBalePopup.materials.list.length"
+          @click="overBaleConfirm"
+        >
+          {{ $lwLanguage.get('','完成复核(封箱)') }}
+        </lw-button>
+        <lw-button
+          v-else
+          @click="overBaleConfirm"
+        >
+          {{ $lwLanguage.get('','无需包材(封箱)') }}
+        </lw-button>
+      </template>
+
+    </lw-popup>
+
+    <!-- 重新复核弹框 -->
+    <lw-popup
+      :title="$lwLanguage.get('','重新复核')"
+      v-model="repeatPopup.show"
+      @closed="repeatPopup.container.value=''"
+    >
+
+      <container-sku-qty
+        :box-no="checkData.boxData.boxNo"
+        :pack-qty="checkData.boxData.packQty"
+        :type-count="checkData.boxData.skuTypeCount"
+      />
+
+      <lw-input
+        :title="$lwLanguage.get('','商品撤回容器')"
+        v-model="repeatPopup.container.value"
+        :get-focus.sync="repeatPopup.container.focus"
+        :show-bottom-border="false"
+        required
+        @confirm="repeatConfirm"
+      />
+
+      <template #button>
+        <lw-button @click="repeatConfirm">
+          {{ $lwLanguage.get('','确认重新复核') }}
+        </lw-button>
+      </template>
+
+    </lw-popup>
+
+    <!-- 追加弹框 -->
+    <lw-popup
+      :title="$lwLanguage.get('','追加')"
+      v-model="addPopup.show"
+      @closed="addPopupOff"
+    >
+
+      <container-sku-qty
+        :box-no="checkData.boxData.boxNo"
+        :pack-qty="checkData.boxData.packQty"
+        :type-count="checkData.boxData.skuTypeCount"
+      />
+
+      <lw-input
+        :title="$lwLanguage.get('','拣选容器号')"
+        v-model="addPopup.container.value"
+        :get-focus.sync="addPopup.container.focus"
+        required
+        @confirm="addContainerConfirm"
+      />
+
+      <div
+        v-if="Object.keys(addPopup.data).length"
+        class="lw-global-flex-between lw-global-row-end"
+      >
+
+        <lw-title-value-cell
+          :title="$lwLanguage.get('','品种数')"
+          :value="addPopup.data.skuTypeCount"
+          val-bold
+          :is-row="false"
+        />
+
+        <lw-title-value-cell
+          :title="$lwLanguage.get('','待复核')"
+          :value="addPopup.data.waitPackQty"
+          val-bold
+          :is-row="false"
+        />
+
+      </div>
+
+      <template #button>
+
+        <lw-button @click="addConfirm">
+          {{ $lwLanguage.get('','确认追加') }}
+        </lw-button>
+
+      </template>
+
+    </lw-popup>
+
+    <!-- 剔除商品 -->
+    <lw-popup
+      :title="$lwLanguage.get('','剔除商品')"
+      v-model="delSkuPopup.show"
+      @closed="delSkuOff"
+    >
+
+      <container-sku-qty
+        :box-no="checkData.boxData.boxNo"
+        :pack-qty="checkData.boxData.packQty"
+        :type-count="checkData.boxData.skuTypeCount"
+      />
+
+      <!-- 商品条码 -->
+      <lw-input
+        :title="$lwLanguage.get('','商品条码')"
+        v-model="delSkuPopup.sku.value"
+        :get-focus.sync="delSkuPopup.sku.focus"
+        required
+        @confirm="delSkuSkuCodeConfirm"
+      />
+
+      <!-- 序列号 -->
+      <lw-input
+        v-if="delSkuPopup.isSn"
+        :title="$lwLanguage.get('','序列号')"
+        v-model="delSkuPopup.sn.value"
+        :get-focus.sync="delSkuPopup.sn.focus"
+        required
+        rule-key="delSkuSn"
+        rule-value-key="sn"
+        @confirm="delSkuSnConfirm"
+      />
+
+      <!-- 剔除数量 -->
+      <lw-input
+        :title="$lwLanguage.get('','剔除数量')"
+        v-model="delSkuPopup.qty.value"
+        :get-focus.sync="delSkuPopup.qty.focus"
+        type="digit"
+        :disabled="delSkuPopup.isSn"
+        required
+        @confirm="delSkuQtyConfirm"
+      >
+        <template #button>
+          <lw-tag
+            v-if="delSkuPopup.isSn"
+            type="danger"
+            plain
+            round
+          >{{ $lwLanguage.get('','不可修改') }}</lw-tag>
+        </template>
+      </lw-input>
+
+      <!-- 商品信息 -->
+      <lw-sku-info-module
+        :sku-code="delSkuPopup.data.skuCode"
+        :sku-name="delSkuPopup.data.skuName"
+        :qty="delSkuPopup.data.minSellQty"
+        :qty-text="$lwLanguage.get('','最小销售数')"
+        is-row
+      />
+
+      <!-- 剔除容器号 -->
+      <lw-input
+        :title="$lwLanguage.get('','容器号')"
+        v-model="delSkuPopup.container.value"
+        :get-focus="delSkuPopup.container.focus"
+        :show-bottom-border="false"
+        :placeholder="$lwLanguage.get('','剔除商品放入的容器号')"
+        required
+        @confirm="delSkuConfirm"
+      />
+
+      <template #button>
+
+        <lw-button @click="delSkuConfirm">
+          {{ $lwLanguage.get('','确认剔除') }}
+        </lw-button>
+
+      </template>
+
+    </lw-popup>
+
+    <!-- 全部拦截 -->
+    <all-block
+      v-model="allBlockShow"
+      :container="checkData.containerData.pickContainer"
+      :type-count="checkData.containerData.skuTypeCount"
+      :qty="checkData.containerData.blockQty"
+      @confirm="allBlockConfirm"
+    />
+
+    <!-- 部分拦截 -->
+    <part-block
+      v-model="partBlockPopup.show"
+      :pick-container="partBlockPopup.data.pickContainer"
+      :type-count="partBlockPopup.data.skuTypeCount"
+      :sku-qty="partBlockPopup.data.skuQty"
+      :block-data="partBlockPopup.data.blockData"
+      @confirm="partBlockConfirm"
+    />
+
+  </div>
+
+</template>
+
+<script>
+import containerInfo from './../../components/containerInfo/index.vue'
+import storeInfoSkuList from './../../components/storeInfoSkuList/index.vue'
+import containerSkuQty from './../../components/containerSkuQty/index.vue'
+import allBlock from './../../components/allBlock/index.vue'
+import partBlock from './../../components/partBlock/index.vue'
+import {
+  projectWmsContainerWholePack,
+  projectWmsMixPackQueryPackData
+} from "../../../../../../api/outbound/bale/checkBale/allCheck";
+import {
+  projectWmsMixPackAddContainerCheck,
+  projectWmsMixPackCheckSn,
+  projectWmsMixPackCloseBox,
+  projectWmsMixPackComputeBoxSuggest,
+  projectWmsMixPackContainerSkuBlock,
+  projectWmsMixPackContainerWholeBlock,
+  projectWmsMixPackDeleteSku,
+  projectWmsMixPackDeleteSkuWithSn,
+  projectWmsMixPackRePack, projectWmsMixPackSubmitAbnormal,
+  projectWmsMixPackSubmitSku,
+  projectWmsMixPackSubmitWithSn,
+  projectWmsOutbondQueryPackMaterial
+} from "../../../../../../api/outbound/bale/checkBale/action";
+
+export default {
+  name: "lwOutboundBaleActionPage",
+  components:{
+    containerInfo,
+    storeInfoSkuList,
+    containerSkuQty,
+    allBlock,
+    partBlock,
+  },
+  data() {
+    return {
+
+      // 复核的数据
+      checkData:{
+        "boxData": {
+          "boxNo": "BOX-001",
+          "boxId": 0,
+          "customerCode": "KH001",
+          "customerName": "客户001",
+          "skuTypeCount": 0,
+          "packQty": 10,
+          "skuList": [
+            {
+              "skuId": 0,
+              "skuCode": "LJ-001",
+              "skuName": "零件001",
+              "qty": 5,
+              "minSellQty": 0,
+              "needHandleSn": false
+            }
+          ],
+          "packSnList": [
+            {
+              "sn": "",
+              "qty": 0
+            }
+          ]
+        },
+        "containerData": {
+          "pickContainer": "RQ-001",
+          "canWholePack": false,
+          "skuTypeCount": 2,
+          "packQty": 4,
+          "waitPackQty": 6,
+          "abnormalQty": 0,
+          "blockStatus": "",
+          "blockQty": 0,
+          "packSkuList": [
+            {
+              "skuId": 0,
+              "skuCode": "LJ-001",
+              "skuName": "零件001",
+              "minSellQty": 0,
+              "totalQty": 10,
+              "packQty": 4,
+              "locationId": 0,
+              "locationCode": "",
+              "needHandleSn": false
+            }
+          ]
+        }
+      },
+
+      // 是否是全部复核进入
+      fromAllCheck: true,
+
+      // 允许全部复核
+      allowAllCheck: false,
+
+      // 开始复核
+      actionCheck:{
+        sku:{
+          value: '',
+          focus: false
+        },
+        qty:{
+          value: '',
+          focus: false
+        },
+
+        skuInfo:{}
+      },
+
+      // 序列号复核弹框
+      checkPopup:{
+        show: true,
+        // 当前扫描量
+        nowScanNum: 0,
+        sn:{
+          value:'',
+          focus: false
+        },
+        snList: []
+      },
+
+
+      // 完成捆包弹框
+      overBalePopup:{
+        show: false,
+        // 实际重量
+        real:{
+          value: '',
+          focus: false
+        },
+        // 包材输入框
+        materials:{
+          value:'',
+          focus:false,
+          list:[]
+        },
+        data:{}
+      },
+
+      // 重新复核
+      repeatPopup:{
+        show: false,
+        container:{
+          value: '',
+          focus: false
+        }
+      },
+
+      // 追加
+      addPopup:{
+        show: false,
+        container:{
+          value: '',
+          focus: false
+        },
+        data:{}
+      },
+
+      // 剔除商品
+      delSkuPopup:{
+        show: false,
+        // 是否需要扫描sn
+        isSn: false,
+        // 商品号
+        sku: {
+          value: '',
+          focus: false
+        },
+        // 序列号
+        sn: {
+          value: '',
+          focus: false
+        },
+        // 数量
+        qty: {
+          value: '',
+          focus: false
+        },
+        // 剔除容器号
+        container: {
+          value: '',
+          focus: false
+        },
+        data:{}
+      },
+
+      // 是否全部拦截
+      allBlockShow: true,
+
+      // 部分拦截弹框
+      partBlockPopup:{
+        show: false,
+        data:{
+          pickContainer:'',
+          skuTypeCount:'',
+          skuQty:'',
+          blockData:{}
+        }
+      },
+    }
+  },
+  computed:{
+    // 底部按钮
+    btnList(){
+      return [
+        {
+          text: this.$lwLanguage.get('','完成复核(封箱)'),
+          click: this.overBaleOpen
+        },
+        {
+          text: this.$lwLanguage.get('','重新复核'),
+          click: this.repeatOpen
+        },
+        {
+          text: this.$lwLanguage.get('','剔除商品'),
+          click: this.delSkuOpen
+        },
+        {
+          text: this.$lwLanguage.get('','追加'),
+          click: this.addSkuOpen
+        }
+      ]
+
+      // 是否显示追加商品按钮
+      /*if (this.showAddBtn){
+        list.push({
+          text: this.$lwLanguage.get('','追加'),
+          click: this.addSkuOpen
+        })
+      }*/
+
+      // return list
+    }
+  },
+  mounted() {
+    const query = this.$route.query
+    if (query.lwType === 'allCheck'){
+      this.fromAllCheck = true
+      this.allowAllCheck = false
+
+      projectWmsContainerWholePack({
+        pickContainer: query.lwContainer
+      }).then(res=>{
+        this.checkBlock(res)
+
+        this.checkData = res
+      })
+      return
+    }
+
+    this.getData()
+  },
+  methods: {
+    // 获取数据
+    getData(){
+      return new Promise((PR,PE)=>{
+
+        projectWmsMixPackQueryPackData({
+          queryContainer: this.$route.query.lwContainer
+        }).then(res=>{
+
+          if (res.containerData.blockStatus === '200') this.allBlockShow = true
+
+          this.checkData = res
+
+          PR()
+        }).catch(()=>{
+          PE()
+          history.go(-1)
+        })
+      })
+    },
+
+    // 开始复核 - 商品号确认
+    actionCheckSkuConfirm(val,{data}){
+
+      if (
+        Object.keys(this.actionCheck.skuInfo).length &&
+        data.key !== this.actionCheck.skuInfo.skuCode
+      ){
+        this.actionCheck.sku.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get(
+            '',
+            '当前扫描商品与上一次扫描商品不一致！如需更换商品，请完成上次商品复核或点击重新扫描按钮')
+        )
+        return
+      }
+
+      for (let i of this.checkData.containerData.packSkuList){
+
+        if (i.skuCode === data.key){
+
+          this.actionCheck.skuInfo = {
+            ...i,
+            waitQty: i.totalQty - i.packQty
+          }
+
+          if(i.needHandleSn){
+            this.checkPopup.show = true
+            this.checkPopup.sn.focus = true
+            this.getCheckPopupNum()
+          }else {
+            this.actionCheck.qty.value += Number(data.qty || 0)
+
+            if (this.actionCheck.qty.value === this.actionCheck.skuInfo.waitQty){
+              this.actionCheckQtyConfirm()
+            }
+          }
+          return
+        }
+
+      }
+
+      this.actionCheck.sku.focus = true
+      this.$lwShowErrorMsg(
+        this.$lwLanguage.get('','当前商品不在拣选容器中')
+      )
+      this.actionCheck.sku.value = ''
+
+    },
+    // 开始复核 - 商品数量确认
+    actionCheckQtyConfirm(){
+
+      const qty = Number(this.actionCheck.qty.value ||0)
+
+      if (!qty){
+        this.actionCheck.qty.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','复核数不能为空，且应当是大于0的整数')
+        )
+        return
+      }
+
+      if (qty > this.actionCheck.skuInfo.waitQty){
+        this.actionCheck.qty.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','复核数不能大于待复核数')
+        )
+        return
+      }
+
+
+      projectWmsMixPackSubmitSku({
+        boxId: this.checkData.containerData.boxId,
+        pickContainer: this.checkData.containerData.pickContainer,
+        skuId: this.actionCheck.skuInfo.skuId,
+        currentPackQty: qty
+      }).then(res=>{
+
+        this.checkData = res
+
+        if (res.containerPackFinish){
+          this.$lwToast.success(
+            this.$lwLanguage.get('','当前容器已复核完毕')
+          )
+
+          this.overBaleOpen()
+
+        }
+
+        this.actionCheck.sku.value = ''
+        this.actionCheck.sku.focus = true
+        this.actionCheck.qty.focus = ''
+        this.actionCheck.skuInfo = {}
+
+        this.checkBlock(res)
+      })
+    },
+
+    // 复核序列号 - 当前复核量
+    getCheckPopupNum(){
+      let num = 0
+      this.checkPopup.snList.forEach(item=>{
+        num += Number(item.qty || 0)
+      })
+      this.checkPopup.nowScanNum = num
+
+      if (num === this.actionCheck.skuInfo.waitQty){
+        this.checkPopupSubmit()
+      }
+
+    },
+    // 复核序列号 - 确认
+    checkPopupSnConfirm(val,{data}){
+      const sn = data.key
+      if (!sn){
+        this.checkPopup.sn.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','序列号不能为空')
+        )
+        return
+      }
+
+      projectWmsMixPackCheckSn({
+        pickContainer:'',
+        skuId: this.actionCheck.skuInfo.skuId,
+        sn,
+        qty: data.qty || 0
+      }).then(res=>{
+        this.checkPopup.snList.unshift(res)
+        this.getCheckPopupNum()
+      })
+    },
+    // 复核序列号 - 删除
+    checkPopupSnDel(index){
+
+      this.checkPopup.snList.splice(index, 1)
+      this.getCheckPopupNum()
+
+    },
+    // 复核序列号 - 提交数据
+    checkPopupSubmit(){
+
+      const snList = this.checkPopup.snList
+      if (!snList.length){
+        this.checkPopup.sn.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','请输入或扫描需要复核的序列号')
+        )
+        return
+      }
+
+      projectWmsMixPackSubmitWithSn({
+        boxId: this.checkData.containerData.boxId,
+        pickContainer: this.checkData.containerData.pickContainer,
+        skuId: this.actionCheck.skuInfo.skuId,
+        snList
+      }).then(res=>{
+        this.checkData = res
+
+        if (res.containerPackFinish){
+          this.$lwToast.success(
+            this.$lwLanguage.get('','当前容器已复核完毕')
+          )
+
+          this.overBaleOpen()
+        }
+
+        this.checkPopup.show = false
+
+        this.checkBlock(res)
+      })
+    },
+    // 复核序列号 - 重新扫描
+    checkPopupRepeatScan(){
+      this.$dialog.confirm({
+        title: this.$lwLanguage.get('','警告'),
+        message: this.$lwLanguage.get('','当前扫描数据将会被清空')
+      }).then(()=>{
+        this.checkPopup.sn = ''
+        this.snList = []
+        this.getCheckPopupNum()
+      }).catch(()=>{})
+    },
+    // 复核序列号 - 弹框关闭
+    checkPopupOff(){
+      this.checkPopup.sn = ''
+      this.snList = []
+      this.actionCheck.sku.value = ''
+      this.actionCheck.skuInfo = {}
+    },
+
+
+    // 完成捆包 - 打开弹框
+    overBaleOpen(){
+      projectWmsMixPackComputeBoxSuggest({
+        boxId: this.checkData.boxData.boxId
+      }).then(res=>{
+        this.overBalePopup.data = res
+        this.overBalePopup.show = true
+        this.overBalePopup.real.focus = true
+      })
+    },
+    // 完成捆包 - 实际重量确认
+    realConfirm(){
+      if (this.realCheck()) this.overBalePopup.materials.focus = true
+    },
+    // 完成捆包 - 实际重量校验
+    realCheck(){
+      const num = Number(this.overBalePopup.real.value || 0)
+
+      if (!num) return true
+
+      const data = this.overBalePopup.data
+      if (data.weightFloor > num){
+        this.overBalePopup.real.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','实际重量不能低于标准重量下限') + ':' + data.weightFloor
+        )
+        return false
+      }
+      if (data.weightLimit < num){
+        this.overBalePopup.real.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','实际重量不能大于标准重量上限') + ':' + data.weightLimit
+        )
+        return false
+      }
+
+      return true
+    },
+    // 完成捆包 - 包材确认
+    materialsConfirm(){
+      const materials = this.overBalePopup.materials.value
+      if (!materials){
+        this.overBalePopup.materials.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','捆包包材不能为空')
+        )
+        return
+      }
+
+
+      projectWmsOutbondQueryPackMaterial({
+        packMaterialCode: materials
+      }).then(res=>{
+        this.overBalePopup.materials.list.unshift(res)
+      })
+    },
+    // 完成捆包 - 删除包材
+    delMaterials(index){
+      this.overBalePopup.materials.list.splice(index, 1)
+    },
+    // 完成捆包 - 封箱
+    overBaleConfirm(){
+      if (!this.realCheck()) return
+
+      // 通过包材长度判断是否是有包材还是无包材封箱
+      const list = this.overBalePopup.materials.list
+
+      // 获取每一个包材的使用量
+      let obj = {}
+      list.forEach(item=>{
+        if (obj[item.packMaterialId]){
+          obj[item.packMaterialId] = obj[item.packMaterialId] + 1
+        }else {
+          obj[item.packMaterialId] = 1
+        }
+      })
+      let packMaterialList = []
+      for (let i in obj){
+        packMaterialList.push({
+          packMaterialId: i,
+          qty: obj[i]
+        })
+      }
+
+      projectWmsMixPackCloseBox({
+        boxId: this.boxId,
+        packWeight: this.overBalePopup.real.value || this.overBalePopup.data.standardWeight,
+        packMaterialList
+      }).then(()=>{
+        this.$lwToast.success(
+          this.$lwLanguage.get('','捆包成功')
+        )
+        history.go(-1)
+      })
+
+    },
+    // 完成捆包 - 弹框关闭
+    overBaleOff(){
+      this.overBalePopup.materials.value = ''
+      this.overBalePopup.materials.list = []
+      this.overBalePopup.real.value = ''
+      this.overBalePopup.data = {}
+    },
+
+    // 重新复核 - 打开弹框
+    repeatOpen(){
+      this.repeatPopup.show = true
+      this.repeatPopup.container.focus = true
+    },
+    // 重新复核 - 确认
+    repeatConfirm(){
+      const container = this.repeatPopup.container.value
+      if (!container){
+        this.repeatPopup.container.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','商品撤回容器号不能为空')
+        )
+        return
+      }
+
+      projectWmsMixPackRePack({
+        boxId: this.checkData.boxData.boxId,
+        toPickContainer: container
+      }).then(()=>{
+        this.$lwToast.success(
+          this.$lwLanguage.get('','操作成功')
+        )
+        history.go(-1)
+      })
+    },
+
+    // 追加 - 弹框打开
+    addSkuOpen(){
+      this.addPopup.container.focus = true
+      this.addPopup.show = true
+    },
+    // 追加 - 确认拣选容器号
+    addContainerConfirm(){
+      const container = this.addPopup.container.value
+      if (!container){
+        this.addPopup.container.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','拣选容器号不能为空')
+        )
+        return
+      }
+
+      projectWmsMixPackAddContainerCheck({
+        boxId: this.checkData.boxData.boxId,
+        addPickContainer: container
+      }).then(res=>{
+        this.addPopup.data = res
+      })
+    },
+    // 追加 - 确认追加
+    addConfirm(){
+      this.checkData.containerData = this.$lwDeepCopy(this.addPopup.data)
+      this.addPopup.show = false
+    },
+    // 追加 - 弹框关闭
+    addPopupOff(){
+      this.addPopup.container.value = ''
+      this.addPopup.data = {}
+    },
+
+    // 剔除商品 - 打开弹框
+    delSkuOpen(){
+      this.delSkuPopup.show = true
+      this.delSkuPopup.sku.focus = true
+    },
+    // 剔除商品 - 商品号确认
+    delSkuSkuCodeConfirm(val, {data}){
+
+      for (let i of this.checkData.boxData.skuList) {
+        if (i.skuCode === data.key){
+          this.delSkuPopup.data = i
+
+          // 判断是否需要sn
+          if (i.needHandleSn){
+            this.delSkuPopup.isSn = true
+
+            // 看看条码是否解析出了sn
+            if (data.sn){
+              this.delSkuPopup.sn.value = data.sn
+              this.delSkuSnConfirm(data.sn,{data:{key:data.sn}})
+            }else {
+              this.delSkuPopup.sn.focus = ''
+            }
+
+          }else {
+            this.delSkuPopup.isSn = false
+            this.delSkuPopup.qty.focus = true
+          }
+          return
+        }
+      }
+
+
+      this.delSkuPopup.sku.focus = true
+      this.$lwShowErrorMsg(
+        this.$lwLanguage.get('','当前商品不在捆包箱中')
+      )
+      this.delSkuPopup.sku.value = ''
+    },
+    // 剔除商品 - 序列号确认
+    delSkuSnConfirm(val, {data}){
+
+      for (let i of this.checkData.boxData.packSnList) {
+        if (i.sn === data.key){
+          this.delSkuPopup.qty.value = i.qty
+          this.delSkuQtyConfirm()
+          return
+        }
+      }
+
+      this.delSkuPopup.sn.focus = true
+      this.$lwShowErrorMsg(
+        this.$lwLanguage.get('','当前商品序列号不在捆包箱中')
+      )
+      this.delSkuPopup.sn.value = ''
+
+    },
+    // 剔除商品 - 剔除数量确认
+    delSkuQtyConfirm(){
+      if(this.delSkuQtyCheck()) this.delSkuPopup.container.focus = true
+    },
+    // 剔除商品 - 剔除数量校验
+    delSkuQtyCheck(){
+      const qty = Number(this.delSkuPopup.qty.value || 0)
+
+      if(!qty){
+        this.delSkuPopup.qty.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','剔除数量不能为空，且应当是大于0的整数')
+        )
+        return false
+      }
+
+      if (qty%this.delSkuPopup.data.minSellQty !== 0){
+        this.delSkuPopup.qty.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','剔除数量必须是最小销售数的整数倍')
+        )
+        this.delSkuPopup.qty.value = ''
+        return false
+      }
+
+      return true
+
+    },
+    // 剔除商品 - 确认剔除
+    delSkuConfirm(){
+      const data = this.delSkuPopup
+      const container = data.container.value
+
+      if (!container){
+        this.delSkuPopup.container.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','剔除容器号不能为空')
+        )
+        return
+      }
+
+      // 判断当前是需要sn还是不需要
+      const fn = this.delSkuPopup.isSn ?
+        projectWmsMixPackDeleteSkuWithSn :
+        projectWmsMixPackDeleteSku
+
+      fn({
+        boxId: this.checkData.boxData.boxId,
+        deleteToContainer: container,
+        skuId: data.data.skuId,
+        // 按唯一号剔除需要
+        snList:[{sn: data.sn.value, qty: data.qty.value}],
+        // 按商品剔除需要
+        currentDeleteQty: data.qty.value
+      }).then(res=>{
+        if (res.boxDelAll){
+          this.$lwToast.success(
+            this.$lwLanguage.get('','当前箱已全部剔除')
+          )
+          history.go(-1)
+          return
+        }
+
+        this.$lwToast.success(
+          this.$lwLanguage.get('','剔除成功')
+        )
+        this.getData()
+        this.delSkuPopup.show = false
+      })
+    },
+    // 剔除商品 - 弹框关闭
+    delSkuOff(){
+      this.delSkuPopup.sku.value = ''
+      this.delSkuPopup.sn.value = ''
+      this.delSkuPopup.qty.value = ''
+      this.delSkuPopup.container.value = ''
+      this.delSkuPopup.isSn = false
+      this.delSkuPopup.data = {}
+    },
+
+    // 校验是否拦截
+    checkBlock(res){
+      if (res.containerBlockData.blockStatus === '200') this.allBlockShow = true
+      if (res.containerBlockData.blockStatus === '100') {
+        this.partBlockPopup.data={
+          pickContainer: res.containerData.pickContainer,
+          skuTypeCount:res.containerData.skuTypeCount,
+          skuQty:res.containerData.packQty,
+          blockData:res.containerBlockData.blockSkuList[0]
+        }
+      }
+    },
+    // 全部拦截
+    allBlockConfirm(){
+      projectWmsMixPackContainerWholeBlock({
+        pickContainer: this.checkData.containerData.pickContainer
+      }).then(()=>{
+        this.$lwToast.success(
+          this.$lwLanguage.get('','已拦截')
+        )
+        history.go(-1)
+      })
+    },
+    // 部分拦截
+    async partBlockConfirm(data){
+
+      const res = await projectWmsMixPackContainerSkuBlock({
+        pickContainer: data.container,
+        currentBlockQty: data.qty,
+        skuId: ''
+      })
+
+      await this.getData()
+
+      if (res.containerPackFinish){
+        this.$lwToast.success(
+          this.$lwLanguage.get('','当前容器已全部捆包')
+        )
+        this.overBaleOpen()
+      }
+    },
+
+    // 异常确认
+    abnConfirm(data){
+      return projectWmsMixPackSubmitAbnormal({
+        pickContainer: this.checkData.containerData.pickContainer,
+        ...data
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.materials-box{
+  margin-top: 5px;
+  padding: 0 5px;
+  border-radius: 5px;
+  border: solid 1px #f0f0f0;
+}
+
+.col-1{
+  width: 35%;
+  flex-shrink: 0;
+}
+.col-2{
+  width: 55%;
+  flex-shrink: 0;
+}
+.col-3{
+  width: 24px;
+  flex-shrink: 0;
+}
+</style>