rtk-wms-uniapp/pages/workbranch/warehouse/location/locationPage.vue

<template>
  <gui-page
    :custom-header="true"
    :is-header-sized="false"
    :header-class="['gui-theme-background-color', isLandscapeScreen?'width: 100vmax;':'']"
    :style="[isLandscapeScreen?'width: 100vmax':'']"
  >
    <template #gHeader>
      <view
        :style="[isLandscapeScreen?'height:44px;width: 100vmax':'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="goHome"
        >&#xe6c5;</text>
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text
          class="gui-h4 gui-blod gui-flex1 gui-text-center gui-color-white gui-ellipsis gui-primary-text"
        >货位调整</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width:40px;" />
      </view>
    </template>
    <template #gBody>
      <list class="form">
        <cell>
          <view class="row-1">
            <view class="row-1-card">
              <uni-easyinput
                ref="easyinput"
                v-model="submitParams.storeName"
                :input-border="false"
                :clearable="false"
                type="text"
                focus
				@focus="handleInputFocus"
                placeholder="请扫描库位信息"
                @confirm="confirmStore"
              />
              <view style="display: flex; flex-direction: row;">
                <text class="font-icons" @click="popup.open('center')">&#xe6a8;</text>
                <text class="font-icons" @click="handleMapass('货位')">&#xe6b7;</text>
              </view>
            </view>
          </view>
          <view class="row-2">
            <view class="row-2-card">
              <uni-easyinput
                ref="easyinput2"
                v-model="submitParams.materialNo"
                :input-border="false"
                :clearable="false"
                type="text"
				@focus="handleInputFocus"
                placeholder="请扫描物料"
                @confirm="confirmMaterial"
              />
              <text class="font-icons" @click="handleMapass('物料')">&#xe6b7;</text>
            </view>
          </view>
          <view class="row-3">
            <view class="row-3-card">
              <view class="row-space-between">
                <text>仓库</text>
                <text>{{ computedStock(submitParams?.erpStockIdNew) }}</text>
              </view>
              <view class="row-space-between">
                <text>区域</text>
                <text>{{ computedStoreArea(submitParams?.wmsStoreAreaIdNew) }}</text>
              </view>
              <view class="row-space-between">
                <text>货位</text>
                <text>{{ computedStore(submitParams?.storeIdNew) }}</text>
              </view>
            </view>
          </view>
          <view class="row-4">
            <view class="row-4-card">
              <view class="row-space-between">
                <text>物料编码</text>
                <text>{{ submitParams?.materialNo }}</text>
              </view>
              <view class="row-space-between">
                <text>物料名称</text>
                <text>{{ submitParams?.materialName }}</text>
              </view>
              <view class="row-space-between">
                <text>物料批次</text>
                <text>{{ submitParams?.materialLots }}</text>
              </view>
              <view class="row-space-between">
                <text>批次数量</text>
                <text>{{ submitParams?.inQty }}</text>
              </view>
            </view>
          </view>
          <view class="row-operation">
            <view class="row-operation-card">
              <view class="button" size="primary" @click="handleSubmit">
                <text class="gui-color-white">调整</text>
              </view>
            </view>
          </view>
        </cell>
      </list>
      <view>
        <!-- 提示窗示例 -->
        <uni-popup ref="popup" type="dialog">
          <uni-popup-dialog
            type="warn"
            cancel-text="取消"
            confirm-text="确认"
            title="手动分配货位"
            content="欢迎使用 uni-popup!"
            @confirm="popup.close()"
            @close="popup.close()"
          >
            <!-- eslint-disable-next-line -->
						<template #default="custom">
              <view class="select-group">
                <view class="select-item">
                  <text class="store-text">仓库</text>
                  <view class="custom-select">
                    <uni-data-select
                      v-model="submitParams.erpStockIdNew"
                      :localdata="warehouseList"
                      @change="handleSelectWareHouse"
                    />
                  </view>
                </view>
                <view class="select-item">
                  <text class="store-text">区域</text>
                  <view class="custom-select">
                    <uni-data-select
                      v-model="submitParams.wmsStoreAreaIdNew"
                      :localdata="regionList"
                      @change="handleSelectRegion"
                    />
                  </view>
                </view>
                <view class="select-item">
                  <text class="store-text">货位</text>
                  <view class="custom-select">
                    <uni-data-select v-model="submitParams.storeIdNew" :localdata="locationList" />
                  </view>
                </view>
              </view>
            </template>
          </uni-popup-dialog>
        </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>
      </view>
    </template>
  </gui-page>
