Skip to content

Commit a3eb425

Browse files
LyricTianLyricTian
committed
Fixed menu and add template
1 parent 88822b1 commit a3eb425

4 files changed

Lines changed: 234 additions & 3 deletions

File tree

‎src/layouts/AdminLayout.js‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,17 +93,39 @@ class AdminLayout extends React.PureComponent {
9393

9494
onMenuOpenChange = openKeys => {
9595
const { menuMap } = this.props;
96-
9796
if (openKeys.length > 1) {
9897
const lastKey = openKeys[openKeys.length - 1];
99-
if (!menuMap[lastKey].parent_path.startsWith(openKeys[0])) {
98+
const lastItem = menuMap[lastKey];
99+
if (!lastItem) {
100+
this.dispatch({
101+
type: 'global/changeOpenKeys',
102+
payload: [],
103+
});
104+
return;
105+
}
106+
107+
let isParent = false;
108+
for (let i = 0; i < openKeys.length - 1; i += 1) {
109+
const item = menuMap[openKeys[i]] || {};
110+
let path = item.record_id;
111+
if (item.parent_path !== '') {
112+
path = `${item.parent_path}/${path}`;
113+
}
114+
if (lastItem.parent_path === path) {
115+
isParent = true;
116+
break;
117+
}
118+
}
119+
120+
if (!isParent) {
100121
this.dispatch({
101122
type: 'global/changeOpenKeys',
102123
payload: [lastKey],
103124
});
104125
return;
105126
}
106127
}
128+
107129
this.dispatch({
108130
type: 'global/changeOpenKeys',
109131
payload: [...openKeys],

‎src/pages/Menu/MenuAction/index.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,53 @@ export default class MenuAction extends PureComponent {
7676
});
7777
};
7878

79+
handleAddTpl = () => {
80+
const tplData = [
81+
{
82+
code: 'add',
83+
name: '新增',
84+
},
85+
{
86+
code: 'edit',
87+
name: '编辑',
88+
},
89+
{
90+
code: 'del',
91+
name: '删除',
92+
},
93+
{
94+
code: 'query',
95+
name: '查询',
96+
},
97+
];
98+
99+
const newData = tplData.map(v => ({ key: v.code, ...v }));
100+
101+
const { dataSource } = this.state;
102+
const data = [...dataSource];
103+
for (let i = 0; i < newData.length; i += 1) {
104+
let exists = false;
105+
for (let j = 0; j < dataSource.length; j += 1) {
106+
if (dataSource[j].key === newData[i].key) {
107+
exists = true;
108+
break;
109+
}
110+
}
111+
if (!exists) {
112+
data.push(newData[i]);
113+
}
114+
}
115+
116+
this.setState(
117+
{
118+
dataSource: data,
119+
},
120+
() => {
121+
this.triggerChange(data);
122+
}
123+
);
124+
};
125+
79126
handleAdd = () => {
80127
const { dataSource } = this.state;
81128
const item = {
@@ -144,6 +191,9 @@ export default class MenuAction extends PureComponent {
144191
<Button onClick={this.handleAdd} size="small" type="primary">
145192
新增
146193
</Button>
194+
<Button onClick={this.handleAddTpl} size="small" type="primary">
195+
使用模板
196+
</Button>
147197
</div>
148198
<Table
149199
rowKey={record => record.key}

‎src/pages/Menu/MenuResource/AddDialog.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React, { PureComponent } from 'react';
2+
import { Modal, Form, Input } from 'antd';
3+
4+
@Form.create()
5+
class AddDialog extends PureComponent {
6+
handleCancel = () => {
7+
const { onCancel } = this.props;
8+
if (onCancel) {
9+
onCancel();
10+
}
11+
};
12+
13+
handleOKClick = () => {
14+
const { form, onSubmit } = this.props;
15+
form.validateFieldsAndScroll((err, values) => {
16+
if (!err) {
17+
const formData = { ...values };
18+
onSubmit(formData);
19+
}
20+
});
21+
};
22+
23+
render() {
24+
const {
25+
visible,
26+
form: { getFieldDecorator },
27+
} = this.props;
28+
const formItemLayout = {
29+
labelCol: {
30+
xs: { span: 24 },
31+
sm: { span: 6 },
32+
},
33+
wrapperCol: {
34+
xs: { span: 24 },
35+
sm: { span: 16 },
36+
},
37+
};
38+
39+
return (
40+
<Modal
41+
title="资源模板"
42+
width={400}
43+
visible={visible}
44+
maskClosable={false}
45+
destroyOnClose
46+
onOk={this.handleOKClick}
47+
onCancel={this.handleCancel}
48+
style={{ top: 20 }}
49+
bodyStyle={{ maxHeight: 'calc( 100vh - 158px )', overflowY: 'auto' }}
50+
>
51+
<Form>
52+
<Form.Item {...formItemLayout} label="资源名">
53+
{getFieldDecorator('name', {
54+
rules: [
55+
{
56+
required: true,
57+
message: '请输入资源名',
58+
},
59+
],
60+
})(<Input placeholder="请输入资源名" />)}
61+
</Form.Item>
62+
<Form.Item {...formItemLayout} label="资源路由">
63+
{getFieldDecorator('router', {
64+
rules: [
65+
{
66+
required: true,
67+
message: '请输入资源路由',
68+
},
69+
],
70+
})(<Input placeholder="请输入资源路由" />)}
71+
</Form.Item>
72+
</Form>
73+
</Modal>
74+
);
75+
}
76+
}
77+
78+
export default AddDialog;

‎src/pages/Menu/MenuResource/index.js‎

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
22
import { Table, Button, Popconfirm } from 'antd';
33
import { newUUID } from '@/utils/utils';
44
import { EditableCell, EditableFormRow } from './EditableCell';
5+
import AddDialog from './AddDialog';
56

67
import styles from './index.less';
78

@@ -66,6 +67,7 @@ export default class MenuAction extends PureComponent {
6667

6768
this.state = {
6869
dataSource: fillKey(props.value),
70+
addVisible: false,
6971
};
7072
}
7173

@@ -76,6 +78,73 @@ export default class MenuAction extends PureComponent {
7678
return state;
7779
}
7880

81+
handleAddCancel = () => {
82+
this.setState({ addVisible: false });
83+
};
84+
85+
handleAddSubmit = item => {
86+
const tplData = [
87+
{
88+
code: 'query',
89+
name: `查询${item.name}`,
90+
method: 'GET',
91+
path: item.router,
92+
},
93+
{
94+
code: 'get',
95+
name: `精确查询${item.name}`,
96+
method: 'GET',
97+
path: `${item.router}/:id`,
98+
},
99+
{
100+
code: 'create',
101+
name: `创建${item.name}`,
102+
method: 'POST',
103+
path: item.router,
104+
},
105+
{
106+
code: 'update',
107+
name: `更新${item.name}`,
108+
method: 'PUT',
109+
path: `${item.router}/:id`,
110+
},
111+
{
112+
code: 'delete',
113+
name: `删除${item.name}`,
114+
method: 'DELETE',
115+
path: `${item.router}/:id`,
116+
},
117+
];
118+
119+
const newData = tplData.map(v => ({ key: v.code, ...v }));
120+
121+
const { dataSource } = this.state;
122+
const data = [...dataSource];
123+
for (let i = 0; i < newData.length; i += 1) {
124+
let exists = false;
125+
for (let j = 0; j < dataSource.length; j += 1) {
126+
if (dataSource[j].key === newData[i].key) {
127+
exists = true;
128+
break;
129+
}
130+
}
131+
if (!exists) {
132+
data.push(newData[i]);
133+
}
134+
}
135+
136+
this.setState(
137+
{
138+
dataSource: data,
139+
},
140+
() => {
141+
this.triggerChange(data);
142+
}
143+
);
144+
145+
this.handleAddCancel();
146+
};
147+
79148
handleDelete = key => {
80149
const { dataSource } = this.state;
81150
const data = dataSource.filter(item => item.key !== key);
@@ -84,6 +153,10 @@ export default class MenuAction extends PureComponent {
84153
});
85154
};
86155

156+
handleAddTpl = () => {
157+
this.setState({ addVisible: true });
158+
};
159+
87160
handleAdd = () => {
88161
const { dataSource } = this.state;
89162
const item = {
@@ -127,7 +200,7 @@ export default class MenuAction extends PureComponent {
127200
};
128201

129202
render() {
130-
const { dataSource } = this.state;
203+
const { dataSource, addVisible } = this.state;
131204
const components = {
132205
body: {
133206
row: EditableFormRow,
@@ -155,6 +228,9 @@ export default class MenuAction extends PureComponent {
155228
<Button onClick={this.handleAdd} size="small" type="primary">
156229
新增
157230
</Button>
231+
<Button onClick={this.handleAddTpl} size="small" type="primary">
232+
使用模板
233+
</Button>
158234
</div>
159235
<Table
160236
components={components}
@@ -163,6 +239,11 @@ export default class MenuAction extends PureComponent {
163239
columns={columns}
164240
pagination={false}
165241
/>
242+
<AddDialog
243+
visible={addVisible}
244+
onCancel={this.handleAddCancel}
245+
onSubmit={this.handleAddSubmit}
246+
/>
166247
</div>
167248
);
168249
}

0 commit comments

Comments
 (0)