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

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);
+};

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>
+  );
+};
+
+

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>
     );
   }

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>
     );

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;
+      }
+    }
+  }
 }