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

pc4mobx/hrmSalary/pages/salary/components/personalScope.js

@@ -26,7 +26,6 @@ class PersonalScope extends Component {
         visible: false,
         title: "关联人员",
         includeType: "",
-        taxAgentId: ""
       }
     };
     this.personalScopeTableRef = null;
@@ -71,20 +70,18 @@ class PersonalScope extends Component {
    */
   handleAddPersonal = () => {
     const { personalAddModal, selectedKey } = this.state;
-    const { taxAgentId } = this.props;
     this.setState({
       personalAddModal: {
         ...personalAddModal,
         visible: true,
         includeType: selectedKey === "listInclude" ? 1 : 0,
-        taxAgentId
       }
     });
   };
 
   render() {
     const { selectedKey, searchValue, rowKeys, personalAddModal } = this.state;
-    const { taxAgentStore: { hideIconInTax, showSalaryItemBtn } } = this.props;
+    const { taxAgentStore: { hideIconInTax, showSalaryItemBtn }, taxAgentId } = this.props;
     const topTab = [
       {
         title: "管理范围",
@@ -128,19 +125,20 @@ class PersonalScope extends Component {
         />
         <PersonalScopeTable
           ref={dom => this.personalScopeTableRef = dom}
+          taxAgentId={taxAgentId}
           tabActive={selectedKey}
           searchValue={searchValue}
           onChangeSelectKey={rowKeys => this.setState({ rowKeys })}
         />
         <PersonalScopeModal
           {...personalAddModal}
+          taxAgentId={taxAgentId}
           onSuccess={() => this.personalScopeTableRef.getPersonalScopeList()}
           onCancel={() =>
             this.setState({
               personalAddModal: {
                 ...personalAddModal,
                 visible: false,
-                taxAgentId: "",
                 includeType: ""
               }
             })

pc4mobx/hrmSalary/pages/salary/components/personalScopeTable.js

@@ -47,9 +47,10 @@ class PersonalScopeTable extends Component {
   }
 
   getPersonalScopeList = (tabActive = this.props.tabActive) => {
-    const { searchValue } = this.props;
+    const { searchValue, taxAgentId } = this.props;
     const { pageInfo, loading } = this.state;
     const payload = {
+      taxAgentId,
       targetName: searchValue,
       ...pageInfo
     };

pc4mobx/hrmSalary/pages/salary/components/taxAgentSlide.js

@@ -6,12 +6,13 @@
  */
 import React, { Component } from "react";
 import { inject, observer } from "mobx-react";
-import { Button } from "antd";
+import { Button, message } 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 * as API from "../../../apis/taxAgent";
 import "./index.less";
 
 const Step = WeaSteps.Step;
@@ -27,7 +28,9 @@ class TaxAgentSlide extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      current: 0
+      current: 0,
+      loading: false,
+      taxAgentId: ""
     };
   }
 
@@ -37,24 +40,83 @@ class TaxAgentSlide extends Component {
       decentralization === "0" ?
         salarytaxAgentForm.setCondition(decentralizationConditions, true) :
         salarytaxAgentForm.setCondition(editConditions, true);
-      this.setState({ current: nextProps.current });
+      this.setState({ current: nextProps.current, taxAgentId: nextProps.taxAgentId }, () => {
+        if (this.state.taxAgentId) this.getTaxAgentForm();
+      });
     }
   }
 
+  getTaxAgentForm = () => {
+    const { taxAgentId } = this.state;
+    const { taxAgentStore: { salarytaxAgentForm } } = this.props;
+    API.getTaxAgentForm({ id: taxAgentId }).then(({ status, data }) => {
+      if (status) {
+        const { name, description, adminUserIds } = data;
+        salarytaxAgentForm.updateFields({
+          name: { value: name, viewAttr: 1 },
+          adminUserIds: {
+            value: _.map(adminUserIds, it => it.id.toString()).join(","),
+            valueSpan: _.map(adminUserIds, it => it.content).join(",")
+          },
+          description: { value: description }
+        });
+      }
+    });
+  };
+  /*
+   * Author: 黎永顺
+   * Description: 保存个税扣缴义务人
+   * Params:
+   * Date: 2022/12/1
+   */
+  saveTaxAgent = (payload) => {
+    const { onOk } = this.props;
+    const { current } = this.state;
+    this.setState({ loading: true });
+    API.saveTaxAgent(payload).then(({ status, data, errormsg }) => {
+      this.setState({ loading: false });
+      if (status) {
+        message.success("保存成功");
+        this.setState({
+          current: current + 1,
+          taxAgentId: data
+        }, () => onOk());
+      } else {
+        message.error(errormsg || "保存失败");
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+  /*
+   * Author: 黎永顺
+   * Description: 编辑个税扣缴义务人
+   * Params:
+   * Date: 2022/12/1
+   */
+  updateTaxAgent = (payload) => {
+    const { onCancel } = this.props;
+    this.setState({ loading: true });
+    API.updateTaxAgent(payload).then(({ status, data, errormsg }) => {
+      this.setState({ loading: false });
+      if (status) {
+        message.success("更新成功");
+        onCancel(true);
+      } else {
+        message.error(errormsg || "更新失败");
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+
   handleSave = () => {
     const { taxAgentStore: { salarytaxAgentForm } } = this.props;
-    // salarytaxAgentForm.updateFields({
+    const { taxAgentId } = this.state;
-    //   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);
+        const payload = {
+          ...formData,
+          adminUserIds: formData.adminUserIds ? formData.adminUserIds.split(",") : []
+        };
+        taxAgentId ? this.updateTaxAgent({ ...payload, id: taxAgentId }) : this.saveTaxAgent(payload);
       } else {
         f.showErrors();
       }
@@ -62,7 +124,8 @@ class TaxAgentSlide extends Component {
   };
   renderChildren = () => {
     const { current } = this.state;
-    const { decentralization, taxAgentId } = this.props;
+    const { decentralization } = this.props;
+    const { taxAgentId } = this.state;
     let CurrentDom = null;
     switch (current) {
       case 0:
@@ -78,27 +141,30 @@ class TaxAgentSlide extends Component {
     return CurrentDom;
   };
   renderCustomOperate = () => {
-    const { taxAgentId, isChief } = this.props;
+    const { isChief, isEdit } = this.props;
-    const { current, per } = this.state;
+    const { current, loading } = this.state;
     let CurrentDom = [];
     //总管理员权限
     if (isChief) {
       switch (current) {
         case 0:
           CurrentDom = [
-            <Button type="primary" onClick={this.handleSave}>{taxAgentId ? "保存" : "保存并进入下一步"}</Button>
+            <Button type="primary" onClick={this.handleSave}
+                    loading={loading}>{isEdit ? "保存" : "保存并进入下一步"}</Button>
           ];
           break;
         case 1:
           const tmpV = [<Button type="primary">保存并验证</Button>];
           const tmpJ = [
             <Button type="ghost">完成，跳过所有步骤</Button>,
-            <Button type="ghost">下一步</Button>
+            <Button type="ghost" onClick={() => this.setState({ current: current + 1 })}>下一步</Button>
           ];
-          CurrentDom = taxAgentId ? tmpV : [...tmpV, ...tmpJ];
+          CurrentDom = isEdit ? tmpV : [...tmpV, ...tmpJ];
           break;
         case 2:
-          CurrentDom = !taxAgentId ? [<Button type="ghost">上一步</Button>] : [];
+          CurrentDom = !isEdit ?
+            [<Button type="ghost" onClick={() => this.setState({ current: current - 1 })}>上一步</Button>]
+            : [];
           break;
         default:
           break;
@@ -111,8 +177,8 @@ class TaxAgentSlide extends Component {
   };
 
   render() {
-    const { title, visible, onCancel, taxAgentId, taxAgentStore: { showOperateBtn } } = this.props;
+    const { title, visible, onCancel, taxAgentStore: { showOperateBtn } } = this.props;
-    const { current } = this.state;
+    const { current, taxAgentId } = this.state;
     return (
       <WeaSlideModal
         className="slideOuterWrapper"

pc4mobx/hrmSalary/pages/salary/taxAgent.js

@@ -19,6 +19,7 @@ class TaxAgent extends Component {
       decentralization: "0", //启用分权
       permission: {},
       taxAgentSlideProps: {
+        isEdit: false,
         visible: false,
         title: "新增个税扣缴义务人",
         taxAgentId: "",
@@ -115,18 +116,22 @@ class TaxAgent extends Component {
       }
     });
   };
-  handelResetSlide = () => {
+  handelResetSlide = (isUpdate = false) => {
     const { taxAgentStore } = this.props;
     const { salarytaxAgentForm } = taxAgentStore;
     this.setState({
       taxAgentSlideProps: {
         ...this.state.taxAgentSlideProps,
+        isEdit: false,
         visible: false,
         title: "新增个税扣缴义务人",
         taxAgentId: "",
         current: 0
       }
-    }, () => salarytaxAgentForm.resetForm());
+    }, () => {
+      isUpdate && this.taxAgentTableRef.getTaxAgentList();
+      salarytaxAgentForm.resetForm();
+    });
   };
   handleOperate = (type, itemId, current = 0) => {
     switch (type) {
@@ -135,7 +140,7 @@ class TaxAgent extends Component {
           taxAgentSlideProps: {
             ...this.state.taxAgentSlideProps,
             visible: true, title: "编辑个税扣缴义务人",
-            taxAgentId: itemId, current
+            taxAgentId: itemId, current, isEdit: true
           }
         });
         break;
@@ -145,11 +150,12 @@ class TaxAgent extends Component {
   };
 
   render() {
-    const { searchValue, decentralization, taxAgentSlideProps, permission, syncLoading } = this.state;
+    const {
-    const { taxAgentStore: { showOperateBtn } } = this.props;
+      searchValue, decentralization, taxAgentSlideProps,
+      permission, syncLoading
+    } = this.state;
     const btns = [
-      <Button type="primary" disabled={!showOperateBtn} onClick={this.taxAgentRangeSync}
+      <Button type="primary" onClick={this.taxAgentRangeSync} loading={syncLoading}>同步人员范围</Button>,
-              loading={syncLoading}>同步人员范围</Button>,
       <WeaInputSearch
         style={{ width: 220 }}
         value={searchValue}
@@ -194,7 +200,8 @@ class TaxAgent extends Component {
             {...taxAgentSlideProps}
             isChief={permission.isChief}
             decentralization={decentralization} //是否开启分权 0：否 1：是 ;开启分权才有管理员的添加
-            onCancel={this.handelResetSlide}
+            onOk={() => this.taxAgentTableRef.getTaxAgentList()}
+            onCancel={(isUpdate = false) => this.handelResetSlide(isUpdate)}
           />
         </WeaTop>
       </div>