This commit is contained in:
2026-06-10 11:21:17 +08:00
parent fdbde938f9
commit c39c0b547f
43 changed files with 1144 additions and 1243 deletions
@@ -1,10 +1,22 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { DialogPlugin } from 'tdesign-vue-next'
import { useInventory } from '../composables/useInventory'
import { apiRequest } from '@/shared/api'
import { addNotification, handleApiError } from '@/shared/notification'
function confirmDialog(header: string, body: string, theme: string, confirmText: string, cancelText: string): Promise<boolean> {
return new Promise((resolve) => {
const dlg = DialogPlugin.confirm({
header, body, theme: theme as any,
confirmBtn: confirmText, cancelBtn: cancelText,
onConfirm: () => { dlg.hide(); resolve(true) },
onCancel: () => { dlg.hide(); resolve(false) },
onClose: () => { resolve(false) }
})
})
}
const {
state,
formatCurrency,
@@ -140,11 +152,7 @@ async function savePurchaseOrder() {
}
async function deleteOrder(id: number) {
try {
await ElMessageBox.confirm('确定要删除这个采购订单吗?', '删除确认', {
confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning'
})
} catch { return }
if (!await confirmDialog('删除确认', '确定要删除这个采购订单吗?', 'warning', '删除', '取消')) return
try {
await apiRequest(`/api/purchase-orders/${id}`, { method: 'DELETE' })
addNotification('采购订单已删除', 'success')
@@ -212,29 +220,15 @@ async function receivePurchaseOrder() {
async function markAsPaid(orderId: number, receiptStatus: string) {
if (receiptStatus !== 'received') {
try {
await ElMessageBox.confirm(
'该订单尚未全部收货,确定要提前付款吗?建议先完成收货后再付款。',
'非标准流程提醒',
{ confirmButtonText: '仍要付款', cancelButtonText: '取消', type: 'warning' }
)
} catch { return }
if (!await confirmDialog('非标准流程提醒', '该订单尚未全部收货,确定要提前付款吗?建议先完成收货后再付款。', 'warning', '仍要付款', '取消')) return
} else {
try {
await ElMessageBox.confirm('确认已向供应商支付该订单款项?', '付款确认', {
confirmButtonText: '确认付款', cancelButtonText: '取消', type: 'success'
})
} catch { return }
if (!await confirmDialog('付款确认', '确认已向供应商支付该订单款项?', 'success', '确认付款', '取消')) return
}
await doUpdateStatus(orderId, 'paid', '已付款')
}
async function cancelOrder(orderId: number) {
try {
await ElMessageBox.confirm('确定要作废该订单吗?此操作不可撤销。', '作废确认', {
confirmButtonText: '确认作废', cancelButtonText: '取消', type: 'error'
})
} catch { return }
if (!await confirmDialog('作废确认', '确定要作废该订单吗?此操作不可撤销。', 'error', '确认作废', '取消')) return
await doUpdateStatus(orderId, 'cancelled', '已作废')
}
@@ -280,223 +274,223 @@ onMounted(() => {
<template>
<div>
<div style="margin-bottom: 12px; display: flex; gap: 12px; align-items: center;">
<el-select
<t-select
v-model="purchaseWarehouseId"
placeholder="选择仓库"
style="width: 200px;"
clearable
>
<el-option
<t-option
v-for="warehouse in state.warehouses"
:key="warehouse.id"
:label="warehouse.name"
:value="warehouse.id"
/>
</el-select>
<el-button @click="loadPurchaseOrders">刷新</el-button>
<el-button type="primary" @click="openCreateOrder">新增采购订单</el-button>
</t-select>
<t-button @click="loadPurchaseOrders">刷新</t-button>
<t-button type="primary" @click="openCreateOrder">新增采购订单</t-button>
</div>
<el-table :data="state.purchaseOrders" v-loading="state.loading" stripe>
<el-table-column prop="order_no" label="采购单" />
<el-table-column prop="supplier_name" label="供应商" />
<el-table-column label="状态">
<t-table :data="state.purchaseOrders" :loading="state.loading" stripe>
<t-table-column prop="order_no" label="采购单" />
<t-table-column prop="supplier_name" label="供应商" />
<t-table-column label="状态">
<template #default="{ row }">
<div style="display: flex; gap: 4px;">
<el-tag
<t-tag
:type="row.receipt_status === 'received' ? 'success' : row.receipt_status === 'partial_received' ? 'warning' : row.receipt_status === 'cancelled' ? 'danger' : 'info'"
size="small"
>{{ getReceiptStatusLabel(row.receipt_status) }}</el-tag>
<el-tag
>{{ getReceiptStatusLabel(row.receipt_status) }}</t-tag>
<t-tag
:type="row.payment_status === 'paid' ? 'success' : 'info'"
size="small"
>{{ getPaymentStatusLabel(row.payment_status) }}</el-tag>
>{{ getPaymentStatusLabel(row.payment_status) }}</t-tag>
</div>
</template>
</el-table-column>
<el-table-column label="订单创建">
</t-table-column>
<t-table-column label="订单创建">
<template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
</el-table-column>
<el-table-column label="预计到货">
</t-table-column>
<t-table-column label="预计到货">
<template #default="{ row }">{{ formatDate(row.expected_date) }}</template>
</el-table-column>
<el-table-column label="实际到货">
</t-table-column>
<t-table-column label="实际到货">
<template #default="{ row }">{{ row.received_at ? formatDateTime(row.received_at) : '-' }}</template>
</el-table-column>
<el-table-column label="实际付款">
</t-table-column>
<t-table-column label="实际付款">
<template #default="{ row }">{{ row.paid_at ? formatDateTime(row.paid_at) : '-' }}</template>
</el-table-column>
<el-table-column label="总金额">
</t-table-column>
<t-table-column label="总金额">
<template #default="{ row }">{{ formatCurrency(row.total_amount) }}</template>
</el-table-column>
<el-table-column label="已付款">
</t-table-column>
<t-table-column label="已付款">
<template #default="{ row }">{{ formatCurrency(row.paid_amount || 0) }}</template>
</el-table-column>
<el-table-column label="操作" width="280">
</t-table-column>
<t-table-column label="操作" width="280">
<template #default="{ row }">
<el-button
<t-button
type="primary"
size="small"
:disabled="isPurchaseOrderLocked(row.status)"
@click="editOrder(row)"
>
编辑
</el-button>
<el-button
</t-button>
<t-button
type="danger"
size="small"
:disabled="isPurchaseOrderLocked(row.status)"
@click="deleteOrder(row.id)"
>
删除
</el-button>
<el-button
</t-button>
<t-button
v-if="row.receipt_status === 'pending' || row.receipt_status === 'partial_received'"
type="success"
size="small"
@click="openReceiveDialog(row)"
>
到货入库
</el-button>
<el-button
</t-button>
<t-button
v-if="row.payment_status !== 'paid' && row.receipt_status !== 'cancelled'"
type="warning"
size="small"
@click="markAsPaid(row.id, row.receipt_status)"
>
标记已付款
</el-button>
<el-button
</t-button>
<t-button
v-if="row.payment_status !== 'paid' && row.receipt_status !== 'cancelled'"
type="info"
size="small"
@click="cancelOrder(row.id)"
>
作废
</el-button>
</t-button>
</template>
</el-table-column>
</el-table>
<el-empty v-if="!state.loading && state.purchaseOrders.length === 0" description="暂无采购订单" />
</t-table-column>
</t-table>
<t-empty v-if="!state.loading && state.purchaseOrders.length === 0" description="暂无采购订单" />
<el-dialog
v-model="showModal"
<t-dialog
v-model:visible="showModal"
:title="(editingItem ? '编辑' : '新增') + '采购订单'"
width="800px"
@closed="closeModal"
>
<el-form label-width="100px">
<el-form-item label="供应商" required>
<el-select v-model="form.supplier_id" placeholder="请选择供应商" style="width:100%">
<el-option
<t-form label-width="100px">
<t-form-item label="供应商" required>
<t-select v-model="form.supplier_id" placeholder="请选择供应商" style="width:100%">
<t-option
v-for="supplier in state.suppliers"
:key="supplier.id"
:label="supplier.name"
:value="supplier.id"
/>
</el-select>
</el-form-item>
<el-form-item label="预计到货">
<el-date-picker
</t-select>
</t-form-item>
<t-form-item label="预计到货">
<t-date-picker
v-model="form.expected_date"
type="date"
placeholder="选择日期"
style="width:100%"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" placeholder="备注信息" />
</el-form-item>
</el-form>
</t-form-item>
<t-form-item label="备注">
<t-input v-model="form.remark" placeholder="备注信息" />
</t-form-item>
</t-form>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
<span style="font-weight: 600;">物料明细</span>
<el-button type="primary" size="small" @click="addOrderItem">+ 添加物料</el-button>
<t-button type="primary" size="small" @click="addOrderItem">+ 添加物料</t-button>
</div>
<el-table :data="orderItems" border size="small">
<el-table-column label="物料" min-width="200">
<t-table :data="orderItems" border size="small">
<t-table-column label="物料" min-width="200">
<template #default="{ row: line }">
<el-select v-model="line.product_id" placeholder="请选择物料" style="width:100%">
<el-option
<t-select v-model="line.product_id" placeholder="请选择物料" style="width:100%">
<t-option
v-for="material in state.materials"
:key="material.id"
:label="`${material.sku} - ${material.name}`"
:value="material.id"
/>
</el-select>
</t-select>
</template>
</el-table-column>
<el-table-column label="数量" width="120">
</t-table-column>
<t-table-column label="数量" width="120">
<template #default="{ row: line }">
<el-input-number v-model="line.quantity" :min="0.0001" :step="0.0001" size="small" style="width:100%" />
<t-input-number v-model="line.quantity" :min="0.0001" :step="0.0001" size="small" style="width:100%" />
</template>
</el-table-column>
<el-table-column label="单价" width="120">
</t-table-column>
<t-table-column label="单价" width="120">
<template #default="{ row: line }">
<el-input-number
<t-input-number
:model-value="(state.materials.find((m: any) => m.id === line.product_id)?.cost_price || 0)"
disabled
size="small"
style="width:100%"
/>
</template>
</el-table-column>
<el-table-column label="总价" width="120">
</t-table-column>
<t-table-column label="总价" width="120">
<template #default="{ row: line }">
{{ formatCurrency((state.materials.find((m: any) => m.id === line.product_id)?.cost_price || 0) * (line.quantity || 0)) }}
</template>
</el-table-column>
<el-table-column label="备注" width="150">
</t-table-column>
<t-table-column label="备注" width="150">
<template #default="{ row: line }">
<el-input v-model="line.remark" size="small" placeholder="备注" />
<t-input v-model="line.remark" size="small" placeholder="备注" />
</template>
</el-table-column>
<el-table-column label="操作" width="80">
</t-table-column>
<t-table-column label="操作" width="80">
<template #default="{ $index }">
<el-button type="danger" size="small" @click="removeOrderItem($index)">删除</el-button>
<t-button type="danger" size="small" @click="removeOrderItem($index)">删除</t-button>
</template>
</el-table-column>
</el-table>
</t-table-column>
</t-table>
<div style="text-align: right; margin-top: 8px; font-weight: 600;">
订单总金额:{{ formatCurrency(orderTotalAmount) }}
</div>
<template #footer>
<el-button @click="showModal = false">取消</el-button>
<el-button type="primary" @click="savePurchaseOrder">保存</el-button>
<t-button @click="showModal = false">取消</t-button>
<t-button type="primary" @click="savePurchaseOrder">保存</t-button>
</template>
</el-dialog>
</t-dialog>
<el-dialog
v-model="showReceiveModal"
<t-dialog
v-model:visible="showReceiveModal"
title="采购到货入库"
width="700px"
@closed="closeReceiveModal"
>
<el-form label-width="100px">
<el-form-item label="入库仓库" required>
<el-select v-model="receiveWarehouseId" placeholder="请选择仓库" style="width:100%">
<el-option
<t-form label-width="100px">
<t-form-item label="入库仓库" required>
<t-select v-model="receiveWarehouseId" placeholder="请选择仓库" style="width:100%">
<t-option
v-for="warehouse in state.warehouses"
:key="warehouse.id"
:label="warehouse.name"
:value="warehouse.id"
/>
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="receiveRemark" placeholder="入库备注" />
</el-form-item>
</el-form>
<el-table :data="receiveItems" border size="small">
<el-table-column prop="material_label" label="物料" />
<el-table-column prop="id" label="明细ID" width="80" />
<el-table-column label="剩余待入库" width="100">
</t-select>
</t-form-item>
<t-form-item label="备注">
<t-input v-model="receiveRemark" placeholder="入库备注" />
</t-form-item>
</t-form>
<t-table :data="receiveItems" border size="small">
<t-table-column prop="material_label" label="物料" />
<t-table-column prop="id" label="明细ID" width="80" />
<t-table-column label="剩余待入库" width="100">
<template #default="{ row: item }">{{ item.remaining }}</template>
</el-table-column>
<el-table-column label="本次入库" width="140">
</t-table-column>
<t-table-column label="本次入库" width="140">
<template #default="{ row: item }">
<el-input-number
<t-input-number
v-model="item.receive_quantity"
:min="0"
:max="item.remaining"
@@ -504,13 +498,13 @@ onMounted(() => {
style="width:100%"
/>
</template>
</el-table-column>
</el-table>
</t-table-column>
</t-table>
<template #footer>
<el-button @click="showReceiveModal = false">取消</el-button>
<el-button type="primary" @click="receivePurchaseOrder">确认入库</el-button>
<t-button @click="showReceiveModal = false">取消</t-button>
<t-button type="primary" @click="receivePurchaseOrder">确认入库</t-button>
</template>
</el-dialog>
</t-dialog>
</div>
</template>