feat：任务/产品查看更多页面
parent
d3dfc45074
commit
b1e6d3af72
@ -0,0 +1,273 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page-container">
|
||||||
|
<view class="task-list">
|
||||||
|
<view v-for="(task, index) in taskList" :key="index" class="task-card" @click="handleTaskClick(task)">
|
||||||
|
<view class="task-header">
|
||||||
|
<text class="task-code">{{ task.code }}</text>
|
||||||
|
<view class="task-status" :class="'status-' + task.statusType">
|
||||||
|
<text>{{ task.statusText }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="task-body">
|
||||||
|
<view class="task-row">
|
||||||
|
<text class="task-label">{{ t('taskList.taskType') }}</text>
|
||||||
|
<text class="task-value">{{ task.taskType || '-' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="task-row">
|
||||||
|
<text class="task-label">{{ t('taskList.orderDate') }}</text>
|
||||||
|
<text class="task-value">{{ task.orderDateText }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="task-row">
|
||||||
|
<text class="task-label">{{ t('taskList.deliveryDate') }}</text>
|
||||||
|
<text class="task-value">{{ task.deliveryDateText }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="task-row">
|
||||||
|
<text class="task-label">{{ t('taskList.totalNumber') }}</text>
|
||||||
|
<text class="task-value task-num">{{ task.totalNumber }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="task-row">
|
||||||
|
<text class="task-label">{{ t('taskList.planNumber') }}</text>
|
||||||
|
<text class="task-value task-num">{{ task.planNumber }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="task-row">
|
||||||
|
<text class="task-label">{{ t('taskList.unPlanNumber') }}</text>
|
||||||
|
<text class="task-value task-num">{{ task.unPlanNumber }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="task-row">
|
||||||
|
<text class="task-label">{{ t('taskList.storedPlanNumber') }}</text>
|
||||||
|
<text class="task-value task-num">{{ task.storedPlanNumber }}</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="task.isUrgent === 1" class="task-urgent">
|
||||||
|
<text class="urgent-text">{{ t('taskList.urgent') }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="loading" class="loading-state">
|
||||||
|
<text class="loading-text">{{ t('functionCommon.loading') }}</text>
|
||||||
|
</view>
|
||||||
|
<view v-else-if="taskList.length === 0" class="empty-state">
|
||||||
|
<text class="empty-text">{{ t('taskList.noData') }}</text>
|
||||||
|
</view>
|
||||||
|
<view v-else-if="noMore" class="no-more-state">
|
||||||
|
<text class="no-more-text">{{ t('functionCommon.noMoreData') }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { onReachBottom, onShow } from '@dcloudio/uni-app'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import request from '@/utils/request'
|
||||||
|
import { setNavigationTitle } from '@/locales'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const taskList = reactive([])
|
||||||
|
const pageNo = ref(1)
|
||||||
|
const pageSize = ref(10)
|
||||||
|
const total = ref(0)
|
||||||
|
const loading = ref(false)
|
||||||
|
const noMore = ref(false)
|
||||||
|
|
||||||
|
function formatDate(dateStr) {
|
||||||
|
if (!dateStr) return '-'
|
||||||
|
const date = new Date(dateStr)
|
||||||
|
if (Number.isNaN(date.getTime())) return '-'
|
||||||
|
const pad2 = (n) => String(n).padStart(2, '0')
|
||||||
|
return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapTaskStatus(status) {
|
||||||
|
const v = status === '' || status === null || status === undefined ? undefined : String(status)
|
||||||
|
if (v === '1') return { statusText: t('dashboard.pending'), statusType: 'pending' }
|
||||||
|
if (v === '2') return { statusText: t('dashboard.running'), statusType: 'running' }
|
||||||
|
if (v === '3') return { statusText: t('dashboard.finished'), statusType: 'finished' }
|
||||||
|
return { statusText: '-', statusType: 'pending' }
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleTaskClick(task) {
|
||||||
|
uni.showToast({ title: t('taskList.viewTask', { code: task.code }), icon: 'none' })
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadTaskList(reset = false) {
|
||||||
|
if (loading.value) return
|
||||||
|
if (reset) {
|
||||||
|
pageNo.value = 1
|
||||||
|
noMore.value = false
|
||||||
|
taskList.splice(0, taskList.length)
|
||||||
|
}
|
||||||
|
if (noMore.value && !reset) return
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const res = await request({
|
||||||
|
url: '/admin-api/mes/task/pagePlanTask',
|
||||||
|
method: 'get',
|
||||||
|
params: { pageNo: pageNo.value, pageSize: pageSize.value }
|
||||||
|
})
|
||||||
|
const list = res?.data?.list || []
|
||||||
|
total.value = res?.data?.total || 0
|
||||||
|
const mapped = list.map((item) => {
|
||||||
|
const statusInfo = mapTaskStatus(item?.status)
|
||||||
|
return {
|
||||||
|
id: item?.id,
|
||||||
|
code: item?.code ?? '-',
|
||||||
|
taskType: item?.taskType ?? '-',
|
||||||
|
orderDateText: formatDate(item?.orderDate),
|
||||||
|
deliveryDateText: formatDate(item?.deliveryDate),
|
||||||
|
isUrgent: item?.isUrgent,
|
||||||
|
isScheduled: item?.isScheduled,
|
||||||
|
status: item?.status,
|
||||||
|
statusText: statusInfo.statusText,
|
||||||
|
statusType: statusInfo.statusType,
|
||||||
|
totalNumber: item?.totalNumber ?? 0,
|
||||||
|
planNumber: item?.planNumber ?? 0,
|
||||||
|
unPlanNumber: item?.unPlanNumber ?? 0,
|
||||||
|
storedPlanNumber: item?.storedPlanNumber ?? 0,
|
||||||
|
remark: item?.remark ?? ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
taskList.splice(taskList.length, 0, ...mapped)
|
||||||
|
if (taskList.length >= total.value) {
|
||||||
|
noMore.value = true
|
||||||
|
} else {
|
||||||
|
pageNo.value++
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadTaskList(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
onReachBottom(() => {
|
||||||
|
loadTaskList()
|
||||||
|
})
|
||||||
|
|
||||||
|
onShow(() => {
|
||||||
|
setNavigationTitle('dashboard.productionPlan')
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
padding: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #e8f4ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-code {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1a3a5c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-status {
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-pending {
|
||||||
|
background: rgba(255, 140, 0, 0.15);
|
||||||
|
color: #ff8c00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-running {
|
||||||
|
background: rgba(24, 188, 55, 0.15);
|
||||||
|
color: #18bc37;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-finished {
|
||||||
|
background: rgba(74, 144, 194, 0.15);
|
||||||
|
color: #4a90c2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-value {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-num {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1a3a5c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-urgent {
|
||||||
|
margin-top: 12rpx;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
background: rgba(255, 59, 48, 0.1);
|
||||||
|
border-radius: 8rpx;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.urgent-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #ff3b30;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-state,
|
||||||
|
.empty-state,
|
||||||
|
.no-more-state {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-text,
|
||||||
|
.empty-text,
|
||||||
|
.no-more-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue