npm package: @moment-design/resource-management-java
Description: 云端资源管理组件
Latest version: 1.1.2

# ResourceManagement

云端资源管理组件

## 运行环境

| 名称                   | 版本号 |
| ---------------------- | ------ |
| Node.js                | 15+    |
| NPM                    | 7+     |
| Vue.js                 | 3+     |
| @moment-design/web-vue | 1+     |

## API 说明

### 初始化

| 参数名        | 描述               | 类型          | 必须 | 默认值            |
| ------------- | ------------------ | ------------- | ---- | ----------------- |
| baseUrl       | 云资源请求域名     | string        | 是   | -                 |
| prefix        | 接口请求前缀       | string        | 否   | /api/store/system |
| cdnDomain     | 拼接图片域名       | string        | 是   | -                 |
| errorCallback | 云资源请求错误回调 | (err) => void | 是   | -                 |
| getToken      | 云资源请求 token   | () => string  | 是   | -                 |
| getTenantId   | 商户 ID            | () => string  | 是   | -                 |

### 函数调用

| 参数名      | 描述                                            | 类型                    | 必须 | 默认值 |
| ----------- | ----------------------------------------------- | ----------------------- | ---- | ------ |
| type        | 文件类型，image：图片，audio：音频，video：视频 | string                  | 否   | image  |
| limit       | 多选数量限制，0：无限制                         | number                  | 否   | 1      |
| uploadLimit | 上传文件数量限制，0：无限制                     | number                  | 否   | 0      |
| uploadSize  | 上传文件大小限制，单位 MB，0：无限制            | number                  | 否   | 0      |
| confirm     | 回调函数                                        | (fileList: []) => void; | 是   | -      |

## 使用组件

1. 安装依赖

   ```bash
   npm install @moment-design/resource-management-java --save
   ```

2. 引用组件

   在`main.ts`中全局引入组件

   ```typescript
   import { createApp } from 'vue';
   import app from './App.vue';
   import TheFileManager from '@moment-design/resource-management-java';
   import '@moment-design/resource-management-java/dist/css/index.css';

   const App = createApp(app);
   App.use(TheFileManager, {
     cdnDomain: 'https://syycdn.dongchali.net',
     baseUrl: '',
     errorCallback: (err) => {
       console.error('=========errorCallback=============', err);
     },
     getToken: () => {
       return '';
     },
     getTenantId: () => {
       return '';
     },
   });
   ```

3. 函数调用

   ```typescript
   <template>
     <m-button @click="onShow(1)">点击选择1张图片</m-button>
     <p>{{ list1 }}</p>

     <m-button @click="onShow(2)">点击选择多张图片</m-button>
     <p>{{ list2 }}</p>

     <m-button @click="onShow(3)">点击选择视频</m-button>
     <p>{{ list3 }}</p>
   </template>
   <script lang="ts" setup>
   import { ref } from '@vue/runtime-core';
   import theFileManager from '@moment-design/resource-management-java';

   const list1 = ref<any>([]);
   const list2 = ref<any>([]);
   const list3 = ref<any>([]);

   const onShow = (index: number): void => {
     theFileManager.show({
       type: index === 3 ? 'video' : 'image',
       limit: index === 2 ? 0 : 1,
       confirm: (fileList: any[]) => {
         if (index === 1) {
           list1.value = fileList;
         }
         if (index === 2) {
           list2.value = fileList;
         }
         if (index === 3) {
           list3.value = fileList;
         }
       },
     });
   };
   </script>
   ```