qt
/
salary-management-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

薪资账套页面重构

This commit is contained in:
黎永顺 2022-12-12 10:24:07 +08:00
parent ac8c1ee43a
commit 1e0c47364f
3 changed files with 289 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerBaseSetting.js
View File

@ -9,6 +9,7 @@ import { WeaCheckbox, WeaFormItem, WeaHelpfulTip, WeaInput, WeaSelect, WeaTextar
import { Col, Row } from "antd";
import { inject, observer } from "mobx-react";
import { baseSettingFormItem } from "../config";
import { getLedgerBasicForm } from "../../../apis/ledger";
import { getAddMonthYearMonth, getCurrentYearMonth, getSubtractMonthYearMonth } from "../../../util/date";
import "./index.less";
@ -20,16 +21,75 @@ class LedgerBaseSetting extends Component {
this.state = {
baseForm: baseSettingFormItem,
settingBaseInfo: {
name: "", taxAgentId: "", taxableItems: "1", salaryCycleType: "3", salaryCycleFromDay: "1", taxCycleType: "3",
attendCycleType: "3", attendCycleFromDay: "1", socialSecurityCycleType: "3", description: ""
name: "",
taxAgentId: "",
taxableItems: "1",
salaryCycleType: "3",
salaryCycleFromDay: "1",
taxCycleType: "3",
attendCycleType: "3",
attendCycleFromDay: "1",
socialSecurityCycleType: "3",
description: "",
canEdit: false
}
};
}
componentDidMount() {
this.getTaxAgentSelectListAsAdmin();
if (this.props.visible && this.props.editId) {
this.getLedgerBasicForm(this.props.editId);
}
}
componentWillReceiveProps(nextProps, nextContext) {
if (nextProps.visible !== this.props.visible && nextProps.editId) {
this.getLedgerBasicForm(nextProps.editId);
}
if (nextProps.visible !== this.props.visible && !nextProps.editId) {
this.handleResetBaseInfo();
}
}
handleResetBaseInfo = () => {
this.setState({
settingBaseInfo: {
name: "",
taxAgentId: "",
taxableItems: "1",
salaryCycleType: "3",
salaryCycleFromDay: "1",
taxCycleType: "3",
attendCycleType: "3",
attendCycleFromDay: "1",
socialSecurityCycleType: "3",
description: "",
canEdit: false
}
});
};
getLedgerBasicForm = (id) => {
getLedgerBasicForm({ id }).then(({ status, data }) => {
if (status) {
const { basicForm } = data;
const { settingBaseInfo } = this.state;
let tmpV = {};
_.map(Object.keys(settingBaseInfo), key => {
tmpV[key] = basicForm[key].toString();
});
this.setState({
settingBaseInfo: {
...settingBaseInfo,
...tmpV
}
}, () => {
this.props.onSaveParams(this.state.settingBaseInfo);
});
}
});
};
getTaxAgentSelectListAsAdmin = () => {
const { taxAgentStore } = this.props;
const { getTaxAgentSelectListAsAdmin } = taxAgentStore;
@ -91,8 +151,9 @@ class LedgerBaseSetting extends Component {
type === "SELECT" ?
<WeaSelect value={settingBaseInfo[key]} options={options} viewAttr={3}
onChange={(v) => this.handleChangeField(key, v)}/> :
type === "CUSTOM" ? <CustomSelect list={children} baseInfo={settingBaseInfo}
onChange={(key, v) => this.handleChangeField(key, v)}/> : null
type === "CUSTOM" ?
<CustomSelect list={children} baseInfo={settingBaseInfo} inputStr={key}
onChange={(key, v) => this.handleChangeField(key, v)}/> : null
}
</WeaFormItem>;
})
@ -108,7 +169,10 @@ class LedgerBaseSetting extends Component {
export default LedgerBaseSetting;
const CustomSelect = (props) => {
const { list, baseInfo, onChange } = props;
const { list, baseInfo, onChange, inputStr } = props;
const { salaryCycleType, salaryCycleFromDay, attendCycleType, attendCycleFromDay } = baseInfo;
const salaryCycleStrObj = initPeriodStr("inputStr", salaryCycleType, salaryCycleFromDay);
const attendCycleStrObj = initPeriodStr("inputStr", attendCycleType, attendCycleFromDay);
return <Row gutter={10} key={key}>
{
_.map(list, item => {
@ -119,11 +183,21 @@ const CustomSelect = (props) => {
</Col>;
})
}
<Col span={4} className="desc">111</Col>
<Col span={12}
className="desc">{inputStr === "salaryCycleStrObj" ? salaryCycleStrObj.inputStr : attendCycleStrObj.inputStr}</Col>
</Row>;
};
const MonthCycleDesc = (props) => {
const { taxCycleType, socialSecurityCycleType } = props;
const {
taxCycleType,
socialSecurityCycleType,
salaryCycleFromDay,
salaryCycleType,
attendCycleType,
attendCycleFromDay
} = props;
const salaryCycleStrObj = initPeriodStr("salaryCycleStr", salaryCycleType, salaryCycleFromDay);
const attendCycleStrObj = initPeriodStr("attendCycleStr", attendCycleType, attendCycleFromDay);
return <div className="baseSettingRight">
<div className="title">月份周期说明</div>
<div className="descContent">
@ -133,17 +207,29 @@ const MonthCycleDesc = (props) => {
</div>
<div>根据您当前的选择，相应的周期为：</div>
<div className="descTitle">薪资周期</div>
<div>2022-12-04至2023-01-03</div>
<div>
<span className="notice">{getStartDate(salaryCycleType, salaryCycleFromDay)}</span>至
<span className="notice">{salaryCycleStrObj.date}</span>
</div>
<div className="descTitle">税款所属期</div>
<div className="notice">{getMonth(taxCycleType)}</div>
<div className="descTitle">考勤取值周期</div>
<div>2022-12-04至2023-01-03</div>
<div>
<span className="notice">{getStartDate(attendCycleType, attendCycleFromDay)}</span>至
<span className="notice">{attendCycleStrObj.date}</span>
</div>
<div className="descTitle">福利台账月份</div>
<div>引用<span className="notice">{getMonth(socialSecurityCycleType)}</span>的福利台账数据</div>
</div>
</div>;
};
// 获取开始日期
const getStartDate = (salaryCycleType, day) => {
day = Number(day);
return getMonth(salaryCycleType) + "-" + (day < 10 ? "0" + day : day);
};
const getMonth = (salaryCycleType) => {
switch (salaryCycleType) {
case "1": // 上上月
@ -156,3 +242,62 @@ const getMonth = (salaryCycleType) => {
return getAddMonthYearMonth(1);
}
};
const initPeriodStr = (periodStrType, types, fromDay) => {
let str = "", tmpDate = null;
switch (types) {
case "1":
tmpDate = moment().subtract(2, "month");
const is_31H = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
if (fromDay == 1) {
tmpDate = moment().subtract(2, "month").endOf("month");
str = `至上上月最后一天`;
} else {
tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
.add(is_31H ? 30 : 29, "days");
str = `至上月${moment(tmpDate).date()}号`;
}
break;
case "2":
tmpDate = moment().subtract(1, "month");
const is_31 = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
if (fromDay == 1) {
tmpDate = moment().subtract(1, "month").endOf("month");
str = `至上月最后一天`;
} else {
tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
.add(is_31 ? 30 : 29, "days");
str = `至本月${moment(tmpDate).date()}号`;
}
break;
case "3":
tmpDate = moment().add(0, "month");
const is_31K = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
if (fromDay == 1) {
tmpDate = moment().endOf("month");
str = `至本月最后一天`;
} else {
tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
.add(is_31K ? 30 : 29, "days");
str = `至下月${moment(tmpDate).date()}号`;
}
break;
case "4":
tmpDate = moment().add(1, "month");
const is_31L = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
if (fromDay == 1) {
tmpDate = moment().add(1, "month").endOf("month");
str = `至下月最后一天`;
} else {
tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
.add(is_31L ? 30 : 29, "days");
str = `至下下月${moment(tmpDate).date()}号`;
}
break;
default:
break;
}
return {
[periodStrType]: str,
date: moment(tmpDate).format("YYYY-MM-DD")
};
};

18
pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSlide.js
View File

@ -30,15 +30,15 @@ class LedgerSlide extends Component {
this.state = {
current: 0,
loading: false,
taxAgentId: "",
baseSettingInfo: {}
};
}
saveLedgerBasic = () => {
const { baseSettingInfo, current } = this.state;
const { description, ...extra } = baseSettingInfo;
const bool = _.every(Object.keys(extra), key => !!baseSettingInfo[key]);
const { editId } = this.props;
const { description, canEdit, ...extra } = baseSettingInfo;
const bool = _.every(Object.keys(extra), key => !!extra[key]);
if (!bool || _.isEmpty(baseSettingInfo)) {
Modal.warning({
title: "信息确认",
@ -47,13 +47,13 @@ class LedgerSlide extends Component {
return false;
}
this.setState({ loading: true });
saveLedgerBasic(baseSettingInfo).then(({ status, errormsg }) => {
saveLedgerBasic({ ...extra, description, id: editId }).then(({ status, errormsg }) => {
this.setState({ loading: false });
if (status) {
const { onRefreshList } = this.props;
message.success("保存成功");
this.setState({ current: current + 1 });
onRefreshList();
!editId && this.setState({ current: current + 1 });
} else {
message.error(errormsg || "保存失败");
}
@ -139,8 +139,8 @@ class LedgerSlide extends Component {
};
render() {
const { title, visible, taxAgentStore: { showOperateBtn } } = this.props;
const { current, taxAgentId } = this.state;
const { title, visible, editId, taxAgentStore: { showOperateBtn } } = this.props;
const { current } = this.state;
return (
<WeaSlideModal
className="slideOuterWrapper"
@ -153,7 +153,7 @@ class LedgerSlide extends Component {
title={
<SlideModalTitle
subtitle={title}
tabs={taxAgentId ? tabs : []}
tabs={editId ? tabs : []}
loading={false}
showOperateBtn={showOperateBtn}
editable={false}
@ -167,7 +167,7 @@ class LedgerSlide extends Component {
content={
<div className="ledgerSlideContent">
{
!taxAgentId &&
!editId &&
<WeaSteps current={current} style={{ margin: "20px 0" }}>
{
_.map(tabs, item => {

252
pc4mobx/hrmSalary/pages/ledgerPage/config.js
View File

@ -57,7 +57,7 @@ export const baseSettingFormItem = [
]
},
{
key: "salaryCycle",
key: "salaryCycleStrObj",
label: "薪资周期",
type: "CUSTOM",
children: [
@ -92,159 +92,159 @@ export const baseSettingFormItem = [
type: "SELECT",
options: [
{
key: '1',
key: "1",
selected: true,
showname: '1号'
showname: "1号"
},
{
key: '2',
key: "2",
selected: false,
showname: '2号'
showname: "2号"
},
{
key: '3',
key: "3",
selected: false,
showname: '3号'
showname: "3号"
},
{
key: '4',
key: "4",
selected: false,
showname: '4号'
showname: "4号"
},
{
key: '5',
key: "5",
selected: false,
showname: '5号'
showname: "5号"
},
{
key: '6',
key: "6",
selected: false,
showname: '6号'
showname: "6号"
},
{
key: '7',
key: "7",
selected: false,
showname: '7号'
showname: "7号"
},
{
key: '8',
key: "8",
selected: false,
showname: '8号'
showname: "8号"
},
{
key: '9',
key: "9",
selected: false,
showname: '9号'
showname: "9号"
},
{
key: '10',
key: "10",
selected: false,
showname: '10号'
showname: "10号"
},
{
key: '11',
key: "11",
selected: false,
showname: '11号'
showname: "11号"
},
{
key: '12',
key: "12",
selected: false,
showname: '12号'
showname: "12号"
},
{
key: '13',
key: "13",
selected: false,
showname: '13号'
showname: "13号"
},
{
key: '14',
key: "14",
selected: false,
showname: '14号'
showname: "14号"
},
{
key: '15',
key: "15",
selected: false,
showname: '15号'
showname: "15号"
},
{
key: '16',
key: "16",
selected: false,
showname: '16号'
showname: "16号"
},
{
key: '17',
key: "17",
selected: false,
showname: '17号'
showname: "17号"
},
{
key: '18',
key: "18",
selected: false,
showname: '18号'
showname: "18号"
},
{
key: '19',
key: "19",
selected: false,
showname: '19号'
showname: "19号"
},
{
key: '20',
key: "20",
selected: false,
showname: '20号'
showname: "20号"
},
{
key: '21',
key: "21",
selected: false,
showname: '21号'
showname: "21号"
},
{
key: '22',
key: "22",
selected: false,
showname: '22号'
showname: "22号"
},
{
key: '23',
key: "23",
selected: false,
showname: '23号'
showname: "23号"
},
{
key: '24',
key: "24",
selected: false,
showname: '24号'
showname: "24号"
},
{
key: '25',
key: "25",
selected: false,
showname: '25号'
showname: "25号"
},
{
key: '26',
key: "26",
selected: false,
showname: '26号'
showname: "26号"
},
{
key: '27',
key: "27",
selected: false,
showname: '27号'
showname: "27号"
},
{
key: '28',
key: "28",
selected: false,
showname: '28号'
showname: "28号"
},
{
key: '29',
key: "29",
selected: false,
showname: '29号'
showname: "29号"
},
{
key: '30',
key: "30",
selected: false,
showname: '30号'
showname: "30号"
},
{
key: '31',
key: "31",
selected: false,
showname: '31号'
showname: "31号"
}
]
}
@ -278,7 +278,7 @@ export const baseSettingFormItem = [
]
},
{
key: "attendancePeriod",
key: "attendCycleStrObj",
label: "考勤周期",
type: "CUSTOM",
children: [
@ -313,159 +313,159 @@ export const baseSettingFormItem = [
type: "SELECT",
options: [
{
key: '1',
key: "1",
selected: true,
showname: '1号'
showname: "1号"
},
{
key: '2',
key: "2",
selected: false,
showname: '2号'
showname: "2号"
},
{
key: '3',
key: "3",
selected: false,
showname: '3号'
showname: "3号"
},
{
key: '4',
key: "4",
selected: false,
showname: '4号'
showname: "4号"
},
{
key: '5',
key: "5",
selected: false,
showname: '5号'
showname: "5号"
},
{
key: '6',
key: "6",
selected: false,
showname: '6号'
showname: "6号"
},
{
key: '7',
key: "7",
selected: false,
showname: '7号'
showname: "7号"
},
{
key: '8',
key: "8",
selected: false,
showname: '8号'
showname: "8号"
},
{
key: '9',
key: "9",
selected: false,
showname: '9号'
showname: "9号"
},
{
key: '10',
key: "10",
selected: false,
showname: '10号'
showname: "10号"
},
{
key: '11',
key: "11",
selected: false,
showname: '11号'
showname: "11号"
},
{
key: '12',
key: "12",
selected: false,
showname: '12号'
showname: "12号"
},
{
key: '13',
key: "13",
selected: false,
showname: '13号'
showname: "13号"
},
{
key: '14',
key: "14",
selected: false,
showname: '14号'
showname: "14号"
},
{
key: '15',
key: "15",
selected: false,
showname: '15号'
showname: "15号"
},
{
key: '16',
key: "16",
selected: false,
showname: '16号'
showname: "16号"
},
{
key: '17',
key: "17",
selected: false,
showname: '17号'
showname: "17号"
},
{
key: '18',
key: "18",
selected: false,
showname: '18号'
showname: "18号"
},
{
key: '19',
key: "19",
selected: false,
showname: '19号'
showname: "19号"
},
{
key: '20',
key: "20",
selected: false,
showname: '20号'
showname: "20号"
},
{
key: '21',
key: "21",
selected: false,
showname: '21号'
showname: "21号"
},
{
key: '22',
key: "22",
selected: false,
showname: '22号'
showname: "22号"
},
{
key: '23',
key: "23",
selected: false,
showname: '23号'
showname: "23号"
},
{
key: '24',
key: "24",
selected: false,
showname: '24号'
showname: "24号"
},
{
key: '25',
key: "25",
selected: false,
showname: '25号'
showname: "25号"
},
{
key: '26',
key: "26",
selected: false,
showname: '26号'
showname: "26号"
},
{
key: '27',
key: "27",
selected: false,
showname: '27号'
showname: "27号"
},
{
key: '28',
key: "28",
selected: false,
showname: '28号'
showname: "28号"
},
{
key: '29',
key: "29",
selected: false,
showname: '29号'
showname: "29号"
},
{
key: '30',
key: "30",
selected: false,
showname: '30号'
showname: "30号"
},
{
key: '31',
key: "31",
selected: false,
showname: '31号'
showname: "31号"
}
]
}