查询
This commit is contained in:
huhao
@@ -1,31 +1,50 @@
|
||||
<template>
|
||||
<view class="search-page">
|
||||
<!-- 顶部：输入框内扫码（类似淘宝搜索） -->
|
||||
<view class="search-bar">
|
||||
<view class="search-bar__input-wrap">
|
||||
<u-icon
|
||||
name="scan"
|
||||
:size="28"
|
||||
color="#2979ff"
|
||||
<!-- 顶部固定筛选：扫码 + 管线号/焊口号 + 重置/查询 -->
|
||||
<view class="filter-panel">
|
||||
<view class="filter-panel__row">
|
||||
<view
|
||||
class="filter-panel__scan"
|
||||
@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"
|
||||
/>
|
||||
>
|
||||
<u-icon
|
||||
name="scan"
|
||||
:size="36"
|
||||
color="#2979ff"
|
||||
/>
|
||||
</view>
|
||||
<view class="filter-panel__fields">
|
||||
<view class="filter-panel__item filter-panel__item--pipe">
|
||||
<input
|
||||
class="filter-panel__input"
|
||||
v-model="pipelineCode"
|
||||
type="text"
|
||||
placeholder="管线号"
|
||||
confirm-type="search"
|
||||
@confirm="handleSearch"
|
||||
/>
|
||||
</view>
|
||||
<view class="filter-panel__item filter-panel__item--joint">
|
||||
<input
|
||||
class="filter-panel__input"
|
||||
v-model="weldJointCode"
|
||||
type="text"
|
||||
placeholder="焊口号"
|
||||
confirm-type="search"
|
||||
@confirm="handleSearch"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-panel__actions">
|
||||
<view
|
||||
class="filter-panel__btn filter-panel__btn--reset"
|
||||
@click="handleReset"
|
||||
>重置</view>
|
||||
<view
|
||||
class="filter-panel__btn filter-panel__btn--search"
|
||||
@click="handleSearch"
|
||||
>查询</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -66,7 +85,7 @@
|
||||
v-if="!searched && !loading"
|
||||
class="result-hint"
|
||||
>
|
||||
<text>扫码或输入焊口/管线编号搜索</text>
|
||||
<text>扫码，或输入管线号 / 焊口号后点击查询</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
@@ -93,7 +112,7 @@
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 焊口搜索中间页：扫码进入业务页，或关键字搜索后点选进入
|
||||
* 焊口搜索中间页：扫码进入业务页，或按管线号/焊口号搜索后点选进入
|
||||
* 入参：target（业务页路径）、title（导航标题）
|
||||
*/
|
||||
import { ref } from 'vue'
|
||||
@@ -109,17 +128,20 @@ const { currentProject } = storeToRefs(userStore)
|
||||
|
||||
/** 业务目标页，如 /scanpages/hj/material_sampling */
|
||||
const targetPath = ref('')
|
||||
const placeholder = ref('搜索焊口')
|
||||
const autoFocus = ref(true)
|
||||
|
||||
const keyword = ref('')
|
||||
const pipelineCode = ref('')
|
||||
const weldJointCode = 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
|
||||
|
||||
/**
|
||||
* 是否有可搜索条件
|
||||
*/
|
||||
const hasKeyword = () => !!(pipelineCode.value.trim() || weldJointCode.value.trim())
|
||||
|
||||
/**
|
||||
* 从接口响应取出列表
|
||||
@@ -146,14 +168,13 @@ const clearList = () => {
|
||||
* @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()
|
||||
if (!hasKeyword()) {
|
||||
uni.showToast({ title: '请输入管线号或焊口号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (loading.value) return
|
||||
@@ -169,7 +190,8 @@ const loadList = async (isRefresh = true) => {
|
||||
try {
|
||||
const res = await reqPipeJointWeldedJoints({
|
||||
projectId,
|
||||
keyword: kw,
|
||||
pipelineCode: pipelineCode.value.trim() || undefined,
|
||||
weldJointCode: weldJointCode.value.trim() || undefined,
|
||||
pageIndex: currentPage.value,
|
||||
pageSize,
|
||||
})
|
||||
@@ -195,30 +217,20 @@ const loadList = async (isRefresh = true) => {
|
||||
}
|
||||
}
|
||||
|
||||
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)
|
||||
/** 点击查询 */
|
||||
const handleSearch = () => {
|
||||
loadList(true)
|
||||
}
|
||||
|
||||
const handleClear = () => {
|
||||
keyword.value = ''
|
||||
/** 重置条件与结果 */
|
||||
const handleReset = () => {
|
||||
pipelineCode.value = ''
|
||||
weldJointCode.value = ''
|
||||
clearList()
|
||||
}
|
||||
|
||||
const loadMore = () => {
|
||||
if (!loading.value && hasMore.value && keyword.value.trim()) {
|
||||
if (!loading.value && hasMore.value && hasKeyword()) {
|
||||
currentPage.value += 1
|
||||
loadList(false)
|
||||
}
|
||||
@@ -298,31 +310,91 @@ onLoad((opt) => {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.filter-panel {
|
||||
flex-shrink: 0;
|
||||
padding: 16rpx 24rpx;
|
||||
background: #fff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
|
||||
&__input-wrap {
|
||||
flex: 1;
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
&__scan {
|
||||
flex-shrink: 0;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
justify-content: center;
|
||||
background: #f5f6f8;
|
||||
border-radius: 36rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
&__fields {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
min-width: 0;
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16rpx;
|
||||
background: #f5f6f8;
|
||||
border-radius: 12rpx;
|
||||
|
||||
&--pipe {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&--joint {
|
||||
flex: none;
|
||||
width: 140rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 72rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
&--reset {
|
||||
color: #666;
|
||||
background: #f5f6f8;
|
||||
}
|
||||
|
||||
&--search {
|
||||
color: #fff;
|
||||
background: #2979ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user