rtk-wms-uniapp/pages/workbranch/warehouse/box/boxSplit.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-color-white gui-ellipsis gui-primary-text"
        >拆箱</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width:40px;" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gBody>
      <view class="form">
        <view class="row-1">
          <view class="row-1-card">
            <text
              class="gui-form-input input-200 gui-color-gray"
            >{{ productionList[0]?.boxNo? productionList[0]?.boxNo:"请扫描箱码" }}</text>
            <view style="display: flex; flex-direction: row;">
              <text class="font-icons" @click="handleMapass">&#xe6b7;</text>
            </view>
          </view>
        </view>
        <view class="checkbox-list">
          <view v-if="productionList.length > 0">
            <view
              v-for="(item, key) in productionList"
              :key="key"
              class="checkbox-item"
              @click="handleCheckedItem(item)"
            >
              <view v-if="computedChecked(item.id)" class="checkbox-cubes">
                <view class="checkbox-box" />
                <view class="checkbox-icon">✔</view>
              </view>
              <view class="checkbox-panel">
                <view class="checkbox-panel-item">
                  <text>SN码</text>
                  <text>{{ item.materialSerinalNo }}</text>
                </view>
                <view class="checkbox-panel-item">
                  <text>产品编码</text>
                  <text>{{ item.productCode }}</text>
                </view>
                <view class="checkbox-panel-item">
                  <text>产品名称</text>
                  <text>{{ item.productName }}</text>
                </view>
              </view>
            </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="handleSplit"
          >
            <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 goBack = function() {
      uni.$goBack('/pages/workbranch/warehouse/box/boxList')
    }
    const productionList = ref([])
    const checkboxParams = ref({
      checkboxIds: [], // 待选项的物料批次集合
      checkedIds: [] // 选中的字段
    })
    const computedChecked = computed(() => {
      return item => checkboxParams.value.checkedIds.includes(item)
    })
    const inputting = function(e) {
      console.log(e)
    }
    // 多选事件
    const handleCheckedItem = function(item) {
      const ifExist = checkboxParams.value.checkedIds.includes(item?.id)
      if (ifExist) {
        const fdIndex = checkboxParams.value.checkedIds.findIndex(option => option === item?.id)
        checkboxParams.value.checkedIds.splice(fdIndex, 1)
      } else {
        checkboxParams.value.checkedIds.push(item?.id)
      }
    }
    const handleMapass = function() {
      // uni.$reqGet("getWmsBoxSnList", { boxNo: "1633704467249389570" })
      // 	.then(({
      // 		data
      // 	}) => {
      // 		// for(let x = 0; x < 10; x++) {
      // 		// 	data?.list?.forEach(item => {
      // 		// 		productionList.value.push(item);
      // 		// 	})
      // 		// }
      // 		// checkboxParams.value.checkboxIds = Array.from(productionList.value, item => item
      // 		// 	?.id);
      // 		productionList.value = data?.list;
      // 		checkboxParams.value.checkboxIds = Array.from(productionList.value, item => item
      // 			?.id);
      // 	})
      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('getWmsBoxSnList', {
            boxNo: ret.resp_code
          })
            .then(({
              data
            }) => {
              productionList.value = data?.list
              checkboxParams.value.checkboxIds = Array.from(productionList.value,
                item => item
                  ?.id)
            })
        }
      })
    }
    // 拆分
    const handleSplit = function() {
      const ids = checkboxParams.value.checkedIds.toString(',')
      if (checkboxParams.value.checkedIds.length > 0) {
        uni.$reqGet('boxSplit', {
          ids
        })
          .then(({
            code,
            data,
            msg
          }) => {
            if (code === 0) {
              uni.$grace.msg('拆分成功')
              setTimeout(() => {
                uni.redirectTo({
                  url: '/pages/workbranch/warehouse/box/boxSplit'
                })
              }, 500)
            } else {
              uni.$grace.msg(msg)
            }
          })
      }
    }
    return {
      goBack,
      productionList,
      inputting,
      handleMapass,
      handleSplit,
      computedChecked,
      handleCheckedItem
    }
  }
})
</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);
	}

	.form {
		margin-top: 85px;
	}

	.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;
	}

	.checkbox-list {
		padding-top: 12px;

		.checkbox-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 126px;
			line-height: 42px;
			background-color: white;
			margin: 1px 0;

			.checkbox-cubes {
				width: 30px;
				height: 126px;
				position: absolute;

				.checkbox-box {
					/*宽高为0*/
					width: 0;
					height: 0;
					position: relative;
					/*在三角形底边设置一个边界颜色*/
					border-left: 28px solid skyblue;
					/*其它3边设置相同颜色，*/
					border-bottom: 25px solid transparent;
				}

				.checkbox-icon {
					height: 20px;
					position: absolute;
					top: 0;
					left: 3px;
					display: flex;
					align-items: center;
					font-size: 10px;
					font-weight: bold;
					color: white;
				}
			}

			.checkbox-panel {
				width: 100%;
				padding: 0 18px;

				.checkbox-panel-item {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}

	::v-deep .uni-checkbox-input {
		border-radius: 50% !important;
	}
</style>