315 lines
7.1 KiB
Vue
315 lines
7.1 KiB
Vue
<template>
|
|
<MpBottomSheet v-model="innerVisible" title="从车辆库选择">
|
|
<div class="mp-veh-lib">
|
|
<div class="mp-veh-lib__tabs" role="tablist">
|
|
<button
|
|
type="button"
|
|
class="mp-veh-lib__tab"
|
|
:class="{ active: activeTab === 'carrier' }"
|
|
role="tab"
|
|
:aria-selected="activeTab === 'carrier'"
|
|
@click="switchTab('carrier')"
|
|
>
|
|
三方车辆
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="mp-veh-lib__tab"
|
|
:class="{ active: activeTab === 'self' }"
|
|
role="tab"
|
|
:aria-selected="activeTab === 'self'"
|
|
@click="switchTab('self')"
|
|
>
|
|
山峡车辆
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mp-veh-lib__search">
|
|
<input
|
|
v-model="keyword"
|
|
class="mp-veh-lib__search-input"
|
|
type="search"
|
|
placeholder="搜索车牌号"
|
|
autocomplete="off"
|
|
@keyup.enter="handleSearch"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="loading && !rows.length" class="mp-veh-lib__empty">加载中…</div>
|
|
<div v-else-if="!rows.length" class="mp-veh-lib__empty">暂无可用车辆</div>
|
|
<button
|
|
v-for="row in rows"
|
|
:key="row.id"
|
|
type="button"
|
|
class="mp-veh-lib__row"
|
|
@click="handleConfirm(row)"
|
|
>
|
|
<div class="mp-veh-lib__row-main">
|
|
<div class="mp-veh-lib__title">
|
|
{{ formatPlVehiclePlateOptionLabel(row.licensePlate, row.trailerNo) }}
|
|
</div>
|
|
<div class="mp-veh-lib__desc">{{ rowDesc(row) }}</div>
|
|
</div>
|
|
<span class="mp-veh-lib__pick">选用</span>
|
|
</button>
|
|
|
|
<button
|
|
v-if="hasMore"
|
|
type="button"
|
|
class="mp-veh-lib__more"
|
|
:disabled="loading"
|
|
@click="loadMore"
|
|
>
|
|
{{ loading ? '加载中…' : '加载更多' }}
|
|
</button>
|
|
</div>
|
|
</MpBottomSheet>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
import MpBottomSheet from '@/components/mp/MpBottomSheet.vue'
|
|
import { vehicleApi, type Vehicle } from '@/api/pl/index'
|
|
import { pickBxPageResult } from '@/utils/http/bx'
|
|
import {
|
|
formatPlVehiclePlateOptionLabel,
|
|
getPlVehicleStatusLabel,
|
|
normalizePlPersonnelSummaryDisplay
|
|
} from '@/utils/pl-display'
|
|
|
|
type VehicleTab = 'carrier' | 'self'
|
|
|
|
const props = defineProps<{
|
|
modelValue: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean]
|
|
select: [row: Vehicle]
|
|
}>()
|
|
|
|
const innerVisible = computed({
|
|
get: () => props.modelValue,
|
|
set: (value: boolean) => emit('update:modelValue', value)
|
|
})
|
|
|
|
const loading = ref(false)
|
|
const keyword = ref('')
|
|
const activeTab = ref<VehicleTab>('carrier')
|
|
const rows = ref<Vehicle[]>([])
|
|
const page = ref(1)
|
|
const pageSize = 20
|
|
const total = ref(0)
|
|
let searchTimer: ReturnType<typeof setTimeout> | null = null
|
|
|
|
const hasMore = computed(() => rows.value.length < total.value)
|
|
|
|
function rowDesc(row: Vehicle) {
|
|
const parts: string[] = []
|
|
parts.push(getPlVehicleStatusLabel(row.vehicleStatus) || '—')
|
|
if (row.loadCapacity != null && String(row.loadCapacity).trim() !== '') {
|
|
parts.push(`${row.loadCapacity} 吨`)
|
|
}
|
|
if (activeTab.value === 'carrier' && row.carrierName) {
|
|
parts.push(row.carrierName)
|
|
}
|
|
const people = normalizePlPersonnelSummaryDisplay(row.personnelSummary)
|
|
if (people?.trim()) parts.push(people.trim())
|
|
return parts.join(' · ')
|
|
}
|
|
|
|
async function fetchList(reset: boolean) {
|
|
loading.value = true
|
|
try {
|
|
if (reset) {
|
|
page.value = 1
|
|
rows.value = []
|
|
}
|
|
const res = await vehicleApi.list({
|
|
vehicleType: activeTab.value,
|
|
q: keyword.value.trim() || undefined,
|
|
page: page.value,
|
|
pageSize
|
|
})
|
|
const { list, total: t } = pickBxPageResult<Vehicle>(res)
|
|
rows.value = reset ? list : [...rows.value, ...list]
|
|
total.value = t
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function handleSearch() {
|
|
if (searchTimer) {
|
|
clearTimeout(searchTimer)
|
|
searchTimer = null
|
|
}
|
|
void fetchList(true)
|
|
}
|
|
|
|
function switchTab(tab: VehicleTab) {
|
|
if (activeTab.value === tab) return
|
|
activeTab.value = tab
|
|
keyword.value = ''
|
|
void fetchList(true)
|
|
}
|
|
|
|
function loadMore() {
|
|
if (loading.value || !hasMore.value) return
|
|
page.value += 1
|
|
void fetchList(false)
|
|
}
|
|
|
|
function handleConfirm(row: Vehicle) {
|
|
emit('select', row)
|
|
innerVisible.value = false
|
|
}
|
|
|
|
function resetAndLoad() {
|
|
keyword.value = ''
|
|
activeTab.value = 'carrier'
|
|
page.value = 1
|
|
total.value = 0
|
|
rows.value = []
|
|
void fetchList(true)
|
|
}
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(open) => {
|
|
if (open) resetAndLoad()
|
|
}
|
|
)
|
|
|
|
watch(keyword, () => {
|
|
if (!props.modelValue) return
|
|
if (searchTimer) clearTimeout(searchTimer)
|
|
searchTimer = setTimeout(() => {
|
|
void fetchList(true)
|
|
}, 320)
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.mp-veh-lib {
|
|
padding: 0 8px 8px;
|
|
}
|
|
|
|
.mp-veh-lib__tabs {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
margin: 0 0 10px;
|
|
padding: 3px;
|
|
background: #eef6f2;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.mp-veh-lib__tab {
|
|
height: 34px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
color: #6b7b74;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mp-veh-lib__tab.active {
|
|
background: #fff;
|
|
color: #087f57;
|
|
font-weight: 700;
|
|
box-shadow: 0 1px 3px rgba(15, 30, 24, 0.08);
|
|
}
|
|
|
|
.mp-veh-lib__search {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.mp-veh-lib__search-input {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
border: 1px solid #dcebe4;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
color: #1f2a26;
|
|
background: #fff;
|
|
}
|
|
|
|
.mp-veh-lib__empty {
|
|
padding: 28px 12px;
|
|
text-align: center;
|
|
color: #6b7b74;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.mp-veh-lib__row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
width: 100%;
|
|
padding: 12px 10px;
|
|
border: none;
|
|
border-bottom: 1px solid #f0f4f2;
|
|
background: #fff;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mp-veh-lib__row:active {
|
|
background: #e9f9f2;
|
|
}
|
|
|
|
.mp-veh-lib__row-main {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.mp-veh-lib__title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #1f2a26;
|
|
}
|
|
|
|
.mp-veh-lib__desc {
|
|
margin-top: 2px;
|
|
font-size: 12px;
|
|
color: #6b7b74;
|
|
line-height: 1.4;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.mp-veh-lib__pick {
|
|
flex-shrink: 0;
|
|
font-size: 12px;
|
|
color: #0a9f6d;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.mp-veh-lib__more {
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: 8px;
|
|
padding: 12px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: #e9f9f2;
|
|
color: #087f57;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mp-veh-lib__more:disabled {
|
|
opacity: 0.6;
|
|
cursor: default;
|
|
}
|
|
</style>
|