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

import React from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	CenterSpin
} from '../../public/valhalla/components/index.js';
import {
	WeaLocaleProvider,
	WeaTop,
	WeaTextarea,
	WeaRightMenu,
} from 'ecCom';
import {Button} from 'antd';
import Detail from './Detail.js';
import AlertPage from '../../public/components/AlertPage.js';
import VerifyResourceID from '../financeExpand/VerifyResourceID.js';
import {Dialog} from '../../public/valhalla/components/index.js';
import {addContentPath} from '../../util/index.js'
import '../../style/payrollDetailBp.less';
const getLabel = WeaLocaleProvider.getLabel;

@inject('hrmPayrollDetailBpStore')
@observer
export default class PayrollDetailBp extends React.Component {
	componentWillMount() {
		this.props.hrmPayrollDetailBpStore.setTargetId(this.props.params);
	}

	componentDidMount() {
		this.showDialog();
	}

	showDialog = () => {
		const {
			hrmPayrollDetailBpStore
		} = this.props, {
			financeExpand,
			init
		} = hrmPayrollDetailBpStore;

		if (window.doCheckSecondaryVerify4ec) {
		    window.doCheckSecondaryVerify4ec && window.doCheckSecondaryVerify4ec({mouldCode: 'HRM', itemCode: 'SALARY'}, res => {
		        if (res.status == "1") {
		            init();
		            financeExpand.isNeedSecondPwdVerify = false;
		        }
		        financeExpand.loading = false;
		    })
		}else{
			financeExpand.fetchSecondPwdVerifyInfo().then(isNeedSecondPwdVerify => {
				if (isNeedSecondPwdVerify) {
					financeExpand.openDialog();	
				}else{
					init();
				}
			});
		}



	}



getButtons = () => {
    const { hrmPayrollDetailBpStore: { confirm, confirmdata, remark, remarkdata, loading, confirmRecord, feedback } } = this.props;
    let btns = [],
        menus = [];
    if (confirm && !confirmdata) {
        const label = getLabel('826','确定')
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@f8xzel@${'confirm'}`} type="primary" disabled={loading} onClick={confirmRecord}>{label}</Button>)
        menus.push({
            key: "1",
            disabled: loading,
            icon: <i className="icon-coms-menu-Receive" />,
            content: label,
            onClick: confirmRecord
        })
    }
    if (remark && !remarkdata) {
        const label =getLabel('524278','反馈信息')
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6bnsk7@${'feedback'}`} type="primary" disabled={loading} onClick={feedback}>{label}</Button>)
        menus.push({
            key: "2",
            disabled: loading,
            icon: <i className="icon-coms-Need-feedback" />,
            content: label,
            onClick: feedback
        })
    }

    return {
        buttons: btns,
        dropMenuDatas: menus
    }
}

	componentDidUpdate(prevProps, prevState) {
		const {
			hrmPayrollDetailBpStore
		} = this.props, {
			otherCols
		} = hrmPayrollDetailBpStore;

		const total = 500 - $(".detail-first-col").width();
		let actual = 0;

		$(".detail-other-col").css('width',total);

		$(".other-col-item").each(function() {
			actual += $(this).width();
		});

		const average = (total - actual) / otherCols.length;

		if (average > 0) {
			$(".other-col-item").each(function() {
				$(this).css('width', $(this).width() + average);
			});
		}
	}

	render() {
		const {
			hrmPayrollDetailBpStore
		} = this.props, {
			loading,
			imgId,
			data,
			displayType,
			financeExpand,
			defaultImg,
			title,
			hasPayrollDetail,
			notAuth,
			fbDialogStore,
			handleTextareaChange,
		} = hrmPayrollDetailBpStore, {
			isNeedSecondPwdVerify,
			dialogStore,
		} = financeExpand, {
			visible
		} = dialogStore;

		if(notAuth){
			return (
				<div className='salary-pre'>
					<AlertPage ecId={`${this && this.props && this.props.ecId || ''}_AlertPage@937htx`} loading={false}/>
		        </div>
			)
		}

		if (isNeedSecondPwdVerify) {
			return (
				<div className='salary-pre'>
					<AlertPage ecId={`${this && this.props && this.props.ecId || ''}_AlertPage@rd199c`} loading={financeExpand.loading}/>
		           {
		             visible && <VerifyResourceID ecId={`${this && this.props && this.props.ecId || ''}_VerifyResourceID@xbjiho`} store={financeExpand} />
		           }
		        </div>
			)
		}

		const {buttons,dropMenuDatas} = this.getButtons();

		return (
			<CenterSpin ecId={`${this && this.props && this.props.ecId || ''}_CenterSpin@oxw475`} loading={loading}>
				<div className='hrm-payroll-bp'>
					<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@myx2bu`} 
						iconBgcolor= '#217346'
						icon= {<i className='icon-coms-hrm'/>}
						title={title}
						buttons={buttons}
						showDropIcon
						dropMenuDatas={dropMenuDatas}
					>
						<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@c79j6h`} datas={dropMenuDatas} >
							{
								hasPayrollDetail ? (
									<div className='payroll-detail'>
										{ (imgId || defaultImg) && (
											<img src={addContentPath(imgId ? `/weaver/weaver.file.FileDownload?fileid=${imgId}` : defaultImg)} className="img"/>
										) }
										<div className='detail-wrap'>
											<Detail ecId={`${this && this.props && this.props.ecId || ''}_Detail@935ma0`} store={hrmPayrollDetailBpStore}/>
										</div>
									</div>
								) : (
									<div className="none-detail">
										<i className="icon-coms-NoData"/>
										<span>{getLabel(83553,"暂无数据")}</span>
									</div>
								)
							}
						</WeaRightMenu>
					</WeaTop>
					<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@rc64jy`} store={fbDialogStore}>
						<WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@ifnb28`} style={{padding: 20}} minRows={6} onChange={handleTextareaChange}/>
					</Dialog>
				</div>
			</CenterSpin>
		);
	}
}