树形控件的使用

.roadhogrc.mock.js

@@ -10,6 +10,9 @@ import { format, delay } from 'roadhog-api-doc';
 
 import { getSchoolLists } from './mock/schoollist'
 
+import {linkmanglist,linkmangroups} from './mock/linkman'
+
+
 // 是否禁用代理
 const noProxy = process.env.NO_PROXY === 'true';
 
@@ -99,6 +102,8 @@ const proxy = {
   },
   'GET /api/notices': getNotices,
   'GET /api/ywpt/schoolist': getSchoolLists,
+  'GET /api/ywpt/linkman/groups': linkmangroups,
+  'GET /api/ywpt/linkman/list': linkmanglist,
   'GET /api/500': (req, res) => {
     res.status(500).send({
       "timestamp": 1513932555104,

mock/linkman.js

+export const linkmangroups = [
+    {
+        "id": 2,
+        "name": "广州研发中心",
+        "parentid": 1,
+        "order": 10
+    },
+    {
+        "id": 3,
+        "name": '分组2',
+        "parentid": 1,
+        "order": 10
+    },
+    {
+        "id": 4,
+        "name": '分组4',
+        "parentid": 1,
+        "order": 10
+    }
+];
+
+export const linkmanglist = [
+    {
+        "userid": "zhangsan",
+        "name": "李四",
+        "department": [2,3],
+        "order": [1, 2],
+        "position": "后台工程师",
+        "mobile": "15913215421",
+        "gender": "1",
+        "email": "zhangsan@gzdev.com",
+        "isleader": 0,
+        "avatar":           "http://wx.qlogo.cn/mmopen/ajNVdqHZLLA3WJ6DSZUfiakYe37PKnQhBIeOQBO4czqrnZDS79FH5Wm5m4X69TBicnHFlhiafvDwklOpZeXYQQ2icg/0",
+        "telephone": "020-123456",
+        "english_name": "jackzhang",
+        "status": 1,
+        "extattr": {"attrs":[{"name":"爱好","value":"旅游"},{"name":"卡号","value":"1234567234"}]}
+    },
+    {
+        "userid": "zhangsan-2",
+        "name": "ZHANGSN",
+        "department": [2,4],
+        "order": [1, 2],
+        "position": "后台工程师",
+        "mobile": "15913215421",
+        "gender": "1",
+        "email": "zhangsan@gzdev.com",
+        "isleader": 0,
+        "avatar":           "http://wx.qlogo.cn/mmopen/ajNVdqHZLLA3WJ6DSZUfiakYe37PKnQhBIeOQBO4czqrnZDS79FH5Wm5m4X69TBicnHFlhiafvDwklOpZeXYQQ2icg/0",
+        "telephone": "020-123456",
+        "english_name": "jackzhang",
+        "status": 1,
+        "extattr": {"attrs":[{"name":"爱好","value":"旅游"},{"name":"卡号","value":"1234567234"}]}
+    },
+];
+
+export default {
+    linkmangroups,
+    linkmanglist
+};
\ No newline at end of file

src/common/router.js

@@ -162,6 +162,9 @@ export const getRouterData = (app) => {
     '/devutil/schoollist': {
       component: dynamicWrapper(app, ['schools'], () => import('../routes/devutil/schoollist')),
     },
+    '/devutil/schoolmgr': {
+      component: dynamicWrapper(app, ['linkman'], () => import('../routes/devutil/schoolmgr')),
+    },
     // '/user/:id': {
     //   component: dynamicWrapper(app, [], () => import('../routes/User/SomeComponent')),
     // },

src/models/linkman.js

+import {queryWxSchLkGroup} from '../services/devutil'
+
+export default{
+
+    namespace: 'linkman',
+
+    state:{
+        groups:[],
+        linkmans:[],
+    },
+
+    effects:{
+
+        *groups({payload},{call,put}){
+            const response = yield call(queryWxSchLkGroup,payload);
+            console.log(response);
+            yield put({
+                type:'loadWXLinkmanGroup',
+                payload:response,
+            });
+            
+        },
+
+        *lklist({payload},{call,put}){
+            const response = yield call(querySchoolMember,payload);
+            console.log(response);
+            yield put({
+                type:'loadGroupOfLinkman',
+                payload:response,
+            });
+        }
+        
+
+    },
+
+
+    reducers:{
+
+        loadWXLinkmanGroup(state,action){
+            return {
+                ...state,
+                groups:action.payload,
+            }
+        },
+
+        loadGroupOfLinkman(state,action){
+            return {
+                ...state,
+                linkmans:action.payload,
+            }
+        },
+
+    }
+
+
+}
\ No newline at end of file

src/routes/devutil/schoollist.js

@@ -191,7 +191,7 @@ export default class linkmanadm extends PureComponent {
           <Fragment>
             <a href="">配置</a>
             <Divider type="vertical" />
-            <a href="">查看</a>
+            <a href="devutil/schoolmgr">查看</a>
           </Fragment>
         ),
       },

src/routes/devutil/schoolmgr.js

+import styles from './schoolmgr.less'
+
+import React, { Component } from 'react';
+import { connect } from 'dva';
+
+import {
+    Row,
+    Col,
+    Icon,
+    Card,
+    Tabs,
+    Table,
+    Radio,
+    DatePicker,
+    Tooltip,
+    Menu,
+    Dropdown,
+    Tree
+  } from 'antd';
+
+import {
+    ChartCard,
+    yuan,
+    MiniArea,
+    MiniBar,
+    MiniProgress,
+    Field,
+    Bar,
+    Pie,
+    TimelineChart,
+} from '../../components/Charts';
+
+import Trend from '../../components/Trend';
+
+import { R_OK } from 'constants';
+
+import numeral from 'numeral';
+
+const TreeNode = Tree.TreeNode;
+
+@connect(({ linkman, loading }) => ({
+    linkman,
+    loading: loading.models.linkman,
+  }))
+export default class schoolmgr extends Component{
+
+    state = {
+      groups: [
+          { title: 'Expand to load', key: '0' },
+          { title: 'Expand to load', key: '1' },
+          { title: 'Tree Node', key: '2', isLeaf: true },
+        ],
+    };
+
+    
+    componentDidMount() {
+
+        const { dispatch } = this.props;
+    
+        dispatch({
+          type: 'linkman/groups',
+        });
+      }
+
+
+      onLoadData = (treeNode) => {
+        return new Promise((resolve) => {
+          if (treeNode.props.children) {
+            resolve();
+            return;
+          }
+          setTimeout(() => {
+            treeNode.props.dataRef.children = [
+              { title: 'Child Node', key: `${treeNode.props.eventKey}-0` },
+              { title: 'Child Node', key: `${treeNode.props.eventKey}-1` },
+            ];
+            this.setState({
+              treeData: [...this.state.treeData],
+            });
+            resolve();
+          }, 1000);
+        });
+      }
+
+
+      renderTreeNodes = (data) => {
+        return data.map((item) => {
+          if (item.children) {
+            return (
+              <TreeNode title={item.title} key={item.key} dataRef={item}>
+                {this.renderTreeNodes(item.children)}
+              </TreeNode>
+            );
+          }
+          return <TreeNode {...item} dataRef={item} />;
+        });
+      }
+
+
+    render(){
+
+        const topColResponsiveProps = {
+            xs: 24,
+            sm: 12,
+            md: 12,
+            lg: 12,
+            xl: 6,
+            style: { marginBottom: 24 },
+          };
+
+        return <div>    
+            
+            <Row gutter={24}>
+            <Col {...topColResponsiveProps}>
+            <ChartCard
+              bordered={false}
+              title="学校名称"
+              action={
+                <Tooltip title="指标说明">
+                  <Icon type="info-circle-o" />
+                </Tooltip>
+              }
+              total={`${numeral(12423).format('0,0')}`}
+              footer={<Field label="关注人员" value={`${numeral(12423).format('0,0')}`} />}
+              contentHeight={46}
+            >
+              <Trend flag="up" style={{ marginRight: 16 }}>
+                关注数<span className={styles.trendText}>--%</span>
+              </Trend>
+              <Trend flag="down">
+                取关数<span className={styles.trendText}>--%</span>
+              </Trend>
+            </ChartCard>
+          </Col>
+            </Row>
+            <Row gutter={24}>
+                    <Col xl={16} lg={24} md={24} sm={24} xs={24}>
+                      <div >
+                      <Tree checkable loadData={this.onLoadData}>
+                          {this.renderTreeNodes(this.state.groups)}
+                        </Tree>
+                       </div>
+                    </Col>
+                    <Col xl={8} lg={24} md={24} sm={24} xs={24}>
+                       <div> two </div>
+                    </Col>
+            </Row>
+        </div>;
+    }
+
+}
\ No newline at end of file

src/routes/devutil/schoolmgr.less

+@import "~antd/lib/style/themes/default.less";
+@import "../../utils/utils.less";
+
+.iconGroup {
+  i {
+    transition: color 0.32s;
+    color: @text-color-secondary;
+    cursor: pointer;
+    margin-left: 16px;
+    &:hover {
+      color: @text-color;
+    }
+  }
+}
+
+.rankingList {
+  margin: 25px 0 0;
+  padding: 0;
+  list-style: none;
+  li {
+    .clearfix();
+    margin-top: 16px;
+    span {
+      color: @text-color;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    span:first-child {
+      background-color: @background-color-base;
+      border-radius: 20px;
+      display: inline-block;
+      font-size: 12px;
+      font-weight: 600;
+      margin-right: 24px;
+      height: 20px;
+      line-height: 20px;
+      width: 20px;
+      text-align: center;
+    }
+    span.active {
+      //background-color: @primary-color;
+      background-color: #314659;
+      color: #fff;
+    }
+    span:last-child {
+      float: right;
+    }
+  }
+}
+
+.salesExtra {
+  display: inline-block;
+  margin-right: 24px;
+  a {
+    color: @text-color;
+    margin-left: 24px;
+    &:hover {
+      color: @primary-color;
+    }
+    &.currentDate {
+      color: @primary-color;
+    }
+  }
+}
+
+.salesCard {
+  .salesBar {
+    padding: 0 0 32px 32px;
+  }
+  .salesRank {
+    padding: 0 32px 32px 72px;
+  }
+  :global {
+    .ant-tabs-bar {
+      padding-left: 16px;
+      .ant-tabs-nav .ant-tabs-tab {
+        padding-top: 16px;
+        padding-bottom: 14px;
+        line-height: 24px;
+      }
+    }
+    .ant-tabs-extra-content {
+      padding-right: 24px;
+      line-height: 55px;
+    }
+    .ant-card-head {
+      position: relative;
+    }
+  }
+}
+
+.salesCardExtra {
+  height: 68px;
+}
+
+.salesTypeRadio {
+  position: absolute;
+  left: 24px;
+  bottom: 15px;
+}
+
+.offlineCard {
+  :global {
+    .ant-tabs-ink-bar {
+      bottom: auto;
+    }
+    .ant-tabs-bar {
+      border-bottom: none;
+    }
+    .ant-tabs-nav-container-scrolling {
+      padding-left: 40px;
+      padding-right: 40px;
+    }
+    .ant-tabs-tab-prev-icon:before {
+      position: relative;
+      left: 6px;
+    }
+    .ant-tabs-tab-next-icon:before {
+      position: relative;
+      right: 6px;
+    }
+  }
+
+  :global(.ant-tabs-tab-active) h4 {
+    color: @primary-color;
+  }
+}
+
+.trendText {
+  margin-left: 8px;
+  color: @heading-color;
+}
+
+@media screen and (max-width: @screen-lg) {
+  .salesExtra {
+    display: none;
+  }
+
+  .rankingList {
+    li {
+      span:first-child {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .rankingTitle {
+    margin-top: 16px;
+  }
+
+  .salesCard .salesBar {
+    padding: 16px;
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .salesExtraWrap {
+    display: none;
+  }
+
+  .salesCard {
+    :global {
+      .ant-tabs-content {
+        padding-top: 30px;
+      }
+    }
+  }
+}

src/services/devutil.js

@@ -12,13 +12,14 @@ export async function queryWXArea(parentcode) {
     return request('/api/ywpt/area');
 }
 
-export async function queryWxSchLkGroup(corpid){
-    return request('/api/ywpt/linkman');
+//groups
+export async function queryWxSchLkGroup(params){
+    return request(`/api/ywpt/linkman/groups?${stringify(params)}`);
 }
 
 //获取学校对应通讯录的分组数据
-export async function querySchoolMember(corpid,wxgroup){
-    return request('/api/ywpt/linkman')
+export async function querySchoolMember(corpid,params){
+    return request(`/api/ywpt/linkman/list?${stringify(params)}`)
 }