更新
This commit is contained in:
hero920103 committed
1 parent
5718a00e31
commit
1850ac640e
226 files changed
+37772
-12071
No files matched your search
@@ -0,0 +1,447 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="filter-bar">
|
||||
<view class="search-box">
|
||||
<FaIcon name="magnifying-glass" color="#94a3b8" :size="16" />
|
||||
<input
|
||||
v-model="keyword"
|
||||
class="search-input"
|
||||
placeholder="搜索商品名称 / 编码 / 批次"
|
||||
confirm-type="search"
|
||||
@confirm="refresh"
|
||||
/>
|
||||
<text v-if="keyword" class="search-clear" @tap="clearKeyword">清空</text>
|
||||
</view>
|
||||
<view class="chip-row">
|
||||
<view class="chip" :class="{ active: warehouseId }" @tap="openWarehouse">
|
||||
<text>{{ warehouseName || '全部仓库' }}</text>
|
||||
</view>
|
||||
<view class="chip" :class="{ active: onlyPositive }" @tap="toggleOnly">
|
||||
<text>仅有库存</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chip-row">
|
||||
<view
|
||||
v-for="opt in EXPIRE_STATE_OPTIONS"
|
||||
:key="opt.value || 'all'"
|
||||
class="chip mini"
|
||||
:class="{ active: expireState === opt.value }"
|
||||
@tap="onState(opt.value)"
|
||||
>
|
||||
<text>{{ opt.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sum-bar">
|
||||
<text class="sum-item">共 {{ total }} 个批次</text>
|
||||
<text class="sum-item">本页货值 ¥{{ moneyText(sumAmount) }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="loading && !list.length" class="state-box">
|
||||
<text class="state-text">加载中...</text>
|
||||
</view>
|
||||
<view v-else-if="!list.length" class="state-box">
|
||||
<u-empty mode="search" text="没有符合条件的批次" />
|
||||
</view>
|
||||
<template v-else>
|
||||
<view v-for="row in list" :key="batchKey(row)" class="b-card" @tap="openLedger(row)">
|
||||
<view class="b-top">
|
||||
<text class="b-name">{{ row.product_name }}</text>
|
||||
<u-tag
|
||||
v-if="expireLabel(row)"
|
||||
:text="expireLabel(row)"
|
||||
:type="row.expired ? 'error' : 'warning'"
|
||||
size="mini"
|
||||
/>
|
||||
</view>
|
||||
<view class="b-batch">
|
||||
<FaIcon name="tags" color="#2563eb" :size="12" />
|
||||
<text class="b-no">{{ row.batch_no }}</text>
|
||||
<text class="b-wh">{{ row.warehouse_name || '未分仓' }}</text>
|
||||
</view>
|
||||
<text class="b-sub">{{ [row.product_code, row.spec].filter(Boolean).join(' · ') }}</text>
|
||||
<view class="b-grid">
|
||||
<view class="b-cell">
|
||||
<text class="cell-label">数量</text>
|
||||
<text class="cell-value strong">{{ qtyText(row.quantity) }} {{ row.unit || '' }}</text>
|
||||
</view>
|
||||
<view class="b-cell">
|
||||
<text class="cell-label">成本</text>
|
||||
<text class="cell-value">¥{{ moneyText(row.cost_price) }}</text>
|
||||
</view>
|
||||
<view class="b-cell">
|
||||
<text class="cell-label">货值</text>
|
||||
<text class="cell-value">¥{{ moneyText(row.amount) }}</text>
|
||||
</view>
|
||||
<view class="b-cell">
|
||||
<text class="cell-label">到期</text>
|
||||
<text class="cell-value">{{ row.expire_date || '—' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="b-hint">
|
||||
<FaIcon name="clock-rotate-left" color="#94a3b8" :size="12" />
|
||||
<text>看这个批次的收发流水</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="finished" class="load-done">
|
||||
<text>{{ list.length ? '没有更多了' : '' }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<ErpPicker
|
||||
:show="picker.show"
|
||||
title="选择仓库"
|
||||
placeholder="搜索仓库"
|
||||
:options="warehouseOptions"
|
||||
:model-value="warehouseId"
|
||||
@update:show="picker.show = false"
|
||||
@select="onWarehouse"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 批次与效期台账。批次只从入库流水回溯到期日，未登记效期的批次到期列留空不算异常。
|
||||
* 点行跳到该商品+该批次的收发流水，做效期倒查不用再手动筛。
|
||||
*/
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
|
||||
import FaIcon from '@/components/FaIcon.vue'
|
||||
import ErpPicker from '@/components/erp/ErpPicker.vue'
|
||||
import { EXPIRE_STATE_OPTIONS, fetchBatches, fetchWarehouses, moneyText, qtyText } from '@/api/erp.js'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
|
||||
const list = ref([])
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
const keyword = ref('')
|
||||
const warehouseId = ref('')
|
||||
const warehouseName = ref('')
|
||||
const expireState = ref('')
|
||||
const onlyPositive = ref(true)
|
||||
const warehouses = ref([])
|
||||
const picker = ref({ show: false })
|
||||
|
||||
const warehouseOptions = computed(() => [
|
||||
{ value: '', label: '全部仓库' },
|
||||
...warehouses.value.map((w) => ({
|
||||
value: w.id,
|
||||
label: w.warehouse_name,
|
||||
sub: w.warehouse_code || ''
|
||||
}))
|
||||
])
|
||||
|
||||
onLoad((query = {}) => {
|
||||
if (query.warehouse_id) {
|
||||
warehouseId.value = String(query.warehouse_id)
|
||||
warehouseName.value = decodeURIComponent(query.warehouse_name || '')
|
||||
}
|
||||
if (query.expire_state) expireState.value = String(query.expire_state)
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
refresh()
|
||||
loadWarehouses()
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
if (finished.value || loading.value) return
|
||||
loadMore()
|
||||
})
|
||||
|
||||
async function loadWarehouses() {
|
||||
if (warehouses.value.length) return
|
||||
try {
|
||||
warehouses.value = await fetchWarehouses({ onlyEnabled: true })
|
||||
} catch (e) {
|
||||
// 仓库字典拉不到只是不能按仓筛
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
page.value = 1
|
||||
finished.value = false
|
||||
list.value = []
|
||||
await loadPage()
|
||||
}
|
||||
|
||||
async function loadMore() {
|
||||
page.value += 1
|
||||
await loadPage()
|
||||
}
|
||||
|
||||
async function loadPage() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await fetchBatches({
|
||||
page: page.value,
|
||||
pageSize: PAGE_SIZE,
|
||||
keyword: keyword.value.trim(),
|
||||
warehouseId: warehouseId.value,
|
||||
expireState: expireState.value,
|
||||
onlyPositive: onlyPositive.value
|
||||
})
|
||||
const rows = data.list || []
|
||||
list.value = page.value === 1 ? rows : [...list.value, ...rows]
|
||||
total.value = data.total || 0
|
||||
finished.value = list.value.length >= total.value
|
||||
} catch (e) {
|
||||
if (page.value > 1) page.value -= 1
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const sumAmount = computed(() => list.value.reduce((sum, r) => sum + (Number(r.amount) || 0), 0))
|
||||
|
||||
function clearKeyword() {
|
||||
keyword.value = ''
|
||||
refresh()
|
||||
}
|
||||
|
||||
function toggleOnly() {
|
||||
onlyPositive.value = !onlyPositive.value
|
||||
refresh()
|
||||
}
|
||||
|
||||
function onState(value) {
|
||||
if (expireState.value === value) return
|
||||
expireState.value = value
|
||||
refresh()
|
||||
}
|
||||
|
||||
function openWarehouse() {
|
||||
picker.value.show = true
|
||||
}
|
||||
|
||||
function onWarehouse(opt) {
|
||||
warehouseId.value = String(opt.value ?? '')
|
||||
warehouseName.value = warehouseId.value ? opt.label : ''
|
||||
refresh()
|
||||
}
|
||||
|
||||
function expireLabel(row) {
|
||||
if (row.expired) return '已过期'
|
||||
const d = row.expire_in_days
|
||||
if (d === null || d === undefined || String(d) === '') return ''
|
||||
return d <= 30 ? `${d} 天后到期` : ''
|
||||
}
|
||||
|
||||
function batchKey(row) {
|
||||
return `${row.product_id}-${row.warehouse_id}-${row.batch_no}`
|
||||
}
|
||||
|
||||
function openLedger(row) {
|
||||
const q = `product_id=${row.product_id}&warehouse_id=${row.warehouse_id || ''}&batch_no=${encodeURIComponent(
|
||||
row.batch_no || ''
|
||||
)}`
|
||||
uni.navigateTo({ url: `/pages/erp/stock/ledger?${q}` })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/src/styles/page-common.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: $color-bg-page;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: $color-bg-page;
|
||||
padding: 20rpx $page-padding-x 8rpx;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
height: 72rpx;
|
||||
padding: 0 24rpx;
|
||||
background: $color-card;
|
||||
border-radius: $radius-full;
|
||||
box-shadow: $shadow-card;
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 10rpx 22rpx;
|
||||
border-radius: $radius-full;
|
||||
background: $color-card;
|
||||
font-size: 24rpx;
|
||||
color: $color-text-secondary;
|
||||
box-shadow: $shadow-card;
|
||||
|
||||
&.mini {
|
||||
padding: 8rpx 18rpx;
|
||||
font-size: 22rpx;
|
||||
box-shadow: none;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.sum-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 6rpx $page-padding-x 16rpx;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.sum-item {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.b-card {
|
||||
@include card;
|
||||
margin: 0 $page-padding-x 20rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.b-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.b-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 29rpx;
|
||||
font-weight: 500;
|
||||
color: $color-text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.b-batch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.b-no {
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: $radius-sm;
|
||||
background: $color-primary-bg;
|
||||
color: $color-primary-dark;
|
||||
font-size: 23rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.b-wh {
|
||||
font-size: 23rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.b-sub {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.b-grid {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
margin-top: 18rpx;
|
||||
padding-top: 16rpx;
|
||||
border-top: 1rpx solid $color-divider;
|
||||
}
|
||||
|
||||
.b-cell {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.cell-label {
|
||||
display: block;
|
||||
font-size: 21rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.cell-value {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: $color-text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.strong {
|
||||
font-weight: 600;
|
||||
color: $color-primary-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-top: 16rpx;
|
||||
font-size: 21rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.load-done {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8rpx 0 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.state-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 40rpx;
|
||||
}
|
||||
|
||||
.state-text {
|
||||
font-size: 28rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,454 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="filter-bar">
|
||||
<view class="search-box">
|
||||
<FaIcon name="magnifying-glass" color="#94a3b8" :size="16" />
|
||||
<input
|
||||
v-model="keyword"
|
||||
class="search-input"
|
||||
placeholder="搜索商品名称 / 编码 / 批次"
|
||||
confirm-type="search"
|
||||
@confirm="refresh"
|
||||
/>
|
||||
<text v-if="keyword" class="search-clear" @tap="clearKeyword">清空</text>
|
||||
</view>
|
||||
<view class="chip-row">
|
||||
<view class="chip" @tap="openPicker('warehouse')">
|
||||
<text>{{ warehouseName || '全部仓库' }}</text>
|
||||
<FaIcon name="chevron-right" color="#94a3b8" :size="12" />
|
||||
</view>
|
||||
<view class="chip" :class="{ active: groupByProduct }" @tap="toggleGroup">
|
||||
<text>{{ groupByProduct ? '按商品汇总' : '分仓分批次' }}</text>
|
||||
</view>
|
||||
<view class="chip" :class="{ active: onlyStock }" @tap="toggleOnlyStock">
|
||||
<text>有货</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view class="state-scroll" scroll-x :show-scrollbar="false">
|
||||
<view class="state-list">
|
||||
<view
|
||||
v-for="opt in SAFETY_STATE_OPTIONS"
|
||||
:key="opt.value || 'all'"
|
||||
class="state-item"
|
||||
:class="{ active: safetyState === opt.value }"
|
||||
@tap="onState(opt.value)"
|
||||
>
|
||||
<text>{{ opt.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="sum-bar">
|
||||
<text class="sum-item">{{ total }} 条结存</text>
|
||||
<text class="sum-item">库存货值 ¥{{ moneyText(sumAmount) }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="loading && !list.length" class="state-box">
|
||||
<text class="state-text">加载中...</text>
|
||||
</view>
|
||||
<view v-else-if="!list.length" class="state-box">
|
||||
<u-empty mode="search" text="没有符合条件的库存" />
|
||||
</view>
|
||||
<template v-else>
|
||||
<view v-for="(row, i) in list" :key="rowKey(row, i)" class="s-card" @tap="openProduct(row)">
|
||||
<view class="s-top">
|
||||
<text class="s-name">{{ row.product_name }}</text>
|
||||
<u-tag
|
||||
v-if="row.safety_state && row.safety_state !== 'normal'"
|
||||
:text="safetyStateLabel(row.safety_state)"
|
||||
:type="row.safety_state === 'low' ? 'warning' : 'primary'"
|
||||
size="mini"
|
||||
/>
|
||||
</view>
|
||||
<text class="s-sub">
|
||||
{{ [row.warehouse_name, row.batch_no ? '批次 ' + row.batch_no : ''].filter(Boolean).join(' · ') || '未分仓' }}
|
||||
<text v-if="row.category_name"> · {{ row.category_name }}</text>
|
||||
</text>
|
||||
<view class="s-grid">
|
||||
<view class="s-cell">
|
||||
<text class="cell-label">数量</text>
|
||||
<text class="cell-value strong">{{ qtyText(row.quantity) }} {{ row.unit || '' }}</text>
|
||||
</view>
|
||||
<view class="s-cell">
|
||||
<text class="cell-label">成本价</text>
|
||||
<text class="cell-value">¥{{ moneyText(row.cost_price) }}</text>
|
||||
</view>
|
||||
<view class="s-cell">
|
||||
<text class="cell-label">货值</text>
|
||||
<text class="cell-value">¥{{ moneyText(row.amount) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="Number(row.safety_qty) > 0 || Number(row.max_qty) > 0" class="s-limit">
|
||||
<text v-if="Number(row.safety_qty) > 0">安全 {{ qtyText(row.safety_qty) }}</text>
|
||||
<text v-if="Number(row.max_qty) > 0">最高 {{ qtyText(row.max_qty) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="finished" class="load-done">
|
||||
<text>{{ list.length ? '没有更多了' : '' }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<ErpPicker
|
||||
:show="picker.show"
|
||||
title="选择仓库"
|
||||
placeholder="搜索仓库"
|
||||
:options="warehouseOptions"
|
||||
:model-value="warehouseId"
|
||||
@update:show="picker.show = false"
|
||||
@select="onWarehouse"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 库存结存查询。
|
||||
* 默认「分仓分批次」逐行看，切到「按商品汇总」看总量；
|
||||
* 货值 = 数量 × 移动加权成本，与报表中心收发存汇总同源。
|
||||
*/
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
|
||||
import FaIcon from '@/components/FaIcon.vue'
|
||||
import ErpPicker from '@/components/erp/ErpPicker.vue'
|
||||
import {
|
||||
SAFETY_STATE_OPTIONS,
|
||||
fetchStocks,
|
||||
fetchWarehouses,
|
||||
moneyText,
|
||||
qtyText,
|
||||
safetyStateLabel
|
||||
} from '@/api/erp.js'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
|
||||
const list = ref([])
|
||||
const total = ref(0)
|
||||
const sumAmount = ref(0)
|
||||
const page = ref(1)
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
const keyword = ref('')
|
||||
const warehouseId = ref('')
|
||||
const warehouseName = ref('')
|
||||
const safetyState = ref('')
|
||||
const groupByProduct = ref(false)
|
||||
const onlyStock = ref(true)
|
||||
const warehouses = ref([])
|
||||
/** 从商品详情跳过来时锁定单个商品，端上把 id 存下来随查询一起下发 */
|
||||
const productId = ref('')
|
||||
|
||||
const picker = ref({ show: false })
|
||||
|
||||
const warehouseOptions = computed(() => [
|
||||
{ value: '', label: '全部仓库' },
|
||||
...warehouses.value.map((w) => ({
|
||||
value: w.id,
|
||||
label: w.warehouse_name,
|
||||
sub: w.warehouse_code || '',
|
||||
extra: `${w.stock_kinds || 0} 种`
|
||||
}))
|
||||
])
|
||||
|
||||
onLoad((query = {}) => {
|
||||
if (query.warehouse_id) {
|
||||
warehouseId.value = String(query.warehouse_id)
|
||||
warehouseName.value = decodeURIComponent(query.warehouse_name || '')
|
||||
}
|
||||
if (query.product_id) productId.value = String(query.product_id)
|
||||
if (query.group === 'product') groupByProduct.value = true
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
refresh()
|
||||
loadWarehouses()
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
if (finished.value || loading.value) return
|
||||
loadMore()
|
||||
})
|
||||
|
||||
async function loadWarehouses() {
|
||||
if (warehouses.value.length) return
|
||||
try {
|
||||
warehouses.value = await fetchWarehouses({ onlyEnabled: true })
|
||||
} catch (e) {
|
||||
// 仓库列表拉不到不影响查询，只是不能按仓筛
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
page.value = 1
|
||||
finished.value = false
|
||||
list.value = []
|
||||
await loadPage()
|
||||
}
|
||||
|
||||
async function loadMore() {
|
||||
page.value += 1
|
||||
await loadPage()
|
||||
}
|
||||
|
||||
async function loadPage() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await fetchStocks({
|
||||
page: page.value,
|
||||
pageSize: PAGE_SIZE,
|
||||
keyword: keyword.value.trim(),
|
||||
warehouseId: warehouseId.value,
|
||||
productId: productId.value,
|
||||
groupBy: groupByProduct.value ? 'product' : '',
|
||||
safetyState: safetyState.value,
|
||||
onlyStock: onlyStock.value
|
||||
})
|
||||
const rows = data.list || []
|
||||
list.value = page.value === 1 ? rows : [...list.value, ...rows]
|
||||
total.value = data.total || 0
|
||||
sumAmount.value = data.sumAmount || 0
|
||||
finished.value = list.value.length >= total.value
|
||||
} catch (e) {
|
||||
if (page.value > 1) page.value -= 1
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function clearKeyword() {
|
||||
keyword.value = ''
|
||||
refresh()
|
||||
}
|
||||
|
||||
function toggleGroup() {
|
||||
groupByProduct.value = !groupByProduct.value
|
||||
refresh()
|
||||
}
|
||||
|
||||
function toggleOnlyStock() {
|
||||
onlyStock.value = !onlyStock.value
|
||||
refresh()
|
||||
}
|
||||
|
||||
function onState(value) {
|
||||
if (safetyState.value === value) return
|
||||
safetyState.value = value
|
||||
refresh()
|
||||
}
|
||||
|
||||
function openPicker() {
|
||||
picker.value.show = true
|
||||
}
|
||||
|
||||
function onWarehouse(opt) {
|
||||
warehouseId.value = String(opt.value ?? '')
|
||||
warehouseName.value = warehouseId.value ? opt.label : ''
|
||||
refresh()
|
||||
}
|
||||
|
||||
function rowKey(row, i) {
|
||||
return `${row.product_id}-${row.warehouse_id || 0}-${row.batch_no || ''}-${i}`
|
||||
}
|
||||
|
||||
function openProduct(row) {
|
||||
if (!row.product_id) return
|
||||
uni.navigateTo({ url: `/pages/erp/basic/product-detail?id=${row.product_id}` })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/src/styles/page-common.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: $color-bg-page;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: $color-bg-page;
|
||||
padding: 20rpx $page-padding-x 8rpx;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
height: 72rpx;
|
||||
padding: 0 24rpx;
|
||||
background: $color-card;
|
||||
border-radius: $radius-full;
|
||||
box-shadow: $shadow-card;
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.chip-row {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 10rpx 22rpx;
|
||||
border-radius: $radius-full;
|
||||
background: $color-card;
|
||||
font-size: 24rpx;
|
||||
color: $color-text-secondary;
|
||||
box-shadow: $shadow-card;
|
||||
|
||||
&.active {
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.state-scroll {
|
||||
margin-top: 16rpx;
|
||||
white-space: nowrap;
|
||||
/* scroll-view 不设 border-box，左右内边距会把最后几个标签顶出屏幕 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.state-list {
|
||||
display: inline-flex;
|
||||
gap: 14rpx;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.state-item {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: $radius-full;
|
||||
background: $color-card;
|
||||
font-size: 23rpx;
|
||||
color: $color-text-muted;
|
||||
|
||||
&.active {
|
||||
background: $color-primary-bg;
|
||||
color: $color-primary-dark;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.sum-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 $page-padding-x 16rpx;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.sum-item {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.s-card {
|
||||
@include card;
|
||||
margin: 0 $page-padding-x 20rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.s-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.s-name {
|
||||
flex: 1;
|
||||
font-size: 29rpx;
|
||||
font-weight: 500;
|
||||
color: $color-text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.s-sub {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 23rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.s-grid {
|
||||
display: flex;
|
||||
margin-top: 18rpx;
|
||||
padding-top: 16rpx;
|
||||
border-top: 1rpx solid $color-divider;
|
||||
}
|
||||
|
||||
.s-cell {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.cell-label {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.cell-value {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 26rpx;
|
||||
color: $color-text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.strong {
|
||||
font-weight: 600;
|
||||
color: $color-primary-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-limit {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-top: 12rpx;
|
||||
font-size: 21rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.load-done {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8rpx 0 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.state-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 40rpx;
|
||||
}
|
||||
|
||||
.state-text {
|
||||
font-size: 28rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,595 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="filter-bar">
|
||||
<view class="search-box">
|
||||
<FaIcon name="magnifying-glass" color="#94a3b8" :size="16" />
|
||||
<input
|
||||
v-model="docNo"
|
||||
class="search-input"
|
||||
placeholder="搜索单据号"
|
||||
confirm-type="search"
|
||||
@confirm="refresh"
|
||||
/>
|
||||
<text v-if="docNo" class="search-clear" @tap="clearDocNo">清空</text>
|
||||
</view>
|
||||
<view class="chip-row">
|
||||
<view class="chip" :class="{ active: warehouseId }" @tap="openPicker('warehouse')">
|
||||
<text>{{ warehouseName || '全部仓库' }}</text>
|
||||
</view>
|
||||
<view class="chip" :class="{ active: productId }" @tap="openPicker('product')">
|
||||
<text>{{ productName || '全部商品' }}</text>
|
||||
</view>
|
||||
<view class="chip" :class="{ active: docType }" @tap="openPicker('docType')">
|
||||
<text>{{ docType ? docTypeLabel(docType) : '全部类型' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="date-row">
|
||||
<picker mode="date" :value="dateFrom" @change="onDate('from', $event)">
|
||||
<view class="date-cell">
|
||||
<FaIcon name="calendar-days" color="#94a3b8" :size="14" />
|
||||
<text>{{ dateFrom || '开始日期' }}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<text class="date-sep">至</text>
|
||||
<picker mode="date" :value="dateTo" @change="onDate('to', $event)">
|
||||
<view class="date-cell">
|
||||
<FaIcon name="calendar-days" color="#94a3b8" :size="14" />
|
||||
<text>{{ dateTo || '结束日期' }}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<text v-if="dateFrom || dateTo" class="date-clear" @tap="clearDates">重置</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sum-bar">
|
||||
<text class="sum-item">共 {{ total }} 条流水</text>
|
||||
<text v-if="filterText" class="sum-item" @tap="clearFilter">已筛「{{ filterText }}」×</text>
|
||||
</view>
|
||||
|
||||
<view v-if="loading && !list.length" class="state-box">
|
||||
<text class="state-text">加载中...</text>
|
||||
</view>
|
||||
<view v-else-if="!list.length" class="state-box">
|
||||
<u-empty mode="search" text="还没有收发存记录" />
|
||||
</view>
|
||||
<template v-else>
|
||||
<view v-for="row in list" :key="row.id" class="l-card" @tap="openDoc(row)">
|
||||
<view class="l-head">
|
||||
<view class="l-dir" :class="row.direction > 0 ? 'dir-in' : 'dir-out'">
|
||||
<FaIcon
|
||||
:name="row.direction > 0 ? 'arrow-down-long' : 'arrow-up-long'"
|
||||
:color="row.direction > 0 ? '#16a34a' : '#ef4444'"
|
||||
:size="13"
|
||||
/>
|
||||
<text>{{ row.direction > 0 ? '入' : '出' }}</text>
|
||||
</view>
|
||||
<text class="l-name">{{ row.product_name || `商品#${row.product_id}` }}</text>
|
||||
<text class="l-qty" :class="row.direction > 0 ? 'qty-in' : 'qty-out'">
|
||||
{{ row.direction > 0 ? '+' : '-' }}{{ qtyText(row.quantity) }}
|
||||
</text>
|
||||
</view>
|
||||
<text class="l-sub">
|
||||
{{ [row.warehouse_name || '未分仓', row.spec, row.batch_no ? '批次 ' + row.batch_no : '']
|
||||
.filter(Boolean).join(' · ') }}
|
||||
</text>
|
||||
<view class="l-flow">
|
||||
<text class="flow-label">结存</text>
|
||||
<text class="flow-qty">{{ qtyText(row.before_qty) }}</text>
|
||||
<FaIcon name="arrow-right-long" color="#cbd5e1" :size="13" />
|
||||
<text class="flow-qty after">{{ qtyText(row.after_qty) }}</text>
|
||||
<text v-if="Number(row.unit_cost) > 0" class="flow-cost">
|
||||
成本 ¥{{ moneyText(row.unit_cost) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="l-foot">
|
||||
<u-tag :text="docTypeLabel(row.doc_type)" type="info" size="mini" />
|
||||
<text class="foot-doc">{{ row.doc_no }}</text>
|
||||
<text class="foot-time">{{ row.create_time_text }}</text>
|
||||
</view>
|
||||
<text v-if="row.operator_name" class="l-op">操作人 {{ row.operator_name }}</text>
|
||||
</view>
|
||||
<view v-if="finished" class="load-done">
|
||||
<text>{{ list.length ? '没有更多了' : '' }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<ErpPicker
|
||||
:show="picker.show"
|
||||
:title="pickerTitle"
|
||||
placeholder="搜索"
|
||||
:options="picker.options"
|
||||
:model-value="picker.current"
|
||||
:remote="picker.key === 'product'"
|
||||
:loading="picker.loading"
|
||||
:tip="picker.tip"
|
||||
@update:show="closePicker"
|
||||
@search="onProductSearch"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 收发存流水台账。每行是「某商品某仓库某批次」的一次变动，前滚后结存直接可核对。
|
||||
* 商品维度可能上千，筛商品走服务端搜索；单据号点行可回到来源单据详情。
|
||||
*/
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
|
||||
import FaIcon from '@/components/FaIcon.vue'
|
||||
import ErpPicker from '@/components/erp/ErpPicker.vue'
|
||||
import {
|
||||
docTypeLabel,
|
||||
fetchDocTypes,
|
||||
fetchProducts,
|
||||
fetchStockLedger,
|
||||
fetchWarehouses,
|
||||
moneyText,
|
||||
qtyText
|
||||
} from '@/api/erp.js'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
|
||||
const list = ref([])
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
|
||||
const docNo = ref('')
|
||||
const warehouseId = ref('')
|
||||
const warehouseName = ref('')
|
||||
const productId = ref('')
|
||||
const productName = ref('')
|
||||
const docType = ref('')
|
||||
const batchNo = ref('')
|
||||
const dateFrom = ref('')
|
||||
const dateTo = ref('')
|
||||
|
||||
const warehouses = ref([])
|
||||
const docTypes = ref([])
|
||||
|
||||
const picker = ref({ key: '', show: false, options: [], current: '', loading: false, tip: '' })
|
||||
|
||||
const pickerTitle = computed(() =>
|
||||
({ warehouse: '选择仓库', product: '选择商品', docType: '选择单据类型' })[picker.value.key] || '请选择'
|
||||
)
|
||||
|
||||
/** 从商品/批次页带条件跳进来时，把锁定条件显式画出来，免得用户对着半屏数据找原因 */
|
||||
const filterText = computed(() =>
|
||||
[productName.value, batchNo.value ? `批次 ${batchNo.value}` : ''].filter(Boolean).join(' · ')
|
||||
)
|
||||
|
||||
onLoad((query = {}) => {
|
||||
if (query.product_id) {
|
||||
productId.value = String(query.product_id)
|
||||
productName.value = decodeURIComponent(query.product_name || '')
|
||||
}
|
||||
if (query.warehouse_id) {
|
||||
warehouseId.value = String(query.warehouse_id)
|
||||
warehouseName.value = decodeURIComponent(query.warehouse_name || '')
|
||||
}
|
||||
if (query.doc_type) docType.value = String(query.doc_type)
|
||||
if (query.doc_no) docNo.value = String(query.doc_no)
|
||||
if (query.batch_no) batchNo.value = String(query.batch_no)
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
refresh()
|
||||
loadDicts()
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
if (finished.value || loading.value) return
|
||||
loadMore()
|
||||
})
|
||||
|
||||
async function loadDicts() {
|
||||
if (!warehouses.value.length) {
|
||||
try {
|
||||
warehouses.value = await fetchWarehouses({ onlyEnabled: true })
|
||||
} catch (e) {
|
||||
// 字典拉不到只是不能筛，流水本身仍可查看
|
||||
}
|
||||
}
|
||||
if (!docTypes.value.length) {
|
||||
try {
|
||||
docTypes.value = await fetchDocTypes()
|
||||
} catch (e) {
|
||||
docTypes.value = []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
page.value = 1
|
||||
finished.value = false
|
||||
list.value = []
|
||||
await loadPage()
|
||||
}
|
||||
|
||||
async function loadMore() {
|
||||
page.value += 1
|
||||
await loadPage()
|
||||
}
|
||||
|
||||
async function loadPage() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await fetchStockLedger({
|
||||
page: page.value,
|
||||
pageSize: PAGE_SIZE,
|
||||
productId: productId.value,
|
||||
warehouseId: warehouseId.value,
|
||||
docType: docType.value,
|
||||
batchNo: batchNo.value,
|
||||
docNo: docNo.value.trim(),
|
||||
dateFrom: dateFrom.value,
|
||||
dateTo: dateTo.value
|
||||
})
|
||||
const rows = data.list || []
|
||||
list.value = page.value === 1 ? rows : [...list.value, ...rows]
|
||||
total.value = data.total || 0
|
||||
finished.value = list.value.length >= total.value
|
||||
} catch (e) {
|
||||
if (page.value > 1) page.value -= 1
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function onDate(key, e) {
|
||||
const val = e.detail.value
|
||||
if (key === 'from') dateFrom.value = val
|
||||
else dateTo.value = val
|
||||
if (dateFrom.value && dateTo.value && dateFrom.value > dateTo.value) {
|
||||
dateFrom.value = dateTo.value
|
||||
}
|
||||
refresh()
|
||||
}
|
||||
|
||||
function clearDates() {
|
||||
dateFrom.value = ''
|
||||
dateTo.value = ''
|
||||
refresh()
|
||||
}
|
||||
|
||||
function clearDocNo() {
|
||||
docNo.value = ''
|
||||
refresh()
|
||||
}
|
||||
|
||||
function clearFilter() {
|
||||
productId.value = ''
|
||||
productName.value = ''
|
||||
batchNo.value = ''
|
||||
refresh()
|
||||
}
|
||||
|
||||
async function openPicker(key) {
|
||||
picker.value.key = key
|
||||
picker.value.show = true
|
||||
picker.value.tip = ''
|
||||
picker.value.loading = false
|
||||
if (key === 'warehouse') {
|
||||
picker.value.current = warehouseId.value
|
||||
picker.value.options = [
|
||||
{ value: '', label: '全部仓库' },
|
||||
...warehouses.value.map((w) => ({
|
||||
value: w.id,
|
||||
label: w.warehouse_name,
|
||||
sub: w.warehouse_code || ''
|
||||
}))
|
||||
]
|
||||
} else if (key === 'docType') {
|
||||
picker.value.current = docType.value
|
||||
picker.value.options = [
|
||||
{ value: '', label: '全部类型' },
|
||||
...docTypes.value.map((t) => ({ value: t.value, label: t.label }))
|
||||
]
|
||||
} else {
|
||||
picker.value.current = productId.value
|
||||
await loadProducts('')
|
||||
}
|
||||
}
|
||||
|
||||
function closePicker() {
|
||||
picker.value.show = false
|
||||
picker.value.loading = false
|
||||
}
|
||||
|
||||
async function loadProducts(keyword) {
|
||||
picker.value.loading = true
|
||||
try {
|
||||
const { list: rows, total: sum } = await fetchProducts({ keyword, pageSize: 50 })
|
||||
picker.value.options = rows.map((p) => ({
|
||||
value: p.id,
|
||||
label: p.product_name,
|
||||
sub: [p.product_code, p.spec].filter(Boolean).join(' · '),
|
||||
extra: `${qtyText(p.total_stock)} ${p.base_unit || ''}`
|
||||
}))
|
||||
picker.value.tip = sum > rows.length ? `共 ${sum} 个商品，输入关键字继续找` : ''
|
||||
} finally {
|
||||
picker.value.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
function onProductSearch(keyword) {
|
||||
loadProducts(keyword)
|
||||
}
|
||||
|
||||
function onSelect(opt) {
|
||||
const key = picker.value.key
|
||||
if (key === 'warehouse') {
|
||||
warehouseId.value = String(opt.value ?? '')
|
||||
warehouseName.value = warehouseId.value ? opt.label : ''
|
||||
} else if (key === 'docType') {
|
||||
docType.value = String(opt.value ?? '')
|
||||
} else {
|
||||
productId.value = String(opt.value)
|
||||
productName.value = opt.label
|
||||
}
|
||||
closePicker()
|
||||
refresh()
|
||||
}
|
||||
|
||||
function openDoc(row) {
|
||||
if (!row.doc_id) return
|
||||
uni.navigateTo({ url: `/pages/erp/document/detail?id=${row.doc_id}` })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/src/styles/page-common.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: $color-bg-page;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: $color-bg-page;
|
||||
padding: 20rpx $page-padding-x 8rpx;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
height: 72rpx;
|
||||
padding: 0 24rpx;
|
||||
background: $color-card;
|
||||
border-radius: $radius-full;
|
||||
box-shadow: $shadow-card;
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.chip-row {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 10rpx 22rpx;
|
||||
border-radius: $radius-full;
|
||||
background: $color-card;
|
||||
font-size: 24rpx;
|
||||
color: $color-text-secondary;
|
||||
box-shadow: $shadow-card;
|
||||
|
||||
&.active {
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.date-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.date-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
height: 56rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: $radius-md;
|
||||
background: $color-card;
|
||||
font-size: 23rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.date-sep {
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.date-clear {
|
||||
font-size: 23rpx;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.sum-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 $page-padding-x 16rpx;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.sum-item {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.l-card {
|
||||
@include card;
|
||||
margin: 0 $page-padding-x 20rpx;
|
||||
padding: 22rpx 28rpx;
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.l-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.l-dir {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
width: 56rpx;
|
||||
height: 44rpx;
|
||||
border-radius: $radius-sm;
|
||||
justify-content: center;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.dir-in {
|
||||
background: rgba(22, 163, 74, 0.1);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
&.dir-out {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #ef4444;
|
||||
}
|
||||
}
|
||||
|
||||
.l-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $color-text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.l-qty {
|
||||
flex-shrink: 0;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
|
||||
&.qty-in {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
&.qty-out {
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
|
||||
.l-sub {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 23rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.l-flow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
margin-top: 16rpx;
|
||||
padding-top: 14rpx;
|
||||
border-top: 1rpx solid $color-divider;
|
||||
}
|
||||
|
||||
.flow-label {
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.flow-qty {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-secondary;
|
||||
|
||||
&.after {
|
||||
font-weight: 600;
|
||||
color: $color-primary-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.flow-cost {
|
||||
margin-left: auto;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.l-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.foot-doc {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 23rpx;
|
||||
color: $color-primary;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.foot-time {
|
||||
flex-shrink: 0;
|
||||
font-size: 21rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.l-op {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 21rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.load-done {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8rpx 0 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.state-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 40rpx;
|
||||
}
|
||||
|
||||
.state-text {
|
||||
font-size: 28rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,458 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="tab-bar">
|
||||
<view
|
||||
v-for="tab in TABS"
|
||||
:key="tab.key"
|
||||
class="tab"
|
||||
:class="{ active: tabKey === tab.key }"
|
||||
@tap="switchTab(tab.key)"
|
||||
>
|
||||
<text class="tab-label">{{ tab.label }}</text>
|
||||
<text v-if="countOf(tab.key)" class="tab-count">{{ countOf(tab.key) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="state-box">
|
||||
<text class="state-text">正在盘点预警...</text>
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="head-line">
|
||||
<text class="head-text">{{ headText }}</text>
|
||||
<text v-if="!isReplenish" class="head-tip">点商品看档案</text>
|
||||
</view>
|
||||
|
||||
<view v-if="!rows.length" class="state-box">
|
||||
<u-empty :text="emptyText" mode="list" />
|
||||
</view>
|
||||
|
||||
<template v-else-if="isReplenish">
|
||||
<view v-for="row in rows" :key="row.product_id" class="w-card">
|
||||
<view class="w-top">
|
||||
<text class="w-name" @tap="openProduct(row)">{{ row.product_name }}</text>
|
||||
<u-tag text="建议补货" type="primary" size="mini" />
|
||||
</view>
|
||||
<text class="w-sub">{{ [row.product_code, row.spec].filter(Boolean).join(' · ') }}</text>
|
||||
<view class="w-grid">
|
||||
<view class="w-cell">
|
||||
<text class="cell-label">现库存</text>
|
||||
<text class="cell-value">{{ qtyText(row.quantity) }} {{ row.unit || '' }}</text>
|
||||
</view>
|
||||
<view class="w-cell">
|
||||
<text class="cell-label">在途</text>
|
||||
<text class="cell-value">{{ qtyText(row.in_transit) }}</text>
|
||||
</view>
|
||||
<view class="w-cell">
|
||||
<text class="cell-label">近30天销量</text>
|
||||
<text class="cell-value">{{ qtyText(row.sold_30) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="w-sug">
|
||||
<view class="sug-left">
|
||||
<text class="sug-label">建议采购</text>
|
||||
<text class="sug-qty">{{ qtyText(row.suggest_qty) }} {{ row.unit || '' }}</text>
|
||||
</view>
|
||||
<view class="sug-right">
|
||||
<text class="sug-amount">约 ¥{{ moneyText(row.amount) }}</text>
|
||||
<view class="go-btn" @tap="toPurchase(row)">
|
||||
<FaIcon name="cart-plus" color="#ffffff" :size="13" />
|
||||
<text>去开采购单</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<view v-for="(row, i) in rows" :key="`${row.product_id}-${row.batch_no || ''}-${i}`" class="w-card">
|
||||
<view class="w-top">
|
||||
<text class="w-name" @tap="openProduct(row)">{{ row.product_name }}</text>
|
||||
<u-tag :text="row.type_label || tabLabel" :type="tagType" size="mini" />
|
||||
</view>
|
||||
<text class="w-sub">
|
||||
{{ [row.category_name, row.warehouse_name, row.batch_no ? '批次 ' + row.batch_no : '']
|
||||
.filter(Boolean).join(' · ') }}
|
||||
</text>
|
||||
<view class="w-grid">
|
||||
<view class="w-cell">
|
||||
<text class="cell-label">库存</text>
|
||||
<text class="cell-value strong">{{ qtyText(row.quantity) }} {{ row.unit || '' }}</text>
|
||||
</view>
|
||||
<view v-if="tabKey !== 'expiring'" class="w-cell">
|
||||
<text class="cell-label">安全库存</text>
|
||||
<text class="cell-value">{{ qtyText(row.safety_qty) }}</text>
|
||||
</view>
|
||||
<view v-if="tabKey === 'over'" class="w-cell">
|
||||
<text class="cell-label">最高库存</text>
|
||||
<text class="cell-value">{{ qtyText(row.max_qty) }}</text>
|
||||
</view>
|
||||
<view v-if="tabKey === 'low'" class="w-cell">
|
||||
<text class="cell-label">在途</text>
|
||||
<text class="cell-value">{{ qtyText(row.in_transit) }}</text>
|
||||
</view>
|
||||
<view v-if="tabKey === 'expiring'" class="w-cell">
|
||||
<text class="cell-label">到期日</text>
|
||||
<text class="cell-value">{{ row.expire_date || '未登记' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="w-foot">
|
||||
<text v-if="tabKey === 'expiring'" class="foot-warn">
|
||||
{{ expireText(row) }}
|
||||
</text>
|
||||
<text v-else-if="Number(row.suggest_qty) > 0" class="foot-sug">
|
||||
建议{{ row.type === 'over' ? '清仓' : '补货' }} {{ qtyText(row.suggest_qty) }} {{ row.unit || '' }}
|
||||
</text>
|
||||
<view v-if="row.type === 'low' || row.type === 'out'" class="go-mini" @tap="toPurchase(row)">
|
||||
<text>去开采购单</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 库存预警与智能补货。
|
||||
* 四类预警一次取回（同源同一份结存快照），切 tab 只换视图不重复打接口；
|
||||
* 补货建议口径更重（含近30天销量与在途），单独按需拉。
|
||||
*/
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import FaIcon from '@/components/FaIcon.vue'
|
||||
import { fetchReplenish, fetchStockWarning, moneyText, qtyText } from '@/api/erp.js'
|
||||
|
||||
const TABS = [
|
||||
{ key: 'low', label: '低库存' },
|
||||
{ key: 'out', label: '缺货' },
|
||||
{ key: 'over', label: '积压' },
|
||||
{ key: 'expiring', label: '效期' },
|
||||
{ key: 'replenish', label: '补货' }
|
||||
]
|
||||
|
||||
const HEADS = {
|
||||
low: '低于安全库存，按 1.5 倍安全量给出补货建议',
|
||||
out: '库存已清零，销售出库会被拦截',
|
||||
over: '超出最高库存，占资金且易过期',
|
||||
expiring: '30 天内到期的批次，先出先用',
|
||||
replenish: '综合现库存、在途与近 30 天销量的采购建议'
|
||||
}
|
||||
|
||||
const tabKey = ref('low')
|
||||
const warning = ref({ low: [], out: [], over: [], expiring: [], counts: {} })
|
||||
const replenish = ref([])
|
||||
const loading = ref(true)
|
||||
const replenishLoaded = ref(false)
|
||||
|
||||
const tabLabel = computed(() => (TABS.find((t) => t.key === tabKey.value) || {}).label || '预警')
|
||||
const isReplenish = computed(() => tabKey.value === 'replenish')
|
||||
const rows = computed(() => (isReplenish.value ? replenish.value : warning.value[tabKey.value] || []))
|
||||
const headText = computed(() => HEADS[tabKey.value] || '')
|
||||
const emptyText = computed(() => (isReplenish.value ? '库存充足，暂无补货建议' : '这一类没有预警，库存健康'))
|
||||
const tagType = computed(
|
||||
() => ({ low: 'warning', out: 'error', over: 'primary', expiring: 'warning' })[tabKey.value] || 'warning'
|
||||
)
|
||||
|
||||
onLoad((query = {}) => {
|
||||
if (query.tab && TABS.some((t) => t.key === query.tab)) tabKey.value = query.tab
|
||||
loadWarning()
|
||||
})
|
||||
|
||||
async function loadWarning() {
|
||||
loading.value = true
|
||||
try {
|
||||
warning.value = await fetchStockWarning()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
if (tabKey.value === 'replenish') loadReplenish()
|
||||
}
|
||||
|
||||
async function loadReplenish() {
|
||||
if (replenishLoaded.value) return
|
||||
replenishLoaded.value = true
|
||||
try {
|
||||
replenish.value = (await fetchReplenish()).list || []
|
||||
} catch (e) {
|
||||
replenishLoaded.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function switchTab(key) {
|
||||
if (tabKey.value === key) return
|
||||
tabKey.value = key
|
||||
if (key === 'replenish') loadReplenish()
|
||||
}
|
||||
|
||||
function countOf(key) {
|
||||
if (key === 'replenish') return replenish.value.length
|
||||
return (warning.value.counts || {})[key] || 0
|
||||
}
|
||||
|
||||
function expireText(row) {
|
||||
const d = Number(row.expire_in_days)
|
||||
if (!row.expire_date) return '未登记效期'
|
||||
if (d < 0) return `已过期 ${Math.abs(d)} 天，禁止出库`
|
||||
return `还有 ${d} 天到期`
|
||||
}
|
||||
|
||||
function openProduct(row) {
|
||||
if (!row.product_id) return
|
||||
uni.navigateTo({ url: `/pages/erp/basic/product-detail?id=${row.product_id}` })
|
||||
}
|
||||
|
||||
function toPurchase(row) {
|
||||
const qty = Number(row.suggest_qty) > 0 ? row.suggest_qty : ''
|
||||
uni.navigateTo({
|
||||
url: `/pages/erp/document/edit?doc_type=purchase_order&product_id=${row.product_id}&quantity=${qty}`
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/src/styles/page-common.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: $color-bg-page;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
background: $color-card;
|
||||
box-shadow: $shadow-header;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
padding: 24rpx 0 20rpx;
|
||||
position: relative;
|
||||
|
||||
.tab-label {
|
||||
font-size: 26rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.tab-count {
|
||||
min-width: 32rpx;
|
||||
height: 32rpx;
|
||||
padding: 0 8rpx;
|
||||
border-radius: $radius-full;
|
||||
background: #f1f5f9;
|
||||
color: $color-text-secondary;
|
||||
font-size: 20rpx;
|
||||
line-height: 32rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-label {
|
||||
color: $color-primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-count {
|
||||
background: $color-primary;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 48rpx;
|
||||
height: 6rpx;
|
||||
margin-left: -24rpx;
|
||||
border-radius: 3rpx;
|
||||
background: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
padding: 22rpx $page-padding-x 6rpx;
|
||||
}
|
||||
|
||||
.head-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 23rpx;
|
||||
color: $color-text-muted;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.head-tip {
|
||||
flex-shrink: 0;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.w-card {
|
||||
@include card;
|
||||
margin: 20rpx $page-padding-x 0;
|
||||
padding: 24rpx 28rpx;
|
||||
}
|
||||
|
||||
.w-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.w-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 29rpx;
|
||||
font-weight: 500;
|
||||
color: $color-text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.w-sub {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 23rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.w-grid {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
margin-top: 18rpx;
|
||||
padding-top: 16rpx;
|
||||
border-top: 1rpx solid $color-divider;
|
||||
}
|
||||
|
||||
.w-cell {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.cell-label {
|
||||
display: block;
|
||||
font-size: 21rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.cell-value {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 25rpx;
|
||||
color: $color-text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.strong {
|
||||
font-weight: 600;
|
||||
color: $color-primary-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.w-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.foot-sug {
|
||||
font-size: 23rpx;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.foot-warn {
|
||||
font-size: 23rpx;
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
.go-mini {
|
||||
flex-shrink: 0;
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: $radius-full;
|
||||
background: $color-primary-bg;
|
||||
font-size: 22rpx;
|
||||
color: $color-primary-dark;
|
||||
}
|
||||
|
||||
.w-sug {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
padding-top: 18rpx;
|
||||
border-top: 1rpx solid $color-divider;
|
||||
}
|
||||
|
||||
.sug-left {
|
||||
.sug-label {
|
||||
display: block;
|
||||
font-size: 21rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.sug-qty {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.sug-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 12rpx;
|
||||
|
||||
.sug-amount {
|
||||
font-size: 23rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.go-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
height: 56rpx;
|
||||
padding: 0 24rpx;
|
||||
border-radius: $radius-full;
|
||||
background: linear-gradient(135deg, #60a5fa, #2563eb);
|
||||
color: #ffffff;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
|
||||
.state-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 40rpx;
|
||||
}
|
||||
|
||||
.state-text {
|
||||
font-size: 28rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user