Skip to content

Commit 6d970d4

Browse files
felixpyfelixpy
committed
core: add application list page
1 parent 398b9be commit 6d970d4

File tree

16 files changed

+442
-1090
lines changed

16 files changed

+442
-1090
lines changed

‎config/config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,13 @@ export default {
9999
},
100100

101101
chainWebpack: webpackPlugin,
102+
proxy: {
103+
'/api': {
104+
target: 'http://localhost:7001/api/',
105+
changeOrigin: true,
106+
pathRewrite: { '^/api': '' },
107+
},
108+
},
102109
cssnano: {
103110
mergeRules: false,
104111
},

‎config/router.config.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,17 @@ export default [
2929
name: 'analysis',
3030
component: './Dashboard/Analysis',
3131
},
32+
],
33+
},
34+
{
35+
path: '/app',
36+
name: 'app',
37+
icon: 'crown',
38+
routes: [
3239
{
33-
path: '/dashboard/monitor',
34-
name: 'monitor',
35-
component: './Dashboard/Monitor',
36-
},
37-
{
38-
path: '/dashboard/workplace',
39-
name: 'workplace',
40-
component: './Dashboard/Workplace',
40+
path: '/app/list',
41+
name: 'list',
42+
component: './App/AppList',
4143
},
4244
],
4345
},

‎src/components/StandardQueryList/index.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, { PureComponent } from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import styles from './index.less';
5+
6+
class StandardQueryList extends PureComponent {
7+
render() {
8+
const { form, leftOperators, rightOperators, table } = this.props;
9+
10+
return (
11+
<div className={styles.tableList}>
12+
<div className={styles.tableListForm}>{form}</div>
13+
{(rightOperators || leftOperators) && (
14+
<div className={styles.tableListOperator}>
15+
<div className={styles.tableListOperatorLeft}>{leftOperators}</div>
16+
<div className={styles.tableListOperatorRight}>{rightOperators}</div>
17+
</div>
18+
)}
19+
{table}
20+
</div>
21+
);
22+
}
23+
}
24+
25+
StandardQueryList.defaultProps = {
26+
leftOperators: null,
27+
rightOperators: null,
28+
};
29+
30+
StandardQueryList.propTypes = {
31+
form: PropTypes.element.isRequired,
32+
table: PropTypes.element.isRequired,
33+
leftOperators: PropTypes.element,
34+
rightOperators: PropTypes.element,
35+
};
36+
37+
export default StandardQueryList;

‎src/components/StandardQueryList/index.less‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
@import '~antd/lib/style/themes/default.less';
2+
@import '~@/utils/utils.less';
3+
4+
.tableList {
5+
.tableListOperator {
6+
display: flex;
7+
margin-bottom: 16px;
8+
.tableListOperatorLeft {
9+
button {
10+
margin-right: 8px;
11+
}
12+
}
13+
.tableListOperatorRight {
14+
margin-left: auto;
15+
button {
16+
margin-left: 8px;
17+
}
18+
}
19+
}
20+
}
21+
22+
.tableListForm {
23+
:global {
24+
.ant-form-item {
25+
margin-bottom: 24px;
26+
margin-right: 0;
27+
display: flex;
28+
> .ant-form-item-label {
29+
width: auto;
30+
line-height: 32px;
31+
padding-right: 8px;
32+
}
33+
.ant-form-item-control {
34+
line-height: 32px;
35+
}
36+
}
37+
.ant-form-item-control-wrapper {
38+
flex: 1;
39+
}
40+
}
41+
.submitButtons {
42+
display: block;
43+
white-space: nowrap;
44+
margin-bottom: 24px;
45+
}
46+
}
47+
48+
@media screen and (max-width: @screen-lg) {
49+
.tableListForm :global(.ant-form-item) {
50+
margin-right: 24px;
51+
}
52+
}
53+
54+
@media screen and (max-width: @screen-md) {
55+
.tableListForm :global(.ant-form-item) {
56+
margin-right: 8px;
57+
}
58+
}

‎src/components/StandardTable/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ class StandardTable extends PureComponent {
7171
} = this.props;
7272

