weaver_trunk_cli/pc4mobx/hrm/components/card/Info.js

519 lines
22 KiB
JavaScript

import { Button, Modal,message,Row,Col, Spin} from 'antd';
import { WeaErrorPage, WeaTools,WeaSearchBrowserBox,WeaTableEdit, WeaDialog,WeaSearchGroup, WeaRightMenu,WeaFormItem , WeaQrcode} from 'ecCom'
import isEmpty from 'lodash/isEmpty'
import debounce from 'lodash/debounce'
import isArray from 'lodash/isArray'
import '../../style/cardInfo.less';
import {InfoGroup4Formal} from '../../coms/infoGroup4Formal';
import * as PublicFunc from '../../util/pulic-func';
import {createQRCode} from '../../util';
import UploadAvatar from '../../../../pc4public/hrm/uploadAvatar'
import TopButton from '../../coms/topButton';
import {WeaSwitch} from 'comsMobx';
import * as mobx from 'mobx';
import { inject, observer} from 'mobx-react';
import {i18n} from '../../public/i18n';
import {AttachToNumberField} from '../../../../pc4backstage/hrmengine/util/index.js'
import {addContentPath} from '../../util/index.js'
const getKey = WeaTools.getKey;
const toJS = mobx.toJS;
@inject('hrmCardInfo')
@inject('hrmCard')
@observer
class Main extends React.Component {
constructor(props) {
super(props);
const funcs = ['showSQR','editCard','backCard','saveEditCard'];
funcs.forEach(f=> this[f] = this[f].bind(this));
}
componentWillReceiveProps(nextProps) {
const keyOld = this.props.location.key;
const keyNew = nextProps.location.key;
if(keyOld !== keyNew) {
const {hrmCardInfo, hrmCard} = this.props;
hrmCardInfo.updateIsEditor();
const hrmId = nextProps.params.hrmId ||'';
hrmCardInfo.getData(hrmId);
hrmCardInfo.getRightMenu(hrmId);
hrmCard.setTopButtons(this.getTopButtons.bind(this));
hrmCard.setTopRightMenus(this.getRightMenu.bind(this));
hrmCard.setTopShowDropIcon(true);
}
}
componentDidMount(){
const {hrmCardInfo, hrmCard} = this.props;
const hrmId = this.props.params.hrmId ||'';
hrmCardInfo.updateIsEditor();
hrmCardInfo.getData(hrmId);
hrmCardInfo.getRightMenu(hrmId);
hrmCard.setTopButtons(this.getTopButtons.bind(this));
hrmCard.setTopRightMenus(this.getRightMenu.bind(this));
hrmCard.setTopShowDropIcon(true);
}
showSQR(bool,e){
const {hrmCardInfo} = this.props;
e.stopPropagation && e.stopPropagation();
e.preventDefault && e.preventDefault();
e.nativeEvent && e.nativeEvent.preventDefault();
hrmCardInfo.updateShowSQR(bool);
}
getIcon(str) {
switch(str){
case 'sendEmessage':
return 'icon-coms-Send-message';
case 'openmessage':
return 'icon-coms-message-o';
case 'openemail':
return 'icon-coms-Send-emails';
case 'doAddWorkPlan':
return 'icon-coms-New-schedule-o';
}
}
getRightMenu(){
const {hrmCardInfo, hrmCard} = this.props;
let {isEditor, buttons, rightMenus} = hrmCardInfo;
buttons = toJS(buttons);
rightMenus = toJS(rightMenus);
let arr = [];
if (isEditor){
arr = [{
icon: <i className='icon-coms-common'/>,
content:i18n.button.save(),
key: 'save',
onClick: key =>{
this.saveEditCard();
}
}, {
icon: <i className='icon-coms-go-back'/>,
content: i18n.button.back(),
key: 'back',
onClick: key =>{
this.backCard();
}
}]
} else {
!isEmpty(rightMenus) && rightMenus.forEach((c) => {
let item = {
icon: <i className={`${c.menuIcon}`}/>,
content: c.menuName,
key: c.menuFun,
onClick: key =>{
const menuFun = c.menuFun;
if(menuFun === 'showPortraitSetting'){
hrmCard[menuFun] && hrmCard[menuFun]();
}
this[menuFun] && this[menuFun](c.params);
}
}
if((c.type === 'BTN_SetUserIcon' && hrmCard.uploadPortrailAuth) || c.type != 'BTN_SetUserIcon')
arr.push(item);
})
}
return arr;
}
showLog(params){
window.setLogViewProps(params);
}
sendEmessage = () =>{
const {params} = this.props;
let id = params.hrmId;
if (id) PublicFunc.sendEmessage(id);
}
sendSmsMessage(){
const {params} = this.props;
let id = params.hrmId;
if (id) PublicFunc.sendSmsMessage(id);
}
sendMail(){
const {params} = this.props;
let id = params.hrmId;
if (id) PublicFunc.sendMail(id);
}
doAddWorkPlanByHrm(){
const {params} = this.props;
let id = params.hrmId;
if (id) PublicFunc.doAddWorkPlanByHrm(id);
}
addCoWork(){
const {params} = this.props;
let id = params.hrmId;
if (id) PublicFunc.addCoWork(id);
}
getTopButtons() {
const {hrmCardInfo} = this.props;
let {isEditor, buttons} = hrmCardInfo;
buttons = toJS(buttons);
const save = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@eirbpx`} type="primary" onClick={this.saveEditCard} >{i18n.button.save()}</Button>;
const back = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@n4f2vn`} type="primary" onClick={this.backCard} >{i18n.button.back()}</Button>;
const edit = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xo4e0z`} type="primary" onClick={this.editCard} >{i18n.button.modify()}</Button>;
const btns = [];
if (isEditor) {
if (!isEmpty(buttons) && buttons.hasSave) {
btns.push(save);
btns.push(back);
}
} else {
if (!isEmpty(buttons) && buttons.hasEdit) {
btns.push(edit);
}
}
return btns;
}
editCard(){
const hrmId = this.props.params.hrmId ||'';
const {hrmCardInfo} = this.props;
hrmCardInfo.edit(hrmId);
}
saveEditCard(){
const hrmId = this.props.params.hrmId ||'';
const {hrmCardInfo,hrmCard} = this.props;
hrmCardInfo.saveEditCard(()=>{
hrmCard.getTabBaseInfo({id:hrmId});
hrmCard.setupdateStatus();
});
}
backCard(){
const hrmId = this.props.params.hrmId ||'';
const {hrmCardInfo} = this.props;
hrmCardInfo.updateIsEditor();
hrmCardInfo.qrcode(hrmId);
hrmCardInfo.updateShowSQR(false);
}
getSearchs(){
const {hrmCardInfo} = this.props;
let {conditioninfo,hideBelongto,isEditor,form, validate,hrmId} = hrmCardInfo;
let group = [];
const {isFormInit} = form;
let idx = 0;
window.e9HideFormFieldKeys = [];
isFormInit && conditioninfo.forEach((c, i) =>{
let items = [];
idx++;
if(c.hasResourceImage){
let resourceimg;
let baseGroup = <div>
<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@6uu0i0@${i}`} className={`${isEditor?'hrm-base-group-title':''}`} needTigger={true} hide={c.hide} title={c.title} showGroup={c.defaultshow}>
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@pyabcq@${i}`}>
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@x3hnwv@${i}`} span={12}>
{
c.items.forEach( (field, j) => {
let dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@v0tdzs@${j}`} fieldConfig={field} form={form} onChange={(v)=> {
if (v.accounttype) {
hrmCardInfo.updateHideBelongto(v.accounttype.value == '0');
}
}}/>
if (field.conditionType == 'RESOURCEIMG' || (field.domkey && field.domkey[0] == 'belongto' && hideBelongto)) {
} else {
if(c.hide || (!isEmpty(field.otherParams) && field.otherParams.hide)){
window.e9HideFormFieldKeys.push(field.domkey[0]);
}else{
items.push({
com:(<div style={{paddingLeft: 30}}><WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@5olkhr@${j}`}
label={`${field.label}`}
labelCol={{span: `${window.HrmLabelCol}`}}
wrapperCol={{span: `${window.HrmWrapperCol}`}}>
{dom}
{field.domkey[0] == 'workcode' && <AttachToNumberField field={field} form={form} isEdit={true} useId={hrmId}/>}
</WeaFormItem></div>),
colSpan: 1
});
}
}
})
}
<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@614zrr@${i}`} className={`${isEditor?'hrm-base-group':''}`} needTigger={true} hide={c.hide} title={c.title} showGroup={c.defaultshow} items={items} col={1}/>
</Col>
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5pn9ty@${i}`} span={12}>
{
c.items.forEach( (field, j) => {
if (field.conditionType == 'RESOURCEIMG') {
if(!isEmpty(validate)&&validate[36] && validate[36].isValidate){
const key = getKey(field);
const bindObj = form.$(key);
resourceimg = <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ec7pn9@${j}`}
label={`${field.label}`}
labelCol={{span: `${window.HrmLabelCol}`}}
wrapperCol={{span: `${window.HrmWrapperCol}`}}>
<UploadAvatar ecId={`${this && this.props && this.props.ecId || ''}_UploadAvatar@fn0zdc@${j}`} {...bindObj.bind()}/>
</WeaFormItem>
}
}
})
}
{resourceimg}
</Col>
</Row>
</WeaSearchGroup>
</div>
group.push(baseGroup);
}else{
c.items.forEach( (field, j) => {
if(c.hide || (!isEmpty(field.otherParams) && field.otherParams.hide)){
window.e9HideFormFieldKeys.push(field.domkey[0]);
}else{
let dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@adcp8t@${j}`} fieldConfig={field} form={form} onChange={(v)=> {
if (v.accounttype) {
hrmCardInfo.updateHideBelongto(v.accounttype.value == '0');
}
}}/>
if (field.conditionType == 'RESOURCEIMG' || (field.domkey && field.domkey[0] == 'belongto' && hideBelongto)) {
} else {
items.push({
com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@93ixu0@${j}`}
label={`${field.label}`}
labelCol={{span: `${window.HrmLabelCol}`}}
wrapperCol={{span: `${window.HrmWrapperCol}`}}>
{dom}
{field.domkey[0] == 'workcode' && <AttachToNumberField field={field} form={form} isEdit={true}/>}
</WeaFormItem>),
colSpan: 2
});
}
}
});
group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@e47m5h@${i}`} className={`${isEditor?'hrm-center':''} ${c.isHide?'wea-hide':''}`} needTigger={true} hide={c.hide} title={c.title} showGroup={c.defaultshow} items={items} col={window.HrmGroupCol}/>)
}
});
return group
}
getPortraitButtons(){
const colArr = [];
const {hrmCardInfo} = this.props;
let {sendButtons, validate} = hrmCardInfo;
sendButtons = toJS(sendButtons);
const emJoinStatus = window.emJoinStatus;
isArray(sendButtons) && sendButtons.forEach((item, i) => {
let status = true;
if(item.name == 'sendEmessage'){
status = emJoinStatus ? (!emJoinStatus.joinStatus ||
(emJoinStatus.status &&
emJoinStatus.joinStatus &&
emJoinStatus.emSwitch !== "0")) : false;
}
if(status && !isEmpty(validate)&&validate[item.validateId] && validate[item.validateId].isValidate){
colArr.push(
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@kul6p0@${i}`} span={6}>
<div className='hrm-my-card-basicInfo-icon-circle'
onClick={()=> {
PublicFunc[item.funname](item.id);
}}
title={item.title}
>
<i className={`${this.getIcon(item.name)}`}></i>
</div>
</Col>
)
}
})
return colArr;
}
render() {
const {hrmCardInfo} = this.props;
let {isEditor, infoGroup,imgSrc,modelItems,showSQR,
showBigImg,sendButtons,accountInfo,showAccountInfo,QRCodeOptions,validate,jobtitleVisible,closeJobtitleDialog,form} = hrmCardInfo;
sendButtons = toJS(sendButtons);
infoGroup = toJS(infoGroup);
modelItems = toJS(modelItems);
// infoGroup.map(info => {
// info.items.map(item => {
// if (item.type === "email" && !item.value.includes("@")) {
// item.value = "";
// }
// })
// });
const sendBtns = this.getPortraitButtons();
const hasQRCode = !isEmpty(validate) && validate[37] && validate[37].isValidate;
const getPortrait =()=>{
const loadingImg = '/images/messageimages/temp/loading_wev8.gif';
const hasNoImg = ['/images/messageimages/temp/man_wev8.png', '/images/messageimages/temp/women_wev8.png', ''].indexOf(imgSrc || '') > -1;
return (
<div className='hrm-my-card-basicInfo-left-imgwrap'>
{!showBigImg &&
<img className={`hrm-my-card-basicInfo-left-img${hasNoImg ? '' : '-value'}`}
src={addContentPath(imgSrc ? imgSrc : loadingImg)}
onError={()=> {this.setState({imgSrc: addContentPath('/images/messageimages/temp/man_wev8.png')})}}
onClick={()=>imgSrc && hrmCardInfo.updateShowBigImg(true)}
/>
}
{showBigImg &&
<img className='hrm-my-card-basicInfo-left-img-big'
onError={()=> {this.setState({imgSrc: addContentPath('/images/messageimages/temp/man_wev8.png')})}}
onClick={()=>imgSrc && hrmCardInfo.updateShowBigImg(false)}
src={`${window.ecologyContentPath || ''}${imgSrc ? imgSrc : loadingImg}`}
/>
}
<div className='hrm-my-card-basicInfo-left-corner' style={{display: hasQRCode ? 'block' : 'none'}}
title={showSQR ? i18n.button.back() : !isEmpty(validate) && validate[37] && validate[37].validateName}
onClick={debounce(this.showSQR.bind(null,!showSQR),150)}>
<i className={`icon-coms-${showSQR ? 'Revoke2' : 'Scan'}`}/>
</div>
<div className='hrm-my-card-basicInfo-sqr' style={{display: showSQR ? 'block' : 'none'}}
onClick={this.showSQR.bind(null,false)}>
{
!isEmpty(QRCodeOptions) &&<div className='hrm-my-card-basicInfo-sqr-canvas'style={{marginTop:((jQuery(".hrm-my-card-basicInfo-sqr").height()-152)/2)}}><WeaQrcode ecId={`${this && this.props && this.props.ecId || ''}_WeaQrcode@bxy6eb`}
text={createQRCode(QRCodeOptions)}
size={120}
level={'L'}
/></div>
}
<p className='hrm-my-card-basicInfo-sqr-title'>{i18n.button.scanAddContacts()}</p>
</div>
</div>
)
}
const getAccountinfo=()=>{
let colArr = [];
let idx = 0;
accountInfo && accountInfo.forEach((a,i)=>{
let showValue;
if(a.showName && a.showName!=''){
showValue = <a href={`javaScript:openhrm(${a.value})`} onClick={event => window.pointerXY(event)}>{a.showName}</a>
}else{
showValue = a.value ? <div dangerouslySetInnerHTML={{__html:a.value}}/> : <div>&nbsp;</div>;
}
if(a.name=='weixin'){
colArr.push(
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gu15li@${i}`} className='hrm-my-card-basicInfo-left-accountinfo-label' span='24'>
<a onClick={()=> {showWeaDialog()}}>{a.label}</a>
</Col>
);
}else{
colArr.push(
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@k9t14a@${i}`} className='hrm-my-card-basicInfo-left-accountinfo-label' span='12' title={a.label}>
{a.label}:
</Col>
);
colArr.push(
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@u4z0dg@${i}`} className='hrm-my-card-basicInfo-left-accountinfo-value' span='12'>
{showValue}
</Col>
);
}
if(a.name=='lastlogindate'){
idx = i;
}
a.name=='lastlogindate' && colArr.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vptqkj@s${i}`} className='hrm-my-card-basicInfo-left-accountinfo-middline' span='24'/>);
});
if(!showAccountInfo){
colArr.splice((idx+1)*2+1,colArr.length);
}
colArr.push(
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@x4q90n@1`} className='hrm-my-card-basicInfo-left-accountinfo-endicon' span='24'
onClick={()=> hrmCardInfo.updateShowAccountInfo(!showAccountInfo)}>
<i className={showAccountInfo ? 'icon-coms-up' : 'icon-coms-down'} title={showAccountInfo ? i18n.button.collapse() : i18n.button.expand()}/>
</Col>
);
return colArr;
}
const viewCard = (
<div className='hrm-my-card-basicInfo' style={{height:'100%'}}>
<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ipcpkk`} style={{width:500, height: 380}} title={i18n.button.companyWechat()} hideIcon>
<div className='align-center'>
<img src={addContentPath('/hrm/resource/image/qrcode.jpg')} style={{height: 374, width: 344}}/>
</div>
</WeaDialog>
<div className='hrm-my-card-basicInfo-left' >
{getPortrait()}
{!isEmpty(sendBtns) && <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@tuy4ml`} className="hrm-my-card-basicInfo-left-imgwrap-op" type="flex" justify="center" gutter={16}>{sendBtns}</Row>}
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@e5eogh`}>{getAccountinfo()}</Row>
</div>
<div className='hrm-my-card-basicInfo-right' style={{minHeight:window.innerHeight-138}}>
<div className='hrm-my-card-basicInfo-right-counts'>
{
modelItems && modelItems.map(c => {
const fontColor = c['font-color'];
return (
<div className='hrm-my-card-basicInfo-right-counts-cell' onClick={()=>{window.open(c.url)}}>
<img src={addContentPath(c.icon)} alt=""/>
<div className='hrm-my-card-basicInfo-right-counts-cell-info'>
<div>{c.label}</div>
<div title={c.num} className='text-overflow'><span style={{color:fontColor?fontColor:null,fontSize:18}}>{c.num}</span></div>
</div>
</div>
)
})
}
</div>
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@orjwt4`} gutter={24}>
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6dkmro`} span='24'>
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0xagl0`} className='hrm-my-card-basicInfo-right-info'>
{
infoGroup && infoGroup.map((info, i) => {
return (
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kw5tls@${i}`} style={{display: info.hide ? 'none' : 'block'}}>
<InfoGroup4Formal ecId={`${this && this.props && this.props.ecId || ''}_InfoGroup4Formal@f7yrkq@${i}`} items={info.items} hide={info.hide} title={info.title} showGroup={info.defaultshow}/>
</Row>
)
})
}
</Row>
</Col>
</Row>
</div>
</div>
)
const editCard = (
<div className='hrm-my-card-basicInfo hrm-my-cardInfo' style={{height:'100%'}}>
{this.getSearchs()}
{
jobtitleVisible && (
<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@qhdkmr`}
onCancel={closeJobtitleDialog}
icon= 'icon-coms-hrm'
iconBgcolor= '#217346'
title={i18n.label['531838']()}
callback = {
datas => {
const {
id,
jobtitlemark
} = datas;
form.updateFields({
jobtitle: {
value: id,
valueSpan: jobtitlemark,
valueObj: [{
id,
name:jobtitlemark
}]
}
});
closeJobtitleDialog();
}
}
url = {'/spa/hrm/engine.html#/hrmengine/posts?type=0'}
visible={jobtitleVisible}
style={{width: 600, height: 500}}
/>
)
}
</div>
)
return (
<div>
{!isEditor ? viewCard : editCard}
</div>
)
}
}
export default Main;