first demo

.roadhogrc.mock.js

@@ -8,6 +8,8 @@ import { getProfileAdvancedData } from './mock/profile';
 import { getNotices } from './mock/notices';
 import { format, delay } from 'roadhog-api-doc';
 
+import { getSchoolLists } from './mock/schoollist'
+
 // 是否禁用代理
 const noProxy = process.env.NO_PROXY === 'true';
 
@@ -96,6 +98,7 @@ const proxy = {
     res.send({ status: 'ok', currentAuthority: 'user' });
   },
   'GET /api/notices': getNotices,
+  'GET /api/ywpt/schoolist': getSchoolLists,
   'GET /api/500': (req, res) => {
     res.status(500).send({
       "timestamp": 1513932555104,

mock/schoollist.js

+import { getUrlParams } from './utils';
+
+export function schoolList(count) {
+  const list = [];
+  for (let i = 0; i < count; i += 1) {
+    list.push({
+      key: i,
+      id: `fake-list-${i}`,
+      name:`学校名字-${i}`,
+      corp:`企业号代码${i}`,
+      avatar:'XXX',
+      updatedAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2 * i)),
+      createdAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2 * i)),
+    });
+  }
+  return list;
+}
+
+
+export function getSchoolLists(req, res, u) {
+    let url = u;
+    if (!url || Object.prototype.toString.call(url) !== '[object String]') {
+      url = req.url; // eslint-disable-line
+    }
+  
+    const params = getUrlParams(url);
+  
+    const count = (params.pageSize * 1) || 20;
+  
+    const result = schoolList(count);
+  
+    if (res && res.json) {
+      res.json(result);
+    } else {
+      return result;
+    }
+  }
\ No newline at end of file

src/common/menu.js

@@ -30,6 +30,7 @@ const menuData = [{
     authority: 'admin',
     path: 'advanced-form',
   }],
+  hideInMenu: true,
 }, {
   name: '列表页',
   icon: 'table',
@@ -69,6 +70,7 @@ const menuData = [{
     path: 'advanced',
     authority: 'admin',
   }],
+  hideInMenu: true,
 }, {
   name: '结果页',
   icon: 'check-circle-o',
@@ -80,6 +82,7 @@ const menuData = [{
     name: '失败',
     path: 'fail',
   }],
+  hideInMenu: true,
 }, {
   name: '异常页',
   icon: 'warning',
@@ -98,6 +101,7 @@ const menuData = [{
     path: 'trigger',
     hideInMenu: true,
   }],
+  hideInMenu: true,
 }, {
   name: '账户',
   icon: 'user',
@@ -113,11 +117,23 @@ const menuData = [{
     name: '注册结果',
     path: 'register-result',
   }],
-}, {
+  hideInMenu: true,
+}, 
+{
+  name: '维护',
+  icon: 'table',
+  path: 'devutil',
+  children: [{
+    name: '企业号通讯录',
+    path: 'linkmanadm',
+  }],
+}
+,{
   name: '使用文档',
   icon: 'book',
   path: 'http://pro.ant.design/docs/getting-started',
   target: '_blank',
+  hideInMenu: true,
 }];
 
 function formatter(data, parentPath = '', parentAuthority) {

src/common/router.js

@@ -159,6 +159,9 @@ export const getRouterData = (app) => {
     '/user/register-result': {
       component: dynamicWrapper(app, [], () => import('../routes/User/RegisterResult')),
     },
+    '/devutil/linkmanadm': {
+      component: dynamicWrapper(app, ['schools'], () => import('../routes/devutil/linkmanadm2')),
+    },
     // '/user/:id': {
     //   component: dynamicWrapper(app, [], () => import('../routes/User/SomeComponent')),
     // },

src/components/StandardTableM/index.js

+import React, { PureComponent, Fragment } from 'react';
+import moment from 'moment';
+import { Table, Alert, Badge, Divider } from 'antd';
+import styles from './index.less';
+
+const statusMap = ['default', 'processing', 'success', 'error'];
+class StandardTable extends PureComponent {
+  state = {
+    selectedRowKeys: [],
+    totalCallNo: 0,
+  };
+
+  componentWillReceiveProps(nextProps) {
+    // clean state
+    if (nextProps.selectedRows.length === 0) {
+      this.setState({
+        selectedRowKeys: [],
+        totalCallNo: 0,
+      });
+    }
+  }
+
+  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
+    const totalCallNo = selectedRows.reduce((sum, val) => {
+      return sum + parseFloat(val.callNo, 10);
+    }, 0);
+
+    if (this.props.onSelectRow) {
+      this.props.onSelectRow(selectedRows);
+    }
+
+    this.setState({ selectedRowKeys, totalCallNo });
+  }
+
+  handleTableChange = (pagination, filters, sorter) => {
+    this.props.onChange(pagination, filters, sorter);
+  }
+
+  cleanSelectedKeys = () => {
+    this.handleRowSelectChange([], []);
+  }
+
+  render() {
+    const { selectedRowKeys } = this.state;
+    const { data,loading,columns } = this.props;
+
+    const pagination = 1;
+
+
+    const paginationProps = {
+      showSizeChanger: true,
+      showQuickJumper: true,
+      ...pagination,
+    };
+
+    const rowSelection = {
+      selectedRowKeys,
+      onChange: this.handleRowSelectChange,
+      getCheckboxProps: record => ({
+        disabled: record.disabled,
+      }),
+    };
+
+    return (
+      <div className={styles.standardTable}>
+        <div className={styles.tableAlert}>
+          <Alert
+            message={(
+              <div>
+                已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
+                <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>清空</a>
+              </div>
+            )}
+            type="info"
+            showIcon
+          />
+        </div>
+        <Table
+          loading={loading}
+          rowKey={record => record.key}
+          rowSelection={rowSelection}
+          dataSource={data}
+          columns={columns}
+          pagination={paginationProps}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+}
+
+export default StandardTable;

src/components/StandardTableM/index.less

+@import "~antd/lib/style/themes/default.less";
+
+.standardTable {
+  :global {
+    .ant-table-pagination {
+      margin-top: 24px;
+    }
+  }
+
+  .tableAlert {
+    margin-bottom: 16px;
+  }
+}

src/models/schools.js

+import { queryWXSchool } from '../services/devutil'
+
+export default {
+
+    namespace: 'schools',
+    state : {
+        list : [],
+    },
+
+    effects:{
+        *fetch({payload},{call,put}){
+            const response = yield call(queryWXSchool,payload);
+            yield put({
+                type : 'querySch',
+                payload: Array.isArray(response)?response:[],
+            });
+        },
+    },
+
+    reducers:{
+        querySch(state,action){
+            console.log('reducers');
+            return {
+                ...state,
+                list:action.payload,
+            };
+        },
+    },
+
+};  
\ No newline at end of file

src/routes/devutil/linkmanadm.js

+import React, { PureComponent } from 'react';
+import { connect } from 'dva';
+import { List,Avatar } from 'antd';
+import StandardTable from '../../components/StandardTable';
+import PageHeaderLayout from '../../layouts/PageHeaderLayout';
+
+import styles from './linkmanadm.less';
+
+const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
+
+@connect(({ schools, loading }) => ({
+  schools,
+  loading: loading.models.schools,
+  selectedRows: [],
+}))
+export default class SchList extends PureComponent {
+
+  componentDidMount(){
+    console.log('componentDidMount');
+    this.props.dispatch({
+      type: 'schools/fetch',
+      payload: {
+        page: 1,
+        pageSize : 5,
+      },
+    });
+  }
+
+
+  render(){
+
+      console.log('render()');
+      const { schools : {list},paginationProps,loading} = this.props;
+     
+      return <div>
+               <List
+                size="large"
+                rowKey="id"
+                loading={loading}
+                pagination={paginationProps}
+                dataSource={list}
+                renderItem={item => (
+                  <List.Item
+                    actions={[<a>查看</a>]} 
+                  >
+                  <div>{item.name}</div>
+                  <div>{item.corp}</div>
+                  <div>{item.createdAt}</div>
+                  </List.Item>
+                )}
+            />
+      </div>
+  }
+}
+

src/routes/devutil/linkmanadm.less

+@import "~antd/lib/style/themes/default.less";
+@import "../../utils/utils.less";
+
+.tableList {
+  .tableListOperator {
+    margin-bottom: 16px;
+    button {
+      margin-right: 8px;
+    }
+  }
+}
+
+
+
+
+.listContent{
+
+
+
+}
+
+
+.listContentItem{
+  
+}
\ No newline at end of file

src/routes/devutil/linkmanadm2.js

+import React, { PureComponent, Fragment  } from 'react';
+import { connect } from 'dva';
+import { Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu, InputNumber, DatePicker, Modal, message } from 'antd';
+import { Table, Alert, Badge, Divider } from 'antd';
+
+import StandardTable from '../../components/StandardTableM';
+import PageHeaderLayout from '../../layouts/PageHeaderLayout';
+
+import styles from './linkmanadm2.less';
+
+import moment from 'moment';
+
+const FormItem = Form.Item;
+const { Option } = Select;
+const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
+
+
+@connect(({ schools, loading }) => ({
+  schools,
+  loading: loading.models.schools,
+}))
+@Form.create()
+export default class linkmanadm extends PureComponent {
+  state = {
+    addInputValue: '',
+    selectedRows: [],
+    formValues: {},
+  };
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+
+    dispatch({
+      type: 'schools/fetch',
+    });
+  }
+
+  handleStandardTableChange = (pagination, filtersArg, sorter) => {
+
+  }
+
+  handleFormReset = () => {
+
+  }
+
+  toggleForm = () => {
+    this.setState({
+      expandForm: !this.state.expandForm,
+    });
+  }
+
+  handleMenuClick = (e) => {
+
+
+  }
+
+  handleSelectRows = (rows) => {
+
+  }
+
+  handleSearch = (e) => {
+
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      console.log(values);
+      
+      dispatch({
+        type: 'schools/fetch',
+        payload: values,
+      });
+    });
+
+  }
+
+
+  renderSimpleForm() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="学校名称">
+              {getFieldDecorator('name')(
+                <Input placeholder="请输入" />
+              )}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <FormItem label="企业号代码">
+              {getFieldDecorator('corp')(
+                <Input placeholder="请输入" />
+              )}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">查询</Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+
+
+  renderForm() {
+    return this.renderSimpleForm();
+  }
+
+  render() {
+    
+    const { schools: { list }, loading } = this.props;
+    const { selectedRows, modalVisible, addInputValue } = this.state;
+
+    const columns = [
+      {
+        title: '学校',
+        dataIndex: 'name',
+      },
+      {
+        title: '企业号代码',
+        dataIndex: 'corp',
+      },
+      {
+        title: '更新时间',
+        dataIndex: 'updatedAt',
+        sorter: true,
+        render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
+      },
+      {
+        title: '操作',
+        render: () => (
+          <Fragment>
+            <a href="">配置</a>
+            <Divider type="vertical" />
+            <a href="">查看</a>
+          </Fragment>
+        ),
+      },
+    ];
+
+
+    const menu = (
+      <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
+        <Menu.Item key="remove">删除</Menu.Item>
+        <Menu.Item key="approval">批量审批</Menu.Item>
+      </Menu>
+    );
+
+    return (
+      <PageHeaderLayout title="查询表格">
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>
+              {this.renderForm()}
+            </div>
+            <div className={styles.tableListOperator}>
+              {
+                selectedRows.length > 0 && (
+                  <span>
+                    <Button>批量操作</Button>
+                    <Dropdown overlay={menu}>
+                      <Button>
+                        更多操作 <Icon type="down" />
+                      </Button>
+                    </Dropdown>
+                  </span>
+                )
+              }
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              loading={loading}
+              data={list}
+              columns={columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
+        </Card>
+      </PageHeaderLayout>
+    );
+  }
+}

src/routes/devutil/linkmanadm2.less

+@import "~antd/lib/style/themes/default.less";
+@import "../../utils/utils.less";
+
+.tableList {
+  .tableListOperator {
+    margin-bottom: 16px;
+    button {
+      margin-right: 8px;
+    }
+  }
+}
+
+.tableListForm {
+  :global {
+    .ant-form-item {
+      margin-bottom: 24px;
+      margin-right: 0;
+      display: flex;
+      > .ant-form-item-label {
+        width: auto;
+        line-height: 32px;
+        padding-right: 8px;
+      }
+      .ant-form-item-control {
+        line-height: 32px;
+      }
+    }
+    .ant-form-item-control-wrapper {
+      flex: 1;
+    }
+  }
+  .submitButtons {
+    white-space: nowrap;
+    margin-bottom: 24px;
+  }
+}
+
+@media screen and (max-width: @screen-lg) {
+  .tableListForm :global(.ant-form-item) {
+    margin-right: 24px;
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .tableListForm :global(.ant-form-item) {
+    margin-right: 8px;
+  }
+}

src/services/devutil.js

+import { stringify } from 'qs';
+import request from '../utils/request';
+
+//获取微校的学校数据
+export async function queryWXSchool(params) {
+  console.log(`queryWXSchool?${stringify(params)}`);
+  return request(`/api/ywpt/schoolist?${stringify(params)}`);
+}
+
+//获取对应的地区列表信息
+export async function queryWXArea(parentcode) {
+    return request('/api/ywpt/area');
+}
+
+export async function queryWxSchLkGroup(corpid){
+    return request('/api/ywpt/linkman');
+}
+
+//获取学校对应通讯录的分组数据
+export async function querySchoolMember(corpid,wxgroup){
+    return request('/api/ywpt/linkman')
+}
+  
+