rtk-wms-uniapp/pages/workbranch/production/FQC/fqcList.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>
        <uni-popup ref="popup" background-color="#fff">
          <view class="popup-process-content">
            <view class="list-title" style="margin-bottom: 8px;">
              <span
                class="font-icons"
                style="font-size: 20px;color: #00a0e9;width: 40px;text-align: center;"
              >&#xe6a3;</span>
              <span>FQC检验报告列表</span>
            </view>
            <view>
              <view style="display: flex;align-items: center;margin: 45px 6px 0 6px;">
                <text style="font-size: 14px;">设置检验时间</text>
                <picker
                  mode="date"
                  style="width: 20%;min-width: 135px;height: 40px;display: flex;justify-content: center;align-items: center;"
                  :value="currentRow.oqcDate"
                  @change="bindTimeChange($event)"
                >
                  <view
                    class="uni-input"
                    style="
									width: 125px;
									height: 30px;
									display: flex;
									align-items: center;
									justify-content: center;
									border: 1px solid #6a6a6a;
									border-radius: 6px;
									font-size: 14px;
								"
                  >
                    {{ currentRow.oqcDate }}
                  </view>
                </picker>
              </view>
              <view class="grid-box">
                <view
                  v-for="(item, index) in dictDataList"
                  :key="index"
                  class="box"
                  style="background-color: rgb(44, 183, 85);"
                  @click="handleAddOQC(item.value)"
                >
                  <text>新增{{ item.label }}检验</text>
                </view>
              </view>
              <view class="grid-box">
                <view
                  v-for="(item, index) in oqcList"
                  :key="index"
                  class="box"
                  @click="handleClickOQCName(item)"
                >
                  <text>{{ item.ipqcDate }}</text>
                  <text>{{ item.classFlagNmae }}</text>
                </view>
              </view>
            </view>
          </view>
        </uni-popup>
      </view>
    </template>
  </gui-page>
</template>

<script>
import {
  onReachBottom
} from '@dcloudio/uni-app'
import {
  ref,
  defineComponent,
  computed,
  onMounted
} from 'vue'
import { formatDate } from '@/unit/default.js'
export default defineComponent({
  setup() {
    const popup = ref()
    const oqcList = ref([])
    const currentRow = ref()
    const dictDataList = ref([])
    const queryParams = ref({
      pageSize: 8,
      pageNo: 1,
      erpOrderNo: '',
      materialNo: '',
      materialName: '',
      createTime: []
    })
    const cardList = ref([])

    const computedCreateTime = computed(() => {
      return item => {
        if (![NaN, null, undefined, ''].includes(item)) {
          return formatDate(item)
        }
        return ''
      }
    })

    onMounted(() => {
      search()
      // 获取班别字典数据
      uni.$reqGet('getDictDataPage', {
        dictType: 'class_flag',
        pageNo: 1,
        pageSize: 100
      })
        .then(({
          code,
          data,
          msg
        }) => {
          dictDataList.value = data?.list ?? []
        })
    })

    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 goHome = function() {
      uni.$goHome()
    }

    const handleToScanMaterials = function(item) {
      if (popup.value?.showPopup === false) {
        popup.value.open('bottom')
      }
      currentRow.value = item
      uni.$reqGet('getInComingReceiptInspectionList', {
        detailErpId: item?.detailErpId
      })
        .then(({
          code,
          data,
          msg
        }) => {
          oqcList.value = data ?? []
        })
    }

    // 绑定日期时间事件
    const bindTimeChange = function(e) {
      currentRow.value.oqcDate = e.detail.value
    }

    const handleAddOQC = function(state) {
      // 调接口新增
      uni.$reqPost('createFQC', {
        detailErpId: currentRow.value?.detailErpId,
        processNo: 'FQC',
        materialNo: currentRow.value?.materialNo,
        classFlag: state,
        oqcDate: currentRow.value?.oqcDate
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            uni.navigateTo({
              url: `/pages/workbranch/production/FQC/fqcCheckout?params=${JSON.stringify({ id: data })}`
            })
          } else {
            uni.showToast({
              title: msg,
              duration: 2000,
              icon: 'none'
            })
          }
        })
    }

    // FQC检验列表选择事件
    const handleClickOQCName = function(params) {
      uni.navigateTo({
        url: `/pages/workbranch/production/FQC/fqcCheckout?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 {
      popup,
      goHome,
      search,
      cardList,
      oqcList,
      currentRow,
      dictDataList,
      handleAddOQC,
      queryParams,
      bindTimeChange,
      computedCreateTime,
      handleClickOQCName,
      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;
			}
		}
	}

	.popup-process-content {
		width: 100vw;
		height: 85vh;
		overflow-y: scroll;

		.list-title {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999;
			width: 100%;
			display: flex;
			align-items: center;
			height: 45px;
			line-height: 45px;
			font-size: 16px;
			font-weight: bold;
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;
			border-bottom: 1px solid #d4d4d4;
			background-color: white;

			.block {
				width: 6px;
				height: 60%;
				margin: 0 4px;
				background-color: rgb(0, 160, 233);
			}
		}

		.grid-box {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			
			.box {
				position: relative;
				height: 40px;
				padding: 10px 6px;
				border: 1px solid rgb(250, 250, 251);
				box-sizing: border-box;
				margin: 12px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 14px;
				font-weight: bold;
				border-radius: 4px;
				color: white;
				box-shadow: 0 3px 6px 0 rgba(121, 118, 118, 0.34);
				background-color: rgb(0, 160, 233);
			}
			
			.box::before {
				content: '';
				position: absolute;
				top: 20px;
				left: 0;
				bottom: 0;
				transform: translate(-50%, -50%);
				width: 12px;
				height: 12px;
				border-radius: 50%;
				z-index: 1;
				background-color: #ffffff;
			}
		}

		.grid-box:nth-of-type(1) {
			margin-top: 45px;
		}
	}
</style>