shanxia2.0/miniprogram/pages/db/inventory/list.vue

<template>
  <view class="db-page">
    <view class="db-header" :style="safeAreaStyle">
      <view class="db-header__nav">
        <view class="db-header__left">
          <text class="db-header__back" @click="goBack">←</text>
          <text class="db-header__title">出入库管理</text>
        </view>
        <view /><!-- 胶囊占位 -->
      </view>
    </view>

    <view class="db-search-wrap">
      <db-search
        v-model="keyword"
        placeholder="搜索往来单位 / 车牌 / 产品"
        @change="onKeyword"
        @search="reload"
        @clear="onClear"
      />
    </view>
    <view class="db-filter-bar">
      <view
        v-for="item in dateFilters"
        :key="item.value"
        class="db-filter-chip"
        :class="{ 'db-filter-chip--active': dateFilter === item.value }"
        @click="setFilter(item.value)"
      >
        {{ item.label }}
      </view>
    </view>

    <view class="db-list">
      <view v-if="!loading && !list.length" class="db-empty">暂无数据</view>
      <view v-for="item in list" :key="item.id" class="db-card" @click="viewItem(item)">
        <view class="db-card__head">
          <text class="db-card__title">{{ item.vehicleNo || '未填车牌' }}</text>
          <db-tag :type="item.businessType === '入库' ? 'success' : 'warning'">
            {{ item.businessType }}
          </db-tag>
        </view>
        <view class="db-card__row">
          <text class="db-card__label">日期</text>
          <text>{{ item.date || '--' }}</text>
        </view>
        <view class="db-card__row">
          <text class="db-card__label">往来单位</text>
          <text>{{ item.partnerCompany || '--' }}</text>
        </view>
        <view class="db-card__row">
          <text class="db-card__label">产品</text>
          <text>{{ item.product || '--' }}</text>
        </view>
        <view class="db-card__row">
          <text class="db-card__label">数量</text>
          <text>{{ item.quantity ?? '--' }} 吨</text>
        </view>
        <view class="db-card__row">
          <text class="db-card__label">状态</text>
          <text>{{ item.status || '待处理' }}</text>
        </view>
        <view class="db-card__foot" @click.stop>
          <db-btn size="small" type="primary" plain @click="viewRelated(item)">关联</db-btn>
          <db-btn size="small" type="primary" plain @click="editItem(item)">编辑</db-btn>
          <db-btn
            v-if="!item.hasWeighingSlip"
            size="small"
            type="primary"
            @click="genWeighing(item)"
          >
            生成地磅单
          </db-btn>
          <db-btn size="small" type="danger" plain @click="removeItem(item)">删除</db-btn>
        </view>
      </view>
      <view v-if="loading" class="db-empty">加载中...</view>
    </view>

    <db-popup :show="relatedOpen" height="75vh" @close="relatedOpen = false" @update:show="(v) => (relatedOpen = v)">
      <view style="padding: 16px">
        <view class="db-header__title" style="margin-bottom: 12px">关联数据</view>
        <view v-if="relatedLoading" class="db-empty">加载中...</view>
        <template v-else>
          <view v-if="related.plan" class="db-card">
            <db-tag type="primary">计划</db-tag>
            <view class="db-card__row" style="margin-top: 8px">
              <text class="db-card__label">计划号</text>
              <text>{{ related.plan.planNo || '--' }}</text>
            </view>
            <view class="db-card__row">
              <text class="db-card__label">产品</text>
              <text>{{ related.plan.product || '--' }}</text>
            </view>
          </view>
          <view v-if="related.weighing" class="db-card">
            <db-tag type="warning">地磅单</db-tag>
            <view class="db-card__row" style="margin-top: 8px">
              <text class="db-card__label">车牌</text>
              <text>{{ related.weighing.vehicleNo || '--' }}</text>
            </view>
            <view class="db-card__row">
              <text class="db-card__label">净重</text>
              <text>{{ related.weighing.netWeight ?? '--' }} kg</text>
            </view>
          </view>
          <view v-if="!related.plan && !related.weighing" class="db-empty">暂无关联数据</view>
        </template>
      </view>
    </db-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { PAGE_PATHS } from '@/config/api'
import { getSafeAreaStyle } from '@/utils/safeArea'
import { inventoryApi } from '@/pages/db/api/db'
import { formatYmd, addDays, weekRange } from '@/pages/db/utils/dbDate'
import DbSearch from '@/components/db-ui/db-search.vue'
import DbTag from '@/components/db-ui/db-tag.vue'
import DbBtn from '@/components/db-ui/db-btn.vue'
import DbPopup from '@/components/db-ui/db-popup.vue'

const safeAreaStyle = getSafeAreaStyle()
const keyword = ref('')
const dateFilter = ref('today')
const loading = ref(false)
const list = ref([])
const relatedOpen = ref(false)
const relatedLoading = ref(false)
const related = ref({ plan: null, weighing: null })
let debounce = null

const dateFilters = [
  { label: '全部', value: 'all' },
  { label: '今日', value: 'today' },
  { label: '明日', value: 'tomorrow' },
  { label: '昨日', value: 'yesterday' },
  { label: '本周', value: 'week' }
]

function buildParams() {
  const params = { q: keyword.value || undefined }
  const today = new Date()
  if (dateFilter.value === 'today') {
    const d = formatYmd(today)
    params.dateFrom = d
    params.dateTo = d
  } else if (dateFilter.value === 'tomorrow') {
    const t = formatYmd(addDays(today, 1))
    params.dateFrom = t
    params.dateTo = t
  } else if (dateFilter.value === 'yesterday') {
    const y = formatYmd(addDays(today, -1))
    params.dateFrom = y
    params.dateTo = y
  } else if (dateFilter.value === 'week') {
    const w = weekRange(today)
    params.dateFrom = w.from
    params.dateTo = w.to
  }
  return params
}

async function reload() {
  loading.value = true
  try {
    list.value = (await inventoryApi.list(buildParams())) || []
  } catch (e) {
    list.value = []
  } finally {
    loading.value = false
  }
}

function onKeyword(v) {
  keyword.value = typeof v === 'string' ? v : keyword.value
  if (debounce) clearTimeout(debounce)
  debounce = setTimeout(reload, 300)
}
function onClear() {
  keyword.value = ''
  reload()
}
function setFilter(v) {
  if (dateFilter.value === v) return
  dateFilter.value = v
  reload()
}
function goBack() {
  uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
}
function editItem(item) {
  uni.navigateTo({ url: `${PAGE_PATHS.dbInventoryDetail}?id=${item.id}&mode=edit` })
}
function viewItem(item) {
  uni.navigateTo({ url: `${PAGE_PATHS.dbInventoryDetail}?id=${item.id}&mode=view` })
}
async function viewRelated(item) {
  relatedOpen.value = true
  relatedLoading.value = true
  try {
    related.value = (await inventoryApi.getRelated(item.id)) || { plan: null, weighing: null }
  } catch (e) {
    relatedOpen.value = false
  } finally {
    relatedLoading.value = false
  }
}
function genWeighing(item) {
  const q = [
    `vehicleNo=${encodeURIComponent(item.vehicleNo || '')}`,
    `productId=${encodeURIComponent(item.productId || '')}`,
    `cargoName=${encodeURIComponent(item.product || '')}`,
    `businessType=${encodeURIComponent(item.businessType || '')}`,
    `supplier=${encodeURIComponent(item.partnerCompany || '')}`,
    `consignee=${encodeURIComponent(item.partnerCompany || '')}`,
    `planNo=${encodeURIComponent(item.planNo || '')}`,
    `inboundOutboundId=${encodeURIComponent(item.id)}`,
    `purchasePlanId=${encodeURIComponent(item.purchasePlanId || '')}`,
    'mode=create'
  ].join('&')
  uni.navigateTo({ url: `${PAGE_PATHS.dbWeighingDetail}?${q}` })
}
function removeItem(item) {
  uni.showModal({
    title: '确认删除',
    content: '确定删除该出入库单吗？',
    success: async (res) => {
      if (!res.confirm) return
      await inventoryApi.delete(item.id)
      uni.showToast({ title: '删除成功', icon: 'success' })
      reload()
    }
  })
}

onShow(reload)
</script>

<style lang="scss">
@import '@/styles/db-theme.scss';
</style>