个税对接-薪资账套个税申报字段对应开发

pc4mobx/hrmSalary/apis/index.js

@@ -1,4 +1,5 @@
 import { WeaTools } from "ecCom";
+import { postFetch } from "../util/request";
 
 // form基础数据
 export const getBaseForm = (params) => {
@@ -19,3 +20,8 @@ export const getCondition = (params) => {
 export const getTableDatas = (params) => {
   return WeaTools.callApi("/api/demo03/weatableDemo", "GET", params);
 };
+
+// 薪资账套-浏览按钮数据
+export const commonBrowserData = (params) => {
+  return postFetch("/api/bs/hrmsalary/common/browser/data", params);
+};

pc4mobx/hrmSalary/pages/ledgerPage/components/incomeTaxFields.js

@@ -5,15 +5,20 @@
  * Date: 2023/2/16
  */
 import React, { Component } from "react";
-import { WeaLocaleProvider, WeaSearchGroup } from "ecCom";
+import { WeaHelpfulTip, WeaLocaleProvider, WeaSearchGroup, WeaTab } from "ecCom";
+import LedgerFieldsItemPopver from "./ledgerFieldsItemPopver";
 import { taxreportruleGetForm } from "../../../apis/ledger";
+import LedgerFieldsTable from "./ledgerFieldsTable";
 
 const { getLabel } = WeaLocaleProvider;
 
 class IncomeTaxFields extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      selectedKey: "", tabs: [],
+      incomeTaxFields: [],
+    };
   }
 
   componentDidMount() {
@@ -23,16 +28,97 @@ class IncomeTaxFields extends Component {
   taxreportruleGetForm = () => {
     const { editId, saveSalarySobId } = this.props;
     taxreportruleGetForm({ id: saveSalarySobId || editId }).then(({ status, data }) => {
-      if (status) {
+      if (status && !_.isEmpty(data)) {
-        console.log(data);
+        this.setState({
+          tabs: _.map(data, it => ({ viewcondition: it.incomeCategoryId, title: it.incomeCategoryName })),
+          selectedKey: _.take(data)[0].incomeCategoryId,
+          incomeTaxFields: data
+        });
       }
     });
   };
+  handleChangeSwitch = (visible, id) => {
+    const { incomeTaxFields, selectedKey } = this.state;
+    this.setState({
+      incomeTaxFields: _.map(incomeTaxFields, it => {
+        if (it.incomeCategoryId === selectedKey) {
+          return {
+            ...it,
+            taxReportRules: _.map(it.taxReportRules, child => {
+              if (child.id === id) {
+                return { ...child, visible };
+              }
+              return { ...child, visible: false };
+            })
+          };
+        }
+        return { ...it };
+      })
+    });
+  };
+  handleChangeIncomeFieldsItem = (salaryItem, recordRuleId) => {
+    const { incomeTaxFields, selectedKey } = this.state;
+    this.setState({
+      incomeTaxFields: _.map(incomeTaxFields, it => {
+        if (it.incomeCategoryId === selectedKey) {
+          return {
+            ...it,
+            taxReportRules: _.map(it.taxReportRules, child => {
+              if (child.id === recordRuleId) {
+                return { ...child, visible: false, salaryItem: [salaryItem] };
+              }
+              return { ...child, visible: false };
+            })
+          };
+        }
+        return { ...it };
+      })
+    });
+  };
 
   render() {
+    const { editId, saveSalarySobId } = this.props;
+    const { selectedKey, tabs, incomeTaxFields, visible } = this.state;
+    const dataSource = _.takeWhile(incomeTaxFields, it => it.incomeCategoryId === selectedKey);
     return (
-      <WeaSearchGroup title={<h1>个税申报字段对应</h1>} showGroup needTigger={false}>
+      <WeaSearchGroup
-
+        className="incomeWrapper" showGroup needTigger={false}
+        title={
+          <div className="incomeTitleContail">
+            <WeaTab
+              datas={tabs} keyParam="viewcondition" selectedKey={selectedKey}
+              searchType={["base"]} searchsBasePlaceHolder={getLabel(111, "请输入对象")}
+            />
+          </div>
+        }
+      >
+        <LedgerFieldsTable
+          columns={[
+            {
+              title: <span>
+                <span style={{ marginRight: 8 }}>{getLabel(111, "个税申报表字段")}</span>
+                <WeaHelpfulTip
+                  title={getLabel(111, "若【个税申报表字段】与【对应本账套薪资项目】对应，则申报表内数据为当前账套核算数据，若【个税申报表字段】未与【对应本账套薪资项目】对应，则申报表内数据默认显示为0")}
+                  placement="top" width={250}
+                />
+              </span>,
+              width: "50%",
+              dataIndex: "reportColumnName"
+            },
+            {
+              title: getLabel(111, "对应本账套薪资项目"),
+              width: "50%",
+              dataIndex: "salaryItem",
+              render: (_, record) => (
+                <LedgerFieldsItemPopver salarySobId={saveSalarySobId || editId} record={record}
+                                        onChangeSwitch={this.handleChangeSwitch}
+                                        onChange={this.handleChangeIncomeFieldsItem}
+                />
+              )
+            }
+          ]}
+          dataSource={dataSource}
+        />
       </WeaSearchGroup>
     );
   }

pc4mobx/hrmSalary/pages/ledgerPage/components/index.less

@@ -233,7 +233,6 @@
   color: #55a1f8;
 }
 
-
 .moveModalWrapper {
   .ant-radio-group {
     display: flex;
@@ -244,3 +243,59 @@
     }
   }
 }
+
+//个税申报字段对应
+.incomeWrapper {
+  padding: 0;
+
+  .wea-content {
+    padding: 10px 16px;
+  }
+}
+
+.income_pop_wrapper .ant-popover-inner-content {
+  padding: 8px;
+}
+
+.income_pop_wrapper {
+  width: 180px !important;
+}
+
+.income_result_wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 80px;
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.income_result_wrapper li {
+  line-height: 30px;
+  cursor: pointer;
+}
+
+.income_result_wrapper li:not(.emptyLi):hover {
+  background: #e9f7ff;
+}
+
+.income_result_wrapper li.emptyLi {
+  text-align: center;
+
+  .anticon-inbox {
+    color: #5d9cec;
+    font-size: 24px;
+  }
+}
+
+.incomeSearchGroup {
+  input {
+    border-right: none;
+  }
+
+  button {
+    border-left: none;
+    border-radius: 0;
+    height: 28px;
+    line-height: 28px;
+  }
+}

pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerFieldsItemPopver.js

@@ -0,0 +1,99 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资账套-申报字段对应查询弹框
+ * Description:
+ * Date: 2023/8/16
+ */
+import React, { Component } from "react";
+import { Button, Icon, Input, Popover } from "antd";
+import { WeaLocaleProvider } from "ecCom";
+import { commonBrowserData } from "../../../apis";
+
+const { getLabel } = WeaLocaleProvider;
+const InputGroup = Input.Group;
+
+class LedgerFieldsItemPopver extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataList: [],
+      keywords: ""
+    };
+    this.handleDebounce = null;
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.record !== this.props.record && nextProps.record.visible) {
+      this.commonBrowserData(nextProps);
+    } else {
+      this.setState({ dataList: [] });
+    }
+  }
+
+  commonBrowserData = (props) => {
+    const { salarySobId } = props;
+    const { keywords } = this.state;
+    const payload = {
+      type: "salaryItemBrowser",
+      jsonParam: JSON.stringify({ salarySobId, key: keywords })
+    };
+    commonBrowserData(payload).then(({ status, data }) => {
+      if (status) {
+        const { list: dataList } = data;
+        this.setState({ dataList });
+      }
+    });
+  };
+  handleSearch = () => {
+    if (!this.handleDebounce) {
+      this.handleDebounce = _.debounce(() => {
+        this.commonBrowserData(this.props);
+        this.handleDebounce = null;
+      }, 500);
+    }
+    this.handleDebounce();
+  };
+  handleClickItem = (item) => {
+    this.setState({
+      keywords: item.name
+    }, () => this.props.onChange(item, this.props.record.id));
+  };
+
+  render() {
+    const { keywords, dataList } = this.state;
+    const { record, onChangeSwitch } = this.props;
+    const salaryItemName = record.salaryItem[0] ? record.salaryItem[0].name : "";
+    return (
+      <Popover content={
+        <ul className="income_result_wrapper">
+          {
+            !_.isEmpty(dataList) ?
+              _.map(dataList, it => (<li key={it.key} onClick={() => this.handleClickItem(it)}>{it.name}</li>)) :
+              <li className="emptyLi">
+                <Icon type="inbox"/>
+                <p className="empty-title">{getLabel(83553, "暂无数据")}</p>
+              </li>
+          }
+        </ul>
+      } trigger="click" placement="right" overlayClassName="income_pop_wrapper"
+               visible={record.visible}
+               onVisibleChange={(visible) => onChangeSwitch(visible, record.id)}
+      >
+        <InputGroup className="incomeSearchGroup">
+          <Input placeholder={getLabel(18214, "请选择")} value={keywords}
+                 onFocus={() => onChangeSwitch(true, record.id)} style={{ width: "auto" }}
+                 onChange={(e) => this.setState({ keywords: e.target.value }, () => this.handleSearch())}
+          />
+          <Button icon="search"/>
+        </InputGroup>
+        {/*<WeaInputSearch*/}
+        {/*  style={{ width: 200 }} placeholder={getLabel(18214, "请选择")}*/}
+        {/*  onFocusChange={(visible) => this.setState({ keywords: visible ? "" : salaryItemName }, () => onChangeSwitch(visible, record.id))}*/}
+        {/*  value={keywords} onChange={(keywords) => this.setState({ keywords }, () => this.handleSearch())}*/}
+        {/*/>*/}
+      </Popover>
+    );
+  }
+}
+
+export default LedgerFieldsItemPopver;

pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerFieldsTable.js

@@ -0,0 +1,35 @@
+/*
+ * Author: 黎永顺
+ * name: 个税申报-字段对应查看列表
+ * Description:
+ * Date: 2023/8/16
+ */
+import React, { Component } from "react";
+import { WeaTable } from "ecCom";
+
+class LedgerFieldsTable extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource: []
+    };
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.dataSource !== this.props.dataSource && !_.isEmpty(nextProps.dataSource)) {
+      this.setState({
+        dataSource: _.take(nextProps.dataSource)[0].taxReportRules
+      });
+    }
+  }
+
+  render() {
+    const { columns } = this.props;
+    const { dataSource } = this.state;
+    return (
+      <WeaTable dataSource={dataSource} columns={columns} pagination={false} bordered/>
+    );
+  }
+}
+
+export default LedgerFieldsTable;

pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSlide.js

@@ -6,7 +6,7 @@
  */
 import React, { Component } from "react";
 import { inject, observer } from "mobx-react";
-import { WeaSlideModal, WeaSteps } from "ecCom";
+import { WeaLocaleProvider, WeaSlideModal, WeaSteps } from "ecCom";
 import { Button, message, Modal } from "antd";
 import SlideModalTitle from "../../../components/slideModalTitle";
 import LedgerBaseSetting from "./ledgerBaseSetting";
