rtk-wms-uniapp/pages/workbranch/production/shipmentMHT/shipmentProduct.vue

<template>
  <gui-page :custom-header="true" :header-class="['gui-theme-background-color']">
    <template #gHeader>
      <view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <text
          style="font-size:44rpx;"
          class="gui-header-leader-btns gui-color-white font-icons"
          @tap="goBack"
        >&#xe6c5;</text>
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text
          class="gui-h4 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-color-white gui-primary-text"
          style="font-size: 1rem;"
        >出货明细</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width:40px;" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gBody>
      <view class="list-content">
        <view class="scan">
          <view class="scan-card">
            <uni-easyinput
              ref="easyinput"
              v-model="scanNumber"
              :disabled="parentData.isItComplete"
              :input-border="false"
              :clearable="false"
              type="text"
              focus
			  @focus="handleInputFocus"
              placeholder="扫描成品标签"
              @confirm="handleKeydown"
            />
            <text class="font-icons" @click="handleMapass">&#xe6b7;</text>
          </view>
        </view>
        <view v-if="dataList?.length > 0" class="list-panel">
          <div
            v-for="(item, key) in dataList"
            :id="'panel_'+item.id"
            :key="key"
            class="panel"
            @click="handleShowDetails(item)"
          >
            <div :class="['panel-row', lightElement === item.id?'panel-animation':'']">
              <span>产品</span>
              <span>{{ item.productCode }}({{ item.productName }})</span>
            </div>
            <div class="panel-row">
              <span>订单</span>
              <span>{{ item.saleOrderNo }}</span>
            </div>
            <div class="panel-row">
              <span>应出货数量</span>
              <span>{{ item.planQty * 1 }}</span>
            </div>
            <div class="panel-row">
              <span>已出货数量</span>
              <span style="font-weight: bold;color: orange;">{{ item.sendQty * 1 }}</span>
            </div>
          </div>
        </view>
        <view v-else>
          <view class="bg-image">
            <image src="@/static/empty.png" mode="heightFix" />
            <text>这里什么都没有...</text>
          </view>
        </view>
      </view>
      <uni-popup ref="popup" background-color="#fff">
        <view class="popup-content">
          <view class="list-title" style="margin-bottom: 8px;">
            <span
              class="font-icons"
              style="font-size: 20px;color: #00a0e9;width: 40px;text-align: center;"
            >&#xecc6;</span>
            <span>已出明细</span>
          </view>
          <view v-if="demandDetailsList?.length > 0" class="list-panel" style="margin-top: 40px;">
            <div v-for="(item) in demandDetailsList" :key="item.id" class="panel">
              <uni-swipe-action>
                <!-- 基础用法 -->
                <uni-swipe-action-item :right-options="options" @click="handleRemoveDetail(item)">
                  <template #left>
                    <view />
                  </template>
                  <div class="panel-row">
                    <span>箱码</span>
                    <span>{{ item.boxNo }}</span>
                  </div>
                  <div class="panel-row">
                    <span>数量</span>
                    <span>{{ item.boxQty * 1 }}</span>
                  </div>
                </uni-swipe-action-item>
              </uni-swipe-action>
            </div>
          </view>
          <view v-else>
            <view class="bg-image">
              <image src="@/static/empty.png" mode="heightFix" />
              <text>这里什么都没有...</text>
            </view>
          </view>
        </view>
      </uni-popup>
      <uni-popup ref="errorTip" type="dialog">
        <uni-popup-dialog
          type="error"
          cancel-text="关闭"
          confirm-text="确认"
          title="提示"
          :content="errorTipMessage"
          @confirm="handleCloseErrorTipsModal"
          @close="handleCloseErrorTipsModal"
        />
      </uni-popup>
    </template>
  </gui-page>
</template>

