liang.cheng
/
trunk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Reviewed-on: http://221.226.25.34:3000/liang.cheng/trunk/pulls/4
This commit is contained in:
liang.cheng 2022-09-27 17:53:23 +08:00
parent 1db5570f3b 89587a6b1a
commit 7d73c055f0
4 changed files with 166 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
pc4mobx/organization/components/resource/AnchorDetect.js
View File

@ -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>
)
}
}

85
pc4mobx/organization/components/resource/ResourceCard.js
View File

@ -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'>
<a onClick={() => this.scrollToAnchor("educationInfo")}>教育经历</a>
</div>
<AnchorDetect
anchorList={data.anchorList}
container={window}
activity={this.state.activity}
onChange={this.scrollToAnchor}
/>
</div>
</div>
<Spin size="large" tip="" className='scroll-spin' spinning={scrollLoading} />

47
pc4mobx/organization/stores/resourceCard.js
View File

@ -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:'部门扩展页'
}
]
}

13
pc4mobx/organization/style/card.less
View File

@ -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;
}
}
}
}
}