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

- 添加订单单号字段并设置为只读
- 将附件上传组件替换为 FileUpload
- 新增产品清单字段
- 调整表单项的布局和样式
- 优化订单产品清单的展示方式

apps/web-antd/src/views/erp/purchase/order/data.ts

@@ -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: '请输入附件地址',
+        maxNumber: 5,
-        class: 'w-full',
+        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,
       },
     },
     {

apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue

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

apps/web-antd/src/views/erp/purchase/order/modules/form.vue

@@ -34,9 +34,10 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
+    labelWidth: 120,
   },
-  wrapperClass: 'grid-cols-2',
+  wrapperClass: 'grid-cols-3',
-  layout: 'horizontal',
+  layout: 'vertical',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
@@ -133,22 +134,17 @@ defineExpose({ modalApi });
     :closable="true"
     :mask-closable="true"
   >
-    <Form />
+    <Form class="mx-3">
-
+      <template #product="slotProps">
-    <!-- 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
+          v-bind="slotProps"
           ref="itemFormRef"
+          class="w-full"
           :items="formData?.items || []"
           :disabled="formType === 'detail'"
           @update:items="handleUpdateItems"
         />
-          </div>
+      </template>
-        </a-tab-pane>
+    </Form>
-      </a-tabs>
-    </div>
   </Modal>
 </template>