396 lines
12 KiB
JavaScript
396 lines
12 KiB
JavaScript
import React from "react";
|
|
import { inject, observer } from "mobx-react";
|
|
import { Button, DatePicker, Dropdown, Menu, message, Modal, Tag } from "antd";
|
|
import { WeaInputSearch, WeaLocaleProvider, WeaNewScroll, WeaTop } from "ecCom";
|
|
import { renderNoright } from "../../util";
|
|
import CustomTab from "../../components/customTab";
|
|
import moment from "moment";
|
|
import BaseFormModal from "./baseFormModal";
|
|
import CustomPaginationTable from "../../components/customPaginationTable";
|
|
import ProgressModal from "../../components/progressModal";
|
|
import "./index.less";
|
|
|
|
const { getLabel } = WeaLocaleProvider;
|
|
const MonthPicker = DatePicker.MonthPicker;
|
|
|
|
@inject("calculateStore", "taxAgentStore")
|
|
@observer
|
|
export default class Calculate extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
progressVisible: false,
|
|
progress: 0,
|
|
value: "",
|
|
selectedKey: "0",
|
|
searchValue: "",
|
|
startDate: moment(new Date()).startOf("year").format("YYYY-MM"),
|
|
endDate: moment(new Date()).startOf("month").format("YYYY-MM"),
|
|
current: 1
|
|
};
|
|
this.pageInfo = { current: 1, pageSize: 10 };
|
|
}
|
|
|
|
componentWillMount() {
|
|
const { calculateStore } = this.props;
|
|
const { getSalaryAcctList } = calculateStore;
|
|
getSalaryAcctList({
|
|
name: "",
|
|
startMonthStr: this.state.startDate,
|
|
endMonthStr: this.state.endDate
|
|
});
|
|
}
|
|
|
|
// 搜索
|
|
handleSearch = (value, extra = {}) => {
|
|
const { calculateStore } = this.props;
|
|
const { getSalaryAcctList } = calculateStore;
|
|
getSalaryAcctList({
|
|
name: value,
|
|
startMonthStr: this.state.startDate,
|
|
endMonthStr: this.state.endDate,
|
|
current: this.state.current,
|
|
...extra
|
|
});
|
|
};
|
|
|
|
handleRangePickerChange(type, value) {
|
|
const { calculateStore: { getSalaryAcctList } } = this.props;
|
|
this.setState({
|
|
[type]: value ? moment(value).format("YYYY-MM") : moment().format("YYYY-MM")
|
|
}, () => {
|
|
const { startDate: startMonthStr, endDate: endMonthStr } = this.state;
|
|
getSalaryAcctList({
|
|
name: this.state.searchValue,
|
|
startMonthStr,
|
|
endMonthStr
|
|
});
|
|
});
|
|
}
|
|
|
|
// 列表项核算回调
|
|
handleAccount(record) {
|
|
window.open(
|
|
"/spa/hrmSalary/static/index.html#/main/hrmSalary/calculate/" +
|
|
record.id
|
|
);
|
|
// window.open(
|
|
// "/spa/hrmSalary/static/index.html#/main/hrmSalary/calculateDetail?id=" +
|
|
// record.id
|
|
// );
|
|
}
|
|
|
|
// 列表项删除回调
|
|
handleDeleteItem(record) {
|
|
Modal.confirm({
|
|
title: "信息确认",
|
|
content: "确认删除本条数据吗?",
|
|
onOk: () => {
|
|
const { calculateStore: { deleteSalaryacct } } = this.props;
|
|
deleteSalaryacct([record.id]).then(() => {
|
|
this.handleSearch(this.state.searchValue);
|
|
});
|
|
},
|
|
onCancel: () => {
|
|
}
|
|
});
|
|
}
|
|
|
|
// 列表项归档回调
|
|
handleFile(record) {
|
|
const { calculateStore: { fileSalaryAcct } } = this.props;
|
|
this.setState({
|
|
progressVisible: true
|
|
}, () => {
|
|
this.timer = setInterval(() => {
|
|
if (this.state.progress !== 100) {
|
|
this.setState({
|
|
progress: this.state.progress + 1
|
|
});
|
|
} else {
|
|
clearInterval(this.timer);
|
|
this.setState({
|
|
progressVisible: false,
|
|
progress: 0
|
|
}, () => {
|
|
message.success("归档成功");
|
|
this.handleSearch(this.state.searchValue);
|
|
});
|
|
}
|
|
}, 800);
|
|
});
|
|
fileSalaryAcct(record.id).then(() => {
|
|
clearInterval(this.timer);
|
|
this.setState({
|
|
progressVisible: false,
|
|
progress: 0
|
|
}, () => {
|
|
message.success("归档成功");
|
|
this.handleSearch(this.state.searchValue);
|
|
});
|
|
}).catch(() => {
|
|
clearInterval(this.timer);
|
|
this.setState({
|
|
progressVisible: false,
|
|
progress: 0
|
|
});
|
|
});
|
|
}
|
|
|
|
// 重新核算
|
|
handleReaccount(record) {
|
|
const { calculateStore: { reAccounting } } = this.props;
|
|
reAccounting(record.id).then(() => {
|
|
this.handleSearch(this.state.searchValue);
|
|
});
|
|
}
|
|
|
|
// 回算
|
|
handleBackCalculate = (record) => {
|
|
Modal.confirm({
|
|
title: "信息确认",
|
|
content: "确定回算吗？\n 回算后，正常核算的数据会被覆盖，正常核算的工资单不能继续发放或撤回！",
|
|
onOk: () => {
|
|
const { calculateStore: { backCalculate } } = this.props;
|
|
backCalculate(record.id).then(() => {
|
|
this.handleSearch(this.state.searchValue);
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
// 查看详情回调
|
|
handleDetail(record) {
|
|
window.open(
|
|
"/spa/hrmSalary/static/index.html#/main/hrmSalary/placeOnFileDetail?id=" +
|
|
record.id
|
|
);
|
|
}
|
|
|
|
// 获取列表
|
|
getColumns = () => {
|
|
const {
|
|
calculateStore: { salaryListColumns },
|
|
taxAgentStore: { showOperateBtn }
|
|
} = this.props;
|
|
let columns = [...salaryListColumns].filter(item => item.dataIndex !== "backCalcStatus" && item.dataIndex !== "acctTimes");
|
|
columns.map(item => {
|
|
if (item.dataIndex === "salarySobName") {
|
|
item.width = 300;
|
|
item.render = (text, record) => {
|
|
return <div className="salarySobNameWrapper">
|
|
<span>{text}</span>
|
|
<div className="salarySobNameTagWrapper">
|
|
{
|
|
record.backCalcStatus === 1 &&
|
|
<i className="icon-coms-Refresh" title="回算"/>
|
|
}
|
|
<Tag color="blue">{`第${record.acctTimes}次`}</Tag>
|
|
</div>
|
|
</div>;
|
|
};
|
|
}
|
|
if (item.dataIndex === "operate" && showOperateBtn) {
|
|
item.width = 150;
|
|
item.render = (text, record) => {
|
|
const accountBtn = _.take(record.operate, 2);
|
|
const notAccountBtn = _.drop(record.operate, 2);
|
|
let operateBtn = [];
|
|
if (!_.isEmpty(accountBtn)) {
|
|
operateBtn.push(
|
|
_.map(accountBtn, (it, idx) => {
|
|
return (
|
|
<div
|
|
className="linkWapper"
|
|
key={idx}
|
|
style={{ display: "inline-block", marginRight: 8 }}>
|
|
<a
|
|
href="javascript:void(0);"
|
|
style={(idx === 1 && it.text.length === 2) ? { padding: "0 12px" } : {}}
|
|
onClick={() => this.handleOperateClick(it.index, record)}>
|
|
{it.text}
|
|
</a>
|
|
</div>
|
|
);
|
|
})
|
|
);
|
|
}
|
|
if (!_.isEmpty(notAccountBtn)) {
|
|
operateBtn.push(
|
|
<Dropdown
|
|
overlay={
|
|
<Menu>
|
|
{notAccountBtn.map(cz =>
|
|
<Menu.Item>
|
|
<a
|
|
onClick={() => this.handleOperateClick(cz.index, record)}>
|
|
{cz.text}
|
|
</a>
|
|
</Menu.Item>
|
|
)}
|
|
</Menu>
|
|
}>
|
|
<a href="javascript:void(0);"><i className="icon-coms-more"/></a>
|
|
</Dropdown>
|
|
);
|
|
}
|
|
return operateBtn;
|
|
};
|
|
}
|
|
});
|
|
return showOperateBtn ? columns : _.filter(columns, it => it.title !== "操作");
|
|
};
|
|
|
|
handleOperateClick = (index, record) => {
|
|
if (index === "0") {
|
|
this.handleAccount(record);
|
|
} else if (index === "1") {
|
|
this.handleDeleteItem(record);
|
|
} else if (index === "2") {
|
|
this.handleFile(record);
|
|
} else if (index === "4") {
|
|
this.handleReaccount(record);
|
|
} else if (index === "3") {
|
|
this.handleDetail(record);
|
|
} else if (index === "5") {
|
|
this.handleBackCalculate(record);
|
|
}
|
|
};
|
|
|
|
// 分页
|
|
handleDataPageChange(value) {
|
|
this.setState({ current: value });
|
|
this.pageInfo.current = value;
|
|
const { calculateStore } = this.props;
|
|
const { getSalaryAcctList } = calculateStore;
|
|
getSalaryAcctList({
|
|
name: this.state.searchValue,
|
|
startMonthStr: this.state.startDate,
|
|
endMonthStr: this.state.endDate,
|
|
current: value
|
|
});
|
|
}
|
|
|
|
handleShowSizeChange(pageInfo) {
|
|
const { calculateStore } = this.props;
|
|
const { getSalaryAcctList } = calculateStore;
|
|
getSalaryAcctList({
|
|
name: this.state.searchValue,
|
|
startMonthStr: this.state.startDate,
|
|
endMonthStr: this.state.endDate,
|
|
...pageInfo
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const { calculateStore, taxAgentStore: { showOperateBtn } } = this.props;
|
|
const { salaryListDataSource, loading, hasRight, salaryListPageInfo } = calculateStore;
|
|
const { modalParam } = this.state;
|
|
if (!hasRight && !loading) {
|
|
// 无权限处理
|
|
return renderNoright();
|
|
}
|
|
|
|
const renderRightOperation = () => {
|
|
const { startDate, endDate } = this.state;
|
|
return (
|
|
<div style={{ display: "inline-block" }}>
|
|
{showOperateBtn &&
|
|
<Button
|
|
type="primary"
|
|
style={{ marginRight: "10px" }}
|
|
// onClick={() => window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/calculateDetail")}
|
|
onClick={() => {
|
|
this.setState({ baseFormVisible: true });
|
|
}}>
|
|
核算
|
|
</Button>}
|
|
<div
|
|
style={{ display: "inline-block", position: "relative", top: 2 }}>
|
|
<MonthPicker
|
|
value={startDate}
|
|
format="YYYY-MM"
|
|
disabledDate={(current) => {
|
|
return current && endDate && current.getTime() > new Date(endDate).getTime();
|
|
}}
|
|
onChange={(val) => this.handleRangePickerChange("startDate", val)}
|
|
/>
|
|
<span className="to" style={{ margin: "0 10px" }}>至</span>
|
|
<MonthPicker
|
|
value={endDate}
|
|
format="YYYY-MM"
|
|
disabledDate={(current) => {
|
|
return current && startDate && current.getTime() < new Date(startDate).getTime();
|
|
}}
|
|
onChange={(val) => this.handleRangePickerChange("endDate", val)}
|
|
/>
|
|
</div>
|
|
<WeaInputSearch
|
|
style={{ marginLeft: "10px" }}
|
|
value={this.state.searchValue}
|
|
placeholder={"请输入薪资账套名称"}
|
|
onChange={value => {
|
|
this.setState({ searchValue: value });
|
|
}}
|
|
onSearch={value => {
|
|
this.handleSearch(value, { current: 1 });
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="mySalaryBenefitsWrapper">
|
|
{/* 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能 */}
|
|
<WeaTop
|
|
title="薪资核算"
|
|
icon={<i className="icon-coms-fa"/>}
|
|
iconBgcolor="#F14A2D"
|
|
showDropIcon={false}>
|
|
<CustomTab searchOperationItem={renderRightOperation()}/>
|
|
<div className="tableWrapper">
|
|
<WeaNewScroll height="100%">
|
|
<CustomPaginationTable
|
|
loading={loading}
|
|
columns={this.getColumns()}
|
|
dataSource={salaryListDataSource}
|
|
total={salaryListPageInfo.total}
|
|
current={salaryListPageInfo.pageNum}
|
|
pageSize={this.pageInfo.pageSize}
|
|
onPageChange={value => {
|
|
this.handleDataPageChange(value);
|
|
}}
|
|
onShowSizeChange={(current, pageSize) => {
|
|
this.pageInfo = { current, pageSize };
|
|
this.handleShowSizeChange(this.pageInfo);
|
|
}}
|
|
/>
|
|
</WeaNewScroll>
|
|
</div>
|
|
</WeaTop>
|
|
{/*归档进度条*/}
|
|
{
|
|
this.state.progressVisible &&
|
|
<ProgressModal
|
|
title="正在归档请稍后"
|
|
visible={this.state.progressVisible}
|
|
onCancel={() => {
|
|
this.setState({ progressVisible: false, progress: 0 });
|
|
}}
|
|
progress={this.state.progress}
|
|
/>
|
|
}
|
|
{this.state.baseFormVisible &&
|
|
<BaseFormModal
|
|
visible={this.state.baseFormVisible}
|
|
onRefresh={() => this.handleSearch(this.state.searchValue)}
|
|
onCancel={() => {
|
|
this.setState({ baseFormVisible: false });
|
|
}}
|
|
/>}
|
|
</div>
|
|
);
|
|
}
|
|
}
|