feat: 更新文件上传-单项编辑器&更新dsf-web插件包

app_Web/src/app-register.ts

@@ -120,6 +120,7 @@ import {
   IBizGridPicker,
   GridEditor,
   IBizSwitch,
+  IBizFileUploadOne,
 } from './components/editor';
 
 export const AppRegister = {
@@ -231,6 +232,7 @@ export const AppRegister = {
     v.component('QuickSearch', QuickSearch);
     v.component('NotSupportedEditor', NotSupportedEditor);
     v.component('IBizSwitch', IBizSwitch);
+    v.component('IBizFileUploadOne', IBizFileUploadOne);
     // 注册表格编辑器
     v.component('IBizGridInput', IBizGridInput);
     v.component('IBizGridSpan', IBizGridSpan);

app_Web/src/components/editor/upload/ibiz-file-upload/ibiz-file-upload-one.tsx

+import { defineComponent, ref } from 'vue';
+import {
+  getEditorEmits,
+  getUploadProps,
+  useNamespace,
+} from '@ibiz-template/vue-util';
+import '@ibiz-template/theme/style/components/editor/ibiz-file-upload/ibiz-file-upload.scss';
+import { useIViewUpload } from '../use/use-iview-upload';
+
+export const IBizFileUploadOne = defineComponent({
+  name: 'IBizFileUploadOne',
+  props: getUploadProps(),
+  emits: getEditorEmits(),
+  setup(props, { emit }) {
+    const ns = useNamespace('file-upload');
+    const c = props.controller;
+    const fileUpload = ref();
+
+    const {
+      uploadUrl,
+      headers,
+      files,
+      onDownload,
+      onError,
+      onRemove,
+      onSuccess,
+      beforeUpload,
+    } = useIViewUpload(
+      props,
+      value => {
+        emit('change', value);
+      },
+      c,
+    );
+
+    const handleBeforeUpload = (_files: IData) => {
+      // 先清除之前的文件 todo
+      fileUpload.value.clearFiles();
+      return beforeUpload();
+    };
+
+    return {
+      ns,
+      c,
+      uploadUrl,
+      headers,
+      files,
+      fileUpload,
+      onDownload,
+      onError,
+      onRemove,
+      onSuccess,
+      beforeUpload,
+      handleBeforeUpload,
+    };
+  },
+  render(h) {
+    return (
+      <div
+        class={[
+          this.ns.b(),
+          this.disabled ? this.ns.m('disabled') : '',
+          this.readonly ? this.ns.m('readonly') : '',
+        ]}
+      >
+        {h(
+          'IUpload',
+          {
+            ref: 'fileUpload',
+            props: {
+              action: this.uploadUrl,
+              headers: this.headers,
+              disabled: this.disabled,
+              'default-file-list': this.files,
+              multiple: false,
+              type: this.c.model.isDrag ? 'drag' : 'select',
+              accept: this.c.model.accept,
+              'before-upload': this.handleBeforeUpload,
+              'on-success': this.onSuccess,
+              'on-error': this.onError,
+              'on-remove': this.onRemove,
+              'on-preview': this.onDownload,
+            },
+          },
+          [
+            this.c.model.isDrag ? (
+              <div class={this.ns.b('drag-box')}>
+                <i-icon type='md-cloud-upload' />
+                <div class={this.ns.be('drag-box', 'text')}>
+                  <span>将文件拖到此处，或</span>
+                  <span>点击上传</span>
+                </div>
+              </div>
+            ) : (
+              <i-button
+                icon='ios-cloud-upload-outline'
+                class={this.ns.b('button')}
+              >
+                上传文件
+              </i-button>
+            ),
+          ],
+        )}
+      </div>
+    );
+  },
+});

app_Web/src/components/editor/upload/index.ts

 export { IBizFileUpload } from './ibiz-file-upload/ibiz-file-upload';
 export { IBizGridFileUpload } from './ibiz-grid-file-upload/ibiz-grid-file-upload';
 export { IBizImageUpload } from './ibiz-image-upload/ibiz-image-upload';
+export { IBizFileUploadOne } from './ibiz-file-upload/ibiz-file-upload-one';

app_Web/src/components/editor/upload/use/use-iview-upload.ts

@@ -100,10 +100,19 @@ export function useIViewUpload(
    * @date 2022-11-17 14:11:54
    */
   const emitValue = () => {
-    const _files = [...files.value, ...uploadCache.cacheFiles];
+    // 多选是合并，单选是替换
+    let _files = [];
+    if (c.model.editorType === 'FILEUPLOADER_ONE') {
+      files.value = [];
+      _files = [uploadCache.cacheFiles[uploadCache.cacheFiles.length - 1]];
+    } else {
+      _files = [...files.value, ...uploadCache.cacheFiles];
+    }
     const value: string | null =
       _files.length > 0
-        ? JSON.stringify(_files.map(file => ({ name: file.name, id: file.id })))
+        ? JSON.stringify(
+            _files.map((file: IData) => ({ name: file.name, id: file.id })),
+          )
         : null;
     uploadCache.cacheFiles = [];
     valueChange(value);

app_Web/src/provider/editor/file-uploader-provider.ts

@@ -22,6 +22,8 @@ export class FileUploaderEditorProvider implements IEditorProvider {
   constructor(editorType: string) {
     if (editorType.includes('PICTURE')) {
       this.formEditor = 'IBizImageUpload';
+    } else if (editorType === 'FILEUPLOADER_ONE') {
+      this.formEditor = 'IBizFileUploadOne';
     } else if (editorType.includes('FILEUPLOADER')) {
       this.formEditor = 'IBizFileUpload';
     }