diff --git a/pc4mobx/hrmSalary/apis/payroll.js b/pc4mobx/hrmSalary/apis/payroll.js index b78fac43..8ca9fab7 100644 --- a/pc4mobx/hrmSalary/apis/payroll.js +++ b/pc4mobx/hrmSalary/apis/payroll.js @@ -244,3 +244,7 @@ export const getSmsSalaryItemSet = (params) => { export const genPdfBeforeExport = (params) => { return WeaTools.callApi("/api/bs/hrmsalary/salaryBill/genPdfBeforeExport", "GET", params); }; +//工资单预览 +export const salaryBillPreview = (params) => { + return postFetch("/api/bs/hrmsalary/salaryBill/preview", params); +}; diff --git a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/index.less b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/index.less new file mode 100644 index 00000000..6c2c71f7 --- /dev/null +++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/index.less @@ -0,0 +1,6 @@ +.payPreBox { + .pay-preview-layout { + width: 100%; + height: 100%; + } +} diff --git a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/payrollPreviewDialog.js b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/payrollPreviewDialog.js new file mode 100644 index 00000000..763a45a6 --- /dev/null +++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/payrollPreviewDialog.js @@ -0,0 +1,62 @@ +/* + * + * 工资单预览 + * @Author: 黎永顺 + * @Date: 2024/6/17 + * @Wechat: + * @Email: 971387674@qq.com + * @description: +*/ +import React, { Component } from "react"; +import { WeaDialog, WeaLocaleProvider } from "ecCom"; +import { salaryBillPreview } from "../../../../apis/payroll"; +import Content from "../../../../components/pcTemplate/content"; +import "./index.less"; + +const getLabel = WeaLocaleProvider.getLabel; + +class PayrollPreviewDialog extends Component { + constructor(props) { + super(props); + this.state = { + salaryBillData: { salaryTemplate: {}, salaryGroups: [], employeeInformation: {} } + }; + this.preRef = null; + } + + componentWillReceiveProps(nextProps, nextContext) { + if (nextProps.visible !== this.props.visible && nextProps.visible) { + const { salaryInfoId, recipient } = nextProps; + salaryBillPreview({ salaryInfoId, recipient }).then(({ status, data }) => { + if (status) { + this.setState({ salaryBillData: data }); + } + }); + } + } + + + render() { + const { + salaryTemplate, salaryGroups, employeeInformation, sendTime + } = this.state.salaryBillData; + const salaryProps = { + theme: salaryTemplate.theme, tip: salaryTemplate.textContent, sendTime, + background: salaryTemplate.background, tipPosi: salaryTemplate.textContentPosition || "", + itemTypeList: [employeeInformation, ...salaryGroups] + }; + return ( + this.preRef = dom} scalable hasScroll className="payPreBox" initLoadCss + style={{ + width: 998, height: window.innerHeight - 40, minHeight: 200, minWidth: 380, maxHeight: "90%", + maxWidth: "90%", overflow: "hidden", transform: "translate(0px, 0px)" + }} + > +
{!_.isEmpty(salaryGroups) && }
+ + ); + } +} + +export default PayrollPreviewDialog; diff --git a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js index 52bb065c..8cde7da5 100644 --- a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js +++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js @@ -10,6 +10,7 @@ import CustomPaginationTable from "../../../components/customPaginationTable"; import PayrollPartTable from "./payrollPartTable"; import { genPdfBeforeExport, getPayrollIssuanceProgressBar } from "../../../apis/payroll"; import ProgressModal from "../../../components/progressModal"; +import PayrollPreviewDialog from "./components/payrollPreviewDialog"; const getLabel = WeaLocaleProvider.getLabel; const { ButtonSelect } = WeaDropdown; @@ -31,6 +32,10 @@ export default class PayrollGrant extends React.Component { title: "工资单发放", grantType: "", salarySendId: "" + }, + payrollPreviewDialog: { + visible: false, title: getLabel(111, "工资单预览"), + salaryInfoId: "", recipient: "" } }; this.pageInfo = { current: 1, pageSize: 10 }; @@ -303,7 +308,7 @@ export default class PayrollGrant extends React.Component { }; getColumns = () => { - const { selectedKey, showFeedbackColumn } = this.state; + const { selectedKey, showFeedbackColumn, payrollPreviewDialog } = this.state; const { payrollStore } = this.props; const { salaryGrantTableStore: columns, salarySendDetailBaseInfo } = payrollStore; return _.map([ @@ -323,6 +328,15 @@ export default class PayrollGrant extends React.Component { onClick={() => this.handleWithdraw({ ids: [record.id] })}> 撤回 + this.setState({ + payrollPreviewDialog: { + ...payrollPreviewDialog, + visible: true, salaryInfoId: record.id, recipient: record.employeeId + } + })}> + {getLabel(111, "查看")} + { salarySendDetailBaseInfo.showPdfBtn && this.handleGrant({ ids: [record.id] })}> - 发放 - + + this.handleGrant({ ids: [record.id] })}> + 发放 + + this.setState({ + payrollPreviewDialog: { + ...payrollPreviewDialog, + visible: true, salaryInfoId: record.id, recipient: record.employeeId + } + })}> + {getLabel(111, "查看")} + + ); } } @@ -538,9 +562,10 @@ export default class PayrollGrant extends React.Component { grantListCondition, setGrantListShowSearchAd, salaryGrantPageInfo, - getInfoList + getInfoList, + loading } = payrollStore; - const { selectedRowKeys, selectedKey, currentId, payrollPartModalParams } = this.state; + const { selectedRowKeys, selectedKey, currentId, payrollPartModalParams, payrollPreviewDialog } = this.state; const rowSelection = { selectedRowKeys, onChange: this.onSelectChange @@ -569,35 +594,19 @@ export default class PayrollGrant extends React.Component { ]; return (
- } // 左侧图标 - iconBgcolor="#F14A2D" // 左侧图标背景色 - showDropIcon={true} // 是否显示下拉按钮 - buttons={this.getSearchsAdQuick()} - /> - + } iconBgcolor="#F14A2D" + showDropIcon={true} buttons={this.getSearchsAdQuick()}/> - this.setState({ selectedKey: v }, () => { - getInfoList({ - salarySendId: currentId, - isGranted: v !== "0" - }); - }) - } - searchType={["base", "advanced"]} // base：基础搜索框 advanced：显示高级搜索按钮 - searchsBasePlaceHolder="请输入姓名" - showSearchAd={grantListShowSearchAd} // 是否展开高级搜索面板 - setShowSearchAd={bool => setGrantListShowSearchAd(bool)} //高级搜索面板受控 - searchsAd={getSearchs(grantListConditionForm, toJS(grantListCondition), 2)} // 高级搜索内部数据 - buttonsAd={adBtn} // 高级搜索内部按钮 - onSearch={() => this.handleSearch()} // 点搜索按钮时的回调 - onSearchChange={v => grantListConditionForm.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值 - searchsBaseValue={grantListConditionForm.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步 + datas={topTab} keyParam="viewcondition" selectedKey={selectedKey} searchType={["base", "advanced"]} + onChange={v => this.setState({ selectedKey: v }, () => { + getInfoList({ salarySendId: currentId, isGranted: v !== "0" }); + })} + searchsBasePlaceHolder="请输入姓名" showSearchAd={grantListShowSearchAd} buttonsAd={adBtn} + setShowSearchAd={bool => setGrantListShowSearchAd(bool)} + searchsAd={getSearchs(grantListConditionForm, toJS(grantListCondition), 2)} + onSearch={() => this.handleSearch()} + onSearchChange={v => grantListConditionForm.updateFields({ username: v })} + searchsBaseValue={grantListConditionForm.getFormParams().username} />
@@ -626,7 +635,7 @@ export default class PayrollGrant extends React.Component {
{ - !_.isEmpty(this.getColumns()) ? + !loading ? } + {/*工资单预览*/} + this.setState({ + payrollPreviewDialog: { + ...payrollPreviewDialog, + visible: false + } + })}/>
); } diff --git a/pc4mobx/hrmSalary/stores/payroll.js b/pc4mobx/hrmSalary/stores/payroll.js index 4da841d0..ef1e46a1 100644 --- a/pc4mobx/hrmSalary/stores/payroll.js +++ b/pc4mobx/hrmSalary/stores/payroll.js @@ -458,7 +458,9 @@ export class payrollStore { departmentIds: form.departmentIds ? form.departmentIds.split(",") : [], subCompanyIds: form.subCompanyIds ? form.subCompanyIds.split(",") : [] }; + this.loading = true; API.getInfoList(params).then(res => { + this.loading = false; if (res.status) { this.salaryGrantTableStore = res.data.columns; this.salaryGrantDataSource = res.data.list; @@ -470,7 +472,7 @@ export class payrollStore { } else { message.error(res.errormsg || "获取失败"); } - }); + }).catch(() => this.loading = false); }; // 工资单-工资单发放详情列表