refactor:【ele】重新封装上传组件

apps/web-ele/src/views/infra/file/data.ts

@@ -9,7 +9,7 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'file',
       label: '文件上传',
-      component: 'Upload',
+      component: 'FileUpload',
       componentProps: {
         placeholder: '请选择要上传的文件',
       },

apps/web-ele/src/views/infra/file/modules/form.vue

@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import type { UploadRawFile } from 'element-plus';
-
 import { useVbenModal } from '@vben/common-ui';
-
-import { ElMessage, ElUpload } from 'element-plus';
+import { isEmpty } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter/form';
-import { useUpload } from '#/components/upload/use-upload';
-import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 
-const [Form, formApi] = useVbenForm({
+const [Modal, modalApi] = useVbenModal({
+  showConfirmButton: false,
+  showCancelButton: false,
+});
+
+const [Form] = useVbenForm({
   commonConfig: {
     componentProps: {
       class: 'w-full',
@@ -25,64 +25,19 @@ const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
   schema: useFormSchema().map((item) => ({ ...item, label: '' })), // 去除label
   showDefaultActions: false,
-});
-
-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    const { valid } = await formApi.validate();
-    if (!valid) {
+  handleValuesChange: (values) => {
+    if (isEmpty(values)) {
       return;
     }
-    modalApi.lock();
-    // 提交表单
-    const data = await formApi.getValues();
-    try {
-      await useUpload().httpRequest(data.file);
-      // 关闭并提示
-      await modalApi.close();
-      emit('success');
-      ElMessage.success($t('ui.actionMessage.operationSuccess'));
-    } finally {
-      modalApi.unlock();
-    }
+    // 上传成功关闭 modal
+    modalApi.close();
+    emit('success');
   },
 });
-
-/** 上传前 */
-function beforeUpload(file: UploadRawFile) {
-  // TODO @puhui999：【bug】这个上传功能，有点问题。报文件不存在
-  formApi.setFieldValue('file', file);
-  return false;
-}
 </script>
 
 <template>
-  <Modal title="上传图片">
-    <Form class="mx-4">
-      <template #file>
-        <div class="w-full">
-          <!-- 上传区域 -->
-          <ElUpload
-            class="upload-demo"
-            drag
-            :auto-upload="false"
-            :limit="1"
-            accept=".jpg,.png,.gif,.webp"
-            :before-upload="beforeUpload"
-            list-type="picture-card"
-          >
-            <div class="el-upload__text">
-              <p>
-                <i class="el-icon-upload text-2xl"></i>
-              </p>
-              <p>点击或拖拽文件到此区域上传</p>
-              <p class="text-sm text-gray-500">
-                支持 .jpg、.png、.gif、.webp 格式图片文件
-              </p>
-            </div>
-          </ElUpload>
-        </div>
-      </template>
-    </Form>
+  <Modal title="上传文件">
+    <Form class="mx-4" />
   </Modal>
 </template>