xydata-tools v1.0.25

鑫义科技前端开发者工具包

内网文档：http://172.16.1.254:8090/display/UX/xydata-tools

功能

• 数据字典页面
• 组织机构页面
• aaa > 系统管理
• sso > 系统管理
• sso > SecurityLayout
• 上传组件
• 下载方法

全局注册 Service

//注册请求服务，可放到global.jsx或者app.js中
import { registerService } from 'xydata-tools';

registerService('替换你的项目服务');

数据字典使用方法

import React from 'react';
import { DictionaryFront } from 'xydata-tools';

const Demo = () => {
	return <DictionaryFront />;
};

export default Demo;

组织机构模块

import React from 'react';
import { OrganizationFront } from 'xydata-tools';

const Demo = () => {
	return <OrganizationFront />;
};

export default Demo;

附件上传组件

基于ProformUploadButton二次封装组件 1. 支持单独使用或在表单内使用 2. 支持上传图片、文件，可根据listType进行多种上传风格切换 3. 内置文件大小、格式校验 4. 内置常用请求头参数 5. 内置图片预览功能，listType为"picture", "picture-card"时可用（未传入form时，只能预览当前点击图片，不可切换） 6. 兼容所有原生组件功能

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>
};

export default Demo;

附件下载组件

内置了下载功能的按钮组件 1. 支持格式为链接或流的文件下载 2. 兼容原生组件功能

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",
			}
		}}
	/>
};

export default Demo;

sso 模版的系统管理模块

• 用户管理

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);

• 权限管理

import React from "react";
import { Sso } from "xydata-tools";

const PermPage = () => {
  return <Sso.Permission />
};

export default PermPage;

• 角色管理

代码和用户管理相同
<Sso.Role currentUser={currentUser} />

• 设置权限

代码和用户管理相同
<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.在项目根目录执行

yarn dev

2.在/example 下执行

yarn start

3./example 是一个由 umi 搭建的正常后台项目，在页面内可直接引用'xydata-tools'内的组件进行预览，'xydata-tools'将映射到外部的/dist文件夹中

4.新组件可在/xydata-tools/src/components 下进行开发更新

5.在/src 内进行的修改操作将会被实时编译到/dist文件夹中

6.打包发布可执行

npm run build
npm config set registry https://registry.npmjs.org 
npm config set proxy false
npm publish -d

7.发布完成后，还原 npm 源(淘宝源)

npm config set registry https://registry.npmmirror.com