trunk/pc4mobx/organization/components/resource/ResourceCard.js

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 { 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);
    }

    componentWillMount() {
    }

    componentDidMount() {
        this.init();
    }

    componentWillUnmount() {
    }


    componentWillReceiveProps(nextProps) {
        if (this.props.location.key !== nextProps.location.key) {
            this.init();
        }
    }

    init() {
        const {
            resourceCard
        } = this.props;
        resourceCard.init();
    }

    onScrollEnd = () => {
        const {
            resourceCard
        } = this.props;
        resourceCard.scrollLoading = true;
        resourceCard.iframeList.push({
            id:"job",
            title:"岗位管理",
            url:'/spa/organization/static/index.html#/main/organization/companyExtend/7'
        })
        setTimeout(() => {
            resourceCard.scrollLoading = false;
        }, 2000);
    };

    scrollToAnchor = (anchorName) => {
        if (anchorName) {
            // 找到锚点
            let anchorElement = document.getElementById(anchorName);
            // 如果对应id的锚点存在，就跳转到锚点
            if (anchorElement) { anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' }); }
        }
    }

    handleMenuClick = (e) => {
        console.log('click', e);
    }

    render() {
        const {
            resourceCard
        } = this.props, {
            height,
            scrollLoading,
            offset,
            overtime,
            intervalTime,
            data,
            iframeList
        } = 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 (
            <WeaNewScrollPagination
                height='100%'
                onScrollEnd={this.onScrollEnd}
            >
            <div className="gutter-resource-card">
                <div className="gutter-row">
                    <div className='top'>
                        <img src={require('../../images/resource.png')} />
                        <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'>编辑人员</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>{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>{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>{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>{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>{data.statistical.weiboCount}</p>
                                </div>
                            </Col>
                        </Row>
                    </div>
                    {
                        data.formItems.map((item,index)=>{
                            return(
                                <FormItem groupInfo={item}/>
                            )
                        })
                    }
                    {
                        iframeList.map((item,index) => {
                            return(
                                <IframeItem iframeInfo={item}/>
                            )
                        })
                    }
                </div>
                <div className="gutter-row">
                    <div className='right'>
                        <a onClick={() => this.scrollToAnchor("educationInfo")}>教育经历</a>  
                    </div>
                </div>
            </div>
            <Spin size="large" tip="" className='scroll-spin' spinning={scrollLoading} />

                
        </WeaNewScrollPagination>

        )
    }

}