增加子表格嵌套 #27

Jsharkc · Oct 21, 2017 · f74c1a6 · f74c1a6
1 parent b383bb0
commit f74c1a6
Show file tree

Hide file tree

Showing 8 changed files with 320 additions and 13 deletions.
diff --git a/AdminUI/src/models/manageUser.js b/AdminUI/src/models/manageUser.js
@@ -3,16 +3,95 @@
  *     Initial: 2017/10/22        Wang RiYu
  */
 
+import { message } from 'antd';
+
 export default {
   namespace: 'manageUser',
 
   state: {
+    dataSource: [{
+      id: 1,
+      name: 'hawayi',
+      phone: '18902387438',
+      record: 5,
+    }, {
+      id: 2,
+      name: 'john',
+      phone: '17893204389',
+      record: 6
+    }, {
+      id: 3,
+      name: 'jack',
+      phone: '12938934893',
+      record: 8
+    }],
+    expandedData: [{
+      id: 1,
+      content: 'sdkjnskdjfsdfsdf',
+      time: '2017-09-23 13:45'
+    }],
+    expandedRowKey: []
+  },
+
+  subscriptions: {
+    setup ({ dispatch, history }) {
+      history.listen(location => {
+        if (location.pathname === '/manageUser') {
+          dispatch({
+            type: 'query',
+            payload: location.query,
+          })
+        }
+      })
+    }
   },
 
   effects: {
+    * query ({ payload }, { call, put }) {
+      // const res = yield call(queryTableOrder, {})
+      //
+      // if (res.status === 0) {
+      //   yield put({
+      //     type: 'querySuccess',
+      //     payload: {
+      //       list: res.resp,
+      //     }
+      //   })
+      // } else {
+      //   message.error(Strings.Common.QueryFailed)
+      // }
+    },
 
+    * getExpandedData ({ payload }, { call, put }) {
+      // const res = yield call(querySubPetList, { speciesId: payload })
+
+      if (res.status === 0) {
+        yield put({
+          type: 'setExpandedData',
+          payload: {
+            data: res.resp
+          }
+        })
+      } else {
+        message.error('数据获取失败')
+      }
+    },
   },
 
   reducers: {
+    querySuccess (state, action) {
+      const { dataSource } = action.payload
+      return {
+        ...state,
+        dataSource
+      }
+    },
+
+    changeExpandedRow (state, action) {
+      return {
+        ...state,
+        expandedRowKey: action.payload
+      }
+    }
   }
 }
diff --git a/AdminUI/src/routes/manageUser/expandedTable.js b/AdminUI/src/routes/manageUser/expandedTable.js
@@ -0,0 +1,65 @@
+/*
+ * Revision History:
+ *     Initial: 2017/10/22        Wang RiYu
+ */
+
+import React          from 'react'
+import PropTypes      from 'prop-types'
+import Styles         from './index.less'
+import {
+  Table,
+}                     from 'antd'
+
+const expandedTable = ({ data }) => {
+  const columns = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      width: '20%',
+    }, {
+      title: '题目内容',
+      dataIndex: 'content',
+    }, {
+      title: '完成时间',
+      dataIndex: 'time',
+      width: '20%',
+    },
+  ]
+
+  const EmptyDiv = {
+    height: '66px',
+    lineHeight: '66px',
+    background: '#f5f2f9'
+  }
+
+  const pagination = {
+    defaultPageSize: 10,
+    showQuickJumper: true,
+    showTotal: total => `共 ${total} 条`,
+    defaultCurrent: 1,
+    total: null,
+  }
+
+  return (
+    <div>
+      {
+        data.length > 0
+          ? <Table
+              className={Styles.expandedTable}
+              columns={columns}
+              dataSource={data}
+              pagination={pagination}
+              bordered
+              rowKey={record => record.id}
+            />
+          : <div style={EmptyDiv}>此列表为空</div>
+      }
+    </div>
+  )
+}
+
+expandedTable.propTypes = {
+  data: PropTypes.array
+}
+
+export default expandedTable
diff --git a/AdminUI/src/routes/manageUser/index.js b/AdminUI/src/routes/manageUser/index.js
@@ -3,15 +3,59 @@
  *     Initial: 2017/10/22        Wang RiYu
  */
 
-import React    from 'react';
-import { Card } from 'antd';
+import React       from 'react';
+import { connect } from 'dva';
+import UserList    from './userList';
+import {
+  Card,
+  Modal,
+}                  from 'antd'
+
+const ManageUser = ({ manageUser, dispatch, loading }) => {
+  const {
+    dataSource,
+    expandedData,
+    expandedRowKey
+  } = manageUser
+
+  const UserListProps = {
+    dataSource,
+    loading,
+    expandedRowKey,
+    expandedData,
+    confirm (id) {
+      dispatch({
+        type: 'manageUser/confirmTable',
+        payload: id
+      })
+    },
+    release (id) {
+      dispatch({
+        type: 'manageUser/releaseTable',
+        payload: id
+      })
+    },
+    getExpandedData (id) {
+      dispatch({
+        type: 'manageUser/getExpandedData',
+        payload: id
+      })
+    },
+    RowKeysChange (keys) {
+      dispatch({
+        type: 'manageUser/changeExpandedRow',
+        payload: keys.slice(-1)
+      })
+    }
+  }
 
-const ManageUser = () => {
   return (
-    <Card>
-      manage user
+    <Card style={{minHeight: '600px'}}>
+      <UserList {...UserListProps} />
     </Card>
   )
 }
 
-export default ManageUser
+export default connect(
+  ({ manageUser, loading }) => ({ manageUser, loading: loading.models.manageUser })
+)(ManageUser)
diff --git a/AdminUI/src/routes/manageUser/index.less b/AdminUI/src/routes/manageUser/index.less
@@ -0,0 +1,3 @@
+.expandedTable {
+  background: #ffffff;
+}
diff --git a/AdminUI/src/routes/manageUser/userList.js b/AdminUI/src/routes/manageUser/userList.js
@@ -0,0 +1,77 @@
+/*
+ * Revision History:
+ *     Initial: 2017/10/22        Wang RiYu
+ */
+
+import React         from 'react'
+import ExpandedTable from './expandedTable'
+import {
+  Table,
+  Button
+}                    from 'antd';
+
+const list = ({
+  loading,
+  dataSource,
+  expandedData,
+  confirm,
+  release,
+  expandedRowKey,
+  getExpandedData,
+  RowKeysChange,
+}) => {
+  const columns = [{
+    title: 'ID',
+    dataIndex: 'id',
+  }, {
+    title: '用户名',
+    dataIndex: 'name',
+  }, {
+    title: '刷题记录',
+    dataIndex: 'record',
+  }, {
+    title: '操作',
+    dataIndex: 'operation',
+    width: '100px',
+    render: (text, record) => (
+      <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
+        <Button style={{width: '100px'}}>管理</Button>
+      </div>
+    )
+  }]
+
+  const pagination = {
+    defaultPageSize: 10,
+    showQuickJumper: true,
+    showTotal: total => `共 ${total} 条`,
+    defaultCurrent: 1,
+    total: null,
+  }
+
+  const expandedTableProps = {
+    data: expandedData,
+  }
+
+  const onExpandedTable = (expanded, record) => {
+    getExpandedData(record.id)
+  }
+
+  return (
+    <Table
+      simple
+      bordered
+      // loading={loading}
+      pagination={pagination}
+      dataSource={dataSource}
+      columns={columns}
+      rowKey={record => record.id}
+      footer={() => <div style={{textAlign: 'center'}}>用户管理</div>}
+      expandedRowRender={() => <ExpandedTable {...expandedTableProps} />}
+      onExpand={onExpandedTable}
+      expandedRowKeys={expandedRowKey}
+      onExpandedRowsChange={(key) => RowKeysChange(key)}
+    />
+  )
+}
+
+export default list
diff --git a/AdminUI/src/themes/default.less b/AdminUI/src/themes/default.less
@@ -5,3 +5,31 @@
 @transition-ease-out: all 0.3s ease-out;
 @shadow-1: 4px 4px 20px 0 rgba(0, 0, 0, 0.01);
 @shadow-2: 4px 4px 40px 0 rgba(0, 0, 0, 0.05);
+
+:global {
+  .ant-table {
+    .ant-table-thead > tr > th {
+      text-align: center;
+    }
+
+    .ant-table-tbody > tr > td {
+      text-align: center;
+    }
+
+    &.ant-table-small {
+      .ant-table-thead > tr > th {
+        background: #f7f7f7;
+      }
+
+      .ant-table-body > table {
+        padding: 0;
+      }
+    }
+  }
+
+  .ant-table-pagination {
+    float: none!important;
+    display: table;
+    margin: 16px auto !important;
+  }
+}
diff --git a/UserUI/src/routes/login/index.js b/UserUI/src/routes/login/index.js
@@ -53,9 +53,9 @@ const Login = ({ login, dispatch, form: { getFieldDecorator, validateFieldsAndSc
   return (
     <div className={Styles.form}>
       <Canvas />
-      <span style={{color: '#383838', position: 'relative', fontSize: '25px'}}>TechTree</span>
+      <span className={Styles.title}>TechTree</span>
       <Spin spinning={loginLoading} size='large'>
-        <form>
+        <Form className={Styles.Box}>
           <FormItem hasFeedback>
             {
               getFieldDecorator('name', {
@@ -113,7 +113,7 @@ const Login = ({ login, dispatch, form: { getFieldDecorator, validateFieldsAndSc
               </Button>
             </Col>
           </Row>
-        </form>
+        </Form>
       </Spin>
       <Register {...RegisterProps} />
     </div>

diff --git a/UserUI/src/routes/login/index.less b/UserUI/src/routes/login/index.less
@@ -1,12 +1,23 @@
 .form {
   position: absolute;
-  top: 40%;
+  top: 48%;
   left: 50%;
-  margin: -160px 0 0 -160px;
-  width: 320px;
+  margin: -240px 0 0 -240px;
+  width: 480px;
   height: 220px;
   padding: 36px;
-  box-shadow: 0 0 10px rgba(255, 255, 255, .2);
+
+  .title {
+    color: #383838;
+    position: relative;
+    font-size: 25px;
+  }
+
+  .Box {
+    background-color: rgba(220, 220, 220, .5);
+    padding: 24px 48px 24px 48px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+  }
 
   button {
     width: 100%;