cfel-base-components 0.0.24 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/config/webpack.base.js +11 -2
- package/demo/src/index.html +0 -26
- package/demo/src/index.jsx +11 -27
- package/demo/src/index.module.less +3 -0
- package/demo/src/index.scss +2 -59
- package/package.json +4 -5
- package/src/components/base-component/PageContainer/index.module.less +13 -0
- package/src/components/base-component/PageContainer/index.tsx +28 -0
- package/src/components/base-component/Pagination/index.tsx +22 -0
- package/src/components/base-component/ProTable/index.tsx +29 -0
- package/src/components/base-component/QueryFilter/index.tsx +24 -0
- package/src/components/layout/index.scss +1 -1
- package/src/components/universal-pages/account/index.tsx +54 -0
- package/src/components/universal-pages/accountInfo/index.tsx +98 -0
- package/src/components/universal-pages/role/index.tsx +53 -0
- package/src/components/{roleInfo → universal-pages/roleInfo}/EditAccountDrawer/index.tsx +0 -1
- package/src/components/universal-pages/roleInfo/index.scss +3 -0
- package/src/components/universal-pages/roleInfo/index.tsx +94 -0
- package/src/index.d.ts +8 -1
- package/src/index.tsx +10 -17
- package/.vscode/settings.json +0 -3
- package/src/.umi/core/helmet.ts +0 -10
- package/src/.umi/core/helmetContext.ts +0 -4
- package/src/apiRequest/config.ts +0 -71
- package/src/apiRequest/hosts.ts +0 -6
- package/src/apiRequest/iotConfig.ts +0 -71
- package/src/components/PageContainer/index.scss +0 -13
- package/src/components/PageContainer/index.tsx +0 -22
- package/src/components/Pagination/index.tsx +0 -20
- package/src/components/ProTable/index.tsx +0 -22
- package/src/components/QueryFilter/index.tsx +0 -20
- package/src/components/account/api.ts +0 -11
- package/src/components/account/index.tsx +0 -169
- package/src/components/accountInfo/api.ts +0 -26
- package/src/components/accountInfo/index.tsx +0 -229
- package/src/components/button/index.tsx +0 -16
- package/src/components/role/api.ts +0 -9
- package/src/components/role/index.scss +0 -0
- package/src/components/role/index.tsx +0 -141
- package/src/components/roleInfo/api.ts +0 -22
- package/src/components/roleInfo/index.scss +0 -3
- package/src/components/roleInfo/index.tsx +0 -239
- package/src/components/widthAutoLabelProps/index.tsx +0 -54
- package/src/hooks/useTableHooks.ts +0 -60
- package/src/utils/index.ts +0 -29
- /package/src/components/{Pagination/index.scss → base-component/Pagination/index.module.less} +0 -0
- /package/src/components/{ProTable/index.scss → base-component/ProTable/index.module.less} +0 -0
- /package/src/components/{QueryFilter/index.scss → base-component/QueryFilter/index.module.less} +0 -0
- /package/src/components/{account → universal-pages/account}/index.scss +0 -0
- /package/src/components/{accountInfo → universal-pages/accountInfo}/EditAccountDrawer/index.tsx +0 -0
- /package/src/components/{accountInfo → universal-pages/accountInfo}/index.scss +0 -0
- /package/src/components/{button → universal-pages/role}/index.scss +0 -0
package/README.md
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
<!-- npm run dev
|
|
2
|
-
npm
|
|
2
|
+
npm pubilsh -->
|
package/config/webpack.base.js
CHANGED
|
@@ -14,7 +14,16 @@ module.exports = {
|
|
|
14
14
|
}
|
|
15
15
|
],
|
|
16
16
|
exclude: /node_modules/, // 只解析 src 目录下的文件
|
|
17
|
-
}
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
test: /\.module\.less$/, // 匹配以 .module.less 结尾的文件
|
|
20
|
+
use: [
|
|
21
|
+
'style-loader', // 将样式注入到页面中
|
|
22
|
+
'css-loader', // 处理 CSS 文件
|
|
23
|
+
'less-loader', // 处理 LESS 文件
|
|
24
|
+
],
|
|
25
|
+
exclude: /node_modules/, // 只解析 src 目录下的文件
|
|
26
|
+
},
|
|
18
27
|
]
|
|
19
|
-
}
|
|
28
|
+
},
|
|
20
29
|
};
|
package/demo/src/index.html
CHANGED
|
@@ -12,32 +12,6 @@
|
|
|
12
12
|
</head>
|
|
13
13
|
<body>
|
|
14
14
|
<div id="root"></div>
|
|
15
|
-
<script>
|
|
16
|
-
window.g_config = {
|
|
17
|
-
token: "111f1bf4-600b-4e47-815b-b739d5398c91",
|
|
18
|
-
tenant: {
|
|
19
|
-
id: 1674706582226763778,
|
|
20
|
-
corpId: "dingc9dbc42450ccf06e4ac5d6980864d335",
|
|
21
|
-
source: "\u9489\u9489",
|
|
22
|
-
name: "\u8FDC\u822A\u8DE8\u56FD\u63A7\u80A1\u96C6\u56E2",
|
|
23
|
-
shortName: "\u8FDC\u822A\u8DE8\u56FD\u63A7\u80A1\u96C6\u56E2",
|
|
24
|
-
logo: ""
|
|
25
|
-
},
|
|
26
|
-
user: {
|
|
27
|
-
id: 1676424765496406018,
|
|
28
|
-
userId: "01436565094521893533",
|
|
29
|
-
unionId: "xsU4QrgEfZxxj8YxEWAYJAiEiE",
|
|
30
|
-
name: "\u5434\u91D1\u521A",
|
|
31
|
-
avatar: "https:\/\/pic.imgdb.cn\/item\/64a520d21ddac507cc4653d3.jpg",
|
|
32
|
-
account: "15957797376",
|
|
33
|
-
roleInfo: []
|
|
34
|
-
},
|
|
35
|
-
logoutUrl: "\/sso\/logout?back=http%3A%2F%2Flios-iot-obee-daily.chengfengerlai.com%2Fdelivery",
|
|
36
|
-
switchTenantUrl: "https:\/\/cfel-sso-daily.chengfengerlai.com\/tenant\/switch?fakeAccountId=1676424765496406018\u0026redirect=http:\/\/lios-iot-obee-daily.chengfengerlai.com\/sso\/login?back=http%3A%2F%2Flios-iot-obee-daily.chengfengerlai.com%2Fdelivery",
|
|
37
|
-
productCode: "lios-iot-obee",
|
|
38
|
-
env: "daily"
|
|
39
|
-
};
|
|
40
|
-
</script>
|
|
41
15
|
<script src="dev.js"></script>
|
|
42
16
|
</body>
|
|
43
17
|
</html>
|
package/demo/src/index.jsx
CHANGED
|
@@ -1,37 +1,21 @@
|
|
|
1
1
|
import React from "react"
|
|
2
2
|
import { createRoot } from 'react-dom/client';
|
|
3
|
-
import './index.
|
|
4
|
-
import Layout from '../../src/components/layout';
|
|
5
|
-
import Account from '../../src/components/account';
|
|
6
|
-
import AccountInfo from '../../src/components/accountinfo';
|
|
7
|
-
import Role from '../../src/components/role';
|
|
8
|
-
import RoleInfo from '../../src/components/roleinfo';
|
|
9
|
-
|
|
10
|
-
|
|
3
|
+
import style from './index.module.less';
|
|
11
4
|
|
|
5
|
+
import './index.scss';
|
|
6
|
+
import PageContainer from '../../src/components/base-component/PageContainer';
|
|
7
|
+
// import Layout from '../../src/components/layout';
|
|
8
|
+
// import Account from '../../src/components/universal-pages/account';
|
|
9
|
+
// import AccountInfo from '../../src/components/universal-pages/accountInfo';
|
|
10
|
+
// import Role from '../../src/components/universal-pages/role';
|
|
11
|
+
// import RoleInfo from '../../src/components/universal-pages/roleInfo';
|
|
12
12
|
|
|
13
13
|
const App = () => {
|
|
14
|
-
return
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
// name: "\u5434\u6668\u61CB\uFF08\u592A\u4E00\uFF09",
|
|
18
|
-
// avatar: "https:\/\/static-legacy.dingtalk.com\/media\/lQLPM5AkqOufBy7NAyDNAyCwJZ592czMOC4EeIgNJAAGAA_800_800.png",
|
|
19
|
-
// tenantName: "\u8FDC\u822A\u8DE8\u56FD\u63A7\u80A1\u96C6\u56E2",
|
|
20
|
-
// role:["超级管理员","超管","子管理员","超级管理员","超级管理员123","子管理员","超级管理员","超级管理员123","子管理员","超级管理员","超级管理员123超级管理员123超级管理员123超级管理员123","子管理员"]
|
|
21
|
-
// // role:["超级管理员"]
|
|
22
|
-
// }}
|
|
23
|
-
// >
|
|
24
|
-
// </Layout >
|
|
25
|
-
<>
|
|
26
|
-
|
|
27
|
-
{/* <Account></Account> */}
|
|
14
|
+
return <PageContainer className={"aaa"}>
|
|
15
|
+
123
|
|
16
|
+
</PageContainer>
|
|
28
17
|
|
|
29
|
-
{/* <AccountInfo /> */}
|
|
30
|
-
{/* <Role ></Role> */}
|
|
31
18
|
|
|
32
|
-
<RoleInfo/>
|
|
33
|
-
</>
|
|
34
|
-
);
|
|
35
19
|
}
|
|
36
20
|
const container = document.getElementById('root');
|
|
37
21
|
const root = createRoot(container);
|
package/demo/src/index.scss
CHANGED
|
@@ -1,60 +1,3 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
justify-content: center;
|
|
5
|
-
align-items: center;
|
|
6
|
-
margin-top: 30px;
|
|
7
|
-
font-size: 14px;
|
|
8
|
-
font-weight: bold;
|
|
9
|
-
color: #333;
|
|
10
|
-
.text {
|
|
11
|
-
display: flex;
|
|
12
|
-
align-items: center;
|
|
13
|
-
p:nth-child(2) {
|
|
14
|
-
color: #f00;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
.normal {
|
|
18
|
-
display: flex;
|
|
19
|
-
align-items: center;
|
|
20
|
-
margin-top: 10px;
|
|
21
|
-
p:nth-child(2) {
|
|
22
|
-
width: 100px;
|
|
23
|
-
height: 32px;
|
|
24
|
-
overflow: hidden;
|
|
25
|
-
text-overflow: ellipsis;
|
|
26
|
-
white-space: nowrap;
|
|
27
|
-
border: 1px solid #ccc;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
.style1 {
|
|
31
|
-
display: flex;
|
|
32
|
-
align-items: center;
|
|
33
|
-
margin-top: 10px;
|
|
34
|
-
p:nth-child(2) {
|
|
35
|
-
width: 100px;
|
|
36
|
-
height: 32px;
|
|
37
|
-
border: 1px solid #ccc;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
.style2 {
|
|
41
|
-
display: flex;
|
|
42
|
-
align-items: center;
|
|
43
|
-
margin-top: 10px;
|
|
44
|
-
p:nth-child(2) {
|
|
45
|
-
width: 70px;
|
|
46
|
-
height: 32px;
|
|
47
|
-
border: 1px solid #ccc;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
.style3 {
|
|
51
|
-
display: flex;
|
|
52
|
-
align-items: center;
|
|
53
|
-
margin-top: 10px;
|
|
54
|
-
p:nth-child(2) {
|
|
55
|
-
width: 40px;
|
|
56
|
-
height: 32px;
|
|
57
|
-
border: 1px solid #ccc;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
1
|
+
.bbb {
|
|
2
|
+
background: cyan;
|
|
60
3
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cfel-base-components",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "cfel-base-components",
|
|
5
5
|
"main": "/src/index.tsx",
|
|
6
6
|
"types": "src/index.d.ts",
|
|
@@ -24,7 +24,9 @@
|
|
|
24
24
|
"@types/react": "^18.2.14",
|
|
25
25
|
"@types/react-dom": "^18.2.6",
|
|
26
26
|
"babel-loader": "^8.2.5",
|
|
27
|
+
"classnames": "^2.3.2",
|
|
27
28
|
"css-loader": "^6.8.1",
|
|
29
|
+
"less-loader": "^11.1.3",
|
|
28
30
|
"mini-css-extract-plugin": "^2.7.6",
|
|
29
31
|
"node-sass": "^9.0.0",
|
|
30
32
|
"postcss": "^8.4.24",
|
|
@@ -38,10 +40,7 @@
|
|
|
38
40
|
"webpack": "^5.88.1",
|
|
39
41
|
"webpack-cli": "^5.1.4",
|
|
40
42
|
"webpack-dev-server": "^4.15.1",
|
|
41
|
-
"webpack-merge": "^5.9.0"
|
|
42
|
-
"axios": "^1.4.0",
|
|
43
|
-
"lodash": "^4.17.21",
|
|
44
|
-
"@types/lodash": "^4.14.195"
|
|
43
|
+
"webpack-merge": "^5.9.0"
|
|
45
44
|
},
|
|
46
45
|
"peerDependencies": {
|
|
47
46
|
"@ant-design/icons": "^5.1.4",
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import classnames from 'classnames/bind';
|
|
3
|
+
import styles from "./index.module.less"
|
|
4
|
+
const cx = classnames.bind(styles);
|
|
5
|
+
|
|
6
|
+
export default function PageContainer({
|
|
7
|
+
className,
|
|
8
|
+
children,
|
|
9
|
+
...restFileds
|
|
10
|
+
}: any) {
|
|
11
|
+
return (
|
|
12
|
+
<div
|
|
13
|
+
className={cx({
|
|
14
|
+
"page-container": true,
|
|
15
|
+
[className]: true,
|
|
16
|
+
})}
|
|
17
|
+
{...restFileds}
|
|
18
|
+
>
|
|
19
|
+
<div>
|
|
20
|
+
{children}
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<div className={cx("foot-empower")}>
|
|
24
|
+
©{new Date().getFullYear() || ''} 橙蜂而来{' '}
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Pagination, PaginationProps } from 'antd';
|
|
3
|
+
import classnames from 'classnames/bind';
|
|
4
|
+
import styles from "./index.module.less"
|
|
5
|
+
const cx = classnames.bind(styles);
|
|
6
|
+
|
|
7
|
+
export default function PaginationComponent({
|
|
8
|
+
className,
|
|
9
|
+
...restFileds
|
|
10
|
+
}: PaginationProps | any) {
|
|
11
|
+
return (<Pagination
|
|
12
|
+
className={cx({
|
|
13
|
+
pagination: true,
|
|
14
|
+
[className]: true
|
|
15
|
+
})}
|
|
16
|
+
showQuickJumper
|
|
17
|
+
showSizeChanger
|
|
18
|
+
showTotal={(total) => `共 ${total} 条`}
|
|
19
|
+
{...restFileds}
|
|
20
|
+
/>
|
|
21
|
+
)
|
|
22
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
ProTable,
|
|
4
|
+
ProTableProps
|
|
5
|
+
} from '@ant-design/pro-components';
|
|
6
|
+
import classnames from 'classnames/bind';
|
|
7
|
+
import styles from "./index.module.less"
|
|
8
|
+
const cx = classnames.bind(styles);
|
|
9
|
+
|
|
10
|
+
export default function ProTableComponent({
|
|
11
|
+
className,
|
|
12
|
+
...restFileds
|
|
13
|
+
}: ProTableProps<any, any> | any) {
|
|
14
|
+
return (
|
|
15
|
+
<ProTable
|
|
16
|
+
className={cx({
|
|
17
|
+
"pro-table": true,
|
|
18
|
+
[className]: true
|
|
19
|
+
})}
|
|
20
|
+
search={false}
|
|
21
|
+
pagination={false}
|
|
22
|
+
scroll={{
|
|
23
|
+
x: 'max-content'
|
|
24
|
+
}}
|
|
25
|
+
{...restFileds}
|
|
26
|
+
/>
|
|
27
|
+
)
|
|
28
|
+
|
|
29
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
QueryFilter,
|
|
4
|
+
QueryFilterProps
|
|
5
|
+
} from '@ant-design/pro-components';
|
|
6
|
+
import classnames from 'classnames/bind';
|
|
7
|
+
import styles from "./index.module.less"
|
|
8
|
+
const cx = classnames.bind(styles);
|
|
9
|
+
|
|
10
|
+
export default function PaginationComponent({
|
|
11
|
+
className,
|
|
12
|
+
...restFileds
|
|
13
|
+
}: QueryFilterProps<any> | any) {
|
|
14
|
+
return (
|
|
15
|
+
<QueryFilter
|
|
16
|
+
className={cx({
|
|
17
|
+
"query-filter": true,
|
|
18
|
+
[className]: true,
|
|
19
|
+
})}
|
|
20
|
+
layout="vertical"
|
|
21
|
+
{...restFileds}
|
|
22
|
+
/>
|
|
23
|
+
)
|
|
24
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import PageContainer from '../../base-component/PageContainer';
|
|
3
|
+
import QueryFilter from '../../base-component/QueryFilter';
|
|
4
|
+
import ProTable from '../../base-component/ProTable';
|
|
5
|
+
import Pagination from '../../base-component/Pagination';
|
|
6
|
+
import {
|
|
7
|
+
ProFormText,
|
|
8
|
+
} from '@ant-design/pro-components';
|
|
9
|
+
import "./index.scss"
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
export interface AccountProps {
|
|
13
|
+
dataList: any;
|
|
14
|
+
columns: any;
|
|
15
|
+
isLoading: any;
|
|
16
|
+
handleRoload: () => any;
|
|
17
|
+
pagination: any;
|
|
18
|
+
handleOnReset: (item: any) => any;
|
|
19
|
+
handleOnFinish: (item: any) => any;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export default function Account({
|
|
23
|
+
dataList,
|
|
24
|
+
columns,
|
|
25
|
+
isLoading,
|
|
26
|
+
handleRoload,
|
|
27
|
+
pagination,
|
|
28
|
+
handleOnReset,
|
|
29
|
+
handleOnFinish
|
|
30
|
+
}: AccountProps) {
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<PageContainer>
|
|
34
|
+
<QueryFilter
|
|
35
|
+
onReset={handleOnReset}
|
|
36
|
+
onFinish={handleOnFinish}
|
|
37
|
+
>
|
|
38
|
+
<ProFormText name="name" label="名称" />
|
|
39
|
+
<ProFormText name="account" label="账号" />
|
|
40
|
+
</QueryFilter>
|
|
41
|
+
<ProTable
|
|
42
|
+
headerTitle={"账号列表"}
|
|
43
|
+
dataSource={dataList}
|
|
44
|
+
loading={isLoading}
|
|
45
|
+
columns={columns}
|
|
46
|
+
rowKey="id"
|
|
47
|
+
options={{
|
|
48
|
+
reload: handleRoload
|
|
49
|
+
}}
|
|
50
|
+
/>
|
|
51
|
+
<Pagination {...pagination} />
|
|
52
|
+
</PageContainer>
|
|
53
|
+
)
|
|
54
|
+
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import PageContainer from '../../base-component/PageContainer';
|
|
3
|
+
import QueryFilter from '../../base-component/QueryFilter';
|
|
4
|
+
import ProTable from '../../base-component/ProTable';
|
|
5
|
+
import Pagination from '../../base-component/Pagination';
|
|
6
|
+
|
|
7
|
+
import { Modal, Button, Divider, Descriptions, Space, message, Avatar } from 'antd';
|
|
8
|
+
import { UserOutlined } from '@ant-design/icons';
|
|
9
|
+
import EditAccountDrawer from './EditAccountDrawer/index'
|
|
10
|
+
|
|
11
|
+
import "./index.scss"
|
|
12
|
+
|
|
13
|
+
export interface AccountInfoProps {
|
|
14
|
+
accountInfo: any;
|
|
15
|
+
timeFormatter: (item: any) => any;
|
|
16
|
+
dataList: any;
|
|
17
|
+
columns: any;
|
|
18
|
+
isLoading: any;
|
|
19
|
+
handleRoload: () => any;
|
|
20
|
+
pagination: any;
|
|
21
|
+
isBoundRolesFunc: (type: any, item: any) => any;
|
|
22
|
+
getQueryBoundRolesFunc: () => any;
|
|
23
|
+
editAccountOpen: any
|
|
24
|
+
setEditAccountOpen: (item: any) => any;
|
|
25
|
+
rolelistRoleData: any,
|
|
26
|
+
roleCheckData: any,
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export default function AccountInfo({
|
|
30
|
+
accountInfo,//用户详情
|
|
31
|
+
timeFormatter,//时间戳转换
|
|
32
|
+
dataList,//表格数据
|
|
33
|
+
columns,//列
|
|
34
|
+
isLoading,//加载
|
|
35
|
+
handleRoload,//分页
|
|
36
|
+
pagination,//分页配置
|
|
37
|
+
isBoundRolesFunc,//绑定/解绑事件
|
|
38
|
+
getQueryBoundRolesFunc,//绑定打开弹框
|
|
39
|
+
editAccountOpen, //弹框状态
|
|
40
|
+
setEditAccountOpen, //关闭弹框
|
|
41
|
+
rolelistRoleData, //总角色数据
|
|
42
|
+
roleCheckData, //当前选中
|
|
43
|
+
|
|
44
|
+
}: AccountInfoProps) {
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<PageContainer>
|
|
48
|
+
<Divider orientation="left">
|
|
49
|
+
<Avatar
|
|
50
|
+
style={{ backgroundColor: '#1677ff', marginRight: '8px' }}
|
|
51
|
+
draggable={false}
|
|
52
|
+
icon={<UserOutlined />}
|
|
53
|
+
src={!!accountInfo.avatar ? accountInfo.avatar : undefined}
|
|
54
|
+
/>
|
|
55
|
+
{accountInfo?.name || ''}
|
|
56
|
+
</Divider>
|
|
57
|
+
<Descriptions className='basicInfoWrap'>
|
|
58
|
+
<Descriptions.Item label="账号">{accountInfo?.account || ''}</Descriptions.Item>
|
|
59
|
+
<Descriptions.Item label="员工工号">{accountInfo?.jobNumber || ''}</Descriptions.Item>
|
|
60
|
+
<Descriptions.Item label="名称">{accountInfo?.name || ''}</Descriptions.Item>
|
|
61
|
+
<Descriptions.Item label="手机号">{accountInfo?.mobile || ''}</Descriptions.Item>
|
|
62
|
+
<Descriptions.Item label="邮箱">{accountInfo?.email || ''}</Descriptions.Item>
|
|
63
|
+
<Descriptions.Item label="是否企业管理员">{accountInfo?.isAdmin ? '是' : '否'}</Descriptions.Item>
|
|
64
|
+
<Descriptions.Item label="创建时间">{timeFormatter(accountInfo?.gmtCreate)}</Descriptions.Item>
|
|
65
|
+
<Descriptions.Item label="修改时间">{timeFormatter(accountInfo?.gmtModified)}</Descriptions.Item>
|
|
66
|
+
</Descriptions>
|
|
67
|
+
|
|
68
|
+
<ProTable
|
|
69
|
+
headerTitle={"绑定的角色"}
|
|
70
|
+
dataSource={dataList}
|
|
71
|
+
loading={isLoading}
|
|
72
|
+
columns={columns}
|
|
73
|
+
rowKey="id"
|
|
74
|
+
options={{
|
|
75
|
+
reload: handleRoload
|
|
76
|
+
}}
|
|
77
|
+
toolBarRender={() => {
|
|
78
|
+
return [
|
|
79
|
+
<Button type="primary" onClick={(() => {
|
|
80
|
+
getQueryBoundRolesFunc()
|
|
81
|
+
})}>绑定</Button>
|
|
82
|
+
];
|
|
83
|
+
}}
|
|
84
|
+
/>
|
|
85
|
+
<Pagination {...pagination} />
|
|
86
|
+
|
|
87
|
+
<EditAccountDrawer
|
|
88
|
+
open={editAccountOpen} // 状态
|
|
89
|
+
editOpenStatus={setEditAccountOpen} //修改弹框显隐事件
|
|
90
|
+
rolelistRoleData={rolelistRoleData} //总角色
|
|
91
|
+
roleCheckData={roleCheckData} //当前角色选中数据
|
|
92
|
+
isBoundRolesFunc={isBoundRolesFunc}
|
|
93
|
+
></EditAccountDrawer>
|
|
94
|
+
</PageContainer>
|
|
95
|
+
)
|
|
96
|
+
|
|
97
|
+
}
|
|
98
|
+
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
import PageContainer from '../../base-component/PageContainer';
|
|
3
|
+
import QueryFilter from '../../base-component/QueryFilter';
|
|
4
|
+
import ProTable from '../../base-component/ProTable';
|
|
5
|
+
import Pagination from '../../base-component/Pagination';
|
|
6
|
+
import {
|
|
7
|
+
ProFormText,
|
|
8
|
+
} from '@ant-design/pro-components';
|
|
9
|
+
import "./index.scss"
|
|
10
|
+
|
|
11
|
+
export interface RoleProps {
|
|
12
|
+
dataList: any;
|
|
13
|
+
columns: any;
|
|
14
|
+
isLoading: any;
|
|
15
|
+
handleRoload: () => any;
|
|
16
|
+
pagination: any;
|
|
17
|
+
handleOnReset: (item: any) => any;
|
|
18
|
+
handleOnFinish: (item: any) => any;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export default function Role({
|
|
22
|
+
dataList,
|
|
23
|
+
columns,
|
|
24
|
+
isLoading,
|
|
25
|
+
handleRoload,
|
|
26
|
+
pagination,
|
|
27
|
+
handleOnReset,
|
|
28
|
+
handleOnFinish
|
|
29
|
+
}: RoleProps) {
|
|
30
|
+
return (
|
|
31
|
+
<PageContainer >
|
|
32
|
+
<QueryFilter
|
|
33
|
+
onReset={handleOnReset}
|
|
34
|
+
onFinish={handleOnFinish}
|
|
35
|
+
>
|
|
36
|
+
<ProFormText name="roleName" label="角色名称" />
|
|
37
|
+
</QueryFilter>
|
|
38
|
+
|
|
39
|
+
<ProTable
|
|
40
|
+
headerTitle={"角色列表"}
|
|
41
|
+
dataSource={dataList}
|
|
42
|
+
loading={isLoading}
|
|
43
|
+
columns={columns}
|
|
44
|
+
rowKey="id"
|
|
45
|
+
options={{
|
|
46
|
+
reload: handleRoload
|
|
47
|
+
}}
|
|
48
|
+
/>
|
|
49
|
+
<Pagination {...pagination} />
|
|
50
|
+
|
|
51
|
+
</PageContainer >
|
|
52
|
+
)
|
|
53
|
+
};
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
import PageContainer from '../../base-component/PageContainer';
|
|
3
|
+
import QueryFilter from '../../base-component/QueryFilter';
|
|
4
|
+
import ProTable from '../../base-component/ProTable';
|
|
5
|
+
import Pagination from '../../base-component/Pagination';
|
|
6
|
+
import {
|
|
7
|
+
ProFormText,
|
|
8
|
+
} from '@ant-design/pro-components';
|
|
9
|
+
import { Button, Divider, Modal, Descriptions, Space, } from 'antd';
|
|
10
|
+
import EditAccountDrawer from './EditAccountDrawer/index'
|
|
11
|
+
|
|
12
|
+
import "./index.scss"
|
|
13
|
+
export interface RoleProps {
|
|
14
|
+
roleInfo: any;
|
|
15
|
+
timeFormatter: (item: any) => any;
|
|
16
|
+
handleOnReset: () => any;
|
|
17
|
+
handleOnFinish: () => any;
|
|
18
|
+
dataList: any;
|
|
19
|
+
columns: any;
|
|
20
|
+
isLoading: any;
|
|
21
|
+
handleRoload: () => any;
|
|
22
|
+
pagination: any;
|
|
23
|
+
getQueryBoundRolesFunc: () => any;
|
|
24
|
+
editAccountOpen: any
|
|
25
|
+
setEditAccountOpen: (item: any) => any;
|
|
26
|
+
roleBoundAccountsFunc: (item: any) => any;
|
|
27
|
+
queryByKeywordFunc: (item: any) => any;
|
|
28
|
+
|
|
29
|
+
// rolelistRoleData: any,
|
|
30
|
+
// roleCheckData: any,
|
|
31
|
+
}
|
|
32
|
+
export default function RoleInfo({
|
|
33
|
+
roleInfo,
|
|
34
|
+
timeFormatter,
|
|
35
|
+
handleOnReset,
|
|
36
|
+
handleOnFinish,
|
|
37
|
+
dataList,
|
|
38
|
+
columns,
|
|
39
|
+
isLoading,
|
|
40
|
+
handleRoload,
|
|
41
|
+
pagination,
|
|
42
|
+
getQueryBoundRolesFunc,
|
|
43
|
+
editAccountOpen,
|
|
44
|
+
setEditAccountOpen,
|
|
45
|
+
roleBoundAccountsFunc,
|
|
46
|
+
queryByKeywordFunc
|
|
47
|
+
}:RoleProps){
|
|
48
|
+
return(
|
|
49
|
+
<PageContainer>
|
|
50
|
+
<Divider orientation="left">{roleInfo?.roleName || "-"}</Divider>
|
|
51
|
+
<Descriptions className="basicInfoWrap">
|
|
52
|
+
<Descriptions.Item label="角色名称">{roleInfo?.roleName || ''}</Descriptions.Item>
|
|
53
|
+
<Descriptions.Item label="角色编码">{roleInfo?.roleCode || ''}</Descriptions.Item>
|
|
54
|
+
<Descriptions.Item label="角色描述">{roleInfo?.description || ''}</Descriptions.Item>
|
|
55
|
+
<Descriptions.Item label="创建时间">{timeFormatter(roleInfo?.gmtCreate) || ''}</Descriptions.Item>
|
|
56
|
+
<Descriptions.Item label="更新时间">{timeFormatter(roleInfo?.gmtModified) || ''}</Descriptions.Item>
|
|
57
|
+
</Descriptions>
|
|
58
|
+
|
|
59
|
+
<QueryFilter
|
|
60
|
+
onReset={handleOnReset}
|
|
61
|
+
onFinish={handleOnFinish}
|
|
62
|
+
>
|
|
63
|
+
<ProFormText name="keyword" label="关键词" />
|
|
64
|
+
</QueryFilter>
|
|
65
|
+
|
|
66
|
+
<ProTable
|
|
67
|
+
headerTitle={"角色下绑定的账号"}
|
|
68
|
+
dataSource={dataList}
|
|
69
|
+
loading={isLoading}
|
|
70
|
+
columns={columns}
|
|
71
|
+
rowKey="id"
|
|
72
|
+
options={{
|
|
73
|
+
reload: handleRoload
|
|
74
|
+
}}
|
|
75
|
+
toolBarRender={() => {
|
|
76
|
+
return [
|
|
77
|
+
<Button type="primary" onClick={(() => {
|
|
78
|
+
getQueryBoundRolesFunc()
|
|
79
|
+
})}>添加账号</Button>
|
|
80
|
+
];
|
|
81
|
+
}}
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
<Pagination {...pagination} />
|
|
85
|
+
<EditAccountDrawer
|
|
86
|
+
open={editAccountOpen} // 状态
|
|
87
|
+
editOpenStatus={setEditAccountOpen} //修改弹框显隐事件
|
|
88
|
+
roleBoundAccountsFunc={roleBoundAccountsFunc}
|
|
89
|
+
queryByKeywordFunc={queryByKeywordFunc} //搜索事件
|
|
90
|
+
></EditAccountDrawer>
|
|
91
|
+
|
|
92
|
+
</PageContainer>
|
|
93
|
+
)
|
|
94
|
+
};
|
package/src/index.d.ts
CHANGED