xydata-tools v1.0.11

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

功能

• 数据字典页面
• 组织机构页面
• 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;

1.0.5 版本新增 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 />

1.0.6 版本新增 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;

本地开发

git：https://172.16.1.252/wuxiaohu/xydata-tools

1.在项目根目录执行

yarn dev

2.在/example 下执行

yarn start

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

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

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

6.打包发布可执行

npm run build
npm config set registry https://registry.npmjs.org
npm publish

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

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