477 lines
10 KiB
Vue
477 lines
10 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="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="typePicker = true">
|
|
<FaIcon name="filter" color="#2563eb" :size="14" />
|
|
<text>{{ currentTypeLabel }}</text>
|
|
</view>
|
|
<view class="chip" @tap="openWarehousePicker">
|
|
<FaIcon name="warehouse" color="#2563eb" :size="14" />
|
|
<text>{{ currentWarehouseLabel }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view class="tab-scroll" scroll-x :show-scrollbar="false">
|
|
<view class="tab-list">
|
|
<view
|
|
v-for="tab in statusTabs"
|
|
:key="String(tab.value)"
|
|
class="tab-item"
|
|
:class="{ active: currentStatus === tab.value }"
|
|
@tap="onTabChange(tab.value)"
|
|
>
|
|
<text>{{ tab.label }}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</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="list" text="暂无单据" />
|
|
</view>
|
|
<template v-else>
|
|
<view v-for="row in list" :key="row.id" class="doc-card" @tap="openDetail(row)">
|
|
<view class="card-top">
|
|
<view class="card-title">
|
|
<text class="card-type">{{ row.doc_type_label || row.doc_type }}</text>
|
|
<text class="card-no">{{ row.doc_no }}</text>
|
|
</view>
|
|
<u-tag :text="row.status_label || docStatusLabel(row.status)" :type="docStatusType(row.status)" size="mini" />
|
|
</view>
|
|
<view class="card-partner">
|
|
<FaIcon :name="row.partner_type === 'supplier' ? 'truck' : 'user'" color="#94a3b8" :size="14" />
|
|
<text>{{ row.partner_name || row.warehouse_name || '内部单据' }}</text>
|
|
</view>
|
|
<view class="card-amounts">
|
|
<view class="amount-item">
|
|
<text class="amount-label">金额</text>
|
|
<text class="amount-value">¥{{ moneyText(row.actual_amount) }}</text>
|
|
</view>
|
|
<view class="amount-item">
|
|
<text class="amount-label">数量</text>
|
|
<text class="amount-value">{{ qtyText(row.total_qty) }}</text>
|
|
</view>
|
|
<view class="amount-item">
|
|
<text class="amount-label">业务日期</text>
|
|
<text class="amount-value">{{ row.biz_date }}</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="row.remark" class="card-remark">
|
|
<text>{{ row.remark }}</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="finished" class="load-done">
|
|
<text>{{ list.length ? '没有更多了' : '' }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<view class="fab" @tap="openCreate">
|
|
<FaIcon name="pen" color="#ffffff" :size="18" />
|
|
<text>新建单据</text>
|
|
</view>
|
|
|
|
<ErpPicker
|
|
v-model:show="typePicker"
|
|
title="单据类型"
|
|
placeholder="搜索类型"
|
|
:options="typeOptions"
|
|
:model-value="docType"
|
|
@select="onTypeSelect"
|
|
/>
|
|
<ErpPicker
|
|
v-model:show="warehousePicker"
|
|
title="仓库"
|
|
placeholder="搜索仓库名"
|
|
:options="warehouseOptions"
|
|
:model-value="warehouseId"
|
|
@select="onWarehouseSelect"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
|
|
import FaIcon from '@/components/FaIcon.vue'
|
|
import ErpPicker from '@/components/erp/ErpPicker.vue'
|
|
import {
|
|
DOC_STATUS_OPTIONS,
|
|
docStatusLabel,
|
|
docStatusType,
|
|
fetchDocTypes,
|
|
fetchDocs,
|
|
fetchWarehouses,
|
|
moneyText,
|
|
qtyText
|
|
} from '@/api/erp.js'
|
|
|
|
const PAGE_SIZE = 20
|
|
|
|
const statusTabs = [{ value: '', label: '全部' }, ...DOC_STATUS_OPTIONS]
|
|
|
|
const list = ref([])
|
|
const total = ref(0)
|
|
const page = ref(1)
|
|
const loading = ref(false)
|
|
const finished = ref(false)
|
|
const keyword = ref('')
|
|
const currentStatus = ref('')
|
|
const docType = ref('')
|
|
const warehouseId = ref('')
|
|
const docTypes = ref([])
|
|
const warehouses = ref([])
|
|
|
|
const typePicker = ref(false)
|
|
const warehousePicker = ref(false)
|
|
|
|
const typeOptions = computed(() => [
|
|
{ value: '', label: '全部类型', sub: '不限单据类型' },
|
|
...docTypes.value.map(item => ({ value: item.value, label: item.label, sub: describeType(item) }))
|
|
])
|
|
|
|
const warehouseOptions = computed(() => [
|
|
{ value: '', label: '全部仓库' },
|
|
...warehouses.value.map(item => ({
|
|
value: item.id,
|
|
label: item.warehouse_name,
|
|
sub: `${item.stock_kinds || 0} 个品种 · 货值 ¥${moneyText(item.stock_value)}`
|
|
}))
|
|
])
|
|
|
|
const currentTypeLabel = computed(() => {
|
|
const hit = docTypes.value.find(item => item.value === docType.value)
|
|
return hit ? hit.label : '全部类型'
|
|
})
|
|
|
|
const currentWarehouseLabel = computed(() => {
|
|
const hit = warehouses.value.find(item => String(item.id) === String(warehouseId.value))
|
|
return hit ? hit.warehouse_name : '全部仓库'
|
|
})
|
|
|
|
onLoad((query = {}) => {
|
|
if (query.doc_type) docType.value = query.doc_type
|
|
if (query.status !== undefined && query.status !== '') currentStatus.value = Number(query.status)
|
|
})
|
|
|
|
onShow(() => {
|
|
refresh()
|
|
loadDictionaries()
|
|
})
|
|
|
|
onReachBottom(() => {
|
|
if (finished.value || loading.value) return
|
|
loadMore()
|
|
})
|
|
|
|
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 fetchDocs({
|
|
page: page.value,
|
|
pageSize: PAGE_SIZE,
|
|
docType: docType.value,
|
|
status: currentStatus.value,
|
|
keyword: keyword.value.trim(),
|
|
warehouseId: warehouseId.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
|
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function loadDictionaries() {
|
|
try {
|
|
const [types, houses] = await Promise.all([fetchDocTypes(), fetchWarehouses({ onlyEnabled: true })])
|
|
docTypes.value = types
|
|
warehouses.value = houses
|
|
} catch (e) {
|
|
// 字典失败不影响列表，筛选降级为「全部」
|
|
}
|
|
}
|
|
|
|
function describeType(item) {
|
|
const parts = []
|
|
parts.push(item.partner_type === 'supplier' ? '供应商' : item.partner_type === 'customer' ? '客户' : '内部')
|
|
parts.push(item.affects_stock ? '动库存' : '不动库存')
|
|
return parts.join(' · ')
|
|
}
|
|
|
|
function clearKeyword() {
|
|
keyword.value = ''
|
|
refresh()
|
|
}
|
|
|
|
function onTabChange(value) {
|
|
if (currentStatus.value === value) return
|
|
currentStatus.value = value
|
|
refresh()
|
|
}
|
|
|
|
function onTypeSelect(opt) {
|
|
docType.value = opt.value
|
|
refresh()
|
|
}
|
|
|
|
function onWarehouseSelect(opt) {
|
|
warehouseId.value = opt.value
|
|
refresh()
|
|
}
|
|
|
|
function openWarehousePicker() {
|
|
warehousePicker.value = true
|
|
}
|
|
|
|
function openDetail(row) {
|
|
uni.navigateTo({ url: `/pages/erp/document/detail?id=${row.id}` })
|
|
}
|
|
|
|
function openCreate() {
|
|
const query = docType.value ? `?doc_type=${docType.value}` : ''
|
|
uni.navigateTo({ url: `/pages/erp/document/edit${query}` })
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/src/styles/page-common.scss';
|
|
|
|
.page {
|
|
min-height: 100vh;
|
|
background: $color-bg-page;
|
|
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.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: 16rpx;
|
|
}
|
|
|
|
.chip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
padding: 10rpx 22rpx;
|
|
border-radius: $radius-full;
|
|
background: $color-card;
|
|
box-shadow: $shadow-card;
|
|
font-size: 24rpx;
|
|
color: $color-text-secondary;
|
|
max-width: 46%;
|
|
|
|
text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.tab-scroll {
|
|
margin-top: 16rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tab-list {
|
|
display: inline-flex;
|
|
gap: 16rpx;
|
|
padding: 4rpx 0 12rpx;
|
|
}
|
|
|
|
.tab-item {
|
|
padding: 10rpx 28rpx;
|
|
border-radius: $radius-full;
|
|
background: $color-card;
|
|
font-size: 26rpx;
|
|
color: $color-text-secondary;
|
|
box-shadow: $shadow-card;
|
|
|
|
&.active {
|
|
background: #2563eb;
|
|
color: #ffffff;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.doc-card {
|
|
@include card;
|
|
margin: 0 $page-padding-x 24rpx;
|
|
padding: 28rpx;
|
|
|
|
&:active {
|
|
opacity: 0.85;
|
|
}
|
|
}
|
|
|
|
.card-top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.card-title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.card-type {
|
|
display: block;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: $color-text;
|
|
}
|
|
|
|
.card-no {
|
|
display: block;
|
|
margin-top: 6rpx;
|
|
font-size: 23rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
|
|
.card-partner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
margin-top: 16rpx;
|
|
font-size: 25rpx;
|
|
color: $color-text-secondary;
|
|
}
|
|
|
|
.card-amounts {
|
|
display: flex;
|
|
margin-top: 18rpx;
|
|
padding-top: 18rpx;
|
|
border-top: 1rpx solid $color-divider;
|
|
}
|
|
|
|
.amount-item {
|
|
flex: 1;
|
|
}
|
|
|
|
.amount-label {
|
|
display: block;
|
|
font-size: 21rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
|
|
.amount-value {
|
|
display: block;
|
|
margin-top: 6rpx;
|
|
font-size: 26rpx;
|
|
color: $color-text;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.card-remark {
|
|
margin-top: 14rpx;
|
|
font-size: 23rpx;
|
|
color: $color-text-muted;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.state-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 140rpx 0;
|
|
}
|
|
|
|
.state-text {
|
|
font-size: 28rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
|
|
.load-done {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 8rpx 0 24rpx;
|
|
font-size: 24rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
|
|
.fab {
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: calc(48rpx + env(safe-area-inset-bottom));
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
height: 88rpx;
|
|
padding: 0 48rpx;
|
|
border-radius: $radius-full;
|
|
background: #2563eb;
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
box-shadow: 0 8rpx 24rpx rgba(37, 99, 235, 0.4);
|
|
|
|
&:active {
|
|
opacity: 0.85;
|
|
}
|
|
}
|
|
</style>
|