个税扣缴义务人页面重构1

This commit is contained in:
黎永顺 2022-12-01 09:24:03 +08:00
parent 4f3c27c53b
commit 2899e32909
5 changed files with 165 additions and 36 deletions

View File

@ -53,3 +53,18 @@
}
}
}
//添加关联人员弹框中的下拉框样式
.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;
}
}

View File

@ -24,7 +24,9 @@ class PersonalScope extends Component {
rowKeys: [],
personalAddModal: {
visible: false,
title: "关联人员"
title: "关联人员",
includeType: "",
taxAgentId: ""
}
};
this.personalScopeTableRef = null;
@ -68,9 +70,15 @@ class PersonalScope extends Component {
* Date: 2022/11/30
*/
handleAddPersonal = () => {
const { personalAddModal } = this.state;
const { personalAddModal, selectedKey } = this.state;
const { taxAgentId } = this.props;
this.setState({
personalAddModal: { ...personalAddModal, visible: true }
personalAddModal: {
...personalAddModal,
visible: true,
includeType: selectedKey === "listInclude" ? 1 : 0,
taxAgentId
}
});
};
@ -124,10 +132,20 @@ class PersonalScope extends Component {
searchValue={searchValue}
onChangeSelectKey={rowKeys => this.setState({ rowKeys })}
/>
<PersonalScopeModal {...personalAddModal} onCancel={() =>
this.setState({
personalAddModal: { ...personalAddModal, visible: false }
})}/>
<PersonalScopeModal
{...personalAddModal}
onSuccess={() => this.personalScopeTableRef.getPersonalScopeList()}
onCancel={() =>
this.setState({
personalAddModal: {
...personalAddModal,
visible: false,
taxAgentId: "",
includeType: ""
}
})
}
/>
</div>
);
}

View File

