feature/2.9.42310.02-社保福利档案页面重构
This commit is contained in:
parent
cd9964a329
commit
b14fce7949
|
|
@ -3,7 +3,8 @@ import Route from "react-router/lib/Route";
|
|||
import { WeaLocaleProvider } from "ecCom";
|
||||
import MySalary from "./pages/mySalary";
|
||||
import Programme from "./pages/socialSecurityBenefits/programme";
|
||||
import Archives 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";
|
||||
|
|
@ -114,6 +115,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="standingBook" path="standingBook" component={StandingBook}/>
|
||||
<Route
|
||||
key="standingBookDetail"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 社保福利档案页面重构-高级搜索
|
||||
* Description:
|
||||
* Date: 2023/10/31
|
||||
*/
|
||||
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("archivesStore")
|
||||
@observer
|
||||
class Index extends Component {
|
||||
render() {
|
||||
const { archivesStore: { welfareForm } } = this.props;
|
||||
return (
|
||||
<div className="achrive-advance-search">
|
||||
<WeaInputSearch value={welfareForm.getFormParams().username}
|
||||
onChange={v => welfareForm.updateFields({ username: v })}
|
||||
onSearch={this.props.onAdvanceSearch}
|
||||
/>
|
||||
<Button type="ghost" className="wea-advanced-search text-elli"
|
||||
onClick={this.props.onOpenAdvanceSearch}>{getLabel(111, "高级搜索")}</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Index;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 社保福利档案页面重构-高级搜索面板
|
||||
* Description:
|
||||
* Date: 2023/10/31
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaLocaleProvider } from "ecCom";
|
||||
import { Button } from "antd";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { getSaCondition } from "../../../../../apis/archive";
|
||||
import { getSearchs } from "../../../../../util";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
|
||||
@inject("archivesStore")
|
||||
@observer
|
||||
class WelfareAdvanceSearchPannel extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
searchConditions: []
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
getSaCondition().then(({ status, data }) => {
|
||||
if (status) {
|
||||
this.setState({
|
||||
searchConditions: data.condition
|
||||
}, () => {
|
||||
const { archivesStore: { welfareForm } } = this.props;
|
||||
welfareForm.initFormFields(this.state.searchConditions);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { searchConditions } = this.state;
|
||||
const { archivesStore: { welfareForm } } = this.props;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="wea-advanced-searchsAd">
|
||||
{getSearchs(welfareForm, 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={() => welfareForm.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 WelfareAdvanceSearchPannel;
|
||||
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name:社保福利档案页面重构-列表
|
||||
* Description:
|
||||
* Date: 2023/10/31
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaLocaleProvider, WeaTable } from "ecCom";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { getExtTable, queryList } from "../../../../../apis/welfareArchive";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
const APILIST = {
|
||||
runStatuses: queryList,
|
||||
ext: getExtTable
|
||||
};
|
||||
|
||||
@inject("archivesStore")
|
||||
@observer
|
||||
class Index extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataSource: [], columns: [], loading: false, pageInfo: { current: 0, pageSize: 10, total: 0 },
|
||||
selectedRowKeys: []
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getWelfareList(this.props);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
if ((nextProps.runStatuses !== this.props.runStatuses) || (nextProps.isQuery !== this.props.isQuery)) this.getWelfareList(nextProps);
|
||||
}
|
||||
|
||||
getWelfareList = (props) => {
|
||||
const { pageInfo } = this.state;
|
||||
const { archivesStore: { welfareForm }, runStatuses, onChangeTopTabCount } = props;
|
||||
const params = { ...pageInfo, ...welfareForm.getFormParams() };
|
||||
const payload = runStatuses === "ext" ? { ...params, extWelArchiveList: true } : {
|
||||
...params,
|
||||
runStatuses: runStatuses.split(",")
|
||||
};
|
||||
this.setState({ loading: true });
|
||||
APILIST[runStatuses === "ext" ? "ext" : "runStatuses"](payload).then(({ status, data }) => {
|
||||
this.setState({ loading: false });
|
||||
if (status) {
|
||||
const { columns, datas: dataSource, pageInfo: { pageNum: current, pageSize, total } } = data;
|
||||
this.setState({
|
||||
pageInfo: { ...pageInfo, current, pageSize, total }, dataSource,
|
||||
columns: _.map(columns, o => {
|
||||
const { column: dataIndex, text: title, width } = o;
|
||||
if (dataIndex === "employeeName") {
|
||||
return {
|
||||
dataIndex, title, width, fixed: "left",
|
||||
render: (txt) => (<span title={txt}>{txt}</span>)
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
dataIndex, title, width,
|
||||
render: (txt) => (<span title={txt}>{txt}</span>)
|
||||
};
|
||||
}
|
||||
})
|
||||
}, () => onChangeTopTabCount(runStatuses, total));
|
||||
}
|
||||
}).catch(() => this.setState({ loading: false }));
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource, columns, loading, pageInfo, selectedRowKeys } = this.state;
|
||||
console.log(columns);
|
||||
const pagination = {
|
||||
...pageInfo,
|
||||
showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ["10", "20", "50", "100"],
|
||||
onShowSizeChange: (current, pageSize) => {
|
||||
this.setState({
|
||||
pageInfo: { ...pageInfo, current, pageSize }
|
||||
}, () => this.getWelfareList(this.props));
|
||||
},
|
||||
onChange: current => {
|
||||
this.setState({
|
||||
pageInfo: { ...pageInfo, current }
|
||||
}, () => this.getWelfareList(this.props));
|
||||
}
|
||||
};
|
||||
const rowSelection = {
|
||||
selectedRowKeys,
|
||||
onChange: (selectedRowKeys) => this.setState({ selectedRowKeys })
|
||||
};
|
||||
return (
|
||||
<WeaTable
|
||||
rowKey="employeeId" dataSource={dataSource} pagination={pagination} loading={loading}
|
||||
columns={columns} rowSelection={rowSelection} scroll={{ x: 1200, y: `calc(100vh - 220px)` }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Index;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name:社保福利档案页面重构-小提示
|
||||
* Description:
|
||||
* Date: 2023/10/31
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaLocaleProvider } from "ecCom";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
|
||||
class Index extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Index;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export const tabList = [
|
||||
{ viewcondition: "1", lanId: 542711, title: "待增员", showcount: true, groupid: "stayAdd" },
|
||||
{ viewcondition: "2,3", lanId: 542504, title: "在缴员工", showcount: true, groupid: "paying" },
|
||||
{ viewcondition: "3", lanId: 542713, title: "待减员", showcount: true, groupid: "stayDel" },
|
||||
{ viewcondition: "4,5", lanId: 542505, title: "停缴员工", showcount: true, groupid: "stopPay" },
|
||||
{ viewcondition: "ext", lanId: 542679, title: "非系统人员", showcount: true, groupid: "ext" }
|
||||
];
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 社保福利档案页面重构
|
||||
* Description:
|
||||
* Date: 2023/10/31
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaHelpfulTip, WeaLocaleProvider, WeaReqTop, WeaTab } from "ecCom";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import AdvanceInputBtn from "./components/advanceInputBtn";
|
||||
import WelfareAdvanceSearchPannel from "./components/welfareAdvanceSearchPannel";
|
||||
import WelfareTableList from "./components/welfareTableList";
|
||||
import { queryInsuranceTabTotal } from "../../../apis/welfareArchive";
|
||||
import { Button } from "antd";
|
||||
import cs from "classnames";
|
||||
import { tabList } from "./config";
|
||||
import "./index.less";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
|
||||
@inject("taxAgentStore")
|
||||
@observer
|
||||
class Index extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedKey: "1", showSearchAd: false, isQuery: false,
|
||||
topTabCount: { stayAdd: 0, paying: 0, stayDel: 0, stopPay: 0, ext: 0 }
|
||||
};
|
||||
}
|
||||
|
||||
queryInsuranceTabTotal = (active, total) => {
|
||||
queryInsuranceTabTotal().then(({ status, data }) => {
|
||||
if (status) {
|
||||
const key = _.find(tabList, o => o.viewcondition === active).groupid;
|
||||
this.setState({
|
||||
topTabCount: { ...this.state.topTabCount, ...data, [key]: total }
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
renderReqBtns = () => {
|
||||
const { selectedKey } = this.state;
|
||||
let reqBtns = [
|
||||
<Button type="primary">{getLabel(32935, "导入")}</Button>,
|
||||
<AdvanceInputBtn onOpenAdvanceSearch={() => this.setState({ showSearchAd: true })}
|
||||
onAdvanceSearch={() => this.setState({ isQuery: !this.state.isQuery })}
|
||||
/>
|
||||
];
|
||||
switch (selectedKey) {
|
||||
case "1":
|
||||
reqBtns.unshift(<WeaHelpfulTip
|
||||
width={300} placement="topLeft"
|
||||
title={
|
||||
<span>
|
||||
{getLabel(544348, "提示：缴纳月份区间包含起始缴纳月，不包含最后缴纳月； 若员工离职时还未增员进入在缴员工，则数据会自动清除，因此若确认缴纳，请及时维护档案数据并增员操作。若清除后还需缴纳，需先在个税扣缴义务人菜单将员工按离职状态添加回来，会重新出现在待增员。")}
|
||||
</span>
|
||||
}
|
||||
/>);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return reqBtns;
|
||||
};
|
||||
onAdSearch = () => this.setState({ showSearchAd: false, isQuery: !this.state.isQuery });
|
||||
|
||||
render() {
|
||||
const { selectedKey, topTabCount, showSearchAd, isQuery } = this.state;
|
||||
const { taxAgentStore: { showOperateBtn } } = this.props;
|
||||
return (
|
||||
<div className="salary-welfare-archive">
|
||||
<WeaReqTop
|
||||
title={getLabel(538001, "社保福利档案")} buttonSpace={10} icon={<i className="icon-coms-fa"/>}
|
||||
iconBgcolor="#F14A2D" buttons={this.renderReqBtns()} showDropIcon
|
||||
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-welfare-archive-content">
|
||||
<div
|
||||
className={cs("searchAdvanced-condition-container", { "searchAdvanced-condition-hide": !showSearchAd })}>
|
||||
<WelfareAdvanceSearchPannel
|
||||
onCancel={() => this.setState({ showSearchAd: false })}
|
||||
onAdSearch={this.onAdSearch}
|
||||
/>
|
||||
</div>
|
||||
{/*列表*/}
|
||||
<WelfareTableList isQuery={isQuery} showOperateBtn={showOperateBtn}
|
||||
runStatuses={selectedKey}
|
||||
onChangeTopTabCount={this.queryInsuranceTabTotal}
|
||||
/>
|
||||
</div>
|
||||
</WeaReqTop>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Index;
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
.salary-welfare-archive {
|
||||
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-welfare-archive-content {
|
||||
padding: 8px 16px;
|
||||
height: 100%;
|
||||
|
||||
.wea-new-table {
|
||||
background: #ffffff;
|
||||
|
||||
.ant-table-tbody {
|
||||
td {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: 320px;
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@ const { TableStore } = WeaTableNew;
|
|||
|
||||
export class ArchivesStore {
|
||||
@observable logForm = new WeaForm(); // 社保福利档案重构-日志查询条件log
|
||||
@observable welfareForm = new WeaForm(); // 社保福利档案重构-列表查询form
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue