From 5e13d28d46babcc30f9daac8cf62330b8618d7da Mon Sep 17 00:00:00 2001 From: YunaiV Date: Sat, 4 Oct 2025 19:18:22 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90erp?= =?UTF-8?q?=20=E7=B3=BB=E7=BB=9F=E3=80=91purchase/order=20=E9=87=8D?= =?UTF-8?q?=E6=9E=84=201/4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/erp/purchase/order/data.ts | 146 +++++---- .../src/views/erp/purchase/order/index.vue | 98 ++---- .../views/erp/purchase/order/modules/form.vue | 123 +++---- ...hase-order-item-form.vue => item-form.vue} | 309 ++++++++---------- 4 files changed, 294 insertions(+), 382 deletions(-) rename apps/web-antd/src/views/erp/purchase/order/modules/{purchase-order-item-form.vue => item-form.vue} (63%) diff --git a/apps/web-antd/src/views/erp/purchase/order/data.ts b/apps/web-antd/src/views/erp/purchase/order/data.ts index a0f8ce2b4..d6a888506 100644 --- a/apps/web-antd/src/views/erp/purchase/order/data.ts +++ b/apps/web-antd/src/views/erp/purchase/order/data.ts @@ -10,30 +10,43 @@ import { getAccountSimpleList } from '#/api/erp/finance/account'; import { getProductSimpleList } from '#/api/erp/product/product'; import { getSupplierSimpleList } from '#/api/erp/purchase/supplier'; import { getSimpleUserList } from '#/api/system/user'; +import { getRangePickerDefaultProps } from '#/utils'; /** 表单的配置项 */ -export function useFormSchema(): VbenFormSchema[] { +export function useFormSchema(formType: string): VbenFormSchema[] { return [ { - component: 'Input', - componentProps: { - style: { display: 'none' }, - }, fieldName: 'id', - label: 'ID', - hideLabel: true, - formItemClass: 'hidden', + component: 'Input', + dependencies: { + triggerFields: [''], + show: () => false, + }, }, { + fieldName: 'no', + label: '订单单号', component: 'Input', componentProps: { placeholder: '系统自动生成', disabled: true, }, - fieldName: 'no', - label: '订单单号', }, { + fieldName: 'orderTime', + label: '订单时间', + component: 'DatePicker', + componentProps: { + placeholder: '选择订单时间', + showTime: true, + format: 'YYYY-MM-DD HH:mm:ss', + valueFormat: 'x', + }, + rules: 'required', + }, + { + label: '供应商', + fieldName: 'supplierId', component: 'ApiSelect', componentProps: { placeholder: '请选择供应商', @@ -45,35 +58,37 @@ export function useFormSchema(): VbenFormSchema[] { value: 'id', }, }, - fieldName: 'supplierId', - label: '供应商', rules: 'required', }, { - component: 'DatePicker', + fieldName: 'purchaseUserId', + label: '创建人', + component: 'ApiSelect', componentProps: { - placeholder: '选择订单时间', - showTime: true, - format: 'YYYY-MM-DD HH:mm:ss', - valueFormat: 'x', - style: { width: '100%' }, + placeholder: '请选择创建人', + allowClear: true, + showSearch: true, + api: getSimpleUserList, + fieldNames: { + label: 'nickname', + value: 'id', + }, }, - fieldName: 'orderTime', - label: '订单时间', - rules: 'required', }, { + fieldName: 'remark', + label: '备注', component: 'Textarea', componentProps: { placeholder: '请输入备注', - autoSize: { minRows: 2, maxRows: 4 }, - class: 'w-full', + autoSize: { minRows: 1, maxRows: 1 }, + disabled: formType === 'detail', }, - fieldName: 'remark', - label: '备注', - formItemClass: 'col-span-3', + formItemClass: 'col-span-2', }, { + fieldName: 'fileUrl', + label: '附件', component: 'FileUpload', componentProps: { maxNumber: 1, @@ -89,56 +104,54 @@ export function useFormSchema(): VbenFormSchema[] { 'jpeg', 'png', ], - showDescription: true, + showDescription: formType !== 'detail', + disabled: formType === 'detail', }, - fieldName: 'fileUrl', - label: '附件', formItemClass: 'col-span-3', }, { - fieldName: 'product', - label: '产品清单', + fieldName: 'items', + label: '采购产品清单', component: 'Input', formItemClass: 'col-span-3', }, { + fieldName: 'discountPercent', + label: '优惠率(%)', component: 'InputNumber', componentProps: { placeholder: '请输入优惠率', min: 0, max: 100, precision: 2, - style: { width: '100%' }, }, - fieldName: 'discountPercent', - label: '优惠率(%)', rules: z.number().min(0).optional(), }, { + fieldName: 'discountPrice', + label: '付款优惠', component: 'InputNumber', componentProps: { placeholder: '付款优惠', precision: 2, formatter: erpPriceInputFormatter, disabled: true, - style: { width: '100%' }, }, - fieldName: 'discountPrice', - label: '付款优惠', }, { + fieldName: 'totalPrice', + label: '优惠后金额', component: 'InputNumber', componentProps: { placeholder: '优惠后金额', precision: 2, formatter: erpPriceInputFormatter, disabled: true, - style: { width: '100%' }, }, - fieldName: 'totalPrice', - label: '优惠后金额', }, { + fieldName: 'accountId', + label: '结算账户', component: 'ApiSelect', componentProps: { placeholder: '请选择结算账户', @@ -150,15 +163,12 @@ export function useFormSchema(): VbenFormSchema[] { value: 'id', }, }, - fieldName: 'accountId', - label: '结算账户', }, { component: 'InputNumber', componentProps: { placeholder: '请输入支付订金', precision: 2, - style: { width: '100%' }, min: 0, }, fieldName: 'depositPrice', @@ -168,8 +178,8 @@ export function useFormSchema(): VbenFormSchema[] { ]; } -/** 采购订单项表格列定义 */ -export function usePurchaseOrderItemTableColumns(): VxeTableGridOptions['columns'] { +/** 表单的明细表格列 */ +export function useFormItemColumns(): VxeTableGridOptions['columns'] { return [ { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' }, { @@ -193,6 +203,12 @@ export function usePurchaseOrderItemTableColumns(): VxeTableGridOptions['columns title: '单位', minWidth: 80, }, + { + field: 'remark', + title: '备注', + minWidth: 150, + slots: { default: 'remark' }, + }, { field: 'count', title: '数量', @@ -214,7 +230,7 @@ export function usePurchaseOrderItemTableColumns(): VxeTableGridOptions['columns { field: 'taxPercent', title: '税率(%)', - minWidth: 100, + minWidth: 105, slots: { default: 'taxPercent' }, }, { @@ -229,12 +245,6 @@ export function usePurchaseOrderItemTableColumns(): VxeTableGridOptions['columns minWidth: 120, formatter: 'formatAmount2', }, - { - field: 'remark', - title: '备注', - minWidth: 150, - slots: { default: 'remark' }, - }, { title: '操作', width: 50, @@ -254,7 +264,6 @@ export function useGridFormSchema(): VbenFormSchema[] { componentProps: { placeholder: '请输入订单单号', allowClear: true, - disabled: true, }, }, { @@ -277,10 +286,8 @@ export function useGridFormSchema(): VbenFormSchema[] { label: '订单时间', component: 'RangePicker', componentProps: { - placeholder: ['开始时间', '结束时间'], - showTime: true, - format: 'YYYY-MM-DD HH:mm:ss', - valueFormat: 'YYYY-MM-DD HH:mm:ss', + ...getRangePickerDefaultProps(), + allowClear: true, }, }, { @@ -323,6 +330,29 @@ export function useGridFormSchema(): VbenFormSchema[] { allowClear: true, }, }, + { + fieldName: 'remark', + label: '备注', + component: 'Input', + componentProps: { + placeholder: '请输入备注', + allowClear: true, + }, + }, + { + fieldName: 'inStatus', + label: '入库状态', + component: 'Select', + componentProps: { + options: [ + { label: '未入库', value: 0 }, + { label: '部分入库', value: 1 }, + { label: '全部入库', value: 2 }, + ], + placeholder: '请选择入库状态', + allowClear: true, + }, + }, { fieldName: 'returnStatus', label: '退货状态', @@ -369,7 +399,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { field: 'orderTime', title: '订单时间', width: 160, - formatter: 'formatDateTime', + formatter: 'formatDate', }, { field: 'creatorName', diff --git a/apps/web-antd/src/views/erp/purchase/order/index.vue b/apps/web-antd/src/views/erp/purchase/order/index.vue index a6a4b0f62..7e427c0c0 100644 --- a/apps/web-antd/src/views/erp/purchase/order/index.vue +++ b/apps/web-antd/src/views/erp/purchase/order/index.vue @@ -12,7 +12,6 @@ import { message } from 'ant-design-vue'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; import { deletePurchaseOrder, - deletePurchaseOrderList, exportPurchaseOrder, getPurchaseOrderPage, updatePurchaseOrderStatus, @@ -20,77 +19,70 @@ import { import { $t } from '#/locales'; import { useGridColumns, useGridFormSchema } from './data'; -import PurchaseOrderForm from './modules/form.vue'; +import Form from './modules/form.vue'; /** ERP 采购订单列表 */ defineOptions({ name: 'ErpPurchaseOrder' }); const [FormModal, formModalApi] = useVbenModal({ - connectedComponent: PurchaseOrderForm, + connectedComponent: Form, destroyOnClose: true, }); /** 刷新表格 */ -function onRefresh() { +function handleRefresh() { gridApi.query(); } -/** 详情 */ -function handleDetail(row: ErpPurchaseOrderApi.PurchaseOrder) { - formModalApi.setData({ type: 'detail', id: row.id }).open(); +/** 导出表格 */ +async function handleExport() { + const data = await exportPurchaseOrder(await gridApi.formApi.getValues()); + downloadFileFromBlobPart({ fileName: '采购订单.xls', source: data }); } -/** 新增 */ +/** 新增采购订单 */ function handleCreate() { formModalApi.setData({ type: 'create' }).open(); } -/** 编辑 */ +/** 编辑采购订单 */ function handleEdit(row: ErpPurchaseOrderApi.PurchaseOrder) { formModalApi.setData({ type: 'edit', id: row.id }).open(); } -/** 删除 */ -async function handleDelete(row: ErpPurchaseOrderApi.PurchaseOrder) { +/** 删除采购订单 */ +async function handleDelete(ids: number[]) { const hideLoading = message.loading({ content: $t('ui.actionMessage.deleting'), duration: 0, - key: 'action_process_msg', }); try { - if (row.id) await deletePurchaseOrder(row.id); - message.success({ - content: $t('ui.actionMessage.deleteSuccess'), - key: 'action_process_msg', - }); - onRefresh(); + await deletePurchaseOrder(ids); + message.success($t('ui.actionMessage.deleteSuccess')); + handleRefresh(); } finally { hideLoading(); } } -/** 批量删除 */ -// TODO @nehc handleBatchDelete 是不是和别的模块，一个风格 -async function handleBatchDelete() { +/** 审批/反审批操作 */ +async function handleUpdateStatus( + row: ErpPurchaseOrderApi.PurchaseOrder, + status: number, +) { const hideLoading = message.loading({ - content: $t('ui.actionMessage.deleting'), + content: `确定${status === 20 ? '审批' : '反审批'}该订单吗？`, duration: 0, - key: 'action_process_msg', }); try { - await deletePurchaseOrderList(checkedIds.value); - checkedIds.value = []; - message.success({ - content: $t('ui.actionMessage.deleteSuccess'), - key: 'action_process_msg', - }); - onRefresh(); + await updatePurchaseOrderStatus(row.id!, status); + message.success(`${status === 20 ? '审批' : '反审批'}成功`); + handleRefresh(); } finally { hideLoading(); } } -// TODO @Xuzhiqiang：批量删除待实现 const checkedIds = ref([]); function handleRowCheckboxChange({ records, @@ -100,37 +92,9 @@ function handleRowCheckboxChange({ checkedIds.value = records.map((item) => item.id!); } -/** 审批/反审批操作 */ -function handleUpdateStatus( - row: ErpPurchaseOrderApi.PurchaseOrder, - status: number, -) { - // TODO @nehc 是不是和别的模块，类似的 status 处理一个风格 - const hideLoading = message.loading({ - content: `确定${status === 20 ? '审批' : '反审批'}该订单吗？`, - duration: 0, - key: 'action_process_msg', - }); - updatePurchaseOrderStatus(row.id!, status) - .then(() => { - message.success({ - content: `${status === 20 ? '审批' : '反审批'}成功`, - key: 'action_process_msg', - }); - onRefresh(); - }) - .catch(() => { - // 处理错误 - }) - .finally(() => { - hideLoading(); - }); -} - -/** 导出 */ -async function handleExport() { - const data = await exportPurchaseOrder(await gridApi.formApi.getValues()); - downloadFileFromBlobPart({ fileName: '采购订单.xls', source: data }); +/** 查看详情 */ +function handleDetail(row: ErpPurchaseOrderApi.PurchaseOrder) { + formModalApi.setData({ type: 'detail', id: row.id }).open(); } const [Grid, gridApi] = useVbenVxeGrid({ @@ -177,8 +141,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ /> - - +