276 lines
8.2 KiB
Vue
276 lines
8.2 KiB
Vue
<template>
|
||
<view class="bx-page pl-driver-plan-page">
|
||
<view class="topbar" :style="safeAreaStyle">
|
||
<view class="topbar-left">
|
||
<text class="topbar-back" @click="goBack">←</text>
|
||
<text class="topbar-title">司机运输计划单</text>
|
||
</view>
|
||
<view class="topbar-right" />
|
||
</view>
|
||
|
||
<view class="filters">
|
||
<uni-calendar
|
||
:insert="true"
|
||
:date="selectedDate"
|
||
:selected="calendarSelected"
|
||
:showMonth="false"
|
||
@change="onCalendarChange"
|
||
@monthSwitch="onMonthSwitch"
|
||
/>
|
||
</view>
|
||
|
||
<view class="list-body">
|
||
<view v-if="loading" class="page-loading">加载中...</view>
|
||
<view v-else-if="!records.length" class="empty-hint">暂无运输记录</view>
|
||
<view
|
||
v-for="(row, index) in records"
|
||
:key="row.planId || index"
|
||
class="record-card"
|
||
@click="openRecord(row)"
|
||
>
|
||
<text class="index-tag">{{ index + 1 }}</text>
|
||
<view class="record-top">
|
||
<text class="card-title">{{ cardTitle(row) }}</text>
|
||
<view class="record-top-actions" @click.stop>
|
||
<view class="pound-qr-btn" @click="openPoundQr(row)">磅单二维码</view>
|
||
<text class="tag" :class="tagClass(row)">{{ row.statusLabel || '进行中' }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="meta">
|
||
车牌：<text class="plate-hl">{{ row.licensePlate || '—' }}</text>
|
||
</view>
|
||
<template v-if="(row.stops || []).length">
|
||
<view
|
||
v-for="(stop, sIndex) in row.stops"
|
||
:key="`${stop.stopType}-${stop.seq ?? sIndex}`"
|
||
class="stop-block"
|
||
>
|
||
<view class="stop-block__title"
|
||
>{{ stop.label }} · {{ stop.customerName || '—' }}</view
|
||
>
|
||
<view class="meta">时间：{{ formatDay(stop.stopTime) }}</view>
|
||
<view class="meta">地址：{{ stop.address || '—' }}</view>
|
||
<template v-if="!(stop.products || []).length">
|
||
<view class="meta">产品：—</view>
|
||
</template>
|
||
<template v-for="(prod, pIndex) in stop.products || []" :key="pIndex">
|
||
<view class="meta">产品：{{ prod.productName || '—' }}</view>
|
||
<view class="meta">规格型号：{{ prod.model || '—' }}</view>
|
||
<view class="meta">包装规格：{{ prod.packageSpec || '—' }}</view>
|
||
<view class="meta"
|
||
>数量：{{ formatQty(prod.quantity) }} · 单位：{{ prod.unit || '—' }}</view
|
||
>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
<view class="meta">运输计划号：{{ row.planNo || '—' }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<db-pound-qrcode-popup
|
||
:show="poundQrOpen"
|
||
:inventory-id="poundQrId"
|
||
:snapshot="poundQrSnapshot"
|
||
@close="poundQrOpen = false"
|
||
@update:show="(v) => (poundQrOpen = v)"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onShow } from '@dcloudio/uni-app'
|
||
import { PAGE_PATHS } from '@/config/api'
|
||
import { driverPlanApi } from '@/api/pl'
|
||
import { getSafeAreaStyle } from '@/utils/safeArea'
|
||
import DbPoundQrcodePopup from '@/components/db-ui/db-pound-qrcode-popup.vue'
|
||
|
||
const safeAreaStyle = getSafeAreaStyle()
|
||
const poundQrOpen = ref(false)
|
||
const poundQrId = ref('')
|
||
const poundQrSnapshot = ref(null)
|
||
|
||
function todayStr() {
|
||
const d = new Date()
|
||
const m = `${d.getMonth() + 1}`.padStart(2, '0')
|
||
const day = `${d.getDate()}`.padStart(2, '0')
|
||
return `${d.getFullYear()}-${m}-${day}`
|
||
}
|
||
|
||
const selectedDate = ref(todayStr())
|
||
const records = ref([])
|
||
const loading = ref(false)
|
||
const calendarSelected = ref([])
|
||
let calendarMonth = selectedDate.value.slice(0, 7)
|
||
|
||
function formatDay(value) {
|
||
if (!value) return '—'
|
||
const normalized = String(value).replace('T', ' ')
|
||
return normalized.length >= 10 ? normalized.slice(0, 10) : normalized
|
||
}
|
||
|
||
function formatQty(value) {
|
||
if (value == null || value === '') return '—'
|
||
return String(value)
|
||
}
|
||
|
||
function cardTitleDate(row) {
|
||
const stopTimes = (row.stops || [])
|
||
.map((stop) => formatDay(stop.stopTime))
|
||
.filter((value) => value !== '—')
|
||
if (stopTimes.length) return stopTimes[0]
|
||
const fromPickup = formatDay(row.pickupTime)
|
||
if (fromPickup !== '—') return fromPickup
|
||
const fromDelivery = formatDay(row.deliveryTime)
|
||
if (fromDelivery !== '—') return fromDelivery
|
||
return selectedDate.value
|
||
}
|
||
|
||
function cardTitle(row) {
|
||
return cardTitleDate(row)
|
||
}
|
||
|
||
function tagClass(row) {
|
||
if (row.planVoided || row.statusLabel === '已作废') return 'tag--danger'
|
||
if (row.planArchived || row.statusLabel === '已归档') return 'tag--muted'
|
||
return 'tag--success'
|
||
}
|
||
|
||
async function loadList() {
|
||
loading.value = true
|
||
try {
|
||
const res = await driverPlanApi.history({ date: selectedDate.value })
|
||
records.value = res.records || []
|
||
} catch (e) {
|
||
records.value = []
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
async function loadCalendarCounts(month) {
|
||
const m = String(month || '').slice(0, 7)
|
||
if (!/^\d{4}-\d{2}$/.test(m)) return
|
||
calendarMonth = m
|
||
const today = todayStr()
|
||
try {
|
||
const counts = await driverPlanApi.calendarCounts(m)
|
||
calendarSelected.value = Object.keys(counts || {})
|
||
.filter((date) => Number(counts[date]) > 0 && date >= today)
|
||
.map((date) => ({ date, info: String(counts[date]) }))
|
||
} catch (e) {
|
||
calendarSelected.value = []
|
||
}
|
||
}
|
||
|
||
function onCalendarChange(e) {
|
||
const v = e?.fulldate || e?.date || (typeof e === 'string' ? e : '')
|
||
if (typeof v === 'string' && /^\d{4}-\d{2}-\d{2}/.test(v)) {
|
||
selectedDate.value = v.slice(0, 10)
|
||
const month = selectedDate.value.slice(0, 7)
|
||
if (month !== calendarMonth) {
|
||
loadCalendarCounts(month)
|
||
}
|
||
loadList()
|
||
}
|
||
}
|
||
|
||
function onMonthSwitch(e) {
|
||
const year = e?.year
|
||
const month = e?.month
|
||
if (year == null || month == null) return
|
||
const m = `${year}-${`${month}`.padStart(2, '0')}`
|
||
loadCalendarCounts(m)
|
||
}
|
||
|
||
function openRecord(row) {
|
||
const id = row.planId || row.plan_id
|
||
if (!id) {
|
||
uni.showToast({ title: '计划无效', icon: 'none' })
|
||
return
|
||
}
|
||
uni.navigateTo({ url: `${PAGE_PATHS.plDriverPlanDetail}?planId=${id}` })
|
||
}
|
||
|
||
function poundItemsOf(row) {
|
||
const items = row?.poundQrcodeItems || row?.pound_qrcode_items || []
|
||
return Array.isArray(items) ? items : []
|
||
}
|
||
|
||
function openPoundForInventoryId(inventoryId) {
|
||
const id = String(inventoryId || '').trim()
|
||
if (!id) {
|
||
uni.showToast({ title: '缺少出入库单', icon: 'none' })
|
||
return
|
||
}
|
||
poundQrId.value = id
|
||
poundQrSnapshot.value = null
|
||
poundQrOpen.value = true
|
||
}
|
||
|
||
function openPoundQr(row) {
|
||
const items = poundItemsOf(row)
|
||
if (!items.length) {
|
||
uni.showToast({ title: '暂无磅单二维码', icon: 'none' })
|
||
return
|
||
}
|
||
if (items.length === 1) {
|
||
openPoundForInventoryId(items[0].inventoryId || items[0].inventory_id)
|
||
return
|
||
}
|
||
uni.showActionSheet({
|
||
itemList: items.map((item) => item.label || item.partnerCompany || '磅单'),
|
||
success: (res) => {
|
||
const picked = items[res.tapIndex]
|
||
if (!picked) return
|
||
openPoundForInventoryId(picked.inventoryId || picked.inventory_id)
|
||
}
|
||
})
|
||
}
|
||
|
||
function goBack() {
|
||
uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
|
||
}
|
||
|
||
onShow(() => {
|
||
loadCalendarCounts(calendarMonth || selectedDate.value.slice(0, 7))
|
||
loadList()
|
||
})
|
||
</script>
|
||
|
||
<!-- 微信端：scss 须在 style 中 @import；script 里 import 只会生成空 js，H5 有样式而小程序无样式 -->
|
||
<style lang="scss">
|
||
@import '@/styles/bx-theme.scss';
|
||
@import '@/styles/pl-driver-plan.scss';
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.uni-calendar__backtoday) {
|
||
display: none;
|
||
}
|
||
|
||
:deep(.uni-calendar),
|
||
:deep(.uni-calendar__content),
|
||
:deep(.uni-calendar__box) {
|
||
box-shadow: none !important;
|
||
border: none !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
:deep(.uni-calendar-item--checked),
|
||
:deep(.uni-calendar-item--isDay),
|
||
:deep(.uni-calendar-item--multiple) {
|
||
background-color: #0a9f6d !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
:deep(.uni-calendar-item--isDay-text) {
|
||
color: #0a9f6d !important;
|
||
}
|
||
|
||
:deep(.uni-calendar-item--checked.uni-calendar-item--isDay-text),
|
||
:deep(.uni-calendar-item--isDay.uni-calendar-item--isDay-text) {
|
||
color: #fff !important;
|
||
}
|
||
</style>
|