rtk-wms-uniapp/pages/workbranch/warehouse/production/mixMaterialDetail.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="table-title">
          <span>资源清单</span>
        </view>
        <view v-if="cardList?.length > 0">
          <view
            v-for="item in cardList"
            :key="item.id"
            class="card-list-flexbox"
            @click="handleShowResetMaterialNumDialog(item)"
          >
            <view class="card-list-item">
              <text class="text-1 gui-color-gray">{{ item.workOrderNo }}</text>
              <text class="text-2 gui-color-gray font-icons">更改应备量&#xe66b;</text>
            </view>
            <view class="card-list-item">
              <text class="text-1 gui-color-gray">用料清单号</text>
              <text class="text-2 gui-color-gray">{{ item.workOrderBomNo }}</text>
            </view>
            <view class="card-list-item">
              <text class="text-1 gui-color-gray">应备数量</text>
              <text class="text-2" style="color: orange;font-weight: bold;">{{ item.nowSendQty }}</text>
            </view>
            <view class="card-list-item">
              <text class="text-1 gui-color-gray">BOM规格</text>
              <text class="text-2" style="color: orange;font-weight: bold;">{{ item.bomModel }}</text>
            </view>
          </view>
        </view>
        <view v-else>
          <view class="bg-image">
            <image src="@/static/empty.png" mode="heightFix" />
            <text>这里什么都没有...</text>
          </view>
        </view>
        <uni-popup ref="inputDialog" type="dialog">
          <uni-popup-dialog
            ref="inputClose"
            mode="input"
            title="更改物料应备数"
            :value="materialObject.num"
            placeholder="请输入内容"
            @confirm="handleResetMaterialNum"
          />
        </uni-popup>
      </view>
    </template>
  </gui-page>
</template>

<script>
import {
  onReachBottom
} from '@dcloudio/uni-app'
import {
  ref,
  defineComponent,
  onMounted,
  onBeforeMount
} from 'vue'
export default defineComponent({
  setup() {
    const parentRow = uni.getStorageSync('mixMaterialDetail') ?? {}
    const detailId = ref()
    const materialObject = ref({
      id: '',
      num: 0 // 更改应备数
    })
    const inputDialog = ref()
    const queryParams = ref({
      pageSize: 10,
      pageNo: 1,
      wmsSyntheticalSendDetailId: ''
    })
    const cardList = ref([])

    onMounted(() => {
      search()
    })

    onBeforeMount(() => {
      detailId.value = JSON.parse(parentRow)?.id
    })

    const search = function() {
      uni.$reqGet('getSyntheticalSendResourcePage', {
        ...queryParams.value,
        wmsSyntheticalSendDetailId: detailId.value
      })
        .then(({
          data
        }) => {
          cardList.value = data?.list
        })
    }

    const goBack = function() {
      uni.removeStorageSync('mixMaterialDetail')
      uni.$goBack('/pages/workbranch/warehouse/production/scanMixMaterials')
    }

    const handleShowResetMaterialNumDialog = function(ret) {
      materialObject.value.id = ret?.id
      materialObject.value.num = ret?.nowSendQty
      inputDialog.value.open()
    }

    const handleResetMaterialNum = function(ret) {
      if (![NaN, undefined, null, ''].includes(Number(ret))) {
        uni.$reqPut('updateSyntheticalSendResource', {
          id: materialObject.value.id,
          nowSendQty: ret
        })
          .then(({
            code,
            data,
            msg
          }) => {
            if (code === 0) {
              uni.showToast({
                title: '更新成功',
                duration: 2000,
                icon: 'none'
              })
              queryParams.value.pageNo = 1
              search()
            } else {
              uni.showToast({
                title: msg,
                duration: 2000,
                icon: 'none'
              })
            }
          })
      }
    }

    // uniapp移动端触底事件
    onReachBottom(() => {
      queryParams.value.pageNo += 1
      uni.$reqGet('getSyntheticalSendResourcePage', {
        ...queryParams.value,
        wmsSyntheticalSendDetailId: detailId.value
      })
        .then(({
          data
        }) => {
          Array.prototype.push.call(cardList.value, ...data?.list ?? [])
        })
    })
    return {
      goBack,
      cardList,
      search,
      queryParams,
      parentRow,
      inputDialog,
      materialObject,
      handleResetMaterialNum,
      handleShowResetMaterialNumDialog
    }
  }
})
</script>

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

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

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

		.card-list-item {
			width: 750rpx;
			min-height: 40px;
			margin: 2rpx 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;

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

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

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

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

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

			.text-2 {
				flex: 4;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				color: limegreen !important;
			}
		}

	}

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

	.table-title {
		height: 40px;
		line-height: 40px;
		margin: 0 0 4px 0;
		padding: 0 12px;
		font-size: 16px;
		font-weight: bold;
		background-color: white;
	}
</style>