386 lines
7.8 KiB
Vue
386 lines
7.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="search-page">
|
|||
|
|
<!-- 顶部：输入框内扫码（类似淘宝搜索） -->
|
|||
|
|
<view class="search-bar">
|
|||
|
|
<view class="search-bar__input-wrap">
|
|||
|
|
<u-icon
|
|||
|
|
name="scan"
|
|||
|
|
:size="28"
|
|||
|
|
color="#2979ff"
|
|||
|
|
@click="handleScan"
|
|||
|
|
/>
|
|||
|
|
<input
|
|||
|
|
class="search-bar__input"
|
|||
|
|
v-model="keyword"
|
|||
|
|
type="text"
|
|||
|
|
confirm-type="search"
|
|||
|
|
:placeholder="placeholder"
|
|||
|
|
:focus="autoFocus"
|
|||
|
|
@input="handleSearchInput"
|
|||
|
|
@confirm="handleSearchConfirm"
|
|||
|
|
/>
|
|||
|
|
<u-icon
|
|||
|
|
v-if="keyword"
|
|||
|
|
name="close-circle-fill"
|
|||
|
|
:size="28"
|
|||
|
|
color="#ccc"
|
|||
|
|
@click="handleClear"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 结果列表 -->
|
|||
|
|
<scroll-view
|
|||
|
|
class="result-scroll"
|
|||
|
|
scroll-y
|
|||
|
|
@scrolltolower="loadMore"
|
|||
|
|
>
|
|||
|
|
<view class="result-list">
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in listData"
|
|||
|
|
:key="item.WeldJointId || item.Id || index"
|
|||
|
|
class="result-item"
|
|||
|
|
@click="handleSelect(item)"
|
|||
|
|
>
|
|||
|
|
<view class="result-item__main">
|
|||
|
|
<text class="result-item__code">{{ item.WeldJointCode || '--' }}</text>
|
|||
|
|
<text
|
|||
|
|
v-if="item.PipelineCode"
|
|||
|
|
class="result-item__sub"
|
|||
|
|
>管线 {{ item.PipelineCode }}</text>
|
|||
|
|
</view>
|
|||
|
|
<u-icon
|
|||
|
|
name="arrow-right"
|
|||
|
|
:size="24"
|
|||
|
|
color="#ccc"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<u-empty
|
|||
|
|
v-if="!loading && searched && listData.length === 0"
|
|||
|
|
mode="search"
|
|||
|
|
text="未找到焊口"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<view
|
|||
|
|
v-if="!searched && !loading"
|
|||
|
|
class="result-hint"
|
|||
|
|
>
|
|||
|
|
<text>扫码或输入焊口/管线编号搜索</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view
|
|||
|
|
v-if="loading && listData.length > 0"
|
|||
|
|
class="loading-more"
|
|||
|
|
>
|
|||
|
|
<u-loading
|
|||
|
|
mode="circle"
|
|||
|
|
size="28"
|
|||
|
|
/>
|
|||
|
|
<text>加载中...</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view
|
|||
|
|
v-if="!loading && !hasMore && listData.length > 0"
|
|||
|
|
class="no-more"
|
|||
|
|
>
|
|||
|
|
<text>— 没有更多了 —</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
/**
|
|||
|
|
* 焊口搜索中间页：扫码进入业务页，或关键字搜索后点选进入
|
|||
|
|
* 入参：target（业务页路径）、title（导航标题）
|
|||
|
|
*/
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|||
|
|
import { storeToRefs } from 'pinia'
|
|||
|
|
import { useUserStore, useMenuStore } from '@/store'
|
|||
|
|
import { getUrlParam } from '@/utils/request.js'
|
|||
|
|
import { reqPipeJointWeldedJoints } from '@/api/hj.js'
|
|||
|
|
|
|||
|
|
const userStore = useUserStore()
|
|||
|
|
const menuStore = useMenuStore()
|
|||
|
|
const { currentProject } = storeToRefs(userStore)
|
|||
|
|
|
|||
|
|
/** 业务目标页，如 /scanpages/hj/material_sampling */
|
|||
|
|
const targetPath = ref('')
|
|||
|
|
const placeholder = ref('搜索焊口')
|
|||
|
|
const autoFocus = ref(true)
|
|||
|
|
|
|||
|
|
const keyword = ref('')
|
|||
|
|
const listData = ref([])
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const searched = ref(false)
|
|||
|
|
const hasMore = ref(true)
|
|||
|
|
const currentPage = ref(1)
|
|||
|
|
const pageSize = 20
|
|||
|
|
let searchTimer = null
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 从接口响应取出列表
|
|||
|
|
* @param {any} data
|
|||
|
|
*/
|
|||
|
|
const pickList = (data) => {
|
|||
|
|
if (!data) return []
|
|||
|
|
if (Array.isArray(data)) return data
|
|||
|
|
if (Array.isArray(data.getDataList)) return data.getDataList
|
|||
|
|
if (Array.isArray(data.list)) return data.list
|
|||
|
|
if (Array.isArray(data.records)) return data.records
|
|||
|
|
if (Array.isArray(data.Items)) return data.Items
|
|||
|
|
return []
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const clearList = () => {
|
|||
|
|
listData.value = []
|
|||
|
|
hasMore.value = false
|
|||
|
|
searched.value = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 拉取焊口列表
|
|||
|
|
* @param {boolean} isRefresh
|
|||
|
|
*/
|
|||
|
|
const loadList = async (isRefresh = true) => {
|
|||
|
|
const kw = keyword.value.trim()
|
|||
|
|
const projectId = currentProject.value?.ProjectId
|
|||
|
|
if (!projectId) {
|
|||
|
|
uni.showToast({ title: '请先选择项目', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!kw) {
|
|||
|
|
clearList()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (loading.value) return
|
|||
|
|
if (!isRefresh && !hasMore.value) return
|
|||
|
|
|
|||
|
|
loading.value = true
|
|||
|
|
if (isRefresh) {
|
|||
|
|
currentPage.value = 1
|
|||
|
|
hasMore.value = true
|
|||
|
|
listData.value = []
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await reqPipeJointWeldedJoints({
|
|||
|
|
projectId,
|
|||
|
|
keyword: kw,
|
|||
|
|
pageIndex: currentPage.value,
|
|||
|
|
pageSize,
|
|||
|
|
})
|
|||
|
|
const data = res?.data ?? {}
|
|||
|
|
const pageData = pickList(data)
|
|||
|
|
const totalPages = Number(data.pageCount) || 0
|
|||
|
|
const totalCount = Number(data.totalCount) || 0
|
|||
|
|
if (totalPages > 0) {
|
|||
|
|
hasMore.value = currentPage.value < totalPages
|
|||
|
|
} else if (totalCount > 0) {
|
|||
|
|
hasMore.value = listData.value.length + pageData.length < totalCount
|
|||
|
|
} else {
|
|||
|
|
hasMore.value = pageData.length >= pageSize
|
|||
|
|
}
|
|||
|
|
listData.value = isRefresh ? pageData : listData.value.concat(pageData)
|
|||
|
|
searched.value = true
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('焊口搜索失败:', e)
|
|||
|
|
if (isRefresh) listData.value = []
|
|||
|
|
searched.value = true
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSearchInput = () => {
|
|||
|
|
if (searchTimer) clearTimeout(searchTimer)
|
|||
|
|
searchTimer = setTimeout(() => {
|
|||
|
|
const kw = keyword.value.trim()
|
|||
|
|
if (!kw) {
|
|||
|
|
clearList()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
loadList(true)
|
|||
|
|
}, 400)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSearchConfirm = () => {
|
|||
|
|
if (searchTimer) clearTimeout(searchTimer)
|
|||
|
|
loadList(true)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleClear = () => {
|
|||
|
|
keyword.value = ''
|
|||
|
|
clearList()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const loadMore = () => {
|
|||
|
|
if (!loading.value && hasMore.value && keyword.value.trim()) {
|
|||
|
|
currentPage.value += 1
|
|||
|
|
loadList(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 进入业务页
|
|||
|
|
* @param {string} id WeldJointId
|
|||
|
|
*/
|
|||
|
|
const goTarget = (id) => {
|
|||
|
|
if (!id) {
|
|||
|
|
uni.showToast({ title: '缺少焊口信息', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!targetPath.value) {
|
|||
|
|
uni.showToast({ title: '缺少目标页面', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!menuStore.canAccessPath(targetPath.value)) {
|
|||
|
|
uni.showToast({ title: '当前岗位无此功能权限', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `${targetPath.value}?id=${encodeURIComponent(id)}`
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 点选搜索结果
|
|||
|
|
* @param {object} item
|
|||
|
|
*/
|
|||
|
|
const handleSelect = (item) => {
|
|||
|
|
const id = item.WeldJointId || item.Id || item.id
|
|||
|
|
goTarget(id)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 扫码：与首页菜单扫码一致，解析 id 后进入业务页
|
|||
|
|
*/
|
|||
|
|
const handleScan = () => {
|
|||
|
|
uni.scanCode({
|
|||
|
|
scanType: ['datamatrix', 'barCode', 'qrCode', 'wxCode', 'pdf417'],
|
|||
|
|
success: (res) => {
|
|||
|
|
const result = res.result || ''
|
|||
|
|
let id = getUrlParam(result, 'id')
|
|||
|
|
if (!id) {
|
|||
|
|
id = String(result).trim()
|
|||
|
|
}
|
|||
|
|
if (!id) {
|
|||
|
|
uni.showToast({ title: '未识别到焊口', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
goTarget(id)
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
if (err?.errMsg && String(err.errMsg).includes('cancel')) return
|
|||
|
|
uni.showToast({ title: '扫码失败，请重试', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onLoad((opt) => {
|
|||
|
|
targetPath.value = decodeURIComponent(opt.target || '')
|
|||
|
|
const title = opt.title ? decodeURIComponent(opt.title) : '选择焊口'
|
|||
|
|
uni.setNavigationBarTitle({ title })
|
|||
|
|
if (!targetPath.value) {
|
|||
|
|
uni.showToast({ title: '入口参数错误', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.search-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: #f5f6f8;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-bar {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 16rpx 24rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 10;
|
|||
|
|
|
|||
|
|
&__input-wrap {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 72rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
background: #f5f6f8;
|
|||
|
|
border-radius: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__input {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
height: 72rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.result-scroll {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.result-list {
|
|||
|
|
padding: 16rpx 24rpx 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.result-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 28rpx 24rpx;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
|
|||
|
|
&__main {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__code {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1a2332;
|
|||
|
|
font-family: monospace;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__sub {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.result-hint {
|
|||
|
|
padding: 80rpx 0;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #bbb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-more,
|
|||
|
|
.no-more {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
</style>
|