61 lines
4.1 KiB
Vue
61 lines
4.1 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
import { ArrowLeft } from '@lucide/vue'
|
|||
|
|
import { useRouter } from 'vue-router'
|
|||
|
|
import AdminPage from '@/shared/components/AdminPage.vue'
|
|||
|
|
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
|||
|
|
import ListPageLayout from '@/shared/components/ListPageLayout.vue'
|
|||
|
|
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
|
|||
|
|
import ContractPendingNotice from '../components/ContractPendingNotice.vue'
|
|||
|
|
import type { InventoryTransactionListItem } from '../types'
|
|||
|
|
|
|||
|
|
const router = useRouter()
|
|||
|
|
const rows = ref<InventoryTransactionListItem[]>([])
|
|||
|
|
const page = ref(1)
|
|||
|
|
const pageSize = ref(20)
|
|||
|
|
const filters = ref<QueryModel>({ occurredDate: [], owner: '', warehouse: '', sku: '', businessType: '', businessOrderNo: '', inboundOrderNo: '', outboundOrderNo: '' })
|
|||
|
|
const fields: QueryField[] = [
|
|||
|
|
{ key: 'occurredDate', type: 'daterange', label: '发生日期', width: 260 },
|
|||
|
|
{ key: 'owner', type: 'input', label: '客户/货主', placeholder: '请输入客户或货主', width: 190 },
|
|||
|
|
{ key: 'warehouse', type: 'select', label: '海外仓', placeholder: '全部海外仓', width: 190, options: [] },
|
|||
|
|
{ key: 'sku', type: 'input', label: 'SKU编码', placeholder: '请输入SKU编码', width: 170 },
|
|||
|
|
{ key: 'businessType', type: 'select', label: '业务类型', placeholder: '全部业务类型', width: 170, options: ['采购库存', '头程入库', '尾程入库', '退货入库', '暂扣库存', '一件代发', '头程出库', '派送出库', '调拨转仓', '库存调整'].map((value) => ({ label: value, value })) },
|
|||
|
|
{ key: 'businessOrderNo', type: 'input', label: '业务订单号', placeholder: '请输入业务订单号', width: 180 },
|
|||
|
|
{ key: 'inboundOrderNo', type: 'input', label: '入库单号', placeholder: '请输入入库单号', width: 180 },
|
|||
|
|
{ key: 'outboundOrderNo', type: 'input', label: '出库单号', placeholder: '请输入出库单号', width: 180 },
|
|||
|
|
]
|
|||
|
|
const columns: DataTableColumn[] = [
|
|||
|
|
{ key: 'occurredAt', label: '发生时间', minWidth: 160 },
|
|||
|
|
{ key: 'owner', label: '客户', minWidth: 160 },
|
|||
|
|
{ key: 'warehouse', label: '海外仓', minWidth: 180 },
|
|||
|
|
{ key: 'sku', label: 'SKU编码', minWidth: 150 },
|
|||
|
|
{ key: 'productName', label: '中文品名', minWidth: 180 },
|
|||
|
|
{ key: 'businessType', label: '业务类型', width: 120 },
|
|||
|
|
{ key: 'businessOrderNo', label: '业务订单号', minWidth: 170 },
|
|||
|
|
{ key: 'inboundOrderNo', label: '入库单号', minWidth: 160 },
|
|||
|
|
{ key: 'outboundOrderNo', label: '出库单号', minWidth: 160 },
|
|||
|
|
{ key: 'inboundQuantity', label: '入库数量', width: 110, align: 'right' },
|
|||
|
|
{ key: 'outboundQuantity', label: '出库数量', width: 110, align: 'right' },
|
|||
|
|
{ key: 'balance', label: '结存', width: 100, align: 'right' },
|
|||
|
|
{ key: 'operator', label: '操作人', minWidth: 120 },
|
|||
|
|
{ key: 'remark', label: '备注', minWidth: 180 },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
function back() { void router.push({ name: 'overseas-inventory' }) }
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<AdminPage><ListPageLayout aria-label="进销存记录列表">
|
|||
|
|
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" :fields="fields" ariaLabel="进销存记录筛选" preference-key="overseas-inventory-transactions-query" @search="page = 1" /></template>
|
|||
|
|
<template #state><ContractPendingNotice domain="进销存记录" /><p class="read-only-boundary">出库相关字段仅展示既有库存流水事实；本页面不提供出库单跳转、库存扣减或其他离仓操作。</p></template>
|
|||
|
|
<section class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :total="0" preference-key="overseas-inventory-transactions" row-key="id" empty-text="海外区域进销存查询契约待接入">
|
|||
|
|
<template #toolbar-actions><el-button @click="back"><ArrowLeft :size="16" />返回库存管理</el-button></template>
|
|||
|
|
<template #pagination-left>共 0 条进销存记录</template>
|
|||
|
|
</DataTable></section>
|
|||
|
|
</ListPageLayout></AdminPage>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.read-only-boundary { margin: 8px 2px 0; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
|
|||
|
|
</style>
|