预制组件列表
This commit is contained in:
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view class="page-detail">
|
||||
<!-- 基本信息 -->
|
||||
<view class="info-group">
|
||||
<view class="info-item">
|
||||
<text class="info-label">预制图纸名称</text>
|
||||
<text class="info-value">{{ form.DrawingName || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">组件编号</text>
|
||||
<text class="info-value">{{ form.PipelineComponentCode || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">物流箱号</text>
|
||||
<text class="info-value">{{ form.BoxNumber || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">计划安装日期</text>
|
||||
<text class="info-value">{{ form.PlanStartDate || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">验收人</text>
|
||||
<text class="info-value">{{ form.ReceiveMan || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">验收日期</text>
|
||||
<text class="info-value">{{ form.ReceiveDate || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">状态</text>
|
||||
<text class="card-tag" :class="getStatusClass(form.State)">{{ getStatus(form.State) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
// 表单数据
|
||||
const form = ref({
|
||||
PipelineComponentId: '',
|
||||
DrawingName: '',
|
||||
PipelineComponentCode: '',
|
||||
BoxNumber: '',
|
||||
PlanStartDate: '',
|
||||
ReceiveMan: '',
|
||||
ReceiveDate: '',
|
||||
State: 0
|
||||
})
|
||||
|
||||
// 获取状态文本
|
||||
const getStatus = (state) => {
|
||||
const statusMap = {
|
||||
0: '未验收',
|
||||
1: '已验收',
|
||||
2: '已出库',
|
||||
'-2': '待整改',
|
||||
'-1': '已整改'
|
||||
}
|
||||
return statusMap[state] || '--'
|
||||
}
|
||||
|
||||
// 获取状态样式类
|
||||
const getStatusClass = (state) => {
|
||||
const classMap = {
|
||||
0: 'status-0',
|
||||
1: 'status-2',
|
||||
2: 'status-3',
|
||||
'-2': 'status-1',
|
||||
'-1': 'status-2'
|
||||
}
|
||||
return classMap[state] || 'status-0'
|
||||
}
|
||||
|
||||
// 获取详情
|
||||
const getInfo = async (id) => {
|
||||
try {
|
||||
// 替换为实际的API调用
|
||||
const res = {
|
||||
code: 1,
|
||||
data: {
|
||||
PipelineComponentId: id,
|
||||
DrawingName: '预制组件A-001',
|
||||
PipelineComponentCode: 'PC-2024-001',
|
||||
BoxNumber: 'BOX-001',
|
||||
PlanStartDate: '2024-01-15',
|
||||
ReceiveMan: '张三',
|
||||
ReceiveDate: '',
|
||||
State: 0
|
||||
}
|
||||
}
|
||||
|
||||
if (res.code === 1) {
|
||||
form.value = { ...form.value, ...res.data }
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取预制组件详情失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onLoad((options) => {
|
||||
const id = options?.id || ''
|
||||
if (id) {
|
||||
getInfo(id)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -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