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

feature/2.9.10.2312.02-薪资档案页面重构

This commit is contained in:
黎永顺 2024-01-08 16:05:00 +08:00
parent da7194d6b1
commit c01c03f1b0
8 changed files with 579 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pc4mobx/hrmSalary/index.js
View File

@ -4,13 +4,14 @@ import { WeaLocaleProvider } from "ecCom";
import MySalaryMobile from "./pages/mySalaryMobile";
import MySalary from "./pages/mySalaryBenefits";
import Programme from "./pages/socialSecurityBenefits/programme";
import Archivess from "./pages/socialSecurityBenefits/archives";
// import Archivess from "./pages/socialSecurityBenefits/archives";
import Archives from "./pages/socialSecurityBenefits/welfareArchive"; //社保福利档案重构页面
import StandingBook from "./pages/socialSecurityBenefits/standingBook";
import StandingBookDetail from "./pages/socialSecurityBenefits/standingBookDetail";
import StandingBookOfflineComparison from "./pages/socialSecurityBenefits/standingBookOfflineComparison";
import SalaryItem from "./pages/salaryItem";
import PayrollFiles from "./pages/payrollFiles";
import SalaryFiles from "./pages/payrollFiles/salaryFiles";
import CumDeduct from "./pages/dataAcquisition/cumDeduct";
import OtherDeduct from "./pages/dataAcquisition/otherDeduct";
import CumSituation from "./pages/dataAcquisition/cumSituation";
@ -120,7 +121,7 @@ const Routes = (
component={SocialSecurityBenefits}>
<Route key="programme" path="programme" component={Programme}/>
<Route key="archives" path="archives" component={Archives}/>
<Route key="archives_demo" path="archives_demo" component={Archivess}/>
{/*<Route key="archives_demo" path="archives_demo" component={Archivess}/>*/}
<Route key="standingBook" path="standingBook" component={StandingBook}/>
<Route
key="standingBookDetail"
@ -134,7 +135,8 @@ const Routes = (
/>
</Route>
<Route key="salaryItem" path="salaryItem" component={SalaryItem}/>
<Route key="salaryFile" path="salaryFile" component={PayrollFiles}/>
<Route key="salaryFile" path="salaryFile" component={SalaryFiles}/>
<Route key="salaryFile-reconfig" path="salaryFile-reconfig" component={PayrollFiles}/>
<Route key="adjustSalaryManage" path="adjustSalaryManage" component={AdjustSalaryManage}/>
<Route
key="dataAcquisition"

33
pc4mobx/hrmSalary/pages/payrollFiles/components/advanceInputBtn/index.js Normal file
View File

@ -0,0 +1,33 @@
/*
* Author: 黎永顺
* name:薪资档案页面重构-高级搜索
* Description:
* Date: 2024/1/8
*/
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { Button } from "antd";
import { WeaInputSearch, WeaLocaleProvider } from "ecCom";
import "./index.less";
const getLabel = WeaLocaleProvider.getLabel;
@inject("salaryFileStore")
@observer
class Index extends Component {
render() {
const { salaryFileStore: { salaryFileQueryForm } } = this.props;
return (
<div className="achrive-advance-search">
<WeaInputSearch value={salaryFileQueryForm.getFormParams().username}
onChange={v => salaryFileQueryForm.updateFields({ username: v })}
onSearch={this.props.onAdvanceSearch}
/>
<Button type="ghost" className="wea-advanced-search text-elli"
onClick={this.props.onOpenAdvanceSearch}>{getLabel(545754, "高级搜索")}</Button>
</div>
);
}
}
export default Index;

29
pc4mobx/hrmSalary/pages/payrollFiles/components/advanceInputBtn/index.less Normal file
View File

@ -0,0 +1,29 @@
.achrive-advance-search {
display: flex;
align-items: center;
position: relative;
top: -1.5px;
.wea-advanced-search {
top: 2px;
left: -1px;
height: 28px;
line-height: 1;
border-radius: 0;
position: relative;
color: #474747;
padding: 4px 15px;
}
.wea-advanced-search:hover {
border: 1px solid #dadada;
color: #474747;
}
.text-elli {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
top: 1px;
}
}

87
pc4mobx/hrmSalary/pages/payrollFiles/components/salaryFileAdvanceSearchPannel/index.js Normal file
View File

@ -0,0 +1,87 @@
/*
* Author: 黎永顺
* name: 薪资档案页面重构-高级查询
* Description:
* Date: 2024/1/8
*/
import React, { Component } from "react";
import { WeaLocaleProvider, WeaTools } from "ecCom";
import { Button } from "antd";
import { inject, observer } from "mobx-react";
import { getSearchs } from "../../../../util";
import * as API from "../../../../apis/payrollFiles";
import { salaryFileSearchConditions } from "../../config";
import { getTaxAgentSelectList } from "../../../../apis/taxAgent";
const getLabel = WeaLocaleProvider.getLabel;
const getKey = WeaTools.getKey;
@inject("salaryFileStore")
@observer
class salaryFileAdvanceSearchPannel extends Component {
constructor(props) {
super(props);
this.state = {
searchConditions: []
};
}
async componentDidMount() {
const [{ data: userStatusList }, { data: taxAgentList }] = await Promise.all([
API.commonEnumList({ enumClass: "com.engine.salary.enums.UserStatusEnum" }),
getTaxAgentSelectList()
]);
this.setState({
searchConditions: _.map(salaryFileSearchConditions, item => {
return {
...item,
items: _.map(item.items, child => {
if (getKey(child) === "statuses") {
return {
...child,
options: _.map(userStatusList, o => ({ key: String(o.value), showname: o.defaultLabel }))
};
} else if (getKey(child) === "statuses") {
return {
...child,
options: _.map(taxAgentList, o => ({ key: o.id, showname: o.content }))
};
}
return { ...child };
})
};
})
}, () => {
const { salaryFileStore: { salaryFileQueryForm } } = this.props;
salaryFileQueryForm.initFormFields(this.state.searchConditions);
});
}
render() {
const { searchConditions } = this.state;
const { salaryFileStore: { salaryFileQueryForm } } = this.props;
return (
<React.Fragment>
<div className="wea-advanced-searchsAd">
{getSearchs(salaryFileQueryForm, searchConditions, 2, false)}
</div>
<div className="wea-search-buttons">
<div style={{ textAlign: "center" }}>
<span style={{ marginLeft: 15 }}>
<Button type="primary" onClick={this.props.onAdSearch}>{getLabel(388113, "搜索")}</Button>
</span>
<span style={{ marginLeft: 15 }}>
<Button type="ghost" onClick={() => salaryFileQueryForm.resetForm()}>{getLabel(2022, "重置")}</Button>
</span>
<span style={{ marginLeft: 15 }}>
<Button type="ghost" onClick={this.props.onCancel}>{getLabel(31129, "取消")}</Button>
</span>
</div>
</div>
</React.Fragment>
);
}
}
export default salaryFileAdvanceSearchPannel;

284
pc4mobx/hrmSalary/pages/payrollFiles/config/index.js
View File

@ -1,3 +1,11 @@
import React from "react";
import { WeaHelpfulTip, WeaLocaleProvider, WeaTools } from "ecCom";
import { Button } from "antd";
import AdvanceInputBtn from "../components/advanceInputBtn";
const getKey = WeaTools.getKey;
const getLabel = WeaLocaleProvider.getLabel;
export const tabCondition = [
{
color: "#000000",
@ -35,3 +43,279 @@ export const tabCondition = [
viewcondition: "ext"
}
];
export const tabList = [
{ viewcondition: "pending", lanId: 542689, title: "待定薪", showcount: true, groupid: "PENDING" },
{ viewcondition: "fixed", lanId: 544638, title: "发薪员工", showcount: true, groupid: "FIXED" },
{ viewcondition: "suspend", lanId: 542691, title: "待停薪", showcount: true, groupid: "SUSPEND" },
{ viewcondition: "stop", lanId: 544637, title: "停薪员工", showcount: true, groupid: "STOP" },
{ viewcondition: "ext", lanId: 542679, title: "非系统人员", showcount: true, groupid: "EXT" }
];
export const renderReqBtns = (selectedKey, onOpenAdvanceSearch, onAdvanceSearch) => {
let reqBtns = [
<Button type="primary">{getLabel(32935, "导入")}</Button>,
<AdvanceInputBtn onOpenAdvanceSearch={onOpenAdvanceSearch} onAdvanceSearch={onAdvanceSearch}/>
];
switch (selectedKey) {
case "pending":
reqBtns.splice(1, 0, <Button type="ghost">{getLabel(543304, "全部设为发薪人员")}</Button>);
break;
case "fixed":
case "ext":
reqBtns.unshift(<WeaHelpfulTip
width={300} placement="topLeft"
title={<HelpfulDiv/>}
/>);
break;
case "stop":
reqBtns.shift();
reqBtns.unshift(<Button type="primary">{getLabel(543307, "批量取消停薪")}</Button>);
break;
default:
break;
}
return reqBtns;
};
export const renderDropMenuDatas = (selectedKey) => {
let menus = [{
key: "custom_cols",
icon: <i className="icon-coms-Custom"/>,
content: getLabel(32535, "显示列定制")
}];
switch (selectedKey) {
case "pending":
menus = [
{
key: "batchSet",
icon: <i className="icon-coms-BatchEditing-Hot"/>,
content: getLabel(543305, "批量设为发薪员工")
},
{
key: "batchDelete",
icon: <i className="iconfont icon-piliangshanchu"/>,
content: getLabel(543186, "批量删除待办")
},
{
key: "exportAll",
icon: <i className="iconfont icon-daochu"/>,
content: getLabel(81272, "导出全部")
},
{
key: "exportSelected",
icon: <i className="iconfont icon-piliangdaochu"/>,
content: getLabel(512938, "导出选中")
},
...menus
];
break;
case "fixed":
menus = [
{
key: "exportAll",
icon: <i className="iconfont icon-daochu"/>,
content: getLabel(81272, "导出全部")
},
{
key: "exportSelected",
icon: <i className="iconfont icon-piliangdaochu"/>,
content: getLabel(512938, "导出选中")
},
...menus
];
break;
case "suspend":
menus = [
{
key: "allWithoutpay",
icon: <i className="icon-coms02-all"/>,
content: getLabel(543326, "全部停薪")
},
{
key: "batchWithoutpay",
icon: <i className="icon-coms-BatchEditing-Hot"/>,
content: getLabel(543724, "批量停薪")
},
{
key: "batchDelete",
icon: <i className="iconfont icon-piliangshanchu"/>,
content: getLabel(543186, "批量删除待办")
},
{
key: "exportAll",
icon: <i className="iconfont icon-daochu"/>,
content: getLabel(81272, "导出全部")
},
{
key: "exportSelected",
icon: <i className="iconfont icon-piliangdaochu"/>,
content: getLabel(512938, "导出选中")
},
...menus
];
break;
case "stop":
menus = [
{
key: "exportAll",
icon: <i className="iconfont icon-daochu"/>,
content: getLabel(81272, "导出全部")
},
{
key: "exportSelected",
icon: <i className="iconfont icon-piliangdaochu"/>,
content: getLabel(512938, "导出选中")
},
...menus
];
break;
default:
break;
}
return menus;
};
export const salaryFileSearchConditions = [
{
items: [
{
conditionType: "INPUT",
domkey: ["username"],
fieldcol: 16,
label: getLabel(25034, "姓名"),
labelcol: 8,
value: "",
viewAttr: 2
},
{
browserConditionParam: {
completeParams: {},
conditionDataParams: {},
dataParams: {},
destDataParams: {},
hasAddBtn: false,
hasAdvanceSerach: false,
idSeparator: ",",
isAutoComplete: 1,
isDetail: 0,
isMultCheckbox: false,
isSingle: false,
icon: "icon-coms-hrm",
linkUrl: "",
pageSize: 10,
quickSearchName: "",
replaceDatas: [],
title: "",
type: "164",
viewAttr: 2
},
colSpan: 1,
conditionType: "BROWSER",
domkey: ["subcompanyIds"],
fieldcol: 16,
label: getLabel(33553, "分部"),
labelcol: 8,
viewAttr: 2
},
{
browserConditionParam: {
completeParams: {},
conditionDataParams: {},
dataParams: {},
destDataParams: {},
hasAddBtn: false,
hasAdvanceSerach: false,
idSeparator: ",",
isAutoComplete: 1,
isDetail: 0,
isMultCheckbox: false,
isSingle: false,
icon: "icon-coms-hrm",
linkUrl: "",
pageSize: 10,
quickSearchName: "",
replaceDatas: [],
title: "",
type: "57",
viewAttr: 2
},
conditionType: "BROWSER",
domkey: ["departmentIds"],
fieldcol: 16,
label: getLabel(27511, "部门"),
labelcol: 8,
viewAttr: 2
},
{
browserConditionParam: {
completeParams: {},
conditionDataParams: {},
dataParams: {},
destDataParams: {},
hasAddBtn: false,
hasAdvanceSerach: false,
idSeparator: ",",
isAutoComplete: 1,
isDetail: 0,
isMultCheckbox: false,
isSingle: false,
icon: "icon-coms-hrm",
linkUrl: "",
pageSize: 10,
quickSearchName: "",
replaceDatas: [],
title: "",
type: "24",
viewAttr: 2
},
conditionType: "BROWSER",
domkey: ["positionIds"],
fieldcol: 16,
label: getLabel(6086, "岗位"),
labelcol: 8,
viewAttr: 2
},
{
conditionType: "SELECT",
domkey: ["statuses"],
fieldcol: 16,
label: getLabel(382300, "人员状态"),
labelcol: 8,
options: [],
viewAttr: 2
},
{
conditionType: "SELECT",
domkey: ["taxAgentId"],
fieldcol: 16,
label: getLabel(537996, "个税扣缴义务人"),
labelcol: 8,
options: [],
viewAttr: 2
},
{
conditionType: "INPUT",
domkey: ["workcode"],
fieldcol: 16,
label: getLabel(1933, "工号"),
labelcol: 8,
value: "",
viewAttr: 2
}
],
defaultshow: true,
title: getLabel(1361, "基本信息"),
col: 2
}
];
const HelpfulDiv = () => {
return <div className="helpWrapper">
<span>{getLabel(544742, "导入按钮使用场景说明：")}</span>
<span>{getLabel(544743, "1.档案初始化：")}</span>
<span className="pl10">
<span>{getLabel(544744, "a.初次使用薪酬模块，全量导入员工的薪资档案数据；")}</span>
<span>{getLabel(544745, "b.员工入职，导入新入职的员工的薪资档案数据（若导入表格中的人员已存在在薪资档案中，初始化导入会将档案中该人员的数据清除再导入）；")}</span>
<span>{getLabel(544746, "c.返聘人员使用调薪功能调整薪资档案值或使用调整个税扣缴；")}</span>
</span>
<span>{getLabel(545755, "2.调薪：档案中已存在的人员批量调整薪资项目值（包括返聘人员的情况）；")}</span>
<span>{getLabel(545756, "3.调整个税扣缴义务人：档案中已存在的人员批量调整个税扣缴义务人（包括返聘人员的情况）；")}</span>
</div>;
};

75
pc4mobx/hrmSalary/pages/payrollFiles/index.less
View File

@ -111,3 +111,78 @@
}
}
}
//薪资档案页面重构
.salary-files-wrapper {
min-width: 1000px;
overflow: auto;
width: 100%;
height: 100%;
background: #f6f6f6;
.wea-new-top-req-title > div:first-child > div > div {
padding-left: 0 !important;
.wea-tab {
border-bottom: none;
}
}
.salary-files-content {
padding: 8px 16px;
display: flex;
flex-direction: column;
.table-layout {
.ant-spin-nested-loading, .ant-spin-container {
height: 100%;
}
}
.searchAdvanced-condition-hide {
display: none;
}
.searchAdvanced-condition-container {
background: #FFF;
margin-bottom: 10px;
border: 1px solid #e5e5e5;
.wea-search-buttons {
border-top: 1px solid #dadada;
padding: 15px 0;
}
.wea-advanced-searchsAd {
height: 246px;
overflow: hidden auto;
.formItem-delete {
position: absolute;
top: 0;
right: -40px;
}
.searchAdvanced-commonSelect {
border-top: 1px solid #ebebeb;
margin: 0 25px;
padding: 10px 0;
}
.custom-advance-largeSpacing {
padding-left: 26px;
.link {
border: none;
border-radius: 0;
padding: 12px 10px 12px 26px;
color: #2db7f5
}
}
}
}
}
}

