rtk-wms-uniapp/pages/workbranch/warehouse/warehousing/warehousingApplication.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"
        >入库申请</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"
              :input-border="false"
              :clearable="false"
              type="text"
              focus
			  @focus="handleInputFocus"
              placeholder="扫描完成品标签"
              @confirm="handleKeydown"
            />
            <text class="font-icons" @click="handleMapass">&#xe6b7;</text>
          </view>
        </view>
        <view class="table-title">
          <span>入库需求清单</span>
        </view>
        <view class="custom-table">
          <uni-table border stripe empty-text="暂无更多数据">
            <!-- 表头行 -->
            <uni-tr class="custom-table-head">
              <uni-th align="center" width="20px" />
              <uni-th align="center" width="100px">工单</uni-th>
              <uni-th align="center" width="180px">产品</uni-th>
              <uni-th align="center" width="90px">数量</uni-th>
            </uni-tr>

            <!-- 表格数据行 -->
            <uni-tr v-for="(item, key) in warehousingList" :key="key">
              <uni-td align="center" style="padding: 8px 4px !important;">
                <text
                  class="font-icons"
                  style="font-size: 20px;text-align: right;color: red;"
                  @click="handleRemoveRow(item)"
                >&#xe68c;</text>
              </uni-td>
              <uni-td align="center">{{ item.erpWorkOrderNo }}</uni-td>
              <uni-td align="center">{{ item.productCode }}({{ item.productName }})</uni-td>
              <uni-td align="center">{{ item.boxQty }}</uni-td>
            </uni-tr>
          </uni-table>
        </view>
        <view
          class="card-list-item"
          style="margin: 12px 0;display: grid;grid-template-columns: 1fr;grid-template-rows: 1fr;"
        >
          <button
            type="primary"
            style="width: calc(100% - 8px);margin: 0 4px;"
            @click="handleGenerateWarehousing"
          >生成入库申请单</button>
        </view>
      </view>
      <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,
  ref,
  onBeforeMount
} from 'vue'
export default defineComponent({
  setup() {
    const modalForm = ref('')
    const errorState = ref(0)
    const easyinput = ref()
    const errorTip = ref('')
    const errorTipMessage = ref('')
    const warehousingList = ref([])
    const scanNumber = ref('')

    onBeforeMount(() => {
      uni.$reqGet('getProductInDetailTempPage', {
        pageNo: 1,
        pageSize: 100
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            setInputFocus()
            warehousingList.value = data?.list ?? []
          } else {
            // #ifdef APP-PLUS
            plus.device.beep(2)
            // #endif
            errorTipMessage.value = msg
            errorTip.value.open()
            errorState.value = 0
          }
        })
    })

    const handleMapass = function() {
      // #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('scanProductInDetailTemp', {
            id: ret.resp_result
          })
            .then(({
              code,
              data,
              msg
            }) => {
              if (code === 0) {
                if (data.status === -1) {
                  uni.$reqGet('getProductInDetailTempPage', {
                    pageNo: 1,
                    pageSize: 100
                  })
                    .then(({
                      code,
                      data,
                      msg
                    }) => {
                      if (code === 0) {
                        setInputFocus()
                        warehousingList.value = data?.list ?? []
                      } else {
                        // #ifdef APP-PLUS
                        plus.device.beep(2)
                        // #endif
                        errorTipMessage.value = msg
                        errorTip.value.open()
                        errorState.value = 0
                      }
                    })
                } else if (data.status === 0) {
                  // #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('scanProductInDetailTemp', {
        id: e
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            if (data.status === -1) {
              uni.$reqGet('getProductInDetailTempPage', {
                pageNo: 1,
                pageSize: 100
              })
                .then(({
                  code,
                  data,
                  msg
                }) => {
                  if (code === 0) {
                    setInputFocus()
                    warehousingList.value = data?.list ?? []
                  } else {
                    // #ifdef APP-PLUS
                    plus.device.beep(2)
                    // #endif
                    errorTipMessage.value = msg
                    errorTip.value.open()
                    errorState.value = 0
                  }
                })
            } else if (data.status === 0) {
              // #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 handleGenerateWarehousing = function() {
      if (warehousingList.value.length > 0) {
        const paramsList = []
        warehousingList.value.forEach(item => {
          const newItem = JSON.parse(JSON.stringify(item))
          Reflect.deleteProperty(newItem, 'id')
          paramsList.push({
            ...newItem,
            tempId: item.id
          })
        })
        uni.$reqPost('createProductInStorageDetail', paramsList)
          .then(({
            code,
            data,
            msg
          }) => {
            if (code === 0) {
              easyinput.value.onBlur()
              easyinput.value.onFocus()
              warehousingList.value.length = 0
              uni.showToast({
                title: '入库申请单生成成功',
                icon: 'none',
                duration: 2000
              })
            } else {
              // #ifdef APP-PLUS
              plus.device.beep(2)
              // #endif
              errorTipMessage.value = msg
              errorTip.value.open()
              errorState.value = -1
            }
          })
      } else {
        // #ifdef APP-PLUS
        plus.device.beep(2)
        // #endif
        errorTipMessage.value = '请先扫描标签'
        errorTip.value.open()
        errorState.value = -1
      }
    }

    const handleRemoveRow = function(ret) {
      uni.$reqDelete('deleteProductInDetailTemp', {
        id: ret.id
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            easyinput.value.onBlur()
            easyinput.value.onFocus()
            uni.$reqGet('getProductInDetailTempPage', {
              pageNo: 1,
              pageSize: 100
            })
              .then(({
                code,
                data,
                msg
              }) => {
                if (code === 0) {
                  warehousingList.value = data?.list ?? []
                } else {
                  // #ifdef APP-PLUS
                  plus.device.beep(2)
                  // #endif
                  errorTipMessage.value = msg
                  errorTip.value.open()
                  errorState.value = -1
                }
              })
          } 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/warehouse/warehousing/warehousingType')
    }

    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,
      easyinput,
      errorTip,
      errorTipMessage,
      modalForm,
      scanNumber,
      handleMapass,
      handleKeydown,
      warehousingList,
      handleRemoveRow,
	  handleInputFocus,
      handleCloseErrorTipsModal,
      handleGenerateWarehousing
    }
  }
})
</script>

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

	.list-content {
		margin-top: 80px;
		background-color: #edeeee;
	}

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

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

	.scan {
		height: 45px;
		width: calc(100% - 48px);
		margin: 12px;
		padding: 0 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 6px;
		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;
			}
		}
	}

	.card-list-flexbox {
		width: calc(100vw - 24px);
		height: 195px;
		margin: 0 12px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		overflow-y: scroll;

		.card-list-title {
			width: 100%;
			height: 35px;
			line-height: 35px;
			margin: 0 4px 0 4px;
			border-radius: 4px 4px 0 0;
			text-align: center;
			color: white;
			background-color: rgba(0, 160, 233, 1.0);
		}

		.card-list-item,
		.card-list-item-operation {
			width: 100%;
			height: 35px;
			margin: 0 4px 3rpx 4px;
			border-radius: 4px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;

			uni-text {
				font-size: 14px;
				height: 50rpx;
				text-align: left;
				padding: 0 8px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.text-1 {
				flex: 1;
				height: 35px;
				justify-content: flex-start;
			}

			.text-2 {
				flex: 3;
				height: 35px;
				justify-content: flex-end;
				margin-right: 4px;
				padding: 2px 6px;
			}

		}

	}

	.table-title {
		height: 40px;
		line-height: 40px;
		margin: 4px 0 -3px 0;
		padding: 0 12px;
		font-size: 16px;
		font-weight: bold;
		background-color: white;
	}

	.custom-table {
		height: calc(100vh - 265px);
		min-height: 230px;
		margin: 5px 0;
		overflow-y: scroll;
	}
</style>