@logwire/logwire-wms-pda-ui 1.1.15

package/src/components/page/outbound/bale/components/mainPage/index.vue

@@ -0,0 +1,553 @@
+<!--
+  页面外框组件
+  @author: 张文
+  @date: 2022-06-30
+-->
+<template>
+  <div>
+
+    <lw-nav-bar :title="title"/>
+
+    <div class="lw-global-page-box">
+
+      <slot></slot>
+
+    </div>
+
+    <lw-bottom-bar-btn-hidden
+      v-if="showBottomBtn"
+      :btn-list="btnList"
+    />
+
+    <!-- 完成捆包弹框 -->
+    <lw-popup
+      :title="$lwLanguage.get('','完成捆包')"
+      v-model="overBalePopup.show"
+      @closed="overBaleOff"
+    >
+      <container-sku-qty/>
+
+      <lw-title-value-cell
+        :title="$lwLanguage.get('','标准重量') + '(KG)'"
+        value="10"
+        val-bold
+      />
+
+      <lw-input
+        :title="$lwLanguage.get('','实际重量') + '(KG)'"
+        v-model="overBalePopup.real.value"
+        :get-focus.sync="overBalePopup.real.focus"
+        type="number"
+        required
+        @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.code }}</div>
+
+            <div class="lw-global-value-bold col-2">{{ i.a }}</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/>
+
+      <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="addPopup.container.value=''"
+    >
+
+      <container-sku-qty/>
+
+      <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="2"
+          val-bold
+          :is-row="false"
+        />
+
+        <lw-title-value-cell
+          :title="$lwLanguage.get('','待复核')"
+          value="20"
+          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/>
+
+      <!-- 序列号 -->
+      <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
+        v-else
+        :title="$lwLanguage.get('','商品条码')"
+        v-model="delSkuPopup.sku.value"
+        :get-focus.sync="delSkuPopup.sku.focus"
+        required
+        rule-key="delSkuCode"
+        rule-value-key="skuCode"
+        @confirm="delSkuSkuCodeConfirm"
+      />
+
+      <!-- 剔除数量 -->
+      <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.qty"
+        :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>
+
+  </div>
+</template>
+
+<script>
+import containerSkuQty from './../containerSkuQty/index.vue'
+
+export default {
+  name: "mainPage",
+  components:{
+    containerSkuQty
+  },
+  props:{
+    // 标题
+    title: String,
+
+    // 是否显示底部按钮
+    showBottomBtn:{
+      type: Boolean,
+      default: true
+    },
+
+    // 是否显示剔除按钮
+    showDelBtn: Boolean,
+
+    // 是否显示追加按钮
+    showAddBtn: Boolean
+  },
+  computed:{
+    // 底部按钮
+    btnList(){
+      let list=[
+        {
+          text: this.$lwLanguage.get('','完成复核(封箱)'),
+          click: this.overBaleOpen
+        },
+        {
+          text: this.$lwLanguage.get('','重新复核'),
+          click: this.repeatOpen
+        },
+      ]
+
+      // 是否显示剔除商品按钮
+      if (this.showDelBtn){
+        list.push({
+          text: this.$lwLanguage.get('','剔除商品'),
+          click: this.delSkuOpen
+        })
+      }
+
+      // 是否显示追加商品按钮
+      if (this.showAddBtn){
+        list.push({
+          text: this.$lwLanguage.get('','追加'),
+          click: this.addSkuOpen
+        })
+      }
+
+      return list
+    }
+  },
+  data() {
+    return {
+      // 完成捆包弹框
+      overBalePopup:{
+        show: false,
+        // 实际重量
+        real:{
+          value: '',
+          focus: false
+        },
+        // 包材输入框
+        materials:{
+          value:'',
+          focus:false,
+          list:[]
+        }
+      },
+
+      // 重新复核
+      repeatPopup:{
+        show: false,
+        container:{
+          value: '',
+          focus: false
+        }
+      },
+
+      // 追加
+      addPopup:{
+        show: false,
+        container:{
+          value: '',
+          focus: false
+        },
+        data:{a:1}
+      },
+
+      // 剔除商品
+      delSkuPopup:{
+        show: false,
+        // 是否需要扫描sn
+        isSn: false,
+        // 商品号
+        sku: {
+          value: '',
+          focus: false
+        },
+        // 序列号
+        sn: {
+          value: '',
+          focus: false
+        },
+        // 数量
+        qty: {
+          value: '',
+          focus: false
+        },
+        // 剔除容器号
+        container: {
+          value: '',
+          focus: false
+        },
+        data:{
+          skuCode:'LJ-001',
+          skuName:'零件001',
+          qty:12
+        }
+      }
+    }
+  },
+  methods: {
+    // 完成捆包 - 打开弹框
+    overBaleOpen(){
+      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
+
+      this.overBalePopup.real.focus = true
+      this.$lwShowErrorMsg(
+        this.$lwLanguage.get('','实际重量不能为空，且应当是大于0的数字')
+      )
+      return false
+    },
+    // 完成捆包 - 包材确认
+    materialsConfirm(){
+      if (!this.overBalePopup.materials.value){
+        this.overBalePopup.materials.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','捆包包材不能为空')
+        )
+        return
+      }
+
+      console.log(123)
+    },
+    // 完成捆包 - 删除包材
+    delMaterials(index){
+      this.overBalePopup.materials.list.splice(index, 1)
+    },
+    // 完成捆包 - 封箱
+    overBaleConfirm(){
+      if (!this.realCheck()) return
+      const list = this.overBalePopup.materials.list
+
+      console.log(list)
+    },
+    // 完成捆包 - 弹框关闭
+    overBaleOff(){
+      this.overBalePopup.materials.value = ''
+      this.overBalePopup.materials.list = []
+      this.overBalePopup.real.value = ''
+    },
+
+    // 重新复核 - 打开弹框
+    repeatOpen(){
+      this.repeatPopup.show = true
+      this.repeatPopup.container.focus = true
+    },
+    // 重新复核 - 确认
+    repeatConfirm(){
+      if (!this.repeatPopup.container.value){
+        this.repeatPopup.container.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','商品撤回容器号不能为空')
+        )
+        return
+      }
+
+      console.log(1234)
+    },
+
+    // 追加 - 弹框打开
+    addSkuOpen(){
+      this.addPopup.container.focus = true
+      this.addPopup.show = true
+    },
+    // 追加 - 确认拣选容器号
+    addContainerConfirm(){
+      if (!this.addPopup.container.value){
+        this.addPopup.container.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','拣选容器号不能为空')
+        )
+        return
+      }
+
+      console.log(1234)
+    },
+    // 追加 - 确认追加
+    addConfirm(){
+
+    },
+
+    // 剔除商品 - 打开弹框
+    delSkuOpen(){
+      this.delSkuPopup.show = true
+      this.delSkuPopup.isSn = true
+
+      this.delSkuPopup.isSn ?
+      this.delSkuPopup.sn.focus = true :
+      this.delSkuPopup.sku.focus = true
+    },
+    // 剔除商品 - 序列号确认
+    delSkuSnConfirm(val, data){
+      console.log(data)
+    },
+    // 剔除商品 - 商品号确认
+    delSkuSkuCodeConfirm(val, data){
+      console.log(data)
+    },
+    // 剔除商品 - 剔除数量确认
+    delSkuQtyConfirm(){
+
+    },
+    // 剔除商品 - 确认剔除
+    delSkuConfirm(){
+
+    },
+    // 剔除商品 - 弹框关闭
+    delSkuOff(){
+      this.delSkuPopup.sku.value = ''
+      this.delSkuPopup.sn.value = ''
+      this.delSkuPopup.qty.value = ''
+      this.delSkuPopup.container.value = ''
+    }
+  }
+}
+</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>