@logwire/logwire-wms-pda-ui 3.3.4 → 3.5.0

package/src/views/wms/components/consoleAndPick/createOrderPage.vue

@@ -0,0 +1,781 @@
+<!--
+  指定整托拣选、拣选控制台 - 创建订单页
+  @author: 张文
+  @date: 2023-06-05
+-->
+<template>
+  <div>
+
+    <lw-nav-bar :title="navTitle"/>
+
+    <div
+      v-if="initOver"
+      class="lw-global-page-box"
+    >
+
+      <div class="lw-global-model-box lw-global-model-box-3px">
+
+        <lw-search-select-popup-module
+          ref="owner"
+          :api="$lwApi.common.searchOwner"
+          :title="$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.yuhjuoyu','货主')"
+          :get-focus.sync="owner.focus"
+          v-model="owner.id"
+          :create-rule="$lwScanRule.create('指定整托拣选-创建出库单-货主','OWNER')"
+          rule-key="owner"
+          required
+          input-align="right"
+          :disabled="inputDisabled || !!skuList.pageTotal || !!customer.id"
+          :show-border="!!owner.id"
+          @confirm="item=>ownerCustomerPopupConfirm('owner',item)"
+          @clear="ownerCustomerPopupClear('owner')"
+        />
+
+        <template v-if="owner.id">
+
+          <lw-search-select-popup-module
+            ref="customer"
+            :api="getCustomerData"
+            :title="$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.gdizxsnv','客户')"
+            v-model="customer.id"
+            :get-focus.sync="customer.focus"
+            :create-rule="$lwScanRule.create('指定整托拣选-创建出库单-客户','CUSTOMER')"
+            rule-key="customer"
+            required
+            input-align="right"
+            @confirm="item=>ownerCustomerPopupConfirm('customer',item)"
+            @clear="ownerCustomerPopupClear('customer')"
+          />
+
+          <lw-cell-popup-radio
+            :title="$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.doxdxscl','订单类型')"
+            v-model="type"
+            dict-key="OutboundPlanOrderType"
+            required
+
+          />
+
+          <lw-cell-popup-date
+            :title="$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.sikueuiv','计划出库时间')"
+            v-model="planTime"
+            type="datetime"
+          />
+
+          <lw-input
+            :title="$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.eodxrrmz','外部单号')"
+            v-model="extSoNo"
+            :create-rule="$lwScanRule.create('指定整托拣选-创建出库单-外部单号','ASN')"
+            rule-key="extSoNo"
+            required
+            input-align="right"
+            @confirm="extSoNoConfirm"
+          />
+
+          <lw-cell-popup-radio
+            v-if="showBackCell"
+            :title="$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.xftskuiu','退货方式')"
+            v-model="back.value"
+            dict-key="OutboundReturnMethod"
+          />
+
+          <lw-input
+            :title="$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.lxhzbtsv','备注')"
+            v-model="remark"
+            :show-bottom-border="false"
+            input-align="right"
+            type="textarea"
+            :rows="4"
+          />
+        </template>
+
+      </div>
+
+      <lw-tab-box
+        v-if="soId"
+        style="margin-top: 10px"
+        @change="tabChange"
+      >
+        <van-tabs
+          type="card"
+          animated
+          v-model="tabActive"
+        >
+
+          <van-tab
+            name="add"
+            :title="$lwLanguage.get('', '添加商品')"
+          >
+          </van-tab>
+
+
+          <van-tab
+            name="list"
+            :title="$lwLanguage.get('', '商品列表')"
+          >
+
+            <div
+              v-for="(i,k) in skuList.data"
+              :key="k"
+              class="lw-global-model-box"
+            >
+              <lw-sku-info-module
+                :sku-name="i.skuName"
+                :sku-code="i.skuCode"
+              >
+
+                <van-icon
+                  size="18px"
+                  name="edit"
+                  color="rgb(0, 68, 208)"
+                  @click="skuListEdit(i)"
+                />
+              </lw-sku-info-module>
+
+              <div class="lw-global-flex-between">
+
+                <lw-title-value-cell
+                  style="flex: 1"
+                  :title="$lwLanguage.get('', '计划')"
+                  :value="i.skuQtyLabel"
+                  :is-row="false"
+                  val-red
+                  val-bold
+                />
+
+
+                <van-icon
+                  style="flex-shrink: 0"
+                  size="18px"
+                  color="#d50000"
+                  name="delete-o"
+                  @click="skuListDel(i)"
+                />
+              </div>
+
+            </div>
+            <lw-pagination
+              v-model="skuList.pageNum"
+              :page-total="skuList.pageTotal"
+              :page-size.sync="skuList.pageSize"
+              @change="getSkuListData"
+            />
+            <lw-not-data v-if="!skuList.pageTotal"/>
+
+          </van-tab>
+        </van-tabs>
+      </lw-tab-box>
+
+      <template v-if="tabActive === 'add' && owner.id">
+
+        <div
+          style="padding-bottom: 3px"
+          class="lw-global-model-box"
+          v-for="(i,k) in addSkuList"
+          :key="k"
+        >
+
+          <div class="lw-global-flex-between lw-global-row-start">
+
+            <div class="lw-global-value-bold">
+              {{
+                $lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.pfsfpqla', '商品') + (k + 1)
+              }}
+            </div>
+
+            <van-icon
+              name="delete"
+              size="18"
+              color="#d50000"
+              @click="delSku(k)"
+            />
+          </div>
+          <lw-search-select-popup-module
+            :title="$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.grrwqosq','商品编码')"
+            :get-focus.sync="i.skuFocus"
+            :create-rule="$lwScanRule.create('指定整托拣选-创建出库单-商品编码','SKU')"
+            rule-key="skuCode"
+            required
+            show-bottom-border
+            :owner-id="owner.id"
+            :api="skuCodeConfirm"
+            @confirm="item=>selectPopupConfirm(item,k)"
+            @clear="selectPopupClear(k)"
+          />
+
+          <template v-if="i.showQty">
+            <lw-title-value-cell
+              :title="$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.lbbzndee','可用库存数')"
+              :value="$lwCheckVal(i.abQty)"
+              val-bold
+            />
+            <lw-get-qty-by-type
+              :ref="i.qtyRef"
+              :title="$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.zrrojbff','出库数量')"
+              :sku-id="i.skuId"
+              :show-bottom-border="false"
+              init-focus
+            />
+
+          </template>
+
+        </div>
+
+        <div
+          style="margin: 20px 0"
+          class="lw-global-flex-center"
+        >
+          <van-icon
+            size="30px"
+            name="add"
+            color="#D50000"
+            @click="addSku"
+          />
+        </div>
+      </template>
+
+
+    </div>
+
+    <lw-bottom-bar v-if="owner.id">
+
+      <lw-button
+        v-if="soId"
+        type="last"
+        @click="actionPick"
+      >
+        {{ $lwLanguage.get('', '执行拣选') }}
+      </lw-button>
+
+      <lw-button
+        v-if="tabActive==='add'"
+        @click="confirmCreate"
+      >
+        {{ $lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.ohrkeshv', '保存') }}
+      </lw-button>
+
+    </lw-bottom-bar>
+
+    <!-- 商品编辑弹框 -->
+    <lw-popup
+      :title="$lwLanguage.get('', '编辑商品')"
+      v-model="editPopup.show"
+    >
+
+      <lw-search-select-popup-module
+        ref="editSku"
+        v-model="editPopup.skuId"
+        :title="$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.grrwqosq','商品编码')"
+        :get-focus.sync="editPopup.skuFocus"
+        :create-rule="$lwScanRule.create('指定整托拣选-创建出库单-商品编码','SKU')"
+        rule-key="skuCode"
+        required
+        show-bottom-border
+        :owner-id="owner.id"
+        :api="skuCodeConfirm"
+        @confirm="editPopupSkuConfirm"
+        @clear="editPopupSkuClear"
+      />
+      <lw-title-value-cell
+        :title="$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.lbbzndee','可用库存数')"
+        :value="$lwCheckVal(editPopup.abQty)"
+        val-bold
+      />
+      <lw-get-qty-by-type
+        v-if="editPopup.showQty"
+        :title="$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.zrrojbff','出库数量')"
+        ref="editPopupQty"
+        :sku-id="editPopup.skuId"
+        :init-qty="editPopup.qty"
+        init-focus
+      />
+
+      <template #button>
+
+        <lw-button @click="editPopupConfirm">
+          {{ $lwLanguage.get('', '保存') }}
+        </lw-button>
+
+      </template>
+
+    </lw-popup>
+
+
+  </div>
+</template>
+
+<script>
+
+import {
+  projectWmsOutboundPDAGetReturnTypes,
+  projectWmsOutboundPDAQuerySkuInvAbQty,
+  projectWmsOutboundPDASoCreate, projectWmsOutboundPDASoQueryLinePage,
+  projectWmsOutboundPDASoQueryUpdateInfo,
+  projectWmsOutboundPDASoSubmitUpdateInfo, wmsMobileQueryCompanyList,
+} from "../../api/outbound/pickConsole/orderPick";
+
+export default {
+  name: "lwOutboundAssignLpnPickCreateOrder",
+  props: {
+    // 执行任务的路径
+    actionPath: String,
+  },
+  data() {
+    return {
+
+      // 初始化结束标识
+      initOver: false,
+
+      // 出库单id
+      soId: '',
+      tabActive: 'add',
+
+      // 增加的商品列表
+      addSkuList: [],
+      // 商品列表
+      skuList: {
+        pageNum: 1,
+        pageSize: 10,
+        pageTotal: 0,
+        data: []
+      },
+
+      // 编辑商品弹框
+      editPopup: {
+        show: false,
+        skuId: '',
+        soLineId: '',
+        skuFocus: false,
+        skuInitData: {},
+        abQty: '',
+        qty: '',
+        showQty: false,
+      },
+
+      navTitle: '',
+
+      owner: {
+        focus: true,
+        code: '',
+        name: '',
+        id: '',
+      },
+      customer: {
+        focus: false,
+        code: '',
+        name: '',
+        id: '',
+      },
+      type: '',
+      planTime: '',
+      extSoNo: '',
+      remark: '',
+
+      // 退货
+      back: {
+        value: '',
+        list: []
+      },
+
+
+    }
+  },
+  computed: {
+    inputDisabled() {
+      return this.addSkuList.some(item => item.skuCode)
+    },
+    // 是否显示退货方式
+    showBackCell() {
+      return this.back.list.includes(this.type)
+    }
+  },
+  created() {
+    this.soId = this.$route.query.soId || ''
+    this.init()
+  },
+  methods: {
+    // 初始化
+    async init() {
+      projectWmsOutboundPDAGetReturnTypes().then(res => this.back.list = res || [])
+
+      if (this.soId) {
+        await this.getEditData()
+      } else {
+        this.navTitle = this.$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.fwkkyudh', '创建出库订单')
+      }
+      this.initOver = true
+
+      this.$nextTick(() => {
+        if (this.$route.query.soId) {
+          this.$refs.owner.initEchoData(true)
+          this.$refs.customer.formatDataAndDisabled({
+            code: this.customer.code,
+            name: this.customer.name,
+          })
+        }
+      })
+    },
+
+    // 获取客户数据
+    getCustomerData(data) {
+      return wmsMobileQueryCompanyList({
+        ...data,
+        ownerId: this.owner.id
+      })
+    },
+
+    // 获取编辑数据
+    async getEditData() {
+      this.navTitle = this.$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.ztrauljn', '修改出库订单')
+
+      try {
+        const res = await projectWmsOutboundPDASoQueryUpdateInfo({
+          soId: this.soId
+        })
+
+        this.owner.code = res.ownerCode
+        this.owner.name = res.ownerName
+        this.owner.id = res.ownerId
+        this.owner.focus = false
+
+        this.customer.code = res.customerCode
+        this.customer.name = res.customerName
+        this.customer.id = res.customerId
+
+
+        this.type = res.type
+        this.planTime = res.planShipTime
+        this.extSoNo = res.extSoNo
+        this.remark = res.remark
+        this.back.value = res.returnMethod
+        this.getSkuListData()
+      } catch {
+        history.go(-1)
+      }
+    },
+
+
+    // 校验单头数据是否填写完整
+    checkOrderInfo() {
+
+      if (!this.owner.id) {
+        this.owner.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.aofuajos', '请选择货主')
+        )
+        return false
+      }
+      if (!this.customer.code) {
+        this.customer.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.irsfctlr', '请选择客户')
+        )
+        return false
+      }
+      const msg = {
+        type: this.$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.xdqoumzx', '请选择订单类型'),
+        extSoNo: this.$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.jgzswggr', '请输入外部单号'),
+      }
+
+      for (const i in msg) {
+        if (!this[i]) {
+          this.$lwShowErrorMsg(msg[i])
+          return false
+        }
+      }
+
+      return true
+
+    },
+
+    // 货主、客户 - 选择弹框 - 确认
+    ownerCustomerPopupConfirm(type, item) {
+      this[type].code = item.code
+      this[type].id = item.id
+      this[type].name = item.name
+
+      if (type === 'owner') {
+        this.customer.focus = true
+        !this.addSkuList.length && this.addSku()
+      }
+
+    },
+    // 货主、客户 - 选择弹框 - 清空
+    ownerCustomerPopupClear(type) {
+      this[type].code = ''
+      this[type].name = ''
+      this[type].id = ''
+
+      if (type === 'owner') {
+        this.customer.id = ''
+        this.type = ''
+        this.planTime = ''
+        this.extSoNo = ''
+        this.remark = ''
+        this.addSkuList = []
+      }
+    },
+    // 外部单号输入确认
+    extSoNoConfirm() {
+      if (this.addSkuList.length) {
+        const firstSku = this.addSkuList[0]
+        if (firstSku.skuCode) {
+          firstSku.qtyFocus = true
+        } else {
+          firstSku.skuFocus = true
+        }
+      }
+    },
+
+
+    // 增加商品
+    async addSku() {
+
+      if (!this.owner.id) {
+        this.owner.focus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.aofuajos','请选择货主')
+        )
+        return
+      }
+
+      this.addSkuList.push({
+        skuCode: '',
+        skuFocus: true,
+        skuName: '',
+        skuQty: '',
+        abQty: '',
+        qtyRef: Date.now(),
+        showQty: false,
+        skuId: '',
+        txCode: 'I'
+      })
+
+    },
+    // 删除商品
+    delSku(index) {
+      this.addSkuList.splice(index, 1)
+    },
+
+
+    // 搜索商品
+    skuCodeConfirm(data) {
+      return this.$lwApi.common.searchSku({
+        ...data,
+        ownerId: this.owner.id
+      })
+    },
+    // 商品选择弹框 - 确认选择
+    selectPopupConfirm(item, index) {
+      projectWmsOutboundPDAQuerySkuInvAbQty({
+        ownerId: this.owner.id,
+        skuId: item.id
+      }).then(res => {
+        this.addSkuList[index].skuCode = res.skuCode
+        this.addSkuList[index].skuName = res.skuName
+        this.addSkuList[index].skuId = res.skuId
+        this.addSkuList[index].abQty = res.abQty
+        this.addSkuList[index].showQty = true
+      })
+
+    },
+    // 商品选择弹框 - 清除商品
+    selectPopupClear(index) {
+      this.addSkuList[index].skuCode = ''
+      this.addSkuList[index].skuName = ''
+      this.addSkuList[index].skuId = ''
+      this.addSkuList[index].skuQty = ''
+      this.addSkuList[index].abQty = ''
+    },
+
+    // tab切换
+    tabChange() {
+      if (this.tabActive === 'list' && !this.skuList.pageTotal) {
+        this.getSkuListData()
+      }
+    },
+
+    // 商品列表 - 获取数据
+    getSkuListData() {
+      projectWmsOutboundPDASoQueryLinePage({
+        pageSize: this.skuList.pageSize,
+        pageNum: this.skuList.pageNum,
+        soId: this.soId
+      }).then(res => {
+        this.skuList.data = res.datas
+        this.skuList.pageTotal = res.total || 0
+      })
+    },
+    // 商品列表 - 删除
+    skuListDel(item) {
+      this.$lwDialog.confirm({
+        type: 'warning',
+        title: this.$lwLanguage.get('', '提示'),
+        message: this.$lwLanguage.get('', '确认删除商品{name}?', {name: item.skuName}),
+      }).then(async () => {
+        await this.submitSoData([{...item, txCode: 'D'}])
+        this.$lwToast.success(
+          this.$lwLanguage.get('', '已删除')
+        )
+        this.getSkuListData()
+      })
+    },
+    // 商品列表 - 编辑 - 打开弹框
+    skuListEdit(item) {
+      this.editPopup.skuInitData = {
+        code: item.skuCode,
+        name: item.skuName
+      }
+      this.editPopup.abQty = item.abnQty
+      this.editPopup.qty = item.skuQty
+      this.editPopup.skuId = item.skuId
+      this.editPopup.soLineId = item.soLineId
+      this.editPopup.show = true
+      this.editPopup.showQty = true
+      this.$nextTick(() => this.$refs.editSku.initEchoData(true))
+    },
+    // 商品列表 - 编辑 - 商品选择确认
+    editPopupSkuConfirm(item) {
+      this.editPopup.showQty = false
+      projectWmsOutboundPDAQuerySkuInvAbQty({
+        ownerId: this.owner.id,
+        skuId: item.id
+      }).then(res => {
+        this.editPopup.skuId = res.skuId
+        this.editPopup.abQty = res.abQty
+        this.editPopup.showQty = true
+      })
+    },
+    // 商品列表 - 编辑 - 商品删除
+    editPopupSkuClear() {
+      this.editPopup.skuId = ''
+      this.editPopup.abQty = ''
+      this.editPopup.skuFocus = true
+      this.editPopup.qty = ''
+      this.editPopup.showQty = false
+    },
+    // 商品列表 - 编辑 - 商品保存
+    async editPopupConfirm() {
+      const {skuId, soLineId} = this.editPopup
+
+      if (!skuId) {
+        this.editPopup.skuFocus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('', '商品信息不能为空')
+        )
+        return
+      }
+      const skuQty = this.$refs.editPopupQty?.getQty() || 0
+      if (!skuQty) {
+        this.editPopup.skuFocus = true
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('', '出库数量不能为空，且应当是大于0的正整数')
+        )
+        return
+      }
+
+      await this.submitSoData([{
+        skuId,
+        skuQty,
+        txCode: 'U',
+        soLineId
+      }])
+
+      this.$lwToast.success(
+        this.$lwLanguage.get('', '操作成功')
+      )
+      this.getSkuListData()
+      this.editPopup.show = false
+    },
+
+    // 执行拣选
+    actionPick() {
+      if (this.$route.query.soId) {
+        history.go(-1)
+        return
+      }
+
+      this.$router.push({
+        path: this.actionPath,
+        query: {
+          lwOrderId: this.soId,
+          lwBackStep: '2'
+        }
+      })
+    },
+    // 检查商品必填项
+    skuCheck() {
+      if (!this.soId && !this.addSkuList.length) {
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.ifphsyjt', '请添加商品信息')
+        )
+        return false
+      }
+
+      if (this.addSkuList.length) {
+
+        for (let i = 0; i < this.addSkuList.length; i++) {
+          const item = this.addSkuList[i]
+          if (!item.skuCode) {
+            this.$lwShowErrorMsg(
+              this.$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.pqwhxqsb', '商品{num}，商品信息不能为空', {num: i + 1})
+            )
+            return false
+          }
+          const skuQty = this.$refs[item.qtyRef][0].getQty()
+          if (!skuQty) {
+            this.$lwShowErrorMsg(
+              this.$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.muzbqnkt', '商品{num}，出库数量不能为空且应当是大于0的整数', {num: i + 1})
+            )
+            return false
+          }
+          this.addSkuList[i].skuQty = skuQty
+        }
+      }
+
+      return true
+
+    },
+    // 保存
+    async confirmCreate() {
+
+      if (!this.checkOrderInfo() || !this.skuCheck()) return
+
+      await this.submitSoData(this.addSkuList)
+
+      const msg = this.soId ?
+        this.$lwLanguage.get('', '操作成功') :
+        this.$lwLanguage.get('wms_project.pda.wms.components.consoleAndPick.createOrderPage.esmoutbc', '订单创建成功')
+
+      this.$lwToast.success(msg)
+
+      this.addSkuList = []
+      this.skuList.pageNum = 1
+      this.getSkuListData()
+    },
+    // 提交出库单数据
+    async submitSoData(skuList) {
+      const api = this.soId ? projectWmsOutboundPDASoSubmitUpdateInfo : projectWmsOutboundPDASoCreate
+
+      const res = await api({
+        ownerId: this.owner.id,
+        customerCode: this.customer.code,
+        customerName: this.customer.name,
+        customerId: this.customer.id,
+        type: this.type,
+        planShipTime: this.planTime,
+        extSoNo: this.extSoNo,
+        remark: this.remark,
+        returnMethod: this.back.value,
+        soId: this.soId,
+        skuList,
+      })
+      this.soId = res.id
+    }
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>