7373
const paginationProps = {
74+
showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} Total Items`,
7475
showSizeChanger: true,
7576
showQuickJumper: true,
7677
...pagination,

‎src/locales/zh-CN.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,10 @@ export default {
102102
'menu.account.settings': '个人设置',
103103
'menu.account.trigger': '触发报错',
104104
'menu.account.logout': '退出登录',
105+
106+
'menu.app': '应用方',
107+
'menu.app.list': '应用方列表',
108+
105109
'app.login.message-invalid-credentials': '账户或密码错误（admin/888888）',
106110
'app.login.message-invalid-verification-code': '验证码错误',
107111
'app.login.tab-login-credentials': '账户密码登录',

‎src/pages/App/AppList.js‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
import React, { PureComponent, Fragment } from 'react';
2+
import { connect } from 'dva';
3+
import { Card, Form, Input, Button, Row, Col } from 'antd';
4+
import StandardTable from '@/components/StandardTable';
5+
import StandardQueryList from '@/components/StandardQueryList';
6+
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
7+
import { formatFormValues, serializeSearchParam } from '@/utils/search';
8+
9+
// import styles from './AppList.less';
10+
11+
const FormItem = Form.Item;
12+
13+
@connect(({ app, loading }) => ({
14+
app,
15+
loading: loading.models.app,
16+
}))
17+
@Form.create()
18+
class AppList extends PureComponent {
19+
state = {
20+
selectedRows: [],
21+
formValues: {},
22+
};
23+
24+
columns = [
25+
{
26+
title: 'ID',
27+
dataIndex: 'id',
28+
sorter: true,
29+
},
30+
{
31+
title: 'Code',
32+
dataIndex: 'code',
33+
},
34+
{
35+
title: '名称',
36+
dataIndex: 'name',
37+
},
38+
{
39+
title: '操作',
40+
render: (text, row) => (
41+
<Fragment>
42+
<a onClick={() => this.handleDeleteApp(true, row)}>删除</a>
43+
</Fragment>
44+
),
45+
},
46+
];
47+
48+
componentDidMount() {
49+
const { dispatch } = this.props;
50+
51+
dispatch({
52+
type: 'app/search',
53+
});
54+
}
55+
56+
handleDeleteApp() {
57+
const { dispatch } = this.props;
58+
59+
dispatch({
60+
type: 'app/delete',
61+
});
62+
}
63+
64+
handleSelectRows(rows) {
65+
this.setState({
66+
selectedRows: rows || [],
67+
});
68+
}
69+
70+
handleStandardTableChange(pagination, filters, sorter) {
71+
const { dispatch } = this.props;
72+
const { formValues } = this.state;
73+
74+
const params = serializeSearchParam(pagination, formValues, filters, sorter);
75+
76+
dispatch({
77+
type: 'app/search',
78+
payload: params,
79+
});
80+
}
81+
82+
handleFormReset() {
83+
const { form, dispatch } = this.props;
84+
form.resetFields();
85+
this.setState({
86+
formValues: {},
87+
});
88+
dispatch({
89+
type: 'app/search',
90+
payload: {},
91+
});
92+
}
93+
94+
handleSearch() {
95+
const { dispatch, form } = this.props;
96+
97+
form.validateFields((err, fieldsValue) => {
98+
if (err) return;
99+
100+
const values = formatFormValues(fieldsValue);
101+
102+
this.setState({
103+
formValues: values,
104+
});
105+
106+
dispatch({
107+
type: 'app/search',
108+
payload: {
109+
filter: JSON.stringify(values),
110+
},
111+
});
112+
});
113+
}
114+
115+
renderQueryForm() {
116+
const {
117+
form: { getFieldDecorator },
118+
} = this.props;
119+
120+
return (
121+
<Form layout="inline">
122+
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
123+
<Col md={8} sm={24}>
124+
<FormItem label="应用方 ID">
125+
{getFieldDecorator('EQ_id')(<Input placeholder="请输入 ID" />)}
126+
</FormItem>
127+
</Col>
128+
<Col md={8} sm={24}>
129+
<FormItem label="应用方 Code">
130+
{getFieldDecorator('EQ_code')(<Input placeholder="请输入 Code，精确查询" />)}
131+
</FormItem>
132+
</Col>
133+
<Col md={8} sm={24}>
134+
<FormItem label="应用方名称">
135+
{getFieldDecorator('LIKE_name')(<Input placeholder="请输入名称，支持模糊查询" />)}
136+
</FormItem>
137+
</Col>
138+
</Row>
139+
</Form>
140+
);
141+
}
142+
143+
render() {
144+
const {
145+
app: { data },
146+
loading,
147+
} = this.props;
148+
const { selectedRows } = this.state;
149+
150+
return (
151+
<PageHeaderWrapper
152+
title="应用方列表"
153+
content="使用鉴权系统的相关系统，所有的资源、角色和分组都必须属于某个应用方。"
154+
>
155+
<Card bordered={false}>
156+
<StandardQueryList
157+
form={this.renderQueryForm()}
158+
leftOperators={
159+
<Fragment>
160+
<Button icon="plus" type="primary">
161+
新建
162+
</Button>
163+
{selectedRows.length > 0 && (
164+
<span>
165+
<Button>批量删除</Button>
166+
</span>
167+
)}
168+
</Fragment>
169+
}
170+
rightOperators={
171+
<Fragment>
172+
<Button icon="close" onClick={() => this.handleFormReset()}>
173+
重置
174+
</Button>
175+
<Button icon="search" type="primary" onClick={() => this.handleSearch()}>
176+
查询
177+
</Button>
178+
</Fragment>
179+
}
180+
table={
181+
<StandardTable
182+
selectedRows={selectedRows}
183+
loading={loading}
184+
data={data}
185+
rowKey="id"
186+
columns={this.columns}
187+
onSelectRow={rows => this.handleSelectRows(rows)}
188+
onChange={(...args) => this.handleStandardTableChange(...args)}
189+
/>
190+
}
191+
/>
192+
</Card>
193+
</PageHeaderWrapper>
194+
);
195+
}
196+
}
197+
198+
export default AppList;

‎src/pages/App/models/app.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { searchApp } from '@/services/app';
2+
3+
export default {
4+
namespace: 'app',
5+
6+
state: {
7+
data: [
8+
{
9+
list: [],
10+
pagination: {},
11+
},
12+
],
13+
},
14+
15+
effects: {
16+
*search({ payload }, { call, put }) {
17+
const response = yield call(searchApp, payload);
18+
yield put({
19+
type: 'save',
20+
payload: response,
21+
});
22+
},
23+
},
24+
25+
reducers: {
26+
save(state, action) {
27+
return {
28+
...state,
29+
data: action.payload.data,
30+
};
31+
},
32+
},
33+
};

0 commit comments

Comments
 (0)