salary-management-front/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfarePlan/index.js

95 lines
3.5 KiB
JavaScript

/*
* Author: 黎永顺
* name: 福利方案页面重构
* Description:
* Date: 2024/2/2
*/
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaReqTop } from "ecCom";
import { renderDropMenuDatas, renderReqBtns, tabWelfarePlanList } from "./config";
import WelfarePlanAdvanceSearchPannel from "./components/welfarePlanAdvanceSearchPannel";
import WelfarePlanList from "./components/welfarePlanList";
import LogDialog from "../../../components/logViewModal";
import cs from "classnames";
import "./index.less";
const getLabel = WeaLocaleProvider.getLabel;
@inject("taxAgentStore")
@observer
class Index extends Component {
constructor(props) {
super(props);
this.state = {
selectedKey: "SOCIAL_SECURITY", showSearchAd: false, isQuery: false, logDialogVisible: false,
customQuery: ""
};
this.welfarePlanListRef = null;
}
handleReqBtnsCLick = (type, value) => {
const { selectedKey } = this.state;
switch (type) {
case "ADD":
const { handleOpts } = this.welfarePlanListRef.wrappedInstance || {};
handleOpts(selectedKey === "CUSTOM" ? "custom-edit" : "edit");
break;
case "OPEN":
this.handleOpenAdvanceSearch();
break;
case "SEARCH":
this.handleAdvanceSearch(value);
break;
default:
break;
}
};
handleOpenAdvanceSearch = () => this.setState({ showSearchAd: true });
handleAdvanceSearch = (customQuery = "") => this.setState({ isQuery: !this.state.isQuery, customQuery });
onAdSearch = () => this.setState({ showSearchAd: false, isQuery: !this.state.isQuery });
onDropMenuClick = (key) => {
switch (key) {
case "log":
this.setState({ logDialogVisible: true });
break;
default:
break;
}
};
render() {
const { taxAgentStore: { showOperateBtn } } = this.props;
const { logDialogVisible, selectedKey, showSearchAd, isQuery, customQuery } = this.state;
return (
<div className="salary-welfare-plan-wrapper">
<WeaReqTop
title={getLabel(538000, "社保福利方案")} buttonSpace={10} icon={<i className="icon-coms-fa"/>}
iconBgcolor="#F14A2D" showDropIcon dropMenuDatas={renderDropMenuDatas(selectedKey, showOperateBtn)}
onDropMenuClick={this.onDropMenuClick} tabDatas={tabWelfarePlanList} selectedKey={selectedKey}
onChange={selectedKey => this.setState({ selectedKey, showSearchAd: false, customQuery: "" })}
buttons={renderReqBtns(selectedKey, this.handleReqBtnsCLick, showOperateBtn, customQuery)}
>
<div className="salary-welfare-plan-content">
<div
className={cs("searchAdvanced-condition-container", { "searchAdvanced-condition-hide": !showSearchAd })}>
<WelfarePlanAdvanceSearchPannel
onCancel={() => this.setState({ showSearchAd: false })}
onAdSearch={this.onAdSearch}
/>
</div>
{/*列表*/}
<WelfarePlanList ref={dom => this.welfarePlanListRef = dom} customQuery={customQuery}
selectedKey={selectedKey} isQuery={isQuery}/>
</div>
{/*操作日志*/}
<LogDialog visible={logDialogVisible} logFunction={selectedKey === "CUSTOM" ? "siCategory" : "siScheme"}
onCancel={() => this.setState({ logDialogVisible: false })}/>
</WeaReqTop>
</div>
);
}
}
export default Index;