94 lines
6.5 KiB
Vue
94 lines
6.5 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { Eye } 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 { LastMileOrderListItem } from '../types'
|
||
|
|
|
||
|
|
const rows = ref<LastMileOrderListItem[]>([])
|
||
|
|
const router = useRouter()
|
||
|
|
const page = ref(1)
|
||
|
|
const pageSize = ref(20)
|
||
|
|
const statusTab = ref<'全部' | '待分配'>('全部')
|
||
|
|
const filters = ref<QueryModel>({ orderNo: '', inboundCode: '', warehouse: '', fbaWarehouse: '', orderType: '', owner: '', containerNo: '', status: '', consolidated: '', portEta: [] })
|
||
|
|
const fields: QueryField[] = [
|
||
|
|
{ key: 'orderNo', type: 'input', label: '尾程单号', placeholder: '请输入尾程单号' },
|
||
|
|
{ key: 'inboundCode', type: 'input', label: '入仓码', placeholder: '请输入入仓码' },
|
||
|
|
{ key: 'warehouse', type: 'select', label: '海外仓', placeholder: '全部海外仓', options: [] },
|
||
|
|
{ key: 'fbaWarehouse', type: 'select', label: 'FBA仓库', placeholder: '全部FBA仓库', options: [] },
|
||
|
|
{ key: 'orderType', type: 'select', label: '订单类型', placeholder: '全部订单类型', options: ['一件代发', '头程', '拒收订单', '快递订单'].map((value) => ({ label: value, value })) },
|
||
|
|
{ key: 'owner', type: 'input', label: '货主', placeholder: '请输入货主' },
|
||
|
|
{ key: 'containerNo', type: 'input', label: '集装箱号', placeholder: '请输入集装箱号' },
|
||
|
|
{ key: 'status', type: 'select', label: '当前状态', placeholder: '全部状态', options: ['待入库计划', '待清关', '清关完成', '已合托', '待预约', '预约中', '预约成功'].map((value) => ({ label: value, value })) },
|
||
|
|
{ key: 'consolidated', type: 'select', label: '是否合托', placeholder: '全部', options: [{ label: '是', value: 'yes' }, { label: '否', value: 'no' }] },
|
||
|
|
{ key: 'portEta', type: 'daterange', label: '预计到港时间' },
|
||
|
|
]
|
||
|
|
const columns: DataTableColumn[] = [
|
||
|
|
{ key: 'actions', label: '操作', width: 110, fixed: 'left', slotName: 'actions' },
|
||
|
|
{ key: 'orderNo', prop: 'orderNo', label: '尾程单号', minWidth: 170 },
|
||
|
|
{ key: 'warning', prop: 'warning', label: '预警', width: 90 },
|
||
|
|
{ key: 'orderType', prop: 'orderType', label: '订单类型', minWidth: 110 },
|
||
|
|
{ key: 'rejectedAt', prop: 'rejectedAt', label: '拒收时间', minWidth: 150 },
|
||
|
|
{ key: 'inboundCode', prop: 'inboundCode', label: '入仓码', minWidth: 140 },
|
||
|
|
{ key: 'owner', prop: 'owner', label: '货主', minWidth: 150 },
|
||
|
|
{ key: 'warehouse', prop: 'warehouse', label: '海外仓', minWidth: 170 },
|
||
|
|
{ key: 'transferWarehouse', prop: 'transferWarehouse', label: '转仓', minWidth: 140 },
|
||
|
|
{ key: 'fbaWarehouse', prop: 'fbaWarehouse', label: 'FBA仓库', minWidth: 130 },
|
||
|
|
{ key: 'containerNo', prop: 'containerNo', label: '集装箱号', minWidth: 150 },
|
||
|
|
{ key: 'containerStatus', prop: 'containerStatus', label: '货柜状态', width: 110 },
|
||
|
|
{ key: 'abnormal', prop: 'abnormal', label: '是否异常', width: 100 },
|
||
|
|
{ key: 'held', prop: 'held', label: '是否暂扣', width: 100 },
|
||
|
|
{ key: 'pallets', prop: 'pallets', label: '托数', width: 80, align: 'right' },
|
||
|
|
{ key: 'cartons', prop: 'cartons', label: '箱数', width: 80, align: 'right' },
|
||
|
|
{ key: 'volume', prop: 'volume', label: '体积(m³)', width: 100, align: 'right' },
|
||
|
|
{ key: 'quantity', prop: 'quantity', label: '数量', width: 80, align: 'right' },
|
||
|
|
{ key: 'volumeWeight', prop: 'volumeWeight', label: '体积重量', width: 100, align: 'right' },
|
||
|
|
{ key: 'portEta', prop: 'portEta', label: '预计到港时间', minWidth: 150 },
|
||
|
|
{ key: 'portAta', prop: 'portAta', label: '实际到港时间', minWidth: 150 },
|
||
|
|
{ key: 'warehouseEta', prop: 'warehouseEta', label: '预计到仓', minWidth: 140 },
|
||
|
|
{ key: 'inboundOrderNo', prop: 'inboundOrderNo', label: '入库单号', minWidth: 150 },
|
||
|
|
{ key: 'outboundOrderNo', prop: 'outboundOrderNo', label: '出库单号', minWidth: 150 },
|
||
|
|
{ key: 'dispatchOrderNo', prop: 'dispatchOrderNo', label: '派送单号', minWidth: 150 },
|
||
|
|
{ key: 'relabelOrderNo', prop: 'relabelOrderNo', label: '换标单号', minWidth: 150 },
|
||
|
|
{ key: 'relabelStatus', prop: 'relabelStatus', label: '换标状态', width: 110 },
|
||
|
|
{ key: 'consolidated', prop: 'consolidated', label: '合托标记', width: 100 },
|
||
|
|
{ key: 'status', prop: 'status', label: '当前状态', width: 110 },
|
||
|
|
{ key: 'internalRemark', prop: 'internalRemark', label: '备注(仅自己)', minWidth: 160 },
|
||
|
|
{ key: 'customerRemark', prop: 'customerRemark', label: '备注(客户)', minWidth: 160 },
|
||
|
|
{ key: 'warehouseRemark', prop: 'warehouseRemark', label: '备注(仓库)', minWidth: 160 },
|
||
|
|
]
|
||
|
|
|
||
|
|
function openDetail(source: object) {
|
||
|
|
const row = source as LastMileOrderListItem
|
||
|
|
void router.push({ name: 'overseas-last-mile-order-detail', params: { orderId: row.orderNo } })
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<AdminPage><ListPageLayout aria-label="尾程订单列表">
|
||
|
|
<template #toolbar>
|
||
|
|
<section class="surface-panel last-mile-toolbar" aria-label="尾程订单状态与筛选">
|
||
|
|
<el-radio-group v-model="statusTab" aria-label="尾程订单状态" @change="page = 1">
|
||
|
|
<el-radio-button value="全部">全部</el-radio-button>
|
||
|
|
<el-radio-button value="待分配">待分配</el-radio-button>
|
||
|
|
</el-radio-group>
|
||
|
|
<QueryToolbar v-model="filters" :fields="fields" ariaLabel="尾程订单筛选" preference-key="overseas-last-mile-orders-query" @search="page = 1" />
|
||
|
|
</section>
|
||
|
|
</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-last-mile-orders" row-key="orderNo" empty-text="海外区域尾程订单查询契约待接入">
|
||
|
|
<template #actions="{ row }"><el-button size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />查看</el-button></template>
|
||
|
|
<template #pagination-left>共 0 条尾程订单</template>
|
||
|
|
</DataTable></section>
|
||
|
|
</ListPageLayout></AdminPage>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.last-mile-toolbar { padding: 14px 16px 0; }
|
||
|
|
.last-mile-toolbar :deep(.query-toolbar) { margin-top: 12px; padding: 12px 0 16px; border: 0; border-top: 1px solid var(--cc-border); border-radius: 0; }
|
||
|
|
</style>
|