88 lines
7.5 KiB
Vue
88 lines
7.5 KiB
Vue
<script setup lang="ts">
|
||
import { reactive, ref } from 'vue'
|
||
import { Eye, Pencil, Plus, Upload } from '@lucide/vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||
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 ContractPendingFormDialog from '../components/ContractPendingFormDialog.vue'
|
||
import { overseasWarehousePermissions as permission } from '../permissions'
|
||
import type { RelabelOrderListItem } from '../types'
|
||
|
||
const access = useAccessPreviewStore()
|
||
const router = useRouter()
|
||
const rows = ref<RelabelOrderListItem[]>([])
|
||
const page = ref(1)
|
||
const pageSize = ref(20)
|
||
const filters = ref<QueryModel>({ sku: '', status: '' })
|
||
const fields: QueryField[] = [
|
||
{ key: 'sku', type: 'input', label: '商品SKU', placeholder: '请输入商品SKU', width: 180 },
|
||
{ key: 'status', type: 'select', label: '状态', placeholder: '全部状态', width: 160, options: ['待处理', '处理中', '已完成'].map((value) => ({ label: value, value })) },
|
||
]
|
||
const columns: DataTableColumn[] = [
|
||
{ key: 'actions', label: '操作', width: 190, fixed: 'left', slotName: 'actions' },
|
||
{ key: 'orderNo', label: '换标单号', minWidth: 170 },
|
||
{ key: 'sku', label: '商品SKU', minWidth: 150 },
|
||
{ key: 'productName', label: '中文品名', minWidth: 180 },
|
||
{ key: 'cartons', label: '箱数', width: 90, align: 'right' },
|
||
{ key: 'budgetTotal', label: '预算总价', width: 120, align: 'right' },
|
||
{ key: 'labelRequirement', label: '贴标要求', minWidth: 150 },
|
||
{ key: 'fileName', label: '上传文件', minWidth: 160 },
|
||
{ key: 'status', label: '状态', width: 110 },
|
||
]
|
||
const dialogOpen = ref(false)
|
||
const dialogMode = ref<'create' | 'edit'>('create')
|
||
const form = reactive({ orderNo: '', relatedOrderNo: '', sku: '', productName: '', cartons: undefined as number | undefined, budgetTotal: undefined as number | undefined, status: '待处理', labelRequirement: '', relabelCost: undefined as number | undefined, remark: '' })
|
||
|
||
function optionalNumber(value: unknown) { const number = Number(value); return value === '' || value == null || !Number.isFinite(number) ? undefined : number }
|
||
function openForm(mode: 'create' | 'edit', source?: object) {
|
||
const row = source as RelabelOrderListItem | undefined
|
||
dialogMode.value = mode
|
||
Object.assign(form, { orderNo: '', relatedOrderNo: '', sku: '', productName: '', cartons: undefined, budgetTotal: undefined, status: '待处理', labelRequirement: '', relabelCost: undefined, remark: '' })
|
||
if (mode === 'edit' && row) Object.assign(form, { orderNo: String(row.orderNo || ''), relatedOrderNo: String(row.relatedOrderNo || ''), sku: String(row.sku || ''), productName: String(row.productName || ''), cartons: optionalNumber(row.cartons), budgetTotal: optionalNumber(row.budgetTotal), status: String(row.status || '待处理'), labelRequirement: String(row.labelRequirement || ''), relabelCost: optionalNumber(row.relabelCost), remark: String(row.remark || '') })
|
||
dialogOpen.value = true
|
||
}
|
||
|
||
function openDetail(source: object) {
|
||
const row = source as RelabelOrderListItem
|
||
void router.push({ name: 'overseas-relabel-order-detail', params: { orderId: String(row.orderNo) } })
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<AdminPage><ListPageLayout aria-label="换标单列表">
|
||
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" :fields="fields" ariaLabel="换标单筛选" preference-key="overseas-relabel-orders-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-relabel-orders" row-key="orderNo" empty-text="海外区域换标单查询契约待接入">
|
||
<template #toolbar-actions><el-button v-if="access.can(permission.relabelOrderCreate)" type="primary" @click="openForm('create')"><Plus :size="16" />新增换标单</el-button></template>
|
||
<template #actions="{ row }"><el-button size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />查看</el-button><el-button v-if="access.can(permission.relabelOrderEdit)" size="small" plain @click="openForm('edit', row)"><Pencil :size="15" />审核</el-button></template>
|
||
<template #pagination-left>共 0 条换标单</template>
|
||
</DataTable></section>
|
||
</ListPageLayout>
|
||
<ContractPendingFormDialog v-model="dialogOpen" :title="dialogMode === 'create' ? '新增换标单' : '审核换标单'" width="min(760px, calc(100vw - 28px))" domain="换标单" :confirm-text="dialogMode === 'create' ? '保存换标单' : '提交审核'">
|
||
<el-form label-position="top"><h3>订单信息</h3><el-row :gutter="16">
|
||
<el-col :span="12"><el-form-item label="换标单号"><el-input :model-value="dialogMode === 'create' ? '系统自动生成' : form.orderNo || '—'" readonly /></el-form-item></el-col>
|
||
<el-col :span="12"><el-form-item label="关联订单" required><el-input v-model="form.relatedOrderNo" placeholder="请输入关联订单号" /></el-form-item></el-col>
|
||
<el-col :span="12"><el-form-item label="商品SKU" required><el-input v-model="form.sku" placeholder="请输入商品SKU" /></el-form-item></el-col>
|
||
<el-col :span="12"><el-form-item label="中文品名" required><el-input v-model="form.productName" placeholder="请输入中文品名" /></el-form-item></el-col>
|
||
<el-col :span="12"><el-form-item label="箱数" required><el-input-number v-model="form.cartons" :min="1" :precision="0" controls-position="right" /></el-form-item></el-col>
|
||
<el-col :span="12"><el-form-item label="预算总价（USD）" required><el-input-number v-model="form.budgetTotal" :min="0" :precision="2" controls-position="right" /></el-form-item></el-col>
|
||
<el-col :span="12"><el-form-item label="状态"><el-select v-model="form.status" :disabled="dialogMode === 'create'"><el-option v-for="value in ['待处理', '处理中', '已完成']" :key="value" :label="value" :value="value" /></el-select></el-form-item></el-col>
|
||
</el-row><h3>作业要求</h3><el-row :gutter="16">
|
||
<el-col :span="12"><el-form-item label="贴标要求" required><el-select v-model="form.labelRequirement" placeholder="请选择贴标要求"><el-option v-for="value in ['全覆盖换标', '加贴新标', '移除原标+换标']" :key="value" :label="value" :value="value" /></el-select></el-form-item></el-col>
|
||
<el-col :span="12"><el-form-item label="上传文件"><el-button disabled><Upload :size="16" />选择文件</el-button></el-form-item></el-col>
|
||
<el-col v-if="dialogMode === 'edit'" :span="12"><el-form-item label="预算报价（USD）"><el-input-number v-model="form.relabelCost" :min="0" :precision="2" controls-position="right" /></el-form-item></el-col>
|
||
<el-col :span="24"><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit /></el-form-item></el-col>
|
||
</el-row></el-form>
|
||
</ContractPendingFormDialog>
|
||
</AdminPage>
|
||
</template>
|
||
|
||
<style scoped>
|
||
h3 { margin: 0 0 12px; color: var(--cc-text); font-size: 14px; }
|
||
h3:not(:first-child) { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--cc-border); }
|
||
</style>
|