heli-mes/mes-ui/mini-app/src/pages/moJuSheJiReport/components/dataItem.vue

<script setup lang="ts">
import { onMounted, computed, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getListAPI, getDictAPI,postOperateAPIZF,updateBaoGong } from '@/services/moJuSheJiReport'
import { useLoginStore } from '@/stores/modules/login'
import { formatDate } from '@/utils/index'
import popup from './popup.vue';
import { nextTick } from 'vue';


const userStore = useLoginStore() 
const userId = userStore.userInfo.userId

// 是否分页结束
const isFinish = ref(false)
// 是否触发下拉刷新
const isTriggered = ref(false)
const progress = ref(0)
const imageLink = ref(0)

const selectedId = ref(null);  // 定义 selectedId 变量

// 定义 porps
const props = defineProps<{
  orderState: string
}>()

const statusText = computed(() => {
  const text = props.orderState == '0' ? '上报进度' : '查看'
  return text
})
// 是否加载中标记，用于防止滚动触底触发多次请求
const isLoading = ref(false)
// 请求参数
const queryParams: Required<any> = {
  pageNo: 1,
        pageSize: 5,
        owner: userId,
        //
        procedureStatusList: props.orderState,
        // 工序完成状态列表
        dispatchType: "ASSEMBLE",
        // 派工类型
        isReport: 1,
        pgType: 0,
}
const dataList = ref([])
const showPopup = ref(false);

const onPopupClose = (progress, imageLink) => {

  // 这里可以添加关闭弹出框时的逻辑，例如重置某些状态
  showPopup.value = false;
  
  
  const zid = selectedId.value;
  callApi(zid,progress,imageLink)
	
  
  
  
  
  /* */
  
}; 
  const callApi = async (zid: Number,progress :Number,imageLink: String) => {
	  console.log(progress);
	  if(progress>0){
	  	//调用报工接口，将录入的进度、图片链接和id传入进去
	  	 await updateBaoGong(zid,progress,imageLink);
	  	isFinish.value = false;
	  	isLoading.value = false;
	  	queryParams.pageNo = 1;
	  	dataList.value = [];
	  	await getListData(); 
	  }else{
		  uni.showToast({
		          title: '设计进度填写时不能为0%，请重新填写后提交！',
		          icon: 'none', // 显示纯文本时icon设为none
		          duration: 2000
		        });
	  } 
  }

const getListData = async () => {
	queryParams.pgType = props.orderState;
  // 如果数据出于加载中，退出函数
  if (isLoading.value) return
  if (isFinish.value === true) {
    return uni.showToast({ icon: 'none', title: '没有更多数据~' })
  }
  
  isLoading.value = true
  // 发送请求
  const data = await getListAPI(queryParams)
  isLoading.value = false
  data.list.forEach((e) => {
	  
	e.twoDimDate = formatDate(e.twoDimDate, "YYYY-MM-DD"); 
	e.threeDimDate = formatDate(e.threeDimDate, "YYYY-MM-DD");
	e.endTime = formatDate(e.endTime, "YYYY-MM-DD");
    
    
    
  })
  // 数组追加
  dataList.value.push(...data.list)
  // 分页条件
  if (queryParams.pageNo < data.total) {
    // 页码累加
    queryParams.pageNo++
  } else {
    // 分页已结束
    isFinish.value = true
  }
}

onMounted(async () => {
  await getListData()
})

onShow(async () => {
  isFinish.value = false
  isLoading.value = false
  queryParams.pageNo = 1
  dataList.value = []
  await getListData()
})



const handleDetail =async  (item) => { 
	progress.value = 0;
	imageLink.value = item.blueprintLink;
	await nextTick(); // 等待数据更新和DOM渲染
	 showPopup.value = true;
	selectedId.value = item.id;  // 为 selectedId 赋值
 /* const url = `/pages/zjPgMaster/zjPgMaster-detail?id=${item.id}`
  uni.navigateTo({ url }) */
}

