rtk-wms-uniapp/pages/workbranch/production/cutting/cuttingMaterialPreparation.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="goHome"
        >&#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="100px">分切单</uni-th>
              <uni-th align="center" width="180px">物料</uni-th>
              <uni-th align="center" width="180px">批号</uni-th>
              <uni-th align="center" width="90px">长</uni-th>
              <uni-th align="center" width="90px">宽</uni-th>
              <uni-th align="center" width="100px">库位</uni-th>
            </uni-tr>

            <!-- 表格数据行 -->
            <uni-tr v-for="(item, key) in materialList" :key="key">
              <uni-td align="center">{{ item.slittingOrderNo }}</uni-td>
              <uni-td align="center">{{ item.materialNo }}({{ item.materialName }})</uni-td>
              <uni-td align="center">{{ item.batchNumber }}</uni-td>
              <uni-td align="center">{{ item.length }}</uni-td>
              <uni-td align="center">{{ item.width }}</uni-td>
              <uni-td align="center">{{ item.locationName }}</uni-td>
            </uni-tr>
          </uni-table>
        </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,
  onBeforeMount,
  ref
} from 'vue'
export default defineComponent({
  setup() {
    const modalForm = ref('')
    const errorState = ref(0)
    const easyinput = ref()
    const errorTip = ref('')
    const errorTipMessage = ref('')
    const materialList = ref([])
    const scanNumber = ref('')

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

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

    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('scanPrepareMaterial', {
            qrCode: ret.resp_result
          })
            .then(({
              code,
              data,
              msg
            }) => {
              if (code === 0) {
                setInputFocus()
                uni.$reqPost('cuttingMaterialConfirm', {
                  id: data[0].qrCode
                })
                  .then(ret => {
                    if (ret.code === 0) {
                      uni.showToast({
                        title: '备料成功',
                        icon: 'none',
                        duration: 2000
                      })
                      search()
                    } else {
                      // #ifdef APP-PLUS
                      plus.device.beep(2)
                      // #endif
                      errorTipMessage.value = ret.msg
                      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) {
            search()
            setInputFocus()
            uni.$reqPost('cuttingMaterialConfirm', {
              id: data[0].qrCode
            })
              .then(ret => {
                if (ret.code === 0) {
                  uni.showToast({
                    title: '备料成功',
                    icon: 'none',
                    duration: 2000
                  })
                  search()
                } else {
                  // #ifdef APP-PLUS
                  plus.device.beep(2)
                  // #endif
                  errorTipMessage.value = ret.msg
                  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 goHome = function() {
      uni.$goHome()
    }

    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'
        }
      }],
      goHome,
      easyinput,
      errorTip,
      errorTipMessage,
	  handleInputFocus,
      modalForm,
      scanNumber,
      handleMapass,
      handleKeydown,
      materialList,
      handleCloseErrorTipsModal
    }
  }
})
</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 - 200px);
		// height: calc(100vh - 265px);
		min-height: 230px;
		margin: 5px 0;
		overflow-y: scroll;
	}
</style>