plain-design 1.0.0-beta.10 → 1.0.0-beta.101

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

@@ -1,484 +0,0 @@
-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>
-  );
-});