xydata-tools 1.0.41 → 1.0.43

package/README.md

@@ -1,278 +1,61 @@
 # 鑫义科技前端开发者工具包
 
-## 内网文档：[http://172.16.1.254:8090/display/UX/xydata-tools](http://172.16.1.254:8090/display/UX/xydata-tools)
+内网文档：[http://172.16.1.254:8090/display/UX/xydata-tools](http://172.16.1.254:8090/display/UX/xydata-tools)
 
-## 功能
+# xydata-tools 文档索引
+ 
 
-- `aaa` 模版（有独立的登录页面，不支持统一登陆）：SecurityLayout、系统管理
-- `sso` 模版（没有独立的登录页面，支持统一登陆）：SecurityLayout、系统管理
-- `both` 模版（有独立的登录页面，支持统一登陆）： SecurityLayout、一般配合 `sso` 模板的系统管理使用
-- 数据字典页面
-- 组织机构页面
-- 附件上传组件
-- 附件下载组件
+#### Web 端组件
 
----
+- [附件上传组件](./docs/组件使用文档/附件上传组件.md)
 
-## 使用说明
+  - 支持图片、文件上传
+  - 内置文件大小、格式校验
+  - 支持预览功能
 
-### 全局注册 Service
+- [附件下载组件](./docs/组件使用文档/附件下载组件.md)
 
-在项目中注册请求服务，可放置在 `global.jsx` 或 `app.js` 中：
+  - 支持链接和流式文件下载
+  - 兼容原生按钮功能
 
-```javascript
-import { registerService } from "xydata-tools";
+- [数据字典组件](./docs/组件使用文档/数据字典.md)
 
-registerService("替换你的项目服务");
-```
+  - 完整的数据字典管理功能
+  - 支持分类管理
 
----
+- [组织机构组件](./docs/组件使用文档/组织机构.md)
 
-### 数据字典使用方法
+  - 树形结构展示
+  - 人员管理功能
 
-```javascript
-import React from "react";
-import { DictionaryFront } from "xydata-tools";
+#### uni-app 组件
 
-const Demo = () => {
-  return <DictionaryFront />;
-};
+- [PicPicker - 图片选择器](./docs/uniapp/PicPicker.md)
+- [VideoPicker - 视频选择器](./docs/uniapp/VideoPicker.md)
+- [FilePicker - 文件选择器](./docs/uniapp/FilePicker.md)
 
-export default Demo;
-```
+### 模版使用文档
 
----
+- [AAA 模版](./docs/模版使用文档/AAA模版.md)
 
-### 组织机构模块
+  - 适用场景：有独立登录页面，不支持统一登录
+  - 包含：SecurityLayout、系统管理模块
 
-```javascript
-import React from "react";
-import { OrganizationFront } from "xydata-tools";
+- [SSO 模版](./docs/模版使用文档/SSO模版.md)
 
-const Demo = () => {
-  return <OrganizationFront />;
-};
+  - 适用场景：没有独立登录页面，支持统一登录
+  - 包含：SecurityLayout、系统管理模块
 
-export default Demo;
-```
+- [Both 模版](./docs/模版使用文档/Both模版.md)
 
----
+  - 适用场景：同时支持独立登录和统一登录
+  - 包含：SecurityLayout
 
-### 附件上传组件
-
-基于 `ProformUploadButton` 二次封装的上传组件，支持以下功能：
-
-1. 支持单独使用或在表单内使用。
-2. 支持上传图片、文件，可根据 `listType` 进行多种上传风格切换。
-3. 内置文件大小、格式校验。
-4. 内置常用请求头参数。
-5. 内置图片预览功能（`listType` 为 `"picture"` 或 `"picture-card"` 时可用）。
-6. 兼容所有原生组件功能。
-
-#### 示例代码
-
-```javascript
-import React from "react";
-import { UploadFile } from "xydata-tools";
-import { Form } from "antd";
-
-const Demo = () => {
-  const [form] = Form.useForm();
-
-  // 单独使用
-   <UploadFile
-	title="导入模板"
-	listType="text"
-	accept=".xlsx,.xls"
-	icon={<ImportOutlined />}
-	buttonOptions={{ type: "primary" }}
-	showUploadList={false}
-	onChange={({ fileList }) => {
-	// 通过监听状态为done获取最终的上传结果
-	if (fileList.every((item) => item.status === "done")) {
-		console.log(fileList );
-	}
-	}}
-	checkFile={{
-	suffixs: ["xlsx", "xls"],
-	maxSize: 1024,
-	}}
-	multiple={true}
-  />;
-
-  // 在表单内使用
- <Form form={form}>
-	<UploadFile form={form} name="file" label="图片上传" listType="picture-card" />
- </Form>
-
-  // 在 FormList 内使用
-  <ProFormList {...yourProps}>
-    {(field) => {
-      return <UploadFile key={field.key} name={[field.name, "cover"]} />;
-    }}
-  </ProFormList>;
-};
-
-export default Demo;
-```
-
-#### 参数说明
-
-| 参数名            | 类型                 | 描述                                                                                | 默认值                                            |
-| ----------------- | -------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------- |
-| `form`            | `Antd.Form.Instance` | 表单实例                                                                            | 无                                                |
-| `label`           | `string`             | 表单标签                                                                            | 无                                                |
-| `name`            | `string`             | 表单字段                                                                            | 无                                                |
-| `rules`           | `Array[Object]`      | 表单校验规则                                                                        | 无                                                |
-| `accept`          | `string`             | 接受上传的文件类型                                                                  | 无                                                |
-| `action`          | `string`             | 上传的地址                                                                          | `/api/${注册的服务}/file/upload/v3?type=openFile` |
-| `max`             | `string`             | 最大上传数量，超过最大数量就会隐藏上传按钮                                          | 无                                                |
-| `multiple`        | `boolean`            | 是否支持多选文件，开启后按住 `Ctrl` 可选择多个文件                                  | `false`                                           |
-| `icon`            | `ReactNode`          | `Button` 或 `Dragger` 的图标                                                        | 无                                                |
-| `title`           | `ReactNode`          | `Button` 或 `Dragger` 的标题                                                        | 无                                                |
-| `description`     | `ReactNode`          | 当 `listType` 为 `dragger` 时的描述                                                 | 无                                                |
-| `listType`        | `string`             | 上传列表的内建样式，支持 `text`、`picture`、`picture-card`、`dragger`               | `text`                                            |
-| `showUploadList`  | `Boolean/Object`     | 是否展示文件列表，可设为对象，用于单独设定 `showPreviewIcon` 等配置                 | `true`                                            |
-| `readonly`        | `boolean`            | 是否只读                                                                            | `false`                                           |
-| `disabled`        | `boolean`            | 是否禁用                                                                            | `false`                                           |
-| `checkFile`       | `Object`             | 文件校验配置，包括 `suffixs`（限制的文件格式）和 `maxSize`（文件大小限制，单位 KB） | 无                                                |
-| `onChange`        | `Function`           | 上传文件改变时的回调，上传中、完成、失败都会调用                                    | 无                                                |
-| `formItemOptions` | `Object`             | 表单项配置，覆盖以上设置                                                            | 无                                                |
-| `uploadOptions`   | `Object`             | 上传配置，覆盖以上设置                                                              | 无                                                |
-| `buttonOptions`   | `Object`             | 上传按钮的配置，`listType` 为 `dragger` 时无效                                      | 默认配置了 `loading`                              |
-
----
-
-### 附件下载组件
-
-内置了下载功能的按钮组件，支持以下功能：
-
-1. 支持格式为链接或流的文件下载。
-2. 兼容原生组件功能。
-
-#### 示例代码
-
-```javascript
-import React from "react";
-import { DownloadFile } from "xydata-tools";
-
-const Demo = () => {
-  return (
-    <DownloadFile
-      shape="round"
-      type="link"
-      queryOption={{
-        url: "/api/tb/exportTbExcel",
-        params: { peopleType: 0 },
-        customField: {
-          url: "exportFileUrl",
-          fileName: "exportFileName",
-        },
-      }}
-    />
-  );
-};
-
-export default Demo;
-```
-
-#### 参数说明
-
-| 参数名                     | 类型                 | 描述                                                              | 默认值   |
-| -------------------------- | -------------------- | ----------------------------------------------------------------- | -------- |
-| `text`                     | `String / ReactNode` | 按钮内容                                                          | 下载按钮 |
-| `queryOption`              | `Object`             | 下载设置                                                          | 无       |
-| `queryOption.url`          | `String`             | 接口地址                                                          | 无       |
-| `queryOption.headers`      | `Object`             | 请求头                                                            | 无       |
-| `queryOption.method`       | `String`             | 请求方法，支持 `GET` 或 `POST`                                    | 无       |
-| `queryOption.fileName`     | `String`             | 文件名称                                                          | 无       |
-| `queryOption.params`       | `Object`             | 请求参数                                                          | 无       |
-| `queryOption.customField`  | `Object`             | 自定义返回接口返回的文件名和地址（适用于返回 JSON 的接口）        | 无       |
-| `queryOption.onError`      | `Function`           | 接口异常回调                                                      | 无       |
-| `queryOption.downloadType` | `String`             | 下载类型，`pure` 表示传入的是下载地址（OSS 链接），而不是下载接口 | 无       |
-| 其他                       | `-`                  | 兼容 Antd.Button 所有原生参数                                     | 无       |
-
-
-#### 配套的 提交/回显 方法
-
-```javascript
-
-import { getUploadFileData, setUploadFileData } from "xydata-tools";
- 
-// 获取表单数据
-const getFieldsValue= async () => {
-  const fieldsValue = await form.validateFields();
-  const { cover } = fieldsValue;
-  const data = await getUploadFileData(cover);
-};
- 
-// 回显表单数据
-const renderFieldsValue = async () => {
-  const cover = [
-    {
-      name: "image.png",
-      url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
-      fileName:'xxx'
-    },
-    {
-      url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
-    },
-  ];
-  const data = setUploadFileData(cover);
-  form.setFieldsValue({
-    cover: data,
-  });
-};
-```
 ---
 
-### `sso` 模版的系统管理模块
-
-#### 用户管理
-
-```javascript
-import React from "react";
-import { Sso } from "xydata-tools";
-import { connect } from "umi";
-
-const UserPage = (props) => {
-  const { currentUser } = props;
-  return <Sso.User currentUser={currentUser} />;
-};
-
-export default connect(({ user }) => ({
-  currentUser: user.currentUser,
-}))(UserPage);
-```
-
-#### 权限管理
-
-```javascript
-import React from "react";
-import { Sso } from "xydata-tools";
-
-const PermPage = () => {
-  return <Sso.Permission />;
-};
-
-export default PermPage;
-```
+## 本地开发
 
-#### 角色管理
-
-```javascript
-<Sso.Role currentUser={currentUser} />
-```
-
-#### 设置权限
-
-```javascript
-<Sso.PermRole currentUser={currentUser} />
-```
-
----
-
-### 本地开发
+react
 
 1. 在项目根目录执行：
 
@@ -287,21 +70,32 @@ export default PermPage;
    ```
 
 3. example 是一个由 `umi` 搭建的后台项目，可直接引用 `xydata-tools` 内的组件进行预览。
-
 4. 新组件可在 `/xydata-tools/src/components` 下进行开发更新。
-
 5. 在 src 内的修改操作将会被实时编译到 dist 文件夹中。
 
-6. 打包发布：
+uniapp
+
+1. 在项目根目录执行：
+
+   ```bash
+   yarn dev
+   ```
+
+2. 在 example-uniapp 下运行
+   ```bash
+   yarn link xydata-tools
+   ```
+3. 将 example-uniapp 添加到 H-Builder 中运行
+
+打包发布：
 
    ```bash
    npm run prepublishOnly
-   npm config set registry https://registry.npmjs.org
-   npm config set proxy false
+   npm config set registry https://registry.npmjs.org 
    npm publish -d
    ```
 
-7. 发布完成后，还原 npm 源（淘宝源）：
+发布完成后，还原 npm 源（淘宝源）：
 
    ```bash
    npm config set registry https://registry.npmmirror.com