</template>
<script>
import {
  computed,
  defineComponent,
  onMounted,
  ref
} from 'vue'
import {
	useSetWareHouseStore
} from '@/stores/useSetWareHouseStore.js';
import { onBeforeMount } from 'vue';
export default defineComponent({
  setup() {
    const goHome = function() {
      uni.$goHome()
    }
    const errorTip = ref('')
    const errorTipMessage = ref('')
    const easyinput = ref('')
    const easyinput2 = ref('')
    const errorState = ref(0)
    const isFetch = ref(false)
    const popup = ref()
    const regionList = ref([])
    const warehouseList = ref([])
    const locationList = ref([])
    const submitParams = ref({
      erpStockIdNew: '', // 入库仓库
      wmsStoreAreaIdNew: '', // 入库区域
      storeIdNew: '', // 入库货位
      storeName: '',
      materialNo: '',
      materialName: '',
      materialLots: '',
      inQty: ''
    })
    // 校验参数
    const validatorList = ref({
      erpStockIdNew: '入库仓库',
      wmsStoreAreaIdNew: '入库区域',
      storeIdNew: '入库货位',
      materialNo: '物料编码',
      materialName: '物料名称',
      materialLots: '物料批次',
      inQty: '批次数量'
    })
	const store = useSetWareHouseStore();
    const computedStock = computed(() => {
      return item => warehouseList.value.find(opt => opt.id === item)?.text
    })
    const computedStore = computed(() => {
      return item => {
        return locationList.value.find(opt => opt.id === item)?.text
      }
    })
    const computedStoreArea = computed(() => {
      return item => regionList.value.find(opt => opt.id === item)?.text
    })

	onBeforeMount(() => {
		warehouseList.value = store.$state.warehouseList
	})

    const handleMapass = function(state) {
      const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
      mpaasScanModule.mpaasScan({
        // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
        'scanType': ['qrCode', 'barCode'],
        // 是否隐藏相册，默认false不隐藏
        'hideAlbum': false
      },
      (ret) => {
        if (ret.resp_code === 1000) {
          if (state === '货位') {
            uni.$reqGet('getStockLocaltionByCode', {
              code: ret.resp_result
            })
              .then(({
                code,
                data,
                msg
              }) => {
                if (code === 0) {
                  submitParams.value.storeName = data?.name // 库位名称
                  submitParams.value.erpStockIdNew = data
                    ?.erpStockId // 入库仓库
                  submitParams.value.wmsStoreAreaIdNew = data
                    ?.wmsStoreAreaId // 入库区域
                  submitParams.value.storeIdNew = data?.wmsStoreId // 入库货位
                } else {
                  // #ifdef APP-PLUS
                  plus.device.beep(2)
                  // #endif
                  errorTipMessage.value = msg
                  errorTip.value.open()
                  errorState.value = 0
                }
              })
          } else {
            uni.$reqGet('materialScan', {
              materialLots: ret.resp_result
            })
              .then(({
                code,
                data,
                msg
              }) => {
                if (code === 0) {
                  submitParams.value.id = data?.id
                  submitParams.value.materialNo = data?.materialNo // 物料编码
                  submitParams.value.materialName = data
                    ?.materialName // 物料名称
                  submitParams.value.materialLots = data
                    ?.materialLots // 物料批次
                  submitParams.value.inQty = data?.inQty // 批次数量
                  submitParams.value.erpStockId = data?.erpStockId
                  submitParams.value.storeId = data?.storeId
                  submitParams.value.wmsStoreAreaId = data?.wmsStoreAreaId
                } else {
                  // #ifdef APP-PLUS
                  plus.device.beep(2)
                  // #endif
                  errorTipMessage.value = msg
                  errorTip.value.open()
                  errorState.value = 1
                }
              })
          }
        }
        // 返回值中，resp_code 表示返回结果值，10：用户取消，11：其他错误，1000：成功
        // 返回值中，resp_message 表示返回结果信息
        // 返回值中，resp_result 表示扫码结果，只有成功才会有返回
      })
    }

    // 扫描货位输入框回车事件
    const confirmStore = function(e) {
      uni.$reqGet('getStockLocaltionByCode', {
        code: e
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            submitParams.value.storeName = data?.name // 库位名称
            submitParams.value.erpStockIdNew = data
              ?.erpStockId // 入库仓库
            submitParams.value.wmsStoreAreaIdNew = data
              ?.wmsStoreAreaId // 入库区域
            submitParams.value.storeIdNew = data?.wmsStoreId // 入库货位
          } else {
            // #ifdef APP-PLUS
            plus.device.beep(2)
            // #endif
            errorTipMessage.value = msg
            errorTip.value.open()
            errorState.value = 0
          }
        })
    }

    // 扫描物料输入框回车事件
    const confirmMaterial = function(e) {
      uni.$reqGet('materialScan', {
        materialLots: e
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            submitParams.value.id = data?.id
            submitParams.value.materialNo = data?.materialNo // 物料编码
            submitParams.value.materialName = data?.materialName // 物料名称
            submitParams.value.materialLots = data?.materialLots // 物料批次
            submitParams.value.inQty = data?.inQty // 批次数量
            submitParams.value.erpStockId = data?.erpStockId
            submitParams.value.storeId = data?.storeId
            submitParams.value.wmsStoreAreaId = data?.wmsStoreAreaId
          } else {
            // #ifdef APP-PLUS
            plus.device.beep(2)
            // #endif
            errorTipMessage.value = msg
            errorTip.value.open()
            errorState.value = 1
          }
        })
    }

    // 上架
    const handleSubmit = function() {
      if (isFetch.value === true) {
        uni.$grace.msg('物料上架中...')
      } else {
        const params = JSON.parse(JSON.stringify(submitParams.value))
        Reflect.deleteProperty(params, 'storeName')
        const keys = Object.keys(params)
        for (let x = 0; x < keys.length; x++) {
          const validataIsItEmpty = ['', null, undefined, NaN].includes(params[keys[x]])
          if (validataIsItEmpty) {
            if (['erpStockIdNew', 'wmsStoreAreaIdNew', 'storeIdNew'].includes(keys[x])) {
              // #ifdef APP-PLUS
              plus.device.beep(2)
              // #endif
              errorTipMessage.value = validatorList.value[keys[x]] + '不能为空！'
              errorTip.value.open()
              errorState.value = 0
            } else {
              // #ifdef APP-PLUS
              plus.device.beep(2)
              // #endif
              errorTipMessage.value = validatorList.value[keys[x]] + '不能为空！'
              errorTip.value.open()
              errorState.value = 1
            }
            return
          }
        }
        isFetch.value = true
        uni.$reqPost('materialAdjust', [submitParams.value])
          .then(({
            code,
            data,
            msg
          }) => {
            submitParams.value.id = ''
            submitParams.value.materialNo = ''
            submitParams.value.materialName = ''
            submitParams.value.materialLots = ''
            submitParams.value.inQty = ''
            submitParams.value.erpStockId = ''
            submitParams.value.storeId = ''
            submitParams.value.wmsStoreAreaId = ''
            isFetch.value = false
            if (code === 0) {
              uni.$grace.msg('货位已调整')
              return
            } else {
              // #ifdef APP-PLUS
              plus.device.beep(2)
              // #endif
              errorTipMessage.value = msg
              errorTip.value.open()
              errorState.value = -1
            }
          })
      }
    }

    const handleSelectWareHouse = function(e) {
		const stock = warehouseList.value.find(item => item.value === e)
		  submitParams.value.wmsStoreAreaIdNew = ''
		  submitParams.value.storeIdNew = ''
		locationList.value = []
		store.handleGetRegionList(e).then(ret => {
			regionList.value = ret
		})
    }
	
    const handleSelectRegion = function(e) {
      const area = regionList.value.find(item => item.value === e)
	  submitParams.value.storeIdNew = ''
	  locationList.value = []
	  store.handleGetRegionList(e).then(ret => {
	  	locationList.value = ret
	  })
    }

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

    const setInputFocus2 = function() {
      submitParams.value.qrCode = ''
      easyinput2.value.onBlur()
      easyinput2.value.onFocus()
    }

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

    return {
      goHome,
      submitParams,
      handleMapass,
      handleSubmit,
      popup,
      easyinput,
      easyinput2,
      errorTip,
      errorTipMessage,
	  handleInputFocus,
      regionList,
      warehouseList,
      locationList,
      computedStock,
      computedStore,
      computedStoreArea,
      confirmStore,
      confirmMaterial,
      handleSelectWareHouse,
      handleSelectRegion,
      handleCloseErrorTipsModal
    }
  }
})
</script>

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

	.gui-sbody {
		font-size: 14px;
		background-color: rgba(234, 239, 242, 1);
	}

	.form {
		margin-top: 85px;
	}

	.row-1,
	.row-2,
	.row-3,
	.row-4 {
		margin-top: 10px;
		height: 55px;
		display: flex;
		justify-content: center;
		background-color: white;
	}

	.row-1 {
		margin-top: 0px;
	}

	.row-1,
	.row-2 {

		.row-1-card,
		.row-2-card {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding-left: 10px;
			padding-right: 10px;
		}
	}

	.row-3 {
		height: 140px;

		.row-3-card {
			display: flex;
			flex-direction: column;

			.row-space-between {
				flex: 1;
				width: calc(100vw - 40px);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-top: 12px;
				padding-bottom: 12px;
			}
		}

	}

	.row-4 {
		height: 200px;

		.row-4-card {
			display: flex;
			flex-direction: column;

			.row-space-between {
				flex: 1;
				width: calc(100vw - 40px);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-top: 12px;
				padding-bottom: 12px;
			}
		}

	}

	.row-operation {
		height: 110px;
		padding-left: 20px;
		padding-right: 20px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.row-operation-card {
			flex: 1;

			.btn-row-1 {
				margin-bottom: 5px !important;
			}
		}
	}

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

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

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

	.select-group {
		display: flex;
		flex-direction: column;
		flex: 1;

		.select-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 10px;

			.store-text {
				margin-right: 14px;
			}
		}
	}
</style>