114 lines
4.6 KiB
JavaScript
114 lines
4.6 KiB
JavaScript
/*
|
||
*
|
||
* 查看工资单详情-重构页面
|
||
* @Author: 黎永顺
|
||
* @Date: 2024/7/15
|
||
* @Wechat:
|
||
* @Email: 971387674@qq.com
|
||
* @description:
|
||
*/
|
||
import React, { Component } from "react";
|
||
import { inject, observer } from "mobx-react";
|
||
import { toJS } from "mobx";
|
||
import { WeaLoadingGlobal, WeaLocaleProvider, WeaTop } from "ecCom";
|
||
import { Button } from "antd";
|
||
import AdvanceInputBtn from "./components/advanceInputBtn";
|
||
import SalaryMonthHelpfulTip from "./components/salaryMonthHelpfulTip";
|
||
import SalaryDetailSearchPannel from "./components/salaryDetailSearchPannel";
|
||
import SalaryDetailList from "./components/salaryDetailList";
|
||
import { getQueryString } from "../../../util/url";
|
||
import { removePropertyCondition } from "../../../util/response";
|
||
import { sysConfCodeRule } from "../../../apis/ruleconfig";
|
||
import * as API from "../../../apis/payroll";
|
||
import cs from "classnames";
|
||
import "./index.less";
|
||
|
||
const getLabel = WeaLocaleProvider.getLabel;
|
||
|
||
@inject("taxAgentStore", "payrollStore")
|
||
@observer
|
||
class PayrollDetail extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
salarySendDetailBaseInfo: {}, showSearchAd: false, isQuery: false, conditions: [],
|
||
showTotalCell: false
|
||
};
|
||
this.listRef = null;
|
||
}
|
||
|
||
async componentDidMount() {
|
||
const id = getQueryString("id");
|
||
const { payrollStore: { detailListConditionForm } } = this.props;
|
||
const [{ data: salarySendDetailBaseInfo }, { data }, { data: confCode }] = await Promise.all([
|
||
API.getPayrollInfo({ id }), API.getPayrollDetailSa(),
|
||
sysConfCodeRule({ code: "OPEN_ACCT_RESULT_SUM" })
|
||
]);
|
||
this.setState({
|
||
salarySendDetailBaseInfo, showTotalCell: confCode === "1",
|
||
conditions: removePropertyCondition(data.condition)
|
||
}, () => detailListConditionForm.initFormFields(this.state.conditions));
|
||
}
|
||
|
||
handleExportAll = () => {
|
||
const { payrollStore: { salaryTableStore } } = this.props;
|
||
const columns = _.filter(toJS(salaryTableStore.columns), (item) => item.display === "true");
|
||
WeaLoadingGlobal.start();
|
||
const salarySendId = getQueryString("id");
|
||
const promise = API.exportDetailList_reconfig({ salarySendId, columns: _.map(columns, it => it.dataIndex) });
|
||
};
|
||
|
||
render() {
|
||
const { salarySendDetailBaseInfo, showSearchAd, conditions, isQuery, showTotalCell } = this.state;
|
||
const { taxAgentStore: { PageAndOptAuth } } = this.props;
|
||
const showOperateBtn = PageAndOptAuth.opts.length;
|
||
const { salaryMonth, template } = salarySendDetailBaseInfo;
|
||
const dropMenuDatas = [
|
||
{
|
||
key: "BTN_COLUMN",
|
||
icon: <i className="icon-coms-Custom"/>,
|
||
content: getLabel(111, "显示列定制"),
|
||
onClick: () => this.listRef.wrappedInstance.handleSetCustomCols()
|
||
}
|
||
];
|
||
const btns = [
|
||
<Button type="primary" onClick={this.handleExportAll}>{getLabel(111, "导出全部")}</Button>,
|
||
<AdvanceInputBtn onOpenAdvanceSearch={() => this.setState({ showSearchAd: true })}
|
||
onAdvanceSearch={() => this.setState({ isQuery: !isQuery })}/>
|
||
];
|
||
!showOperateBtn && btns.shift();
|
||
return (
|
||
<WeaTop
|
||
title={getLabel(111, "查看工资单详情")} icon={<i className="icon-coms-fa"/>}
|
||
iconBgcolor="#F14A2D" showDropIcon={true} dropMenuDatas={dropMenuDatas}
|
||
buttons={btns} className="salary-payroll-details-layout"
|
||
>
|
||
<div className="salary-payroll-details">
|
||
<div className="salary-tb-tip">
|
||
<div>
|
||
<span><span
|
||
className="label">{getLabel(111, "薪资所属月")}</span>：<span>{salaryMonth}</span></span>
|
||
{
|
||
!_.isEmpty(salarySendDetailBaseInfo) &&
|
||
<SalaryMonthHelpfulTip salarySendDetailBaseInfo={salarySendDetailBaseInfo}/>
|
||
}
|
||
<span
|
||
className="salary-payroll-template-name"><span
|
||
className="label">{getLabel(111, "工资单模板")}</span>：<span>{template}</span></span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
className={cs("searchAdvanced-condition-container", { "searchAdvanced-condition-hide": !showSearchAd })}>
|
||
<SalaryDetailSearchPannel onCancel={() => this.setState({ showSearchAd: false })}
|
||
onAdSearch={() => this.setState({ isQuery: !isQuery })}
|
||
conditions={conditions}/>
|
||
</div>
|
||
{/*列表*/}
|
||
<SalaryDetailList isQuery={isQuery} showTotalCell={showTotalCell} ref={dom => this.listRef = dom}/>
|
||
</div>
|
||
</WeaTop>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default PayrollDetail; |