x
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user