智能算薪-流量相关功能的开发

2023-08-29 14:21:52 +08:00 · 2023-08-29 14:21:52 +08:00 · 6493e32314
parent a2c1b9969c
commit 6493e32314
5 changed files with 171 additions and 14 deletions
--- a/pc4mobx/hrmSalary/apis/intelligentCalculateSalarySettings.js
+++ b/pc4mobx/hrmSalary/apis/intelligentCalculateSalarySettings.js
@ -29,3 +29,7 @@ export const apiflowRecordList = (params) => {
 export const apiflowStatisticsInfo = (params) => {
  return postFetch("/api/bs/hrmsalary/taxdeclaration/apiflow/statistics/info", params);
 };
+//智能算薪-接口流量使用明细
+export const apiflowStatisticsList = (params) => {
+  return postFetch("/api/bs/hrmsalary/taxdeclaration/apiflow/statistics/list", params);
+};
--- a/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/insufficientTrafficAlert.js
+++ b/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/insufficientTrafficAlert.js
@ -5,7 +5,7 @@
 * Date: 2023/7/19
 */
 import React, { Component } from "react";
-import { WeaCheckbox, WeaFormItem, WeaHelpfulTip, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
+import { WeaCheckbox, WeaFormItem, WeaHelpfulTip, WeaInputNumber, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
 import { Modal } from "antd";
 import { apiflowWarnConfigGetForm } from "../../../apis/intelligentCalculateSalarySettings";

@ -66,7 +66,7 @@ class InsufficientTrafficAlert extends Component {
              label={getLabel(544288, "提醒规则")}
              labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}
            >
-              <WeaCheckbox display="switch"/>
+              <ReminderRules/>
            </WeaFormItem>
            <WeaFormItem
              label={getLabel(544287, "提醒推送方式")}
@ -89,3 +89,19 @@ class InsufficientTrafficAlert extends Component {
 }

 export default InsufficientTrafficAlert;
+
+
+const ReminderRules = (props) => {
+  const { onChange, value } = props;
+  return (
+    <div className="threshold">
+      <span className="before">{getLabel(111, "流量不足")}</span>
+      <WeaInputNumber value={value} onChange={onChange} style={{ width: 180 }}/>
+      <span className="after">{getLabel(111, "时提醒")}</span>
+      <span
+        className="tip">{getLabel(111, "为确保智能算薪正常使用，设置建议:若每个月消耗流量10,000，则不足10,000时提醒，以此预留一个月时间续流量")}</span>
+    </div>
+  );
+};
+
+
--- a/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/interfaceFlowStatistics.js
+++ b/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/interfaceFlowStatistics.js
@ -5,7 +5,11 @@
 * Date: 2023/8/29
 */
 import React, { Component } from "react";
-import { apiflowStatisticsInfo } from "../../../apis/intelligentCalculateSalarySettings";
+import { Button, message } from "antd";
+import { WeaLocaleProvider, WeaTable } from "ecCom";
+import { apiflowStatisticsInfo, apiflowStatisticsList } from "../../../apis/intelligentCalculateSalarySettings";
+
+const getLabel = WeaLocaleProvider.getLabel;

 class InterfaceFlowStatistics extends Component {
  constructor(props) {
@ -15,21 +19,28 @@ class InterfaceFlowStatistics extends Component {
        lastUpdateTime: "",
        staticData: [
          {
-            key: "total", label: "购买接口总流量", value: "", icon: require("../../../common/purchased.png")
+            key: "total",
+            label: getLabel(111, "购买接口总流量"),
+            value: "",
+            icon: require("../../../common/purchased.png")
          },
          {
-            key: "remain", label: "剩余总流量", value: "", icon: require("../../../common/remaining.png")
+            key: "remain", label: getLabel(111, "剩余总流量"), value: "", icon: require("../../../common/remaining.png")
          },
          {
-            key: "used", label: "已使用总流量", value: "", icon: require("../../../common/traffic.png")
+            key: "used", label: getLabel(111, "已使用总流量"), value: "", icon: require("../../../common/traffic.png")
          }
        ]
-      }
+      },
+      columns: [], dataSource: [],
+      pageInfo: { current: 1, pageSize: 10, total: 0 },
+      loading: false
    };
  }

  componentDidMount() {
    this.apiflowStatisticsInfo();
+    this.apiflowStatisticsList();
  }

  apiflowStatisticsInfo = () => {
@ -50,11 +61,57 @@ class InterfaceFlowStatistics extends Component {
      }
    });
  };
