个税扣缴义务人页面重构
This commit is contained in:
parent
80f6181219
commit
9fcf7c1b26
|
|
@ -0,0 +1,34 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 基础设置
|
||||
* Description:
|
||||
* Date: 2022/11/29
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { decentralizationConditions, editConditions } from "../../taxAgent/editConditions";
|
||||
import { getSearchs } from "../../../util";
|
||||
|
||||
@inject("taxAgentStore")
|
||||
@observer
|
||||
class BaseSettings extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const { taxAgentStore: { salarytaxAgentForm }, decentralization } = this.props;
|
||||
return (
|
||||
<div className="baseSettingWrapper">
|
||||
{
|
||||
decentralization === "0" ?
|
||||
getSearchs(salarytaxAgentForm, decentralizationConditions, 1, true) :
|
||||
getSearchs(salarytaxAgentForm, editConditions, 1, true)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BaseSettings;
|
||||
|
|
@ -17,8 +17,39 @@
|
|||
line-height: 20px;
|
||||
padding: 0 16px;
|
||||
display: inline-block;
|
||||
p{
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slideOuterWrapper {
|
||||
.wea-slide-modal-title {
|
||||
height: initial;
|
||||
line-height: initial;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rodal-close {
|
||||
z-index: 99;
|
||||
top: 10px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1260px) {
|
||||
.slideOuterWrapper {
|
||||
.reqTopWrapper .wea-new-top-req-title > div:first-child > div {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1060px) and (max-width: 1260px) {
|
||||
.slideOuterWrapper {
|
||||
.reqTopWrapper .wea-new-top-req-title > div:first-child > div {
|
||||
max-width: calc(100% - 96px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,136 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 人员范围
|
||||
* Description:
|
||||
* Date: 2022/11/30
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { message, Modal } from "antd";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { WeaButtonIcon, WeaInputSearch, WeaTab } from "ecCom";
|
||||
import { taxAgentRangeDelete } from "../../../apis/taxAgent";
|
||||
import PersonalScopeTable from "./personalScopeTable";
|
||||
import PersonalScopeModal from "./personalScopeModal";
|
||||
|
||||
|
||||
@inject("taxAgentStore")
|
||||
@observer
|
||||
class PersonalScope extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
searchValue: "",
|
||||
selectedKey: "listInclude",
|
||||
rowKeys: [],
|
||||
personalAddModal: {
|
||||
visible: false,
|
||||
title: "关联人员"
|
||||
}
|
||||
};
|
||||
this.personalScopeTableRef = null;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { taxAgentStore: { hasIconInTax } } = this.props;
|
||||
hasIconInTax();
|
||||
}
|
||||
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* Description: 删除人员范围
|
||||
* Params:
|
||||
* Date: 2022/11/30
|
||||
*/
|
||||
taxAgentRangeDelete = () => {
|
||||
Modal.confirm({
|
||||
title: "信息确认",
|
||||
content: "确认要删除吗?",
|
||||
onOk: () => {
|
||||
taxAgentRangeDelete(this.state.rowKeys).then(({ status, errormsg }) => {
|
||||
if (status) {
|
||||
message.success("删除成功");
|
||||
this.setState({ rowKeys: [] }, () => {
|
||||
this.personalScopeTableRef.clearRowkeys();
|
||||
});
|
||||
} else {
|
||||
message.error(errormsg || "删除失败");
|
||||
}
|
||||
});
|
||||
},
|
||||
onCancel: () => {
|
||||
}
|
||||
});
|
||||
};
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* Description:新增人员范围
|
||||
* Params:
|
||||
* Date: 2022/11/30
|
||||
*/
|
||||
handleAddPersonal = () => {
|
||||
const { personalAddModal } = this.state;
|
||||
this.setState({
|
||||
personalAddModal: { ...personalAddModal, visible: true }
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { selectedKey, searchValue, rowKeys, personalAddModal } = this.state;
|
||||
const { taxAgentStore: { hideIconInTax, showSalaryItemBtn } } = this.props;
|
||||
const topTab = [
|
||||
{
|
||||
title: "管理范围",
|
||||
viewcondition: "listInclude"
|
||||
},
|
||||
{
|
||||
title: "从范围中排除",
|
||||
viewcondition: "listExclude"
|
||||
}
|
||||
];
|
||||
const btns = (hideIconInTax || showSalaryItemBtn) ? [
|
||||
<WeaButtonIcon
|
||||
buttonType="del"
|
||||
type="primary"
|
||||
disabled={_.isEmpty(rowKeys)}
|
||||
onClick={this.taxAgentRangeDelete}
|
||||
/>,
|
||||
<WeaButtonIcon buttonType="add" type="primary" onClick={this.handleAddPersonal}/>,
|
||||
<WeaInputSearch
|
||||
style={{ width: 220 }}
|
||||
value={searchValue}
|
||||
onChange={searchValue => this.setState({ searchValue })}
|
||||
placeholder="请输入对象"
|
||||
onSearch={() => this.personalScopeTableRef.getPersonalScopeList()}
|
||||
/>
|
||||
] : [<WeaInputSearch
|
||||
style={{ width: 220 }}
|
||||
value={searchValue}
|
||||
onChange={searchValue => this.setState({ searchValue })}
|
||||
placeholder="请输入对象"
|
||||
onSearch={() => this.personalScopeTableRef.getPersonalScopeList()}
|
||||
/>];
|
||||
return (
|
||||
<div>
|
||||
<WeaTab
|
||||
datas={topTab}
|
||||
keyParam="viewcondition" //主键
|
||||
selectedKey={selectedKey}
|
||||
buttons={btns}
|
||||
onChange={selectedKey => this.setState({ selectedKey })}
|
||||
/>
|
||||
<PersonalScopeTable
|
||||
ref={dom => this.personalScopeTableRef = dom}
|
||||
tabActive={selectedKey}
|
||||
searchValue={searchValue}
|
||||
onChangeSelectKey={rowKeys => this.setState({ rowKeys })}
|
||||
/>
|
||||
<PersonalScopeModal {...personalAddModal} onCancel={() =>
|
||||
this.setState({
|
||||
personalAddModal: { ...personalAddModal, visible: false }
|
||||
})}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PersonalScope;
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 新增人员范围弹框
|
||||
* Description:
|
||||
* Date: 2022/11/30
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaBrowser, WeaDialog, WeaFormItem, WeaSearchGroup, WeaSelect } from "ecCom";
|
||||
import { Button } from "antd";
|
||||
import { getTaxAgentRangeForm } from "../../../apis/taxAgent";
|
||||
|
||||
class PersonalScopeModal extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
employeeStatus: [],
|
||||
targetTypeList: [],
|
||||
targetType: "EMPLOYEE",
|
||||
targetTypeIds: ""
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getTaxAgentRangeForm();
|
||||
}
|
||||
|
||||
getTaxAgentRangeForm = () => {
|
||||
getTaxAgentRangeForm().then(({ status, data }) => {
|
||||
if (status) {
|
||||
const { employeeStatus, targetTypeList } = data;
|
||||
this.setState({
|
||||
targetTypeList: _.map(targetTypeList, it => ({ key: it.id, showname: it.name })),
|
||||
employeeStatus
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
renderBrowser = () => {
|
||||
const { targetType, targetTypeIds } = 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}
|
||||
inputStyle={{ width: 200 }}
|
||||
onChange={(ids, names, datas) => {
|
||||
this.setState({ ids });
|
||||
}}
|
||||
/>;
|
||||
};
|
||||
handleChangeTargetType = (targetType) => {
|
||||
this.setState({
|
||||
targetType
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { onCancel, title, visible } = this.props;
|
||||
const { employeeStatus, targetTypeList, targetType } = this.state;
|
||||
const buttons = [
|
||||
<Button type="primary">
|
||||
确定
|
||||
</Button>,
|
||||
<Button type="ghost"> 重置 </Button>
|
||||
];
|
||||
return (
|
||||
<WeaDialog
|
||||
title={title}
|
||||
visible={visible}
|
||||
style={{ width: 600 }}
|
||||
buttons={buttons}
|
||||
onCancel={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={this.handleChangeTargetType}
|
||||
/>
|
||||
{this.renderBrowser()}
|
||||
</div>
|
||||
</WeaFormItem>
|
||||
<WeaFormItem
|
||||
label="选择员工状态"
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 18 }}
|
||||
>
|
||||
</WeaFormItem>
|
||||
</WeaSearchGroup>
|
||||
</WeaDialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PersonalScopeModal;
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 人员范围列表数据
|
||||
* Description:
|
||||
* Date: 2022/11/30
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaTable } from "ecCom";
|
||||
import { getTaxAgentRangeListExclude, getTaxAgentRangeListInclude } from "../../../apis/taxAgent";
|
||||
import "./index.less";
|
||||
import { calcPageNo } from "../../../util";
|
||||
|
||||
const APIFox = {
|
||||
listInclude: getTaxAgentRangeListInclude,
|
||||
listExclude: getTaxAgentRangeListExclude
|
||||
};
|
||||
|
||||
class PersonalScopeTable extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: {
|
||||
query: false
|
||||
},
|
||||
dataSource: [],
|
||||
columns: [],
|
||||
selectedRowKeys: [],
|
||||
pageInfo: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getPersonalScopeList();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
if (nextProps.tabActive !== this.props.tabActive) {
|
||||
this.setState({ selectedRowKeys: [] }, () => {
|
||||
this.getPersonalScopeList(nextProps.tabActive);
|
||||
nextProps.onChangeSelectKey([]);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
getPersonalScopeList = (tabActive = this.props.tabActive) => {
|
||||
const { searchValue } = this.props;
|
||||
const { pageInfo, loading } = this.state;
|
||||
const payload = {
|
||||
targetName: searchValue,
|
||||
...pageInfo
|
||||
};
|
||||
this.setState({ loading: { ...loading, query: true } });
|
||||
APIFox[tabActive](payload).then(({ status, data }) => {
|
||||
this.setState({ loading: { ...loading, query: false } });
|
||||
if (status) {
|
||||
const { pageNum: current, pageSize, total, columns, list: dataSource } = data;
|
||||
this.setState({
|
||||
pageInfo: { ...pageInfo, current, pageSize, total },
|
||||
dataSource,
|
||||
columns: _.map(columns, item => {
|
||||
return {
|
||||
...item,
|
||||
render: (text) => {
|
||||
return <span className="tdEllipsis" title={text}>{text}</span>;
|
||||
}
|
||||
};
|
||||
})
|
||||
});
|
||||
}
|
||||
}).catch(() => {
|
||||
this.setState({ loading: { ...loading, query: false } });
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* Description: 清空选中项
|
||||
* Params:
|
||||
* Date: 2022/11/30
|
||||
*/
|
||||
clearRowkeys = () => {
|
||||
const { pageInfo, selectedRowKeys } = this.state;
|
||||
this.setState({
|
||||
selectedRowKeys: [],
|
||||
pageInfo: {
|
||||
...pageInfo,
|
||||
current: calcPageNo(pageInfo.total, pageInfo.current, 10, selectedRowKeys.length)
|
||||
}
|
||||
}, () => {
|
||||
this.getPersonalScopeList();
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource, columns, pageInfo, loading, selectedRowKeys } = this.state;
|
||||
const { onChangeSelectKey } = this.props;
|
||||
const pagination = {
|
||||
...pageInfo,
|
||||
showTotal: total => `共 ${total} 条`,
|
||||
showQuickJumper: true,
|
||||
pageSizeOptions: ["10", "20", "50", "100"],
|
||||
onChange: current => {
|
||||
this.setState({
|
||||
pageInfo: { ...pageInfo, current }
|
||||
}, () => {
|
||||
this.getPersonalScopeList();
|
||||
});
|
||||
}
|
||||
};
|
||||
const rowSelection = {
|
||||
selectedRowKeys,
|
||||
onChange: (selectedRowKeys) => {
|
||||
this.setState({ selectedRowKeys }, () => {
|
||||
onChangeSelectKey(this.state.selectedRowKeys);
|
||||
});
|
||||
}
|
||||
};
|
||||
return (
|
||||
<WeaTable
|
||||
rowKey="id"
|
||||
rowSelection={rowSelection}
|
||||
dataSource={dataSource}
|
||||
pagination={pagination}
|
||||
loading={loading.query}
|
||||
columns={columns}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PersonalScopeTable;
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 新增/编辑个税扣缴义务人
|
||||
* Description:
|
||||
* Date: 2022/11/29
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { Button } from "antd";
|
||||
import { WeaSlideModal, WeaSteps } from "ecCom";
|
||||
import SlideModalTitle from "../../../components/slideModalTitle";
|
||||
import { decentralizationConditions, editConditions } from "../../taxAgent/editConditions";
|
||||
import BaseSettings from "./baseSettings";
|
||||
import PersonalScope from "./personalScope";
|
||||
import "./index.less";
|
||||
|
||||
const Step = WeaSteps.Step;
|
||||
const tabs = [
|
||||
{ key: 0, title: "基础设置" },
|
||||
{ key: 1, title: "报税信息" },
|
||||
{ key: 2, title: "人员范围" }
|
||||
];
|
||||
|
||||
@inject("taxAgentStore")
|
||||
@observer
|
||||
class TaxAgentSlide extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
current: 0
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
if (nextProps.visible !== this.props.visible || nextProps.decentralization !== this.props.decentralization) {
|
||||
const { taxAgentStore: { salarytaxAgentForm }, decentralization } = nextProps;
|
||||
decentralization === "0" ?
|
||||
salarytaxAgentForm.setCondition(decentralizationConditions, true) :
|
||||
salarytaxAgentForm.setCondition(editConditions, true);
|
||||
this.setState({ current: nextProps.current });
|
||||
}
|
||||
}
|
||||
|
||||
handleSave = () => {
|
||||
const { taxAgentStore: { salarytaxAgentForm } } = this.props;
|
||||
// salarytaxAgentForm.updateFields({
|
||||
// name: { value: "data.name" },
|
||||
// description: { value: "123", hide: true },
|
||||
// });
|
||||
// salarytaxAgentForm.setField("adminUserIds", {
|
||||
// hide: true
|
||||
// });
|
||||
|
||||
salarytaxAgentForm.validateForm().then((f) => {
|
||||
if (f.isValid) {
|
||||
const formData = salarytaxAgentForm.getFormParams();
|
||||
console.log(formData);
|
||||
} else {
|
||||
f.showErrors();
|
||||
}
|
||||
});
|
||||
};
|
||||
renderChildren = () => {
|
||||
const { current } = this.state;
|
||||
const { decentralization } = this.props;
|
||||
let CurrentDom = null;
|
||||
switch (current) {
|
||||
case 0:
|
||||
CurrentDom = <BaseSettings decentralization={decentralization}/>;
|
||||
break;
|
||||
case 2:
|
||||
CurrentDom = <PersonalScope />;
|
||||
break;
|
||||
default:
|
||||
CurrentDom = null;
|
||||
break;
|
||||
}
|
||||
return CurrentDom;
|
||||
};
|
||||
renderCustomOperate = () => {
|
||||
const { taxAgentId, taxAgentStore: { showOperateBtn } } = this.props;
|
||||
const { current } = this.state;
|
||||
let CurrentDom = [];
|
||||
if(showOperateBtn){
|
||||
switch (current) {
|
||||
case 0:
|
||||
CurrentDom = [
|
||||
<Button type="primary" onClick={this.handleSave}>{taxAgentId ? "保存" : "保存并进入下一步"}</Button>
|
||||
];
|
||||
break;
|
||||
case 1:
|
||||
const tmpV = [<Button type="primary">保存并验证</Button>];
|
||||
const tmpJ = [
|
||||
<Button type="ghost">完成，跳过所有步骤</Button>,
|
||||
<Button type="ghost">下一步</Button>
|
||||
];
|
||||
CurrentDom = taxAgentId ? tmpV : [...tmpV, ...tmpJ];
|
||||
break;
|
||||
case 2:
|
||||
CurrentDom = !taxAgentId ? [<Button type="ghost">上一步</Button>] : [];
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
return CurrentDom;
|
||||
};
|
||||
handleChangeSlideTab = (current) => {
|
||||
this.setState({ current: Number(current) });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { title, visible, onCancel, taxAgentId, taxAgentStore: { showOperateBtn } } = this.props;
|
||||
const { current } = this.state;
|
||||
return (
|
||||
<WeaSlideModal
|
||||
className="slideOuterWrapper"
|
||||
visible={visible}
|
||||
top={0}
|
||||
width={50}
|
||||
height={100}
|
||||
direction="right"
|
||||
measure="%"
|
||||
title={
|
||||
<SlideModalTitle
|
||||
subtitle={title}
|
||||
tabs={taxAgentId ? tabs : []}
|
||||
loading={false}
|
||||
showOperateBtn={showOperateBtn}
|
||||
editable={false}
|
||||
onSave={() => {
|
||||
}}
|
||||
selectedTab={current}
|
||||
customOperate={this.renderCustomOperate()}
|
||||
subItemChange={this.handleChangeSlideTab}
|
||||
/>
|
||||
}
|
||||
content={
|
||||
<div className="taxAgentSlideContent">
|
||||
{
|
||||
!taxAgentId &&
|
||||
<WeaSteps current={current} style={{ margin: "20px 0" }}>
|
||||
{
|
||||
_.map(tabs, item => {
|
||||
const { key, title } = item;
|
||||
return <Step description={title} key={key}/>;
|
||||
})
|
||||
}
|
||||
</WeaSteps>
|
||||
}
|
||||
{
|
||||
this.renderChildren()
|
||||
}
|
||||
</div>
|
||||
}
|
||||
onClose={onCancel}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TaxAgentSlide;
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 个税扣缴义务人列表
|
||||
* Description:
|
||||
* Date: 2022/11/29
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaTable } from "ecCom";
|
||||
import * as API from "../../../apis/taxAgent";
|
||||
import "./index.less";
|
||||
|
||||
class TaxAgentTable extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: {
|
||||
query: false
|
||||
},
|
||||
dataSource: [],
|
||||
columns: [],
|
||||
pageInfo: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getTaxAgentList();
|
||||
}
|
||||
|
||||
getTaxAgentList = () => {
|
||||
const { pageInfo, loading } = this.state;
|
||||
const { searchValue, onOperate } = this.props;
|
||||
const payload = {
|
||||
name: searchValue,
|
||||
...pageInfo
|
||||
};
|
||||
this.setState({ loading: { ...loading, query: true } });
|
||||
API.getTaxAgentList(payload).then(({ status, data }) => {
|
||||
this.setState({ loading: { ...loading, query: false } });
|
||||
if (status) {
|
||||
const { pageNum: current, pageSize, total, columns, list: dataSource } = data;
|
||||
this.setState({
|
||||
pageInfo: { ...pageInfo, current, pageSize, total },
|
||||
dataSource,
|
||||
columns: _.map(columns, item => {
|
||||
if (item.dataIndex === "employeeRange") {
|
||||
return {
|
||||
...item,
|
||||
render: (text, record) => {
|
||||
return <a href="javaScript:void(0);" onClick={() => onOperate("edit", record.id, 2)}>{text}</a>;
|
||||
}
|
||||
};
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
render: (text) => {
|
||||
return <span className="tdEllipsis" title={text}>{text}</span>;
|
||||
}
|
||||
};
|
||||
})
|
||||
});
|
||||
}
|
||||
}).catch(() => {
|
||||
this.setState({ loading: { ...loading, query: false } });
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource, columns, pageInfo, loading } = this.state;
|
||||
const { onOperate } = this.props;
|
||||
const pagination = {
|
||||
...pageInfo,
|
||||
showTotal: total => `共 ${total} 条`,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
pageSizeOptions: ["10", "20", "50", "100"],
|
||||
onShowSizeChange: (current, pageSize) => {
|
||||
this.setState({
|
||||
pageInfo: { ...pageInfo, current, pageSize }
|
||||
}, () => {
|
||||
this.getTaxAgentList();
|
||||
});
|
||||
},
|
||||
onChange: current => {
|
||||
this.setState({
|
||||
pageInfo: { ...pageInfo, current }
|
||||
}, () => {
|
||||
this.getTaxAgentList();
|
||||
});
|
||||
}
|
||||
};
|
||||
return (
|
||||
<WeaTable
|
||||
dataSource={dataSource}
|
||||
pagination={pagination}
|
||||
loading={loading.query}
|
||||
columns={[
|
||||
...columns,
|
||||
{
|
||||
title: "操作",
|
||||
key: "operation",
|
||||
render: (text, record) =>
|
||||
<div className="operationWapper">
|
||||
<a href="javaScript:void(0);" onClick={() => onOperate("edit", record.id)}> 编辑 </a>
|
||||
</div>
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TaxAgentTable;
|
||||
|
|
@ -1,7 +1,40 @@
|
|||
.salaryAgentWrapper{
|
||||
.comContent{
|
||||
.wea-search-group{
|
||||
.salaryAgentWrapper {
|
||||
.comContent {
|
||||
.wea-search-group {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.customTitleWrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.ant-btn {
|
||||
margin-left: 10px;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.ant-btn.ant-btn-primary[disabled] {
|
||||
color: #d8d8d8;
|
||||
}
|
||||
|
||||
.ant-btn.ant-btn-primary {
|
||||
color: #55a1f8;
|
||||
}
|
||||
}
|
||||
|
||||
.tdEllipsis {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,178 @@
|
|||
import React, { Component } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { WeaSearchGroup, WeaTop } from "ecCom";
|
||||
import { Button, message, Modal } from "antd";
|
||||
import { WeaCheckbox, WeaFormItem, WeaInputSearch, WeaSearchGroup, WeaTop } from "ecCom";
|
||||
import ComHint from "./components/comHint";
|
||||
import TaxAgentTable from "./components/taxAgentTable";
|
||||
import TaxAgentSlide from "./components/taxAgentSlide";
|
||||
import * as API from "../../apis/taxAgent";
|
||||
import "./index.less";
|
||||
|
||||
@inject("taxAgentStore")
|
||||
@observer
|
||||
class TaxAgent extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
searchValue: "",
|
||||
decentralization: "0", //启用分权
|
||||
permission: {},
|
||||
taxAgentSlideProps: {
|
||||
visible: false,
|
||||
title: "新增个税扣缴义务人",
|
||||
taxAgentId: "",
|
||||
current: 0
|
||||
}
|
||||
};
|
||||
this.taxAgentTableRef = null;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getTaxAgentBaseForm();
|
||||
this.getPermission();
|
||||
}
|
||||
|
||||
getTaxAgentBaseForm = () => {
|
||||
API.getTaxAgentBaseForm().then(({ status, data }) => {
|
||||
if (status) {
|
||||
const { devolutionStatus } = data;
|
||||
this.setState({ decentralization: String(devolutionStatus || 0) });
|
||||
}
|
||||
});
|
||||
};
|
||||
getPermission = () => {
|
||||
const { taxAgentStore: { getPermission } } = this.props;
|
||||
getPermission().then(({ status, data }) => {
|
||||
if (status) {
|
||||
this.setState({ permission: data });
|
||||
}
|
||||
});
|
||||
};
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* Description:开启关闭个税扣缴义务人开关
|
||||
* Params:
|
||||
* Date: 2022/11/29
|
||||
*/
|
||||
taxAgentBaseSave = devolutionStatus => {
|
||||
this.setState({ decentralization: this.state.decentralization }, () => {
|
||||
Modal.confirm({
|
||||
title: "信息确认",
|
||||
content: `确认${devolutionStatus === "0" ? "停用" : "启用"}分权?`,
|
||||
onOk: () => {
|
||||
const paylaod = { devolutionStatus };
|
||||
const { taxAgentStore } = this.props;
|
||||
const { taxAgentBaseSave, setSalarytaxAgentForm } = taxAgentStore;
|
||||
taxAgentBaseSave(paylaod).then(({ status, errormsg }) => {
|
||||
if (status) {
|
||||
message.success(`${devolutionStatus === "0" ? "停用" : "启用"}分权成功`);
|
||||
this.getTaxAgentBaseForm();
|
||||
this.getPermission();
|
||||
this.taxAgentTableRef.getTaxAgentList();
|
||||
setSalarytaxAgentForm();
|
||||
} else {
|
||||
message.error(errormsg || `${devolutionStatus === "0" ? "停用" : "启用"}分权失败`);
|
||||
}
|
||||
});
|
||||
},
|
||||
onCancel() {
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* Description:
|
||||
* Params:添加个税扣缴义务人
|
||||
* Date: 2022/11/29
|
||||
*/
|
||||
handleAddTaxAgent = () => {
|
||||
this.setState({
|
||||
taxAgentSlideProps: {
|
||||
...this.state.taxAgentSlideProps,
|
||||
visible: true, current: 0
|
||||
}
|
||||
});
|
||||
};
|
||||
handelResetSlide = () => {
|
||||
const { taxAgentStore } = this.props;
|
||||
const { salarytaxAgentForm } = taxAgentStore;
|
||||
this.setState({
|
||||
taxAgentSlideProps: {
|
||||
...this.state.taxAgentSlideProps,
|
||||
visible: false,
|
||||
title: "新增个税扣缴义务人",
|
||||
taxAgentId: "",
|
||||
current: 0
|
||||
}
|
||||
}, () => salarytaxAgentForm.resetForm());
|
||||
};
|
||||
handleOperate = (type, itemId, current = 0) => {
|
||||
switch (type) {
|
||||
case "edit":
|
||||
this.setState({
|
||||
taxAgentSlideProps: {
|
||||
...this.state.taxAgentSlideProps,
|
||||
visible: true, title: "编辑个税扣缴义务人",
|
||||
taxAgentId: itemId, current
|
||||
}
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { searchValue, decentralization, taxAgentSlideProps, permission } = this.state;
|
||||
const { taxAgentStore: { showOperateBtn } } = this.props;
|
||||
const btns = [
|
||||
<Button type="primary" disabled={!showOperateBtn}>同步人员范围</Button>,
|
||||
<WeaInputSearch
|
||||
style={{ width: 220 }}
|
||||
value={searchValue}
|
||||
onChange={searchValue => this.setState({ searchValue })}
|
||||
placeholder="请输入个税扣缴义务人名称"
|
||||
onSearch={() => this.taxAgentTableRef.getTaxAgentList()}
|
||||
/>
|
||||
];
|
||||
const customTitle = <div className="customTitleWrapper">
|
||||
<span>个税扣缴义务人</span>
|
||||
{
|
||||
permission.isChief &&
|
||||
<Button type="primary" size="small" onClick={this.handleAddTaxAgent}>
|
||||
<span className="icon-coms-Add-to-hot" title="添加"></span>
|
||||
</Button>
|
||||
}
|
||||
</div>;
|
||||
return (
|
||||
<div className="salaryAgentWrapper">
|
||||
<WeaTop title="个税扣缴义务人" icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D">
|
||||
<WeaTop
|
||||
title="个税扣缴义务人"
|
||||
icon={<i className="icon-coms-fa"/>}
|
||||
iconBgcolor="#F14A2D"
|
||||
buttons={btns}
|
||||
>
|
||||
<div className="comContent">
|
||||
<WeaSearchGroup title="基础信息" showGroup></WeaSearchGroup>
|
||||
<WeaSearchGroup title="个税扣缴义务人" showGroup></WeaSearchGroup>
|
||||
{
|
||||
permission.isChief &&
|
||||
<WeaSearchGroup title="基础信息" showGroup center>
|
||||
<WeaFormItem label="启用分权" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
|
||||
<WeaCheckbox value={decentralization} display="switch" onChange={this.taxAgentBaseSave}/>
|
||||
</WeaFormItem>
|
||||
</WeaSearchGroup>
|
||||
}
|
||||
<WeaSearchGroup title={customTitle} showGroup>
|
||||
<TaxAgentTable searchValue={searchValue} onOperate={this.handleOperate}
|
||||
ref={dom => this.taxAgentTableRef = dom}/>
|
||||
</WeaSearchGroup>
|
||||
</div>
|
||||
<ComHint />
|
||||
<ComHint/>
|
||||
<TaxAgentSlide
|
||||
{...taxAgentSlideProps}
|
||||
decentralization={decentralization} //是否开启分权 0：否 1：是 ;开启分权才有管理员的添加
|
||||
onCancel={this.handelResetSlide}
|
||||
/>
|
||||
</WeaTop>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@ import { hasIconInTax } from "../apis/taxAgent";
|
|||
const { TableStore } = WeaTableNew;
|
||||
|
||||
export class TaxAgentStore {
|
||||
@observable salarytaxAgentForm = new WeaForm(); //新版个税扣缴义务人表单实体
|
||||
|
||||
|
||||
|
||||
@observable tableStore = new TableStore(); // new table
|
||||
@observable form = new WeaForm(); //表单实体
|
||||
@observable formDecentralization = new WeaForm(); //关闭分权表单
|
||||
|
|
@ -39,6 +43,8 @@ export class TaxAgentStore {
|
|||
|
||||
@action setSalaryItemBtn = bool => (this.showSalaryItemBtn = bool);//薪资项目权限
|
||||
|
||||
@action setSalarytaxAgentForm = () => (this.salarytaxAgentForm = new WeaForm());//薪资项目权限
|
||||
|
||||
// 初始化操作
|
||||
@action
|
||||
doInit = params => {
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ export const getSearchs = (form, condition, col, isCenter) => {
|
|||
/>
|
||||
</WeaFormItem>),
|
||||
colSpan:1,
|
||||
hide: fields.hide
|
||||
})
|
||||
});
|
||||
group.push(
|
||||
|
|
|
|||
Loading…
Reference in New Issue