feature/2.17.1.2411.01-薪酬报表薪资明细显示模式

This commit is contained in:
lys 2024-12-04 10:46:25 +08:00
parent b61dc20db5
commit f771d2eacc
4 changed files with 118 additions and 49 deletions

View File

@ -8,7 +8,7 @@
* @description: * @description:
*/ */
import React, { Component } from "react"; import React, { Component } from "react";
import { WeaDialog, WeaInputSearch, WeaLocaleProvider, WeaNewScroll } from "ecCom"; import { WeaDialog, WeaInputSearch, WeaLocaleProvider, WeaNewScroll, WeaTable } from "ecCom";
import { Button, Col, Row, Spin } from "antd"; import { Button, Col, Row, Spin } from "antd";
import CustomBrowserMutiLeft from "./customBrowserMutiLeft"; import CustomBrowserMutiLeft from "./customBrowserMutiLeft";
import CustomBrowserMutiRight from "./customBrowserMutiRight"; import CustomBrowserMutiRight from "./customBrowserMutiRight";
@ -22,8 +22,8 @@ class CustomTransferDialog extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
loading: false, listDatas: [], loading: false, listDatas: [], columns: [], selectedRowKeys: [], pageInfo: { current: 1, pageSize: 10, total: 0 },
query: { [props.searchParamsKey]: "" }, query: props.searchParamsKey ? { [props.searchParamsKey]: "" } : {},
leftListSelectedKeys: [], // 左侧table选择的keys leftListSelectedKeys: [], // 左侧table选择的keys
leftListSelectedData: [], // 左侧table选择的数据 leftListSelectedData: [], // 左侧table选择的数据
rightCheckedKeys: [], //右侧选择的keys rightCheckedKeys: [], //右侧选择的keys
@ -50,16 +50,18 @@ class CustomTransferDialog extends Component {
} }
getData = (init = false, props) => { getData = (init = false, props) => {
const { query } = this.state; const { query, pageInfo } = this.state;
const { completeURL, convertDatasource, dataParams = {} } = props || this.props; const { completeURL, convertDatasource, dataParams = {}, dialogType } = props || this.props;
let payload = { ...dataParams, ...query }; let payload = { ...dataParams, ...query };
dialogType === "table" && (payload = { ...payload, ...pageInfo });
this.setState({ loading: true }); this.setState({ loading: true });
postFetch(completeURL, payload).then(({ status, data }) => { postFetch(completeURL, payload).then(({ status, data }) => {
this.setState({ loading: false }); this.setState({ loading: false });
if (status && data.list) { if (status && data.list) {
const { pageNum: current, pageSize, total } = data; const { pageNum: current, pageSize, total } = data;
this.setState({ this.setState({
listDatas: convertDatasource ? convertDatasource(data.list) : data.list listDatas: convertDatasource ? convertDatasource(data.list) : data.list, columns: data.columns,
pageInfo: { ...pageInfo, current, pageSize, total }
}); });
} else { } else {
this.setState({ this.setState({
@ -132,15 +134,18 @@ class CustomTransferDialog extends Component {
}; };
renderTitle = () => { renderTitle = () => {
return (<div className="wea-hr-muti-dialog-title"> return (<div className="wea-hr-muti-dialog-title">
<span>{getLabel(111, "数据选择")}</span> <span>{this.props.title || getLabel(111, "数据选择")}</span>
<div>{this.props.titleOptsComs}</div> <div>{this.props.titleOptsComs}</div>
</div>); </div>);
}; };
render() { render() {
const { loading, listDatas, query, leftListSelectedKeys, rightDatas, rightCheckedKeys } = this.state;
const { const {
searchParamsKey, saveLoading, buttons = [ loading, listDatas, query, leftListSelectedKeys, rightDatas, rightCheckedKeys, pageInfo, selectedRowKeys,
columns
} = this.state;
const {
searchParamsKey, saveLoading, dialogType = "", rowKey, buttons = [
<Button type="primary" loading={saveLoading} onClick={this.handleOk} <Button type="primary" loading={saveLoading} onClick={this.handleOk}
disabled={_.isEmpty(rightDatas)}>{getLabel(111, "确 定")}</Button>, disabled={_.isEmpty(rightDatas)}>{getLabel(111, "确 定")}</Button>,
<Button type="ghost" onClick={this.props.onCancel}>{getLabel(111, "取 消")}</Button> <Button type="ghost" onClick={this.props.onCancel}>{getLabel(111, "取 消")}</Button>
@ -197,6 +202,32 @@ class CustomTransferDialog extends Component {
</div> </div>
</div> </div>
</Spin>; </Spin>;
if (dialogType === "table") {
const sheight = this.dialog ? this.dialog.state.height - 116 : 260;
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.getData());
},
onChange: current => {
this.setState({ pageInfo: { ...pageInfo, current } }, () => this.getData());
}
};
const rowSelection = {
selectedRowKeys,
onChange: selectedRowKeys => this.setState({ selectedRowKeys })
};
dom = <div className="wea-hr-muti-input-table">
<WeaTable dataSource={listDatas} loading={loading} pagination={pagination} scroll={{ y: sheight }}
rowSelection={rowSelection} rowKey={rowKey || "id"} columns={columns}/>
</div>;
}
return ( return (
<WeaDialog <WeaDialog
{...this.props} initLoadCss ref={dom => this.dialog = dom} title={this.renderTitle()} {...this.props} initLoadCss ref={dom => this.dialog = dom} title={this.renderTitle()}

View File

@ -3,6 +3,20 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.wea-select, .ant-select-selection, .ant-select {
width: 100%;
}
.wea-select {
display: inline-block;
position: relative;
}
.ant-select-selection {
height: 30px;
border-radius: 0;
}
} }
.wea-hr-muti-input-table { .wea-hr-muti-input-table {

View File

@ -13,11 +13,11 @@ import { getIframeParentHeight } from "../../../util";
import { sysConfCodeRule } from "../../../apis/ruleconfig"; import { sysConfCodeRule } from "../../../apis/ruleconfig";
import CustomTransferDialog from "../../../components/CustomBrowser/components/customTransferDialog"; import CustomTransferDialog from "../../../components/CustomBrowser/components/customTransferDialog";
import SalaryDetailsTempDialog from "./salaryDetailsTempDialog"; import SalaryDetailsTempDialog from "./salaryDetailsTempDialog";
import SalaryTempMangerDialog from "./salaryTempMangerDialog";
import { MonthRangePicker } from "../../reportView/components/statisticalMicroSettingsSlide"; import { MonthRangePicker } from "../../reportView/components/statisticalMicroSettingsSlide";
import AdvanceInputBtn from "../components/advanceInputBtn"; import AdvanceInputBtn from "../components/advanceInputBtn";
import SearchPannel from "../components/searchPannel"; import SearchPannel from "../components/searchPannel";
import * as API from "../../../apis/statistics"; import * as API from "../../../apis/statistics";
import { resetPageListSetting } from "../../../apis/statistics";
import cs from "classnames"; import cs from "classnames";
import "../index.less"; import "../index.less";
@ -42,7 +42,11 @@ class SalaryDetails extends Component {
checked: this.converCheckedCol(datas) checked: this.converCheckedCol(datas)
}; };
}, },
type: "default" dialogType: "temp"
},
tempManageDialog: { //模板管理
visible: false, completeURL: "", dialogType: "table",
dataParams: { page: "salary_details_report" }
} }
}; };
} }
@ -172,9 +176,8 @@ class SalaryDetails extends Component {
}; };
handleSetDefCols = (params = {}) => this.setState({ handleSetDefCols = (params = {}) => this.setState({
transferDialog: { transferDialog: {
...this.state.transferDialog, visible: true, type: "temp", ...this.state.transferDialog, visible: true, dataParams: { ...this.state.transferDialog.dataParams, ...params },
dataParams: { ...this.state.transferDialog.dataParams, ...params }, completeURL: "/api/bs/hrmsalary/common/pageList/template/get", dialogType: "temp"
completeURL: "/api/bs/hrmsalary/common/pageList/template/get"
} }
}, () => this.getPageListTemplatelist()); }, () => this.getPageListTemplatelist());
converCheckedCol = (data) => { converCheckedCol = (data) => {
@ -196,17 +199,20 @@ class SalaryDetails extends Component {
if (status) { if (status) {
message.success(getLabel(111, "操作成功!")); message.success(getLabel(111, "操作成功!"));
this.setState({ this.setState({
transferDialog: { ...this.state.transferDialog, visible: false, type: "default" } transferDialog: { ...this.state.transferDialog, visible: false, dialogType: "temp" }
}, () => this.getSalaryList()); }, () => this.getSalaryList());
} else { } else {
message.error(errormsg); message.error(errormsg);
} }
}); });
}; };
handelAddTemp = (templateId) => { handelAddTemp = (templateId = "") => {
const { tempDialog, tempPageList } = this.state; const { tempDialog, tempPageList } = this.state;
this.setState({ this.setState({
tempDialog: { ...tempDialog, id: templateId, template: _.find(tempPageList, o => o.key === templateId) } tempDialog: {
...tempDialog, visible: true, setting: _.map(this.transferRef.state.rightDatas, o => o.id)
// template: _.find(tempPageList, o => o.key === templateId)
}
}); });
}; };
changePageListTemplate = (templateId) => { changePageListTemplate = (templateId) => {
@ -229,23 +235,11 @@ class SalaryDetails extends Component {
}); });
}); });
}; };
resetColsSetting = () => {
resetPageListSetting({ page: "salary_details_report" }).then(({ status, errormsg }) => {
if (status) {
message.success(getLabel(111, "操作成功!"));
this.setState({
transferDialog: { ...this.state.transferDialog, visible: false, type: "default" }
}, () => this.getSalaryList());
} else {
message.error(errormsg);
}
});
};
render() { render() {
const { loading, dataSource, transferDialog, tempDialog, tempPageList, templateId } = this.state; const { loading, dataSource, transferDialog, tempDialog, tempPageList, templateId, tempManageDialog } = this.state;
const { attendanceStore: { tableStore }, dateRange, showSearchAd, salaryDetailShowType } = this.props; const { dateRange, showSearchAd } = this.props;
const { dataParams: { defaultSetting } } = transferDialog; const { dialogType } = transferDialog;
return (<React.Fragment> return (<React.Fragment>
<div className="query-div"> <div className="query-div">
<MonthRangePicker dateRange={dateRange} viewAttr={2} onChange={this.props.onChange}/> <MonthRangePicker dateRange={dateRange} viewAttr={2} onChange={this.props.onChange}/>
@ -273,29 +267,37 @@ class SalaryDetails extends Component {
{/*/>*/} {/*/>*/}
{/*默认显示列,薪资模板列表*/} {/*默认显示列,薪资模板列表*/}
<CustomTransferDialog {...transferDialog} ref={dom => this.transferRef = dom} <CustomTransferDialog {...transferDialog} ref={dom => this.transferRef = dom}
buttons={[
<Button type="primary"
onClick={() => this.handelAddTemp(templateId)}>{getLabel(111, "存为模板")}</Button>,
<Button type="ghost">{getLabel(111, "模板管理")}</Button>
]}
titleOptsComs={
<WeaSelect style={{ width: 200 }} options={tempPageList}
showSearch optionFilterProp="children" value={templateId}
onChange={this.changePageListTemplate}/>}
onCancel={() => this.setState({ onCancel={() => this.setState({
transferDialog: { transferDialog: { ...transferDialog, completeURL: "", visible: false }
...transferDialog, completeURL: "", visible: false, type: "default" })}
} buttons={
})}/> dialogType === "temp" ? [
<Button type="primary"
onClick={this.handelAddTemp}>{getLabel(111, "存为模板")}</Button>,
<Button type="ghost" onClick={() => this.setState({
tempManageDialog: {
...tempManageDialog, visible: true,
completeURL: "/api/bs/hrmsalary/common/pageList/template/pageList"
}
})}>{getLabel(111, "模板管理")}</Button>
] : []
}
titleOptsComs={
dialogType === "temp" ?
<WeaSelect style={{ width: 200 }} options={tempPageList}
showSearch optionFilterProp="children"
value={templateId}
onChange={this.changePageListTemplate}/> : null
}/>
{/*薪资明细模板设置*/} {/*薪资明细模板设置*/}
<SalaryDetailsTempDialog {...tempDialog} <SalaryDetailsTempDialog {...tempDialog}
onCancel={callback => this.setState({ onCancel={callback => this.setState({
tempDialog: { ...tempDialog, visible: false, setting: [] } tempDialog: { ...tempDialog, visible: false, setting: [] }
}, () => callback && callback())} }, () => callback && callback())}
onSuccess={() => { onSuccess={this.getPageListTemplatelist}/>
this.getPageListTemplatelist(); <SalaryTempMangerDialog {...tempManageDialog} onCancel={() => this.setState({
this.getSalaryList(); tempManageDialog: { ...tempManageDialog, completeURL: "", visible: false }
}}/> })}/>
</div> </div>
</React.Fragment> </React.Fragment>
); );

View File

@ -0,0 +1,22 @@
/*
* 薪酬报表-薪酬明细
* 模板管理弹框
* @Author: 黎永顺
* @Date: 2024/12/4
* @Wechat:
* @Email: 971387674@qq.com
* @description:
*/
import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import CustomTransferDialog from "../../../components/CustomBrowser/components/customTransferDialog";
const getLabel = WeaLocaleProvider.getLabel;
class SalaryTempMangerDialog extends Component {
render() {
return (<CustomTransferDialog {...this.props} buttons={[]} title={getLabel(111, "模板管理")}/>);
}
}
export default SalaryTempMangerDialog;