+  apiflowStatisticsList = () => {
+    const { pageInfo } = this.state;
+    const payload = { ...pageInfo };
+    this.setState({ loading: true });
+    apiflowStatisticsList(payload).then(({ status, data, errormsg }) => {
+      this.setState({ loading: false });
+      if (status) {
+        const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
+        this.setState({
+          dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
+          columns: _.map(columns, item => {
+            const { dataIndex } = item;
+            let width = "";
+            switch (dataIndex) {
+              case "taxAgentName":
+              case "used":
+                width = "40%";
+                break;
+              default:
+                width = "10%";
+                break;
+            }
+            return { ...item, width };
+          })
+        });
+      } else {
+        message.error(errormsg);
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };

  render() {
-    const { statisticsInfo } = this.state;
+    const { statisticsInfo, pageInfo, loading, dataSource, columns } = this.state;
    const { staticData } = statisticsInfo;
-
+    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.apiflowStatisticsList());
+      },
+      onChange: current => {
+        this.setState({
+          pageInfo: { ...pageInfo, current }
+        }, () => this.apiflowStatisticsList());
+      }
+    };
    return (
      <div className="statisticsInfo-layout">
        <div className="static-data">
@ -73,7 +130,23 @@ class InterfaceFlowStatistics extends Component {
            })
          }
        </div>
-        <div className="detail-area"></div>
+        <div className="detail-area">
+          <div className="title">
+            <div className="text">{getLabel(111, "使用明细")}</div>
+            <Button type="primary">{getLabel(81272, "导出全部")}</Button>
+          </div>
+          <WeaTable
+            dataSource={dataSource} pagination={pagination} loading={loading}
+            columns={[
+              ...columns,
+              {
+                title: getLabel(30585, "操作"), dataIndex: "operate",
+                render: () => (<a href="">{getLabel(111, "月统计详情")}</a>)
+              }
+            ]}
+            scroll={{ y: `calc(100vh - 190px)` }}
+          />
+        </div>
      </div>
    );
  }
--- a/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/trafficUsageRecords.js
+++ b/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/trafficUsageRecords.js
@ -72,14 +72,37 @@ class TrafficUsageRecords extends Component {
    apiflowRecordList(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
-        console.log(data);
+        const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
+        this.setState({
+          dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
+          columns: _.map(columns, item => {
+            const { dataIndex } = item;
+            let width = "";
+            switch (dataIndex) {
+              case "indexNum":
+              case "taxAgentName":
+              case "employeeName":
+              case "businessTypeName":
+              case "creator":
+              case "result":
+                width = "10%";
+                break;
+              case "idCardNo":
+                width = "20%";
+                break;
+              default:
+                break;
+            }
+            return { ...item, width };
+          })
+        });
      }
    }).catch(() => this.setState({ loading: false }));
  };

  render() {
    const { intelligentStore: { form } } = this.props;
-    const { conditions, loading, pageInfo } = this.state;
+    const { conditions, loading, pageInfo, dataSource, columns } = this.state;
    const pagination = {
      ...pageInfo,
      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
@ -101,9 +124,9 @@ class TrafficUsageRecords extends Component {
      <div className="trafficUsageRecords-layout">
        <div className="head">{getSearchs(form, conditions, 4, false, this.apiflowRecordList)}</div>
        <WeaTable
-          columns={[]} dataSource={[]}
+          columns={columns} dataSource={dataSource}
          pagination={pagination} loading={loading}
-          scroll={{ y: `calc(100vh - 190px)` }}
+          scroll={{ y: `calc(100vh - 226px)` }}
        />
      </div>
    );
--- a/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/index.less
+++ b/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/index.less
@ -68,6 +68,26 @@
      border-bottom: 1px solid #f2f2f2;
    }
  }
+
+  .threshold {
+    display: flex;
+    align-items: center;
+
+    .before {
+      margin-right: 6px;
+    }
+
+    .after {
+      margin-left: 6px;
+      margin-right: 16px;
+    }
+
+    .tip {
+      display: inline-block;
+      color: #999;
+      padding: 6px 0;
+    }
+  }
 }

 .trafficUsageRecords-layout {
@ -120,6 +140,11 @@
        flex-direction: column;
        justify-content: center;

+        .data {
+          color: #111;
+          font-size: 14px;
+        }
+
        .title {
          margin-top: 8px;
          color: #999;
@ -128,4 +153,20 @@
      }
    }
  }
+
+  .detail-area {
+    margin-top: 8px;
+
+    .title {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .text {
+        font-size: 14px;
+        color: #111;
+      }
+    }
+  }
 }