<script>
import {
  defineComponent,
  nextTick,
  onBeforeMount,
  ref
} from 'vue'
export default defineComponent({
  setup(options) {
    const popup = ref()
    const errorState = ref(0)
    const easyinput = ref()
    const errorTip = ref('')
    const errorTipMessage = ref('')
    const dataList = ref([])
    const scanNumber = ref('')
    const parentData = JSON.parse(options.detail) ?? {}
    const demandDetailsList = ref([])
    const rowObject = ref({})
    const lightElement = ref('')

    const search = function() {
      uni.$reqGet('toOutDetailPage', {
        pageNo: 1,
        PageSize: 100,
        id: parentData.id ?? ''
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            dataList.value = data?.list ?? []
          } else {
            uni.showToast({
              title: msg,
              icon: 'none',
              duration: 2000
            })
          }
        })
    }

    onBeforeMount(() => {
      search()
    })

    const saveProductData = function(data) {
      const submitParams = [{
        boxNo: data.qrCode,
        productCode: data.materialNo,
        boxQty: data.receiptQty,
        saleOrderDetailId: data.saleOrderDetailId,
        stockCode: data.erpStockId,
        locationCode: data.wmsStoreAreaId,
        areaCode: data.wmsStoreId
      }]
      uni.$reqPost('saveSaleOutOrderDetailBatch', submitParams)
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            uni.showToast({
              title: '出货成功',
              icon: 'none',
              duration: 1000
            })
            setInputFocus()
            search()
          } else {
            // #ifdef APP-PLUS
            plus.device.beep(2)
            // #endif
            errorTipMessage.value = msg
            errorTip.value.open()
            errorState.value = 0
          }
        })
    }

    const handleMapass = function() {
      if (parentData.isItComplete) return
      // #ifdef APP-PLUS
      const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
      mpaasScanModule.mpaasScan({
        // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
        'scanType': ['qrCode', 'barCode'],
        // 是否隐藏相册，默认false不隐藏
        'hideAlbum': false
      },
      (ret) => {
        if (ret.resp_code === 1000) {
          uni.$reqGet('scanPrepareMaterial', {
            qrCode: ret.resp_result
          })
            .then(({
              code,
              data,
              msg
            }) => {
              if (code === 0) {
                let fdIndex = -1
                let saleOrderDetailId = ''
                dataList.value.forEach((res, index) => {
                  if (res.productCode === data[0].materialNo) {
                    fdIndex = index
                    saleOrderDetailId = res.id
                  }
                })
                if (fdIndex !== -1) {
                  saveProductData({
                    ...data[0],
                    saleOrderDetailId
                  })
                  // 滚动到指定位置
                  handleScrollPage(dataList.value[fdIndex]?.id)
                } else {
                  // #ifdef APP-PLUS
                  plus.device.beep(2)
                  // #endif
                  errorTipMessage.value = '请扫描正确的成品标签'
                  errorTip.value.open()
                  errorState.value = 0
                }
              } else {
                // #ifdef APP-PLUS
                plus.device.beep(2)
                // #endif
                errorTipMessage.value = msg
                errorTip.value.open()
                errorState.value = 0
              }
            })
        }
      })
      // #endif
    }

    // 扫描完成品标签输入框回车事件
    const handleKeydown = function(e) {
      uni.$reqGet('scanPrepareMaterial', {
        qrCode: e
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            let fdIndex = -1
            let saleOrderDetailId = ''
            dataList.value.forEach((res, index) => {
              if (res.productCode === data[0].materialNo) {
                fdIndex = index
                saleOrderDetailId = res.id
              }
            })
            if (fdIndex !== -1) {
              saveProductData({
                ...data[0],
                saleOrderDetailId
              })
              // 滚动到指定位置
              handleScrollPage(dataList.value[fdIndex]?.id)
            } else {
              // #ifdef APP-PLUS
              plus.device.beep(2)
              // #endif
              errorTipMessage.value = '请扫描正确的成品标签'
              errorTip.value.open()
              errorState.value = 0
            }
          } else {
            // #ifdef APP-PLUS
            plus.device.beep(2)
            // #endif
            errorTipMessage.value = msg
            errorTip.value.open()
            errorState.value = 0
          }
        })
    }

    const handleScrollPage = function(id) {
      nextTick(() => {
        const obj = uni.createSelectorQuery().in(this).select(
          '#panel_' + id)
        lightElement.value = id
        obj.boundingClientRect(data => {
          if (data) {
            uni.pageScrollTo({
              scrollTop: data.top,
              duration: 100
            })
          }
        }).exec()
      })
    }

    const handleShowDetails = function(ret) {
      uni.$reqGet('saleOutOrderDetailPage', {
        pageNo: 1,
        pageSize: 100,
        id: ret?.id
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            if (popup.value?.showPopup === false) {
              popup.value.open('bottom')
            }
            rowObject.value = ret
            demandDetailsList.value = data?.list ?? []
          } else {
            // #ifdef APP-PLUS
            plus.device.beep(2)
            // #endif
            errorTipMessage.value = msg
            errorTip.value.open()
            errorState.value = -1
          }
        })
    }

    const handleRemoveDetail = function(ret) {
      if (rowObject.value?.planQty === rowObject.value?.sendQty || parentData.isItComplete) {
        uni.showToast({
          title: '订单已完成, 无法删除',
          icon: 'none',
          duration: 2000
        })
        return
      }
      uni.$reqDelete('deleteSaleOutOrderDetail', {
        id: ret.id ?? ''
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            uni.showToast({
              title: '删除成功',
              icon: 'none',
              duration: 2000
            })
            handleShowDetails(rowObject.value)
            search()
          } else {
            // #ifdef APP-PLUS
            plus.device.beep(2)
            // #endif
            errorTipMessage.value = msg
            errorTip.value.open()
            errorState.value = -1
          }
        })
    }

    const goBack = function() {
      uni.$goBack('/pages/workbranch/production/shipmentMHT/shipmentPage')
    }

    const setInputFocus = function() {
      scanNumber.value = ''
      easyinput.value.onBlur()
      easyinput.value.onFocus()
    }

    // 关闭错误信息弹窗
    const handleCloseErrorTipsModal = async function() {
      errorTip.value.close()
      if (errorState.value === 0) {
        await setInputFocus()
      }
    }
	
	// 禁用软键盘
	const handleInputFocus = function() {
		setTimeout(() => {
			uni.hideKeyboard()
		}, 100)
	}

    return {
      options: [{
        text: '删除',
        style: {
          backgroundColor: '#dd524d'
        }
      }],
      goBack,
      popup,
      easyinput,
      errorTip,
      errorState,
      errorTipMessage,
      lightElement,
      scanNumber,
      handleMapass,
      handleKeydown,
	  handleInputFocus,
      dataList,
      parentData,
      handleRemoveDetail,
      demandDetailsList,
      handleShowDetails,
      handleCloseErrorTipsModal
    }
  }
})
</script>

