361 lines
12 KiB
JavaScript
361 lines
12 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, WeaSlideModal } from 'ecCom';
|
||
// import { WeaTableNew } from "comsMobx"
|
||
// const WeaTable = WeaTableNew.WeaTable;
|
||
|
||
import { renderNoright, getSearchs } from '../../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||
import CustomTab from '../../../components/customTab';
|
||
import ContentWrapper from '../../../components/contentWrapper';
|
||
import BaseForm from './baseForm'
|
||
import SlideModalTitle from '../../../components/slideModalTitle'
|
||
import SocialSecurityForm from './socialSecurityForm';
|
||
import AccumulationFundForm from './accumulationFundForm';
|
||
import OtherForm from './otherForm';
|
||
import { tempateColumns } from '../../payroll/columns';
|
||
import CustomPaginationTable from '../../../components/customPaginationTable';
|
||
import ImportModal from '../../../components/importModal';
|
||
|
||
const { MonthPicker } = DatePicker;
|
||
|
||
@inject('archivesStore')
|
||
@observer
|
||
export default class Archives extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
value: "",
|
||
selectedKey: "0",
|
||
selectedTab: 0,
|
||
editSlideVisible: false,
|
||
employeeId: "",
|
||
importVisible: false,
|
||
modalParam: {},
|
||
step: 0,
|
||
selectedRowKeys: []
|
||
}
|
||
|
||
this.record = {}
|
||
this.pageInfo = {current: 1, pageSize: 10}
|
||
}
|
||
|
||
componentWillMount() {
|
||
const { archivesStore: {doInit}} = this.props;
|
||
doInit()
|
||
}
|
||
|
||
handleEdit(record) {
|
||
this.record = record
|
||
this.setState({employeeId: record.employeeId, editSlideVisible: true})
|
||
}
|
||
|
||
setStep(step) {
|
||
this.setState({step})
|
||
}
|
||
|
||
getColumns() {
|
||
const { archivesStore: {tableStore}} = this.props;
|
||
let columns = [...tableStore.columns]
|
||
columns = columns.filter(item => item.hide == "false")
|
||
columns.map(item => {
|
||
item.width = "150px"
|
||
})
|
||
columns.push({
|
||
title: "操作",
|
||
dataIndex: "operate",
|
||
fixed: "right",
|
||
width: "100px",
|
||
height: "auto",
|
||
render: (text, record) => {
|
||
return (<a onClick={() => {this.handleEdit(record)}}>编辑</a>)
|
||
}
|
||
})
|
||
return columns;
|
||
}
|
||
|
||
// 保存
|
||
handleEditSlideSave() {
|
||
const { selectedTab } = this.state;
|
||
const { archivesStore: {save}} = this.props;
|
||
if(selectedTab == 1) {
|
||
save("SOCIAL_SECURITY")
|
||
} else if(selectedTab == 2) {
|
||
save("ACCUMULATION_FUND")
|
||
} else if(selectedTab == 3) {
|
||
save("OTHER")
|
||
}
|
||
}
|
||
|
||
handlePageChnage(value) {
|
||
const { archivesStore: {form, getTableDatas}} = this.props;
|
||
this.pageInfo.current = value
|
||
getTableDatas(this.pageInfo)
|
||
}
|
||
|
||
// 导入
|
||
handleBtnImport() {
|
||
this.setState({importVisible: true})
|
||
}
|
||
|
||
// 模板点击
|
||
handleTemplateLinkClick() {
|
||
const { archivesStore: {exportTempateDownload} } = this.props;
|
||
exportTempateDownload()
|
||
}
|
||
|
||
// 导入预览
|
||
handlePreviewImport(params) {
|
||
const { archivesStore: {previewCurData}} = this.props;
|
||
previewCurData(params)
|
||
}
|
||
|
||
// 导入
|
||
handleImport(params) {
|
||
const { archivesStore: {importBatch, initImportParams}} = this.props;
|
||
importBatch(params)
|
||
|
||
}
|
||
|
||
// 导入完成
|
||
handleFinish() {
|
||
const { archivesStore: {getTableDatas, initImportParams}} = this.props;
|
||
initImportParams()
|
||
this.setState({importVisible: false, step: 0})
|
||
getTableDatas()
|
||
}
|
||
|
||
// 初始化导入参数
|
||
handleInitModal() {
|
||
const { archivesStore: { setPreviewCurDataColumns, setPreviewCurDataDataSource, setImportResult }} = this.props;
|
||
setPreviewCurDataColumns([])
|
||
setPreviewCurDataDataSource([])
|
||
setImportResult({})
|
||
}
|
||
|
||
// 选项设置
|
||
onSelectChange = selectedRowKeys => {
|
||
this.setState({ selectedRowKeys });
|
||
}
|
||
|
||
// 关闭导入框
|
||
handleImportCancel() {
|
||
const { archivesStore: {initImportParams, getTableDatas }} = this.props;
|
||
|
||
initImportParams()
|
||
if(this.state.step == 2) {
|
||
getTableDatas()
|
||
}
|
||
this.setState({importVisible: false, step: 0});
|
||
}
|
||
|
||
handleSearch() {
|
||
const { archivesStore: {getTableDatas}} = this.props;
|
||
getTableDatas(this.pageInfo)
|
||
}
|
||
|
||
render() {
|
||
const { archivesStore } = this.props;
|
||
const { selectedTab, selectedRowKeys } = this.state;
|
||
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd,
|
||
previewCurDataColumns, previewCurDataDataSource, importResult, initImportParams
|
||
} = archivesStore;
|
||
const { dataSource, pageInfo } = archivesStore
|
||
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 handleButtonClick = () => {
|
||
const { archivesStore:{exportArchives}} = this.props;
|
||
exportArchives()
|
||
}
|
||
|
||
// 导出选中
|
||
const handleMenuClick = () => {
|
||
const { selectedRowKeys } = this.state;
|
||
console.log("selectedRowKeys：", selectedRowKeys);
|
||
if(selectedRowKeys.length == 0) {
|
||
message.warning("未选择任何条目", 1);
|
||
return
|
||
}
|
||
let ids = selectedRowKeys.join(",")
|
||
const { archivesStore:{exportArchives}} = this.props;
|
||
exportArchives(ids)
|
||
}
|
||
|
||
const btns = [
|
||
<Button type="primary" onClick={() => { this.handleBtnImport() }}>导入</Button>,
|
||
<Dropdown.Button onClick={handleButtonClick} overlay={
|
||
<Menu onClick={handleMenuClick}>
|
||
<Menu.Item key="1">导出选中</Menu.Item>
|
||
</Menu>
|
||
} type="ghost">
|
||
导出全部
|
||
</Dropdown.Button>
|
||
]
|
||
|
||
|
||
const renderSearchOperationItem = () => {
|
||
return <div></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个功能
|
||
buttons={btns}
|
||
>
|
||
|
||
<WeaTab
|
||
searchType={['base', 'advanced']} // base：基础搜索框 advanced：显示高级搜索按钮
|
||
showSearchAd={showSearchAd} // 是否展开高级搜索面板
|
||
setShowSearchAd={bool => setShowSearchAd(bool)} //高级搜索面板受控
|
||
searchsAd={getSearchs(form, toJS(condition), 2)} // 高级搜索内部数据
|
||
buttonsAd={adBtn} // 高级搜索内部按钮
|
||
onSearch={() => {this.handleSearch()}} // 点搜索按钮时的回调
|
||
onSearchChange={v => form.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
|
||
searchsBaseValue={form.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
|
||
/>
|
||
{/* <WeaTable // table内部做了loading加载处理，页面就不需要再加了
|
||
comsWeaTableStore={tableStore} // table store
|
||
hasOrder={true} // 是否启用排序
|
||
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
|
||
|
||
// getColumns={this.getColumns}
|
||
// onOperatesClick={this.onOperatesClick.bind(this)}
|
||
/> */}
|
||
<CustomPaginationTable
|
||
loading={loading}
|
||
columns={this.getColumns()}
|
||
dataSource={dataSource}
|
||
rowSelection={rowSelection}
|
||
total={pageInfo.total}
|
||
current={pageInfo.pageNum}
|
||
pageSize={this.pageInfo.pageSize}
|
||
scroll={{ x: this.getColumns().length > 0 ? this.getColumns().length * 150: 1000 }}
|
||
onPageChange={(value) => {
|
||
this.handlePageChnage(value)
|
||
}}
|
||
onShowSizeChange={(current, pageSize) => {
|
||
this.pageInfo = {current, pageSize}
|
||
getTableDatas(this.pageInfo)
|
||
}}
|
||
/>
|
||
|
||
</WeaTop>
|
||
</WeaRightMenu>
|
||
|
||
{
|
||
this.state.editSlideVisible &&
|
||
<WeaSlideModal visible={this.state.editSlideVisible}
|
||
top={0}
|
||
width={40}
|
||
height={100}
|
||
direction={'right'}
|
||
measure={'%'}
|
||
title={
|
||
<SlideModalTitle
|
||
subtitle={"员工福利档案"}
|
||
tabs={[{title: '基础设置', key: 0}, {title: "社保", key: 1}, {title: "公积金", key: 2}, {title: '企业年金及其他福利', key: 3}]}
|
||
editable={false}
|
||
selectedTab={selectedTab}
|
||
customOperate={
|
||
<div>
|
||
{
|
||
selectedTab != 0 && <Button type="primary" onClick={() => {this.handleEditSlideSave()}}>保存</Button>
|
||
}
|
||
</div>
|
||
}
|
||
subItemChange={
|
||
(item) => {this.setState({selectedTab: item.key})}
|
||
}
|
||
/>
|
||
}
|
||
content={<div>
|
||
{
|
||
selectedTab == 0 && <BaseForm employeeId={this.state.employeeId}/>
|
||
}
|
||
{
|
||
selectedTab == 1 && <SocialSecurityForm employeeId={this.state.employeeId} record={this.record}/>
|
||
}
|
||
{
|
||
selectedTab == 2 && <AccumulationFundForm employeeId={this.state.employeeId} record={this.record}/>
|
||
}
|
||
{
|
||
selectedTab == 3 && <OtherForm employeeId={this.state.employeeId} record={this.record}/>
|
||
}
|
||
|
||
</div>}
|
||
onClose={() => this.setState({editSlideVisible: false})}
|
||
showMask={true}
|
||
closeMaskOnClick={() => this.setState({editSlideVisible: false})} />
|
||
}
|
||
{
|
||
this.state.importVisible && <ImportModal
|
||
init={() => {
|
||
this.handleInitModal()
|
||
}}
|
||
params={this.state.modalParam}
|
||
columns={previewCurDataColumns}
|
||
step={this.state.step}
|
||
setStep={this.setStep.bind(this)}
|
||
slideDataSource={previewCurDataDataSource}
|
||
importResult={importResult}
|
||
onFinish={() => {this.handleFinish()}}
|
||
previewImport={(params) => {this.handlePreviewImport(params)}}
|
||
importFile={(params) => {this.handleImport(params);}}
|
||
templateLink={() => {this.handleTemplateLinkClick()}}
|
||
visiable={this.state.importVisible}
|
||
onCancel={() => {
|
||
this.handleImportCancel()
|
||
|
||
}}
|
||
/>
|
||
}
|
||
</div>
|
||
)
|
||
}
|
||
}
|