weaver_trunk_cli/pc4mobx/hrm/components/sendBless/index.js

94 lines
4.0 KiB
JavaScript

import {
inject,
observer
} from "mobx-react";
import { WeaLocaleProvider, WeaTagGroup, WeaTextarea, WeaDialogFooter } from "ecCom";
import { toJS } from "mobx";
import { Button } from "antd";
import "../../style/sendBless.less";
import { i18n } from "../../public/i18n";
import {addContentPath} from '../../util/index.js'
const getLabel = WeaLocaleProvider.getLabel;
@inject('hrmSendBless')
@observer
export default class SendBless extends React.Component {
componentDidMount() {
const { hrmSendBless: { getBlessingForm, setQueryDatas ,handleImgClick,prefixUrl}, location: { query } } = this.props;
setQueryDatas(query);
getBlessingForm();
handleImgClick(`${prefixUrl}1.png`)
}
getParams = (params) => {
if (typeof params == 'object') {
return Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
}
}
render() {
const {
hrmSendBless: {
greetingCardShow,
handleImgClick,
canPrev,
canNext,
prev,
next,
handleTagGroupChange,
tagGroupDatas,
browserConditionParam,
blessOptions,
addBlessTarget,
dovalidate,
checkAll,
sendBless,
handleTextareaChange,
blessing,
}
} = this.props;
return (
<div className="hrmBless">
<div>
<p>{`${i18n.label['528857']()}: `}</p>
<i className={`icon-coms-Left${!canPrev ? " disabled" : ""}`} onClick={() => canPrev && prev()}/>
<div>
{greetingCardShow.map(data => <img src={addContentPath(data.url)} onClick={() => handleImgClick(data.url)} className={data.isChecked ? "img-checked" : ""} alt="" />)}
</div>
<i className={`icon-coms-Right${!canNext ? " disabled" : ""}`} onClick={() => canNext && next()}/>
</div>
<div>
<WeaTagGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaTagGroup@5scvtu`}
datas={toJS(tagGroupDatas)}
url={`/api/public/browser/complete/birthdayResource?${this.getParams(browserConditionParam.completeParams)}`}
hasBrowser={false}
type="birthdayResource"
label={`${i18n.label['528858']()}: `}
browserParams={browserConditionParam}
onChange={handleTagGroupChange}
validate={dovalidate}
isTag={false}
/>
{ (blessOptions.length > 0) && (
<p className="blessOptions">
{ blessOptions.slice(0, 3).map(option => <span onClick={() => addBlessTarget(option)}>{option.name}</span>) }
<span className="suffix">{i18n.label['528859']().replace(/\{(placeholder|holder)\}/,'').replace("{number}",blessOptions.length)}</span>
<span onClick={checkAll}>{i18n.label['528860']()}</span>
</p>
) }
</div>
<div className="blessInput">
<p>{`${i18n.label['528861']()}: `}</p>
<WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@ifspuc`}
value={blessing}
minRows={4}
maxRows={4}
onChange={handleTextareaChange}
/>
</div>
<WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@a6m8pg`} buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mo8jdw@0`} type="primary" onClick={sendBless}>{i18n.label['528862']()}</Button>]} moreBtn={{}}/>
</div>
);
}
}