306 lines
12 KiB
JavaScript
306 lines
12 KiB
JavaScript
import React from "react";
|
||
import {
|
||
WeaCheckbox,
|
||
WeaFormItem,
|
||
WeaHelpfulTip,
|
||
WeaInput,
|
||
WeaInputNumber,
|
||
WeaLocaleProvider,
|
||
WeaSearchGroup,
|
||
WeaSelect,
|
||
WeaTimePicker
|
||
} from "ecCom";
|
||
import { inject, observer } from "mobx-react";
|
||
import { getReplenishRuleSetOptions } from "../../../apis/payroll";
|
||
import { commonEnumList } from "../../../apis/payrollFiles";
|
||
import moment from "moment";
|
||
import { toJS } from "mobx";
|
||
import "./index.less";
|
||
|
||
|
||
const getLabel = WeaLocaleProvider.getLabel;
|
||
@inject("payrollStore")
|
||
@observer
|
||
export default class BaseInformForm extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
inited: false,
|
||
options: [],
|
||
replenishRuleOptions: [],
|
||
salaryMonthOptions: [],
|
||
request: {}
|
||
};
|
||
}
|
||
|
||
componentWillMount() {
|
||
const { payrollStore } = this.props;
|
||
const { getPayrollBaseForm } = payrollStore;
|
||
const templateBaseData = window.localStorage.getItem("template-basedata") || "{}";
|
||
this.commonEnumList();
|
||
getPayrollBaseForm(this.props.id).then(data => {
|
||
this.setState(
|
||
{
|
||
replenishRuleOptions: _.map(data.replenishRuleSetOption, it => ({ key: it.id, showname: it.content })),
|
||
options: _.isEmpty(toJS(data.salarySobOptions)) ? [{ key: "", showname: "" }] : [{
|
||
key: "",
|
||
showname: ""
|
||
}, ...toJS(data.salarySobOptions)],
|
||
request: {
|
||
...data.templateBaseData,
|
||
msgStatus: !this.props.id ? "1" : data.templateBaseData.msgStatus,
|
||
reissueRule: data.templateBaseData.replenishRule ? "1" : "0",
|
||
...JSON.parse(templateBaseData),
|
||
sendEmail: "",
|
||
autoSendStatus: !_.isNil(data.templateBaseData.autoSendStatus) ? data.templateBaseData.autoSendStatus : false
|
||
}
|
||
}, () => {
|
||
this.props.onChange && this.props.onChange(this.state.request);
|
||
this.setState({
|
||
inited: true
|
||
});
|
||
}
|
||
);
|
||
});
|
||
JSON.parse(templateBaseData).salarySob && this.getReplenishRuleSetOptions({ salarySobId: JSON.parse(templateBaseData).salarySob });
|
||
}
|
||
|
||
handleChange = (params) => {
|
||
let request = { ...this.state.request, ...params };
|
||
this.setState({
|
||
request
|
||
}, () => {
|
||
if (this.state.request.reissueRule === "1" && this.state.request.salarySob) {
|
||
// TODO：获取规则设置枚举项
|
||
this.getReplenishRuleSetOptions();
|
||
}
|
||
});
|
||
this.props.onChange && this.props.onChange(request);
|
||
};
|
||
getReplenishRuleSetOptions = (params = {}) => {
|
||
const { request } = this.state;
|
||
getReplenishRuleSetOptions({ salarySobId: request.salarySob, ...params }).then(({ status, data }) => {
|
||
if (status && !_.isEmpty(data)) {
|
||
this.setState({
|
||
replenishRuleOptions: _.map(data, it => ({ key: it.id, showname: it.content }))
|
||
});
|
||
}
|
||
});
|
||
};
|
||
commonEnumList = () => {
|
||
commonEnumList({ enumClass: "com.engine.salary.enums.salarysend.SalaryAutoSendCycleTypeEnum" })
|
||
.then(({ status, data }) => {
|
||
if (status && !_.isEmpty(data)) {
|
||
this.setState({
|
||
salaryMonthOptions: _.map(data, it => ({ key: it.value.toString(), showname: it.defaultLabel }))
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
render() {
|
||
const { request, options, replenishRuleOptions, salaryMonthOptions } = this.state;
|
||
const {
|
||
salarySob, name, description, replenishName, replenishRule, reissueRule, msgStatus, emailStatus,
|
||
ackFeedbackStatus, autoAckDays, feedbackUrl, autoSendStatus, autoSendDayOfMonth, autoSendTimeOfDay,
|
||
autoSendCycleType
|
||
} = request;
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<WeaSearchGroup title="基础信息" items={[]} needTigger showGroup col={1} className="payrollBaseInfoWrapper">
|
||
<WeaFormItem
|
||
label="薪资账套"
|
||
labelCol={{ span: 6 }}
|
||
wrapperCol={{ span: 18 }}
|
||
>
|
||
{
|
||
this.state.inited &&
|
||
<WeaSelect
|
||
disabled={this.props.id}
|
||
viewAttr={3}
|
||
options={options}
|
||
value={salarySob ? salarySob : ""}
|
||
style={{ width: 200 }}
|
||
onChange={value => this.handleChange({ salarySob: value })}/>
|
||
}
|
||
</WeaFormItem>
|
||
<WeaFormItem
|
||
label="工资单模板名称"
|
||
labelCol={{ span: 6 }}
|
||
wrapperCol={{ span: 18 }}
|
||
>
|
||
<WeaInput
|
||
value={name}
|
||
viewAttr={3}
|
||
onChange={value => this.handleChange({ name: value })}
|
||
/>
|
||
</WeaFormItem>
|
||
<WeaFormItem
|
||
label="补发工资单模板名称"
|
||
labelCol={{ span: 6 }}
|
||
wrapperCol={{ span: 18 }}
|
||
>
|
||
<WeaInput
|
||
value={replenishName}
|
||
viewAttr={3}
|
||
onChange={value => this.handleChange({ replenishName: value })}
|
||
/>
|
||
</WeaFormItem>
|
||
<WeaFormItem
|
||
label="补发工资单名单生成规则"
|
||
labelCol={{ span: 6 }}
|
||
wrapperCol={{ span: 18 }}
|
||
>
|
||
<WeaSelect
|
||
options={[{ key: "0", showname: "全部" }, { key: "1", showname: "按规则" }]}
|
||
value={reissueRule}
|
||
detailtype={3}
|
||
viewAttr={3}
|
||
onChange={value => this.handleChange({ reissueRule: value })}
|
||
/>
|
||
</WeaFormItem>
|
||
{
|
||
reissueRule !== "0" &&
|
||
<WeaFormItem
|
||
label="规则设置"
|
||
labelCol={{ span: 6 }}
|
||
wrapperCol={{ span: 18 }}
|
||
>
|
||
<WeaSelect
|
||
options={replenishRuleOptions}
|
||
value={replenishRule}
|
||
viewAttr={3}
|
||
onChange={value => this.handleChange({ replenishRule: value })}
|
||
/>
|
||
</WeaFormItem>
|
||
}
|
||
<WeaFormItem
|
||
label="备注"
|
||
labelCol={{ span: 6 }}
|
||
wrapperCol={{ span: 18 }}
|
||
>
|
||
<WeaInput
|
||
value={description}
|
||
onChange={value => this.handleChange({ description: value })}
|
||
/>
|
||
</WeaFormItem>
|
||
</WeaSearchGroup>
|
||
<WeaSearchGroup title={getLabel(111, "发送设置")} items={[]} needTigger showGroup col={1}
|
||
className="payrollBaseInfoWrapper">
|
||
<WeaFormItem label={getLabel(111, "系统消息")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
|
||
<WeaCheckbox value={msgStatus ? "1" : "0"} display="switch"
|
||
onChange={value => this.handleChange({ msgStatus: value === "1" })}/>
|
||
</WeaFormItem>
|
||
<WeaFormItem label={getLabel(111, "邮件")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
|
||
<WeaCheckbox value={emailStatus ? "1" : "0"} display="switch"
|
||
onChange={value => this.handleChange({ emailStatus: value === "1" })}/>
|
||
</WeaFormItem>
|
||
<WeaFormItem label={getLabel(111, "定时发送")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
|
||
<WeaCheckbox value={autoSendStatus ? "1" : "0"} display="switch"
|
||
onChange={value => {
|
||
this.handleChange({
|
||
autoSendStatus: value === "1",
|
||
autoSendDayOfMonth: value === "1" ? "1" : null,
|
||
autoSendTimeOfDay: value === "1" ? "09:00" : null,
|
||
autoSendCycleType: value === "1" ? 1 : null
|
||
});
|
||
}}/>
|
||
<WeaHelpfulTip title={getLabel(111, "开启后，还需在计划任务中配置定时任务，执行工资单定时发送任务；")}
|
||
style={{ marginLeft: 10 }}
|
||
placement="top" width={200}/>
|
||
</WeaFormItem>
|
||
{
|
||
autoSendStatus &&
|
||
<WeaFormItem label={getLabel(111, "发送时间")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
|
||
<SendTimeComp
|
||
salaryMonthOptions={salaryMonthOptions}
|
||
value={{
|
||
autoSendDayOfMonth,
|
||
autoSendTimeOfDay,
|
||
autoSendCycleType
|
||
}}
|
||
onChange={this.handleChange}
|
||
/>
|
||
</WeaFormItem>
|
||
}
|
||
</WeaSearchGroup>
|
||
<WeaSearchGroup title={getLabel(111, "工资单确认反馈设置")} showGroup needTigger col={1}
|
||
className="payrollBaseInfoWrapper">
|
||
<WeaFormItem label={getLabel(111, "启用工资单确认")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
|
||
<WeaCheckbox value={ackFeedbackStatus ? "1" : "0"} display="switch"
|
||
onChange={value => this.handleChange({
|
||
ackFeedbackStatus: value === "1",
|
||
autoAckDays: 7,
|
||
feedbackUrl: "/"
|
||
})}/>
|
||
</WeaFormItem>
|
||
{
|
||
ackFeedbackStatus &&
|
||
<React.Fragment>
|
||
<WeaFormItem label={getLabel(111, "自动确认超时天数")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
|
||
<WeaInputNumber
|
||
min={1} value={autoAckDays} viewAttr={3}
|
||
style={{ width: "95%" }}
|
||
onChange={autoAckDays => this.handleChange({ autoAckDays })}
|
||
/>
|
||
<WeaHelpfulTip
|
||
title={getLabel(111, "开启后，还需在计划任务中配置定时任务，执行自动确认任务；邮箱端查看工资单暂不支持确认及反馈；")}
|
||
style={{ marginLeft: 10 }}
|
||
placement="top" width={200}/>
|
||
</WeaFormItem>
|
||
<WeaFormItem label={getLabel(111, "反馈流程地址")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
|
||
<WeaInput
|
||
value={feedbackUrl} viewAttr={3}
|
||
onChange={feedbackUrl => this.handleChange({ feedbackUrl })}
|
||
/>
|
||
</WeaFormItem>
|
||
</React.Fragment>
|
||
}
|
||
</WeaSearchGroup>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
}
|
||
|
||
const SendTimeComp = (props) => {
|
||
const { value, onChange, salaryMonthOptions } = props;
|
||
const { autoSendDayOfMonth, autoSendTimeOfDay, autoSendCycleType } = value;
|
||
|
||
const handleChangeSendtime = (key, val) => {
|
||
onChange({ autoSendDayOfMonth, autoSendTimeOfDay, autoSendCycleType, [key]: val });
|
||
};
|
||
return <div className="customTimeCompWrapper">
|
||
<div>
|
||
<span>{getLabel(542604, "薪资所属月")}</span>
|
||
<WeaSelect
|
||
value={autoSendCycleType.toString()}
|
||
options={salaryMonthOptions}
|
||
onChange={v => handleChangeSendtime("autoSendCycleType", Number(v))}
|
||
/>
|
||
<WeaSelect
|
||
value={!_.isNil(autoSendDayOfMonth) ? autoSendDayOfMonth : "1"}
|
||
options={_.map(getDay(autoSendCycleType), item => ({ key: item, showname: item }))}
|
||
onChange={v => handleChangeSendtime("autoSendDayOfMonth", v)}
|
||
/>
|
||
<span>{getLabel(16992, "号")}</span>
|
||
</div>
|
||
<WeaTimePicker value={!_.isNil(autoSendTimeOfDay) ? autoSendTimeOfDay : "09:00"} size="small"
|
||
onChange={v => handleChangeSendtime("autoSendTimeOfDay", v)}/>
|
||
</div>;
|
||
};
|
||
|
||
const getDay = (num = 1) => {
|
||
let days = [];
|
||
let day = getDaysInMonth(moment().year(), moment().month() + num);
|
||
for (let i = 1; i <= day; i++) {
|
||
days.push(i);
|
||
}
|
||
return days;
|
||
};
|
||
const getDaysInMonth = (year, month) => {
|
||
month = parseInt(month, 10);
|
||
let d = new Date(year, month, 0);
|
||
return d.getDate();
|
||
};
|