233 lines
6.9 KiB
Vue
233 lines
6.9 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
import { listFreight, listUnsettledPlans, createFreight } from '@/api/pl'
|
|
import {
|
|
dash,
|
|
formatMoney,
|
|
settlementStatusLabel,
|
|
isEditableDraftSettlement
|
|
} from '@/utils/plLabels'
|
|
import { PAGE_PATHS } from '@/config/api'
|
|
|
|
const tabs = [
|
|
{ key: 'bills', label: '结算单' },
|
|
{ key: 'unsettled', label: '待结算' }
|
|
]
|
|
|
|
const activeTab = ref('bills')
|
|
const keyword = ref('')
|
|
const rows = ref([])
|
|
const unsettled = ref([])
|
|
const loading = ref(false)
|
|
const page = ref(1)
|
|
const finished = ref(false)
|
|
const acting = ref(false)
|
|
|
|
const list = computed(() => {
|
|
const kw = String(keyword.value || '')
|
|
.trim()
|
|
.toLowerCase()
|
|
const data = activeTab.value === 'unsettled' ? unsettled.value : rows.value
|
|
if (!kw) return data
|
|
return data.filter((row) => {
|
|
const blob = [
|
|
row.settlementNo,
|
|
row.planNo,
|
|
row.customerName,
|
|
row.licensePlateSummary,
|
|
row.carrierName
|
|
]
|
|
.join(' ')
|
|
.toLowerCase()
|
|
return blob.includes(kw)
|
|
})
|
|
})
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack({
|
|
fail: () => uni.switchTab({ url: PAGE_PATHS.workbench })
|
|
})
|
|
}
|
|
|
|
const goDetail = (row) =>
|
|
uni.navigateTo({ url: `${PAGE_PATHS.plFreightDetail}?id=${row.id}` })
|
|
|
|
const loadBills = async (reset = true) => {
|
|
if (loading.value) return
|
|
if (reset) {
|
|
page.value = 1
|
|
finished.value = false
|
|
rows.value = []
|
|
}
|
|
if (finished.value) return
|
|
loading.value = true
|
|
try {
|
|
const res = await listFreight({
|
|
tab: 'bills',
|
|
q: keyword.value.trim() || undefined,
|
|
page: page.value,
|
|
pageSize: 20
|
|
})
|
|
const next = res.rows || []
|
|
rows.value = reset ? next : rows.value.concat(next)
|
|
if (!next.length || rows.value.length >= (res.total || 0)) finished.value = true
|
|
else page.value += 1
|
|
} catch (e) {
|
|
uni.showToast({ title: e.message || '加载失败', icon: 'none' })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const loadUnsettled = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await listUnsettledPlans({
|
|
q: keyword.value.trim() || undefined,
|
|
page: 1,
|
|
pageSize: 50
|
|
})
|
|
unsettled.value = res.rows || []
|
|
} catch (e) {
|
|
uni.showToast({ title: e.message || '加载失败', icon: 'none' })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const load = (reset = true) => {
|
|
if (activeTab.value === 'unsettled') return loadUnsettled()
|
|
return loadBills(reset)
|
|
}
|
|
|
|
const switchTab = (key) => {
|
|
activeTab.value = key
|
|
load(true)
|
|
}
|
|
|
|
const createFromPlan = (row) => {
|
|
const planId = row.planId || row.id
|
|
if (!planId) {
|
|
uni.showToast({ title: '计划无效', icon: 'none' })
|
|
return
|
|
}
|
|
uni.showModal({
|
|
title: '生成结算单',
|
|
content: `确认根据计划 ${dash(row.planNo)} 创建运费结算？`,
|
|
success: async (r) => {
|
|
if (!r.confirm) return
|
|
acting.value = true
|
|
try {
|
|
const created = await createFreight({ planIds: [String(planId)] })
|
|
uni.showToast({ title: '已创建', icon: 'success' })
|
|
if (created?.id) {
|
|
setTimeout(() => {
|
|
uni.navigateTo({ url: `${PAGE_PATHS.plFreightDetail}?id=${created.id}` })
|
|
}, 400)
|
|
} else {
|
|
activeTab.value = 'bills'
|
|
loadBills(true)
|
|
}
|
|
} catch (e) {
|
|
uni.showToast({ title: e.message || '创建失败', icon: 'none' })
|
|
} finally {
|
|
acting.value = false
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
onShow(() => load(true))
|
|
</script>
|
|
|
|
<template>
|
|
<view class="mp-page mp-page--sub">
|
|
<view class="mp-header mp-header--pl">
|
|
<text class="mp-subpage-back" @click="goBack">← 工作台</text>
|
|
<text class="mp-header__title" style="margin-top: 16rpx">运费结算</text>
|
|
<view class="mp-header__search">
|
|
<view class="mp-header__search-dot" />
|
|
<input
|
|
v-model="keyword"
|
|
class="mp-header__search-input"
|
|
placeholder="结算号 / 计划 / 车牌"
|
|
confirm-type="search"
|
|
@confirm="load(true)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mp-section" style="padding-bottom: 0; padding-top: 0">
|
|
<scroll-view scroll-x class="mp-tabs">
|
|
<view
|
|
v-for="t in tabs"
|
|
:key="t.key"
|
|
class="mp-tab"
|
|
:class="{ 'mp-tab--active': activeTab === t.key }"
|
|
@click="switchTab(t.key)"
|
|
>
|
|
{{ t.label }}
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="mp-section">
|
|
<view v-if="!list.length && !loading" class="mp-empty">
|
|
<view class="mp-empty__icon" />
|
|
<text class="mp-empty__text">{{ activeTab === 'unsettled' ? '暂无待结算计划' : '暂无结算单' }}</text>
|
|
</view>
|
|
<view v-else class="mp-list">
|
|
<!-- 结算单 -->
|
|
<template v-if="activeTab === 'bills'">
|
|
<view v-for="row in list" :key="row.id" class="mp-card" @click="goDetail(row)">
|
|
<view class="mp-card__head">
|
|
<view>
|
|
<text class="mp-card__title">{{ dash(row.settlementNo) }}</text>
|
|
<text class="mp-card__sub">{{ dash(row.licensePlateSummary) }} · {{ dash(row.planCount) }} 单</text>
|
|
</view>
|
|
<text class="mp-tag" :class="'mp-tag--' + settlementStatusLabel(row.settlementStatus).tag">
|
|
{{ settlementStatusLabel(row.settlementStatus).text }}
|
|
</text>
|
|
</view>
|
|
<view class="mp-card__row">
|
|
<text>运费合计</text>
|
|
<text class="mp-card__amount">{{ formatMoney(row.totalFreight) }}</text>
|
|
</view>
|
|
<view v-if="isEditableDraftSettlement(row.settlementStatus)" class="mp-card__foot">
|
|
<button class="mp-btn mp-btn--ghost" @click.stop="goDetail(row)">详情</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<!-- 待结算计划 -->
|
|
<template v-else>
|
|
<view v-for="row in list" :key="row.planId || row.id" class="mp-card">
|
|
<view class="mp-card__head">
|
|
<view>
|
|
<text class="mp-card__title">{{ dash(row.planNo) }}</text>
|
|
<text class="mp-card__sub">{{ dash(row.customerName || row.carrierName) }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="mp-card__row">
|
|
<text>运费</text>
|
|
<text class="mp-card__amount">{{ formatMoney(row.freightAmount || row.totalFreight) }}</text>
|
|
</view>
|
|
<view class="mp-card__foot">
|
|
<button class="mp-btn mp-btn--primary" :disabled="acting" @click="createFromPlan(row)">
|
|
生成结算单
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<view
|
|
v-if="activeTab === 'bills' && !finished && rows.length"
|
|
class="mp-load-more"
|
|
@click="loadBills(false)"
|
|
>
|
|
{{ loading ? '加载中…' : '加载更多' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|