|
@@ -1,23 +1,23 @@
|
1
|
|
-import React from 'react';
|
2
|
|
-import { Button, Input, List, Popconfirm, Spin, Modal, message } from 'antd';
|
3
|
|
-import useBool from '@/utils/hooks/useBool';
|
4
|
|
-import classNames from 'classnames';
|
|
1
|
+import React from "react";
|
|
2
|
+import { Button, Input, List, Popconfirm, Spin, Modal, message } from "antd";
|
|
3
|
+import useBool from "@/utils/hooks/useBool";
|
|
4
|
+import classNames from "classnames";
|
5
|
5
|
import {
|
6
|
6
|
getSysRole,
|
7
|
7
|
postSysRole,
|
8
|
8
|
putSysRole,
|
9
|
9
|
deleteSysRole,
|
10
|
|
-} from '@/service/sysrole';
|
11
|
|
-import './style.less';
|
|
10
|
+} from "@/service/sysrole";
|
|
11
|
+import "./style.less";
|
12
|
12
|
|
13
|
13
|
const Header = (props) => {
|
14
|
14
|
return (
|
15
|
|
- <div className='role-list-header'>
|
16
|
|
- <div className='role-list-header-body'>{props.children}</div>
|
17
|
|
- <div className='role-list-header-action'>{props.action}</div>
|
|
15
|
+ <div className="role-list-header">
|
|
16
|
+ <div className="role-list-header-body">{props.children}</div>
|
|
17
|
+ <div className="role-list-header-action">{props.action}</div>
|
18
|
18
|
</div>
|
19
|
|
- )
|
20
|
|
-}
|
|
19
|
+ );
|
|
20
|
+};
|
21
|
21
|
|
22
|
22
|
export default (props) => {
|
23
|
23
|
const { current, onChange } = props;
|
|
@@ -32,30 +32,32 @@ export default (props) => {
|
32
|
32
|
openModel();
|
33
|
33
|
setInText();
|
34
|
34
|
onChange();
|
35
|
|
- }
|
|
35
|
+ };
|
36
|
36
|
|
37
|
37
|
const onEdit = (item) => {
|
38
|
38
|
openModel();
|
39
|
39
|
setInText(item.name);
|
40
|
40
|
onChange(item);
|
41
|
|
- }
|
|
41
|
+ };
|
42
|
42
|
|
43
|
43
|
const onDelete = (item) => {
|
44
|
44
|
startLoading();
|
45
|
45
|
// 删除角色
|
46
|
|
- deleteSysRole(item.roleId).then(() => {
|
47
|
|
- setList(list.filter(x => x.roleId !== item.roleId));
|
48
|
|
- cancelLoading();
|
49
|
|
- hideModel();
|
50
|
|
- onChange();
|
51
|
|
- }).catch(() => {
|
52
|
|
- cancelLoading();
|
53
|
|
- })
|
54
|
|
- }
|
|
46
|
+ deleteSysRole(item.roleId)
|
|
47
|
+ .then(() => {
|
|
48
|
+ setList(list.filter((x) => x.roleId !== item.roleId));
|
|
49
|
+ cancelLoading();
|
|
50
|
+ hideModel();
|
|
51
|
+ onChange();
|
|
52
|
+ })
|
|
53
|
+ .catch(() => {
|
|
54
|
+ cancelLoading();
|
|
55
|
+ });
|
|
56
|
+ };
|
55
|
57
|
|
56
|
58
|
const handleOk = () => {
|
57
|
59
|
if (!inText) {
|
58
|
|
- message.warn('请输入角色名称');
|
|
60
|
+ message.warn("请输入角色名称");
|
59
|
61
|
return;
|
60
|
62
|
}
|
61
|
63
|
startLoading();
|
|
@@ -63,43 +65,49 @@ export default (props) => {
|
63
|
65
|
|
64
|
66
|
if (current) {
|
65
|
67
|
// 修改角色
|
66
|
|
- putSysRole(current.roleId, data).then(res => {
|
67
|
|
- setList(list.map(x => x.roleId === current.roleId ? res : x));
|
68
|
|
- cancelLoading();
|
69
|
|
- hideModel();
|
70
|
|
- }).catch(() => {
|
71
|
|
- cancelLoading();
|
72
|
|
- })
|
|
68
|
+ putSysRole(current.roleId, data)
|
|
69
|
+ .then((res) => {
|
|
70
|
+ setList(list.map((x) => (x.roleId === current.roleId ? res : x)));
|
|
71
|
+ cancelLoading();
|
|
72
|
+ hideModel();
|
|
73
|
+ })
|
|
74
|
+ .catch(() => {
|
|
75
|
+ cancelLoading();
|
|
76
|
+ });
|
73
|
77
|
} else {
|
74
|
78
|
// 新增角色
|
75
|
|
- postSysRole(data).then((res) => {
|
76
|
|
- setList([res].concat(list));
|
77
|
|
- cancelLoading();
|
78
|
|
- hideModel();
|
79
|
|
- onChange(res);
|
80
|
|
- }).catch(() => {
|
81
|
|
- cancelLoading();
|
82
|
|
- })
|
|
79
|
+ postSysRole(data)
|
|
80
|
+ .then((res) => {
|
|
81
|
+ setList([res].concat(list));
|
|
82
|
+ cancelLoading();
|
|
83
|
+ hideModel();
|
|
84
|
+ onChange(res);
|
|
85
|
+ })
|
|
86
|
+ .catch(() => {
|
|
87
|
+ cancelLoading();
|
|
88
|
+ });
|
83
|
89
|
}
|
84
|
|
- }
|
|
90
|
+ };
|
85
|
91
|
|
86
|
92
|
const handleCancel = () => {
|
87
|
93
|
if (loading) {
|
88
|
|
- return ;
|
|
94
|
+ return;
|
89
|
95
|
}
|
90
|
96
|
|
91
|
97
|
hideModel();
|
92
|
|
- }
|
|
98
|
+ };
|
93
|
99
|
|
94
|
100
|
const queryRoles = React.useCallback((params) => {
|
95
|
101
|
startLoading();
|
96
|
|
- getSysRole(params).then(res => {
|
97
|
|
- setList(res.records);
|
98
|
|
- cancelLoading();
|
99
|
|
- setFinished(res.current >= res.pages);
|
100
|
|
- }).catch(() => {
|
101
|
|
- cancelLoading();
|
102
|
|
- });
|
|
102
|
+ getSysRole(params)
|
|
103
|
+ .then((res) => {
|
|
104
|
+ setList(res.records);
|
|
105
|
+ cancelLoading();
|
|
106
|
+ setFinished(res.current >= res.pages);
|
|
107
|
+ })
|
|
108
|
+ .catch(() => {
|
|
109
|
+ cancelLoading();
|
|
110
|
+ });
|
103
|
111
|
}, []);
|
104
|
112
|
|
105
|
113
|
React.useEffect(() => {
|
|
@@ -109,19 +117,39 @@ export default (props) => {
|
109
|
117
|
return (
|
110
|
118
|
<Spin spinning={loading}>
|
111
|
119
|
<List
|
112
|
|
- header={<Header action={<Button type='primary' onClick={onAdd}>新增</Button>}>角色列表</Header>}
|
113
|
|
- style={{ background: '#fff' }}
|
|
120
|
+ header={
|
|
121
|
+ <Header
|
|
122
|
+ action={
|
|
123
|
+ <Button type="primary" onClick={onAdd}>
|
|
124
|
+ 新增
|
|
125
|
+ </Button>
|
|
126
|
+ }
|
|
127
|
+ >
|
|
128
|
+ 角色列表
|
|
129
|
+ </Header>
|
|
130
|
+ }
|
|
131
|
+ style={{ background: "#fff" }}
|
114
|
132
|
bordered
|
115
|
133
|
dataSource={list}
|
116
|
|
- renderItem={item => (
|
|
134
|
+ renderItem={(item) => (
|
117
|
135
|
<List.Item
|
118
|
|
- className={classNames('role-list-item', { active: current && current.roleId === item.roleId })}
|
|
136
|
+ className={classNames("role-list-item", {
|
|
137
|
+ active: current && current.roleId === item.roleId,
|
|
138
|
+ })}
|
119
|
139
|
onClick={() => onChange(item)}
|
120
|
140
|
actions={[
|
121
|
|
- <Button key='edit' type='link' onClick={() => onEdit(item)}>编辑</Button>,
|
122
|
|
- <Popconfirm key='delete' title="确认删除?" onConfirm={() => onDelete(item)}>
|
123
|
|
- <Button type='link' danger>删除</Button>
|
124
|
|
- </Popconfirm>
|
|
141
|
+ <Button key="edit" type="link" onClick={() => onEdit(item)}>
|
|
142
|
+ 编辑
|
|
143
|
+ </Button>,
|
|
144
|
+ <Popconfirm
|
|
145
|
+ key="delete"
|
|
146
|
+ title="确认删除?"
|
|
147
|
+ onConfirm={() => onDelete(item)}
|
|
148
|
+ >
|
|
149
|
+ <Button type="link" danger>
|
|
150
|
+ 删除
|
|
151
|
+ </Button>
|
|
152
|
+ </Popconfirm>,
|
125
|
153
|
]}
|
126
|
154
|
>
|
127
|
155
|
{item.name}
|
|
@@ -134,8 +162,8 @@ export default (props) => {
|
134
|
162
|
onOk={handleOk}
|
135
|
163
|
onCancel={handleCancel}
|
136
|
164
|
>
|
137
|
|
- <Input value={inText} onChange={e => setInText(e.target.value)} />
|
|
165
|
+ <Input value={inText} onChange={(e) => setInText(e.target.value)} />
|
138
|
166
|
</Modal>
|
139
|
167
|
</Spin>
|
140
|
|
- )
|
141
|
|
-}
|
|
168
|
+ );
|
|
169
|
+};
|