rtk-wms-uniapp/pages/workbranch/warehouse/trestle/boxNumberOutStacking.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="select-item">
          <text class="store-text">出栈栈板</text>
          <view class="custom-select">
            <uni-data-select
              v-model="submitParams.wmsPalletId"
              :localdata="locationList"
              @change="handleSelect"
            />
          </view>
        </view>
        <view v-if="boxNumberList.length > 0">
          <view
            v-for="(item, key) in boxNumberList"
            :key="key"
            class="card-list-flexbox"
            @click="handleCheckedItem(item)"
          >
            <view v-if="computedChecked(item.id)" class="checkbox-cubes">
              <view class="checkbox-box" />
              <view class="checkbox-icon">✔</view>
            </view>
            <view class="card-list-item">
              <text class="text-1 gui-color-gray">{{ item.materialLots }}</text>
            </view>
            <view class="card-list-item">
              <text class="text-1 gui-color-gray">物料名称</text>
              <text class="text-2 gui-color-gray">{{ item.materialName }}</text>
            </view>
            <view class="card-list-item">
              <text class="text-1 gui-color-gray">批次数量</text>
              <text class="text-2 gui-color-gray">{{ computedMaterialQty(item.qty) }}</text>
            </view>
          </view>
        </view>
        <view v-else>
          <view class="bg-image">
            <image src="@/static/empty.png" mode="heightFix" />
            <text>这里什么都没有...</text>
          </view>
        </view>
      </view>
      <gui-right-menus>
        <!-- 扩展按钮 -->
        <template #menus-more>
          <view
            hover-class="gui-tap"
            class="menu-items gui-bg-primary gui-flex gui-columns gui-justify-content-center"
            @click="handleComplute"
          >
            <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 {
  onReachBottom
} from '@dcloudio/uni-app'
import {
  ref,
  defineComponent,
  computed
} from 'vue'
export default defineComponent({
  setup() {
    const checkboxParams = ref({
      checkboxIds: [],
      checkedIds: []
    })
    const computedMaterialQty = computed(() => {
      return item => {
        return item / 10000 > 1 ? (item / 10000) + 'w' : item
      }
    })
    const computedChecked = computed(() => {
      return item => checkboxParams.value.checkedIds.includes(item)
    })
    const submitParams = ref({
      wmsPalletId: '', // 栈板ID
      materialLots: [] // 选中的字段
    })
    const queryParams = ref({
      pageSize: 20,
      pageNo: 1
    })
    const locationList = ref([])
    const boxNumberList = ref([])
    uni.$reqGet('getWmsTrestleDropDownList')
      .then(({
        data,
        msg
      }) => {
        if (data?.length > 0) {
          for (let x = 0; x < data.length; x++) {
            locationList.value.push({
              text: data[x].name,
              value: data[x].id
            })
          }
        }
      })

    // 多选框选中事件
    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 handleSelect = function(wmsPalletId) {
      uni.$reqGet('pdaMaterialsPage', {
        ...queryParams.value,
        wmsPalletId
      })
        .then(({
          data
        }) => {
          submitParams.value.materialLots.length = 0
          boxNumberList.value.length = 0
          checkboxParams.value.checkedIds.length = 0
          boxNumberList.value = data?.list ?? []
          checkboxParams.value.checkboxIds = Array.from(boxNumberList.value, item => item
            ?.id)
        })
    }
    const handleComplute = function() {
      if (submitParams.value.wmsPalletId) {
        if (checkboxParams.value.checkedIds.length === 0) {
          uni.$grace.msg('请选择箱号')
          return
        }
        const ids = checkboxParams.value.checkedIds.toString(',')
        uni.$reqDelete('pdaDeleteBatch', {
          ids
        })
          .then(({
            code,
            data,
            msg
          }) => {
            if (code === 0) {
              uni.$grace.msg('出栈成功')
              setTimeout(() => {
                uni.redirectTo({
                  url: '/pages/workbranch/warehouse/trestle/boxNumberOutStacking'
                })
              }, 500)
            } else {
              uni.$grace.msg(msg)
            }
          })
      } else {
        uni.$grace.msg('请先选择栈板')
      }
    }

    const goBack = function() {
      uni.$goBack('/pages/workbranch/warehouse/trestle/trestleList')
    }

    // uniapp移动端触底事件
    onReachBottom(() => {
      queryParams.value.pageNo += 1
      uni.$reqGet('pdaMaterialsPage', queryParams.value)
        .then(({
          data
        }) => {
          Array.prototype.push.call(boxNumberList.value, ...data?.list ?? [])
          Array.prototype.push.call(checkboxParams.value.checkboxIds, ...Array.from(data
            ?.list, item => item
            ?.id))
        })
    })
    return {
      submitParams,
      locationList,
      boxNumberList,
      handleComplute,
      goBack,
      computedMaterialQty,
      computedChecked,
      handleCheckedItem,
      handleSelect
    }
  }
})
</script>

<style lang="scss" scoped>
	.gui-sbody {
		font-size: 14px;
		background-color: rgba(234, 239, 242, 1);
	}

	.gui-header-leader-btns {
		color: black;
		font-size: 28px !important;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}

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

	.gui-button-mini {
		line-height: 32px !important;
		height: 32px !important;
		width: 160rpx !important;
		margin-right: 34rpx;

		.gui-button-text-mini {
			line-height: 32px;
		}
	}

	.select-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		padding: 12px;
		background-color: white;

		.store-text {
			width: 80px;
			text-align: center;
			margin-right: 14px;
		}

		.custom-select {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			line-height: 40px;
			width: 100%;
			min-width: 275px;
		}
	}

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

	.card-list-flexbox {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		margin: 0 2px 4px 2px;

		.card-list-item,
		.card-list-item-operation {
			width: 750rpx;
			height: 40px;
			margin-bottom: 3rpx;
			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 12px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

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

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

		.card-list-item-operation {
			justify-content: flex-end;
		}

		.card-list-item:nth-of-type(1) {

			.text-1 {
				font-weight: bold;
				color: black !important;
			}

			.text-1::before {
				content: "";
				width: 4px;
				height: 20px;
				border-radius: 4px;
				margin-right: 4px;
				background-color: skyblue;
			}
		}

	}

	.checkbox-cubes {
		width: 30px;
		height: 124px;
		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;
		}
	}
</style>