594 lines
18 KiB
JavaScript
594 lines
18 KiB
JavaScript
import React from "react";
|
||
import { inject, observer } from "mobx-react";
|
||
|
||
import { Button, DatePicker, Dropdown, Menu, Modal, Switch } from "antd";
|
||
|
||
import { WeaInputSearch, WeaRightMenu, WeaSlideModal, WeaTable, WeaTop } from "ecCom";
|
||
import { renderNoright } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||
import CustomTab from "../../components/customTab";
|
||
import StepSlide from "../../components/stepSlide";
|
||
import SlideBaseForm from "./slideBaseForm";
|
||
import SlideRefereUser from "./slideRefereUser";
|
||
import SalaryItemForm from "./salaryItemForm";
|
||
import CalRulesForm from "./calcRulesForm";
|
||
import ValidRulesForm from "./validRulesForm";
|
||
import SlideModalTitle from "../../components/slideModalTitle";
|
||
import CopyFormModal from "./copyFormModal";
|
||
import "./index.less";
|
||
|
||
const { MonthPicker } = DatePicker;
|
||
|
||
@inject("ledgerStore", "taxAgentStore")
|
||
@observer
|
||
export default class Ledger extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
value: "",
|
||
selectedKey: "0",
|
||
stepSlideVisible: false,
|
||
editSlideVisible: false,
|
||
copyFormVisible: false,
|
||
currentStep: 0,
|
||
selectedTab: 0,
|
||
currentReocrd: {},
|
||
searchValue: "",
|
||
step1Request: {}
|
||
};
|
||
}
|
||
|
||
handleSearch(value) {
|
||
const { ledgerStore: { getTableDatas } } = this.props;
|
||
getTableDatas({ name: value });
|
||
}
|
||
|
||
refereUser() {
|
||
this.setState({
|
||
editSlideVisible: true,
|
||
selectedTab: 1
|
||
});
|
||
}
|
||
|
||
onEdit() {
|
||
this.setState({
|
||
editSlideVisible: true
|
||
});
|
||
}
|
||
|
||
componentWillMount() {
|
||
const {
|
||
ledgerStore: { doInit },
|
||
taxAgentStore: { getTaxAgentSelectListAsAdmin }
|
||
} = this.props;
|
||
doInit();
|
||
getTaxAgentSelectListAsAdmin();
|
||
}
|
||
|
||
handleItemStatusChange(value, record) {
|
||
const { ledgerStore: { changeLedgerStatus } } = this.props;
|
||
changeLedgerStatus(record.id, value ? 0 : 1);
|
||
}
|
||
|
||
handleItemClick(record, selectedTab = 0) {
|
||
const { ledgerStore: { setSalarySobId } } = this.props;
|
||
setSalarySobId(record.id);
|
||
this.setState({
|
||
selectedTab,
|
||
editSlideVisible: true,
|
||
request: record
|
||
});
|
||
}
|
||
|
||
// 编辑Slide保存按钮
|
||
handleEditSlideSave() {
|
||
const { selectedTab, step1Request } = this.state;
|
||
const {
|
||
ledgerStore: {
|
||
saveLedgerItem,
|
||
saveAdjustmentRule,
|
||
saveLedgerBasic,
|
||
baseInfoRequest
|
||
}
|
||
} = this.props;
|
||
if (selectedTab == 0) {
|
||
saveLedgerBasic(baseInfoRequest);
|
||
} else if (selectedTab == 2) {
|
||
saveLedgerItem();
|
||
} else if (selectedTab == 3) {
|
||
saveAdjustmentRule();
|
||
}
|
||
}
|
||
|
||
// 增加编辑功能，重写columns绑定事件
|
||
getColumns = columns => {
|
||
let newColumns = "";
|
||
newColumns = columns.map(column => {
|
||
let newColumn = column;
|
||
newColumn.render = (text, record, index) => {
|
||
//前端元素转义
|
||
let valueSpan =
|
||
record[newColumn.dataIndex + "span"] !== undefined
|
||
? record[newColumn.dataIndex + "span"]
|
||
: record[newColumn.dataIndex];
|
||
switch (newColumn.dataIndex) {
|
||
case "name":
|
||
return (
|
||
<a
|
||
onClick={() => {
|
||
this.handleItemClick(record);
|
||
}}>
|
||
{text}
|
||
</a>
|
||
);
|
||
case "disable":
|
||
return (
|
||
<Switch
|
||
checked={text == 0}
|
||
onChange={value => {
|
||
this.handleItemStatusChange(value, record);
|
||
}}
|
||
/>
|
||
);
|
||
case "operate":
|
||
return (
|
||
<a
|
||
onClick={() => {
|
||
this.handleItemClick(record, 1);
|
||
}}>
|
||
关联人员
|
||
</a>
|
||
);
|
||
default:
|
||
return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
|
||
}
|
||
};
|
||
return newColumn;
|
||
});
|
||
return newColumns;
|
||
};
|
||
|
||
onOperatesClick = (record, type) => {
|
||
const { ledgerStore: { deleteLedger } } = this.props;
|
||
switch (type.toString()) {
|
||
case "0": // 编辑
|
||
this.handleItemClick(record);
|
||
break;
|
||
case "1": // 复制
|
||
this.setState({
|
||
copyFormVisible: true,
|
||
currentReocrd: record
|
||
});
|
||
break;
|
||
case "3": // 关联人员
|
||
this.handleItemClick(record, 1);
|
||
break;
|
||
case "4": // 删除
|
||
Modal.confirm({
|
||
title: "信息确认",
|
||
content: "确认删除",
|
||
onOk: () => {
|
||
deleteLedger([record.id]);
|
||
},
|
||
onCancel: () => {
|
||
}
|
||
});
|
||
|
||
break;
|
||
}
|
||
};
|
||
|
||
handleCopySave = value => {
|
||
const { ledgerStore: { doCopy } } = this.props;
|
||
doCopy({ id: this.state.currentReocrd.id, ...value }).then(() => {
|
||
this.setState({ copyFormVisible: false });
|
||
});
|
||
};
|
||
|
||
handleNew = () => {
|
||
const { ledgerStore: { initSlideData } } = this.props;
|
||
initSlideData();
|
||
this.setState({ stepSlideVisible: true, currentStep: 0 });
|
||
};
|
||
|
||
render() {
|
||
const { ledgerStore, taxAgentStore } = this.props;
|
||
const {
|
||
loading,
|
||
dataSource,
|
||
columns,
|
||
pageObj,
|
||
setPageObj,
|
||
hasRight,
|
||
form,
|
||
condition,
|
||
tableStore,
|
||
showSearchAd,
|
||
getTableDatas,
|
||
doSearch,
|
||
setShowSearchAd,
|
||
baseInfoRequest
|
||
} = ledgerStore;
|
||
const { showOperateBtn } = taxAgentStore;
|
||
const { canEdit } = baseInfoRequest;
|
||
const { currentStep, selectedTab } = 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 renderRightOperation = () => {
|
||
return (
|
||
<div style={{ display: "inline-block" }}>
|
||
{showOperateBtn &&
|
||
<Button
|
||
type="primary"
|
||
style={{ marginRight: "10px" }}
|
||
onClick={() => this.handleNew()}>
|
||
新建
|
||
</Button>}
|
||
<WeaInputSearch
|
||
value={this.state.searchValue}
|
||
onChange={value => {
|
||
this.setState({ searchValue: value });
|
||
}}
|
||
placeholder={"请输入薪资账套名称"}
|
||
onSearch={value => {
|
||
this.handleSearch(value);
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const nextStep = () => {
|
||
const { currentStep } = this.state;
|
||
this.setState({ currentStep: currentStep + 1 });
|
||
};
|
||
|
||
const prevStep = () => {
|
||
const { currentStep } = this.state;
|
||
this.setState({ currentStep: currentStep - 1 });
|
||
};
|
||
const steps = [
|
||
"基础设置",
|
||
"关联人员",
|
||
"薪资项目",
|
||
"调薪计薪规则"
|
||
// "校验规则"
|
||
];
|
||
|
||
const handleStep1Save = () => {
|
||
const { step1Request } = this.state;
|
||
const { ledgerStore: { saveLedgerBasic, baseInfoRequest } } = this.props;
|
||
saveLedgerBasic(baseInfoRequest).then(() => {
|
||
nextStep();
|
||
});
|
||
};
|
||
|
||
const handleStep3Save = () => {
|
||
const { ledgerStore: { saveAdjustmentRule } } = this.props;
|
||
saveAdjustmentRule().then(() => {
|
||
nextStep();
|
||
});
|
||
};
|
||
|
||
const handleStepSave = () => {
|
||
const { currentStep } = this.state;
|
||
const {
|
||
ledgerStore: {
|
||
saveLedgerBasic,
|
||
saveLedgerItem,
|
||
saveAdjustmentRule,
|
||
baseInfoRequest
|
||
}
|
||
} = this.props;
|
||
if (currentStep == 0) {
|
||
saveLedgerBasic(baseInfoRequest).then(() => {
|
||
nextStep();
|
||
});
|
||
// } else if (currentStep == 1 || currentStep == 3) {
|
||
} else if (currentStep == 1) {
|
||
nextStep();
|
||
} else if (currentStep == 2) {
|
||
saveLedgerItem().then(() => {
|
||
nextStep();
|
||
});
|
||
// } else if (currentStep == 4) {
|
||
} else if (currentStep == 3) {
|
||
saveAdjustmentRule().then(() => {
|
||
this.setState({ stepSlideVisible: false });
|
||
});
|
||
}
|
||
};
|
||
|
||
const pagination = {
|
||
total: pageObj.total,
|
||
showTotal: total => `共 ${total} 条`,
|
||
showSizeChanger: true,
|
||
pageSizeOptions: ["10", "20", "50", "100"],
|
||
onShowSizeChange: (current, pageSize) => {
|
||
setPageObj({ ...pageObj, current, pageSize });
|
||
getTableDatas({ current, pageSize, name: this.state.searchValue });
|
||
},
|
||
onChange: current => {
|
||
setPageObj({ ...pageObj, current, pageSize: pageObj.pageSize });
|
||
getTableDatas({
|
||
current,
|
||
pageSize: pageObj.pageSize,
|
||
name: this.state.searchValue
|
||
});
|
||
}
|
||
};
|
||
const newColumns = _.map([...columns], item => {
|
||
if (item.dataIndex === "name") {
|
||
return {
|
||
...item,
|
||
render: (text, record) =>
|
||
<div className="linkWapper">
|
||
<a
|
||
href="javaScript:void(0);"
|
||
onClick={() => {
|
||
this.handleItemClick(record);
|
||
}}>
|
||
{text}
|
||
</a>
|
||
</div>
|
||
};
|
||
} else if (item.dataIndex === "disable") {
|
||
return {
|
||
...item,
|
||
render: (text, record) =>
|
||
<Switch
|
||
checked={text == 0}
|
||
disabled={!showOperateBtn}
|
||
onChange={value => {
|
||
this.handleItemStatusChange(value, record);
|
||
}}
|
||
/>
|
||
};
|
||
} else if (item.dataIndex === "operate" && showOperateBtn) {
|
||
return {
|
||
...item,
|
||
render: (text, record) =>
|
||
<div className="linkWapper">
|
||
<a
|
||
onClick={() => {
|
||
this.handleItemClick(record, 1);
|
||
}}>
|
||
关联人员
|
||
</a>
|
||
<Dropdown
|
||
overlay={
|
||
<Menu
|
||
onClick={item => this.onOperatesClick(record, item.key)}>
|
||
<Menu.Item key="0">编辑</Menu.Item>
|
||
<Menu.Item key="1">复制</Menu.Item>
|
||
{/*<Menu.Item key="3">关联人员</Menu.Item>*/}
|
||
<Menu.Item key="4">删除</Menu.Item>
|
||
</Menu>
|
||
}>
|
||
<a className="ant-dropdown-link" href="javaScript:void(0);">
|
||
<i className="icon-coms-more" style={{ marginLeft: 18 }}/>
|
||
</a>
|
||
</Dropdown>
|
||
</div>
|
||
};
|
||
} else {
|
||
return { ...item };
|
||
}
|
||
});
|
||
|
||
return (
|
||
<div className="mySalaryBenefitsWrapper">
|
||
<WeaRightMenu
|
||
datas={rightMenu} // 右键菜单
|
||
collectParams={collectParams}>
|
||
<WeaTop
|
||
title="薪资账套" // 文字
|
||
icon={<i className="icon-coms-meeting"/>} // 左侧图标
|
||
iconBgcolor="#F14A2D" // 左侧图标背景色
|
||
showDropIcon={true} // 是否显示下拉按钮
|
||
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||
dropMenuProps={{ collectParams }}>
|
||
<CustomTab
|
||
searchOperationItem={renderRightOperation()}
|
||
onChange={v => {
|
||
}}
|
||
/>
|
||
<WeaTable
|
||
rowKey="id"
|
||
columns={
|
||
showOperateBtn
|
||
? newColumns
|
||
: _.filter(newColumns, it => it.dataIndex !== "operate")
|
||
}
|
||
dataSource={dataSource}
|
||
pagination={pagination}
|
||
loading={loading}
|
||
scroll={{ x: 1300 }}
|
||
/>
|
||
{this.state.stepSlideVisible &&
|
||
<StepSlide
|
||
visible={this.state.stepSlideVisible}
|
||
steps={steps}
|
||
currentStep={currentStep}
|
||
onCancel={() => {
|
||
this.setState({ stepSlideVisible: false });
|
||
}}
|
||
customOperate={
|
||
<div style={{ display: "inline-block" }}>
|
||
{currentStep == 0 &&
|
||
<Button
|
||
type="primary"
|
||
onClick={() => {
|
||
handleStep1Save();
|
||
}}>
|
||
保存并进入下一步
|
||
</Button>}
|
||
{currentStep == 1 &&
|
||
<div style={{ display: "inline-block" }}>
|
||
<Button
|
||
type="default"
|
||
onClick={() => {
|
||
this.setState({ stepSlideVisible: false });
|
||
}}>
|
||
完成，跳过所有步骤
|
||
</Button>
|
||
<Button
|
||
type="primary"
|
||
style={{ marginLeft: "10px" }}
|
||
onClick={() => {
|
||
handleStepSave();
|
||
}}>
|
||
下一步
|
||
</Button>
|
||
</div>}
|
||
{/*{(currentStep == 2 || currentStep == 3) &&*/}
|
||
{currentStep == 2 &&
|
||
<div>
|
||
<Button
|
||
type="default"
|
||
onClick={() => {
|
||
this.setState({ stepSlideVisible: false });
|
||
}}>
|
||
完成，跳过所有步骤
|
||
</Button>
|
||
<Button
|
||
type="default"
|
||
style={{ marginLeft: "10px" }}
|
||
onClick={() => {
|
||
prevStep();
|
||
}}>
|
||
上一步
|
||
</Button>
|
||
<Button
|
||
type="primary"
|
||
style={{ marginLeft: "10px" }}
|
||
onClick={() => {
|
||
handleStepSave();
|
||
}}>
|
||
保存并进入下一步
|
||
</Button>
|
||
</div>}
|
||
{/*{currentStep == 4 &&*/}
|
||
{currentStep == 3 &&
|
||
<div>
|
||
<Button
|
||
type="default"
|
||
style={{ marginRight: "10px" }}
|
||
onClick={() => {
|
||
prevStep();
|
||
}}>
|
||
上一步
|
||
</Button>
|
||
<Button
|
||
type="primary"
|
||
onClick={() => {
|
||
handleStepSave();
|
||
}}>
|
||
完成
|
||
</Button>
|
||
</div>}
|
||
</div>
|
||
}
|
||
title="新建账套"
|
||
content={
|
||
<div>
|
||
{currentStep == 0 && <SlideBaseForm/>}
|
||
{currentStep == 1 && <SlideRefereUser/>}
|
||
{currentStep == 2 && <SalaryItemForm/>}
|
||
{currentStep == 3 && <CalRulesForm/>}
|
||
{currentStep == 4 && <ValidRulesForm/>}
|
||
</div>
|
||
}
|
||
/>}
|
||
{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 }
|
||
// { title: "校验规则", key: 4 }
|
||
]}
|
||
showOperateBtn={showOperateBtn}
|
||
editable={canEdit === "true"}
|
||
selectedTab={selectedTab}
|
||
onSave={() => this.handleEditSlideSave()}
|
||
subItemChange={item => {
|
||
this.setState({ selectedTab: item.key });
|
||
}}
|
||
/>
|
||
}
|
||
content={
|
||
<div>
|
||
{selectedTab == 0 && <SlideBaseForm edit={true}/>}
|
||
{selectedTab == 1 && <SlideRefereUser edit={true}/>}
|
||
{selectedTab == 2 && <SalaryItemForm edit={true}/>}
|
||
{selectedTab == 3 && <CalRulesForm edit={true}/>}
|
||
{selectedTab == 4 && <ValidRulesForm edit={true}/>}
|
||
</div>
|
||
}
|
||
onClose={() => this.setState({ editSlideVisible: false })}
|
||
showMask={true}
|
||
closeMaskOnClick={() =>
|
||
this.setState({ editSlideVisible: false })}
|
||
/>}
|
||
</WeaTop>
|
||
</WeaRightMenu>
|
||
|
||
{this.state.copyFormVisible &&
|
||
<CopyFormModal
|
||
taxAgentStore={taxAgentStore}
|
||
visible={this.state.copyFormVisible}
|
||
onSave={value => this.handleCopySave(value)}
|
||
onCancel={() => {
|
||
this.setState({ copyFormVisible: false });
|
||
}}
|
||
/>}
|
||
</div>
|
||
);
|
||
}
|
||
}
|