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

2023-08-17 11:46:45 +08:00 · 2023-08-17 11:46:45 +08:00 · acc4654e76
parent acadba0946
commit acc4654e76
7 changed files with 341 additions and 29 deletions
--- a/pc4mobx/hrmSalary/apis/ledger.js
+++ b/pc4mobx/hrmSalary/apis/ledger.js
@ -330,10 +330,14 @@ export const getAggregate = params => {
 export const getBackitemForm = params => {
  return WeaTools.callApi("/api/bs/hrmsalary/salarysob/backitem/getForm", "GET", params);
 };
-//薪资账套下的个税申报表规则的详情
+//薪资账套下的个税申报表-申报字段对应
 export const taxreportruleGetForm = params => {
  return WeaTools.callApi("/api/bs/hrmsalary/salarysob/taxreportrule/getForm", "GET", params);
 };
+//薪资账套下的个税申报-累计字段对应
+export const addupruleGetForm = params => {
+  return WeaTools.callApi("/api/bs/hrmsalary/salarysob/adduprule/getForm", "GET", params);
+};
 //保存薪资账套下的个税申报表规则
 export const taxreportruleSave = params => {
  return postFetch("/api/bs/hrmsalary/salarysob/taxreportrule/save", params);
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/cumulativeFields.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/cumulativeFields.js
@ -0,0 +1,120 @@
+/*
+ * Author: 黎永顺
+ * name: 个税对接-累计字段对应
+ * Description:
+ * Date: 2023/8/17
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider, WeaSearchGroup, WeaTab } from "ecCom";
+import LedgerFieldsItemPopver from "./ledgerFieldsItemPopver";
+import { addupruleGetForm } from "../../../apis/ledger";
+import LedgerFieldsTable from "./ledgerFieldsTable";
+
+const { getLabel } = WeaLocaleProvider;
+
+class CumulativeFields extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedKey: "", tabs: [],
+      addupruleFields: []
+    };
+  }
+
+  componentDidMount() {
+    this.taxreportruleGetForm();
+  }
+
+  taxreportruleGetForm = () => {
+    const { editId, saveSalarySobId } = this.props;
+    addupruleGetForm({ id: saveSalarySobId || editId }).then(({ status, data }) => {
+      if (status && !_.isEmpty(data)) {
+        this.setState({
+          tabs: _.map(data, it => ({ viewcondition: it.incomeCategoryId, title: it.incomeCategoryName })),
+          selectedKey: _.take(data)[0].incomeCategoryId,
+          addupruleFields: data
+        });
+      }
+    });
+  };
+  handleChangeSwitch = (visible, id) => {
+    const { addupruleFields, selectedKey } = this.state;
+    this.setState({
+      addupruleFields: _.map(addupruleFields, 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 };
+      })
+    });
+  };
+  handleChangeAddupruleFieldsItem = (salaryItem, recordRuleId) => {
+    const { addupruleFields, selectedKey } = this.state;
+    this.setState({
+      addupruleFields: _.map(addupruleFields, it => {
+        if (it.incomeCategoryId === selectedKey) {
+          return {
+            ...it,
+            taxReportRules: _.map(it.taxReportRules, child => {
+              if (child.id === recordRuleId) {
+                return { ...child, visible: false, salaryItem };
+              }
+              return { ...child, visible: false };
+            })
+          };
+        }
+        return { ...it };
+      })
+    });
+  };
+
+  render() {
+    const { editId, saveSalarySobId } = this.props;
+    const { selectedKey, tabs, addupruleFields } = this.state;
+    const dataSource = _.takeWhile(addupruleFields, it => it.incomeCategoryId === selectedKey);
+    return (
+      <WeaSearchGroup
+        className="incomeWrapper" showGroup needTigger={false}
+        title={
+          <div className="incomeTitleContail">
+            <WeaTab
+              datas={tabs} keyParam="viewcondition" selectedKey={selectedKey}
+            />
+          </div>
+        }
+      >
+        <LedgerFieldsTable
+          columns={[
+            {
+              title: getLabel(111, "往期累计情况字段"),
+              width: "50%",
+              dataIndex: "reportColumnName"
+            },
+            {
+              title: getLabel(111, "对应本账套薪资项目"),
+              width: "50%",
+              dataIndex: "salaryItem",
+              render: (_, record) => (
+                <LedgerFieldsItemPopver salarySobId={saveSalarySobId || editId} record={record}
+                                        onChangeSwitch={this.handleChangeSwitch}
+                                        onChange={this.handleChangeAddupruleFieldsItem}
+                />
+              )
+            }
+          ]}
+          dataSource={dataSource}
+        />
+      </WeaSearchGroup>
+    );
+  }
+}
+
+export default CumulativeFields;
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/incomeTaxFields.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/incomeTaxFields.js
@ -17,7 +17,7 @@ class IncomeTaxFields extends Component {
    super(props);
    this.state = {
      selectedKey: "", tabs: [],
-      incomeTaxFields: []
+      incomeTaxFields: [], keywords: ""
    };
  }

@ -78,8 +78,17 @@ class IncomeTaxFields extends Component {

  render() {
    const { editId, saveSalarySobId } = this.props;
-    const { selectedKey, tabs, incomeTaxFields, visible } = this.state;
-    const dataSource = _.takeWhile(incomeTaxFields, it => it.incomeCategoryId === selectedKey);
+    const { selectedKey, tabs, incomeTaxFields, keywords } = this.state;
+    const list = _.map(incomeTaxFields, it => {
+      if (it.incomeCategoryId === selectedKey) {
+        return {
+          ...it,
+          taxReportRules: _.filter(it.taxReportRules, item => item.reportColumnName.indexOf(keywords) !== -1)
+        };
+      }
+      return { ...it };
+    });
+    const dataSource = _.takeWhile(list, it => it.incomeCategoryId === selectedKey);
    return (
      <WeaSearchGroup
        className="incomeWrapper" showGroup needTigger={false}
@ -88,6 +97,7 @@ class IncomeTaxFields extends Component {
            <WeaTab
              datas={tabs} keyParam="viewcondition" selectedKey={selectedKey}
              searchType={["base"]} searchsBasePlaceHolder={getLabel(111, "请输入对象")}
+              onSearch={val => this.setState({ keywords: val })}
            />
          </div>
        }
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/index.less
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/index.less
@ -299,3 +299,28 @@
    line-height: 28px;
  }
 }
+
+.incomeDialog {
+  .incomeDialogTitle {
+    display: flex;
+    align-items: center;
+
+    .incomeDialogTitle-left {
+      text-align: left;
+
+      .title {
+        color: #111;
+        font-weight: 700;
+      }
+    }
+
+    .incomeDialogTitle-right {
+      text-align: right;
+    }
+  }
+
+  .incomeDialogContent {
+    height: 100%;
+    padding: 16px;
+  }
+}
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerFieldsItemPopver.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerFieldsItemPopver.js
@ -8,6 +8,7 @@ import React, { Component } from "react";
 import { Icon, Popover } from "antd";
 import { WeaInputSearch, WeaLocaleProvider } from "ecCom";
 import { commonBrowserData } from "../../../apis";
+import LedgerSalaryItemSelectDialog from "./ledgerSalaryItemSelectDialog";

 const { getLabel } = WeaLocaleProvider;

@ -16,7 +17,10 @@ class LedgerFieldsItemPopver extends Component {
    super(props);
    this.state = {
      dataList: [],
-      keywords: ""
+      keywords: "",
+      salaryItemSelectDialog: {
+        visible: false, salarySobId: ""
+      }
    };
    this.handleDebounce = null;
  }
@ -73,31 +77,59 @@ class LedgerFieldsItemPopver extends Component {
  };

  render() {
-    const { keywords, dataList } = this.state;
-    const { record, onChangeSwitch } = this.props;
+    const { keywords, dataList, salaryItemSelectDialog } = this.state;
+    const { record, onChangeSwitch, salarySobId } = this.props;
    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)}
-      >
-        <WeaInputSearch
-          style={{ width: 200 }} placeholder={getLabel(18214, "请选择")}
-          onFocusChange={this.handleFocusChange}
-          value={keywords} onSearchChange={this.handleChange}
-          onSearch={() => alert(1)}
+      <React.Fragment>
+        <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)}
+        >
+          <WeaInputSearch
+            style={{ width: 200 }} placeholder={getLabel(18214, "请选择")}
+            onFocusChange={this.handleFocusChange}
+            value={keywords} onSearchChange={this.handleChange}
+            onSearch={() => this.setState({
+              salaryItemSelectDialog: {
+                ...salaryItemSelectDialog,
+                visible: true,
+                salarySobId
+              }
+            })}
+          />
+        </Popover>
+        <LedgerSalaryItemSelectDialog
+          {...salaryItemSelectDialog}
+          handleClickItem={this.handleClickItem}
+          handleClearSalaryItem={() => {
+            this.setState({
+              salaryItemSelectDialog: {
+                ...salaryItemSelectDialog,
+                visible: false,
+                salarySobId: ""
+              }
+            }, () => this.props.onChange([], this.props.record.id));
+          }}
+          onCancel={() => this.setState({
+            salaryItemSelectDialog: {
+              ...salaryItemSelectDialog,
+              visible: false,
+              salarySobId: ""
+            }
+          })}
        />
-      </Popover>
+      </React.Fragment>
    );
  }
 }
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemSelectDialog.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemSelectDialog.js
@ -0,0 +1,119 @@
+/*
+ * Author: 黎永顺
+ * name: 个税对应字段-薪资项目选择弹框
+ * Description:
+ * Date: 2023/8/17
+ */
+import React, { Component } from "react";
+import { WeaDialog, WeaInputSearch, WeaLocaleProvider } from "ecCom";
+import { Button, Col, Row, Table } from "antd";
+import { commonBrowserData } from "../../../apis";
+
+const { getLabel } = WeaLocaleProvider;
+
+class LedgerSalaryItemSelectDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      pageInfo: { current: 1, pageSize: 10, total: 0 },
+      loading: false, columns: [], dataSource: [],
+      keywords: ""
+    };
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.visible !== this.props.visible && nextProps.visible) this.commonBrowserData(nextProps);
+  }
+
+  commonBrowserData = (props) => {
+    const { salarySobId } = props;
+    const { keywords, pageInfo } = this.state;
+    const payload = {
+      type: "salaryItemBrowser",
+      jsonParam: JSON.stringify({ salarySobId, key: keywords }),
+      ...pageInfo
+    };
+    this.setState({ loading: true });
+    commonBrowserData(payload).then(({ status, data }) => {
+      this.setState({ loading: false });
+      if (status) {
+        const { list: dataSource, columns, pageNum: current, pageSize, total } = data;
+        this.setState({
+          dataSource, columns,
+          pageInfo: { ...pageInfo, current, pageSize, total }
+        });
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+  handleRowClick = (record) => {
+    this.props.onCancel();
+    this.props.handleClickItem(record);
+  };
+
+  render() {
+    const { loading, columns, dataSource, pageInfo, keywords } = this.state;
+    const pagination = {
+      ...pageInfo,
+      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      pageSizeOptions: ["10", "20", "50", "100"],
+      onShowSizeChange: (current, pageSize) => {
+        this.setState({
+          pageInfo: { ...pageInfo, current, pageSize }
+        }, () => this.commonBrowserData(this.props));
+      },
+      onChange: current => {
+        this.setState({
+          pageInfo: { ...pageInfo, current }
+        }, () => this.commonBrowserData(this.props));
+      }
+    };
+    return (
+      <WeaDialog
+        {...this.props} hasScroll className="incomeDialog" initLoadCss
+        buttons={[
+          <Button type="primary" onClick={this.props.handleClearSalaryItem}>{getLabel(111, "清除")}</Button>
+        ]}
+        title={(<Row className="incomeDialogTitle" type="flex">
+          <Col span={12} className="incomeDialogTitle-left">
+            <span className="title">{getLabel(543598, "请选择薪资项目")}</span>
+          </Col>
+          <Col span={12} className="incomeDialogTitle-right">
+            <Button type="ghost" icon="reload" title={getLabel(111, "刷新")} onClick={() => {
+              this.setState({
+                keywords: "",
+                pageInfo: { ...pageInfo, current: 1 }
+              }, () => this.commonBrowserData(this.props));
+            }}/>
+          </Col>
+        </Row>)}
+        style={{
+          width: 600,
+          height: 606.6,
+          minHeight: 200,
+          minWidth: 380,
+          maxHeight: "90%",
+          maxWidth: "90%",
+          overflow: "hidden",
+          transform: "translate(0px, 0px)"
+        }}
+      >
+        <div className="incomeDialogContent">
+          <WeaInputSearch
+            style={{ width: "100%", margin: "6px 0" }} placeholder={getLabel(500351, "请输入关键字")}
+            value={keywords} onChange={val => this.setState({ keywords: val })}
+            onSearch={() => this.commonBrowserData(this.props)}
+          />
+          <Table
+            showHeader={false} dataSource={dataSource}
+            loading={loading} pagination={pagination}
+            columns={columns} onRowClick={this.handleRowClick}
+          />
+        </div>
+      </WeaDialog>
+    );
+  }
+}
+
+export default LedgerSalaryItemSelectDialog;
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSlide.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSlide.js
@ -15,6 +15,7 @@ import LedgerSalaryAdjustmentRules from "./ledgerSalaryAdjustmentRules";
 import LedgerBackCalculatedSalaryItem from "./ledgerBackCalculatedSalaryItem";
 import LedgerSalaryItem from "./ledgerSalaryItem";
 import IncomeTaxFields from "./incomeTaxFields";
+import CumulativeFields from "./cumulativeFields";
 import { saveAdjustmentRule, saveLedgerBasic, saveLedgerItem, taxreportruleSave } from "../../../apis/ledger";
 import "./index.less";

@ -227,7 +228,8 @@ class LedgerSlide extends Component {
        CurrentDom = <LedgerBackCalculatedSalaryItem {...this.props} saveSalarySobId={saveSalarySobId}/>;
        break;
      case 4:
-        CurrentDom = null;
+        CurrentDom =
+          <CumulativeFields ref={dom => this.cumulativeRef = dom} {...this.props} saveSalarySobId={saveSalarySobId}/>;
        break;
      case 5:
        CurrentDom =