532 lines
18 KiB
JavaScript
532 lines
18 KiB
JavaScript
import React from "react";
|
||
import { inject, observer } from "mobx-react";
|
||
import { Button, DatePicker, message, Modal } from "antd";
|
||
import moment from "moment";
|
||
import { WeaHelpfulTip, WeaInputSearch, WeaRightMenu, WeaSelect, WeaSlideModal, WeaTop } from "ecCom";
|
||
import { renderNoright } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||
import CustomTab from "../../components/customTab";
|
||
|
||
import { columns, tempateColumns } from "./columns";
|
||
import StepSlide from "../../components/stepSlide";
|
||
import BaseInformForm from "./stepForm/baseInformForm";
|
||
import ShowSettingForm from "./stepForm/showSettingForm";
|
||
import SlideModalTitle from "../../components/slideModalTitle";
|
||
import TemplateSettingList from "./templateSettingList";
|
||
import { notNull } from "../../util/validate";
|
||
import CopyModal from "./copyModal";
|
||
import SalarySendList from "./SalarySendList";
|
||
import "../dataAcquisition/cumDeduct/index.less";
|
||
|
||
const { MonthPicker } = DatePicker;
|
||
|
||
@inject("payrollStore", "taxAgentStore")
|
||
@observer
|
||
export default class Payroll extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
value: "",
|
||
selectedKey: "0",
|
||
currentStep: 0,
|
||
stepSlideVisible: false,
|
||
selectedTab: 0,
|
||
editSlideVisible: false,
|
||
initSelected: false,
|
||
ledgerOptions: [],
|
||
templateSearchValue: "", // 工资单模板列表-搜索条件-名称
|
||
templateSelect: "", // 工资单模板列表-搜索条件-账套下拉选中值
|
||
templateCurrentId: "",
|
||
copyModalVisible: false,
|
||
startDate: moment(new Date()).startOf("year").format("YYYY-MM"),
|
||
endDate: moment(new Date()).startOf("month").format("YYYY-MM")
|
||
};
|
||
this.recordId = "";
|
||
this.salaryYearMonth = [];
|
||
this.listPageInfo = { current: 1, pageSize: 10 };
|
||
columns.map(item => {
|
||
if (item.dataIndex == "cz") {
|
||
item.render = (text, record) => {
|
||
return (
|
||
<div>
|
||
<a onClick={() => {
|
||
window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollGrant");
|
||
}}>工资单发放</a>
|
||
<a onClick={window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollDetail")}>查看详情</a>
|
||
<a onClick={this.handleUpdateTemplate(record)}>更新模板</a>
|
||
</div>
|
||
);
|
||
};
|
||
}
|
||
});
|
||
|
||
tempateColumns.map(item => {
|
||
if (item.dataIndex == "username") {
|
||
item.render = (text) => {
|
||
return (
|
||
<a onClick={() => {
|
||
this.setState({ editSlideVisible: true });
|
||
}}>{text}</a>
|
||
);
|
||
};
|
||
} else if (item.dataIndex == "cz") {
|
||
item.render = () => {
|
||
return (
|
||
<div style={{ display: "inline-block" }}>
|
||
<a style={{ marginRight: "10px" }}>编辑</a>
|
||
<a style={{ marginRight: "10px" }}>复制</a>
|
||
<a style={{ marginRight: "10px" }}>删除</a>
|
||
{/* <a >操作日志</a> */}
|
||
</div>
|
||
);
|
||
};
|
||
}
|
||
});
|
||
}
|
||
|
||
// 更新模板
|
||
handleUpdateTemplate(record) {
|
||
this.setState({
|
||
selectedKey: "1",
|
||
editSlideVisible: true,
|
||
templateCurrentId: record.templateId
|
||
|
||
});
|
||
}
|
||
|
||
// 工资单模板-新建表单变化监听
|
||
handleBaseInfoChange(request) {
|
||
const { payrollStore: { setTemplateBaseData } } = this.props;
|
||
setTemplateBaseData(request);
|
||
}
|
||
|
||
// 新建保存
|
||
handleSave() {
|
||
const { payrollStore } = this.props;
|
||
const { fetchSavePayroll } = payrollStore;
|
||
fetchSavePayroll().then(() => {
|
||
this.setState({ currentStep: 0, stepSlideVisible: false });
|
||
});
|
||
}
|
||
|
||
componentWillMount() {
|
||
const { payrollStore } = this.props;
|
||
const { getPayrollTemplateLedgerList } = payrollStore;
|
||
// 获取薪资账套下拉列表
|
||
getPayrollTemplateLedgerList().then((options) => {
|
||
this.setState({
|
||
initSelected: true,
|
||
ledgerOptions: options
|
||
});
|
||
});
|
||
}
|
||
|
||
// 模板搜索
|
||
handleTemplateSearch() {
|
||
const { templateSearchValue, templateSelect } = this.state;
|
||
let params = { name: templateSearchValue, salarySobId: templateSelect };
|
||
const { payrollStore: { getPayrollTemplateList } } = this.props;
|
||
getPayrollTemplateList(params);
|
||
}
|
||
|
||
// 模板选择框下拉改变事件
|
||
handleTemplateSelectChange(value) {
|
||
this.setState({ templateSelect: value });
|
||
this.handleTemplateSearch();
|
||
}
|
||
|
||
// 模板列表编辑
|
||
handleTemplateListEdit(record) {
|
||
const { payrollStore } = this.props;
|
||
const { getPayrollShowForm } = payrollStore;
|
||
this.recordId = record.id;
|
||
getPayrollShowForm(record.id);
|
||
this.setState({ templateCurrentId: record.id, selectedTab: 0 }, () => {
|
||
this.setState({ editSlideVisible: true });
|
||
});
|
||
}
|
||
|
||
// 模板列表复制
|
||
handleTemplateListCopy(record) {
|
||
this.setState({
|
||
templateCurrentId: record.id
|
||
}, () => {
|
||
this.setState({
|
||
copyModalVisible: true
|
||
});
|
||
});
|
||
}
|
||
|
||
// 复制模板保存事件监听
|
||
handleCopyModalSave(value) {
|
||
const { payrollStore } = this.props;
|
||
const { duplicatePayroll } = payrollStore;
|
||
duplicatePayroll(this.state.templateCurrentId, value).then(() => {
|
||
this.setState({
|
||
copyModalVisible: false
|
||
});
|
||
});
|
||
}
|
||
|
||
// 模板列表删除
|
||
handleTemplateListDelete(record) {
|
||
const { payrollStore: { deletePayroll } } = this.props;
|
||
Modal.confirm({
|
||
title: "信息确认",
|
||
content: "确认删除",
|
||
onOk: () => {
|
||
deletePayroll([record.id]);
|
||
},
|
||
onCancel: () => {
|
||
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
handleRangePickerChange(type, value) {
|
||
const { payrollStore: { getPayrollList } } = this.props;
|
||
this.setState({
|
||
[type]: value ? moment(value).format("YYYY-MM") : moment().format("YYYY-MM")
|
||
}, () => {
|
||
const { startDate, endDate } = this.state;
|
||
this.salaryYearMonth = [startDate, endDate];
|
||
getPayrollList({ salaryYearMonth: [startDate, endDate], ...this.listPageInfo });
|
||
});
|
||
}
|
||
|
||
// 预览
|
||
handlePreview() {
|
||
const { payrollStore: { templateBaseData, salaryTemplateShowSet, salaryItemSet } } = this.props;
|
||
window.localStorage.setItem("templateBaseData", JSON.stringify(templateBaseData));
|
||
window.localStorage.setItem("salaryTemplateShowSet", JSON.stringify(salaryTemplateShowSet));
|
||
window.localStorage.setItem("salaryItemSet", JSON.stringify(salaryItemSet));
|
||
window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/templatePreview");
|
||
}
|
||
|
||
// 更新保存
|
||
handleUpdateSave() {
|
||
const { payrollStore } = this.props;
|
||
const { fetchUpdatePayroll } = payrollStore;
|
||
fetchUpdatePayroll(this.recordId).then(() => {
|
||
this.setState({
|
||
editSlideVisible: false,
|
||
selectedTab: 0
|
||
});
|
||
});
|
||
}
|
||
|
||
// 发放页面页码跳转
|
||
handleListDataPageChange(value, pageInfo) {
|
||
const { payrollStore: { getPayrollList } } = this.props;
|
||
this.listPageInfo = pageInfo;
|
||
getPayrollList({ salaryYearMonth: this.salaryYearMonth, ...pageInfo });
|
||
}
|
||
|
||
// 发放页面每页条数
|
||
handleListShowSizeChange(pageInfo) {
|
||
const { payrollStore: { getPayrollList } } = this.props;
|
||
this.listPageInfo = pageInfo;
|
||
getPayrollList({ salaryYearMonth: this.salaryYearMonth, ...pageInfo });
|
||
}
|
||
|
||
render() {
|
||
const { payrollStore, taxAgentStore: { showOperateBtn } } = this.props;
|
||
const {
|
||
loading,
|
||
hasRight,
|
||
form,
|
||
doSearch,
|
||
setShowSearchAd
|
||
} = payrollStore;
|
||
const { currentStep, selectedTab, templateSearchValue, templateSelect, startDate, endDate } = this.state;
|
||
if (!hasRight && !loading) { // 无权限处理
|
||
return renderNoright();
|
||
}
|
||
|
||
const rightMenu = [// 右键菜单
|
||
// {
|
||
// key: 'BTN_COLUMN',
|
||
// icon: <i className='icon-coms-Custom' />,
|
||
// content: '显示列定制',
|
||
// onClick: this.showColumn
|
||
// },
|
||
];
|
||
const collectParams = { // 收藏功能配置
|
||
favname: "工资单发放",
|
||
favouritetype: 1,
|
||
objid: 0,
|
||
link: "wui/index.html#/ns_demo03/index",
|
||
importantlevel: 1
|
||
};
|
||
const adBtn = [ // 高级搜索内部按钮
|
||
<Button type="primary" onClick={doSearch}>搜索</Button>,
|
||
<Button type="ghost" onClick={() => form.resetForm()}>重置</Button>,
|
||
<Button type="ghost" onClick={() => setShowSearchAd(false)}>取消</Button>
|
||
];
|
||
|
||
const topTab = [{
|
||
title: "工资单发放",
|
||
viewcondition: "0"
|
||
},
|
||
{
|
||
title: "工资单模板设置",
|
||
viewcondition: "1"
|
||
}];
|
||
|
||
const renderRightOperation = () => {
|
||
if (this.state.selectedKey == "0") {
|
||
return <div style={{ display: "inline-block" }}>
|
||
<WeaHelpfulTip
|
||
width={200}
|
||
title="提示：无工资单模板无法发放工资单，请先设置一个默认使用的工资单模板"
|
||
placement="topLeft"
|
||
/>
|
||
<div style={{ display: "inline-block", marginLeft: "10px" }}>
|
||
<MonthPicker
|
||
value={startDate}
|
||
disabledDate={(current) => {
|
||
return current && endDate && current.getTime() > new Date(endDate).getTime();
|
||
}}
|
||
format="YYYY-MM"
|
||
onChange={(val) => this.handleRangePickerChange("startDate", val)}
|
||
/>
|
||
<span className="to" style={{ margin: "0 10px" }}>至</span>
|
||
<MonthPicker
|
||
value={endDate}
|
||
disabledDate={(current) => {
|
||
return current && startDate && current.getTime() < new Date(startDate).getTime();
|
||
}}
|
||
getCalendarContainer={trigger => trigger.parentNode}
|
||
format="YYYY-MM"
|
||
onChange={(val) => this.handleRangePickerChange("endDate", val)}
|
||
/>
|
||
</div>
|
||
</div>;
|
||
} else if (this.state.selectedKey == "1") {
|
||
return (
|
||
<div style={{ display: "inline-block" }}>
|
||
{
|
||
showOperateBtn &&
|
||
<Button type="primary" onClick={() => {
|
||
this.setState({ stepSlideVisible: true });
|
||
}}>新建</Button>
|
||
}
|
||
{
|
||
this.state.initSelected && <WeaSelect options={this.state.ledgerOptions}
|
||
placeholder="请选择账套"
|
||
style={{ width: "200px", marginLeft: "10px", marginRight: "10px" }}
|
||
value={templateSelect} onChange={(value) => {
|
||
this.handleTemplateSelectChange(value);
|
||
}}/>
|
||
}
|
||
|
||
<WeaInputSearch style={{ marginleft: "10px" }} placeholder="请输入工资单名称" value={templateSearchValue}
|
||
onChange={(value) => {
|
||
this.setState({ templateSearchValue: value });
|
||
}} onSearch={(value) => {
|
||
this.handleTemplateSearch(value);
|
||
}}/>
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
|
||
const steps = [
|
||
"基础设置",
|
||
"显示设置"
|
||
];
|
||
|
||
const validateStep1 = () => {
|
||
const { payrollStore: { templateBaseData } } = this.props;
|
||
if (!notNull(templateBaseData.name)) {
|
||
message.warning("工资单模板名称不能为空");
|
||
return false;
|
||
}
|
||
|
||
if (!notNull(templateBaseData.salarySob)) {
|
||
message.warning("薪资账套不能为空");
|
||
return false;
|
||
}
|
||
return true;
|
||
};
|
||
const nextStep = () => {
|
||
if (!validateStep1()) {
|
||
return;
|
||
}
|
||
this.setState({
|
||
currentStep: this.state.currentStep + 1
|
||
});
|
||
};
|
||
// 上一步
|
||
const prevStep = () => {
|
||
this.setState({
|
||
currentStep: this.state.currentStep - 1
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<WeaRightMenu
|
||
datas={rightMenu} // 右键菜单
|
||
collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||
>
|
||
<WeaTop
|
||
title="工资单发放" // 文字
|
||
icon={<i className="icon-coms-fa"/>} // 左侧图标
|
||
iconBgcolor="#F14A2D" // 左侧图标背景色
|
||
showDropIcon={false} // 是否显示下拉按钮
|
||
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||
>
|
||
<CustomTab
|
||
topTab={topTab}
|
||
searchOperationItem={
|
||
renderRightOperation()
|
||
}
|
||
onChange={(v) => {
|
||
this.setState({ selectedKey: v });
|
||
}}
|
||
/>
|
||
{
|
||
this.state.selectedKey == 0 &&
|
||
<SalarySendList
|
||
onEditTemplate={(record) => {
|
||
this.handleTemplateListEdit(record);
|
||
}}
|
||
salaryYearMonth={this.salaryYearMonth}
|
||
handleListDataPageChange={(value, pageInfo) => {
|
||
this.handleListDataPageChange(value, pageInfo);
|
||
}}
|
||
handleListShowSizeChange={(pageInfo) => {
|
||
this.handleListShowSizeChange(pageInfo);
|
||
}}
|
||
/>
|
||
|
||
// <WeaTable columns={columns} dataSource={dataSource}/>
|
||
}
|
||
|
||
{
|
||
this.state.selectedKey == 1 &&
|
||
<TemplateSettingList
|
||
onEdit={(record) => {
|
||
this.handleTemplateListEdit(record);
|
||
}}
|
||
onCopy={(record) => {
|
||
this.handleTemplateListCopy(record);
|
||
}}
|
||
showOperateBtn={showOperateBtn}
|
||
onDelete={(record) => this.handleTemplateListDelete(record)}
|
||
/>
|
||
}
|
||
</WeaTop>
|
||
</WeaRightMenu>
|
||
|
||
{
|
||
this.state.stepSlideVisible && <StepSlide
|
||
visible={this.state.stepSlideVisible}
|
||
currentStep={currentStep}
|
||
steps={steps}
|
||
onCancel={() => {
|
||
this.setState({ stepSlideVisible: false });
|
||
}}
|
||
customOperate={
|
||
currentStep == 0 ? [
|
||
<Button type="primary" onClick={() => {
|
||
nextStep();
|
||
}}>下一步</Button>
|
||
] : currentStep == 1 ? [
|
||
<Button type="default" style={{ marginRight: "10px" }} onClick={() => {
|
||
prevStep();
|
||
}}>上一步</Button>,
|
||
<Button type="primary" onClick={() => {
|
||
this.handleSave();
|
||
}}>保存</Button>,
|
||
<Button type="default" style={{ marginLeft: "10px" }} onClick={() => {
|
||
this.handlePreview();
|
||
}}>预览</Button>
|
||
] : []
|
||
}
|
||
title="新建工资单模板"
|
||
content={
|
||
<div>
|
||
{
|
||
currentStep == 0 && <BaseInformForm onChange={(request) => {
|
||
this.handleBaseInfoChange(request);
|
||
}}/>
|
||
}
|
||
{
|
||
currentStep == 1 && <ShowSettingForm/>
|
||
}
|
||
</div>
|
||
|
||
}
|
||
/>
|
||
}
|
||
|
||
{
|
||
this.state.editSlideVisible &&
|
||
<WeaSlideModal
|
||
className="slideOuterWrapper"
|
||
visible={this.state.editSlideVisible}
|
||
top={0}
|
||
width={50}
|
||
height={100}
|
||
direction={"right"}
|
||
measure={"%"}
|
||
title={
|
||
<SlideModalTitle
|
||
subtitle="编辑工资单模板"
|
||
tabs={[{ title: "基础设置", key: 0 }, { title: "显示设置", key: 1 }]}
|
||
editable={false}
|
||
selectedTab={selectedTab}
|
||
showOperateBtn={showOperateBtn}
|
||
customOperate={
|
||
selectedTab == 0 ? [
|
||
<Button type="primary" onClick={() => {
|
||
this.handleUpdateSave();
|
||
}}>保存</Button>
|
||
] : selectedTab == 1 ? [
|
||
<Button type="primary" onClick={() => {
|
||
this.handleUpdateSave();
|
||
}} style={{ marginRight: "10px" }}>保存</Button>,
|
||
<Button type="default" onClick={() => {
|
||
this.handlePreview();
|
||
}}>预览</Button>
|
||
] : []
|
||
}
|
||
subItemChange={
|
||
(selectedTab) => {
|
||
this.setState({ selectedTab });
|
||
}
|
||
}
|
||
/>
|
||
}
|
||
content={<div>
|
||
{
|
||
selectedTab == 0 &&
|
||
<BaseInformForm id={this.state.templateCurrentId} onChange={(request) => {
|
||
this.handleBaseInfoChange(request);
|
||
}}/>
|
||
}
|
||
{
|
||
selectedTab == 1 && <ShowSettingForm id={this.state.templateCurrentId}/>
|
||
}
|
||
</div>}
|
||
onClose={() => this.setState({ editSlideVisible: false }, () => this.setState({ selectedTab: 0 }))}
|
||
showMask={true}
|
||
closeMaskOnClick={() => this.setState({ editSlideVisible: false }, () => this.setState({ selectedTab: 0 }))}/>
|
||
}
|
||
{
|
||
this.state.copyModalVisible &&
|
||
<CopyModal
|
||
onSave={(value) => this.handleCopyModalSave(value)}
|
||
visible={this.state.copyModalVisible}
|
||
onCancel={() => {
|
||
this.setState({ copyModalVisible: false });
|
||
}}/>
|
||
}
|
||
</div>
|
||
);
|
||
}
|
||
}
|