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

我的卡片页面

This commit is contained in:
Chengliang 2022-09-22 18:55:14 +08:00
parent 0d3d6c79f0
commit 01dc126302
7 changed files with 583 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
pc4mobx/organization/components/resource/FormItem.js Normal file
View File

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

44
pc4mobx/organization/components/resource/IframeItem.js Normal file
View File

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

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

@ -9,7 +9,8 @@ import {
WeaTab, WeaTab,
WeaFormItem, WeaFormItem,
WeaRightMenu, WeaRightMenu,
WeaAlertPage WeaAlertPage,
WeaNewScrollPagination
} from 'ecCom' } from 'ecCom'
import { import {
Row, Row,
@ -18,7 +19,8 @@ import {
Modal, Modal,
Button, Button,
message, message,
Switch Switch,
Menu, Dropdown,Icon
} from 'antd' } from 'antd'
import { import {
WeaSwitch, WeaSwitch,
@ -28,12 +30,11 @@ import {
i18n i18n
} from '../../public/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文件引入公共的方法 import { renderNoright } from '../../util'; // 从util文件引入公共的方法
const toJS = mobx.toJS; const toJS = mobx.toJS;
const confirm = Modal.confirm; const confirm = Modal.confirm;
@ -65,11 +66,172 @@ export default class ResourceCard extends React.Component {
const { const {
resourceCard resourceCard
} = this.props; } = this.props;
resourceCard.init();
} }
render(){ onScrollEnd = () => {
return( const {
<div>111</div> 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>
) )
} }

BIN
pc4mobx/organization/images/resource.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

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

@ -7,5 +7,120 @@ import * as Api from '../apis/resourceCard'; // 引入API接口文件
export class ResourceCardStore { 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'
},
]
} }

192
pc4mobx/organization/style/card.less Normal file
View File

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

2
pc4mobx/organization/style/common.less
View File

@ -88,5 +88,3 @@
} }
} }
//我的卡片样式