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-16 11:13:44 +08:00
parent c2efaf193b
commit 3c9cf1c730
9 changed files with 603 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pc4mobx/hrmSalary/pages/payroll/stepForm/baseInformForm.js
View File

@ -263,7 +263,7 @@ export default class BaseInformForm extends React.Component {
}
}
const SendTimeComp = (props) => {
export const SendTimeComp = (props) => {
const { value, onChange, salaryMonthOptions } = props;
const { autoSendDayOfMonth, autoSendTimeOfDay, autoSendCycleType } = value;

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

@ -18,3 +18,173 @@ export const copyConditions = [
title: ""
}
];
export const tempBaseSetConditions = [
{
items: [
{
colSpan: 1,
conditionType: "SELECT",
domkey: ["salarySobId"],
fieldcol: 14,
label: "薪资账套",
lanId: 538010,
labelcol: 6,
options: [],
value: "",
rules: "required|string",
viewAttr: 3
},
{
colSpan: 1,
conditionType: "INPUT",
domkey: ["name"],
fieldcol: 14,
label: "工资单模板名称",
rules: "required|string",
lanId: 543584,
labelcol: 6,
value: "",
viewAttr: 3
},
{
colSpan: 1,
conditionType: "INPUT",
domkey: ["replenishName"],
fieldcol: 14,
label: "补发工资单模板名称",
lanId: 543585,
labelcol: 6,
rules: "required|string",
value: "",
viewAttr: 3
},
{
colSpan: 1,
conditionType: "SELECT",
domkey: ["reissueRule"],
fieldcol: 14,
label: "补发工资单名单生成规则",
lanId: 543586,
labelcol: 6,
options: [],
value: "0",
detailtype: 3,
rules: "required|string",
viewAttr: 3
},
{
colSpan: 1,
conditionType: "SELECT",
domkey: ["replenishRule"],
fieldcol: 14,
label: "规则设置",
lanId: 126876,
labelcol: 6,
options: [],
value: "",
rules: "required|string",
hide: true,
viewAttr: 3
},
{
colSpan: 1,
conditionType: "INPUT",
domkey: ["description"],
fieldcol: 14,
label: "备注",
lanId: 536726,
labelcol: 6,
value: "",
viewAttr: 2
}
],
defaultshow: true,
title: "baseSet"
},
{
items: [
{
colSpan: 1,
conditionType: "SWITCH",
domkey: ["msgStatus"],
fieldcol: 2,
label: "系统消息",
lanId: 543707,
labelcol: 6,
value: "1",
viewAttr: 2
},
{
colSpan: 1,
conditionType: "SWITCH",
domkey: ["emailStatus"],
fieldcol: 2,
label: "邮件",
lanId: 71,
labelcol: 6,
value: "0",
viewAttr: 2
},
{
colSpan: 1,
conditionType: "SWITCH",
domkey: ["autoSendStatus"],
fieldcol: 2,
label: "定时发送",
lanId: 32028,
labelcol: 6,
value: "0",
viewAttr: 2
}
],
defaultshow: true,
title: "sendSet"
}
];
export const tempBaseSetFbConditions = [
{
items: [
{
colSpan: 1,
conditionType: "SWITCH",
domkey: ["ackFeedbackStatus"],
fieldcol: 2,
label: "启用工资单确认",
lanId: 544094,
labelcol: 6,
value: "1",
viewAttr: 2
},
{
colSpan: 1,
conditionType: "INPUTNUMBER",
domkey: ["autoAckDays"],
fieldcol: 14,
label: "自动确认超时天数",
lanId: 544095,
labelcol: 6,
value: 7,
viewAttr: 3,
hide: false,
rules: "required|string"
},
{
colSpan: 1,
conditionType: "INPUT",
domkey: ["feedbackUrl"],
fieldcol: 14,
label: "反馈流程地址",
lanId: 544096,
labelcol: 6,
value: "/",
viewAttr: 3,
hide: false,
rules: "required|string"
}
],
defaultshow: true,
title: "feedbackSet"
}
];

222
pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempBaseSet/index.js Normal file
View File

@ -0,0 +1,222 @@
/*
* Author: 黎永顺
* name:工资单发放-重构页面新建编辑模板基础设置
* Description:
* Date: 2023/10/13
*/
import React, { Component } from "react";
import { WeaFormItem, WeaLocaleProvider, WeaTools } from "ecCom";
import { tempBaseSetConditions, tempBaseSetFbConditions } from "../conditions";
import { getSearchs } from "../../../../util";
import { getPayrollBaseForm, getReplenishRuleSetOptions } from "../../../../apis/payroll";
import { commonEnumList } from "../../../../apis/archive";
import { SendTimeComp } from "../../../payroll/stepForm/baseInformForm";
const getKey = WeaTools.getKey;
const getLabel = WeaLocaleProvider.getLabel;
class Index extends Component {
constructor(props) {
super(props);
this.state = {
conditions: [], salaryMonthOptions: [], fbConditions: [],
formData: {
autoSendDayOfMonth: "",
autoSendTimeOfDay: "",
autoSendCycleType: ""
}
};
}
componentDidMount() {
this.commonEnumList();
}
componentWillReceiveProps(nextProps, nextContext) {
if (nextProps.visible !== this.props.visible && nextProps.visible) this.getPayrollBaseForm(nextProps);
if (nextProps.visible !== this.props.visible && !nextProps.visible) {
nextProps.payrollStore.initPayrollTempForm();
nextProps.payrollStore.initPayrollTempFeedbackForm();
}
}
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 }))
});
}
});
};
getPayrollBaseForm = (props) => {
const { tmplId: id, payrollStore: { payrollTempForm, payrollTempFeedbackForm } } = props;
getPayrollBaseForm({ id }).then(({ status, data }) => {
if (status) {
const { salaryTemplateBaseSet: { salarySobOptions } } = data;
this.setState({
conditions: _.map(tempBaseSetConditions, it => {
if (it.title === "baseSet") {
return {
...it, title: getLabel(82743, "基础信息"),
items: _.map(it.items, o => {
if (getKey(o) === "salarySobId") {
return {
...o, options: _.map(salarySobOptions, g => ({ key: g.id.toString(), showname: g.name }))
};
} else if (getKey(o) === "reissueRule") {
return {
...o, options: [
{ key: "0", showname: getLabel(332, "全部") },
{ key: "1", showname: getLabel(542696, "按规则") }
]
};
}
return { ...o };
})
};
} else if (it.title === "sendSet") {
return {
...it, title: getLabel(18905, "发送设置"),
items: _.map(it.items, o => {
if (getKey(o) === "autoSendStatus") {
return {
...o,
helpfulTitle: getLabel(544272, "开启后，还需在计划任务中配置定时任务，执行工资单定时发送任务；")
};
}
return { ...o };
})
};
}
}),
fbConditions: _.map(tempBaseSetFbConditions, it => {
if (it.title === "feedbackSet") {
return {
...it, title: getLabel(544092, "工资单确认反馈设置"),
items: _.map(it.items, o => {
if (getKey(o) === "autoAckDays") {
return {
...o,
helpfulTitle: getLabel(544273, "开启后，还需在计划任务中配置定时任务，执行自动确认任务；邮箱端查看工资单暂不支持确认及反馈；")
};
}
return { ...o };
})
};
}
})
}, () => {
payrollTempForm.initFormFields(this.state.conditions);
payrollTempFeedbackForm.initFormFields(this.state.fbConditions);
this.forceUpdate();
});
}
});
};
handleChange = async (params) => {
const { payrollStore: { payrollTempForm } } = this.props;
const key = _.keys(params)[0], salarySobId = payrollTempForm.getFormParams().salarySobId,
reissueRule = payrollTempForm.getFormParams().reissueRule;
const { data: replenishRuleOptions } = (reissueRule === "1" && salarySobId) ? await getReplenishRuleSetOptions({ salarySobId }) : [];
if (key === "reissueRule") {
this.setState({
conditions: _.map(this.state.conditions, it => {
if (it.title === getLabel(82743, "基础信息")) {
return {
...it, items: _.map(it.items, o => {
if (getKey(o) === "replenishRule") {
return {
...o, hide: params[key].value === "0",
options: _.map(replenishRuleOptions, t => ({ key: t.id, showname: t.content }))
};
}
return { ...o };
})
};
}
return { ...it };
})
}, () => {
payrollTempForm.initFormFields(this.state.conditions);
});
} else if (key === "salarySobId") {
this.setState({
conditions: _.map(this.state.conditions, it => {
if (it.title === getLabel(82743, "基础信息")) {
return {
...it, items: _.map(it.items, o => {
if (getKey(o) === "replenishRule") {
return {
...o, options: _.map(replenishRuleOptions, t => ({ key: t.id, showname: t.content }))
};
}
return { ...o };
})
};
}
return { ...it };
})
}, () => {
payrollTempForm.initFormFields(this.state.conditions);
const salarySob = payrollTempForm.getFormDatas().salarySobId;
payrollTempForm.updateFields({
name: salarySob.valueSpan,
replenishName: salarySob.valueSpan + "-补发工资单"
});
});
} else if (key === "autoSendStatus") {
}
this.forceUpdate();
};
handleFbChange = (params) => {
const { payrollStore: { payrollTempFeedbackForm } } = this.props;
const key = _.keys(params)[0];
if (key === "ackFeedbackStatus") {
this.setState({
fbConditions: _.map(this.state.fbConditions, it => {
if (it.title === getLabel(544092, "工资单确认反馈设置")) {
return {
...it, items: _.map(it.items, o => {
if (getKey(o) === "autoAckDays" || getKey(o) === "feedbackUrl") {
return {
...o, hide: params[key].value === "0"
};
}
return { ...o };
})
};
}
return { ...it };
})
}, () => {
payrollTempFeedbackForm.initFormFields(this.state.fbConditions);
});
}
this.forceUpdate();
};
render() {
const { conditions, fbConditions, formData, salaryMonthOptions } = this.state;
const { payrollStore: { payrollTempForm, payrollTempFeedbackForm } } = this.props;
const autoSendStatus = payrollTempForm.getFormParams().autoSendStatus;
return (
<React.Fragment>
{!_.isEmpty(fbConditions) && getSearchs(payrollTempForm, conditions, 1, false, this.handleChange)}
{
autoSendStatus === "1" &&
<WeaFormItem className="sendTime-outer" label={getLabel(18961, "发送时间")} labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}>
<SendTimeComp salaryMonthOptions={salaryMonthOptions} value={{ ...formData }}
/>
</WeaFormItem>
}
{!_.isEmpty(fbConditions) && getSearchs(payrollTempFeedbackForm, fbConditions, 1, false, this.handleFbChange)}
</React.Fragment>
);
}
}
export default Index;

