|
@@ -1,207 +1,207 @@
|
|
|
-## DageFileCheckbox 选择上传文件类型
|
|
|
-
|
|
|
-### 基本用法
|
|
|
-
|
|
|
-```tsx
|
|
|
-import React, { useCallback, useState } from "react";
|
|
|
-import { DageFileCheckbox, DageFileResponseType } from "@dage/pc-components";
|
|
|
-// 接口初始化
|
|
|
-import "../../configure";
|
|
|
-
|
|
|
-export default () => {
|
|
|
- const [value, setValue] = useState("");
|
|
|
-
|
|
|
- const handleChange = useCallback((val: string) => {
|
|
|
- setValue(val);
|
|
|
- }, []);
|
|
|
-
|
|
|
- const handleFileChange = useCallback((list: DageFileResponseType[]) => {
|
|
|
- console.log(list);
|
|
|
- }, []);
|
|
|
-
|
|
|
- return (
|
|
|
- <DageFileCheckbox
|
|
|
- value={value}
|
|
|
- action="https://sit-shgybwg.4dage.com/api/cms/goods/upload"
|
|
|
- onChange={handleChange}
|
|
|
- onFileChange={handleFileChange}
|
|
|
- />
|
|
|
- );
|
|
|
-};
|
|
|
-```
|
|
|
-
|
|
|
-### Form 组件必填校验用法
|
|
|
-
|
|
|
-```tsx
|
|
|
-import React, { useCallback, useState, useRef, useEffect } from "react";
|
|
|
-import { Form, FormInstance, Button, message } from "antd";
|
|
|
-import {
|
|
|
- DageFileCheckbox,
|
|
|
- DageFileResponseType,
|
|
|
- DageFileCheckboxMethods,
|
|
|
- DageFileAPIResponseType,
|
|
|
- DageUploadProvider,
|
|
|
- DageUploadConsumer,
|
|
|
-} from "@dage/pc-components";
|
|
|
-
|
|
|
-const FILES = [
|
|
|
- {
|
|
|
- creatorName: "",
|
|
|
- fileName: "shgy05.4dage",
|
|
|
- filePath: "https://sit-shgybwg.4dage.com/goods/model/shgy05.4dage",
|
|
|
- id: 111,
|
|
|
- moduleName: "goods",
|
|
|
- type: "model",
|
|
|
- },
|
|
|
- {
|
|
|
- creatorName: "",
|
|
|
- fileName: "shgy05.zip",
|
|
|
- filePath:
|
|
|
- "https://sit-shgybwg.4dage.com/goods/model_mobile/20230829_1633142351.zip",
|
|
|
- id: 112,
|
|
|
- moduleName: "goods",
|
|
|
- type: "model_mobile",
|
|
|
- },
|
|
|
-];
|
|
|
-
|
|
|
-export default () => {
|
|
|
- const formRef = useRef<FormInstance>(null);
|
|
|
- const dageFileCheckboxRef = useRef<DageFileCheckboxMethods>(null);
|
|
|
- const fileList = useRef<DageFileResponseType[]>([]);
|
|
|
-
|
|
|
- const handleFileChange = useCallback((list: DageFileResponseType[]) => {
|
|
|
- fileList.current = list;
|
|
|
- }, []);
|
|
|
-
|
|
|
- const onFinish = useCallback((val: any) => {
|
|
|
- const params = {
|
|
|
- ...val,
|
|
|
- fileIds: fileList.current
|
|
|
- .map((i) => (!!i.response ? i.response.id : i.uid))
|
|
|
- .join(),
|
|
|
- };
|
|
|
- message.info(JSON.stringify(params));
|
|
|
- }, []);
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- formRef.current!.setFieldsValue({
|
|
|
- fileTypes: "model,img",
|
|
|
- });
|
|
|
- dageFileCheckboxRef.current!.setFileList(
|
|
|
- FILES.map((i: DageFileAPIResponseType) => ({
|
|
|
- uid: i.id + "",
|
|
|
- url: i.filePath,
|
|
|
- thumbUrl: i.filePath,
|
|
|
- name: i.fileName,
|
|
|
- dType: i.type,
|
|
|
- status: "done",
|
|
|
- }))
|
|
|
- );
|
|
|
- }, []);
|
|
|
-
|
|
|
- return (
|
|
|
- <DageUploadProvider>
|
|
|
- <DageUploadConsumer>
|
|
|
- {({ uploading }) => (
|
|
|
- <Form ref={formRef} labelCol={{ span: 3 }} onFinish={onFinish}>
|
|
|
- <Form.Item
|
|
|
- label="文件类型"
|
|
|
- name="fileTypes"
|
|
|
- rules={[
|
|
|
- {
|
|
|
- validator: (...args) => {
|
|
|
- dageFileCheckboxRef.current!.validate(...args);
|
|
|
- },
|
|
|
- },
|
|
|
- ]}
|
|
|
- validateTrigger="onSubmit"
|
|
|
- >
|
|
|
- <DageFileCheckbox
|
|
|
- ref={dageFileCheckboxRef}
|
|
|
- hasMobileModel={true}
|
|
|
- action="https://sit-shgybwg.4dage.com/api/cms/goods/upload"
|
|
|
- onFileChange={handleFileChange}
|
|
|
- />
|
|
|
- </Form.Item>
|
|
|
- <Form.Item wrapperCol={{ offset: 3 }}>
|
|
|
- <Button disabled={uploading} type="primary" htmlType="submit">
|
|
|
- 提交
|
|
|
- </Button>
|
|
|
- </Form.Item>
|
|
|
- </Form>
|
|
|
- )}
|
|
|
- </DageUploadConsumer>
|
|
|
- </DageUploadProvider>
|
|
|
- );
|
|
|
-};
|
|
|
-```
|
|
|
-
|
|
|
-### 禁用
|
|
|
-
|
|
|
-```tsx
|
|
|
-import React, { useRef, useEffect } from "react";
|
|
|
-import { DageFileCheckbox, DageFileCheckboxMethods } from "@dage/pc-components";
|
|
|
-
|
|
|
-const FILES = [
|
|
|
- {
|
|
|
- fileName: "h16.4dage",
|
|
|
- filePath: "https://sit-shgybwg.4dage.com/goods/model/h16.4dage",
|
|
|
- id: 1,
|
|
|
- moduleName: "goods",
|
|
|
- type: "model",
|
|
|
- },
|
|
|
- {
|
|
|
- fileName: "cat.jpg",
|
|
|
- filePath:
|
|
|
- "https://sit-shgybwg.4dage.com/goods/img/20230829_12173720283.jpg",
|
|
|
- id: 2,
|
|
|
- moduleName: "goods",
|
|
|
- type: "img",
|
|
|
- },
|
|
|
- {
|
|
|
- fileName: "20230731_15413117733.mp3",
|
|
|
- filePath:
|
|
|
- "https://sit-shgybwg.4dage.com/goods/audio/20230731_15413117733.mp3",
|
|
|
- id: 3,
|
|
|
- moduleName: "goods",
|
|
|
- type: "audio",
|
|
|
- },
|
|
|
-];
|
|
|
-
|
|
|
-export default () => {
|
|
|
- const dageFileCheckboxRef = useRef<DageFileCheckboxMethods>(null);
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- dageFileCheckboxRef.current!.setFileList(
|
|
|
- FILES.map((i: DageFileAPIResponseType) => ({
|
|
|
- uid: i.id + "",
|
|
|
- url: i.filePath,
|
|
|
- thumbUrl: i.filePath,
|
|
|
- name: i.fileName,
|
|
|
- dType: i.type,
|
|
|
- status: "done",
|
|
|
- }))
|
|
|
- );
|
|
|
- }, []);
|
|
|
-
|
|
|
- return (
|
|
|
- <DageFileCheckbox
|
|
|
- disabled
|
|
|
- value="model,img,audio"
|
|
|
- ref={dageFileCheckboxRef}
|
|
|
- action="https://sit-shgybwg.4dage.com/api/cms/goods/upload"
|
|
|
- />
|
|
|
- );
|
|
|
-};
|
|
|
-```
|
|
|
-
|
|
|
-## API
|
|
|
-
|
|
|
-<API hideTitle exports='["DageFileCheckbox"]' src='@dage/pc-components/index.d.ts'></API>
|
|
|
-
|
|
|
-## DageFileCheckboxMethods
|
|
|
-
|
|
|
-| Name | Description | Type | Default |
|
|
|
-| ----------- | ------------------------ | ------------------------------------------------------------------------------------------------ | ------- |
|
|
|
-| validate | 校验已选类型文件是否为空 | `(rule: RuleObject,value: any,callback: (error?: string \| undefined) => void) => Promise<void>` | -- |
|
|
|
-| setFileList | 保存文件列表 | `(list: DageFileResponseType[]) => void` | -- |
|
|
|
+## DageFileCheckbox 选择上传文件类型
|
|
|
+
|
|
|
+### 基本用法
|
|
|
+
|
|
|
+```tsx
|
|
|
+import React, { useCallback, useState } from "react";
|
|
|
+import { DageFileCheckbox, DageFileResponseType } from "@dage/pc-components";
|
|
|
+// 接口初始化
|
|
|
+import "../../configure";
|
|
|
+
|
|
|
+export default () => {
|
|
|
+ const [value, setValue] = useState("");
|
|
|
+
|
|
|
+ const handleChange = useCallback((val: string) => {
|
|
|
+ setValue(val);
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ const handleFileChange = useCallback((list: DageFileResponseType[]) => {
|
|
|
+ console.log(list);
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ return (
|
|
|
+ <DageFileCheckbox
|
|
|
+ value={value}
|
|
|
+ action="https://sit-shgybwg.4dage.com/api/cms/goods/upload"
|
|
|
+ onChange={handleChange}
|
|
|
+ onFileChange={handleFileChange}
|
|
|
+ />
|
|
|
+ );
|
|
|
+};
|
|
|
+```
|
|
|
+
|
|
|
+### Form 组件必填校验用法
|
|
|
+
|
|
|
+```tsx
|
|
|
+import React, { useCallback, useState, useRef, useEffect } from "react";
|
|
|
+import { Form, FormInstance, Button, message } from "antd";
|
|
|
+import {
|
|
|
+ DageFileCheckbox,
|
|
|
+ DageFileResponseType,
|
|
|
+ DageFileCheckboxMethods,
|
|
|
+ DageFileAPIResponseType,
|
|
|
+ DageUploadProvider,
|
|
|
+ DageUploadConsumer,
|
|
|
+} from "@dage/pc-components";
|
|
|
+
|
|
|
+const FILES = [
|
|
|
+ {
|
|
|
+ creatorName: "",
|
|
|
+ fileName: "shgy05.4dage",
|
|
|
+ filePath: "https://sit-shgybwg.4dage.com/goods/model/shgy05.4dage",
|
|
|
+ id: 111,
|
|
|
+ moduleName: "goods",
|
|
|
+ type: "model",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ creatorName: "",
|
|
|
+ fileName: "shgy05.zip",
|
|
|
+ filePath:
|
|
|
+ "https://sit-shgybwg.4dage.com/goods/model_mobile/20230829_1633142351.zip",
|
|
|
+ id: 112,
|
|
|
+ moduleName: "goods",
|
|
|
+ type: "model_mobile",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+export default () => {
|
|
|
+ const formRef = useRef<FormInstance>(null);
|
|
|
+ const dageFileCheckboxRef = useRef<DageFileCheckboxMethods>(null);
|
|
|
+ const fileList = useRef<DageFileResponseType[]>([]);
|
|
|
+
|
|
|
+ const handleFileChange = useCallback((list: DageFileResponseType[]) => {
|
|
|
+ fileList.current = list;
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ const onFinish = useCallback((val: any) => {
|
|
|
+ const params = {
|
|
|
+ ...val,
|
|
|
+ fileIds: fileList.current
|
|
|
+ .map((i) => (!!i.response ? i.response.id : i.uid))
|
|
|
+ .join(),
|
|
|
+ };
|
|
|
+ message.info(JSON.stringify(params));
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ formRef.current!.setFieldsValue({
|
|
|
+ fileTypes: "model,img",
|
|
|
+ });
|
|
|
+ dageFileCheckboxRef.current!.setFileList(
|
|
|
+ FILES.map((i: DageFileAPIResponseType) => ({
|
|
|
+ uid: i.id + "",
|
|
|
+ url: i.filePath,
|
|
|
+ thumbUrl: i.filePath,
|
|
|
+ name: i.fileName,
|
|
|
+ dType: i.type,
|
|
|
+ status: "done",
|
|
|
+ }))
|
|
|
+ );
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ return (
|
|
|
+ <DageUploadProvider>
|
|
|
+ <DageUploadConsumer>
|
|
|
+ {({ uploading }) => (
|
|
|
+ <Form ref={formRef} labelCol={{ span: 3 }} onFinish={onFinish}>
|
|
|
+ <Form.Item
|
|
|
+ label="文件类型"
|
|
|
+ name="fileTypes"
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ validator: (...args) => {
|
|
|
+ dageFileCheckboxRef.current!.validate(...args);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ validateTrigger="onSubmit"
|
|
|
+ >
|
|
|
+ <DageFileCheckbox
|
|
|
+ ref={dageFileCheckboxRef}
|
|
|
+ hasMobileModel={true}
|
|
|
+ action="https://sit-shgybwg.4dage.com/api/cms/goods/upload"
|
|
|
+ onFileChange={handleFileChange}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item wrapperCol={{ offset: 3 }}>
|
|
|
+ <Button disabled={uploading} type="primary" htmlType="submit">
|
|
|
+ 提交
|
|
|
+ </Button>
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ )}
|
|
|
+ </DageUploadConsumer>
|
|
|
+ </DageUploadProvider>
|
|
|
+ );
|
|
|
+};
|
|
|
+```
|
|
|
+
|
|
|
+### 禁用
|
|
|
+
|
|
|
+```tsx
|
|
|
+import React, { useRef, useEffect } from "react";
|
|
|
+import { DageFileCheckbox, DageFileCheckboxMethods } from "@dage/pc-components";
|
|
|
+
|
|
|
+const FILES = [
|
|
|
+ {
|
|
|
+ fileName: "h16.4dage",
|
|
|
+ filePath: "https://sit-shgybwg.4dage.com/goods/model/h16.4dage",
|
|
|
+ id: 1,
|
|
|
+ moduleName: "goods",
|
|
|
+ type: "model",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fileName: "cat.jpg",
|
|
|
+ filePath:
|
|
|
+ "https://sit-shgybwg.4dage.com/goods/img/20230829_12173720283.jpg",
|
|
|
+ id: 2,
|
|
|
+ moduleName: "goods",
|
|
|
+ type: "img",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fileName: "20230731_15413117733.mp3",
|
|
|
+ filePath:
|
|
|
+ "https://sit-shgybwg.4dage.com/goods/audio/20230731_15413117733.mp3",
|
|
|
+ id: 3,
|
|
|
+ moduleName: "goods",
|
|
|
+ type: "audio",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+export default () => {
|
|
|
+ const dageFileCheckboxRef = useRef<DageFileCheckboxMethods>(null);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ dageFileCheckboxRef.current!.setFileList(
|
|
|
+ FILES.map((i: DageFileAPIResponseType) => ({
|
|
|
+ uid: i.id + "",
|
|
|
+ url: i.filePath,
|
|
|
+ thumbUrl: i.filePath,
|
|
|
+ name: i.fileName,
|
|
|
+ dType: i.type,
|
|
|
+ status: "done",
|
|
|
+ }))
|
|
|
+ );
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ return (
|
|
|
+ <DageFileCheckbox
|
|
|
+ disabled
|
|
|
+ value="model,img,audio"
|
|
|
+ ref={dageFileCheckboxRef}
|
|
|
+ action="https://sit-shgybwg.4dage.com/api/cms/norm/file/upload"
|
|
|
+ />
|
|
|
+ );
|
|
|
+};
|
|
|
+```
|
|
|
+
|
|
|
+## API
|
|
|
+
|
|
|
+<API hideTitle exports='["DageFileCheckbox"]' src='@dage/pc-components/index.d.ts'></API>
|
|
|
+
|
|
|
+## DageFileCheckboxMethods
|
|
|
+
|
|
|
+| Name | Description | Type | Default |
|
|
|
+| ----------- | ------------------------ | ------------------------------------------------------------------------------------------------ | ------- |
|
|
|
+| validate | 校验已选类型文件是否为空 | `(rule: RuleObject,value: any,callback: (error?: string \| undefined) => void) => Promise<void>` | -- |
|
|
|
+| setFileList | 保存文件列表 | `(list: DageFileResponseType[]) => void` | -- |
|