413 lines
13 KiB
JavaScript
413 lines
13 KiB
JavaScript
import React from 'react';
|
||
import { inject, observer } from 'mobx-react';
|
||
import { toJS } from 'mobx';
|
||
|
||
import { Button, Table, DatePicker, Dropdown, Menu, message } from 'antd';
|
||
|
||
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable,
|
||
WeaInputSearch, WeaSlideModal, WeaCheckbox, WeaHelpfulTip } from 'ecCom';
|
||
|
||
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'
|
||
|
||
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: "",
|
||
modalVisiable: false,
|
||
step: 0,
|
||
recordSlideVisible: false,
|
||
selectedRowKeys: [],
|
||
showSearchBar: false,
|
||
importResult: {}
|
||
}
|
||
}
|
||
|
||
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;
|
||
form.updateFields({ current: value })
|
||
getTableDatas()
|
||
}
|
||
|
||
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) => {
|
||
this.setState({importType: e.key, 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 />
|
||
<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()
|
||
}
|
||
/>
|
||
<CustomTable
|
||
loading={loading}
|
||
rowSelection={rowSelection}
|
||
columns={this.getColumns()}
|
||
dataSource={dataSource}
|
||
pagination={{
|
||
onChange: (value) => {this.handlePageChange(value)},
|
||
total: pageInfo.total,
|
||
current: pageInfo.pageNum
|
||
}}
|
||
scroll={{x: 2300}}
|
||
/>
|
||
</WeaTop>
|
||
</WeaRightMenu>
|
||
|
||
|
||
{
|
||
this.state.modalVisiable &&
|
||
<ImportModal
|
||
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>
|
||
)
|
||
}
|
||
}
|