596 lines
17 KiB
JavaScript
596 lines
17 KiB
JavaScript
import React from "react";
|
||
import { inject, observer } from "mobx-react";
|
||
import { toJS } from "mobx";
|
||
import { WeaTableNew } from "comsMobx";
|
||
|
||
import {
|
||
Button,
|
||
Table,
|
||
DatePicker,
|
||
Dropdown,
|
||
Menu,
|
||
message,
|
||
Modal,
|
||
} from "antd";
|
||
|
||
import {
|
||
WeaTop,
|
||
WeaTab,
|
||
WeaRightMenu,
|
||
WeaRangePicker,
|
||
WeaTable,
|
||
WeaInputSearch,
|
||
WeaSlideModal,
|
||
WeaCheckbox,
|
||
WeaHelpfulTip,
|
||
} from "ecCom";
|
||
|
||
const WeaTableComx = WeaTableNew.WeaTable;
|
||
|
||
import { renderNoright, getSearchs } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||
import CustomTab from "../../components/customTab";
|
||
import ContentWrapper from "../../components/contentWrapper";
|
||
|
||
import { columns, dataSource } from "./columns";
|
||
|
||
import ChangeSalaryModal from "./changeSalaryModal"
|
||
import EditAgentModal from './editAgentModal';
|
||
import SlideModalTitle from '../../components/slideModalTitle'
|
||
import SlideSalaryItem from './slideSalaryItem'
|
||
import SlideAgent from './slideAgent'
|
||
import ImportModal from '../../components/importModal'
|
||
import SalaryFileViewSlide from './saralyFileViewSlide'
|
||
import CustomPaginationTable from "../../components/customPaginationTable"
|
||
|
||
const { MonthPicker } = DatePicker;
|
||
|
||
import "./index.less";
|
||
import CustomTable from "../../components/customTable";
|
||
|
||
@inject("salaryFileStore")
|
||
@observer
|
||
export default class SalaryFile extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
value: "",
|
||
selectedKey: "0",
|
||
changeSalaryVisible: false,
|
||
editAgentVisible: false,
|
||
selectedTab: 0,
|
||
editSlideVisible: false,
|
||
importType: "",
|
||
isInit: false, //是否是初始化导入
|
||
modalVisiable: false,
|
||
step: 0,
|
||
recordSlideVisible: false,
|
||
selectedRowKeys: [],
|
||
showSearchBar: false,
|
||
importResult: {},
|
||
searchValue: ""
|
||
}
|
||
this.pageInfo = {current: 1, pageSize: 10}
|
||
}
|
||
|
||
componentWillMount() {
|
||
const {
|
||
salaryFileStore: { doInit },
|
||
} = this.props;
|
||
doInit();
|
||
}
|
||
|
||
// 设置导入步数
|
||
setStep(step) {
|
||
this.setState({ step });
|
||
}
|
||
|
||
// 渲染导入模板附加元素
|
||
renderFormComponent() {
|
||
return (
|
||
<div style={{ display: "inline-block" }}>
|
||
<WeaCheckbox id="importData" content="导出现有数据" />
|
||
<WeaHelpfulTip
|
||
width={200}
|
||
title="提示：建议先导出现有最新数据，修改后再导入"
|
||
placement="topLeft"
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 导入预览
|
||
handlePreviewImport(params) {
|
||
const {
|
||
salaryFileStore: { importPreview },
|
||
} = this.props;
|
||
params.importType = this.state.importType;
|
||
importPreview(params);
|
||
}
|
||
|
||
// 导入档案
|
||
handleImportFile(params) {
|
||
const {
|
||
salaryFileStore: { importSalaryArchive },
|
||
} = this.props;
|
||
params.importType = this.state.importType;
|
||
importSalaryArchive(params).then((data) => {
|
||
data.errorData = data.errorNotice;
|
||
this.setState({
|
||
importResult: data,
|
||
});
|
||
});
|
||
}
|
||
|
||
// 导入完成按钮操作
|
||
handleImportFinish() {
|
||
this.setState({ modalVisiable: false, step: 0 });
|
||
}
|
||
|
||
// 导出全部
|
||
handleExportAll() {
|
||
const {
|
||
salaryFileStore: { exportSalaryArchive },
|
||
} = this.props;
|
||
exportSalaryArchive();
|
||
}
|
||
|
||
// 定制列
|
||
getColumns() {
|
||
const {
|
||
salaryFileStore: { tableStore },
|
||
} = this.props;
|
||
return tableStore.columns
|
||
.filter((item) => item.display == "true")
|
||
.map((item) => {
|
||
item.width = item.oldWidth;
|
||
if (item.dataIndex == "operate") {
|
||
item.render = (text, record) => (
|
||
<a onClick={() => this.handleEdit(record)}>查看</a>
|
||
);
|
||
item.fixed = "right";
|
||
} else if (item.dataIndex == "username") {
|
||
item.fixed = "left";
|
||
}
|
||
return item;
|
||
});
|
||
}
|
||
|
||
// 编辑行
|
||
handleEdit(record) {
|
||
this.setState({ editSlideVisible: true });
|
||
const {
|
||
salaryFileStore: { setCurrentId },
|
||
} = this.props;
|
||
setCurrentId(record.id);
|
||
}
|
||
|
||
// 显示调整个税扣缴义务人表单
|
||
handSildeOptionMenuClick(e) {
|
||
const {
|
||
salaryFileStore: { setEditAgentVisible },
|
||
} = this.props;
|
||
setEditAgentVisible(true);
|
||
}
|
||
|
||
// 查看 Slide 头部操作按钮
|
||
renderEditSlideOperate() {
|
||
return (
|
||
<div style={{ display: "inline-block" }}>
|
||
<Dropdown.Button
|
||
type="primary"
|
||
overlay={
|
||
<Menu onClick={this.handSildeOptionMenuClick.bind(this)}>
|
||
<Menu.Item key="1">调整个税扣缴义务人</Menu.Item>
|
||
</Menu>
|
||
}
|
||
onClick={() => {
|
||
this.setState({ changeSalaryVisible: true });
|
||
}}>
|
||
调薪
|
||
</Dropdown.Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// table选中条目
|
||
onSelectChange = (selectedRowKeys) => {
|
||
this.setState({ selectedRowKeys });
|
||
};
|
||
|
||
// 显示影响搜索面板
|
||
handleShowSearchBar = () => {
|
||
this.setState({
|
||
showSearchBar: !this.state.showSearchBar,
|
||
});
|
||
};
|
||
|
||
// 页面跳转
|
||
handlePageChange = (value) => {
|
||
const { salaryFileStore: {getTableDatas, form}} = this.props;
|
||
this.pageInfo.current = value;
|
||
getTableDatas(this.pageInfo)
|
||
}
|
||
|
||
handleShowSizeChange(pageInfo) {
|
||
const { salaryFileStore: {getTableDatas, form}} = this.props;
|
||
getTableDatas(pageInfo)
|
||
}
|
||
|
||
// 搜索
|
||
handleSearch(value) {
|
||
const {
|
||
salaryFileStore: { getTableDatas, form },
|
||
} = this.props;
|
||
getTableDatas({ username: value });
|
||
}
|
||
|
||
// 初始化导入参数
|
||
handleInitModal() {
|
||
const {
|
||
salaryFileStore: { setPreviewDataSource },
|
||
} = this.props;
|
||
setPreviewDataSource([]);
|
||
this.setState({
|
||
importResult: {},
|
||
});
|
||
}
|
||
|
||
showColumn = () => {
|
||
const { salaryFileStore: { tableStore } } = this.props;
|
||
console.log("showColumn:", tableStore.setColSetVisible(true));
|
||
tableStore.setColSetVisible(true);
|
||
tableStore.tableColSet(true);
|
||
console.log("showColumn:")
|
||
}
|
||
|
||
render() {
|
||
const { salaryFileStore } = this.props;
|
||
const {
|
||
loading,
|
||
hasRight,
|
||
form,
|
||
condition,
|
||
tableStore,
|
||
showSearchAd,
|
||
getTableDatas,
|
||
doSearch,
|
||
setShowSearchAd,
|
||
} = salaryFileStore;
|
||
const {
|
||
importType,
|
||
previewColumns,
|
||
previewDataSource,
|
||
dataSource,
|
||
currentId,
|
||
editAgentVisible,
|
||
setEditAgentVisible,
|
||
pageInfo,
|
||
} = salaryFileStore;
|
||
|
||
const { selectedTab, step, selectedRowKeys } = 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 = [];
|
||
|
||
const renderSearchOperationItem = () => {};
|
||
|
||
const handleMenuClick = (e) => {
|
||
const { key } = e;
|
||
if (key === "init") {
|
||
Modal.confirm({
|
||
title: "信息确认",
|
||
content: `若导入表格中的人员已存在在薪资档案中，初始化导入会将档案中该人员的数据清除再导入，点击确定继续导入`,
|
||
onOk: () => {
|
||
this.setState({ importType: e.key, isInit: true, modalVisiable: true, step: 0 });
|
||
},
|
||
onCancel() {},
|
||
});
|
||
} else {
|
||
this.setState({ importType: e.key, isInit: false, modalVisiable: true, step: 0 });
|
||
}
|
||
};
|
||
|
||
const handleMenuClick2 = () => {
|
||
const { electedRowKeys } = this.state;
|
||
if (selectedRowKeys.length == 0) {
|
||
message.warning("未选择条目");
|
||
return;
|
||
}
|
||
const {
|
||
salaryFileStore: { exportSalaryArchive },
|
||
} = this.props;
|
||
exportSalaryArchive(selectedRowKeys.join(","));
|
||
};
|
||
|
||
const menu = (
|
||
<Menu onClick={handleMenuClick}>
|
||
{importType.map((item) => (
|
||
<Menu.Item key={item.id}>{item.content}</Menu.Item>
|
||
))}
|
||
</Menu>
|
||
);
|
||
|
||
|
||
const menu2 = (
|
||
<Menu onClick={handleMenuClick2}>
|
||
<Menu.Item key="1">导出所选</Menu.Item>
|
||
</Menu>
|
||
);
|
||
|
||
const renderRightOperation = () => {
|
||
return (
|
||
<div
|
||
style={{ display: "inline-block", position: "relative" }}
|
||
className="salaryFileTabWrapper">
|
||
<WeaHelpfulTip
|
||
style={{ marginRight: "10px" }}
|
||
width={200}
|
||
title="导入按钮使用场景说明：\n
|
||
1.档案初始化：\n
|
||
a.初次使用薪酬模块，全量导入员工的薪资档案数据；\n
|
||
b.员工入职，导入新入职的员工的薪资档案数据（若导入表格中的人员已存在在薪资档案中，初始化导入会将档案中该人员的数据清除再导入）；\n
|
||
c.返聘人员使用调薪功能调整薪资档案值或使用调整个税扣缴；\n
|
||
2.调薪：档案中已存在的人员批量调整薪资项目值（包括返聘人员的情况）；\n
|
||
3.调整个税扣缴义务人：档案中已存在的人员批量调整个税扣缴义务人（包括返聘人员的情况）；\n"
|
||
placement="topLeft"
|
||
/>
|
||
<Dropdown.Button
|
||
type="primary"
|
||
style={{ marginRight: "10px" }}
|
||
overlay={menu}>
|
||
导入
|
||
</Dropdown.Button>
|
||
<Dropdown.Button
|
||
style={{ marginRight: "10px" }}
|
||
overlay={menu2}
|
||
onClick={() => {
|
||
this.handleExportAll();
|
||
}}>
|
||
导出全部
|
||
</Dropdown.Button>
|
||
<Button
|
||
type="default"
|
||
style={{ marginRight: "10px" }}
|
||
onClick={() => {
|
||
this.setState({ recordSlideVisible: true });
|
||
}}>
|
||
调薪记录
|
||
</Button>
|
||
<WeaInputSearch
|
||
value={this.state.searchValue}
|
||
onChange={(value) => {
|
||
this.setState({
|
||
searchValue: value,
|
||
});
|
||
}}
|
||
onSearch={(value) => {
|
||
this.handleSearch(value);
|
||
}}
|
||
/>
|
||
{/* <Button type="default" onClick={() =>{this.handleShowSearchBar()}}>高级搜索</Button> */}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const handleSlideMoreMenuClick = () => {};
|
||
|
||
const slideMoreMenu = (
|
||
<Menu onClick={handleSlideMoreMenuClick}>
|
||
<Menu.Item key="1">导出全部</Menu.Item>
|
||
</Menu>
|
||
);
|
||
|
||
const renderCustomOperate = () => {
|
||
return (
|
||
<div style={{ display: "inline-block" }}>
|
||
<Dropdown.Button type="primary" overlay={slideMoreMenu}>
|
||
导出
|
||
</Dropdown.Button>
|
||
<Button type="default">自定义列</Button>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const rowSelection = {
|
||
selectedRowKeys,
|
||
onChange: this.onSelectChange,
|
||
};
|
||
|
||
return (
|
||
<div className="mySalaryBenefitsWrapper">
|
||
<WeaRightMenu
|
||
datas={rightMenu} // 右键菜单
|
||
collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||
>
|
||
<WeaTop
|
||
title="薪资档案" // 文字
|
||
icon={<i className="icon-coms-meeting" />} // 左侧图标
|
||
iconBgcolor="#F14A2D" // 左侧图标背景色
|
||
showDropIcon={true} // 是否显示下拉按钮
|
||
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||
>
|
||
<CustomTab
|
||
searchOperationItem={
|
||
renderRightOperation()
|
||
}
|
||
/>
|
||
<WeaTableComx
|
||
style={{display: "none"}}
|
||
comsWeaTableStore={tableStore}
|
||
needScroll={true}
|
||
/>
|
||
|
||
<CustomPaginationTable
|
||
loading={loading}
|
||
rowSelection={rowSelection}
|
||
columns={this.getColumns()}
|
||
dataSource={dataSource}
|
||
total={pageInfo.total}
|
||
current={pageInfo.pageNum}
|
||
pageSize={this.pageInfo.pageSize}
|
||
scroll={{x: this.getColumns().length ? this.getColumns().length * 150 : 1200}}
|
||
onPageChange={(value) => {
|
||
this.handlePageChange(value)
|
||
}}
|
||
onShowSizeChange={(current, pageSize) => {
|
||
this.pageInfo = {current, pageSize}
|
||
this.handleShowSizeChange(this.pageInfo)
|
||
}}
|
||
/>
|
||
</WeaTop>
|
||
</WeaRightMenu>
|
||
|
||
{this.state.modalVisiable && (
|
||
<ImportModal
|
||
init={() => {
|
||
this.handleInitModal();
|
||
}}
|
||
isInit={this.state.isInit}
|
||
params={{}}
|
||
columns={previewColumns}
|
||
step={step}
|
||
setStep={this.setStep.bind(this)}
|
||
slideDataSource={previewDataSource}
|
||
importResult={this.state.importResult}
|
||
onFinish={() => {
|
||
this.handleImportFinish();
|
||
}}
|
||
previewImport={(params) => {
|
||
this.handlePreviewImport(params);
|
||
}}
|
||
importFile={(params) => {
|
||
this.handleImportFile(params);
|
||
}}
|
||
templateLink={
|
||
"/api/bs/hrmsalary/salaryArchive/downloadTemplate?importType=" +
|
||
this.state.importType
|
||
}
|
||
renderFormComponent={() => {
|
||
this.renderFormComponent();
|
||
}}
|
||
visiable={this.state.modalVisiable}
|
||
onCancel={() => {
|
||
this.setState({ modalVisiable: false });
|
||
}}
|
||
/>
|
||
)}
|
||
{this.state.changeSalaryVisible && (
|
||
<ChangeSalaryModal
|
||
currentId={currentId}
|
||
visible={this.state.changeSalaryVisible}
|
||
onCancel={() => {
|
||
this.setState({ changeSalaryVisible: false });
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{editAgentVisible && (
|
||
<EditAgentModal
|
||
currentId={currentId}
|
||
visible={editAgentVisible}
|
||
onCancel={() => {
|
||
setEditAgentVisible(false);
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{/* 操作记录 */}
|
||
{this.state.recordSlideVisible && (
|
||
<WeaSlideModal
|
||
visible={this.state.recordSlideVisible}
|
||
top={0}
|
||
width={40}
|
||
height={100}
|
||
direction={"right"}
|
||
measure={"%"}
|
||
title={
|
||
<SlideModalTitle
|
||
subtitle={"操作记录"}
|
||
tabs={[
|
||
{ title: "薪资项目", key: 0 },
|
||
{ title: "个税扣缴义务人", key: 1 },
|
||
]}
|
||
editable={false}
|
||
selectedTab={selectedTab}
|
||
customOperate={() => {
|
||
renderCustomOperate();
|
||
}}
|
||
subItemChange={(item) => {
|
||
this.setState({ selectedTab: item.key });
|
||
}}
|
||
/>
|
||
}
|
||
content={
|
||
<div>
|
||
{selectedTab == 0 && <SlideSalaryItem />}
|
||
{selectedTab == 1 && <SlideAgent />}
|
||
</div>
|
||
}
|
||
onClose={() => this.setState({ recordSlideVisible: false })}
|
||
showMask={true}
|
||
closeMaskOnClick={() =>
|
||
this.setState({ recordSlideVisible: false })
|
||
}
|
||
/>
|
||
)}
|
||
|
||
{this.state.editSlideVisible && (
|
||
<WeaSlideModal
|
||
visible={this.state.editSlideVisible}
|
||
top={0}
|
||
width={40}
|
||
height={100}
|
||
direction={"right"}
|
||
measure={"%"}
|
||
title={
|
||
<SlideModalTitle
|
||
subtitle={"员工薪资档案"}
|
||
editable={false}
|
||
customOperate={this.renderEditSlideOperate()}
|
||
/>
|
||
}
|
||
content={<SalaryFileViewSlide id={currentId} />}
|
||
onClose={() => this.setState({ editSlideVisible: false })}
|
||
showMask={true}
|
||
closeMaskOnClick={() => this.setState({ editSlideVisible: false })}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
}
|