Files
sh-app/pipe/diankou/list.vue
T
2026-06-16 19:26:48 +08:00

151 lines
3.7 KiB
Vue

<template>
<view class="page-list">
<!-- 头部过滤区域 -->
<view class="filter-section">
<!-- 单位工程选择 -->
<view class="filter-item">
<text class="filter-label">单位工程</text>
<u-input
type="select"
v-model="unitWorkName"
readonly
:clearable="false"
@click="handleShowUnitWorkSelect"
placeholder="请选择单位工程"
></u-input>
</view>
<!-- 搜索框 -->
<view class="filter-item search-item">
<u-search
v-model="keyword"
placeholder="搜索点口批号..."
:show-action="false"
shape="square"
></u-search>
</view>
</view>
<!-- 列表内容 -->
<view class="list-scroll">
<!-- 加载中 -->
<view v-if="loading" class="loading-box">
<u-loading mode="circle" size="40"></u-loading>
<text class="loading-text">加载中...</text>
</view>
<!-- 数据列表 -->
<view v-else class="list-wrap">
<view v-for="(item, index) in filteredList" :key="item.id || index" class="list-item"
@click="handleItemClick(item)">
<text class="item-index">{{ index + 1 }}</text>
<text class="item-title">{{ item.PointBatchCode || '--' }}</text>
<u-icon name="arrow-right" :size="28" color="#ccc"></u-icon>
</view>
<!-- 空状态 -->
<u-empty v-if="listData.length === 0" mode="list" text="暂无数据"></u-empty>
</view>
</view>
<!-- 单位工程选择弹窗 -->
<nbd-select v-model="showUnitWorkSelect" :show-search="true" title="请选择单位工程" :list="unitWorkList"
label-key="BaseInfoName" v-model:model="selectedUnitWork" value-key="BaseInfoId" @confirm="handleUnitWorkConfirm" />
</view>
</template>
<script setup>
import {
ref,
computed
} from 'vue'
import {
reqProjectWorkArea
} from '@/api/base.js'
import {
reqGetNotEndPointBatch
} from '@/api/hj.js'
import {
useUserStore
} from '@/store'
import {
storeToRefs
} from 'pinia'
const userStore = useUserStore()
const {
currentProject
} = storeToRefs(userStore)
const keyword = ref('')
// ===== 单位工程选择 =====
const showUnitWorkSelect = ref(false)
const selectedUnitWork = ref(null)
const unitWorkName = computed(() => selectedUnitWork.value?.BaseInfoName || '')
const unitWorkList = ref([])
const handleShowUnitWorkSelect = () => {
reqProjectWorkArea(currentProject.value.ProjectId).then(res => {
unitWorkList.value = res.data || []
showUnitWorkSelect.value = true
})
}
const handleUnitWorkConfirm = (item) => {
selectedUnitWork.value = item
showUnitWorkSelect.value = false
handleRefresh()
}
// ===== 列表数据 =====
const listData = ref([])
const loading = ref(false)
// 关键字过滤
const filteredList = computed(() => {
if (!keyword.value) return listData.value
const kw = keyword.value.toLowerCase()
return listData.value.filter(item =>
String(item.PointBatchCode || '').toLowerCase().includes(kw)
)
})
// 加载数据
const fetchData = async () => {
if (loading.value) return
loading.value = true
try {
const res = await reqGetNotEndPointBatch(
selectedUnitWork.value?.BaseInfoId || '',
currentProject.value?.ProjectId
)
listData.value = res.data || []
} catch (error) {
console.error('加载数据失败:', error)
uni.showToast({ title: '加载失败,请重试', icon: 'none' })
} finally {
loading.value = false
}
}
const handleRefresh = () => {
listData.value = []
fetchData()
}
const handleItemClick = (item) => {
uni.navigateTo({
url: `/pipe/diankou/port_list?id=${item.PointBatchId}&code=${item.PointBatchCode}`
})
}
</script>
<style lang="scss" scoped>
.list-item .item-title {
white-space: normal;
word-break: break-all;
}
</style>