63
pc4mobx/hrmSalary/pages/payrollFiles/salaryFiles.js Normal file
View File

@ -0,0 +1,63 @@
/*
* Author: 黎永顺
* name: 薪资档案页面-重构
* Description:
* Date: 2024/1/8
*/
import React, { Component } from "react";
import { WeaLocaleProvider, WeaReqTop, WeaTab } from "ecCom";
import { inject, observer } from "mobx-react";
import { renderDropMenuDatas, renderReqBtns, tabList } from "./config";
import SalaryFileAdvanceSearchPannel from "./components/salaryFileAdvanceSearchPannel";
import cs from "classnames";
import "./index.less";
const getLabel = WeaLocaleProvider.getLabel;
@inject("salaryFileStore", "taxAgentStore")
@observer
class SalaryFiles extends Component {
constructor(props) {
super(props);
this.state = {
selectedKey: "pending", showSearchAd: false, isQuery: false, logDialogVisible: false,
topTabCount: { stayAdd: 0, paying: 0, stayDel: 0, stopPay: 0, ext: 0 },
welfareImpDialog: { visible: false, title: getLabel(24023, "数据导入"), runStatuses: "" }
};
}
handleOpenAdvanceSearch = () => this.setState({ showSearchAd: true });
handleAdvanceSearch = () => this.setState({ isQuery: !this.state.isQuery });
render() {
const { selectedKey, topTabCount, showSearchAd, isQuery, logDialogVisible, welfareImpDialog } = this.state;
const { taxAgentStore: { showOperateBtn } } = this.props;
return (
<div className="salary-files-wrapper">
<WeaReqTop
title={getLabel(538004, "薪资档案")} buttonSpace={10} icon={<i className="icon-coms-fa"/>}
iconBgcolor="#F14A2D" showDropIcon dropMenuDatas={renderDropMenuDatas(selectedKey)}
buttons={renderReqBtns(selectedKey, this.handleOpenAdvanceSearch, this.handleAdvanceSearch)}
replaceTab={
<WeaTab
datas={_.map(tabList, o => ({ ...o, title: getLabel(o.lanId, o.title) }))} autoCalculateWidth
keyParam="viewcondition" selectedKey={selectedKey} counts={topTabCount} countParam="groupid"
onChange={key => this.setState({ selectedKey: key })}
/>
}
>
<div className="salary-files-content">
<div
className={cs("searchAdvanced-condition-container", { "searchAdvanced-condition-hide": !showSearchAd })}>
<SalaryFileAdvanceSearchPannel
onCancel={() => this.setState({ showSearchAd: false })}
/>
</div>
</div>
</WeaReqTop>
</div>
);
}
}
export default SalaryFiles;

3
pc4mobx/hrmSalary/stores/salaryFile.js
View File

@ -10,6 +10,9 @@ const { TableStore } = WeaTableNew;
export class salaryFileStore {
@observable adjForm = new WeaForm(); // 调薪form
/*薪资档案页面重构*/
@observable salaryFileQueryForm = new WeaForm(); // 薪资档案查询form
/*薪资档案页面重构*/
@observable tableStore = new TableStore(); // new table