rtk-wms-uniapp/pages/workbranch/warehouse/productionIssue/demandDetails.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:34rpx;"
          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 v-if="cardList.length > 0" class="list-panel">
          <view v-for="(item, key) in cardList" :key="key" class="panel">
            <view class="panel-row">
              <text>物料编码</text>
              <text>{{ item.materialNo }}</text>
            </view>
            <view class="panel-row">
              <text>物料名称</text>
              <text>{{ item.materialName }}</text>
            </view>
            <view class="panel-row">
              <text>需求数量</text>
              <text>{{ ~~item.needQty }}</text>
            </view>
            <view class="panel-row">
              <text>已发数量</text>
              <text>{{ ~~item.totalSendCount }}</text>
            </view>
            <view class="panel-row">
              <text>待发数量</text>
              <text>{{ ~~item.overplusSendCount }}</text>
            </view>
            <view class="panel-row">
              <text>本次发料</text>
              <text>{{ ~~item.currentSendCount }}</text>
            </view>
            <view class="panel-row-operation">
              <text class="tag-skyblue" @click="handleNavigateTo(item)">发料扫描</text>
            </view>
            <Modal
              v-model:modalState="modalState"
              v-model:title="modalTitle"
              v-model:content="modalContent"
              @complate="complate"
            />
          </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-green gui-flex gui-columns gui-justify-content-center"
            @click="modalState = true"
          >
            <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 {
  ref,
  defineComponent
} from 'vue'
import Modal from '@/components/modal.vue'
import {
  onReachBottom
} from '@dcloudio/uni-app'
export default defineComponent({
  name: 'DemanDetails',
  components: {
    Modal
  },
  setup(options) {
    const issueId = options.issueId ?? ''
    const modalState = ref(false)
    const modalTitle = ref('警告')
    const modalContent = ref('确定要完成发料吗？')
    // 传入模态对话框当中的索引，用于列表的索引查找
    const cardList = ref([])
    const queryParams = ref({
      pageSize: 10,
      pageNo: 1
    })

    // 需求明细
    uni.$reqGet('demandDetail', {
      masterId: issueId,
      ...queryParams.value
    })
      .then(({
        data
      }) => {
        cardList.value = data.list ?? []
      })

    const goBack = function() {
      uni.$goBack('/pages/workbranch/warehouse/productionIssue/productionIssue')
    }
    const handleNavigateTo = function(item) {
      uni.navigateTo({
        url: `/pages/workbranch/warehouse/productionIssue/issuePage?id=${item?.id}`
      })
    }
    const complate = function() {
      uni.$reqPut('demandDetailFinishIssue', {
        masterId: issueId
      })
        .then(({
          code,
          msg
        }) => {
          if (code === 0) {
            uni.$grace.msg('已完成发料')
          } else {
            uni.$grace.msg(msg)
          }
        })
    }

    // uniapp移动端触底事件
    onReachBottom(() => {
      queryParams.value.pageNo += 1
      // 生产发料主列表
      uni.$reqGet('demandDetail', {
        masterId: issueId,
        ...queryParams.value
      })
        .then(({
          data
        }) => {
          Array.prototype.push.call(cardList.value, ...data?.list ?? [])
        })
    })
    return {
      goBack,
      modalState,
      modalTitle,
      modalContent,
      cardList,
      handleNavigateTo,
      complate
    }
  }
})
</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;
	}
	
	.tag-limegreen,
	.tag-skyblue {
		padding: 0 8px;
		margin: 4px;
		border-radius: 5px;
		font-size: 12px;
		color: white;
	}

	.tag-limegreen {
		background-color: #2fb657;
	}

	.tag-skyblue {
		background-color: #00a0e9;
	}
</style>