更新
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,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>
|
||||
Reference in new issue
Block a user