Merge pull request '我的卡片页面锚点滚动' (#4) from feature/cl into dev

Reviewed-on: http://221.226.25.34:3000/liang.cheng/trunk/pulls/4

pc4mobx/organization/components/resource/AnchorDetect.js

@@ -5,6 +5,7 @@ import {
 import {
     Spin,
     Button,
+    Timeline
 } from 'antd'
 
 import {
@@ -20,11 +21,41 @@ export default class AnchorDetect extends React.Component {
         }
     }
 
-    render() {
+    componentDidMount() {
+       
+    }
+
+    componentWillUnmount() {
         
+    }
+
+    
+
+    render() {
+        const {
+            anchorList,
+            activity,
+            onChange
+        } = this.props;
+
+        const activityStyle = {
+            color:"#4aacf4"
+        }
 
         return (
-            <div></div>
+            <div className='right'>
+                <Timeline>
+                {
+                    anchorList.map((item,index) => {
+                        return(
+                            <Timeline.Item color={activity == index ? 'blue' : 'gray'} dot={activity == index ? <i className="icon-coms-position" color='#4aacf4'/> : ''}>
+                                <span style={activity == index ? activityStyle : {}} className='title' onClick={() => onChange(item.id,index)}>{item.title}</span>
+                            </Timeline.Item>
+                        )
+                    })
+                }
+                </Timeline>
+          </div>
         )
     }
 }

pc4mobx/organization/components/resource/ResourceCard.js

@@ -22,7 +22,7 @@ import {
     Switch,
     Menu, Dropdown,Icon,Anchor
 } from 'antd';
- 
+
 import {
     WeaSwitch,
     WeaTableNew
@@ -34,6 +34,7 @@ import {
 import '../../style/card.less';
 import FormItem from './FormItem';
 import IframeItem from './IframeItem';
+import AnchorDetect from './AnchorDetect';
 import { renderNoright } from '../../util'; // 从util文件引入公共的方法
 
 const toJS = mobx.toJS;
@@ -44,6 +45,11 @@ const confirm = Modal.confirm;
 export default class ResourceCard extends React.Component {
     constructor(props) {
         super(props);
+        this.state = {
+            activity:0,//激活的锚点
+            detectElements: [], // 受监控元素,可能存在空项
+        }
+        this.flag = false; // 点击Anchor菜单项,不执行监听滚动事件
     }
 
     componentWillMount() {
@@ -53,6 +59,28 @@ export default class ResourceCard extends React.Component {
         this.init();
     }
 
+    // componentDidUpdate(prevProps) {
+    //     // 判断items是否更新
+    //     if (prevProps.items !== this.props.items
+    //         && this.isDiff(prevProps.items, this.props.items)) {
+    //         // 重新生成受监控元素
+    //         this.buildDetectElements(this.props.items);
+    //     }
+    // }
+
+    // // 判断两数组是否一摸一样
+    // isDiff = (before, after) => {
+    //     if (before.length !== after.length) return false;
+    //     // 先对数组进行排序
+    //     const beforeTemp = [...before].sort(), afterTemp = [...after].sort();
+    //     for (let i = 0; i < beforeTemp.length; i++) {
+    //         if (beforeTemp[i] !== afterTemp[i]) {
+    //             return false;
+    //         }
+    //     }
+    //     return true;
+    // };
+
     componentWillUnmount() {
     }
 
@@ -68,8 +96,28 @@ export default class ResourceCard extends React.Component {
             resourceCard
         } = this.props;
         resourceCard.init();
+        this.buildDetectElements(); //生成受监控元素
     }
 
+    buildDetectElements = () => {
+        const {
+            resourceCard
+        } = this.props,{
+            data
+        } = resourceCard;
+        
+        data.anchorList.map((item,index) => {
+            item.activity = index;
+            item.offset = document.getElementById(item.id).offsetTop + document.getElementById(item.id).clientHeight;
+        })
+
+        this.setState({
+            detectElements:data.anchorList
+        })
+
+    }
+    
+
     onScrollEnd = () => {
         const {
             resourceCard
@@ -85,7 +133,24 @@ export default class ResourceCard extends React.Component {
         }, 2000);
     };
 
-    scrollToAnchor = (anchorName) => {
+    handleMenuClick = (e) => {
+        console.log('click', e);
+    }
+
+    onScroll = (event) => {
+        const postion = event.target.scrollTop;
+        let getActivityCurrent = this.state.activity;
+        this.state.detectElements.map((item,index) => {
+            if(postion >=  document.getElementById(item.id).offsetTop &&postion <= item.offset){
+                return getActivityCurrent = item.activity;
+            }
+        })
+        this.setState({
+            activity: getActivityCurrent
+        })
+    }
+
+    scrollToAnchor = (anchorName,index) => {
         if (anchorName) {
             // 找到锚点
             let anchorElement = document.getElementById(anchorName);
@@ -94,10 +159,6 @@ export default class ResourceCard extends React.Component {
         }
     }
 
-    handleMenuClick = (e) => {
-        console.log('click', e);
-    }
-
     render() {
         const {
             resourceCard
@@ -108,7 +169,7 @@ export default class ResourceCard extends React.Component {
             overtime,
             intervalTime,
             data,
-            iframeList
+            iframeList,
         } = resourceCard;
 
         const menu = (
@@ -123,6 +184,7 @@ export default class ResourceCard extends React.Component {
             <WeaNewScrollPagination
                 height='100%'
                 onScrollEnd={this.onScrollEnd}
+                onScroll = {this.onScroll}
             >
             <div className="gutter-resource-card">
                 <div className="gutter-row">
@@ -220,9 +282,12 @@ export default class ResourceCard extends React.Component {
                     }
                 </div>
                 <div className="gutter-row">
-                    <div className='right'>
+                       <AnchorDetect  
-                        <a onClick={() => this.scrollToAnchor("educationInfo")}>教育经历</a>  
+                         anchorList={data.anchorList}
-                    </div>
+                         container={window}
+                         activity={this.state.activity}
+                         onChange={this.scrollToAnchor}
+                        />
                 </div>
             </div>
             <Spin size="large" tip="" className='scroll-spin' spinning={scrollLoading} />

pc4mobx/organization/stores/resourceCard.js

@@ -82,6 +82,30 @@ export class ResourceCardStore {
                     },{
                         fieldId:'个人邮箱',
                         fieldValue:'1546875925@qq.com'
+                    },{
+                        fieldId:'姓名',
+                        fieldValue:'萧言'
+                    },{
+                        fieldId:'性别',
+                        fieldValue:'男'
+                    },{
+                        fieldId:'出生日期',
+                        fieldValue:'1987年9月1日'
+                    },{
+                        fieldId:'个人邮箱',
+                        fieldValue:'1546875925@qq.com'
+                    },{
+                        fieldId:'姓名',
+                        fieldValue:'萧言'
+                    },{
+                        fieldId:'性别',
+                        fieldValue:'男'
+                    },{
+                        fieldId:'出生日期',
+                        fieldValue:'1987年9月1日'
+                    },{
+                        fieldId:'个人邮箱',
+                        fieldValue:'1546875925@qq.com'
                     }
                 ]
             },
@@ -108,6 +132,29 @@ export class ResourceCardStore {
                 ]
             }
         ],
+        anchorList:[
+            {
+                id:'userInfo',
+                title:'员工信息'
+            },
+            {
+                id:'workInfo',
+                title:'工作信息'
+            },
+            {
+                id:'educationInfo',
+                title:'教育经历'
+            },
+            {
+                id:'comp',
+                title:'分部扩展页'
+            },
+            {
+                id:'dept',
+                title:'部门扩展页'
+            }
+
+        ]
        
     }
 

pc4mobx/organization/style/card.less

@@ -181,10 +181,19 @@
       background-color: #ffffff;
       margin-left: 20px;
       .right{
-        a{
+        height: 100%;
+        padding-left: 20px;
+        .ant-timeline{
           position: fixed;
-          top: 0;
+          top: 20px;
+          .title {
+            cursor: pointer;
+          }
+          .title:hover{
+            color: #4aacf4;
+          }
         }
+        
       }
     }
   }