448 lines
14 KiB
JavaScript
448 lines
14 KiB
JavaScript
import React from "react";
|
||
import { inject, observer } from "mobx-react";
|
||
import { Button, DatePicker, Dropdown, Menu, message, Modal, Tag } from "antd";
|
||
import { WeaInputSearch, WeaTop } from "ecCom";
|
||
import { renderNoright } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在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 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/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.title == "操作" && showOperateBtn) {
|
||
item.render = (text, record) => {
|
||
const accountBtn = _.filter(
|
||
record.operate,
|
||
it => it.text == "核算" || it.text == "重新核算"
|
||
);
|
||
const notAccountBtn = _.filter(
|
||
record.operate,
|
||
it => it.text != "核算" && it.text != "重新核算"
|
||
);
|
||
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);"
|
||
onClick={() => {
|
||
if (it.text == "核算" || it.text == "重新核算") {
|
||
it.text == "核算"
|
||
? this.handleAccount(record)
|
||
: this.handleReaccount(record);
|
||
}
|
||
}}>
|
||
{it.text}
|
||
</a>
|
||
</div>
|
||
);
|
||
})
|
||
);
|
||
}
|
||
if (!_.isEmpty(notAccountBtn)) {
|
||
operateBtn.push(
|
||
<Dropdown
|
||
overlay={
|
||
<Menu>
|
||
{notAccountBtn.map(cz =>
|
||
<Menu.Item>
|
||
<a
|
||
onClick={() => {
|
||
if (cz.text == "核算") {
|
||
this.handleAccount(record);
|
||
} else if (cz.text == "删除") {
|
||
this.handleDeleteItem(record);
|
||
} else if (cz.text == "归档") {
|
||
this.handleFile(record);
|
||
} else if (cz.text == "重新核算") {
|
||
this.handleReaccount(record);
|
||
} else if (cz.text == "查看") {
|
||
this.handleDetail(record);
|
||
} else if (cz.text == "回算") {
|
||
this.handleBackCalculate(record);
|
||
}
|
||
}}>
|
||
{cz.text}
|
||
</a>
|
||
</Menu.Item>
|
||
)}
|
||
</Menu>
|
||
}>
|
||
<i
|
||
className="icon-coms-more"
|
||
style={{ color: "#4d7ad8", cursor: "pointer" }}
|
||
/>
|
||
</Dropdown>
|
||
);
|
||
}
|
||
return operateBtn;
|
||
};
|
||
}
|
||
});
|
||
return showOperateBtn ? columns : _.filter(columns, it => it.title != "操作");
|
||
};
|
||
|
||
// 分页
|
||
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,
|
||
salaryListColumns,
|
||
loading,
|
||
hasRight,
|
||
form,
|
||
condition,
|
||
tableStore,
|
||
showSearchAd,
|
||
getTableDatas,
|
||
doSearch,
|
||
setShowSearchAd,
|
||
salaryListPageInfo
|
||
} = calculateStore;
|
||
const { modalParam } = 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 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} // 是否显示下拉按钮
|
||
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||
dropMenuProps={{ collectParams }}>
|
||
{/* 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能 */}
|
||
<CustomTab
|
||
searchOperationItem={renderRightOperation()}
|
||
onChange={v => {
|
||
}}
|
||
/>
|
||
<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);
|
||
}}
|
||
/>
|
||
</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>
|
||
);
|
||
}
|
||
}
|