Parcourir la Source

feat(附件上传): 更新附件上传组件配置和渲染逻辑

- 添加 Vue 的 h 函数导入
- 修改附件上传的接受类型为 .png
- 更新上传列表显示配置和禁用状态
- 将 limit 和 multiple 替换为 maxCount
- 添加自定义渲染内容,包含上传图标和提示文本
weieryang il y a 1 mois
Parent
commit
f5a9cf98b9

+ 40 - 3
apps/web-ele/src/views/schedule/view/components/create/config-data.tsx

@@ -1,5 +1,7 @@
1 1
 import type { FormSchemaGetter } from '#/adapter/form';
2 2
 
3
+import { h } from 'vue';
4
+
3 5
 export const drawerFormSchema: FormSchemaGetter = () => [
4 6
   {
5 7
     component: 'Select',
@@ -105,10 +107,45 @@ export const drawerFormSchema: FormSchemaGetter = () => [
105 107
     fieldName: 'attachment',
106 108
     label: '附件',
107 109
     componentProps: {
108
-      // accept: 'image/*',
110
+      accept: '.png',
109 111
       listType: 'text',
110
-      limit: 5,
111
-      multiple: true,
112
+      showUploadList: true,
113
+      disabled: false,
114
+      maxCount: 5,
115
+      // limit: 5,
116
+      // multiple: true,
117
+    },
118
+    renderComponentContent: () => {
119
+      return {
120
+        default: () =>
121
+          h(
122
+            'div',
123
+            {
124
+              class: 'flex items-center justify-center',
125
+            },
126
+            [
127
+              h(
128
+                'ElIcon',
129
+                { class: 'el-upload__icon' },
130
+                { default: () => h('Plus', { size: '18' }) },
131
+              ),
132
+              h(
133
+                'div',
134
+                {
135
+                  class: 'el-upload__text',
136
+                },
137
+                [
138
+                  h('div', {}, '上传附件'),
139
+                  h(
140
+                    'div',
141
+                    { class: 'text-xs text-gray-500' },
142
+                    '最多上传5个附件',
143
+                  ),
144
+                ],
145
+              ),
146
+            ],
147
+          ),
148
+      };
112 149
     },
113 150
   },
114 151
 ];