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

feature/2.9.42310.01-工资单发放页面重构单

This commit is contained in:
黎永顺 2023-10-17 17:17:01 +08:00
parent 2e613014fe
commit 7e30f73069
7 changed files with 416 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
pc4mobx/hrmSalary/pages/payrollRelease/components/conditions.js
View File

@ -25,7 +25,7 @@ export const tempBaseSetConditions = [
{
colSpan: 1,
conditionType: "SELECT",
domkey: ["salarySobId"],
domkey: ["salarySob"],
fieldcol: 14,
label: "薪资账套",
lanId: 538010,
@ -186,3 +186,88 @@ export const tempBaseSetFbConditions = [
}
];
//正常工资单模板主题设置
export const tempNormalSetConditions = [
{
items: [
{
colSpan: 1,
conditionType: "INPUT",
domkey: ["theme"],
fieldcol: 10,
label: "工资单标题",
lanId: 543588,
labelcol: 6,
value: "",
rules: "required|string",
viewAttr: 3
},
{
colSpan: 1,
conditionType: "UPLOAD",
domkey: ["background"],
fieldcol: 10,
label: "工资单图片",
lanId: 543589,
labelcol: 6,
value: "",
showClearAll: false,
listType: "img",
limitType: "jpg,jpeg,png",
uploadUrl: "/api/doc/upload/uploadFile",
category: "string",
maxFilesNumber: 1,
viewAttr: 2
},
{
colSpan: 1,
conditionType: "INPUT",
domkey: ["textContent"],
fieldcol: 14,
label: "文本内容",
lanId: 20749,
labelcol: 6,
value: "",
viewAttr: 2
},
{
colSpan: 1,
conditionType: "SELECT",
domkey: ["textContentPosition"],
fieldcol: 14,
label: "文本内容位置",
lanId: 543590,
labelcol: 6,
options: [],
value: "",
detailtype: 3,
viewAttr: 2
},
{
colSpan: 1,
conditionType: "SWITCH",
domkey: ["salaryItemNullStatus"],
fieldcol: 2,
label: "薪资项为空时不显示",
lanId: 543591,
labelcol: 6,
value: "",
viewAttr: 2
},
{
colSpan: 1,
conditionType: "SWITCH",
domkey: ["salaryItemZeroStatus"],
fieldcol: 2,
label: "薪资项为0时不显示",
lanId: 543592,
labelcol: 6,
value: "",
viewAttr: 2
}
],
defaultshow: true,
title: "themeSet"
}
];

67
pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempBaseSet/index.js
View File

@ -5,6 +5,7 @@
* Date: 2023/10/13
*/
import React, { Component } from "react";
import { toJS } from "mobx";
import { WeaFormItem, WeaLocaleProvider, WeaTools } from "ecCom";
import { tempBaseSetConditions, tempBaseSetFbConditions } from "../conditions";
import { getSearchs } from "../../../../util";
@ -36,6 +37,7 @@ class Index extends Component {
componentWillReceiveProps(nextProps, nextContext) {
if (nextProps.visible !== this.props.visible && nextProps.visible) this.getPayrollBaseForm(nextProps);
if (nextProps.visible !== this.props.visible && !nextProps.visible) {
nextProps.payrollStore.setTmplDataSource({});
nextProps.payrollStore.initPayrollTempForm();
nextProps.payrollStore.initPayrollTempFeedbackForm();
}
@ -52,17 +54,22 @@ class Index extends Component {
});
};
getPayrollBaseForm = (props) => {
const { tmplId: id, payrollStore: { payrollTempForm, payrollTempFeedbackForm } } = props;
getPayrollBaseForm({ id }).then(({ status, data }) => {
const { tmplId: id, payrollStore: { payrollTempForm, payrollTempFeedbackForm, tmplDataSource } } = props;
getPayrollBaseForm({ id }).then(async ({ status, data }) => {
if (status) {
const { salaryTemplateBaseSet: { salarySobOptions } } = data;
const { salaryTemplateBaseSet: { salarySobOptions, data: result } } = data;
const {
autoSendDayOfMonth = "1", autoSendTimeOfDay = "09:00", autoSendCycleType = "1",
...fieldsEchoData
} = { ...result, ...toJS(tmplDataSource) };
const { data: replenishRuleOptions } = (fieldsEchoData["reissueRule"] === "1" && fieldsEchoData["salarySob"]) ? await getReplenishRuleSetOptions({ salarySobId: fieldsEchoData["salarySob"] }) : [];
this.setState({
conditions: _.map(tempBaseSetConditions, it => {
if (it.title === "baseSet") {
return {
...it, title: getLabel(82743, "基础信息"),
items: _.map(it.items, o => {
if (getKey(o) === "salarySobId") {
if (getKey(o) === "salarySob") {
return {
...o, options: _.map(salarySobOptions, g => ({ key: g.id.toString(), showname: g.name }))
};
@ -73,6 +80,11 @@ class Index extends Component {
{ key: "1", showname: getLabel(542696, "按规则") }
]
};
} else if (getKey(o) === "replenishRule") {
return {
...o, hide: (_.isNil(fieldsEchoData["reissueRule"]) || fieldsEchoData["reissueRule"] === "0"),
options: _.map(replenishRuleOptions, t => ({ key: t.id, showname: t.content }))
};
}
return { ...o };
})
@ -100,8 +112,14 @@ class Index extends Component {
if (getKey(o) === "autoAckDays") {
return {
...o,
hide: _.isNil(fieldsEchoData["ackFeedbackStatus"]) ? o.hide : !fieldsEchoData["ackFeedbackStatus"],
helpfulTitle: getLabel(544273, "开启后，还需在计划任务中配置定时任务，执行自动确认任务；邮箱端查看工资单暂不支持确认及反馈；")
};
} else if (getKey(o) === "feedbackUrl") {
return {
...o,
hide: _.isNil(fieldsEchoData["ackFeedbackStatus"]) ? o.hide : !fieldsEchoData["ackFeedbackStatus"]
};
}
return { ...o };
})
@ -111,6 +129,41 @@ class Index extends Component {
}, () => {
payrollTempForm.initFormFields(this.state.conditions);
payrollTempFeedbackForm.initFormFields(this.state.fbConditions);
//字段回显
const tempBaseSetDomkeys = _.reduce(tempBaseSetConditions, (pre, cur) => ([...pre, ..._.map(cur.items, o => getKey(o))]), []),
tempBaseSetFbDomkeys = _.reduce(tempBaseSetFbConditions, (pre, cur) => ([...pre, ..._.map(cur.items, o => getKey(o))]), []);
_.map(tempBaseSetDomkeys, it => {
switch (it) {
case "msgStatus":
payrollTempForm.updateFields({ [it]: _.isNil(fieldsEchoData[it]) ? "1" : fieldsEchoData[it] ? "1" : "0" });
break;
case "reissueRule":
payrollTempForm.updateFields({ [it]: fieldsEchoData[it] ? fieldsEchoData[it] : "0" });
break;
case "emailStatus":
case "autoSendStatus":
payrollTempForm.updateFields({ [it]: fieldsEchoData[it] ? "1" : "0" });
break;
default:
payrollTempForm.updateFields({ [it]: fieldsEchoData[it] ? fieldsEchoData[it].toString() : "" });
break;
}
});
_.map(tempBaseSetFbDomkeys, it => {
if (it === "ackFeedbackStatus") {
payrollTempFeedbackForm.updateFields({ [it]: fieldsEchoData[it] ? "1" : "0" });
} else {
payrollTempFeedbackForm.updateFields({ [it]: fieldsEchoData[it] ? fieldsEchoData[it].toString() : "" });
}
});
this.setState({
formData: {
...this.state.formData,
autoSendDayOfMonth: !_.isNil(autoSendDayOfMonth) ? autoSendDayOfMonth : "1",
autoSendTimeOfDay: !_.isNil(autoSendTimeOfDay) ? autoSendTimeOfDay : "09:00",
autoSendCycleType: !_.isNil(autoSendCycleType) ? autoSendCycleType : "1"
}
});
this.forceUpdate();
});
}
@ -118,7 +171,7 @@ class Index extends Component {
};
handleChange = async (params) => {
const { payrollStore: { payrollTempForm } } = this.props;
const key = _.keys(params)[0], salarySobId = payrollTempForm.getFormParams().salarySobId,
const key = _.keys(params)[0], salarySobId = payrollTempForm.getFormParams().salarySob,
reissueRule = payrollTempForm.getFormParams().reissueRule;
const { data: replenishRuleOptions } = (reissueRule === "1" && salarySobId) ? await getReplenishRuleSetOptions({ salarySobId }) : [];
if (key === "reissueRule") {
@ -145,7 +198,7 @@ class Index extends Component {
payrollTempForm.initFormFields(this.state.conditions);
this.resetRequiredForm();
});
} else if (key === "salarySobId") {
} else if (key === "salarySob") {
this.setState({
conditions: _.map(this.state.conditions, it => {
if (it.title === getLabel(82743, "基础信息")) {
@ -166,7 +219,7 @@ class Index extends Component {
})
}, () => {
payrollTempForm.initFormFields(this.state.conditions);
const salarySob = payrollTempForm.getFormDatas().salarySobId;
const salarySob = payrollTempForm.getFormDatas().salarySob;
payrollTempForm.updateFields({
name: salarySob.valueSpan,
replenishName: salarySob.valueSpan + "-补发工资单"

53
pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/formRender.js Normal file
View File

@ -0,0 +1,53 @@
import { WeaSwitch } from "comsMobx";
import { WeaFormItem, WeaLocaleProvider, WeaSearchGroup, WeaTools } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;
const getKey = WeaTools.getKey;
export const payrollTempNormalSetForm = (form, condition, col, isCenter, onChange = () => void (0), insertVar = () => void (0)) => {
const { isFormInit } = form;
const formParams = form.getFormParams();
let group = [];
isFormInit && condition && condition.map(c => {
let items = [];
c.items.map(fields => {
items.push({
com: (
<WeaFormItem
label={`${fields.label}`}
labelCol={{ span: `${fields.labelcol}` }}
wrapperCol={{ span: `${fields.fieldcol}` }}
error={form.getError(fields)}
tipPosition="bottom"
>
<WeaSwitch
fieldConfig={fields}
form={form}
formParams={formParams}
onChange={onChange}
/>
{
getKey(fields) === "theme" &&
<div className="sft-variables">
<span className="sftv-tip">{getLabel(500143, "插入变量")}：</span>
<a className="sftv-item" onClick={() => insertVar("${companyName}")}>{getLabel(1976, "公司名称")}</a>
<a className="sftv-item"
onClick={() => insertVar("${salaryMonth}")}>{getLabel(542604, "薪资所属月")}</a>
</div>
}
</WeaFormItem>),
colSpan: 1,
hide: fields.hide
});
});
group.push(
<WeaSearchGroup
col={col || 1}
needTigger={true}
title={c.title}
showGroup={c.defaultshow}
items={items}
center={isCenter || false}
/>);
});
return group;
};

152
pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/index.js Normal file
View File

@ -0,0 +1,152 @@
/*
* Author: 黎永顺
* name:工资单发放-重构页面正常核算工资单模板
* Description:
* Date: 2023/10/17
*/
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaButtonIcon, WeaLocaleProvider, WeaSearchGroup, WeaTools } from "ecCom";
import { getPayrollItemList, getPayrollShowForm } from "../../../../apis/payroll";
import { tempNormalSetConditions } from "../conditions";
import { payrollTempNormalSetForm } from "./formRender";
import SalaryItemSettings from "../../../payroll/stepForm/salaryItemSettings";
const getKey = WeaTools.getKey;
const getLabel = WeaLocaleProvider.getLabel;
@inject("payrollStore")
@observer
class Index extends Component {
constructor(props) {
super(props);
this.state = {
conditions: [], salaryBillItemNameSet: {}, salaryItemSet: []
};
}
componentDidMount() {
this.getPayrollShowForm();
}
componentWillUnmount() {
const { payrollStore: { initPayrollTempNormalForm } } = this.props;
initPayrollTempNormalForm();
}
getPayrollShowForm = () => {
const { tmplId: id, payrollStore: { payrollTempNormalForm, tmplDataSource } } = this.props;
getPayrollShowForm({ id }).then(async ({ status, data }) => {
if (status) {
const { salaryTemplateShowSet, salaryTemplateSalaryItemSet: salaryItemSet, salaryBillItemNameSet } = data;
const { data: result } = salaryTemplateShowSet;
const { ...fieldsEchoData } = { ...result, ...toJS(tmplDataSource) };
this.setState({
conditions: _.map(tempNormalSetConditions, it => {
if (it.title === "themeSet") {
return {
...it, title: getLabel(543587, "主题及其他设置"),
items: _.map(it.items, o => {
if (getKey(o) === "textContentPosition") {
return {
...o, label: getLabel(o.lanId, o.label),
options: [
{ key: "1", showname: getLabel(542697, "薪资项目前") },
{ key: "2", showname: getLabel(542698, "薪资项目后") }
]
};
} else if (getKey(o) === "background") {
return {
...o, title: getLabel(20001, "上传图片")
};
}
return { ...o, label: getLabel(o.lanId, o.label) };
})
};
}
}),
salaryBillItemNameSet, salaryItemSet
}, () => {
payrollTempNormalForm.initFormFields(this.state.conditions);
//字段回显
const tempBaseSetDomkeys = _.reduce(tempNormalSetConditions, (pre, cur) => ([...pre, ..._.map(cur.items, o => getKey(o))]), []);
_.map(tempBaseSetDomkeys, it => {
switch (it) {
case "salaryItemZeroStatus":
case "salaryItemNullStatus":
payrollTempNormalForm.updateFields({ [it]: fieldsEchoData[it] ? "1" : "0" });
break;
case "background":
console.log(81, fieldsEchoData);
break;
default:
payrollTempNormalForm.updateFields({ [it]: fieldsEchoData[it] ? fieldsEchoData[it].toString() : "" });
break;
}
});
!id && this.getPayrollItemList();
});
}
});
};
getPayrollItemList = () => {
const { salaryItemSet } = this.state;
const { payrollStore: { tmplDataSource } } = this.props;
getPayrollItemList({ salarySobId: toJS(tmplDataSource).salarySob }).then(({ status, data }) => {
if (status && _.isEmpty(salaryItemSet)) {
this.setState({ salaryItemSet: data });
}
});
};
handleChange = (params) => {
const { payrollStore: { payrollTempNormalForm, setTmplDataSource, tmplDataSource } } = this.props;
const key = _.keys(params)[0];
if (key === "background") {
const background = payrollTempNormalForm.getFormDatas().background.valueObj[0].acclink;
setTmplDataSource({ ...toJS(tmplDataSource), background });
}
};
handleInsertVar = (themeVar) => {
const { payrollStore: { payrollTempNormalForm } } = this.props;
const theme = payrollTempNormalForm.getFormParams().theme;
payrollTempNormalForm.updateFields({ theme: `${theme}${themeVar}` });
};
handleChangeSalaryItem = (resultSet) => {
console.log(resultSet);
};
handleChangeSalaryItemShowNamesetting = (itemShowNamesetting) => {
console.log(itemShowNamesetting);
};
render() {
const { conditions, salaryBillItemNameSet, salaryItemSet } = this.state;
const { payrollStore: { payrollTempNormalForm, tmplDataSource } } = this.props;
return (
<React.Fragment>
{!_.isEmpty(conditions) && payrollTempNormalSetForm(payrollTempNormalForm, conditions, 1, false, this.handleChange, this.handleInsertVar)}
<WeaSearchGroup
title={
<div className="salarySetTitle">
<span>{getLabel(543593, "薪资项目设置")}</span>
<WeaButtonIcon buttonType="add" type="primary"
onClick={() => this.salaryItemSettingsRef.handleOpenModal(toJS(tmplDataSource).salarySob, getLabel(543594, "添加分类"))}/>
</div>
}
items={[]} needTigger showGroup
>
<SalaryItemSettings
ref={dom => this.salaryItemSettingsRef = dom}
dataSource={salaryItemSet} salaryTemplateId={this.props.tmplId || ""}
onChangeSalaryItem={this.handleChangeSalaryItem}
onChangeSalaryItemShowNamesetting={this.handleChangeSalaryItemShowNamesetting}
salarySobId={toJS(tmplDataSource).salarySob}
isReplenish={false} salaryBillItemNameSet={salaryBillItemNameSet}
/>
</WeaSearchGroup>
</React.Fragment>
);
}
}
export default Index;

39
pc4mobx/hrmSalary/pages/payrollRelease/components/updatePayrollTemplateSlide/index.js
View File

@ -5,10 +5,12 @@
* Date: 2023/10/13
*/
import React, { Component } from "react";
import { toJS } from "mobx";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaSlideModal, WeaSteps } from "ecCom";
import { Button, message } from "antd";
import PayrollTempBaseSet from "../payrollTempBaseSet";
import PayrollTempNormalSet from "../payrollTempNormalSet";
import { savePayroll } from "../../../../apis/payroll";
const Step = WeaSteps.Step;
@ -28,7 +30,8 @@ class Index extends Component {
save = async () => {
const {
payrollStore: {
payrollTempForm, payrollTempFeedbackForm, initPayrollTempForm, initPayrollTempFeedbackForm
payrollTempForm, payrollTempFeedbackForm, initPayrollTempForm,
initPayrollTempFeedbackForm, setTmplDataSource, tmplDataSource
}
} = this.props;
const [tempFormm, fbForm] = await Promise.all([payrollTempForm.validateForm(), payrollTempFeedbackForm.validateForm()]);
@ -37,7 +40,7 @@ class Index extends Component {
{ ackFeedbackStatus, autoAckDays, ...extraFb } = payrollTempFeedbackForm.getFormParams(),
{ formData } = this.tmpBaseSetRef.state;
const payload = {
...extraFb, ...formData, ...extraBs,
...toJS(tmplDataSource), ...extraFb, ...formData, ...extraBs,
ackFeedbackStatus: ackFeedbackStatus === "1",
autoSendStatus: autoSendStatus === "1",
emailStatus: emailStatus === "1",
@ -48,6 +51,7 @@ class Index extends Component {
this.setState({
current: this.state.current + 1
}, () => {
setTmplDataSource(payload);
initPayrollTempForm();
initPayrollTempFeedbackForm();
});
@ -57,6 +61,32 @@ class Index extends Component {
this.forceUpdate();
}
};
normalSave = () => {
const { payrollStore: { payrollTempNormalForm, setTmplDataSource, tmplDataSource } } = this.props;
payrollTempNormalForm.validateForm().then(f => {
if (f.isValid) {
const {
salaryItemNullStatus,
salaryItemZeroStatus,
background,
...extra
} = payrollTempNormalForm.getFormParams();
const payload = {
...toJS(tmplDataSource), ...extra,
salaryItemZeroStatus: salaryItemZeroStatus === "1",
salaryItemNullStatus: salaryItemNullStatus === "1"
};
this.setState({
current: this.state.current + 1
}, () => {
setTmplDataSource(payload);
});
} else {
f.showErrors();
this.forceUpdate();
}
});
};
savePayroll = (payload) => {
this.setState({ loading: true });
savePayroll(payload).then(({ status, errormsg }) => {
@ -83,7 +113,7 @@ class Index extends Component {
<React.Fragment>
<Button type="ghost"
onClick={() => this.setState({ current: current - 1 })}>{getLabel(1876, "上一步")}</Button>
<Button type="primary">{getLabel(1402, "下一步")}</Button>
<Button type="primary" onClick={this.normalSave}>{getLabel(1402, "下一步")}</Button>
<Button type="ghost">{getLabel(221, "预览")}</Button>
</React.Fragment> :
<React.Fragment>
@ -102,6 +132,9 @@ class Index extends Component {
case 0:
dom = <PayrollTempBaseSet {...this.props} ref={dom => this.tmpBaseSetRef = dom}/>;
break;
case 1:
dom = <PayrollTempNormalSet {...this.props} ref={dom => this.tmpNormalSetRef = dom}/>;
break;
default:
break;
}

24
pc4mobx/hrmSalary/pages/payrollRelease/index.less
View File

@ -137,6 +137,30 @@
}
}
}
.sft-variables {
display: flex;
align-items: center;
margin-left: 10px;
position: absolute;
top: 25%;
right: -208px;
margin-top: -2px;
.sftv-item {
margin-right: 8px;
padding: 0;
color: #5d9cec;
background-color: transparent;
}
}
.salarySetTitle {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
}
}
}

5
pc4mobx/hrmSalary/stores/payroll.js
View File

@ -16,6 +16,11 @@ export class payrollStore {
@action initPayrollTempForm = () => this.payrollTempForm = new WeaForm();
@observable payrollTempFeedbackForm = new WeaForm(); //新建编辑工资单模板-工资单确认反馈设置form
@action initPayrollTempFeedbackForm = () => this.payrollTempFeedbackForm = new WeaForm();
@observable tmplDataSource = {}; //工资单模板数据
@action setTmplDataSource = (v) => this.tmplDataSource = v;//设置工资单模板数据
@observable payrollTempNormalForm = new WeaForm(); //新建编辑工资单模板-主题设置form
@action initPayrollTempNormalForm = () => this.payrollTempNormalForm = new WeaForm();
@observable tableStore = new TableStore(); // new table