<style lang="scss" scoped>
	.gui-header-leader-btns {
		color: black;
		font-size: 24px !important;
	}

	.list-content {
		margin-top: 80px;
		min-height: calc(100vh - 80px);
		background-color: #edeeee;
	}

	.input-200 {
		width: 200px;
		padding-left: 10px;
	}

	span,
	text {
		font-size: 12px;
	}

	.font-icons {
		width: 40px;
		font-size: 20px;
		text-align: right;
	}

	.scan {
		position: fixed;
		top: 66px;
		left: 0;
		height: 60px;
		width: 100%;
		margin: 12px 0;
		padding: 0 12px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2px solid rgba(237, 238, 238, 1);
		background-color: white;

		.scan-card {
			width: 100%;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 7fr 2fr;
			align-items: center;

			input {
				height: 35px;
				line-height: 35px;
			}

			text {
				width: 100%;
				text-align: right;
			}
		}
	}

	.list-title {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		height: 40px;
		line-height: 40px;
		width: calc(100% - 24px);
		padding: 0 12px;
		display: flex;
		align-items: center;
		font-size: 16px;
		font-weight: bold;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		border-bottom: 2px solid rgba(237, 238, 238, 1);
		background-color: white;
	}

	.popup-content {
		height: 75vh;
		overflow-y: scroll;
		background-color: #edeeee;
	}

	.custom-table {
		height: calc(100vh - 215px);
		min-height: 230px;
		margin: 5px 0;
		overflow-y: scroll;
	}

	.list-panel {
		margin-top: 66px;
		padding: 5px 8px;
		overflow-y: scroll;
	}

	.panel-animation {
		color: white !important;
		background-color: #00a0e9 !important;
	}
</style>