317 lines
12 KiB
JavaScript
317 lines
12 KiB
JavaScript
import React from 'react'
|
||
import * as mobx from 'mobx'
|
||
import {
|
||
inject,
|
||
observer
|
||
} from 'mobx-react'
|
||
import {
|
||
WeaTop,
|
||
WeaTab,
|
||
WeaFormItem,
|
||
WeaRightMenu,
|
||
WeaAlertPage,
|
||
WeaNewScrollPagination
|
||
} from 'ecCom'
|
||
import {
|
||
Row,
|
||
Col,
|
||
Spin,
|
||
Modal,
|
||
Button,
|
||
message,
|
||
Switch,
|
||
Menu, Dropdown, Icon, Anchor
|
||
} from 'antd';
|
||
|
||
import {
|
||
WeaSwitch,
|
||
WeaTableNew
|
||
} from 'comsMobx';
|
||
import {
|
||
i18n
|
||
} from '../../public/i18n';
|
||
|
||
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;
|
||
const confirm = Modal.confirm;
|
||
|
||
@inject('resourceCard')
|
||
@observer
|
||
export default class ResourceCard extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
activity: 0,//激活的锚点
|
||
}
|
||
|
||
}
|
||
|
||
componentWillMount() {
|
||
}
|
||
|
||
componentDidMount() {
|
||
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() {
|
||
}
|
||
|
||
|
||
componentWillReceiveProps(nextProps) {
|
||
if (this.props.location.key !== nextProps.location.key) {
|
||
this.init();
|
||
}
|
||
}
|
||
|
||
init() {
|
||
const {
|
||
resourceCard
|
||
} = this.props;
|
||
let { hash } = window.location;
|
||
hash = hash.split("?")[0];
|
||
let id = hash.match("[^/]+(?=/$|$)")[0];
|
||
resourceCard.userid = id;
|
||
resourceCard.init();
|
||
}
|
||
|
||
onScrollEnd = () => {
|
||
// resourceCard.scrollLoading = true;
|
||
|
||
// setTimeout(() => {
|
||
// // resourceCard.data.iframeList.push({
|
||
// // id: "job",
|
||
// // title: "岗位管理",
|
||
// // url: '/spa/organization/static/index.html#/main/organization/companyExtend/7'
|
||
// // })
|
||
// resourceCard.scrollLoading = false;
|
||
// }, 2000);
|
||
|
||
};
|
||
|
||
// buildDetectElements = () => {
|
||
// const {
|
||
// resourceCard
|
||
// } = this.props,{
|
||
// data
|
||
// } =resourceCard;
|
||
|
||
// !this.isEmptyObject(data) && data.anchorList.map((item, index) => {
|
||
// item.activity = index;
|
||
// item.offset = document.getElementById(item.id).offsetTop + document.getElementById(item.id).clientHeight;
|
||
// })
|
||
// resourceCard.setDetectElements(data.anchorList);
|
||
// }
|
||
|
||
handleMenuClick = (e) => {
|
||
console.log('click', e);
|
||
}
|
||
|
||
onScroll = (event) => {
|
||
const {
|
||
resourceCard
|
||
} = this.props,{
|
||
detectElements,
|
||
flag
|
||
} = resourceCard;
|
||
const postion = event.target.scrollTop;
|
||
let getActivityCurrent = this.state.activity;
|
||
detectElements.map((item, index) => {
|
||
if (postion >= document.getElementById(item.id).offsetTop && postion <= item.offset) {
|
||
return getActivityCurrent = item.activity;
|
||
}
|
||
})
|
||
|
||
if(event.target.scrollHeight == postion + event.target.clientHeight) {
|
||
getActivityCurrent = detectElements.length - 1
|
||
}
|
||
|
||
this.setState({
|
||
activity: getActivityCurrent
|
||
})
|
||
|
||
}
|
||
|
||
scrollToAnchor = (anchorName, index) => {
|
||
const {
|
||
resourceCard
|
||
} = this.props;
|
||
|
||
let _this = this;
|
||
if (anchorName) {
|
||
// 找到锚点
|
||
let anchorElement = document.getElementById(anchorName);
|
||
// 如果对应id的锚点存在，就跳转到锚点
|
||
if (anchorElement) { anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' }); }
|
||
}
|
||
}
|
||
|
||
isEmptyObject(obj) {
|
||
for (let key in obj) {
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
|
||
render() {
|
||
const {
|
||
resourceCard
|
||
} = this.props, {
|
||
height,
|
||
scrollLoading,
|
||
offset,
|
||
overtime,
|
||
intervalTime,
|
||
data
|
||
} = resourceCard;
|
||
|
||
const menu = (
|
||
<Menu onClick={this.handleMenuClick}>
|
||
<Menu.Item key="1">第一个菜单项</Menu.Item>
|
||
<Menu.Item key="2">第二个菜单项</Menu.Item>
|
||
<Menu.Item key="3">第三个菜单项</Menu.Item>
|
||
</Menu>
|
||
);
|
||
|
||
return (
|
||
!this.isEmptyObject(data) && <WeaNewScrollPagination
|
||
height='100%'
|
||
onScrollEnd={this.onScrollEnd}
|
||
onScroll={this.onScroll}
|
||
>
|
||
<div className="gutter-resource-card">
|
||
<div className="gutter-row">
|
||
<div className='top'>
|
||
<img src={data.user.image} />
|
||
<div className='user'>
|
||
<div className='name'>{data.user.name}
|
||
<span>{data.user.sex == 0 ? <i className="icon-coms-men" /> : <i className="icon-coms-women" />}</span>
|
||
</div>
|
||
<div className='icon-info'>
|
||
<i className="icon-coms-Send-message" />
|
||
<i className="icon-coms-message-o" />
|
||
<i className="icon-coms-Send-emails" />
|
||
<i className="icon-coms-New-schedule-o" />
|
||
</div>
|
||
<div className='content'>
|
||
<div>
|
||
<span className='label'><i className="icon-portal-email-o" /></span>
|
||
<span className='value'>{data.user.email}</span>
|
||
<span className='label'><i className="icon-coms-contact" /></span>
|
||
<span className='value'>{data.user.phone}</span>
|
||
</div>
|
||
<div style={{ marginTop: '10px' }}>
|
||
<span className='label'>账号类型:</span>
|
||
<span className='value'>{data.user.belongTo}</span>
|
||
<span className='label'>状态:</span>
|
||
<span className='value'>{data.user.status}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='right-button'>
|
||
<Button className='item' onClick={() => { window.location.href = `/spa/organization/static/index.html#/main/organization/resourceExtend/${data.user.id}`}}>编辑人员</Button>
|
||
<Button className='item'>调动</Button>
|
||
<Button className='item'>离职</Button>
|
||
<Dropdown overlay={menu}>
|
||
<Button style={{ marginLeft: 8 }} className='item'>
|
||
更多操作 <Icon type="down" />
|
||
</Button>
|
||
</Dropdown>
|
||
</div>
|
||
|
||
</div>
|
||
<div className='data'>
|
||
<Row type="flex" justify="space-between" style={{ height: '100%' }}>
|
||
<Col className='ant-col' span={4}>
|
||
<img src="/hrm/hrm_e9/image/workflow.png" alt="" />
|
||
<div>
|
||
<p>流程总数</p>
|
||
<p onClick={() => { window.open(`/spa/workflow/static/index.html#/main/workflow/listDoing?resourceid=${data.user.id}`) }}>{data.statistical.workflowCount}</p>
|
||
</div>
|
||
</Col>
|
||
<Col className='ant-col' span={4}>
|
||
<img src="/hrm/hrm_e9/image/doc.png" alt="" />
|
||
<div>
|
||
<p>文档总数</p>
|
||
<p onClick={() => { window.open(`/spa/document/static/index.html#/main/document/search?viewcondition=2&doccreaterid=${data.user.id}`) }}>{data.statistical.docCount}</p>
|
||
</div>
|
||
</Col>
|
||
<Col className='ant-col' span={4}>
|
||
<img src="/hrm/hrm_e9/image/custom.png" alt="" />
|
||
<div>
|
||
<p>我的客户</p>
|
||
<p onClick={() => { window.open(`/spa/crm/static/index.html#/main/crm/customer/hrmView?searchHrmId=${data.user.id}`) }}>{data.statistical.cusCount}</p>
|
||
</div>
|
||
</Col>
|
||
<Col className='ant-col' span={4}>
|
||
<img src="/hrm/hrm_e9/image/cowork.png" alt="" />
|
||
<div>
|
||
<p>我的协作</p>
|
||
<p onClick={() => { window.open(`/spa/cowork/static/index.html#/main/cowork/hrmview?searchHrmid=${data.user.id}`) }}>{data.statistical.collaborationCount}</p>
|
||
</div>
|
||
</Col>
|
||
<Col className='ant-col' span={4}>
|
||
<img src="/hrm/hrm_e9/image/weibo.png" alt="" />
|
||
<div>
|
||
<p>微博总数</p>
|
||
<p onClick={() => { window.open(`/spa/blog/static/index.html#/user/${data.user.id}`) }}>{data.statistical.weiboCount}</p>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
{
|
||
data.formItems.map((item, index) => {
|
||
return (
|
||
<FormItem groupInfo={item} />
|
||
)
|
||
})
|
||
}
|
||
{
|
||
data.iframeList.map((item, index) => {
|
||
return (
|
||
<IframeItem iframeInfo={item} />
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
<div className="gutter-row">
|
||
<AnchorDetect
|
||
anchorList={data.anchorList}
|
||
container={window}
|
||
activity={this.state.activity}
|
||
onChange={this.scrollToAnchor}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<Spin size="large" tip="" className='scroll-spin' spinning={scrollLoading} />
|
||
</WeaNewScrollPagination>
|
||
)
|
||
}
|
||
|
||
} |