500 lines
12 KiB
Vue
500 lines
12 KiB
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';
|