feat(@vben/web-antd): erp-优化采购订单表单布局和功能

- 添加订单单号字段并设置为只读
- 将附件上传组件替换为 FileUpload
- 新增产品清单字段
- 调整表单项的布局和样式
- 优化订单产品清单的展示方式
pull/181/head
nehc 2025-07-24 17:13:15 +08:00
parent 83010b6590
commit e319888240
3 changed files with 49 additions and 24 deletions

View File

@ -12,6 +12,15 @@ import { DICT_TYPE, getDictOptions } from '#/utils';
/** 表单的配置项 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
componentProps: {
placeholder: '系统自动生成',
disabled: true,
},
fieldName: 'no',
label: '订单单号',
},
{
component: 'ApiSelect',
componentProps: {
@ -50,17 +59,35 @@ export function useFormSchema(): VbenFormSchema[] {
},
fieldName: 'remark',
label: '备注',
formItemClass: 'col-span-2',
formItemClass: 'col-span-3',
},
{
component: 'Input',
component: 'FileUpload',
componentProps: {
placeholder: '请输入附件地址',
class: 'w-full',
maxNumber: 5,
maxSize: 10,
accept: [
'pdf',
'doc',
'docx',
'xls',
'xlsx',
'txt',
'jpg',
'jpeg',
'png',
],
showDescription: true,
},
fieldName: 'fileUrl',
label: '附件',
formItemClass: 'col-span-2',
formItemClass: 'col-span-3',
},
{
fieldName: 'product',
label: '产品清单',
component: 'Input',
formItemClass: 'col-span-3',
},
{
component: 'InputNumber',
@ -214,6 +241,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入订单单号',
allowClear: true,
disabled: true,
},
},
{

View File

@ -40,6 +40,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
border: true,
showOverflow: true,
autoResize: true,
minHeight: 250,
keepSource: true,
rowConfig: {
keyField: 'id',

View File

@ -34,9 +34,10 @@ const [Form, formApi] = useVbenForm({
componentProps: {
class: 'w-full',
},
labelWidth: 120,
},
wrapperClass: 'grid-cols-2',
layout: 'horizontal',
wrapperClass: 'grid-cols-3',
layout: 'vertical',
schema: useFormSchema(),
showDefaultActions: false,
});
@ -133,22 +134,17 @@ defineExpose({ modalApi });
:closable="true"
:mask-closable="true"
>
<Form />
<!-- Tab卡片 -->
<div class="border-border bg-card mt-4 rounded-lg border p-2">
<a-tabs default-active-key="1">
<a-tab-pane key="1" tab="订单产品清单">
<div class="p-4">
<PurchaseOrderItemForm
ref="itemFormRef"
:items="formData?.items || []"
:disabled="formType === 'detail'"
@update:items="handleUpdateItems"
/>
</div>
</a-tab-pane>
</a-tabs>
</div>
<Form class="mx-3">
<template #product="slotProps">
<PurchaseOrderItemForm
v-bind="slotProps"
ref="itemFormRef"
class="w-full"
:items="formData?.items || []"
:disabled="formType === 'detail'"
@update:items="handleUpdateItems"
/>
</template>
</Form>
</Modal>
</template>