rtk-wms-uniapp/pages/workbranch/production/IPQC/ipqcList.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="goHome"
        >&#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="search">
          <view class="search-card">
            <text style="font-size: 12px;">生产订单</text>
            <view class="custom-select">
              <uni-easyinput
                v-model="queryParams.erpOrderNo"
                focus
                type="text"
                placeholder="请输入订单编号"
              />
            </view>
          </view>
          <view class="search-card">
            <text>产品编号</text>
            <view class="custom-select">
              <uni-easyinput v-model="queryParams.materialNo" type="text" placeholder="请输入产品编号" />
            </view>
          </view>
          <view class="search-card">
            <text>创建时间</text>
            <view class="custom-select">
              <uni-datetime-picker
                v-model="queryParams.createTime"
                type="daterange"
                @change="handlePickerChange"
              />
            </view>
          </view>
          <view class="search-card">
            <text>产品名称</text>
            <view class="custom-select">
              <uni-easyinput v-model="queryParams.materialName" type="text" placeholder="请输入产品名称" />
            </view>
          </view>
          <view class="search-card">
            <view class="custom-select">
              <button type="primary" size="mini" @click="search">搜索</button>
            </view>
          </view>
        </view>
        <view v-if="cardList?.length > 0" class="list-panel">
          <view
            v-for="item in cardList"
            :key="item.id"
            class="panel"
            @click="handleToScanMaterials(item)"
          >
            <view class="panel-row">
              <text>{{ item.erpOrderNo }}</text>
              <text class="text-2 font-icons">开始执行&#xe66b;</text>
            </view>
            <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.materialAmount }}</text>
            </view>
          </view>
        </view>
        <view v-else>
          <view class="bg-image">
            <image src="@/static/empty.png" mode="heightFix" />
            <text>这里什么都没有...</text>
          </view>
        </view>
      </view>
    </template>
  </gui-page>
</template>

<script>
import {
  onReachBottom
} from '@dcloudio/uni-app'
import {
  ref,
  defineComponent,
  onMounted
} from 'vue'
export default defineComponent({
  setup() {
    const queryParams = ref({
      pageSize: 8,
      pageNo: 1,
      status: 1,
      erpOrderNo: '',
      materialNo: '',
      materialName: '',
      createTime: []
    })
    const cardList = ref([])
    const processList = ref([])
    const materialList = ref([])

    onMounted(() => {
      // uni.$reqGet("getProcessBaseList", queryParams.value)
      // 	.then(({
      // 		data,
      // 		msg
      // 	}) => {
      // 		if (data?.list.length > 0) {
      // 			data?.list.forEach(item => {
      // 				processList.value.push({
      // 					text: item.processName,
      // 					value: item.processNo
      // 				});
      // 			})
      // 		}
      // 	})
      // uni.$reqGet("getProcessMaterialList", queryParams.value)
      // 	.then((data) => {
      // 		if (data?.length > 0) {
      // 			data.forEach(item => {
      // 				materialList.value.push({
      // 					text: item.materialName,
      // 					value: item.materialNo
      // 				});
      // 			})
      // 		}
      // 	})
      search()
    })

    const search = function() {
      const params = {
        pageNo: queryParams.value.pageNo,
        pageSize: queryParams.value.pageSize,
        erpOrderNo: queryParams.value.erpOrderNo,
        materialNo: queryParams.value.materialNo,
        materialName: queryParams.value.materialName
        // 'createTime[0]': queryParams.value.createTime[0] ?? "",
        // 'createTime[1]': queryParams.value.createTime[1] ?? "",
      }
      uni.$reqGet('getProductionWorkOrderDetailPage', params)
        .then(({
          data,
          msg
        }) => {
          cardList.value = data?.list ?? []
        })
    }

    // const handleSelectProcess = function(e) {
    // 	queryParams.value.pageNo = 1;
    // 	queryParams.value.materialNo = "";
    // 	queryParams.value.processNo = e ?? "";
    // 	uni.$reqGet("getProcessMaterialList", queryParams.value)
    // 		.then((data) => {
    // 			materialList.value.length = 0;
    // 			if (data?.length > 0) {
    // 				data.forEach(item => {
    // 					materialList.value.push({
    // 						text: item.materialName,
    // 						value: item.materialNo
    // 					});
    // 				})
    // 			}
    // 		})
    // 	search();
    // }

    const handlePickerChange = function(e) {
      console.log('handlePickerChange事件:', e)
    }

    const handleSelectMaterial = function(e) {
      queryParams.value.pageNo = 1
      queryParams.value.materialNo = e ?? ''
      search()
    }

    const goHome = function() {
      uni.$goHome()
    }

    const handleToScanMaterials = function(params) {
      uni.navigateTo({
        url: `/pages/workbranch/production/IPQC/ipqcCheckout?params=${JSON.stringify(params)}`
      })
    }

    // uniapp移动端触底事件
    onReachBottom(() => {
      queryParams.value.pageNo += 1
      uni.$reqGet('getProductionWorkOrderDetailPage', queryParams.value)
        .then(({
          data
        }) => {
          Array.prototype.push.call(cardList.value, ...data?.list ?? [])
        })
    })
    return {
      search,
      goHome,
      queryParams,
      cardList,
      processList,
      materialList,
      handlePickerChange,
      // handleSelectProcess,
      handleSelectMaterial,
      handleToScanMaterials
    }
  }
})
</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;
	}

	.search {
		height: 160px;
		width: calc(100% - 48px);
		margin: 12px;
		padding: 0 12px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		align-items: center;
		border-radius: 6px;
		background-color: white;

		.search-card {
			width: 100%;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 3fr 7fr;
			align-items: center;

			text {
				display: flex;
				justify-content: center;
			}
		}
	}

	.custom-select {
		width: 100%;
	}
</style>