@@ -15,9 +15,10 @@ import LedgerSalaryAdjustmentRules from "./ledgerSalaryAdjustmentRules";
 import LedgerBackCalculatedSalaryItem from "./ledgerBackCalculatedSalaryItem";
 import LedgerSalaryItem from "./ledgerSalaryItem";
 import IncomeTaxFields from "./incomeTaxFields";
-import { saveAdjustmentRule, saveLedgerBasic, saveLedgerItem } from "../../../apis/ledger";
+import { saveAdjustmentRule, saveLedgerBasic, saveLedgerItem, taxreportruleSave } from "../../../apis/ledger";
 import "./index.less";
 
+const { getLabel } = WeaLocaleProvider;
 const Step = WeaSteps.Step;
 const tabs = [
   { key: 0, title: "基础设置" },
@@ -145,6 +146,45 @@ class LedgerSlide extends Component {
       }
     }).catch(() => this.setState({ loading: false }));
   };
+  /*
+   * Author: 黎永顺
+   * Description:个税申报字段对应-保存
+   * Params:
+   * Date: 2023/8/16
+   */
+  taxreportruleSave = () => {
+    const { editId, saveSalarySobId } = this.props;
+    const { incomeTaxFields, selectedKey } = this.incomeRef.state;
+    const payload = {
+      salarySobId: saveSalarySobId || editId,
+      incomeCategoryParams: _.map(incomeTaxFields, it => {
+        if (it.incomeCategoryId === selectedKey) {
+          return {
+            incomeCategory: it.incomeCategoryId,
+            taxReportRuleParams: _.map(it.taxReportRules, child => {
+              return {
+                reportColumnDataIndex: child.reportColumnDataIndex,
+                salaryItemId: _.map(child.salaryItem, o => o.id).join(",")
+              };
+            })
+          };
+        }
+        return {
+          incomeCategory: it.incomeCategoryId,
+          taxReportRuleParams: []
+        };
+      })
+    };
+    this.setState({ loading: true });
+    taxreportruleSave(payload).then(({ status, errormsg }) => {
+      this.setState({ loading: false });
+      if (status) {
+        message.success(getLabel(22619, "保存成功！"));
+      } else {
+        message.error(errormsg || getLabel(22620, "保存失败！"));
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
   handleChangeSlideTab = (current) => {
     this.setState({ current: Number(current) });
   };
@@ -190,7 +230,8 @@ class LedgerSlide extends Component {
         CurrentDom = null;
         break;
       case 5:
-        CurrentDom = <IncomeTaxFields {...this.props} saveSalarySobId={saveSalarySobId}/>;
+        CurrentDom =
+          <IncomeTaxFields ref={dom => this.incomeRef = dom} {...this.props} saveSalarySobId={saveSalarySobId}/>;
         break;
       case 6:
         CurrentDom =
@@ -278,13 +319,11 @@ class LedgerSlide extends Component {
                 type="primary"
                 loading={loading}
                 onClick={() => {
-                  this.setState({ current: current + 1 }, () => {
+                  this.setState({ current: current + 1 }, () => this.taxreportruleSave());
-                    console.log("个税申报字段对应");
-                  });
                 }}
               >保存并进入下一步</Button>
             ] : [
-              <Button type="primary" loading={loading} onClick={() => console.log("个税申报字段对应")}>保存</Button>
+              <Button type="primary" loading={loading} onClick={this.taxreportruleSave}>保存</Button>
             ];
           break;
         case 6: