预制组件列表
This commit is contained in:
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<view class="page-list">
|
||||
<!-- 标签页 -->
|
||||
<u-tabs
|
||||
:list="tabs"
|
||||
:current="activeTab"
|
||||
active-color="#3577FF"
|
||||
inactive-color="#666"
|
||||
:border-bottom="false"
|
||||
@change="onTabChange"
|
||||
></u-tabs>
|
||||
|
||||
<!-- 预制组件列表 -->
|
||||
<scroll-view class="list-scroll" scroll-y @scrolltolower="loadMore" refresher-enabled
|
||||
:refresher-triggered="refreshing" @refresh="handleRefresh">
|
||||
<view class="list-wrap">
|
||||
<view v-for="(item, index) in list" :key="index" class="card-item" @click="goDetail(item)">
|
||||
<view class="card-header">
|
||||
<text class="card-title">{{ item.DrawingName || '--' }}</text>
|
||||
<text class="card-tag" :class="'status-' + item.State">
|
||||
{{ getStatus(item.State) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="card-body">
|
||||
<view class="card-row">
|
||||
<text class="row-label">组件编号</text>
|
||||
<text class="row-value">{{ item.PipelineComponentCode || '--' }}</text>
|
||||
</view>
|
||||
<view class="card-row">
|
||||
<text class="row-label">物流箱号</text>
|
||||
<text class="row-value">{{ item.BoxNumber || '--' }}</text>
|
||||
</view>
|
||||
<view class="card-row">
|
||||
<text class="row-label">计划安装日期</text>
|
||||
<text class="row-value">{{ formatDate(item.PlanStartDate) || '--' }}</text>
|
||||
</view>
|
||||
<view class="card-row">
|
||||
<text class="row-label">验收人</text>
|
||||
<text class="row-value">{{ item.ReceiveMan || '--' }}</text>
|
||||
</view>
|
||||
<view class="card-row">
|
||||
<text class="row-label">验收日期</text>
|
||||
<text class="row-value">{{ formatDate(item.ReceiveDate) || '--' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<u-empty v-if="!loading && list.length === 0" mode="list" text="暂无数据"></u-empty>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="loading && list.length > 0" class="loading-more">
|
||||
<u-loading mode="circle" size="32"></u-loading>
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 没有更多 -->
|
||||
<view v-if="!loading && isFinished && list.length > 0" class="no-more">
|
||||
<text>— 没有更多了 —</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { useUserStore } from '@/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import {reqPipelineComponentList} from '@/api/hj'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const { currentProject } = storeToRefs(userStore)
|
||||
|
||||
// 标签页配置（u-tabs格式）
|
||||
const tabs = ref([
|
||||
{ name: '未验收', state: 0 },
|
||||
{ name: '已验收', state: 1 },
|
||||
{ name: '已出库', state: 2 },
|
||||
{ name: '待整改', state: -2 },
|
||||
{ name: '已整改', state: -1 }
|
||||
])
|
||||
|
||||
// 页面状态
|
||||
const activeTab = ref(0)
|
||||
const list = ref([])
|
||||
const loading = ref(false)
|
||||
const refreshing = ref(false)
|
||||
const isFinished = ref(false)
|
||||
const pageIndex = ref(1)
|
||||
const pageSize = ref(10)
|
||||
|
||||
// 获取状态值
|
||||
const getState = (index) => {
|
||||
if (index === 3) return -2
|
||||
if (index === 4) return -1
|
||||
return index
|
||||
}
|
||||
|
||||
// 状态映射
|
||||
const getStatus = (val) => {
|
||||
const map = {
|
||||
'0': '未验收',
|
||||
'1': '已验收',
|
||||
'2': '已出库',
|
||||
'-2': '待整改',
|
||||
'-1': '已整改'
|
||||
}
|
||||
return map[String(val)] || '--'
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 切换标签
|
||||
const onTabChange = (index) => {
|
||||
activeTab.value = index
|
||||
handleRefresh()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = async () => {
|
||||
if (loading.value || (!refreshing.value && isFinished.value)) return
|
||||
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
const params = {
|
||||
projectId: currentProject.value?.ProjectId || '',
|
||||
pageindex: pageIndex.value,
|
||||
pagesize: pageSize.value,
|
||||
state: getState(activeTab.value)
|
||||
}
|
||||
|
||||
const res = await reqPipelineComponentList(params)
|
||||
|
||||
if (res.code === 1) {
|
||||
const dataList = res.data?.getDataList || []
|
||||
if (dataList.length < pageSize.value) {
|
||||
isFinished.value = true
|
||||
}
|
||||
|
||||
if (refreshing.value) {
|
||||
list.value = dataList
|
||||
} else {
|
||||
list.value = [...list.value, ...dataList]
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取预制组件列表失败:', error)
|
||||
uni.showToast({
|
||||
title: '加载失败，请重试',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
loading.value = false
|
||||
refreshing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新
|
||||
const handleRefresh = () => {
|
||||
pageIndex.value = 1
|
||||
isFinished.value = false
|
||||
list.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
const loadMore = () => {
|
||||
if (!loading.value && !isFinished.value) {
|
||||
pageIndex.value++
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (date) => {
|
||||
if (!date) return ''
|
||||
return date
|
||||
}
|
||||
|
||||
// 跳转到详情
|
||||
const goDetail = (item) => {
|
||||
uni.navigateTo({
|
||||
url: `/pipe/precast/detail?id=${item.PipelineComponentId}&from=1`
|
||||
})
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onShow(() => {
|
||||
handleRefresh()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-list {
|
||||
min-height: 100vh;
|
||||
background: #f5f6f8;
|
||||
}
|
||||
|
||||
.list-scroll {
|
||||
height: calc(100vh - 180rpx);
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.card-tag.status--2 {
|
||||
background: rgba(255, 82, 82, 0.1);
|
||||
color: #ff5252;
|
||||
}
|
||||
|
||||
.card-tag.status--1 {
|
||||
background: rgba(255, 167, 38, 0.1);
|
||||
color: #ffa726;
|
||||
}
|
||||
|
||||
.loading-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30rpx;
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.no-more {
|
||||
text-align: center;
|
||||
padding: 30rpx;
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user