shanxia2.0/miniprogram/pages/pl/plan/list.vue

<script setup>
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { listPlans } from '@/api/pl'
import { planListPhase, planCardSub, dash } from '@/utils/plLabels'
import { PAGE_PATHS } from '@/config/api'

const tabs = [
  { key: 'pending', label: '待发运' },
  { key: 'transit', label: '在途' },
  { key: 'done', label: '已完成' }
]

const activeTab = ref('pending')
const keyword = ref('')
const rows = ref([])
const total = ref(0)
const loading = ref(false)
const page = ref(1)
const finished = ref(false)

const list = computed(() => {
  const kw = String(keyword.value || '')
    .trim()
    .toLowerCase()
  if (!kw) return rows.value
  return rows.value.filter((row) => {
    const blob = [
      row.planNo,
      row.customerName,
      row.supplierName,
      row.destinationName,
      planCardSub(row)
    ]
      .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.plPlanDetail}?id=${row.id}` })

const goArrange = (row) => {
  uni.navigateTo({ url: `${PAGE_PATHS.plPlanArrange}?id=${row.id}` })
}

const queryForTab = () => {
  if (activeTab.value === 'pending') {
    return { transportStatus: 'pending', followStatus: 'processing' }
  }
  if (activeTab.value === 'transit') {
    return { transportStatus: 'arranged', followStatus: 'processing' }
  }
  return { followStatus: 'completed' }
}

const load = 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 listPlans({
      ...queryForTab(),
      q: keyword.value.trim() || undefined,
      page: page.value,
      pageSize: 20
    })
    const next = res.rows || []
    rows.value = reset ? next : rows.value.concat(next)
    total.value = res.total || 0
    if (!next.length || rows.value.length >= total.value) finished.value = true
    else page.value += 1
  } catch (e) {
    uni.showToast({ title: e.message || '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

const switchTab = (key) => {
  activeTab.value = key
  load(true)
}

const onSearch = () => load(true)

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="onSearch"
        />
      </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="暂无运输计划" />
      <view v-else class="mp-list">
        <view v-for="row in list" :key="row.id" class="mp-card">
          <view class="mp-card__head" @click="goDetail(row)">
            <view>
              <text class="mp-card__title">{{ dash(row.planNo) }}</text>
              <text class="mp-card__sub">{{ planCardSub(row) }}</text>
            </view>
            <text class="mp-tag" :class="'mp-tag--' + planListPhase(row).tag">
              {{ planListPhase(row).text }}
            </text>
          </view>
          <view class="mp-card__row" @click="goDetail(row)">
            <text>计划日期</text>
            <text>{{ dash(row.planDate) }}</text>
          </view>
          <view class="mp-card__foot">
            <button class="mp-btn mp-btn--ghost" @click.stop="goDetail(row)">详情</button>
            <button
              v-if="row.transportStatus === 'pending' && row.followStatus !== 'cancelled'"
              class="mp-btn mp-btn--primary"
              @click.stop="goArrange(row)"
            >
              安排运输
            </button>
          </view>
        </view>
      </view>
      <view v-if="!finished && list.length" class="mp-load-more" @click="load(false)">
        {{ loading ? '加载中…' : '加载更多' }}
      </view>
    </view>
  </view>
</template>