薪资账套页面重构
This commit is contained in:
parent
fa45739e66
commit
a7028943ed
|
|
@ -0,0 +1,227 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 新增人员范围弹框
|
||||
* Description:
|
||||
* Date: 2022/11/30
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaBrowser, WeaDialog, WeaFormItem, WeaSearchGroup, WeaSelect } from "ecCom";
|
||||
import { Button, message, Modal } from "antd";
|
||||
import { getTaxAgentRangeForm } from "../../apis/taxAgent";
|
||||
import { SelectWithAll } from "../../pages/socialSecurityBenefits/standingBookDetail/components/regAddEmployee";
|
||||
import "./index.less";
|
||||
|
||||
class PersonalScopeModal extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: false,
|
||||
employeeStatus: [],
|
||||
targetTypeList: [],
|
||||
targetType: "EMPLOYEE",
|
||||
targetTypeIds: "",
|
||||
targetTypeIdsNames: "",
|
||||
status: "",
|
||||
statusAll: ""
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { isTaxgent = true } = this.props;
|
||||
if (isTaxgent) {
|
||||
this.getTaxAgentRangeForm();
|
||||
} else {
|
||||
const employeeStatus = [
|
||||
{ key: "TRIAL", showname: "试用" },
|
||||
{ key: "FORMAL", showname: "正式" },
|
||||
{ key: "TEMPORARY", showname: "临时" },
|
||||
{ key: "DELAY", showname: "试用延期" },
|
||||
{ key: "FIRE", showname: "解雇" },
|
||||
{ key: "DEPARTURE", showname: "离职" },
|
||||
{ key: "RETIRED", showname: "退休" }
|
||||
];
|
||||
const targetTypeList = [
|
||||
{
|
||||
key: "EMPLOYEE",
|
||||
showname: "人员",
|
||||
selected: false
|
||||
},
|
||||
{
|
||||
key: "SUBCOMPANY",
|
||||
showname: "分部",
|
||||
selected: false
|
||||
},
|
||||
{
|
||||
key: "DEPT",
|
||||
showname: "部门",
|
||||
selected: false
|
||||
},
|
||||
{
|
||||
key: "POSITION",
|
||||
showname: "岗位",
|
||||
selected: false
|
||||
}
|
||||
];
|
||||
this.setState({ targetTypeList, employeeStatus });
|
||||
}
|
||||
}
|
||||
|
||||
getTaxAgentRangeForm = () => {
|
||||
getTaxAgentRangeForm().then(({ status, data }) => {
|
||||
if (status) {
|
||||
const { employeeStatus, targetTypeList } = data;
|
||||
this.setState({
|
||||
targetTypeList: _.map(targetTypeList, it => ({ key: it.id, showname: it.name })),
|
||||
employeeStatus: _.map(employeeStatus, it => ({ key: it.id, showname: it.name }))
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
handleSubmit = () => {
|
||||
const { status, targetTypeIds, targetType } = this.state;
|
||||
const { includeType, saveKeyVal, onSuccess, onCancel, APISaveFox } = this.props;
|
||||
if (_.isEmpty(status) || _.isEmpty(targetTypeIds)) {
|
||||
Modal.warning({
|
||||
title: "信息确认",
|
||||
content: "必要信息不完整，红色*为必填项！"
|
||||
});
|
||||
return;
|
||||
}
|
||||
const payload = {
|
||||
employeeStatus: status.split(","),
|
||||
includeType,
|
||||
targetParams: _.map(targetTypeIds.split(","), it => ({ targetType, targetId: it })),
|
||||
[saveKeyVal["key"]]: saveKeyVal["value"],
|
||||
};
|
||||
this.setState({ loading: true });
|
||||
APISaveFox["save"](payload).then(({ status, errormsg }) => {
|
||||
this.setState({ loading: false });
|
||||
if (status) {
|
||||
message.success("保存成功");
|
||||
this.handleReset();
|
||||
onSuccess();
|
||||
onCancel();
|
||||
} else {
|
||||
message.error(errormsg || "保存失败");
|
||||
}
|
||||
}).catch(() => this.setState({ loading: true }));
|
||||
};
|
||||
renderBrowser = () => {
|
||||
const { targetType, targetTypeIds, targetTypeIdsNames } = this.state;
|
||||
let browserType = {};
|
||||
switch (targetType) {
|
||||
case "EMPLOYEE":
|
||||
browserType = { ...browserType, type: 17, title: "人员选择" };
|
||||
break;
|
||||
case "DEPT":
|
||||
browserType = { ...browserType, type: 57, title: "部门选择" };
|
||||
break;
|
||||
case "SUBCOMPANY":
|
||||
browserType = { ...browserType, type: 164, title: "分部选择" };
|
||||
break;
|
||||
case "POSITION":
|
||||
browserType = { ...browserType, type: 278, title: "岗位选择" };
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return <WeaBrowser
|
||||
{...browserType}
|
||||
viewAttr={3}
|
||||
isSingle={false}
|
||||
value={targetTypeIds}
|
||||
valueSpan={targetTypeIdsNames}
|
||||
inputStyle={{ width: 200 }}
|
||||
onChange={(targetTypeIds, targetTypeIdsNames) => {
|
||||
this.setState({ targetTypeIds, targetTypeIdsNames });
|
||||
}}
|
||||
/>;
|
||||
};
|
||||
handleReset = () => {
|
||||
this.setState({
|
||||
targetType: "EMPLOYEE",
|
||||
targetTypeIds: "",
|
||||
status: "",
|
||||
statusAll: ""
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { onCancel, title, visible } = this.props;
|
||||
const { employeeStatus, targetTypeList, targetType, status, statusAll, loading } = this.state;
|
||||
const buttons = [
|
||||
<Button type="primary" onClick={this.handleSubmit} loading={loading}>确定</Button>,
|
||||
<Button type="ghost" onClick={this.handleReset}>重置</Button>
|
||||
];
|
||||
return (
|
||||
<WeaDialog
|
||||
initLoadCss
|
||||
className="personalScopeModalWrapper"
|
||||
title={title}
|
||||
visible={visible}
|
||||
style={{ width: 600 }}
|
||||
buttons={buttons}
|
||||
onCancel={() => {
|
||||
this.handleReset();
|
||||
onCancel();
|
||||
}}
|
||||
>
|
||||
<WeaSearchGroup col={1} needTigger title="" showGroup center>
|
||||
<WeaFormItem
|
||||
label="对象类型"
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 18 }}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<WeaSelect
|
||||
style={{ width: 60, marginRight: 12 }}
|
||||
value={targetType}
|
||||
options={targetTypeList}
|
||||
onChange={(targetType) => this.setState({ targetType })}
|
||||
/>
|
||||
{this.renderBrowser()}
|
||||
</div>
|
||||
</WeaFormItem>
|
||||
{
|
||||
SelectWithAll({
|
||||
label: "选择员工状态",
|
||||
options: employeeStatus,
|
||||
detailtype: 2,
|
||||
valueAll: statusAll,
|
||||
value: status,
|
||||
onChangeAll: ({ selected }) => {
|
||||
if (selected) {
|
||||
this.setState({
|
||||
status: _.map(employeeStatus, it => it.key).join(","),
|
||||
statusAll: selected
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
status: "",
|
||||
statusAll: selected
|
||||
});
|
||||
}
|
||||
},
|
||||
onChange: ({ selected }) => {
|
||||
const bool = _.every(_.map(employeeStatus, it => it.key), item => selected.split(",").includes(item));
|
||||
if (bool) {
|
||||
this.setState({
|
||||
status: selected,
|
||||
statusAll: "0"
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
status: selected,
|
||||
statusAll: ""
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</WeaSearchGroup>
|
||||
</WeaDialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PersonalScopeModal;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
//添加关联人员弹框中的下拉框样式
|
||||
.personalScopeModalWrapper{
|
||||
.wea-select,.ant-select-selection,.ant-select{
|
||||
width: 100%;
|
||||
}
|
||||
.wea-select{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.ant-select-selection{
|
||||
height: 30px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,14 +6,24 @@
|
|||
*/
|
||||
import React, { Component } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { message, Modal } from "antd";
|
||||
import { WeaButtonIcon, WeaInputSearch, WeaTab } from "ecCom";
|
||||
import PersonalScopeTable from "../../../components/PersonalScopeTable";
|
||||
import { getLedgerPersonRangeExclude, getLedgerPersonRangeInclude } from "../../../apis/ledger";
|
||||
import PersonalScopeModal from "../../../components/PersonalScopeModal";
|
||||
import {
|
||||
deleteLedgerPersonRange,
|
||||
getLedgerPersonRangeExclude,
|
||||
getLedgerPersonRangeInclude,
|
||||
saveLedgerPersonRange
|
||||
} from "../../../apis/ledger";
|
||||
|
||||
const APIFox = {
|
||||
listInclude: getLedgerPersonRangeInclude,
|
||||
listExclude: getLedgerPersonRangeExclude
|
||||
};
|
||||
const APISaveFox = {
|
||||
save: saveLedgerPersonRange
|
||||
};
|
||||
|
||||
@inject("taxAgentStore")
|
||||
@observer
|
||||
|
|
@ -32,7 +42,30 @@ class LedgerAssociatedPersonnel extends Component {
|
|||
};
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* Description: 删除人员范围
|
||||
* Params:
|
||||
* Date: 2022/11/30
|
||||
*/
|
||||
taxAgentRangeDelete = () => {
|
||||
Modal.confirm({
|
||||
title: "信息确认",
|
||||
content: "确认要删除吗?",
|
||||
onOk: () => {
|
||||
deleteLedgerPersonRange(this.state.rowKeys).then(({ status, errormsg }) => {
|
||||
if (status) {
|
||||
message.success("删除成功");
|
||||
this.setState({ rowKeys: [] }, () => {
|
||||
this.personalScopeTableRef.clearRowkeys();
|
||||
});
|
||||
} else {
|
||||
message.error(errormsg || "删除失败");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* Description:新增人员范围
|
||||
|
|
@ -76,14 +109,14 @@ class LedgerAssociatedPersonnel extends Component {
|
|||
value={searchValue}
|
||||
onChange={searchValue => this.setState({ searchValue })}
|
||||
placeholder="请输入对象"
|
||||
onSearch={() => console.log(searchValue)}
|
||||
onSearch={() => this.personalScopeTableRef.getPersonalScopeList()}
|
||||
/>
|
||||
] : [<WeaInputSearch
|
||||
style={{ width: 220 }}
|
||||
value={searchValue}
|
||||
onChange={searchValue => this.setState({ searchValue })}
|
||||
placeholder="请输入对象"
|
||||
onSearch={() => console.log(searchValue)}
|
||||
onSearch={() => this.personalScopeTableRef.getPersonalScopeList()}
|
||||
/>];
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -102,6 +135,23 @@ class LedgerAssociatedPersonnel extends Component {
|
|||
searchValue={searchValue}
|
||||
onChangeSelectKey={rowKeys => this.setState({ rowKeys })}
|
||||
/>
|
||||
{/*新增人员范围*/}
|
||||
<PersonalScopeModal
|
||||
{...personalAddModal}
|
||||
APISaveFox={APISaveFox}
|
||||
isTaxgent={false}
|
||||
saveKeyVal={{ key: "salarySobId", value: editId }}
|
||||
onSuccess={() => this.personalScopeTableRef.getPersonalScopeList()}
|
||||
onCancel={() =>
|
||||
this.setState({
|
||||
personalAddModal: {
|
||||
...personalAddModal,
|
||||
visible: false,
|
||||
includeType: ""
|
||||
}
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue