我的卡片页面
This commit is contained in:
parent
0d3d6c79f0
commit
01dc126302
|
|
@ -0,0 +1,59 @@
|
|||
import {
|
||||
WeaFormItem,
|
||||
} from 'ecCom'
|
||||
|
||||
import {
|
||||
Spin,
|
||||
Button,
|
||||
} from 'antd'
|
||||
|
||||
import {
|
||||
i18n
|
||||
} from '../../public/i18n';
|
||||
|
||||
import '../../style/common.less';
|
||||
import Group from '../group/Group';
|
||||
import { chunk } from 'lodash';
|
||||
|
||||
export default class FormItem extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
groupInfo
|
||||
} = this.props, {
|
||||
} = this.state;
|
||||
const newData = chunk(groupInfo.items, 3);
|
||||
|
||||
return (
|
||||
<div className='form-item' id={groupInfo.id}>
|
||||
<div className='title'>
|
||||
<div></div>
|
||||
<p>{groupInfo.title}</p>
|
||||
</div>
|
||||
<div className='content'>
|
||||
{newData.map((item, index) => {
|
||||
return (
|
||||
<div key={index} className='item'>
|
||||
{item.map((subItem) => {
|
||||
return (
|
||||
<div>
|
||||
<span>{subItem.fieldId}</span>
|
||||
<span>{subItem.fieldValue}</span>
|
||||
</div>
|
||||
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import {
|
||||
WeaFormItem,
|
||||
} from 'ecCom'
|
||||
|
||||
import {
|
||||
Spin,
|
||||
Button,
|
||||
} from 'antd'
|
||||
|
||||
import {
|
||||
i18n
|
||||
} from '../../public/i18n';
|
||||
|
||||
import '../../style/common.less';
|
||||
import Group from '../group/Group';
|
||||
import { chunk } from 'lodash';
|
||||
|
||||
export default class IframeItem extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
iframeInfo
|
||||
} = this.props, {
|
||||
} = this.state;
|
||||
|
||||
return (
|
||||
<div className='iframe-item' id={iframeInfo.id}>
|
||||
<div className='title'>
|
||||
<div></div>
|
||||
<p>{iframeInfo.title}</p>
|
||||
</div>
|
||||
<div className='content'>
|
||||
<iframe src={iframeInfo.url} width="100%" frameBorder="0"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,8 @@ import {
|
|||
WeaTab,
|
||||
WeaFormItem,
|
||||
WeaRightMenu,
|
||||
WeaAlertPage
|
||||
WeaAlertPage,
|
||||
WeaNewScrollPagination
|
||||
} from 'ecCom'
|
||||
import {
|
||||
Row,
|
||||
|
|
@ -18,7 +19,8 @@ import {
|
|||
Modal,
|
||||
Button,
|
||||
message,
|
||||
Switch
|
||||
Switch,
|
||||
Menu, Dropdown,Icon
|
||||
} from 'antd'
|
||||
import {
|
||||
WeaSwitch,
|
||||
|
|
@ -28,12 +30,11 @@ import {
|
|||
i18n
|
||||
} from '../../public/i18n';
|
||||
|
||||
import '../../style/common.less';
|
||||
|
||||
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;
|
||||
|
||||
|
|
@ -65,11 +66,172 @@ export default class ResourceCard extends React.Component {
|
|||
const {
|
||||
resourceCard
|
||||
} = this.props;
|
||||
resourceCard.init();
|
||||
}
|
||||
|
||||
render(){
|
||||
return(
|
||||
<div>111</div>
|
||||
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}
|
||||
// onScroll={(e)=> {
|
||||
// console.log(e)
|
||||
// }}
|
||||
>
|
||||
<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("activity1")}>测试</a> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Spin size="large" tip="" className='scroll-spin' spinning={scrollLoading} />
|
||||
|
||||
|
||||
</WeaNewScrollPagination>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
|
|
@ -7,5 +7,120 @@ import * as Api from '../apis/resourceCard'; // 引入API接口文件
|
|||
|
||||
|
||||
export class ResourceCardStore {
|
||||
@observable height = 2000;
|
||||
@observable scrollLoading = true;
|
||||
@observable offset = 20;
|
||||
@observable overtime = 1000;
|
||||
@observable intervalTime = 500;
|
||||
|
||||
|
||||
@action("初始化") init = () => {
|
||||
|
||||
}
|
||||
|
||||
|
||||
/************** json数据*****************/
|
||||
@observable data = {
|
||||
user: {
|
||||
image: "",
|
||||
name: "萧言",
|
||||
sex:"0",
|
||||
email: "1546584672@qq.com",
|
||||
phone: "18822349878",
|
||||
belongTo: "主账号",
|
||||
status: "正式"
|
||||
},
|
||||
statistical: {
|
||||
workflowCount:190,
|
||||
docCount:134,
|
||||
cusCount:28,
|
||||
collaborationCount:28,
|
||||
weiboCount:166
|
||||
},
|
||||
formItems:[
|
||||
{
|
||||
id:'userInfo',
|
||||
title:'员工信息',
|
||||
items:[
|
||||
{
|
||||
fieldId:'姓名',
|
||||
fieldValue:'萧言'
|
||||
},{
|
||||
fieldId:'性别',
|
||||
fieldValue:'男'
|
||||
},{
|
||||
fieldId:'出生日期',
|
||||
fieldValue:'1987年9月1日'
|
||||
},{
|
||||
fieldId:'个人邮箱',
|
||||
fieldValue:'1546875925@qq.com'
|
||||
},{
|
||||
fieldId:'电话号码',
|
||||
fieldValue:'18925689752'
|
||||
},{
|
||||
fieldId:'岗位级别',
|
||||
fieldValue:'-'
|
||||
},{
|
||||
fieldId:'职务信息',
|
||||
fieldValue:'产品运营'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id:'workInfo',
|
||||
title:'工作信息',
|
||||
items:[
|
||||
{
|
||||
fieldId:'姓名',
|
||||
fieldValue:'萧言'
|
||||
},{
|
||||
fieldId:'性别',
|
||||
fieldValue:'男'
|
||||
},{
|
||||
fieldId:'出生日期',
|
||||
fieldValue:'1987年9月1日'
|
||||
},{
|
||||
fieldId:'个人邮箱',
|
||||
fieldValue:'1546875925@qq.com'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id:'educationInfo',
|
||||
title:'教育经历',
|
||||
items:[
|
||||
{
|
||||
fieldId:'本科',
|
||||
fieldValue:'南京大学'
|
||||
},{
|
||||
fieldId:'研究生',
|
||||
fieldValue:'北京大学'
|
||||
},{
|
||||
fieldId:'毕业时间',
|
||||
fieldValue:'1987-09-21'
|
||||
},{
|
||||
fieldId:'获得奖项',
|
||||
fieldValue:'优秀毕业生'
|
||||
},{
|
||||
fieldId:'备注',
|
||||
fieldValue:'无'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
}
|
||||
|
||||
@observable iframeList = [
|
||||
{
|
||||
id:"comp",
|
||||
title:"分部管理",
|
||||
url:'/spa/organization/static/index.html#/main/organization/companyExtend/7'
|
||||
},
|
||||
{
|
||||
id:"dept",
|
||||
title:"部门管理",
|
||||
url:'/spa/organization/static/index.html#/main/organization/companyExtend/7'
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,192 @@
|
|||
|
||||
// #container {
|
||||
// background-color: #e5eaf2;
|
||||
// }
|
||||
//我的卡片样式
|
||||
.gutter-resource-card {
|
||||
display: flex;
|
||||
background-color: #e5eaf2;
|
||||
padding-bottom: 15px;
|
||||
.gutter-row:first-child{
|
||||
width: 89%;
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: #ffffff;
|
||||
padding: 12px;
|
||||
img{
|
||||
float: left;
|
||||
width: 102px;
|
||||
height: 100%;
|
||||
}
|
||||
.user{
|
||||
float: left;
|
||||
margin-left: 20px;
|
||||
.name {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
span {
|
||||
margin-left: 15px;
|
||||
.icon-coms-men {
|
||||
color: #6d9fff;
|
||||
}
|
||||
.icon-coms-women {
|
||||
color: #ff6dfa;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-info {
|
||||
margin-top: 10px;
|
||||
i {
|
||||
cursor: pointer;
|
||||
color: #6d9fff;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.icon-coms-Send-message{
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
margin-top: 10px;
|
||||
.label{
|
||||
color: #999999;
|
||||
}
|
||||
.value {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.content > div span:nth-child(3){
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
.right-button{
|
||||
float: right;
|
||||
line-height: 75px;
|
||||
.item {
|
||||
background-color: #2b68f0;
|
||||
color: #ffffff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data {
|
||||
width: 100%;
|
||||
height: 135px;
|
||||
background-color: #ffffff;
|
||||
padding: 12px 25px;
|
||||
margin-top: 20px;
|
||||
.ant-col {
|
||||
-webkit-box-shadow: #eeeeee 0px 0px 10px;
|
||||
-moz-box-shadow: #eeeeee 0px 0px 10px;
|
||||
box-shadow: #eeeeee 0px 0px 10px;
|
||||
padding: 0 10px;
|
||||
img{
|
||||
margin-top: 20px
|
||||
}
|
||||
div{
|
||||
width: 100%;
|
||||
:first-child{
|
||||
float: left;
|
||||
color: #999999;
|
||||
line-height: 35px;
|
||||
}
|
||||
:last-child{
|
||||
float: right;
|
||||
font-weight: 800;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
div {
|
||||
height: 20px;
|
||||
border: 2px solid #2b68f0;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
float: left;
|
||||
}
|
||||
p{
|
||||
margin-left: 15px;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
.item{
|
||||
display: flex;
|
||||
div{
|
||||
width: 33.3%;
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
span:first-child{
|
||||
color: #999999;
|
||||
width: 60px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
span:last-child{
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iframe-item {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
div {
|
||||
height: 20px;
|
||||
border: 2px solid #2b68f0;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
float: left;
|
||||
}
|
||||
p{
|
||||
margin-left: 15px;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.gutter-row:last-child{
|
||||
width: 10%;
|
||||
background-color: #ffffff;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-spin {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -88,5 +88,3 @@
|
|||
}
|
||||
}
|
||||
|
||||
//我的卡片样式
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue