feature/2.10.1.2401.01-个税在线对比

pc4mobx/hrmSalary/pages/declareOnlineComparison/index.js

@@ -5,7 +5,7 @@
  * Date: 2024/1/22
  */
 import React, { Component } from "react";
-import { WeaLocaleProvider, WeaTable, WeaTop } from "ecCom";
+import { WeaCheckbox, WeaLocaleProvider, WeaTable, WeaTop } from "ecCom";
 import { getTaxdeclarationContrastList } from "../../apis/declare";
 import "./index.less";
 
@@ -16,7 +16,8 @@ class Index extends Component {
     super(props);
     this.state = {
       loading: false, dataSource: [], columns: [],
-      pageInfo: { current: 1, pageSize: 10, total: 0 }
+      pageInfo: { current: 1, pageSize: 10, total: 0 },
+      queryParams: { onlyShowDiffEmp: true, onlyShowDiffItem: true }
     };
   }
 
@@ -25,45 +26,53 @@ class Index extends Component {
   }
 
   getTaxdeclarationContrastList = () => {
-    const { pageInfo } = this.state;
+    const { pageInfo, queryParams } = this.state;
     const { params: { taxDeclarationId } } = this.props;
     this.setState({ loading: true });
-    getTaxdeclarationContrastList({ taxDeclarationId, ...pageInfo }).then(({ status, data }) => {
-      this.setState({ loading: false });
-      if (status) {
-        const { columns, pageInfo: result } = data;
-        const { list: dataSource, pageNum: current, pageSize, total } = result;
-        this.setState({
-          dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
-          columns: _.map(columns, o => ({
-            dataIndex: o, title: o, width: 150,
-            render: (__, record) => {
-              return <div className="comparison-column-item-container">
-                <div className="comparison-single-row">
-                  <span>{getLabel(543280, "系统值")}：</span>
-                  <span>{record[o].local}</span>
-                </div>
-                <div className="comparison-single-row">
-                  <span>{getLabel(111, "线上值")}：</span>
-                  <span>{record[o].online}</span>
-                </div>
-                {
-                  !_.isNil(record[o].diff) &&
-                  <div className="comparison-single-row danger">
-                    <span>{getLabel(543282, "差值")}：</span>
-                    <span>{record[o].diff}</span>
+    getTaxdeclarationContrastList({ taxDeclarationId, ...pageInfo, ...queryParams })
+      .then(({ status, data }) => {
+        this.setState({ loading: false });
+        if (status) {
+          const { columns, pageInfo: result } = data;
+          const { list: dataSource, pageNum: current, pageSize, total } = result;
+          this.setState({
+            dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
+            columns: _.map(columns, o => ({
+              dataIndex: o, title: o, width: 150,
+              render: (__, record) => {
+                return <div className="comparison-column-item-container">
+                  <div className="comparison-single-row">
+                    <span>{getLabel(543280, "系统值")}：</span>
+                    <span>{record[o].local}</span>
                   </div>
-                }
-              </div>;
-            }
-          }))
-        });
-      }
-    }).catch(() => this.setState({ loading: false }));
+                  <div className="comparison-single-row">
+                    <span>{getLabel(111, "线上值")}：</span>
+                    <span>{record[o].online}</span>
+                  </div>
+                  {
+                    !_.isNil(record[o].diff) &&
+                    <div className="comparison-single-row danger">
+                      <span>{getLabel(543282, "差值")}：</span>
+                      <span>{record[o].diff}</span>
+                    </div>
+                  }
+                </div>;
+              }
+            }))
+          });
+        }
+      }).catch(() => this.setState({ loading: false }));
+  };
+  handleDiffChange = (key, value) => {
+    const { queryParams } = this.state;
+    this.setState({
+      queryParams: { ...queryParams, [key]: value === "1" }
+    }, () => this.getTaxdeclarationContrastList());
   };
 
   render() {
-    const { loading, columns, dataSource, pageInfo } = this.state;
+    const { loading, columns, dataSource, pageInfo, queryParams } = this.state;
+    const { onlyShowDiffEmp, onlyShowDiffItem } = queryParams;
     const pagination = {
       ...pageInfo,
       showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
@@ -83,7 +92,15 @@ class Index extends Component {
     };
     return (
       <WeaTop title={getLabel(111, "在线对比")} icon={<i className="icon-coms-fa"/>}
-              iconBgcolor="#F14A2D" buttons={[]} buttonSpace={10} showDropIcon={false}
+              iconBgcolor="#F14A2D" buttonSpace={10} showDropIcon={false}
+              buttons={[
+                <WeaCheckbox content={getLabel(543283, "只显示有差异的人员")} value={onlyShowDiffEmp ? 1 : 0}
+                             onChange={v => this.handleDiffChange("onlyShowDiffEmp", v)}
+                />,
+                <WeaCheckbox content={getLabel(543284, "只显示有差异的薪资项目")} value={onlyShowDiffItem ? 1 : 0}
+                             onChange={v => this.handleDiffChange("onlyShowDiffItem", v)}
+                />
+              ]}
       >
         <WeaTable rowKey="id" dataSource={dataSource} pagination={pagination} bordered
                   loading={loading} columns={columns} scroll={{ x: 1200, y: `calc(100vh - 170px)` }}