plain-design 1.0.0-beta.22 → 1.0.0-beta.23

package/src/pages/index/components/normal/DemoUpload.tsx

@@ -1,484 +1,484 @@
-import {computed, designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$notice, Button, DatePicker, Dropdown, DropdownOption, Upload} from "../../../../packages";
-import {UploadFile} from "../../../../packages/components/Upload";
-import {$file, FileServiceSingleFile} from "../../../../packages/components/$file";
-import {toArray} from "plain-utils/utils/toArray";
-
-const isSaveFile = false;
-
-const urls = computed(() => {
-  return isSaveFile ? {
-    single: 'http://1.116.13.72:7001/saveFile',
-    multiple: 'http://1.116.13.72:7001/saveFiles',
-  } : {
-    single: 'http://1.116.13.72:7001/uploadFile',
-    multiple: 'http://1.116.13.72:7001/uploadFiles',
-  };
-});
-
-export const demo1 = designPage(() => {
-
-  const state = reactive({
-    val: {
-      singleValue: null as any,
-    },
-    uploadData: {
-      level: '123',
-      orgCode: '001-123',
-      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
-    },
-    uploadHeaders: {
-      Authorization: '2781368215742187',
-    },
-    handleRemove: (file: UploadFile) => {
-      console.log('remove file', file);
-    },
-  });
-
-  return () => (
-    <DemoRow title={'单文件上传'}>
-      <Upload
-        multiple={false}
-        data={state.uploadData}
-        headers={state.uploadHeaders}
-        v-model={state.val.singleValue}
-        action={urls.value.single}
-        filename={'file'}
-        handleRemove={state.handleRemove}
-        onUploadSuccess={(param) => {
-          console.log('upload success', param);
-        }}
-      />
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const state = reactive({
-    val: {
-      0: [
-        { id: '001', name: 'logo.jpg', },
-        { id: '002', name: 'home.jpg', },
-        { id: '003', name: 'sketch.png', },
-      ],
-    },
-    uploadData: {
-      level: '123',
-      orgCode: '001-123',
-      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
-    },
-    uploadHeaders: {
-      Authorization: '2781368215742187',
-    },
-    handleRemove: (file: UploadFile) => {
-      console.log('remove file', file);
-    },
-  });
-
-  return () => (
-    <DemoRow title={'多文件上传'}>
-      <Upload
-        v-model={state.val[0]}
-        data={state.uploadData}
-        action={urls.value.multiple}
-        filename={'file'}
-        handleRemove={state.handleRemove}
-        onUploadSuccess={(param) => {
-          console.log(param);
-        }}
-      />
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-
-  const state = reactive({
-    val: {
-      0: [
-        { id: '001', name: 'logo.jpg', },
-        { id: '002', name: 'home.jpg', },
-        { id: '003', name: 'sketch.png', },
-      ],
-    },
-    uploadData: {
-      level: '123',
-      orgCode: '001-123',
-      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
-    },
-    uploadHeaders: {
-      Authorization: '2781368215742187',
-    },
-    handleRemove: (file: UploadFile) => {
-      console.log('remove file', file);
-    },
-    handlePreview(file: UploadFile) {
-      $notice.primary(file.name);
-    },
-  });
-
-  return () => (
-    <DemoRow title={'手动处理文件预览'}>
-      <Upload
-        v-model={state.val[0]}
-        action={urls.value.multiple}
-        filename={'file'}
-        handleRemove={state.handleRemove}
-        handlePreview={state.handlePreview}
-      />
-    </DemoRow>
-  );
-});
-
-export const demo4 = designPage(() => {
-
-  const state = reactive({
-    val: {
-      0: [
-        { id: '001', name: 'logo.jpg', },
-        { id: '002', name: 'home.jpg', },
-        { id: '003', name: 'sketch.png', },
-      ],
-    },
-    uploadData: {
-      level: '123',
-      orgCode: '001-123',
-      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
-    },
-    uploadHeaders: {
-      Authorization: '2781368215742187',
-    },
-    handleRemove: (file: UploadFile) => {
-      console.log('remove file', file);
-    },
-  });
-
-  return () => (
-    <DemoRow title={'选择特定类型的文件'}>
-      <h4>内置的accept：excel（另一个是image）</h4>
-      <Upload
-        accept={'excel'}
-        v-model={state.val[0]}
-        action={urls.value.multiple}
-        filename={'file'}
-        handleRemove={state.handleRemove}
-      />
-      <h4>自定义accept，选择png文件</h4>
-      <Upload
-        accept={'image/png'}
-        v-model={state.val[0]}
-        action={urls.value.multiple}
-        filename={'file'}
-        handleRemove={state.handleRemove}
-      />
-    </DemoRow>
-  );
-});
-
-export const demo5 = designPage(() => {
-
-  const state = reactive({
-    val: {
-      0: [
-        { id: '001', name: 'logo.jpg', },
-        { id: '002', name: 'home.jpg', },
-        { id: '003', name: 'sketch.png', },
-      ],
-    },
-    uploadData: {
-      level: '123',
-      orgCode: '001-123',
-      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
-    },
-    uploadHeaders: {
-      Authorization: '2781368215742187',
-    },
-    chooseFileValidator(file: FileServiceSingleFile) {
-      const { name, calcSize } = file;
-      const filename = name.slice(0, name.lastIndexOf('.'));
-      if (filename.length > 3) {
-        $notice.warn(`文件【${name}】校验不通过，文件名最大三个字符。`, { time: 5000 });
-        return false;
-      }
-      if (calcSize > 0.1) {
-        $notice.warn(`文件【${name}】校验不通过，文件大小超出 0.1 M`, { time: 5000 });
-        return false;
-      }
-    },
-  });
-
-  return () => (
-    <DemoRow title={'选择文件的时候，校验文件'}>
-      <h4>点击选择文件</h4>
-      <Upload
-        v-model={state.val[0]}
-        action={urls.value.multiple}
-        filename={'file'}
-        validator={state.chooseFileValidator}
-      />
-    </DemoRow>
-  );
-});
-
-export const demo6 = designPage(() => {
-
-  const state = reactive({
-    val: {
-      1: [
-        { id: '000', name: '已完成.jpg', },
-        { id: '001', name: '上传成功.jpg', status: 'success' as const },
-        { id: '002', name: '准备就绪.jpg', status: 'ready' as const },
-        { id: '003', name: '上传失败.jpg', status: 'error' as const },
-        { id: '004', name: '正在上传.jpg', status: 'uploading' as const, percent: 78 },
-        { id: '005', name: '已删除.jpg', status: 'remove' as const },
-      ],
-    },
-    uploadData: {
-      level: '123',
-      orgCode: '001-123',
-      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
-    },
-    handleRemove: (file: UploadFile) => {
-      console.log('remove file', file);
-    },
-  });
-
-  return () => (
-    <DemoRow title={'文件状态'}>
-      <Upload
-        v-model={state.val[1]}
-        action={urls.value.multiple}
-        filename={'file'}
-        handleRemove={state.handleRemove}
-      />
-    </DemoRow>
-  );
-});
-export const demo7 = designPage(() => {
-
-  const state = reactive({
-    val: {
-      0: [
-        { id: '001', name: 'logo.jpg', },
-        { id: '002', name: 'home.jpg', },
-        { id: '003', name: 'sketch.png', },
-      ],
-    },
-    uploadData: {
-      level: '123',
-      orgCode: '001-123',
-      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
-    },
-    handleRemove: (file: UploadFile) => {
-      console.log('remove file', file);
-    },
-  });
-
-  return () => (
-    <DemoRow title={'拖拽上传'}>
-      <Upload
-        v-model={state.val[0]}
-        draggable
-        action={urls.value.multiple}
-        filename={'file'}
-        handleRemove={state.handleRemove}
-      />
-    </DemoRow>
-  );
-});
-export const demo8 = designPage(() => {
-
-  const state = reactive({
-    val: {
-      singleValue: undefined as any,
-      0: [
-        { id: '001', name: 'logo.jpg', },
-        { id: '002', name: 'home.jpg', },
-        { id: '003', name: 'sketch.png', },
-      ],
-    },
-    uploadData: {
-      level: '123',
-      orgCode: '001-123',
-      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
-    },
-    uploadHeaders: {
-      Authorization: '2781368215742187',
-    },
-    handleRemove: (file: UploadFile) => {
-      console.log('remove file', file);
-    },
-  });
-
-  return () => (
-    <DemoRow title={'手动上传'}>
-      <h4>单文件上传</h4>
-      <Upload
-        autoUpload={false}
-        multiple={false}
-        data={state.uploadData}
-        headers={state.uploadHeaders}
-        v-model={state.val.singleValue}
-        action={urls.value.single}
-        filename={'file'}
-        handleRemove={state.handleRemove}
-      />
-      <h4>多文件上传</h4>
-      <Upload
-        autoUpload={false}
-        v-model={state.val[0]}
-        action={urls.value.multiple}
-        filename={'file'}
-        handleRemove={state.handleRemove}
-      />
-    </DemoRow>
-  );
-});
-
-export const demo9 = designPage(() => {
-
-  const state = reactive({
-    val: {
-      singleValue: undefined as any,
-      0: [
-        { id: '001', name: 'logo.jpg', },
-        { id: '002', name: 'home.jpg', },
-        { id: '003', name: 'sketch.png', },
-      ],
-    },
-    uploadData: {
-      level: '123',
-      orgCode: '001-123',
-      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
-    },
-    uploadHeaders: {
-      Authorization: '2781368215742187',
-    },
-    handleRemove: (file: UploadFile) => {
-      console.log('remove file', file);
-    },
-  });
-
-  return () => (
-    <DemoRow title={'禁用上传'}>
-      <h4>单文件上传</h4>
-      <Upload
-        disabled
-        multiple={false}
-        data={state.uploadData}
-        headers={state.uploadHeaders}
-        v-model={state.val.singleValue}
-        action={urls.value.single}
-        filename={'file'}
-        handleRemove={state.handleRemove}
-      />
-      <h4>多文件上传</h4>
-      <Upload
-        disabled
-        v-model={state.val[0]}
-        action={urls.value.multiple}
-        filename={'file'}
-        handleRemove={state.handleRemove}
-      />
-      <h4>多文件拖拽上传</h4>
-      <Upload
-        disabled
-        draggable
-        v-model={state.val[0]}
-        action={urls.value.multiple}
-        filename={'file'}
-        handleRemove={state.handleRemove}
-      />
-    </DemoRow>
-  );
-});
-export const demo10 = designPage(() => {
-
-  const state = reactive({
-    val: {
-      singleValue: undefined as any,
-      0: [
-        { id: '001', name: 'logo.jpg', },
-        { id: '002', name: 'home.jpg', },
-        { id: '003', name: 'sketch.png', },
-      ],
-    },
-    uploadData: {
-      level: '123',
-      orgCode: '001-123',
-      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
-    },
-    uploadHeaders: {
-      Authorization: '2781368215742187',
-    },
-    customUpload: {
-      val: [],
-      businessType: null as null | string,
-      handleRemove: () => {
-        console.log('调用接口删除后端文件');
-      },
-      handleUpload: async (files: UploadFile | UploadFile[]) => {
-        await Promise.all(toArray(files).map(file => $file.upload({
-          action: urls.value.single,
-          filename: 'file',
-          file: file.file!,
-          data: file.file!.data,
-        })));
-      },
-      validator: (file: FileServiceSingleFile) => {
-        const { businessType } = state.customUpload;
-        if (!businessType) {
-          $notice.error('请先选择业务类型！');
-          return false;
-        }
-        file.data = { businessType, attr1: businessType };
-        return true;
-      },
-    },
-  });
-
-  return () => (
-    <DemoRow title={'自定义上传：将多个文件分开上传，并且每一个文件需要选择一个类型'}>
-      <h4>多文件上传</h4>
-      <Upload
-        autoUpload={false}
-        v-model={state.customUpload.val}
-        action={urls.value.multiple}
-        filename="file"
-        handleUpload={state.customUpload.handleUpload}
-        handleRemove={state.customUpload.handleRemove}
-        onChange={() => state.customUpload.businessType = null}
-        validator={state.customUpload.validator}
-        v-slots={{
-          default: ({ index, item }) => (
-            <span>{index + 1}、{item.name}--[[{item.file!.data.businessType}]]</span>
-          ),
-          /*todo demo upload*/
-          button: () => (
-            <>
-              <Button>
-                <span>业务类型:{state.customUpload.businessType || '未选择'}</span>
-              </Button>
-              <Dropdown placement="bottom-end">
-                {{
-                  reference: () => (
-                    <Button icon="pi-down"/>
-                  ),
-                  popper: () => (
-                    <>
-                      <DropdownOption label={'搜索'} onClick={() => state.customUpload.businessType = '搜索'} icon={'pi-search'}/>
-                      <DropdownOption label={'排序'} onClick={() => state.customUpload.businessType = '排序'} icon={'pi-sort'}/>
-                      <DropdownOption label={'删除'} onClick={() => state.customUpload.businessType = '删除'} icon={'pi-close'}/>
-                    </>
-                  )
-                }}
-              </Dropdown>
-            </>
-          )
-        }}
-      />
-    </DemoRow>
-  );
-});
+import {computed, designPage, reactive} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {$notice, Button, DatePicker, Dropdown, DropdownOption, Upload} from "../../../../packages";
+import {UploadFile} from "../../../../packages/components/Upload";
+import {$file, FileServiceSingleFile} from "../../../../packages/components/$file";
+import {toArray} from "plain-utils/utils/toArray";
+
+const isSaveFile = false;
+
+const urls = computed(() => {
+  return isSaveFile ? {
+    single: 'http://1.116.13.72:7001/saveFile',
+    multiple: 'http://1.116.13.72:7001/saveFiles',
+  } : {
+    single: 'http://1.116.13.72:7001/uploadFile',
+    multiple: 'http://1.116.13.72:7001/uploadFiles',
+  };
+});
+
+export const demo1 = designPage(() => {
+
+  const state = reactive({
+    val: {
+      singleValue: null as any,
+    },
+    uploadData: {
+      level: '123',
+      orgCode: '001-123',
+      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
+    },
+    uploadHeaders: {
+      Authorization: '2781368215742187',
+    },
+    handleRemove: (file: UploadFile) => {
+      console.log('remove file', file);
+    },
+  });
+
+  return () => (
+    <DemoRow title={'单文件上传'}>
+      <Upload
+        multiple={false}
+        data={state.uploadData}
+        headers={state.uploadHeaders}
+        v-model={state.val.singleValue}
+        action={urls.value.single}
+        filename={'file'}
+        handleRemove={state.handleRemove}
+        onUploadSuccess={(param) => {
+          console.log('upload success', param);
+        }}
+      />
+    </DemoRow>
+  );
+});
+
+export const demo2 = designPage(() => {
+
+  const state = reactive({
+    val: {
+      0: [
+        { id: '001', name: 'logo.jpg', },
+        { id: '002', name: 'home.jpg', },
+        { id: '003', name: 'sketch.png', },
+      ],
+    },
+    uploadData: {
+      level: '123',
+      orgCode: '001-123',
+      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
+    },
+    uploadHeaders: {
+      Authorization: '2781368215742187',
+    },
+    handleRemove: (file: UploadFile) => {
+      console.log('remove file', file);
+    },
+  });
+
+  return () => (
+    <DemoRow title={'多文件上传'}>
+      <Upload
+        v-model={state.val[0]}
+        data={state.uploadData}
+        action={urls.value.multiple}
+        filename={'file'}
+        handleRemove={state.handleRemove}
+        onUploadSuccess={(param) => {
+          console.log(param);
+        }}
+      />
+    </DemoRow>
+  );
+});
+
+export const demo3 = designPage(() => {
+
+  const state = reactive({
+    val: {
+      0: [
+        { id: '001', name: 'logo.jpg', },
+        { id: '002', name: 'home.jpg', },
+        { id: '003', name: 'sketch.png', },
+      ],
+    },
+    uploadData: {
+      level: '123',
+      orgCode: '001-123',
+      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
+    },
+    uploadHeaders: {
+      Authorization: '2781368215742187',
+    },
+    handleRemove: (file: UploadFile) => {
+      console.log('remove file', file);
+    },
+    handlePreview(file: UploadFile) {
+      $notice.primary(file.name);
+    },
+  });
+
+  return () => (
+    <DemoRow title={'手动处理文件预览'}>
+      <Upload
+        v-model={state.val[0]}
+        action={urls.value.multiple}
+        filename={'file'}
+        handleRemove={state.handleRemove}
+        handlePreview={state.handlePreview}
+      />
+    </DemoRow>
+  );
+});
+
+export const demo4 = designPage(() => {
+
+  const state = reactive({
+    val: {
+      0: [
+        { id: '001', name: 'logo.jpg', },
+        { id: '002', name: 'home.jpg', },
+        { id: '003', name: 'sketch.png', },
+      ],
+    },
+    uploadData: {
+      level: '123',
+      orgCode: '001-123',
+      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
+    },
+    uploadHeaders: {
+      Authorization: '2781368215742187',
+    },
+    handleRemove: (file: UploadFile) => {
+      console.log('remove file', file);
+    },
+  });
+
+  return () => (
+    <DemoRow title={'选择特定类型的文件'}>
+      <h4>内置的accept：excel（另一个是image）</h4>
+      <Upload
+        accept={'excel'}
+        v-model={state.val[0]}
+        action={urls.value.multiple}
+        filename={'file'}
+        handleRemove={state.handleRemove}
+      />
+      <h4>自定义accept，选择png文件</h4>
+      <Upload
+        accept={'image/png'}
+        v-model={state.val[0]}
+        action={urls.value.multiple}
+        filename={'file'}
+        handleRemove={state.handleRemove}
+      />
+    </DemoRow>
+  );
+});
+
+export const demo5 = designPage(() => {
+
+  const state = reactive({
+    val: {
+      0: [
+        { id: '001', name: 'logo.jpg', },
+        { id: '002', name: 'home.jpg', },
+        { id: '003', name: 'sketch.png', },
+      ],
+    },
+    uploadData: {
+      level: '123',
+      orgCode: '001-123',
+      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
+    },
+    uploadHeaders: {
+      Authorization: '2781368215742187',
+    },
+    chooseFileValidator(file: FileServiceSingleFile) {
+      const { name, calcSize } = file;
+      const filename = name.slice(0, name.lastIndexOf('.'));
+      if (filename.length > 3) {
+        $notice.warn(`文件【${name}】校验不通过，文件名最大三个字符。`, { time: 5000 });
+        return false;
+      }
+      if (calcSize > 0.1) {
+        $notice.warn(`文件【${name}】校验不通过，文件大小超出 0.1 M`, { time: 5000 });
+        return false;
+      }
+    },
+  });
+
+  return () => (
+    <DemoRow title={'选择文件的时候，校验文件'}>
+      <h4>点击选择文件</h4>
+      <Upload
+        v-model={state.val[0]}
+        action={urls.value.multiple}
+        filename={'file'}
+        validator={state.chooseFileValidator}
+      />
+    </DemoRow>
+  );
+});
+
+export const demo6 = designPage(() => {
+
+  const state = reactive({
+    val: {
+      1: [
+        { id: '000', name: '已完成.jpg', },
+        { id: '001', name: '上传成功.jpg', status: 'success' as const },
+        { id: '002', name: '准备就绪.jpg', status: 'ready' as const },
+        { id: '003', name: '上传失败.jpg', status: 'error' as const },
+        { id: '004', name: '正在上传.jpg', status: 'uploading' as const, percent: 78 },
+        { id: '005', name: '已删除.jpg', status: 'remove' as const },
+      ],
+    },
+    uploadData: {
+      level: '123',
+      orgCode: '001-123',
+      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
+    },
+    handleRemove: (file: UploadFile) => {
+      console.log('remove file', file);
+    },
+  });
+
+  return () => (
+    <DemoRow title={'文件状态'}>
+      <Upload
+        v-model={state.val[1]}
+        action={urls.value.multiple}
+        filename={'file'}
+        handleRemove={state.handleRemove}
+      />
+    </DemoRow>
+  );
+});
+export const demo7 = designPage(() => {
+
+  const state = reactive({
+    val: {
+      0: [
+        { id: '001', name: 'logo.jpg', },
+        { id: '002', name: 'home.jpg', },
+        { id: '003', name: 'sketch.png', },
+      ],
+    },
+    uploadData: {
+      level: '123',
+      orgCode: '001-123',
+      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
+    },
+    handleRemove: (file: UploadFile) => {
+      console.log('remove file', file);
+    },
+  });
+
+  return () => (
+    <DemoRow title={'拖拽上传'}>
+      <Upload
+        v-model={state.val[0]}
+        draggable
+        action={urls.value.multiple}
+        filename={'file'}
+        handleRemove={state.handleRemove}
+      />
+    </DemoRow>
+  );
+});
+export const demo8 = designPage(() => {
+
+  const state = reactive({
+    val: {
+      singleValue: undefined as any,
+      0: [
+        { id: '001', name: 'logo.jpg', },
+        { id: '002', name: 'home.jpg', },
+        { id: '003', name: 'sketch.png', },
+      ],
+    },
+    uploadData: {
+      level: '123',
+      orgCode: '001-123',
+      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
+    },
+    uploadHeaders: {
+      Authorization: '2781368215742187',
+    },
+    handleRemove: (file: UploadFile) => {
+      console.log('remove file', file);
+    },
+  });
+
+  return () => (
+    <DemoRow title={'手动上传'}>
+      <h4>单文件上传</h4>
+      <Upload
+        autoUpload={false}
+        multiple={false}
+        data={state.uploadData}
+        headers={state.uploadHeaders}
+        v-model={state.val.singleValue}
+        action={urls.value.single}
+        filename={'file'}
+        handleRemove={state.handleRemove}
+      />
+      <h4>多文件上传</h4>
+      <Upload
+        autoUpload={false}
+        v-model={state.val[0]}
+        action={urls.value.multiple}
+        filename={'file'}
+        handleRemove={state.handleRemove}
+      />
+    </DemoRow>
+  );
+});
+
+export const demo9 = designPage(() => {
+
+  const state = reactive({
+    val: {
+      singleValue: undefined as any,
+      0: [
+        { id: '001', name: 'logo.jpg', },
+        { id: '002', name: 'home.jpg', },
+        { id: '003', name: 'sketch.png', },
+      ],
+    },
+    uploadData: {
+      level: '123',
+      orgCode: '001-123',
+      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
+    },
+    uploadHeaders: {
+      Authorization: '2781368215742187',
+    },
+    handleRemove: (file: UploadFile) => {
+      console.log('remove file', file);
+    },
+  });
+
+  return () => (
+    <DemoRow title={'禁用上传'}>
+      <h4>单文件上传</h4>
+      <Upload
+        disabled
+        multiple={false}
+        data={state.uploadData}
+        headers={state.uploadHeaders}
+        v-model={state.val.singleValue}
+        action={urls.value.single}
+        filename={'file'}
+        handleRemove={state.handleRemove}
+      />
+      <h4>多文件上传</h4>
+      <Upload
+        disabled
+        v-model={state.val[0]}
+        action={urls.value.multiple}
+        filename={'file'}
+        handleRemove={state.handleRemove}
+      />
+      <h4>多文件拖拽上传</h4>
+      <Upload
+        disabled
+        draggable
+        v-model={state.val[0]}
+        action={urls.value.multiple}
+        filename={'file'}
+        handleRemove={state.handleRemove}
+      />
+    </DemoRow>
+  );
+});
+export const demo10 = designPage(() => {
+
+  const state = reactive({
+    val: {
+      singleValue: undefined as any,
+      0: [
+        { id: '001', name: 'logo.jpg', },
+        { id: '002', name: 'home.jpg', },
+        { id: '003', name: 'sketch.png', },
+      ],
+    },
+    uploadData: {
+      level: '123',
+      orgCode: '001-123',
+      attr1: DatePicker.plainDate.today('YYYY-MM-DD HH:mm:ss', '').getDisplay(),
+    },
+    uploadHeaders: {
+      Authorization: '2781368215742187',
+    },
+    customUpload: {
+      val: [],
+      businessType: null as null | string,
+      handleRemove: () => {
+        console.log('调用接口删除后端文件');
+      },
+      handleUpload: async (files: UploadFile | UploadFile[]) => {
+        await Promise.all(toArray(files).map(file => $file.upload({
+          action: urls.value.single,
+          filename: 'file',
+          file: file.file!,
+          data: file.file!.data,
+        })));
+      },
+      validator: (file: FileServiceSingleFile) => {
+        const { businessType } = state.customUpload;
+        if (!businessType) {
+          $notice.error('请先选择业务类型！');
+          return false;
+        }
+        file.data = { businessType, attr1: businessType };
+        return true;
+      },
+    },
+  });
+
+  return () => (
+    <DemoRow title={'自定义上传：将多个文件分开上传，并且每一个文件需要选择一个类型'}>
+      <h4>多文件上传</h4>
+      <Upload
+        autoUpload={false}
+        v-model={state.customUpload.val}
+        action={urls.value.multiple}
+        filename="file"
+        handleUpload={state.customUpload.handleUpload}
+        handleRemove={state.customUpload.handleRemove}
+        onChange={() => state.customUpload.businessType = null}
+        validator={state.customUpload.validator}
+        v-slots={{
+          default: ({ index, item }) => (
+            <span>{index + 1}、{item.name}--[[{item.file!.data.businessType}]]</span>
+          ),
+          /*todo demo upload*/
+          button: () => (
+            <>
+              <Button>
+                <span>业务类型:{state.customUpload.businessType || '未选择'}</span>
+              </Button>
+              <Dropdown placement="bottom-end">
+                {{
+                  reference: () => (
+                    <Button icon="pi-down"/>
+                  ),
+                  popper: () => (
+                    <>
+                      <DropdownOption label={'搜索'} onClick={() => state.customUpload.businessType = '搜索'} icon={'pi-search'}/>
+                      <DropdownOption label={'排序'} onClick={() => state.customUpload.businessType = '排序'} icon={'pi-sort'}/>
+                      <DropdownOption label={'删除'} onClick={() => state.customUpload.businessType = '删除'} icon={'pi-close'}/>
+                    </>
+                  )
+                }}
+              </Dropdown>
+            </>
+          )
+        }}
+      />
+    </DemoRow>
+  );
+});