49 lines
3.2 KiB
Vue
49 lines
3.2 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { Eye, Pencil } from '@lucide/vue'
|
||
|
|
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 { OverseasPurchaseOrder } from '../types'
|
||
|
|
|
||
|
|
const rows = ref<OverseasPurchaseOrder[]>([])
|
||
|
|
const page = ref(1)
|
||
|
|
const pageSize = ref(20)
|
||
|
|
const filters = ref<QueryModel>({ orderNo: '', category: '', productName: '' })
|
||
|
|
const fields: QueryField[] = [
|
||
|
|
{ key: 'orderNo', type: 'input', label: '订单编号', placeholder: '请输入订单编号', width: 210 },
|
||
|
|
{ key: 'category', type: 'input', label: '采购品类', placeholder: '请输入采购品类', width: 190 },
|
||
|
|
{ key: 'productName', type: 'input', label: '商品名称', placeholder: '请输入商品名称', width: 210 },
|
||
|
|
]
|
||
|
|
const columns: DataTableColumn[] = [
|
||
|
|
{ key: 'actions', label: '操作', width: 176, fixed: 'left', slotName: 'actions' },
|
||
|
|
{ key: 'orderNo', prop: 'orderNo', label: '订单编号', minWidth: 170 },
|
||
|
|
{ key: 'customerName', prop: 'customerName', label: '客户名称', minWidth: 180 },
|
||
|
|
{ key: 'purchaseWarehouseName', prop: 'purchaseWarehouseName', label: '采购仓库', minWidth: 160 },
|
||
|
|
{ key: 'category', prop: 'category', label: '采购品类', minWidth: 130 },
|
||
|
|
{ key: 'productName', prop: 'productName', label: '商品名称', minWidth: 160 },
|
||
|
|
{ key: 'specification', prop: 'specification', label: '商品规格', minWidth: 180 },
|
||
|
|
{ key: 'unitPrice', prop: 'unitPrice', label: '采购单价', width: 120, align: 'right' },
|
||
|
|
{ key: 'inboundQuantity', prop: 'inboundQuantity', label: '入库量', width: 95, align: 'right' },
|
||
|
|
{ key: 'outboundQuantity', prop: 'outboundQuantity', label: '出库量', width: 95, align: 'right' },
|
||
|
|
{ key: 'stockQuantity', prop: 'stockQuantity', label: '库存量', width: 95, align: 'right' },
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<AdminPage><ListPageLayout aria-label="海外采购订单列表">
|
||
|
|
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" :fields="fields" ariaLabel="海外采购订单筛选" preference-key="overseas-business-purchases-query" @search="page = 1" /></template>
|
||
|
|
<template #state><ContractPendingNotice domain="海外采购订单" /></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-business-purchases" row-key="id" empty-text="海外采购订单查询契约待接入">
|
||
|
|
<template #actions><div class="table-actions"><el-button size="small" type="primary" plain disabled><Eye :size="15" />详情</el-button><el-button size="small" disabled><Pencil :size="15" />编辑</el-button></div></template>
|
||
|
|
<template #pagination-left>共 0 条海外采购订单</template>
|
||
|
|
</DataTable></section>
|
||
|
|
</ListPageLayout></AdminPage>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.table-panel { overflow: hidden; }.table-actions { display: flex; gap: 6px; }.table-actions :deep(.el-button) { margin-left: 0; }
|
||
|
|
</style>
|