102 lines
3.0 KiB
JavaScript
102 lines
3.0 KiB
JavaScript
/*
|
|
* Author: 黎永顺
|
|
* name: 设置缴纳周期
|
|
* Description:
|
|
* Date: 2023/2/1
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaDialog } from "ecCom";
|
|
import { Button, Checkbox } from "antd";
|
|
import "./index.less";
|
|
|
|
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}>保存</Button>,
|
|
<Button type="ghost" onClick={() => this.setState({ monthList: [], allSelect: false })}>重置</Button>
|
|
];
|
|
const options = [
|
|
{ label: "一月", value: "1" },
|
|
{ label: "二月", value: "2" },
|
|
{ label: "三月", value: "3" },
|
|
{ label: "四月", value: "4" },
|
|
{ label: "五月", value: "5" },
|
|
{ label: "六月", value: "6" },
|
|
{ label: "七月", value: "7" },
|
|
{ label: "八月", value: "8" },
|
|
{ label: "九月", value: "9" },
|
|
{ label: "十月", value: "10" },
|
|
{ label: "十一月", value: "11" },
|
|
{ label: "十二月", value: "12" }
|
|
];
|
|
return (
|
|
<WeaDialog
|
|
onCancel={onCancel}
|
|
title="设置缴纳周期"
|
|
visible={visible}
|
|
style={{ width: 450 }}
|
|
buttons={buttons}
|
|
initLoadCss
|
|
className="paymentPeriodWrapper"
|
|
>
|
|
<div className="paymentPeriodContent">
|
|
<div className="paymentPeriodAll">
|
|
<Checkbox checked={allSelect} onChange={this.handleChangeALl}>全选</Checkbox>
|
|
</div>
|
|
<CheckboxGroup options={options} value={monthList} onChange={this.handleChangeMonth}/>
|
|
</div>
|
|
</WeaDialog>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default PaymentPeriodModal;
|