|
@@ -1,5 +1,21 @@
|
1
|
1
|
import React, { useState, useEffect, useRef } from 'react';
|
2
|
|
-import { Button, Popconfirm, Modal, Form, Input, message, Radio, Select, Checkbox } from 'antd';
|
|
2
|
+import {
|
|
3
|
+ Button,
|
|
4
|
+ Popconfirm,
|
|
5
|
+ Modal,
|
|
6
|
+ Form,
|
|
7
|
+ Input,
|
|
8
|
+ message,
|
|
9
|
+ Radio,
|
|
10
|
+ Select,
|
|
11
|
+ List,
|
|
12
|
+ Row,
|
|
13
|
+ Col,
|
|
14
|
+ Card,
|
|
15
|
+ Tree,
|
|
16
|
+ Typography,
|
|
17
|
+ Checkbox,
|
|
18
|
+} from 'antd';
|
3
|
19
|
import { PlusOutlined } from '@ant-design/icons';
|
4
|
20
|
import { getCooperativeList } from '@/services/cooperative';
|
5
|
21
|
import {
|
|
@@ -16,6 +32,7 @@ import { PageHeaderWrapper } from '@ant-design/pro-layout';
|
16
|
32
|
import PageTable from '@/components/PageTable';
|
17
|
33
|
import moment from 'moment';
|
18
|
34
|
import Search from '@/components/CooperativeSearch';
|
|
35
|
+import './index.less';
|
19
|
36
|
|
20
|
37
|
const FormItem = Form.Item;
|
21
|
38
|
const { Option } = Select;
|
|
@@ -39,7 +56,33 @@ export default (props) => {
|
39
|
56
|
const [currentCheckbox, setCurrentCheckbox] = useState();
|
40
|
57
|
//列表数据
|
41
|
58
|
const actionRef = useRef();
|
|
59
|
+ const [data, setData] = useState([]);
|
|
60
|
+ const [orgId, setOrgId] = useState();
|
42
|
61
|
|
|
62
|
+ // 动态生成树
|
|
63
|
+ const handelNode = (item) => {
|
|
64
|
+ let node = (
|
|
65
|
+ <div
|
|
66
|
+ key={item.orgId}
|
|
67
|
+ style={{
|
|
68
|
+ justifyContent: 'space-between',
|
|
69
|
+ display: 'flex',
|
|
70
|
+ // width: '100%',
|
|
71
|
+ padding: '8px 0',
|
|
72
|
+ }}
|
|
73
|
+ >
|
|
74
|
+ <span>{item.title}</span>
|
|
75
|
+ </div>
|
|
76
|
+ );
|
|
77
|
+ return node;
|
|
78
|
+ };
|
|
79
|
+ const onSelect = (checkedKeys, info) => {
|
|
80
|
+ if (info.selected) {
|
|
81
|
+ setOrgId(info.node.key);
|
|
82
|
+ } else {
|
|
83
|
+ setOrgId();
|
|
84
|
+ }
|
|
85
|
+ };
|
43
|
86
|
// 编辑弹窗的表单提交
|
44
|
87
|
const Submit = (values) => {
|
45
|
88
|
const newData = { ...values };
|
|
@@ -182,6 +225,10 @@ export default (props) => {
|
182
|
225
|
//获取机构列表数据
|
183
|
226
|
getCooperativeList().then((res) => {
|
184
|
227
|
setCooperativeList(res.records);
|
|
228
|
+ const list = res.records?.map((item) => {
|
|
229
|
+ return { title: item.name, key: item.orgId };
|
|
230
|
+ });
|
|
231
|
+ setData(list);
|
185
|
232
|
});
|
186
|
233
|
//获取角色列表数据
|
187
|
234
|
getRoleList().then((res) => {
|
|
@@ -245,6 +292,7 @@ export default (props) => {
|
245
|
292
|
title: '状态',
|
246
|
293
|
dataIndex: 'status',
|
247
|
294
|
key: 'status',
|
|
295
|
+ width: 80,
|
248
|
296
|
renderFormItem: () => {
|
249
|
297
|
return (
|
250
|
298
|
<Select placeholder="请选择">
|
|
@@ -260,10 +308,11 @@ export default (props) => {
|
260
|
308
|
{
|
261
|
309
|
title: '操作',
|
262
|
310
|
valueType: 'option',
|
|
311
|
+ width: 240,
|
263
|
312
|
render: (_, record) => [
|
264
|
|
- <Button type="link" key={1} onClick={() => handleOK(record)}>
|
|
313
|
+ <a key={1} onClick={() => handleOK(record)}>
|
265
|
314
|
{record.status === 0 ? '启用' : '禁用'}
|
266
|
|
- </Button>,
|
|
315
|
+ </a>,
|
267
|
316
|
<a key={2} onClick={() => handleEdit(record)}>
|
268
|
317
|
编辑
|
269
|
318
|
</a>,
|
|
@@ -285,16 +334,31 @@ export default (props) => {
|
285
|
334
|
|
286
|
335
|
return (
|
287
|
336
|
<PageHeaderWrapper>
|
288
|
|
- <PageTable
|
289
|
|
- request={getUserList}
|
290
|
|
- // expfunc={exportPersonList}
|
291
|
|
- columns={columns}
|
292
|
|
- actionRef={actionRef}
|
293
|
|
- rowKey="userId"
|
294
|
|
- options={false}
|
295
|
|
- toolBarRender={actions}
|
296
|
|
- scroll={{ x: 1000 }}
|
297
|
|
- />
|
|
337
|
+ <Row gutter={16}>
|
|
338
|
+ <Col span={6}>
|
|
339
|
+ <Card title="机构列表">
|
|
340
|
+ <Tree
|
|
341
|
+ onSelect={onSelect}
|
|
342
|
+ className="treeClass"
|
|
343
|
+ titleRender={(data) => handelNode(data)}
|
|
344
|
+ treeData={data}
|
|
345
|
+ />
|
|
346
|
+ </Card>
|
|
347
|
+ </Col>
|
|
348
|
+ <Col span={18}>
|
|
349
|
+ <PageTable
|
|
350
|
+ request={getUserList}
|
|
351
|
+ params={{ org_id: orgId }}
|
|
352
|
+ // expfunc={exportPersonList}
|
|
353
|
+ columns={columns}
|
|
354
|
+ actionRef={actionRef}
|
|
355
|
+ rowKey="userId"
|
|
356
|
+ options={false}
|
|
357
|
+ toolBarRender={actions}
|
|
358
|
+ scroll={{ x: 1000 }}
|
|
359
|
+ />
|
|
360
|
+ </Col>
|
|
361
|
+ </Row>
|
298
|
362
|
<Modal
|
299
|
363
|
forceRender
|
300
|
364
|
title={userId ? '人员编辑' : '人员新增'}
|
|
@@ -371,7 +435,7 @@ export default (props) => {
|
371
|
435
|
</Modal>
|
372
|
436
|
<Modal
|
373
|
437
|
forceRender
|
374
|
|
- title="角色授权"
|
|
438
|
+ title="授权角色"
|
375
|
439
|
visible={editRoleModal}
|
376
|
440
|
onCancel={onRoleCancel}
|
377
|
441
|
keyboard={false}
|
|
@@ -384,6 +448,20 @@ export default (props) => {
|
384
|
448
|
style={{ width: '100%' }}
|
385
|
449
|
value={currentCheckbox}
|
386
|
450
|
onChange={handleCheckboxChange}
|
|
451
|
+ >
|
|
452
|
+ <List
|
|
453
|
+ dataSource={roleList}
|
|
454
|
+ renderItem={(item) => (
|
|
455
|
+ <List.Item>
|
|
456
|
+ <Checkbox value={item.roleId}>{item.name}</Checkbox>
|
|
457
|
+ </List.Item>
|
|
458
|
+ )}
|
|
459
|
+ />
|
|
460
|
+ </Checkbox.Group>
|
|
461
|
+ {/* <Checkbox.Group
|
|
462
|
+ style={{ width: '100%' }}
|
|
463
|
+ value={currentCheckbox}
|
|
464
|
+ onChange={handleCheckboxChange}
|
387
|
465
|
>
|
388
|
466
|
{roleList.map((item) => {
|
389
|
467
|
return (
|
|
@@ -393,7 +471,7 @@ export default (props) => {
|
393
|
471
|
</div>
|
394
|
472
|
);
|
395
|
473
|
})}
|
396
|
|
- </Checkbox.Group>
|
|
474
|
+ </Checkbox.Group> */}
|
397
|
475
|
</Modal>
|
398
|
476
|
</PageHeaderWrapper>
|
399
|
477
|
);
|