/* const viewClick = (item) => {
  const params = {
    id: item.id
  }
  const data = await postOperateAPIZF(params);
  await getListData();
} */
//作废
const viewClick = async (item) => {
	const params = {
	  id: item.id
	};
        const data = await postOperateAPIZF(params);
        if(data >0){
        	const url = `/pages/zjPgMaster/zjPgMaster`
        	
        	uni.navigateTo({ url })
        }
    };


// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开始动画
  isTriggered.value = true
  // 重置数据
  queryParams.pageNo = 1
  dataList.value = []
  isFinish.value = false
  // 加载数据
  await getListData()
  // 关闭动画
  isTriggered.value = false
}
// const searchVal = ref('')
// const dataListDefault = ref([])
// const handleSearch = async () => {
//   const code = searchVal.value
//   if (code) {
//     dataListDefault.value = dataList.value
//     dataList.value = dataList.value.filter((e) => {
//       return e.code == code
//     })
//   } else {
//     dataList.value = dataListDefault.value
//   }
// }
</script>
<template>
  <view class="cont">
    <!-- <view class="search" v-if="dataList.length > 5">
      <view class="title"></view>
      <input class="uni-input" v-model="searchVal" @change="handleSearch" placeholder="根据编号搜索" />
    </view> -->
    <scroll-view enable-back-to-top scroll-y class="data-list" refresher-enabled :refresher-triggered="isTriggered"
      @refresherrefresh="onRefresherrefresh" @scrolltolower="getListData">
      <view class="item" v-for="item in dataList" :key="item.id" >
        <view class="hd">
          <view class="num">项目编号：</view>
		  <view class="statusLabel"> {{item.projectCode}} </view>
		  <view class="statusTexthd" v-if="item.processDesignType == 'BLUEPRINT_2D'"> 2D设计 </view>
		   <view class="statusTexthd" v-else-if ="item.processDesignType == 'BLUEPRINT_3D'"> 3D设计 </view>
		  <view class="statusTexthd" v-else-if="item.processDesignType == 'BLUEPRINT_WORKBLANK'"> 毛坯设计 </view>
		  <view class="statusTexthd" v-else-if="item.processDesignType == 'BLUEPRINT_FOUNDRY_TECHNOLOGY'"> 铸造设计 </view> 

        </view> 
        <view class="md">
          <view class="product-item">项目：{{ item.projectName }}</view>
          <view class="product-item">子项目：{{ item.projectSubCode || "" }}</view>
		  <view class="product-item">客户名称：{{ item.customerName }}</view>
		  <view class="product-item">工艺起止日期：{{item.twoDimDate}} ～ {{item.threeDimDate}} </view>   
		  <view class="product-item">最新进度：{{item.progress}}%</view>
          <!-- <view class="product-item">预计生产日期：{{ item.startTime }} ～ {{ item.entTime }}</view> -->
        </view>
        <view class="statusText" @click="handleDetail(item)">{{ statusText }}</view>
      </view>
      <!-- 底部提示文字 -->
      <view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
        {{ isFinish ? '没有更多数据~' : '正在加载...' }}
      </view>
    </scroll-view>
	<!-- <popup  :show="showPopup" :progress="0.0" :imageLink="''" @close="onPopupClose" /> -->
	 <popup :showPopup="showPopup" :progress="progress" :imageLink="imageLink" @close="onPopupClose" />   
  </view>
</template>

<style lang="scss">
// 订单列表
.search {
  padding: 4rpx;
  width: 80%;
  margin: 30rpx auto;

  .uni-input {
    border: 1px solid #D1D6DB;
    height: 60rpx;
    line-height: 60rpx;
    padding: 4rpx 10rpx;
    font-size: 32rpx;
    border-radius: 6rpx;
  }
}

