feat(@vben/web-antd): erp-优化采购订单表单布局和功能
- 添加订单单号字段并设置为只读 - 将附件上传组件替换为 FileUpload - 新增产品清单字段 - 调整表单项的布局和样式 - 优化订单产品清单的展示方式pull/181/head
parent
83010b6590
commit
e319888240
|
@ -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,
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
@ -40,6 +40,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
|||
border: true,
|
||||
showOverflow: true,
|
||||
autoResize: true,
|
||||
minHeight: 250,
|
||||
keepSource: true,
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue