Skip to content

Commit a49336e

Browse files
noyobonoyobo
authored
feat: add blocks (alibaba#655)
1 parent a655152 commit a49336e

36 files changed

+1495
-0
lines changed

‎react-materials/blocks/AuthorityTable/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# authority-table
2+
3+
简介：权限管理表格
4+
5+
权限管理类的表格
6+
7+
![截图](https://img.alicdn.com/tfs/TB1Og2vzbGYBuNjy0FoXXciBFXa-2870-1444.png)

‎react-materials/blocks/AuthorityTable/package.json‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "@icedesign/authority-table-block",
3+
"version": "1.0.0",
4+
"description": "权限管理类的表格",
5+
"author": {
6+
"name": "ICE Team",
7+
"email": "[email protected]"
8+
},
9+
"files": [
10+
"src/",
11+
"lib/"
12+
],
13+
"repository": {
14+
"type": "git",
15+
"url": "https://github.com/alibaba/ice"
16+
},
17+
"license": "MIT",
18+
"keywords": [
19+
"ice",
20+
"react",
21+
"block"
22+
],
23+
"publishConfig": {
24+
"access": "public",
25+
"registry": "http://registry.npmjs.com"
26+
},
27+
"dependencies": {
28+
"@icedesign/base": "^0.2.2",
29+
"@icedesign/container": "^0.1.2"
30+
},
31+
"peerDependencies": {
32+
"react": "^16.2.0",
33+
"prop-types": "^15.5.8"
34+
},
35+
"blockConfig": {
36+
"name": "authority-table",
37+
"title": "权限管理表格",
38+
"categories": [
39+
"表格"
40+
],
41+
"screenshot": "https://img.alicdn.com/tfs/TB1Og2vzbGYBuNjy0FoXXciBFXa-2870-1444.png"
42+
}
43+
}

‎react-materials/blocks/AuthorityTable/src/AuthorityTable.jsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { Component } from 'react';
2+
import TableFilter from './TableFilter';
3+
import CustomTable from './CustomTable';
4+
5+
export default class AuthorityTable extends Component {
6+
static displayName = 'AuthorityTable';
7+
8+
static propTypes = {};
9+
10+
static defaultProps = {};
11+
12+
constructor(props) {
13+
super(props);
14+
this.state = {};
15+
}
16+
17+
render() {
18+
return (
19+
<div style={styles.container}>
20+
<TableFilter />
21+
<CustomTable />
22+
</div>
23+
);
24+
}
25+
}
26+
27+
const styles = {};

‎react-materials/blocks/AuthorityTable/src/CustomTable.jsx‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
import React, { Component } from 'react';
2+
import { Table, Pagination, Balloon, Icon } from '@icedesign/base';
3+
4+
const getData = () => {
5+
return Array.from({ length: 10 }).map((item, index) => {
6+
return {
7+
id: index + 1,
8+
orderID: `12022123${index}`,
9+
name: '张一峰',
10+
title: '主治医师',
11+
date: `2018-06-${index + 1}`,
12+
endDate: `2018-06-${index + 1}`,
13+
validData: `2018-06-${index + 1}`,
14+
category: '皮肤科',
15+
state: '已审核',
16+
approver: '刘建明',
17+
approvalData: `2018-06-${index + 1}`,
18+
};
19+
});
20+
};
21+
22+
export default class Home extends Component {
23+
static displayName = 'Home';
24+
25+
constructor(props) {
26+
super(props);
27+
this.state = {
28+
current: 1,
29+
dataSource: getData(),
30+
};
31+
}
32+
33+
handlePagination = (current) => {
34+
this.setState({
35+
current,
36+
});
37+
};
38+
39+
handleSort = (dataIndex, order) => {
40+
const dataSource = this.state.dataSource.sort((a, b) => {
41+
const result = a[dataIndex] - b[dataIndex];
42+
if (order === 'asc') {
43+
return result > 0 ? 1 : -1;
44+
}
45+
return result > 0 ? -1 : 1;
46+
});
47+
48+
this.setState({
49+
dataSource,
50+
});
51+
};
52+
53+
renderCatrgory = (value) => {
54+
return (
55+
<Balloon
56+
align="lt"
57+
trigger={<div style={{ margin: '5px' }}>{value}</div>}
58+
closable={false}
59+
style={{ lineHeight: '24px' }}
60+
>
61+
皮肤科属于外科，主要治疗各种皮肤病，常见皮肤病有牛皮癣 、 疱疹
62+
、酒渣鼻等
63+
</Balloon>
64+
);
65+
};
66+
67+
renderState = (value) => {
68+
return (
69+
<div style={styles.state}>
70+
<span style={styles.circle} />
71+
<span style={styles.stateText}>{value}</span>
72+
</div>
73+
);
74+
};
75+
76+
renderOper = () => {
77+
return (
78+
<div style={styles.oper}>
79+
<Icon type="edit" size="small" style={styles.editIcon} />
80+
</div>
81+
);
82+
};
83+
84+
render() {
85+
const { dataSource } = this.state;
86+
return (
87+
<div style={styles.tableContainer}>
88+
<Table
89+
dataSource={dataSource}
90+
onSort={this.handleSort}
91+
hasBorder={false}
92+
className="custom-table"
93+
>
94+
<Table.Column
95+
width={100}
96+
lock="left"
97+
title="序列号"
98+
dataIndex="id"
99+
sortable
100+
align="center"
101+
/>
102+
<Table.Column width={100} title="单号" dataIndex="orderID" sortable />
103+
<Table.Column width={100} title="名称" dataIndex="name" />
104+
<Table.Column width={100} title="职称" dataIndex="title" />
105+
<Table.Column width={200} title="入职日期" dataIndex="date" />
106+
<Table.Column width={200} title="实习结束日期" dataIndex="endDate" />
107+
<Table.Column
108+
width={200}
109+
title="转正生效日期"
110+
dataIndex="validData"
111+
/>
112+
<Table.Column
113+
width={200}
114+
title="科室"
115+
dataIndex="category"
116+
cell={this.renderCatrgory}
117+
/>
118+
<Table.Column
119+
width={200}
120+
title="状态"
121+
dataIndex="state"
122+
cell={this.renderState}
123+
/>
124+
<Table.Column width={200} title="审核人" dataIndex="approver" />
125+
<Table.Column width={200} title="审核日期" dataIndex="approvalData" />
126+
<Table.Column
127+
width={100}
128+
title="操作"
129+
cell={this.renderOper}
130+
lock="right"
131+
align="center"
132+
/>
133+
</Table>
134+
<Pagination
135+
style={styles.pagination}
136+
current={this.state.current}
137+
onChange={this.handlePagination}
138+
/>
139+
</div>
140+
);
141+
}
142+
}
143+
144+
const styles = {
145+
tableContainer: {
146+
background: '#fff',
147+
paddingBottom: '10px',
148+
},
149+
pagination: {
150+
margin: '20px 0',
151+
textAlign: 'center',
152+
},
153+
editIcon: {
154+
color: '#999',
155+
cursor: 'pointer',
156+
},
157+
circle: {
158+
display: 'inline-block',
159+
background: '#28a745',
160+
width: '8px',
161+
height: '8px',
162+
borderRadius: '50px',
163+
marginRight: '4px',
164+
},
165+
stateText: {
166+
color: '#28a745',
167+
},
168+
};

‎react-materials/blocks/AuthorityTable/src/TableFilter.jsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React, { Component } from 'react';
2+
import { Button, Input, Select } from '@icedesign/base';
3+
4+
export default class TableFilter extends Component {
5+
static displayName = 'TableFilter';
6+
7+
constructor(props) {
8+
super(props);
9+
this.state = {};
10+
}
11+
12+
render() {
13+
return (
14+
<div style={styles.tableFilter}>
15+
<div style={styles.title}>权限管理</div>
16+
<div style={styles.filter}>
17+
<div style={styles.filterItem}>
18+
<span style={styles.filterLabel}>名称：</span>
19+
<Input />
20+
</div>
21+
<div style={styles.filterItem}>
22+
<span style={styles.filterLabel}>角色：</span>
23+
<Select style={{ width: '200px' }}>
24+
<Select.Option value="all">全部</Select.Option>
25+
<Select.Option value="admin">管理员</Select.Option>
26+
<Select.Option value="dbo">运营</Select.Option>
27+
</Select>
28+
</div>
29+
<div style={styles.filterItem}>
30+
<span style={styles.filterLabel}>状态：</span>
31+
<Select style={{ width: '200px' }}>
32+
<Select.Option value="all">全部</Select.Option>
33+
<Select.Option value="checked">已审核</Select.Option>
34+
<Select.Option value="unCheck">未审核</Select.Option>
35+
</Select>
36+
</div>
37+
<Button type="primary" style={styles.submitButton}>
38+
查询
39+
</Button>
40+
</div>
41+
</div>
42+
);
43+
}
44+
}
45+
46+
const styles = {
47+
tableFilter: {
48+
display: 'flex',
49+
alignItems: 'center',
50+
justifyContent: 'space-between',
51+
padding: '20px',
52+
marginBottom: '20px',
53+
background: '#fff',
54+
},
55+
title: {
56+
height: '20px',
57+
lineHeight: '20px',
58+
color: '#333',
59+
fontSize: '18px',
60+
fontWeight: 'bold',
61+
paddingLeft: '12px',
62+
borderLeft: '4px solid #666',
63+
},
64+
filter: {
65+
display: 'flex',
66+
},
67+
filterItem: {
68+
display: 'flex',
69+
alignItems: 'center',
70+
marginLeft: '20px',
71+
},
72+
filterLabel: {
73+
fontWeight: '500',
74+
color: '#999',
75+
},
76+
submitButton: {
77+
marginLeft: '20px',
78+
},
79+
};

‎react-materials/blocks/AuthorityTable/src/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import AuthorityTable from './AuthorityTable';
2+
3+
export default AuthorityTable;

‎react-materials/blocks/ContentList/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# content-list
2+
3+
简介：内容列表
4+
5+
筛选和列表组合
6+
7+
![截图](https://img.alicdn.com/tfs/TB1bAzvzeSSBuNjy0FlXXbBpVXa-2548-1428.png)

‎react-materials/blocks/ContentList/package.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "@icedesign/content-list-block",
3+
"version": "1.0.0",
4+
"description": "筛选和列表组合",
5+
"author": {
6+
"name": "ICE Team",
7+
"email": "[email protected]"
8+
},
9+
"files": [
10+
"src/",
11+
"lib/"
12+
],
13+
"repository": {
14+
"type": "git",
15+
"url": "https://github.com/alibaba/ice"
16+
},
17+
"license": "MIT",
18+
"keywords": [
19+
"ice",
20+
"react",
21+
"block"
22+
],
23+
"publishConfig": {
24+
"access": "public",
25+
"registry": "http://registry.npmjs.com"
26+
},
27+
"dependencies": {
28+
"@icedesign/base": "^0.2.2",
29+
"@icedesign/container": "^0.1.2"
30+
},
31+
"peerDependencies": {
32+
"react": "^16.2.0",
33+
"prop-types": "^15.5.8"
34+
},
35+
"blockConfig": {
36+
"name": "content-list",
37+
"title": "内容列表",
38+
"categories": [
39+
"列表",
40+
"数据展示"
41+
],
42+
"screenshot": "https://img.alicdn.com/tfs/TB1bAzvzeSSBuNjy0FlXXbBpVXa-2548-1428.png"
43+
}
44+
}

0 commit comments

Comments
 (0)