xydata-tools 1.0.30 → 1.0.32

package/README.md

@@ -1,316 +1,309 @@
 # 鑫义科技前端开发者工具包
 
-内网文档：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)
 
 ## 功能
 
+- `aaa` 模版（有独立的登录页面，不支持统一登陆）：SecurityLayout、系统管理
+- `sso` 模版（没有独立的登录页面，支持统一登陆）：SecurityLayout、系统管理
+- `both` 模版（有独立的登录页面，支持统一登陆）： SecurityLayout、一般配合 `sso` 模板的系统管理使用
 - 数据字典页面
 - 组织机构页面
-- aaa > 系统管理
-- sso > 系统管理
-- sso > SecurityLayout
-- 上传组件
-- 下载方法
+- 附件上传组件
+- 附件下载组件
+
+---
+
+## 使用说明
 
 ### 全局注册 Service
 
-```
-//注册请求服务，可放到global.jsx或者app.js中
-import { registerService } from 'xydata-tools';
+在项目中注册请求服务，可放置在 `global.jsx` 或 `app.js` 中：
 
-registerService('替换你的项目服务');
+```javascript
+import { registerService } from "xydata-tools";
+
+registerService("替换你的项目服务");
 ```
 
+---
+
 ### 数据字典使用方法
 
-```
-import React from 'react';
-import { DictionaryFront } from 'xydata-tools';
+```javascript
+import React from "react";
+import { DictionaryFront } from "xydata-tools";
 
 const Demo = () => {
-	return <DictionaryFront />;
+  return <DictionaryFront />;
 };
 
 export default Demo;
 ```
 
+---
+
 ### 组织机构模块
 
-```
-import React from 'react';
-import { OrganizationFront } from 'xydata-tools';
+```javascript
+import React from "react";
+import { OrganizationFront } from "xydata-tools";
 
 const Demo = () => {
-	return <OrganizationFront />;
+  return <OrganizationFront />;
 };
 
 export default Demo;
 ```
 
+---
+
 ### 附件上传组件
 
-基于ProformUploadButton二次封装组件
-1. 支持单独使用或在表单内使用
-2. 支持上传图片、文件，可根据listType进行多种上传风格切换
-3. 内置文件大小、格式校验
-4. 内置常用请求头参数
-5. 内置图片预览功能，listType为"picture", "picture-card"时可用（未传入form时，只能预览当前点击图片，不可切换）
-6. 兼容所有原生组件功能
+基于 `ProformUploadButton` 二次封装的上传组件，支持以下功能：
 
+1. 支持单独使用或在表单内使用。
+2. 支持上传图片、文件，可根据 `listType` 进行多种上传风格切换。
+3. 内置文件大小、格式校验。
+4. 内置常用请求头参数。
+5. 内置图片预览功能（`listType` 为 `"picture"` 或 `"picture-card"` 时可用）。
+6. 兼容所有原生组件功能。
 
-```
-import React from 'react';
-import { UploadFile } from 'xydata-tools';
+#### 示例代码
+
+```javascript
+import React from "react";
+import { UploadFile } from "xydata-tools";
 import { Form } from "antd";
 
 const Demo = () => {
- 	 const [form] = Form.useForm();
-
-	// 单独使用
-	// <UploadFile onChange={(info)=>{// do something}}/>;
-	// 在表单内使用
-	return <Form form={form}>
-		<UploadFile form={form} name="file" label="图片上传" listType="picture-card" />
-	</Form>
-	// 在FormList内使用
-	<ProFormList {...yourPorps}>
-		{(field) => {
-		return <UploadFile key={field.key} name={[field.name, "cover"]} />;
-		}}
-	</ProFormList>
+  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, showRemoveIcon, showDownloadIcon, removeIcon 和 downloadIcon | true |
-| readonly | boolean | 是否只读 | false |
-| disabled | boolean | 是否禁用 | false |
-| checkFile | Object | 文件校验 1.suffixs {Array[string]} :限制的文件格式,示例：["png", "jpg",]、2.maxSize {number} :限制的文件大小(kb),示例：1024,表示限制1M | 无 |
-| onChange | Object | 上传文件改变时的回调，上传中、完成、失败都会调用这个函数。 | 无 |
-| formItemOptions | Object | 表单项配置,若上述配置没有你需要的,可以使用这个字段进行配置,若有重复,覆盖以上设置 | 无 |
-| uploadOptions | Object | 上传配置,若上述配置没有你需要的,可以使用这个字段进行配置,若有重复,覆盖以上设置 | 无 |
-| buttonOptions | Object | 上传按钮的配置,listType为dragger时,配置无效 | 默认配置了loading |
-
- 
+#### 参数说明
+
+| 参数名            | 类型                 | 描述                                                                                | 默认值                                            |
+| ----------------- | -------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------- |
+| `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. 兼容原生组件功能
+内置了下载功能的按钮组件，支持以下功能：
 
+1. 支持格式为链接或流的文件下载。
+2. 兼容原生组件功能。
 
-```
-import React from 'react';
-import { DownloadFile } from 'xydata-tools'; 
+#### 示例代码
+
+```javascript
+import React from "react";
+import { DownloadFile } from "xydata-tools";
 
