temp

src/components/management/UserManage.tsx

@@ -0,0 +1,127 @@
+/**
+ * Created by hao.cheng on 2017/4/16.
+ */
+import React from 'react';
+import { Table, Input, Button } from 'antd';
+import { SmileOutlined } from '@ant-design/icons';
+import { trailwayDelUser, trailwayListUsers } from '../../service';
+
+class UserManage extends React.Component {
+    state = {
+        filterDropdownVisible: false,
+        data: [],
+        searchText: '',
+        filtered: false,
+    };
+    searchInput: any;
+
+    componentDidMount() {
+        this.refreshUser();
+    }
+
+    onInputChange = (e: any) => {
+        this.setState({ searchText: e.target.value });
+    };
+    onSearch = () => {
+        // const { searchText } = this.state;
+        // const reg = new RegExp(searchText, 'gi');
+        // this.setState({
+        //     filterDropdownVisible: false,
+        //     filtered: !!searchText,
+        //     data: data
+        //         .map((record) => {
+        //             const match = record.name.match(reg);
+        //             if (!match) {
+        //                 return null;
+        //             }
+        //             return {
+        //                 ...record,
+        //                 name: (
+        //                     <span>
+        //                         {record.name
+        //                             .split(reg)
+        //                             .map((text, i) =>
+        //                                 i > 0
+        //                                     ? [<span className="highlight">{match[0]}</span>, text]
+        //                                     : text
+        //                             )}
+        //                     </span>
+        //                 ),
+        //             };
+        //         })
+        //         .filter((record) => !!record),
+        // });
+    };
+    refreshUser = () => {
+        trailwayListUsers().then((res) => {
+            this.setState({
+                data: res.data,
+            });
+        });
+    };
+    handleDel = (id: Number) => {
+        trailwayDelUser(id);
+        this.refreshUser();
+    };
+    render() {
+        const columns = [
+            {
+                title: 'ID',
+                dataIndex: 'id',
+                key: 'id',
+                sorter: (a: any, b: any) => a.id - b.id,
+            },
+            {
+                title: '用户名',
+                dataIndex: 'username',
+                key: 'username',
+            },
+            {
+                title: '管理员',
+                dataIndex: 'role',
+                key: 'role',
+                render: (role: any) => (role === 1 ? '是' : '否'),
+            },
+            {
+                title: '操作',
+                render: (record: any) => (
+                    <div>
+                        <Button type="primary" size="small">
+                            编辑
+                        </Button>
+                        <Button
+                            type="primary"
+                            size="small"
+                            onClick={() => this.handleDel(record.id)}
+                        >
+                            删除
+                        </Button>
+                    </div>
+                ),
+            },
+        ];
+        return (
+            <div>
+                <Button type="primary">增加用户</Button>
+                <Table columns={columns} dataSource={this.state.data} />
+                <style>{`
+                    .custom-filter-dropdown {
+                      padding: 8px;
+                      border-radius: 6px;
+                      background: #fff;
+                      box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
+                    }
+                    .custom-filter-dropdown input {
+                      width: 130px;
+                      margin-right: 8px;
+                    }
+                    .highlight {
+                      color: #f50;
+                    }
+                `}</style>
+            </div>
+        );
+    }
+}
+
+export default UserManage;