rtk-wms-uniapp/pages/workbranch/warehouse/box/boxMerge.vue

<template>
  <gui-page :custom-header="true" :is-header-sized="false" :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="row-1">
          <view class="row-1-card">
            <text
              class="gui-form-input input-200 gui-color-gray"
            >{{ materialCode? materialCode:"请扫描物料条码" }}</text>
            <view style="display: flex; flex-direction: row;">
              <text class="font-icons" @click="handleMapass('row1')">&#xe6b7;</text>
            </view>
          </view>
        </view>
        <view class="card">
          <view v-if="materialList.length > 0">
            <view v-for="item in materialList" :key="item.id" class="card-list-flexbox">
              <uni-swipe-action>
                <!-- 基础用法 -->
                <uni-swipe-action-item
                  :right-options="options"
                  :left-options="options"
                  @click="handleDeleteRow(item)"
                >
                  <template #left>
                    <view />
                  </template>
                  <view class="flex-row">
                    <view class="card-list-item">
                      <text class="text-1 gui-color-gray">成品SN码</text>
                      <text class="text-2 gui-color-gray">{{ item.materialSerinalNo }}</text>
                    </view>
                    <view class="card-list-item">
                      <text class="text-1 gui-color-gray">生产时间</text>
                      <text
                        class="text-2 gui-color-gray"
                      >{{ $parseTime(item.createTime) }}</text>
                    </view>
                  </view>
                </uni-swipe-action-item>
              </uni-swipe-action>
            </view>
          </view>
          <view v-else>
            <view class="bg-image">
              <image src="@/static/empty.png" mode="heightFix" />
              <text>这里什么都没有...</text>
            </view>
          </view>
        </view>
      </view>
      <gui-right-menus>
        <!-- 扩展按钮 -->
        <template #menus-more>
          <view
            hover-class="gui-tap"
            class="menu-items gui-bg-green gui-flex gui-columns gui-justify-content-center"
            @click="handleMerge"
          >
            <text class="menu-text gui-block gui-text-center gui-color-white">装箱</text>
          </view>
        </template>
        <!-- 核心按钮 -->
        <template #menus-primary>
          <view class="menu-items gui-bg-primary gui-flex gui-columns gui-justify-content-center">
            <text class="menu-icon gui-color-white gui-block gui-text-center gui-icons">&#xe614;</text>
            <text class="menu-text gui-color-white gui-block gui-text-center">功能</text>
          </view>
        </template>
      </gui-right-menus>
    </template>
  </gui-page>
</template>

<script>
import {
  computed,
  defineComponent,
  ref
} from 'vue'
export default defineComponent({
  setup() {
    const options = ref([{
      text: '删除',
      style: {
        backgroundColor: '#dd524d'
      }
    }])
    const materialCode = ref('')
    const materialList = ref([])
    const inputting = function(e) {
      console.log(e)
    }
    const goBack = function() {
      uni.$goBack('/pages/workbranch/warehouse/box/boxList')
    }
    const handleMapass = function(state) {
      // uni.$reqGet("scanWmsBoxSn", {
      // 		materialSerinalNo: "1633655975151833090"
      // 	})
      // 	.then(({
      // 		data
      // 	}) => {
      // 		if (data) {
      // 			materialCode.value = data?.materialSerinalNo;
      // 			materialList.value.push(data);
      // 		}
      // 	})
      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('scanWmsBoxSn', {
            qrCode: ret.resp_result
          })
            .then(({
              data
            }) => {
              if (data) {
                materialCode.value = data?.materialSerinalNo
                materialList.value.push(data)
              }
            })
        }
      })
    }
    // 装箱
    const handleMerge = function() {
      if (materialList.value.length > 0) {
        uni.$reqPost('boxRepacking', materialList.value)
          .then(({
            data
          }) => {
            uni.$grace.msg('装箱成功')
            // // 时间格式转换
            // data?.forEach(item => item.createTime = formatDateTime(item
            // 	.createTime));
            // let message = {
            // 	"ClientId": "webclient",
            // 	'templateName': "http://192.168.1.156:9900/Upload/Tables/s_reportmodel/202302271114052667/WMS.btw",
            // 	'DataList': data
            // }
            // uni.$useStore().mqttConfig.publish("adminS001", JSON.stringify(message), {
            // 	qos: 1
            // }, (err) => {});
          })
      }
    }
    const handleDeleteRow = function(data) {
      const fdIndex = materialList.value.findIndex(item => item.id === data.id)
      materialList.value.splice(fdIndex, 1)
    }
    return {
      goBack,
      options,
      materialCode,
      materialList,
      inputting,
      handleMapass,
      handleMerge,
      handleDeleteRow
    }
  }
})
</script>

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

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

	.list-content {
		margin-top: 80px;
	}

	.row-1 {
		height: 55px;
		display: flex;
		justify-content: center;
		background-color: white;

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

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

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

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

	.card {
		margin-top: 8px;

		.card-list-flexbox {
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-wrap: wrap;

			.flex-row {
				display: flex;
				flex-wrap: wrap;
				margin-top: 2px;
				background-color: white;

				.card-list-item {
					width: 750rpx;
					height: 40px;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

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

			}
		}
	}
</style>