shanxia2.0/miniprogram/pages/pl/freight/list.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">
      <mp-empty
        v-if="!list.length && !loading"
        :title="activeTab === 'unsettled' ? '暂无待结算计划' : '暂无结算单'"
      />
      <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>