377 lines
12 KiB
JavaScript
377 lines
12 KiB
JavaScript
import React from "react";
|
||
import UserSure from "./userSure";
|
||
import { inject, observer } from "mobx-react";
|
||
import SalaryDetail from "./salaryDetail";
|
||
import { Button, Dropdown, Menu, message, Modal } from "antd";
|
||
import { WeaBrowser, WeaCheckbox, WeaDropdown, WeaFormItem, WeaInput, WeaSearchGroup, WeaSelect, WeaTab } from "ecCom";
|
||
import { getQueryString } from "../../util/url";
|
||
import AcctResultImportModal from "./acctResult/importModal/acctResultImportModal";
|
||
import ProgressModal from "../../components/progressModal";
|
||
|
||
const { ButtonSelect } = WeaDropdown;
|
||
|
||
@inject("calculateStore", "salaryFileStore")
|
||
@observer
|
||
export default class CalculateDetail extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
showSearchAd: false,
|
||
searchItemsValue: {
|
||
employeeName: "",
|
||
departmentIds: "",
|
||
positionIds: "",
|
||
subcompanyIds: "",
|
||
status: "",
|
||
consolidatedTaxation: "0"
|
||
},
|
||
selectedKey: "0",
|
||
fieldData: {},
|
||
acctResultImportVisiable: false,
|
||
progressVisible: false,
|
||
progress: 0,
|
||
accountIds: []
|
||
};
|
||
this.id = "";
|
||
this.timer;
|
||
}
|
||
|
||
componentWillMount() {
|
||
let id = getQueryString("id");
|
||
this.id = id;
|
||
const { calculateStore: { checkTaxAgent }, salaryFileStore } = this.props;
|
||
const { commonEnumList } = salaryFileStore;
|
||
checkTaxAgent(this.id);
|
||
let modalParam = { ...this.state.modalParam, salaryAcctRecordId: id };
|
||
this.setState({ modalParam });
|
||
commonEnumList("user", { enumClass: "com.engine.salary.enums.salarysob.SalaryEmployeeStatusEnum" });
|
||
}
|
||
|
||
Input = (value, key) => {
|
||
const { employeeName } = this.state.searchItemsValue;
|
||
return (
|
||
<WeaFormItem
|
||
label={value}
|
||
labelCol={{ span: 6 }}
|
||
wrapperCol={{ span: 18 }}
|
||
>
|
||
<WeaInput value={employeeName} onChange={(val) => this.setState({
|
||
searchItemsValue: {
|
||
...this.state.searchItemsValue,
|
||
[key]: val
|
||
}
|
||
})}/>
|
||
</WeaFormItem>
|
||
);
|
||
};
|
||
Browser = (value, key) => {
|
||
const { positionIds, departmentIds, subcompanyIds } = this.state.searchItemsValue;
|
||
return (
|
||
<WeaFormItem
|
||
label={value}
|
||
labelCol={{ span: 6 }}
|
||
wrapperCol={{ span: 18 }}
|
||
>
|
||
<WeaBrowser
|
||
isSingle={false}
|
||
value={key === "departmentIds" ? departmentIds : key === "subcompanyIds" ? subcompanyIds : positionIds}
|
||
// tabs={key === "departmentIds" ? [
|
||
// {
|
||
// dataParams: { list: "1" },
|
||
// isSearch: true,
|
||
// key: "1",
|
||
// name: "按列表",
|
||
// selected: false,
|
||
// showOrder: 0
|
||
// }
|
||
// ] : null}
|
||
type={key === "departmentIds" ? 57 : key === "subcompanyIds" ? 164 : 278}
|
||
onChange={(val) => {
|
||
this.setState({ searchItemsValue: { ...this.state.searchItemsValue, [key]: val } });
|
||
}}/>
|
||
</WeaFormItem>
|
||
);
|
||
};
|
||
Select = (value, key) => {
|
||
const { status } = this.state.searchItemsValue;
|
||
return (
|
||
<WeaFormItem
|
||
label={value}
|
||
labelCol={{ span: 6 }}
|
||
wrapperCol={{ span: 18 }}
|
||
>
|
||
<WeaSelect
|
||
value={status}
|
||
options={[
|
||
{ key: "", showname: "" }, { key: "ALL", showname: "全部" },
|
||
{ key: "NORMAL", showname: "在职" }, { key: "UNAVAILABLE", showname: "离职" }
|
||
]}
|
||
onChange={(val) => this.setState({ searchItemsValue: { ...this.state.searchItemsValue, [key]: val } })}/>
|
||
</WeaFormItem>
|
||
);
|
||
};
|
||
Checkbox = (value, key) => {
|
||
const { consolidatedTaxation } = this.state.searchItemsValue;
|
||
return (
|
||
<WeaFormItem
|
||
label={value}
|
||
labelCol={{ span: 6 }}
|
||
wrapperCol={{ span: 18 }}
|
||
>
|
||
<WeaCheckbox value={consolidatedTaxation} content="是" onChange={(val) => this.setState({
|
||
searchItemsValue: {
|
||
...this.state.searchItemsValue,
|
||
[key]: val
|
||
}
|
||
})}/>
|
||
</WeaFormItem>
|
||
);
|
||
};
|
||
|
||
// 核算点击事件
|
||
handleAccount = (key) => {
|
||
const { calculateStore } = this.props;
|
||
const { acctresultAccounting, getCalculateProgress } = calculateStore;
|
||
if (key === "SELECT" && _.isEmpty(this.state.accountIds)) {
|
||
message.warning("请先选择表格数据");
|
||
return;
|
||
}
|
||
Modal.confirm({
|
||
title: "信息确认",
|
||
content: "点击核算，公式项将按照公式逻辑核算，核算结果将覆盖原数据",
|
||
onOk: () => {
|
||
this.setState({ progress: 0 });
|
||
let payload = { salaryAcctRecordId: this.id };
|
||
if (key === "SELECT") {
|
||
payload = _.assign(payload, { ids: this.state.accountIds });
|
||
}
|
||
acctresultAccounting(payload).then(() => {
|
||
this.setState({
|
||
progressVisible: true
|
||
});
|
||
if (this.timer) {
|
||
clearInterval(this.timer);
|
||
}
|
||
this.timer = setInterval(() => {
|
||
getCalculateProgress(this.id).then(data => {
|
||
let progress = data.progress;
|
||
if (progress == 1 && this.timer) {
|
||
clearInterval(this.timer);
|
||
this.timer = null;
|
||
this.setState({
|
||
progressVisible: false,
|
||
accountIds: []
|
||
});
|
||
message.success("核算完成");
|
||
// acctResultList({ salaryAcctRecordId: this.id });
|
||
const childFrameObj = document.getElementById("atdTable");
|
||
const salaryAcctRecordId = getQueryString("id");
|
||
const payload = {
|
||
type: "PR",
|
||
listType: "",
|
||
url: "/api/bs/hrmsalary/salaryacct/acctresult/list",
|
||
selectedRowKeys: [],
|
||
queryParams: {
|
||
salaryAcctRecordId,
|
||
}
|
||
};
|
||
childFrameObj.contentWindow.postMessage(JSON.stringify(payload), "*");
|
||
} else if (!data.status) {
|
||
clearInterval(this.timer);
|
||
this.timer = null;
|
||
this.setState({
|
||
progressVisible: false,
|
||
accountIds: []
|
||
});
|
||
message.error(data.message);
|
||
}
|
||
this.setState({ progress: Number(progress) * 100 });
|
||
});
|
||
}, 1000);
|
||
});
|
||
},
|
||
onCancel() {
|
||
}
|
||
});
|
||
};
|
||
|
||
// 更多选项点击
|
||
handleMenuClick = e => {
|
||
if (e.key == "1") {
|
||
// 导入
|
||
this.setState({
|
||
acctResultImportVisiable: true
|
||
});
|
||
} else if (e.key == "2") {
|
||
window.open(
|
||
"/spa/hrmSalary/static/index.html#/main/hrmSalary/compareDetail?id=" +
|
||
this.id
|
||
);
|
||
} else if (e.key == "3") {
|
||
window.open(
|
||
"/api/bs/hrmsalary/salaryacct/acctresult/export?salaryAcctRecordId=" + this.id + "&ids="
|
||
);
|
||
}
|
||
};
|
||
|
||
// 导入表单添加表头回调
|
||
handleAcctModalAdd(fieldData) {
|
||
this.setState({
|
||
fieldData
|
||
});
|
||
}
|
||
|
||
// 核算结果搜索
|
||
handleSearch(params) {
|
||
const { calculateStore: { acctResultList } } = this.props;
|
||
// acctResultList({ salaryAcctRecordId: this.id, ...params });
|
||
const childFrameObj = document.getElementById("atdTable");
|
||
const salaryAcctRecordId = getQueryString("id");
|
||
const payload = {
|
||
type: "PR",
|
||
listType: "",
|
||
url: "/api/bs/hrmsalary/salaryacct/acctresult/list",
|
||
queryParams: {
|
||
salaryAcctRecordId,
|
||
...params
|
||
}
|
||
};
|
||
childFrameObj.contentWindow.postMessage(JSON.stringify(payload), "*");
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
// 清除轮询
|
||
if (this.timer) {
|
||
clearInterval(this.timer);
|
||
}
|
||
}
|
||
|
||
render() {
|
||
const { selectedKey, acctResultImportVisiable, showSearchAd } = this.state;
|
||
const menu = (
|
||
<Menu onClick={this.handleMenuClick.bind(this)}>
|
||
<Menu.Item key="1">导入</Menu.Item>
|
||
<Menu.Item key="2">线下对比</Menu.Item>
|
||
<Menu.Item key="3">导出全部</Menu.Item>
|
||
</Menu>
|
||
);
|
||
|
||
const renderRightOperation = () => {
|
||
return [
|
||
<ButtonSelect
|
||
datas={[
|
||
{ key: "ALL", show: "核算所有人", selected: true },
|
||
{ key: "SELECT", show: "核算所选人员", selected: false }
|
||
]}
|
||
btnOnClick={this.handleAccount}
|
||
menuOnClick={(key) => this.handleAccount(key)}
|
||
/>,
|
||
<Dropdown.Button overlay={menu}>
|
||
更多
|
||
</Dropdown.Button>
|
||
];
|
||
};
|
||
|
||
const topTab = [
|
||
{
|
||
title: "人员确认",
|
||
viewcondition: "0"
|
||
},
|
||
{
|
||
title: "薪资核算",
|
||
viewcondition: "1"
|
||
}
|
||
];
|
||
|
||
const adBtn = [
|
||
// 高级搜索内部按钮
|
||
<Button type="primary" onClick={() => {
|
||
this.setState({ showSearchAd: false }, () => {
|
||
this.handleSearch(this.state.searchItemsValue);
|
||
});
|
||
}}>
|
||
搜索
|
||
</Button>,
|
||
<Button type="ghost" onClick={() => this.setState({
|
||
searchItemsValue: {
|
||
employeeName: "",
|
||
departmentIds: "",
|
||
positionIds: "",
|
||
status: "",
|
||
consolidatedTaxation: "0"
|
||
}
|
||
})}>
|
||
重置
|
||
</Button>,
|
||
<Button type="ghost" onClick={() => this.setState({ showSearchAd: false })}>
|
||
取消
|
||
</Button>
|
||
];
|
||
|
||
const renderSearch = () => {
|
||
const searchItems = [
|
||
{ com: this.Input("姓名", "employeeName") },
|
||
{ com: this.Browser("分部", "subcompanyIds") },
|
||
{ com: this.Browser("部门", "departmentIds") },
|
||
{ com: this.Browser("岗位", "positionIds") },
|
||
{ com: this.Select("状态", "status") },
|
||
{ com: this.Checkbox("合并计税", "consolidatedTaxation") }
|
||
];
|
||
return <WeaSearchGroup title={"基本信息"} items={searchItems} showGroup/>;
|
||
};
|
||
|
||
return (
|
||
<div style={{ overflowY: "hidden", height: "100%" }}>
|
||
<WeaTab
|
||
datas={topTab}
|
||
selectedKey={selectedKey}
|
||
keyParam="viewcondition"
|
||
onChange={v => this.setState({ selectedKey: v })}
|
||
searchType={selectedKey == 1 ? ["base", "advanced"] : []} // base：基础搜索框 advanced：显示高级搜索按钮
|
||
showSearchAd={showSearchAd} // 是否展开高级搜索面板
|
||
setShowSearchAd={(bool) => this.setState({ showSearchAd: bool })} //高级搜索面板受控
|
||
searchsAd={renderSearch()} // 高级搜索内部数据getSearchs(form, toJS(condition), 2)
|
||
buttonsAd={adBtn} // 高级搜索内部按钮
|
||
onSearch={() => this.handleSearch(this.state.searchItemsValue)} // 点搜索按钮时的回调
|
||
buttons={selectedKey == 1 ? renderRightOperation() : []}
|
||
searchsBasePlaceHolder={"请输入姓名"}
|
||
onSearchChange={(v) =>
|
||
this.setState({
|
||
searchItemsValue: {
|
||
...this.state.searchItemsValue,
|
||
employeeName: v
|
||
}
|
||
})
|
||
} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值form.updateFields({ username: v })
|
||
searchsBaseValue={this.state.searchItemsValue.employeeName} // 外部input搜索值受控: 这里和高级搜索的requestname同步form.getFormParams().username
|
||
/>
|
||
{selectedKey == 0 && <UserSure/>}
|
||
{selectedKey == 1 && <SalaryDetail onChangeAccountIds={(ids) => this.setState({ accountIds: ids })}
|
||
employeeName={this.state.searchValue}/>}
|
||
{acctResultImportVisiable &&
|
||
<AcctResultImportModal
|
||
visiable={acctResultImportVisiable}
|
||
fieldData={this.state.fieldData}
|
||
onAdd={fieldData => {
|
||
this.handleAcctModalAdd(fieldData);
|
||
}}
|
||
onCancel={() =>
|
||
this.setState({
|
||
acctResultImportVisiable: false,
|
||
fieldData: {}
|
||
})}
|
||
id={this.id}
|
||
/>}
|
||
{this.state.progressVisible &&
|
||
<ProgressModal
|
||
visible={this.state.progressVisible}
|
||
onCancel={() => {
|
||
this.setState({ progressVisible: false, progress: 0 });
|
||
}}
|
||
progress={this.state.progress}
|
||
/>}
|
||
</div>
|
||
);
|
||
}
|
||
}
|