- // 文件名一定需要加上后缀
 const Demo = () => {
- 	 const [form] = Form.useForm();
-
-	return <DownloadFile
-		shape="round"
-		type="link"
-		queryOption={{
-			url: "/api/tb/exportTbExcel", 
-			params: { peopleType: 0 },
-		 	customField: {
-            	url: "exportFileUrl",
-            	fileName: "exportFileName",
-			}
-		}}
-	/>
+  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 | String | 自定义返回接口返回的文件名和地址(返回json适用)，如返回值为res.data.exportFileName时，customField: { url:'exportFileUrl'fileName:'exportFileName'}  | | 
-| queryOption.onError | Function | 接口异常回调  | | 
-| queryOption.downloadType | String | 下载类型，类型pure意为传入的是一个下载地址（oss链接)，而不是一个下载接口（/api）  | | 
-| 其他 | - | - | 兼容Antd.Button所有原生参数 | 
+#### 参数说明
+
+| 参数名                     | 类型                 | 描述                                                              | 默认值   |
+| -------------------------- | -------------------- | ----------------------------------------------------------------- | -------- |
+| `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 所有原生参数                                     | 无       |
 
- 
 
-### sso 模版的系统管理模块
+#### 配套的 提交/回显 方法
 
-- 用户管理
+```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",
+    },
+    {
+      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'
+import { connect } from "umi";
 
 const UserPage = (props) => {
-  const { currentUser } = props
-  return <Sso.User currentUser={currentUser} />
+  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 />
+  return <Sso.Permission />;
 };
 
 export default PermPage;
-
 ```
 
-- 角色管理
+#### 角色管理
 
-```
-代码和用户管理相同
+```javascript
 <Sso.Role currentUser={currentUser} />
 ```
 
-- 设置权限
+#### 设置权限
 
-```
-代码和用户管理相同
+```javascript
 <Sso.PermRole currentUser={currentUser} />
 ```
 
-### SSO 模版的 SecurityLayout 使用方法
-
-1、 全局保存 ENV_DATA
-
-```
-// 和全局注册Service的放置位置一样，也可以直接放在config.js
-import { saveEnvData } from 'xydata-tools';
-saveEnvData(envData)
-```
-
-2、 使用方法
-getUserOk 方法中替换，具体项目中/api/currentUser 成功调用后的逻辑代码。
-
-```
-import React from "react";
-import { Sso } from "xydata-tools";
-
-const SecurityLayoutPage = (props) => {
-
-  const getUserOk = data => {
-    console.log("/api/currentUser", data);
-  }
-
-  return <Sso.SecurityLayout getUserOk={getUserOk}>{props.children}</Sso.SecurityLayout>
-};
-
-export default SecurityLayoutPage;
-```
-
-### aaa 模版的系统管理模块
-
-tips: 以下页面，也需要全局注册 Service
-
-1、 用户管理
-
-```
-import React from 'react';
-import { Aaa } from 'xydata-tools';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-
-const UserPage = () => {
-  return (
-    <PageHeaderWrapper>
-      <Aaa.User />
-    </PageHeaderWrapper>
-  );
-};
-export default UserPage;
-
-```
-
-2、 角色管理
-
-```
-<Aaa.Role />
-
-```
-
-3、 权限管理
-
-```
-<Aaa.Permission />
-
-```
-
-4、 URL 管理
-
-```
-<Aaa.Url />
-
-```
+---
 
 ### 本地开发
 
-git：https://172.16.1.252/wuxiaohu/xydata-tools
+1. 在项目根目录执行：
 
-1.在项目根目录执行
+   ```bash
+   yarn dev
+   ```
 
-```
-yarn dev
-```
+2. 在 example 目录下执行：
 
-2.在/example 下执行
+   ```bash
+   yarn start
+   ```
 
-```
-yarn start
-```
+3. example 是一个由 `umi` 搭建的后台项目，可直接引用 `xydata-tools` 内的组件进行预览。
 
-3./example 是一个由 umi 搭建的正常后台项目，在页面内可直接引用'xydata-tools'内的组件进行预览，'xydata-tools'将映射到外部的/dist文件夹中
+4. 新组件可在 `/xydata-tools/src/components` 下进行开发更新。
 
-4.新组件可在/xydata-tools/src/components 下进行开发更新
+5. 在 src 内的修改操作将会被实时编译到 dist 文件夹中。
 
-5.在/src 内进行的修改操作将会被实时编译到/dist文件夹中
+6. 打包发布：
 
-6.打包发布可执行
+   ```bash
+   npm run build
+   npm config set registry https://registry.npmjs.org
+   npm config set proxy false
+   npm publish -d
+   ```
 
-```
-npm run build
-npm config set registry https://registry.npmjs.org 
-npm config set proxy false
-npm publish -d
-```
+7. 发布完成后，还原 npm 源（淘宝源）：
 
-7.发布完成后，还原 npm 源(淘宝源)
+   ```bash
+   npm config set registry https://registry.npmmirror.com
+   ```
 
-```
-npm config set registry https://registry.npmmirror.com
-```
+---

package/dist/components/aaa/auth/index.js

@@ -1 +1,9 @@
-import React from"react";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsx as _jsx}from"react/jsx-runtime";function Auth(r){var t=localStorage.getItem("antd-pro-authority"),e=JSON.parse(t),a=r.children,n=r.code;return _jsx(_Fragment,{children:e.includes(n)?a:null})}export default Auth;
+import React from 'react';
+function Auth(props) {
+  var authorityStr = localStorage.getItem('antd-pro-authority');
+  var authoritys = JSON.parse(authorityStr);
+  var children = props.children,
+    code = props.code;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, authoritys.includes(code) ? children : null);
+}
+export default Auth;

package/dist/components/aaa/index.js

@@ -1 +1,4 @@
-import Aaa from"./setting/index";import AaaSecurityLayout from"./security-layout/index";Aaa.SecurityLayout=AaaSecurityLayout;export default Aaa;
+import Aaa from "./setting/index";
+import AaaSecurityLayout from "./security-layout/index";
+Aaa.SecurityLayout = AaaSecurityLayout;
+export default Aaa;