@ -6,17 +6,23 @@
*/
import React, { Component } from "react";
import { WeaBrowser, WeaDialog, WeaFormItem, WeaSearchGroup, WeaSelect } from "ecCom";
import { Button } from "antd";
import { getTaxAgentRangeForm } from "../../../apis/taxAgent";
import { Button, message, Modal } from "antd";
import { getTaxAgentRangeForm, taxAgentRangeSave } from "../../../apis/taxAgent";
import { SelectWithAll } from "../../socialSecurityBenefits/standingBookDetail/components/regAddEmployee";
import "./index.less";
class PersonalScopeModal extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
employeeStatus: [],
targetTypeList: [],
targetType: "EMPLOYEE",
targetTypeIds: ""
targetTypeIds: "",
targetTypeIdsNames: "",
status: "",
statusAll: ""
};
}
@ -30,13 +36,42 @@ class PersonalScopeModal extends Component {
const { employeeStatus, targetTypeList } = data;
this.setState({
targetTypeList: _.map(targetTypeList, it => ({ key: it.id, showname: it.name })),
employeeStatus
employeeStatus: _.map(employeeStatus, it => ({ key: it.id, showname: it.name }))
});
}
});
};
taxAgentRangeSave = () => {
const { status, targetTypeIds, targetType } = this.state;
const { includeType, taxAgentId, onSuccess, onCancel } = 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 })),
taxAgentId
};
this.setState({ loading: true });
taxAgentRangeSave(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 } = this.state;
const { targetType, targetTypeIds, targetTypeIdsNames } = this.state;
let browserType = {};
switch (targetType) {
case "EMPLOYEE":
@ -59,34 +94,41 @@ class PersonalScopeModal extends Component {
viewAttr={3}
isSingle={false}
value={targetTypeIds}
valueSpan={targetTypeIdsNames}
inputStyle={{ width: 200 }}
onChange={(ids, names, datas) => {
this.setState({ ids });
onChange={(targetTypeIds, targetTypeIdsNames) => {
this.setState({ targetTypeIds, targetTypeIdsNames });
}}
/>;
};
handleChangeTargetType = (targetType) => {
handleReset = () => {
this.setState({
targetType
targetType: "EMPLOYEE",
targetTypeIds: "",
status: "",
statusAll: ""
});
};
render() {
const { onCancel, title, visible } = this.props;
const { employeeStatus, targetTypeList, targetType } = this.state;
const { employeeStatus, targetTypeList, targetType, status, statusAll, loading } = this.state;
const buttons = [
<Button type="primary">
确定
</Button>,
<Button type="ghost"> 重置 </Button>
<Button type="primary" onClick={this.taxAgentRangeSave} 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={onCancel}
onCancel={() => {
this.handleReset();
onCancel();
}}
>
<WeaSearchGroup col={1} needTigger title="" showGroup center>
<WeaFormItem
@ -99,17 +141,47 @@ class PersonalScopeModal extends Component {
style={{ width: 60, marginRight: 12 }}
value={targetType}
options={targetTypeList}
onChange={this.handleChangeTargetType}
onChange={(targetType) => this.setState({ targetType })}
/>
{this.renderBrowser()}
</div>
</WeaFormItem>
<WeaFormItem
label="选择员工状态"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
</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>
);

View File

@ -62,14 +62,14 @@ class TaxAgentSlide extends Component {
};
renderChildren = () => {
const { current } = this.state;
const { decentralization } = this.props;
const { decentralization, taxAgentId } = this.props;
let CurrentDom = null;
switch (current) {
case 0:
CurrentDom = <BaseSettings decentralization={decentralization}/>;
break;
case 2:
CurrentDom = <PersonalScope />;
CurrentDom = <PersonalScope taxAgentId={taxAgentId}/>;
break;
default:
CurrentDom = null;
@ -78,10 +78,11 @@ class TaxAgentSlide extends Component {
return CurrentDom;
};
renderCustomOperate = () => {
const { taxAgentId, taxAgentStore: { showOperateBtn } } = this.props;
const { current } = this.state;
const { taxAgentId, isChief } = this.props;
const { current, per } = this.state;
let CurrentDom = [];
if(showOperateBtn){
//总管理员权限
if (isChief) {
switch (current) {
case 0:
CurrentDom = [

View File

@ -14,6 +14,7 @@ class TaxAgent extends Component {
constructor(props) {
super(props);
this.state = {
syncLoading: false, //同步人员范围loading
searchValue: "",
decentralization: "0", //启用分权
permission: {},
@ -94,6 +95,26 @@ class TaxAgent extends Component {
}
});
};
/*
* Author: 黎永顺
* Description:启用分权
* Params:
* Date: 2022/12/1
*/
taxAgentRangeSync = () => {
const { taxAgentStore } = this.props;
const { taxAgentRangeSync } = taxAgentStore;
this.setState({ syncLoading: true });
taxAgentRangeSync({}).then(({ status, data, errormsg }) => {
this.setState({ syncLoading: false });
if (status) {
message.success(data || "操作成功");
this.taxAgentTableRef.getTaxAgentList();
} else {
message.error(data || errormsg || "操作失败");
}
});
};
handelResetSlide = () => {
const { taxAgentStore } = this.props;
const { salarytaxAgentForm } = taxAgentStore;
@ -124,10 +145,11 @@ class TaxAgent extends Component {
};
render() {
const { searchValue, decentralization, taxAgentSlideProps, permission } = this.state;
const { searchValue, decentralization, taxAgentSlideProps, permission, syncLoading } = this.state;
const { taxAgentStore: { showOperateBtn } } = this.props;
const btns = [
<Button type="primary" disabled={!showOperateBtn}>同步人员范围</Button>,
<Button type="primary" disabled={!showOperateBtn} onClick={this.taxAgentRangeSync}
loading={syncLoading}>同步人员范围</Button>,
<WeaInputSearch
style={{ width: 220 }}
value={searchValue}
@ -170,6 +192,7 @@ class TaxAgent extends Component {
<ComHint/>
<TaxAgentSlide
{...taxAgentSlideProps}
isChief={permission.isChief}
decentralization={decentralization} //是否开启分权 0否 1是 ;开启分权才有管理员的添加
onCancel={this.handelResetSlide}
/>