22
pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTemplateTableList/index.js
View File

@ -10,6 +10,7 @@ import { WeaLocaleProvider, WeaSelect, WeaTable } from "ecCom";
import { Dropdown, Menu, message, Modal } from "antd";
import { changePayrollDefaultUse, deletePayroll, getPayrollTemplateList } from "../../../../apis/payroll";
import PayrollCopyDialog from "../payrollCopyDialog";
import UpdatePayrollTemplateSlide from "../updatePayrollTemplateSlide";
const getLabel = WeaLocaleProvider.getLabel;
@ -21,7 +22,11 @@ class Index extends Component {
this.state = {
loading: false, columns: [], dataSource: [], selectedRowKeys: [],
pageInfo: { current: 1, pageSize: 10, total: 0 }, delLoading: false,
copyDialog: { visible: false, title: "", copyId: "" }
copyDialog: { visible: false, title: "", copyId: "" },
tmplSlide: {
visible: false, tmplId: "", top: 0, width: 792, height: 100,
measureT: "%", measureX: "px", measureY: "%"
}
};
}
@ -74,10 +79,13 @@ class Index extends Component {
});
};
handleOpts = ({ key }, record) => {
const { copyDialog, selectedRowKeys } = this.state;
const { copyDialog, tmplSlide, selectedRowKeys } = this.state;
const { id } = record;
switch (key) {
case "edit":
this.setState({
tmplSlide: { ...tmplSlide, visible: true, tmplId: id }
});
break;
case "copy":
this.setState({
@ -110,7 +118,7 @@ class Index extends Component {
};
render() {
const { loading, dataSource, columns, pageInfo, copyDialog, selectedRowKeys } = this.state;
const { loading, dataSource, columns, pageInfo, copyDialog, tmplSlide, selectedRowKeys } = this.state;
const { taxAgentStore: { showOperateBtn }, forceUpdate } = this.props;
const pagination = {
...pageInfo,
@ -164,11 +172,19 @@ class Index extends Component {
}
]}
/>
{/*复制工资单模板*/}
<PayrollCopyDialog {...copyDialog}
onCancel={v => this.setState({
copyDialog: { ...copyDialog, visible: false, copyId: "" }
}, () => v === "refresh" && this.getPayrollTemplateList(this.props))}
/>
{/* 新建编辑工资单模板*/}
<UpdatePayrollTemplateSlide {...tmplSlide}
onClose={v => this.setState({
tmplSlide: { ...tmplSlide, visible: false, copyId: "" }
}, () => v === "refresh" && console.log(this.props))}
/>
</React.Fragment>
);
}

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

@ -5,13 +5,70 @@
* Date: 2023/10/13
*/
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaSlideModal, WeaSteps } from "ecCom";
import PayrollTempBaseSet from "../payrollTempBaseSet";
import { Button } from "antd";
const Step = WeaSteps.Step;
const getLabel = WeaLocaleProvider.getLabel;
@inject("payrollStore")
@observer
class Index extends Component {
render() {
return (
<div>
constructor(props) {
super(props);
this.state = {
current: 0
};
}
renderTitle = () => {
const { tmplId } = this.props;
return <div className="payroll-title-flex titleDialog">
<div className="titleCol titleLeftBox">
<div className="titleIcon"><i className="icon-coms-fa"/></div>
<div className="title">{tmplId ? getLabel(543583, "编辑工资单模板") : getLabel(543582, "新建工资单模板")}</div>
</div>
<div className="titleCol titleRightBox">
<Button type="primary">{getLabel(1402, "下一步")}</Button>
</div>
</div>;
};
renderSlideContent = () => {
const { current } = this.state;
let dom = null;
switch (current) {
case 0:
dom = <PayrollTempBaseSet {...this.props}/>;
break;
default:
break;
}
return dom;
};
render() {
const { current } = this.state;
const tabs = [
{ key: 0, title: getLabel(82751, "基础设置") },
{ key: 1, title: getLabel(543579, "正常核算工资单模板") },
{ key: 2, title: getLabel(543580, "补发工资单模版") }
];
return (
<WeaSlideModal {...this.props} title={this.renderTitle()}
content={(<div className="payroll-tmpl-content">
<WeaSteps current={current} style={{ margin: "0 0 20px 0" }}>
{
_.map(tabs, item => {
const { key, title } = item;
return <Step description={title} key={key}/>;
})
}
</WeaSteps>
{this.renderSlideContent()}
</div>)}
/>
);
}
}

28
pc4mobx/hrmSalary/pages/payrollRelease/index.js
View File

@ -11,6 +11,7 @@ import GrantQuery from "./components/reqQuery/grantQuery";
import TemplateQuery from "./components/reqQuery/templateQuery";
import GrantTableList from "./components/grantTableList";
import PayrollTemplateTableList from "./components/payrollTemplateTableList";
import TemplateBaseSettings from "../payroll/templateBaseSettings";
import { Button } from "antd";
import moment from "moment";
import "./index.less";
@ -23,7 +24,7 @@ class Index extends Component {
constructor(props) {
super(props);
this.state = {
selectedKey: "grant", isRefresh: false,
selectedKey: "grant", isRefresh: false, baseSetSaveLoading: false,
queryParams: {
salarySobId: "", name: "",
dateRange: [
@ -33,6 +34,7 @@ class Index extends Component {
}
};
this.templateRef = null;
this.baseSetRef = null;
}
renderReqBtns = () => {
@ -53,7 +55,9 @@ class Index extends Component {
const loading = this.templateRef ? this.templateRef.wrappedInstance.state.delLoading : false;
const delDisabled = !this.templateRef || _.isEmpty(this.templateRef.wrappedInstance.state.selectedRowKeys);
const btns = [
<Button type="primary">{getLabel(365, "新建")}</Button>,
<Button type="primary" onClick={() => {
this.templateRef.wrappedInstance.handleOpts({ key: "edit" }, {});
}}>{getLabel(365, "新建")}</Button>,
<Button type="ghost" loading={loading} disabled={delDisabled} onClick={() => {
this.templateRef.wrappedInstance.handleOpts({ key: "del" }, {});
}}>{getLabel(32136, "批量删除")}</Button>
@ -67,6 +71,13 @@ class Index extends Component {
];
reqBtns = showOperateBtn ? [...btns, ...queryBtns] : [...queryBtns];
break;
case "watermark":
const { baseSetSaveLoading } = this.state;
reqBtns = [
<Button type="primary" loading={baseSetSaveLoading}
onClick={() => this.baseSetRef.salaryBillBaseSetSave()}>{getLabel(537558, "保存")}</Button>
];
break;
default:
break;
}
@ -83,6 +94,12 @@ class Index extends Component {
dom = <PayrollTemplateTableList ref={dom => this.templateRef = dom} queryParams={queryParams}
isRefresh={isRefresh} forceUpdate={() => this.forceUpdate()}/>;
break;
case "watermark":
dom = <TemplateBaseSettings
ref={dom => this.baseSetRef = dom}
onChangeLoading={loading => this.setState({ baseSetSaveLoading: loading })}
/>;
break;
default:
break;
}
@ -90,7 +107,7 @@ class Index extends Component {
};
render() {
const { selectedKey } = this.state;
const { selectedKey, queryParams } = this.state;
const tabs = [
{ key: "grant", title: getLabel(538012, "工资单发放") },
{ key: "template", title: getLabel(543575, "工资单模板设置") },
@ -101,7 +118,10 @@ class Index extends Component {
<WeaReqTop
title={getLabel(538012, "工资单发放")} tabDatas={tabs} selectedKey={selectedKey}
buttonSpace={10} icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
onChange={key => this.setState({ selectedKey: key })}
onChange={key => this.setState({
selectedKey: key,
queryParams: { ...queryParams, name: "", salarySobId: "" }
})}
buttons={this.renderReqBtns()}
>
<div className="salary-payroll-content">{this.renderContent()}</div>

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

@ -26,9 +26,110 @@
padding: 8px 16px;
height: 100%;
& > .wea-search-group {
background: #FFF;
}
.wea-new-table {
background: #fff;
}
.payroll-title-flex {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 46px 0 16px;
.titleCol {
flex: 1;
display: flex;
align-items: center;
}
.titleLeftBox {
.titleIcon {
color: #fff;
margin: 0;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
background: #F14A2D;
border-radius: 50%;
}
.title {
font-size: 14px;
color: #333;
padding-left: 6px;
}
}
.titleRightBox {
justify-content: flex-end;
}
}
.payroll-tmpl-content {
padding: 16px;
border-top: #e5e5e5;
background: #f6f6f6;
.wea-search-group {
background: #FFF;
padding: 0;
.wea-title {
background: #F6F6F6;
border-bottom: none;
}
.wea-form-cell {
padding: 0;
}
.wea-content {
padding: 0;
.wea-form-cell-wrapper {
border: 1px solid #e5e5e5;
border-bottom: none;
.wea-form-item {
padding: 5px 16px;
border-bottom: 1px solid #e5e5e5;
}
}
}
}
.sendTime-outer {
background: #fff;
padding: 5px 16px;
border-bottom: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
.customTimeCompWrapper {
display: flex;
justify-content: flex-start;
& > div {
margin-right: 10px;
display: flex;
align-items: center;
.wea-select {
width: 80px;
margin: 0 10px;
}
}
}
}
}
}
}

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

@ -12,6 +12,10 @@ export class payrollStore {
//工资单重构页面
@observable payrollCopyForm = new WeaForm(); //模板复制form
@action initPayrollCopyForm = () => this.payrollCopyForm = new WeaForm();
@observable payrollTempForm = new WeaForm(); //新建编辑工资单模板form
@action initPayrollTempForm = () => this.payrollTempForm = new WeaForm();
@observable payrollTempFeedbackForm = new WeaForm(); //新建编辑工资单模板-工资单确认反馈设置form
@action initPayrollTempFeedbackForm = () => this.payrollTempFeedbackForm = new WeaForm();
@observable tableStore = new TableStore(); // new table

3
pc4mobx/hrmSalary/util/index.js
View File

@ -45,7 +45,8 @@ export const getSearchs = (form, condition, col, isCenter, onChange = () => void
<WeaHelpfulTip title={fields.helpfulTitle} style={{ position: "absolute", right: "-20px", top: "25%" }}/>
}
</WeaFormItem>),
colSpan: 1
colSpan: 1,
hide: fields.hide
});
});
group.push(