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

441 lines
16 KiB
JavaScript

import React from 'react'
import * as mobx from 'mobx'
import {
inject,
observer,
} from 'mobx-react'
import {
WeaTop,
WeaTab,
WeaFormItem,
WeaRightMenu,
WeaLeftRightLayout,
WeaOrgTree
} from 'ecCom'
import {
Row,
Col,
Spin,
Modal,
Button,
message,
Switch,
Menu, Dropdown, Icon, Select,Progress
} from 'antd'
import {
WeaSwitch,
WeaTableNew
} from 'comsMobx'
import {
i18n
} from '../../public/i18n';
import '../../style/resume.less';
import SearchPanelDialog from '../SearchPanelDialog';
import { renderNoright } from '../../util';
import { exportWord } from '../mhtmlToWord'
const toJS = mobx.toJS;
const confirm = Modal.confirm;
@inject('personnelResume')
@observer
export default class PersonnelResume extends React.Component {
constructor(props) {
super(props);
}
componentWillMount() {
}
componentDidMount() {
this.init();
}
componentWillReceiveProps(nextProps) {
const {
personnelResume
} = this.props;
if (this.props.location.key !== nextProps.location.key) {
this.init();
}
}
init() {
const {
personnelResume
} = this.props;
let { hash } = window.location;
hash = hash.split("?")[0];
let id = hash.match("[^/]+(?=/$|$)")[0];
personnelResume.resourceId = id;;
personnelResume.getHasRight();
}
onSelect = (e) => {
const {
personnelResume
} = this.props,{
form,
show
} = personnelResume;
personnelResume.show = ! show;
personnelResume.params = {
...form.getFormParams()
}
}
//左侧树
getTree = () => {
const {
personnelResume
} = this.props;
const {
companysId,
params
} = personnelResume;
let tree = (
<WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@dhi1ro`}
ref='WeaOrgTree'
dataUrl={"/api/bs/hrmorganization/personnelresume/getSearchTree"}
loading
needSearch
noCache={true}
params={params}
onSelect={this.onSelect}
needDropMenu={false}
isLoadSubDepartment={true}
topPrefix={'hrmSearch'}
companysId={companysId}
inputLeftDom={`<b>${i18n.label.organization()}</b>`}
treeNodeClick={this.treeNodeClick}
expandAllChildrenOnSearch={true}
renderNode={item => this.renderNode(item)}
/>
)
return tree;
}
renderNode(item) {
return <div className='text-elli' title={item.name}>
<i className={item.icon} style={{ marginRight: '5px' }}></i>
{item.name}
{item.canceled && <span style={{ color: 'red' }}>({i18n.label.forbidden()})</span>}
</div>
}
treeNodeClick = (event, ids, nodeids, nodes) => {
const {
personnelResume
} = this.props;
const {
companysId
} = personnelResume;
const type = event.node.props.type || '0';
const id = event.node.props.id || '';
personnelResume.nodeType = type;
if (type == '4') {
personnelResume.resourceId = id;
setTimeout(function() {
personnelResume.getPersonnelResume();
},1000)
}
}
getTopMenuBtns() {
const {
personnelResume
} = this.props;
const {
topMenu,
tableStore
} = personnelResume;
let btns = [];
btns.push(<Select showSearch
style={{ width: 115 }}
placeholder="请选择模板"
defaultValue="人员简历模板"
optionFilterProp="children"
notFoundContent="无法找到"
size="large"
onChange={this.handleChange()}
>
<Option value="1">人员简历模板</Option>
<Option value="2">人员晋升模板</Option>
</Select>)
topMenu.map((item, i) => {
if (item.menuFun === 'screening') {
btns.push(<Button id="top-screening" type='primary' onClick={() => this.handleClick(item)}>{item.menuName}</Button>);
}else {
btns.push(<Button type='primary' onClick={() => this.handleClick(item)}>{item.menuName}</Button>);
}
});
return btns;
}
handleClick(item) {
this[item.menuFun] && this[item.menuFun]();
}
//模板修改
handleChange(value) {
}
// log = () => {
// window.setLogViewProp({
// logMoudleType: 11,
// keys: new Date().getTime(),
// });
// }
getDropMenuDatas() {
const {
personnelResume
} = this.props;
const {
rightMenu
} = personnelResume;
let menus = [];
toJS(rightMenu).map((item, index) => {
let obj = {
key: item.menuFun,
icon: <i className={`${item.menuIcon}`} />,
content: item.menuName,
}
if (item.menuFun == 'collection' || item.menuFun == 'help' || item.menuFun == 'pageAddress') {
obj.disabled = true;
}
menus.push(obj);
})
return menus;
}
handleMenuClick(key) {
this[key] && this[key]();
}
//人员筛选
screening() {
const {
personnelResume
} = this.props,{
show,form
} = personnelResume;
form.reset();
personnelResume.show = ! show;
personnelResume.getSearchCondition();
}
//导出当前
currentExport() {
const {
personnelResume
} = this.props;
const {
resumeList
} = personnelResume;
exportWord({
filename:`人员简历-${resumeList.lastName}`,
selector:"#personnel-resume",
style:`.title {
font-size: 18px;
font-weight: 900;
text-align: center;
}
.photos{
width: 100px;
height: 120px;
}`
})
}
//合并导出
MergeExport() {
const {
personnelResume
} = this.props;
personnelResume.downloadPerResume(0);
}
//全部导出
AllExport() {
const {
personnelResume
} = this.props;
personnelResume.downloadPerResume(1);
}
isEmptyObject(obj) {
for (let key in obj) {
return false;
}
return true;
}
render() {
const {
personnelResume
} = this.props;
const {
hasRight, defaultShowLeft, resumeList,percent,show,form,condition,dialogLoading
} = personnelResume;
if (hasRight === false) {
return renderNoright();
}
return (
hasRight && <div ref='page' style={{ height: '100%' }}>
<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@k6oc4u`}
datas={this.getDropMenuDatas()}
onClick={key => this.handleMenuClick(key)}
>
<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bj98s7`}
title={i18n.label.personnelResume()}
icon={<i className='icon-coms-hrm' />}
iconBgcolor='#217346'
loading={true}
buttons={this.getTopMenuBtns()}
showDropIcon={true}
dropMenuDatas={this.getDropMenuDatas()}
onDropMenuClick={(e) => this.handleMenuClick(e)}
>
<WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@7muhhb`} isNew={true} showLeft={defaultShowLeft} leftCom={this.getTree()}>
{
!this.isEmptyObject(resumeList) ? <div id='personnel-resume'>
<div className='content'>
<p className='title'>人员简历信息</p>
<table border="1" align="center" width="750" cellspacing='0' className='resume-table'>
<tr align="center" height='50'>
<td colspan="7">基本信息</td>
</tr>
<tr align="center" height='50'>
<td width="100" >姓名</td>
<td width="100">{resumeList.lastName}</td>
<td width="100">性别</td>
<td width="100">{resumeList.sex}</td>
<td width="100">出生年月</td>
<td width="100">{resumeList.birthday}</td>
<td rowspan="3"><img className='photos' src={resumeList.image} /></td>
</tr>
<tr align="center" height='50'>
<td width="100" >籍贯</td>
<td width="100">{resumeList.native}</td>
<td width="100">政治面貌</td>
<td width="100">{resumeList.politics}</td>
<td width="100">部门</td>
<td width="100">{resumeList.department}</td>
</tr>
<tr align="center" height='50'>
<td width="100">婚姻状况</td>
<td width="100">{resumeList.marriage}</td>
<td width="100">岗位</td>
<td width="100">{resumeList.jobtitle}</td>
<td width="100">入职时间</td>
<td width="100">{resumeList.companystartdate}</td>
</tr>
<tr align="center" height='50'>
<td width="100">参加工作时间</td>
<td width="100" colspan="2">{resumeList.workstartdate}</td>
<td width="100" colspan="2">身份证号</td>
<td width="100" colspan="2">{resumeList.idCard}</td>
</tr>
<tr align="center" height='50'>
<td width="100" rowspan="2">家庭地址</td>
<td width="100" rowspan="2" colspan="2">{resumeList.address}</td>
<td width="100" colspan="2">联系电话</td>
<td width="100" colspan="2">{resumeList.telephone}</td>
</tr>
<tr align="center" height='50'>
<td width="100" colspan="2">E-mail</td>
<td width="100" colspan="2">{resumeList.email}</td>
</tr>
{
resumeList.tables.map((item, index) => {
return (
<React.Fragment key={index}>
<tr align="center" height='50'>
<td colspan="7">{item.title}</td>
</tr>
<tr align="center" height='50'>
{
item.columns.map(column => {
return (
<td width="100" rowspan={column.rowspans} colspan={column.colspans}>{column.name}</td>
)
})
}
</tr>
{
item.datas.map(data => {
return (
<tr align="center" height='50'>
{
data.map((row, index) => {
return (
<td width="100" rowspan={row.rowspans} colspan={row.colspans}>{row.value}</td>
)
})
}
</tr>
)
})
}
</React.Fragment>
)
})
}
<tr align="center" height='200'>
<td width="100">个人自述</td>
<td width="100" colspan="6">{resumeList.selfStatement}</td>
</tr>
</table>
</div>
</div>
: <Progress percent={percent} strokeWidth={10} />}
</WeaLeftRightLayout>
</WeaTop>
</WeaRightMenu>
<SearchPanelDialog ecId={`${this && this.props && this.props.ecId || ''}_SearchPanelDialog@q4rrwm`}
title={"人员筛选"}
visible={show}
condition={toJS(condition)}
form={form}
isFormInit={form.isFormInit}
loading={dialogLoading}
height={120}
conditionLen={1}
search={() => this.onSelect()}
onCancel={() => personnelResume.show = ! show}
/>
</div>
)
}
}