## 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: DageFileAPIResponseType) =>
          !!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`                                                         | --      |
