feature/2.9.42310.01-工资单发放页面重构
This commit is contained in:
parent
618d9f12cd
commit
02863814ba
|
|
@ -17,7 +17,8 @@ import SpecialAddDeduction from "./pages/dataAcquisition/specialAddDeduction";
|
|||
import Ledger from "./pages/ledgerPage";
|
||||
// import Calculate from "./pages/calculate";
|
||||
import Calculate from "./pages/calculate/calculate"; //重构的薪资核算页面
|
||||
import Payroll from "./pages/payroll";
|
||||
// import Payroll from "./pages/payroll";
|
||||
import Payroll from "./pages/payrollRelease";//重构的工资单发放页面
|
||||
import PayrollGrant from "./pages/payroll/payrollGrant";
|
||||
import PayrollDetail from "./pages/payroll/payrollDetail";
|
||||
import Declare from "./pages/declare";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 工资单发放重构-工资单发放列表
|
||||
* Description:
|
||||
* Date: 2023/10/12
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaLocaleProvider, WeaTable } from "ecCom";
|
||||
import { Dropdown, Menu, Tag } from "antd";
|
||||
import { getPayrollList } from "../../../../apis/payroll";
|
||||
import moment from "moment";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
|
||||
class Index extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: false, columns: [], dataSource: [],
|
||||
pageInfo: { current: 1, pageSize: 10, total: 0 }
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getPayrollList(this.props);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
if (nextProps.isRefresh !== this.props.isRefresh) this.getPayrollList(nextProps);
|
||||
}
|
||||
|
||||
getPayrollList = (props) => {
|
||||
const { pageInfo } = this.state;
|
||||
const { queryParams } = props;
|
||||
const { dateRange: salaryYearMonth } = queryParams;
|
||||
const params = { salaryYearMonth };
|
||||
const payload = { ...pageInfo, ...params };
|
||||
this.setState({ loading: true });
|
||||
getPayrollList(payload).then(({ status, data }) => {
|
||||
this.setState({ loading: false });
|
||||
if (status) {
|
||||
const { columns, pageInfo: { pageNum, pageSize, total, list: dataSource } } = data;
|
||||
this.setState({
|
||||
dataSource, pageInfo: { ...pageInfo, pageNum, pageSize, total },
|
||||
columns: _.map(_.filter(columns, it => it.column !== "acctTimes"), o => {
|
||||
const { column } = o;
|
||||
if (column === "salarySob") {
|
||||
return {
|
||||
dataIndex: o.column, title: o.text, width: o.width,
|
||||
render: (text, record) => {
|
||||
const { acctTimes, salaryAcctType } = record;
|
||||
return <div className="salarySobNameWrapper">
|
||||
<span title={text}>{text}</span>
|
||||
<div className="salarySobNameTagWrapper">
|
||||
{
|
||||
salaryAcctType === 1 &&
|
||||
<Tag color="yellow">补发</Tag>
|
||||
}
|
||||
<Tag color="blue">{`${getLabel(15323, "第")}${acctTimes}${getLabel(18929, "次")}`}</Tag>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
};
|
||||
}
|
||||
if (column === "salaryYearMonth" || column === "lastSendTime") {
|
||||
return {
|
||||
dataIndex: o.column, title: o.text, width: o.width,
|
||||
render: (text) => {
|
||||
const time = moment(parseInt(text)).format("YYYY-MM");
|
||||
return <span title={time}>{time}</span>;
|
||||
}
|
||||
};
|
||||
}
|
||||
return { dataIndex: o.column, title: o.text, width: o.width };
|
||||
})
|
||||
});
|
||||
}
|
||||
}).catch(() => this.setState({ loading: false }));
|
||||
};
|
||||
|
||||
render() {
|
||||
const { loading, dataSource, columns, pageInfo } = this.state;
|
||||
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.getPayrollList(this.props));
|
||||
},
|
||||
onChange: current => {
|
||||
this.setState({
|
||||
pageInfo: { ...pageInfo, current }
|
||||
}, () => this.getPayrollList(this.props));
|
||||
}
|
||||
};
|
||||
return (
|
||||
<WeaTable
|
||||
rowKey="id"
|
||||
dataSource={dataSource} loading={loading} pagination={pagination}
|
||||
columns={[
|
||||
...columns,
|
||||
{
|
||||
dataIndex: "operate", title: getLabel(30585, "操作"), width: 170,
|
||||
render: (__, record) => {
|
||||
return <React.Fragment>
|
||||
<a href="javascript:void(0);" style={{ marginRight: 10 }}>{getLabel(542702, "发放")}</a>
|
||||
<a href="javascript:void(0);" style={{ marginRight: 10 }}>{getLabel(83110, "查看详情")}</a>
|
||||
<Dropdown
|
||||
overlay={<Menu>
|
||||
<Menu.Item key="1">{getLabel(543603, "更新模板")}</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
>
|
||||
<a href="javascript:void(0);"><i className="icon-coms-more"/></a>
|
||||
</Dropdown>
|
||||
</React.Fragment>;
|
||||
}
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Index;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 工资单发放重构-工资单查询
|
||||
* Description:
|
||||
* Date: 2023/10/12
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaHelpfulTip, WeaLocaleProvider } from "ecCom";
|
||||
import { MonthRangePicker } from "../../../reportView/components/statisticalMicroSettingsSlide";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
|
||||
class GrantQuery extends Component {
|
||||
render() {
|
||||
const { queryParams } = this.props;
|
||||
const { dateRange } = queryParams;
|
||||
return (
|
||||
<div className="payroll-btn-flex">
|
||||
<WeaHelpfulTip
|
||||
width={200} placement="topLeft" style={{ marginRight: 10 }}
|
||||
title={getLabel(543576, "提示：无工资单模板无法发放工资单，请先设置一个默认使用的工资单模板")}
|
||||
/>
|
||||
<MonthRangePicker dateRange={dateRange} viewAttr={2}
|
||||
onChange={v => this.props.onChange({ dateRange: v })}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default GrantQuery;
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 工资单发放重构-工资单模板查询
|
||||
* Description:
|
||||
* Date: 2023/10/12
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaInputSearch, WeaLocaleProvider, WeaSelect } from "ecCom";
|
||||
import { getPayrollTemplateLedgerList } from "../../../../apis/payroll";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
|
||||
class TemplateQuery extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
salarySobOptions: []
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getPayrollTemplateLedgerList();
|
||||
}
|
||||
|
||||
getPayrollTemplateLedgerList = () => {
|
||||
getPayrollTemplateLedgerList().then(({ status, data }) => {
|
||||
if (status) {
|
||||
this.setState({
|
||||
salarySobOptions: _.map(data, o => ({ key: o.id, showname: o.content }))
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { salarySobOptions } = this.state;
|
||||
const { queryParams } = this.props;
|
||||
const { salarySobId, name } = queryParams;
|
||||
return (
|
||||
<div className="payroll-btn-flex">
|
||||
<WeaSelect value={salarySobId} options={salarySobOptions} style={{ width: 200 }}
|
||||
onChange={v => this.props.onChange({ salarySobId: v })}/>
|
||||
<WeaInputSearch value={name} style={{ marginLeft: 10 }}
|
||||
placeholder={getLabel(111, "请输入工资单模板名称")}
|
||||
onChange={v => this.props.onChange({ name: v })}
|
||||
onSearch={this.props.onSearch}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TemplateQuery;
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 工资单发放-重构页面
|
||||
* Description:
|
||||
* Date: 2023/10/12
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { WeaLocaleProvider, WeaReqTop } from "ecCom";
|
||||
import GrantQuery from "./components/reqQuery/grantQuery";
|
||||
import TemplateQuery from "./components/reqQuery/templateQuery";
|
||||
import GrantTableList from "./components/grantTableList";
|
||||
import { Button } from "antd";
|
||||
import moment from "moment";
|
||||
import "./index.less";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
|
||||
@inject("taxAgentStore")
|
||||
@observer
|
||||
class Index extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedKey: "grant", isRefresh: false,
|
||||
queryParams: {
|
||||
salarySobId: "", name: "",
|
||||
dateRange: [
|
||||
moment(new Date()).startOf("year").format("YYYY-MM"),
|
||||
moment(new Date()).startOf("month").format("YYYY-MM")
|
||||
]
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
renderReqBtns = () => {
|
||||
const { taxAgentStore: { showOperateBtn } } = this.props;
|
||||
const { selectedKey, isRefresh, queryParams } = this.state;
|
||||
let reqBtns = [];
|
||||
switch (selectedKey) {
|
||||
case "grant":
|
||||
reqBtns = [
|
||||
<GrantQuery queryParams={queryParams}
|
||||
onChange={v => this.setState({
|
||||
isRefresh: !isRefresh,
|
||||
queryParams: { ...queryParams, ...v }
|
||||
})}/>
|
||||
];
|
||||
break;
|
||||
case "template":
|
||||
const btns = [
|
||||
<Button type="primary">{getLabel(365, "新建")}</Button>,
|
||||
<Button type="ghost">{getLabel(32136, "批量删除")}</Button>
|
||||
];
|
||||
const queryBtns = [
|
||||
<TemplateQuery queryParams={queryParams}
|
||||
onChange={v => this.setState({
|
||||
isRefresh: !isRefresh,
|
||||
queryParams: { ...queryParams, ...v }
|
||||
})}/>
|
||||
];
|
||||
reqBtns = showOperateBtn ? [...btns, ...queryBtns] : [...queryBtns];
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return reqBtns;
|
||||
};
|
||||
renderContent = () => {
|
||||
const { selectedKey, queryParams, isRefresh } = this.state;
|
||||
let dom = null;
|
||||
switch (selectedKey) {
|
||||
case "grant":
|
||||
dom = <GrantTableList queryParams={queryParams} isRefresh={isRefresh}/>;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return dom;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { selectedKey } = this.state;
|
||||
const tabs = [
|
||||
{ key: "grant", title: getLabel(538012, "工资单发放") },
|
||||
{ key: "template", title: getLabel(543575, "工资单模板设置") },
|
||||
{ key: "watermark", title: getLabel(545285, "工资单基础设置") }
|
||||
];
|
||||
return (
|
||||
<div className="salary-payroll-main-page">
|
||||
<WeaReqTop
|
||||
title={getLabel(538012, "工资单发放")} tabDatas={tabs} selectedKey={selectedKey}
|
||||
buttonSpace={10} icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
|
||||
onChange={key => this.setState({ selectedKey: key })}
|
||||
buttons={this.renderReqBtns()}
|
||||
>
|
||||
<div className="salary-payroll-content">{this.renderContent()}</div>
|
||||
</WeaReqTop>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Index;
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
.salary-payroll-main-page {
|
||||
min-width: 1000px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f6f6f6;
|
||||
|
||||
.payroll-btn-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.wea-input-focus {
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.wea-new-top-req {
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
.wea-new-top-req-wapper .wea-new-top-req-title > div:last-child {
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.salary-payroll-content {
|
||||
padding: 8px 16px;
|
||||
height: 100%;
|
||||
|
||||
.wea-new-table {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue