450 lines
10 KiB
Vue
450 lines
10 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, computed, ref } from 'vue'
|
||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||
import { getListAPI, getDictAPI,postOperateAPIZF } from '@/services/pgMaster'
|
||
import { useLoginStore } from '@/stores/modules/login'
|
||
import { formatDate } from '@/utils/index'
|
||
|
||
const userStore = useLoginStore()
|
||
const userId = userStore.userInfo.userId
|
||
|
||
// 是否分页结束
|
||
const isFinish = ref(false)
|
||
// 是否触发下拉刷新
|
||
const isTriggered = ref(false)
|
||
// 定义 porps
|
||
const props = defineProps<{
|
||
orderState: string
|
||
}>()
|
||
|
||
const statusText = computed(() => {
|
||
const text = props.orderState == '0,1' ? '处理' : '查看'
|
||
return text
|
||
})
|
||
// 是否加载中标记，用于防止滚动触底触发多次请求
|
||
const isLoading = ref(false)
|
||
// 请求参数
|
||
const queryParams: Required<any> = {
|
||
pageNo: 1,
|
||
pageSize: 5,
|
||
detilUser: null,
|
||
//
|
||
pgType: 0,
|
||
// 工序完成状态列表
|
||
dispatchType: "ASSEMBLE",
|
||
// 派工类型
|
||
isReport: 1,
|
||
// 是否需要报工
|
||
dispatchStatus:2
|
||
}
|
||
const dataList = ref([])
|
||
const getListData = async () => {
|
||
console.log("props.orderState");
|
||
console.log(props.orderState);
|
||
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.orderTime = formatDate(e.orderTime, 'YYYY-MM-DD')
|
||
e.startTime = formatDate(e.startTime, 'YYYY-MM-DD')
|
||
e.entTime = formatDate(e.entTime, '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 viewClick = async (item) => {
|
||
const params = {
|
||
id: item.id
|
||
};
|
||
const data = await postOperateAPIZF(params);
|
||
console.log('返回数据');
|
||
console.log(data.id);
|
||
console.log(data);
|
||
if(data >0){
|
||
const url = `/pages/pgMaster/pgMaster`
|
||
uni.navigateTo({ url })
|
||
}
|
||
};
|
||
|
||
const handleDetail = (item) => {
|
||
const url = `/pages/pgMaster/pgMaster-detail?id=${item.id}`
|
||
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.pgNumber }} ）</view>
|
||
<view class="statusLabelzf" @click="viewClick(item)" v-if="item.pgType == 0" >
|
||
作废
|
||
</view>
|
||
</view>
|
||
<view class="md">
|
||
<view class="product-item">项目名称：{{ item.projectName }}</view>
|
||
<view class="product-item">子项目：{{ item.projectSubCode || '' }} {{' ' + item.projectSubName }}</view>
|
||
<view class="product-item">模型名称：{{ item.mouldName }}</view>
|
||
<!-- <view class="product-row">
|
||
<view class="row-item">
|
||
<view class="label">模型名称: {{ item.mouldName }}</view>
|
||
</view>
|
||
<view class="row-item">
|
||
<view class="label">派工工序: {{ item.procedureName }}</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="product-row">
|
||
<view class="row-item">
|
||
<view class="label">派工数量</view>
|
||
<view class="val">{{item.amount}}</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="product-row">
|
||
<!-- <view class="row-item">
|
||
<view class="label">预计工时</view>
|
||
<view class="val">{{ item.gongShi }}</view>
|
||
</view> -->
|
||
<view class="row-item">
|
||
<view class="label">总报工数量</view>
|
||
<view class="val high-color">{{item.amounts}}</view>
|
||
</view>
|
||
<view class="row-item">
|
||
<view class="label">总报工工时</view>
|
||
<view class="val high-color">{{ item.workTime }}</view>
|
||
</view>
|
||
</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>
|
||
</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, #2DACE6 4%, #356899 98%);
|
||
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';
|