Commit 608ccd23 by ethanlamzs

树形控件的使用

1 parent efc351cb
...@@ -10,6 +10,9 @@ import { format, delay } from 'roadhog-api-doc'; ...@@ -10,6 +10,9 @@ import { format, delay } from 'roadhog-api-doc';
import { getSchoolLists } from './mock/schoollist' import { getSchoolLists } from './mock/schoollist'
import {linkmanglist,linkmangroups} from './mock/linkman'
// 是否禁用代理 // 是否禁用代理
const noProxy = process.env.NO_PROXY === 'true'; const noProxy = process.env.NO_PROXY === 'true';
...@@ -99,6 +102,8 @@ const proxy = { ...@@ -99,6 +102,8 @@ const proxy = {
}, },
'GET /api/notices': getNotices, 'GET /api/notices': getNotices,
'GET /api/ywpt/schoolist': getSchoolLists, 'GET /api/ywpt/schoolist': getSchoolLists,
'GET /api/ywpt/linkman/groups': linkmangroups,
'GET /api/ywpt/linkman/list': linkmanglist,
'GET /api/500': (req, res) => { 'GET /api/500': (req, res) => {
res.status(500).send({ res.status(500).send({
"timestamp": 1513932555104, "timestamp": 1513932555104,
......
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 \ No newline at end of file
...@@ -162,6 +162,9 @@ export const getRouterData = (app) => { ...@@ -162,6 +162,9 @@ export const getRouterData = (app) => {
'/devutil/schoollist': { '/devutil/schoollist': {
component: dynamicWrapper(app, ['schools'], () => import('../routes/devutil/schoollist')), component: dynamicWrapper(app, ['schools'], () => import('../routes/devutil/schoollist')),
}, },
'/devutil/schoolmgr': {
component: dynamicWrapper(app, ['linkman'], () => import('../routes/devutil/schoolmgr')),
},
// '/user/:id': { // '/user/:id': {
// component: dynamicWrapper(app, [], () => import('../routes/User/SomeComponent')), // component: dynamicWrapper(app, [], () => import('../routes/User/SomeComponent')),
// }, // },
......
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 \ No newline at end of file
...@@ -191,7 +191,7 @@ export default class linkmanadm extends PureComponent { ...@@ -191,7 +191,7 @@ export default class linkmanadm extends PureComponent {
<Fragment> <Fragment>
<a href="">配置</a> <a href="">配置</a>
<Divider type="vertical" /> <Divider type="vertical" />
<a href="">查看</a> <a href="devutil/schoolmgr">查看</a>
</Fragment> </Fragment>
), ),
}, },
......
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 \ No newline at end of file
@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;
}
}
}
}
...@@ -12,13 +12,14 @@ export async function queryWXArea(parentcode) { ...@@ -12,13 +12,14 @@ export async function queryWXArea(parentcode) {
return request('/api/ywpt/area'); return request('/api/ywpt/area');
} }
export async function queryWxSchLkGroup(corpid){ //groups
return request('/api/ywpt/linkman'); export async function queryWxSchLkGroup(params){
return request(`/api/ywpt/linkman/groups?${stringify(params)}`);
} }
//获取学校对应通讯录的分组数据 //获取学校对应通讯录的分组数据
export async function querySchoolMember(corpid,wxgroup){ export async function querySchoolMember(corpid,params){
return request('/api/ywpt/linkman') return request(`/api/ywpt/linkman/list?${stringify(params)}`)
} }
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!