104 lines
3.3 KiB
JavaScript
104 lines
3.3 KiB
JavaScript
/*
|
|
* Author: 黎永顺
|
|
* name: 设置缴纳周期
|
|
* Description:
|
|
* Date: 2023/2/1
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaDialog, WeaLocaleProvider } from "ecCom";
|
|
import { Button, Checkbox } from "antd";
|
|
import "./index.less";
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
const CheckboxGroup = Checkbox.Group;
|
|
|
|
class PaymentPeriodModal extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
allSelect: false,
|
|
monthList: []
|
|
};
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps, nextContext) {
|
|
if (nextProps.visible !== this.props.visible && nextProps.visible) {
|
|
this.setState({
|
|
monthList: _.filter(_.map(nextProps.cycleSetting.split(""), (item, index) => {
|
|
return item === "1" ? (index + 1).toString() : "";
|
|
}), child => !!child)
|
|
}, () => {
|
|
this.setState({
|
|
allSelect: this.state.monthList.length === 12
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
handleChangeALl = (e) => {
|
|
this.setState({ allSelect: e.target.checked }, () => {
|
|
if (this.state.allSelect) {
|
|
this.setState({
|
|
monthList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
|
|
}, () => this.props.onSetPaymentPeriod(this.state.monthList));
|
|
} else {
|
|
this.setState({
|
|
monthList: []
|
|
}, () => this.props.onSetPaymentPeriod(this.state.monthList));
|
|
}
|
|
});
|
|
};
|
|
handleChangeMonth = (monthList) => {
|
|
this.setState({ monthList }, () => {
|
|
this.props.onSetPaymentPeriod(this.state.monthList);
|
|
this.setState({
|
|
allSelect: this.state.monthList.length === 12
|
|
});
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const { onCancel, visible } = this.props;
|
|
const { monthList, allSelect } = this.state;
|
|
const buttons = [
|
|
<Button type="primary" onClick={onCancel}>{getLabel(537558, "保存")}</Button>,
|
|
<Button type="ghost"
|
|
onClick={() => this.setState({ monthList: [], allSelect: false })}>{getLabel(2022, "重置")}</Button>
|
|
];
|
|
const options = [
|
|
{ label: getLabel(1492, "一月"), value: "1" },
|
|
{ label: getLabel(1493, "二月"), value: "2" },
|
|
{ label: getLabel(1494, "三月"), value: "3" },
|
|
{ label: getLabel(1495, "四月"), value: "4" },
|
|
{ label: getLabel(1496, "五月"), value: "5" },
|
|
{ label: getLabel(1497, "六月"), value: "6" },
|
|
{ label: getLabel(1498, "七月"), value: "7" },
|
|
{ label: getLabel(1499, "八月"), value: "8" },
|
|
{ label: getLabel(1800, "九月"), value: "9" },
|
|
{ label: getLabel(1801, "十月"), value: "10" },
|
|
{ label: getLabel(1802, "十一月"), value: "11" },
|
|
{ label: getLabel(1803, "十二月"), value: "12" }
|
|
];
|
|
return (
|
|
<WeaDialog
|
|
onCancel={onCancel}
|
|
title={getLabel(543166, "设置缴纳周期")}
|
|
visible={visible}
|
|
style={{ width: 450 }}
|
|
buttons={buttons}
|
|
initLoadCss
|
|
className="paymentPeriodWrapper"
|
|
>
|
|
<div className="paymentPeriodContent">
|
|
<div className="paymentPeriodAll">
|
|
<Checkbox checked={allSelect} onChange={this.handleChangeALl}>{getLabel(556, "全选")}</Checkbox>
|
|
</div>
|
|
<CheckboxGroup options={options} value={monthList} onChange={this.handleChangeMonth}/>
|
|
</div>
|
|
</WeaDialog>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default PaymentPeriodModal;
|