596 lines
13 KiB
Vue
596 lines
13 KiB
Vue
<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>
|