.data-list {
  height: 90vh;
  .item {
    position: relative;
    padding: 20rpx 0;
    margin: 20rpx 20rpx;
    border-radius: 10rpx;
    background-color: #fff;

    .hd {
      padding: 10rpx;
      font-size: 28rpx;
      display: flex;

      .statusLabel {
        font-size: 24rpx;
        color: #737D88;
      }
	  .statusLabelzf {
	    font-size: 24rpx;
		position: absolute;
		right: 30rpx;
		top: 15rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		padding: 10rpx 30rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		background: linear-gradient(149deg, #ffff00 4%, #cfcf00 98%);
		color: #fff;
	    
	  }
    }

    .md {
      position: relative;
      padding: 10rpx;
      min-height: 100rpx;
      font-size: 28rpx;
      border-top: 2rpx solid #F2F2F2;

      .product-item {
        margin: 20rpx 0;
        display: flex;
        align-items: center;
        color: #737D88
      }
      .product-row {
        margin: 20rpx 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #737D88;
        .row-item {
          flex: 1;
          .label {
              margin-bottom: 10rpx;
            }
          
            .val {
              color: #1D2129;
              &.high-color {
                color: #00B42A
              }
            }
        }
        
      }
    }

    .statusText {
      position: absolute;
        right: 30rpx;
        top: 100rpx;
        border-radius: 10rpx;
        font-size: 24rpx;
        padding: 10rpx 30rpx;
        border-radius: 10rpx;
        font-size: 24rpx;
        background: linear-gradient(149deg, #d4e62d 4%, #c5ab1a 98%);
        color: #fff;
    }
	.statusTexthd {
	  position: absolute;
	  right: 30rpx;
	  top: 13rpx;
	  border-radius: 10rpx;
	  font-size: 24rpx;
	  padding: 10rpx 30rpx;
	  border-radius: 10rpx;
	  font-size: 24rpx;
	  background:  #2d9ce6;
	  color: #fff;
	}

    &:last-child {
      padding-bottom: 40rpx;
    }
	
  }

  .status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #999;
    margin-bottom: 15rpx;

    .date {
      color: #666;
      flex: 1;
    }

    .primary {
      color: #ff9240;
    }

    .icon-delete {
      line-height: 1;
      margin-left: 10rpx;
      padding-left: 10rpx;
      border-left: 1rpx solid #e3e3e3;
    }
  }

  .goods {
    display: flex;
    margin-bottom: 20rpx;

    .cover {
      width: 170rpx;
      height: 170rpx;
      margin-right: 20rpx;
      border-radius: 10rpx;
      overflow: hidden;
      position: relative;

      .image {
        width: 170rpx;
        height: 170rpx;
      }
    }

    .quantity {
      position: absolute;
      bottom: 0;
      right: 0;
      line-height: 1;
      padding: 6rpx 4rpx 6rpx 8rpx;
      font-size: 24rpx;
      color: #fff;
      border-radius: 10rpx 0 0 0;
      background-color: rgba(0, 0, 0, 0.6);
    }

    .meta {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .name {
      height: 80rpx;
      font-size: 26rpx;
      color: #444;
    }

    .type {
      line-height: 1.8;
      padding: 0 15rpx;
      margin-top: 10rpx;
      font-size: 24rpx;
      align-self: flex-start;
      border-radius: 4rpx;
      color: #888;
      background-color: #f7f7f8;
    }

    .more {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22rpx;
      color: #333;
    }
  }

  .payment {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    line-height: 1;
    padding: 20rpx 0;
    text-align: right;
    color: #999;
    font-size: 28rpx;
    border-bottom: 1rpx solid #eee;

    .quantity {
      font-size: 24rpx;
      margin-right: 16rpx;
    }

    .amount {
      color: #444;
      margin-left: 6rpx;
    }

    .symbol {
      font-size: 20rpx;
    }
  }

  .action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 20rpx;

    .button {
      width: 180rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 20rpx;
      border-radius: 60rpx;
      border: 1rpx solid #ccc;
      font-size: 26rpx;
      color: #444;
    }

    .secondary {
      color: #3775F6;
      border-color: #3775F6;
    }

    .primary {
      color: #fff;
      background-color: #3775F6;
      border-color: #3775F6;
    }
  }

  .loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
  }
}
</style>import type { stringify } from 'querystring';