智能算薪-其他三个tab下的配置开发

2023-08-29 11:34:45 +08:00 · 2023-08-29 11:34:45 +08:00 · a2c1b9969c
parent 85ab345651
commit a2c1b9969c
14 changed files with 475 additions and 70 deletions
--- a/pc4mobx/hrmSalary/apis/intelligentCalculateSalarySettings.js
+++ b/pc4mobx/hrmSalary/apis/intelligentCalculateSalarySettings.js
@ -17,3 +17,15 @@ export const apiflowBillingConfigSave = (params) => {
 export const apiflowBillingConfigEnable = (params) => {
  return postFetch("/api/bs/hrmsalary/taxdeclaration/apiflow/billing/config/enable", params);
 };
+//智能算薪-流量不足提醒初始化表单
+export const apiflowWarnConfigGetForm = (params) => {
+  return WeaTools.callApi("/api/bs/hrmsalary/taxdeclaration/apiflow/warn/config/getForm", "GET", params);
+};
+//智能算薪-接口流量使用记录
+export const apiflowRecordList = (params) => {
+  return postFetch("/api/bs/hrmsalary/taxdeclaration/apiflow/record/list", params);
+};
+//智能算薪-接口流量使用记录
+export const apiflowStatisticsInfo = (params) => {
+  return postFetch("/api/bs/hrmsalary/taxdeclaration/apiflow/statistics/info", params);
+};
--- a/pc4mobx/hrmSalary/common/purchased.png
+++ b/pc4mobx/hrmSalary/common/purchased.png
--- a/pc4mobx/hrmSalary/common/remaining.png
+++ b/pc4mobx/hrmSalary/common/remaining.png
--- a/pc4mobx/hrmSalary/common/traffic.png
+++ b/pc4mobx/hrmSalary/common/traffic.png
--- a/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/constants.js
+++ b/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/constants.js
@ -0,0 +1,55 @@
+export const trafficUsageConditions = [
+  {
+    items: [
+      {
+        colSpan: 1,
+        conditionType: "RANGEPICKER",
+        domkey: ["startDate", "endDate"],
+        fieldcol: 22,
+        label: "",
+        labelcol: 0,
+        value: ""
+      },
+      {
+        colSpan: 1,
+        conditionType: "SELECT",
+        domkey: ["taxAgentId"],
+        fieldcol: 22,
+        label: "",
+        labelcol: 0,
+        value: "",
+        options: []
+      },
+      {
+        colSpan: 1,
+        conditionType: "SELECT",
+        domkey: ["businessType"],
+        fieldcol: 22,
+        label: "",
+        labelcol: 0,
+        value: "",
+        options: [
+          { key: "", showname: "全部(接口业务)", lanId: 111 },
+          { key: "1", showname: "累计专项附加扣除", lanId: 538006 },
+          { key: "2", showname: "人员信息报送", lanId: 544289 },
+          { key: "3", showname: "个税申报", lanId: 543353 }
+        ]
+      },
+      {
+        colSpan: 1,
+        conditionType: "SELECT",
+        domkey: ["result"],
+        fieldcol: 22,
+        label: "",
+        labelcol: 0,
+        value: "",
+        options: [
+          { key: "", showname: "全部(结果)", lanId: 111 },
+          { key: "20", showname: "成功", lanId: 111 },
+          { key: "30", showname: "失败", lanId: 25009 }
+        ]
+      }
+    ],
+    defaultshow: true
+  }
+];
--- a/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/enableSettings.js
+++ b/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/enableSettings.js
@ -13,7 +13,6 @@ import {
  apiflowBillingConfigGet,
  apiflowBillingConfigSave
 } from "../../../apis/intelligentCalculateSalarySettings";
-import "./index.less";

 const getLabel = WeaLocaleProvider.getLabel;

--- a/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/index.less
+++ b/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/index.less
@ -1,58 +0,0 @@
-.enable-settings {
-  .swith-area, .userinfo {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 16px;
-    background-color: #fff;
-    box-sizing: border-box;
-    height: 80px;
-    border: 2px solid #e5e5e5;
-    border-left-color: #5d9cec;
-
-    .left {
-      padding: 10px 0;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-
-      .title {
-        font-size: 14px;
-        margin-bottom: 4px;
-      }
-
-      .info {
-        font-size: 12px;
-        color: #999;
-      }
-    }
-  }
-
-  .userinfo {
-    margin-top: 16px;
-
-    .left {
-      flex: 1 !important;
-
-      .wea-search-group, .wea-form-cell {
-        padding: 0;
-      }
-    }
-  }
-}
-
-.insufficientAlertWrapper {
-  background: #fff;
-  padding: 0;
-  border: 1px solid #f2f2f2;
-  border-bottom: none;
-
-  .wea-content {
-    padding: 0;
-
-    .wea-form-item {
-      padding: 5px 12px;
-      border-bottom: 1px solid #f2f2f2;
-    }
-  }
-}
--- a/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/insufficientTrafficAlert.js
+++ b/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/insufficientTrafficAlert.js
@ -6,7 +6,8 @@
 */
 import React, { Component } from "react";
 import { WeaCheckbox, WeaFormItem, WeaHelpfulTip, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
-import "./index.less";
+import { Modal } from "antd";
+import { apiflowWarnConfigGetForm } from "../../../apis/intelligentCalculateSalarySettings";

 const getLabel = WeaLocaleProvider.getLabel;

@ -14,19 +15,52 @@ class InsufficientTrafficAlert extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      remind: "0"
+      enable: "0",
+      remindEvent: { businessId: "", eventId: "", moduleId: "", id: "" }
    };
  }

+  componentDidMount() {
+    this.apiflowWarnConfigGetForm();
+  }
+
+  apiflowWarnConfigGetForm = () => {
+    const { remindEvent } = this.state;
+    apiflowWarnConfigGetForm().then(({ status, data }) => {
+      if (status) {
+        const { enable, businessId, eventId, moduleId, id } = data;
+        this.setState({
+          enable: enable ? "1" : "0",
+          remindEvent: { ...remindEvent, businessId, eventId, moduleId, id }
+        });
+      }
+    });
+  };
+  handleEnale = (enable) => {
+    if (enable === "1") {
+      this.setState({ enable });
+    } else {
+      Modal.confirm({
+        title: getLabel(131329, "信息确认"),
+        content: getLabel(111, "确认关闭提醒吗？关闭并保存后，流量不足时将无法及时提醒。"),
+        onOk: () => {
+        },
+        onCancel: () => {
+          this.setState({ enable: this.state.enable });
+        }
+      });
+    }
+  };
+
  render() {
-    const { remind } = this.state;
+    const { enable } = this.state;
    return (
      <WeaSearchGroup showGroup needTigger={false} className="insufficientAlertWrapper">
        <WeaFormItem label={getLabel(501480, "提醒")} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
-          <WeaCheckbox display="switch" value={remind} onChange={remind => this.setState({ remind })}/>
+          <WeaCheckbox display="switch" value={enable} onChange={this.handleEnale}/>
        </WeaFormItem>
        {
-          remind === "1" &&
+          enable === "1" &&
          <React.Fragment>
            <WeaFormItem
              label={getLabel(544288, "提醒规则")}
--- a/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/interfaceFlowStatistics.js
+++ b/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/interfaceFlowStatistics.js
@ -0,0 +1,82 @@
+/*
+ * Author: 黎永顺
+ * name: 智能算薪-接口流量统计
+ * Description:
+ * Date: 2023/8/29
+ */
+import React, { Component } from "react";
+import { apiflowStatisticsInfo } from "../../../apis/intelligentCalculateSalarySettings";
+
+class InterfaceFlowStatistics extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      statisticsInfo: {
+        lastUpdateTime: "",
+        staticData: [
+          {
+            key: "total", label: "购买接口总流量", value: "", icon: require("../../../common/purchased.png")
+          },
+          {
+            key: "remain", label: "剩余总流量", value: "", icon: require("../../../common/remaining.png")
+          },
+          {
+            key: "used", label: "已使用总流量", value: "", icon: require("../../../common/traffic.png")
+          }
+        ]
+      }
+    };
+  }
+
+  componentDidMount() {
+    this.apiflowStatisticsInfo();
+  }
+
+  apiflowStatisticsInfo = () => {
+    const { statisticsInfo } = this.state;
+    apiflowStatisticsInfo().then(({ status, data }) => {
+      if (status) {
+        const { lastUpdateTime, ...extraData } = data;
+        this.setState({
+          statisticsInfo: {
+            ...statisticsInfo,
+            lastUpdateTime,
+            staticData: _.map(statisticsInfo.staticData, item => ({
+              ...item,
+              value: extraData[item["key"]]
+            }))
+          }
+        }, () => this.props.updateTime(this.state.statisticsInfo));
+      }
+    });
+  };
+
+  render() {
+    const { statisticsInfo } = this.state;
+    const { staticData } = statisticsInfo;
+
+    return (
+      <div className="statisticsInfo-layout">
+        <div className="static-data">
+          {
+            _.map(staticData, item => {
+              const { label, icon, value } = item;
+              return (
+                <div className="item">
+                  <div className="left"><img src={icon} alt=""/></div>
+                  <div className="right">
+                    <div className="data">{value}</div>
+                    <div className="title">{label}</div>
+                  </div>
+                </div>
+              );
+            })
+          }
+        </div>
+        <div className="detail-area"></div>
+      </div>
+    );
+  }
+}
+
+export default InterfaceFlowStatistics;
--- a/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/trafficUsageRecords.js
+++ b/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/trafficUsageRecords.js
@ -0,0 +1,113 @@
+/*
+ * Author: 黎永顺
+ * name: 智能算薪-流量使用记录
+ * Description:
+ * Date: 2023/8/28
+ */
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import { WeaLocaleProvider, WeaTable } from "ecCom";
+import { trafficUsageConditions } from "./constants";
+import { getSearchs } from "../../../util";
+import moment from "moment";
+import { apiflowRecordList } from "../../../apis/intelligentCalculateSalarySettings";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+@inject("taxAgentStore", "intelligentStore")
+@observer
+class TrafficUsageRecords extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      conditions: [], columns: [], dataSource: [],
+      pageInfo: { current: 1, pageSize: 10, total: 0 },
+      loading: false
+    };
+  }
+
+  componentDidMount() {
+    const { taxAgentStore: { fetchTaxAgentOption }, intelligentStore: { form } } = this.props;
+    fetchTaxAgentOption().then(({ data }) => {
+      this.setState({
+        conditions: _.map(trafficUsageConditions, item => {
+          return {
+            ...item,
+            items: _.map(item.items, o => {
+              if (o.conditionType === "SELECT" && o.domkey[0] === "taxAgentId") {
+                return {
+                  ...o,
+                  options: [
+                    { key: "", showname: getLabel(111, "全部(个税扣缴义务人)") },
+                    ..._.map(data, (i) => ({ key: i.id, showname: i.content }))
+                  ]
+                };
+              } else if (o.conditionType === "SELECT" && o.domkey[0] !== "taxAgentId") {
+                return {
+                  ...o,
+                  options: _.map(o.options, it => ({ ...it, showname: getLabel(it.lanId, it.showname) }))
+                };
+              }
+              return { ...o };
+            })
+          };
+        })
+      }, () => {
+        form.initFormFields(this.state.conditions);
+        form.updateFields({
+          ["startDate__endDate"]: {
+            value: [moment().startOf("month").format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")]
+          }
+        });
+        this.apiflowRecordList();
+      });
+    });
+  }
+
+  apiflowRecordList = () => {
+    const { pageInfo } = this.state;
+    const { intelligentStore: { form } } = this.props;
+    const payload = { ...form.getFormParams(), ...pageInfo };
+    this.setState({ loading: true });
+    apiflowRecordList(payload).then(({ status, data }) => {
+      this.setState({ loading: false });
+      if (status) {
+        console.log(data);
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+
+  render() {
+    const { intelligentStore: { form } } = this.props;
+    const { conditions, loading, pageInfo } = 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.apiflowRecordList());
+      },
+      onChange: current => {
+        this.setState({
+          pageInfo: { ...pageInfo, current }
+        }, () => this.apiflowRecordList());
+      }
+    };
+    return (
+      <div className="trafficUsageRecords-layout">
+        <div className="head">{getSearchs(form, conditions, 4, false, this.apiflowRecordList)}</div>
+        <WeaTable
+          columns={[]} dataSource={[]}
+          pagination={pagination} loading={loading}
+          scroll={{ y: `calc(100vh - 190px)` }}
+        />
+      </div>
+    );
+  }
+}
+
+export default TrafficUsageRecords;
--- a/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/index.js
+++ b/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/index.js
@ -1,21 +1,25 @@
 import React, { Component } from "react";
 import { WeaLocaleProvider, WeaReqTop } from "ecCom";
+import { Button } from "antd";
 import EnableSettings from "./components/enableSettings";
 import InsufficientTrafficAlert from "./components/insufficientTrafficAlert";
+import TrafficUsageRecords from "./components/trafficUsageRecords";
+import InterfaceFlowStatistics from "./components/interfaceFlowStatistics";
+import "./index.less";

 const getLabel = WeaLocaleProvider.getLabel;
 const tabs = [
  { key: "ENABLE_SETTINGS", title: getLabel(111, "启用设置") },
-  // { key: "INTERFACE_FLOW_STATISTICS", title: getLabel(111, "接口流量统计") },
-  // { key: "INSUFFICIENT_TRAFFIC_ALERT", title: getLabel(111, "流量不足提醒") },
-  // { key: "TRAFFIC_USAGE_RECORD", title: getLabel(111, "流量使用记录") }
+  { key: "INTERFACE_FLOW_STATISTICS", title: getLabel(111, "接口流量统计") },
+  { key: "INSUFFICIENT_TRAFFIC_ALERT", title: getLabel(111, "流量不足提醒") },
+  { key: "TRAFFIC_USAGE_RECORD", title: getLabel(111, "流量使用记录") }
 ];

 class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      selectedKey: "ENABLE_SETTINGS"
+      selectedKey: "ENABLE_SETTINGS", lastUpdateTime: ""
    };
  }

@ -26,9 +30,16 @@ class Index extends Component {
      case "ENABLE_SETTINGS":
        CurrentDom = <EnableSettings/>;
        break;
+      case "INTERFACE_FLOW_STATISTICS":
+        CurrentDom =
+          <InterfaceFlowStatistics updateTime={(data) => this.setState({ lastUpdateTime: data.lastUpdateTime })}/>;
+        break;
      case "INSUFFICIENT_TRAFFIC_ALERT":
        CurrentDom = <InsufficientTrafficAlert/>;
        break;
+      case "TRAFFIC_USAGE_RECORD":
+        CurrentDom = <TrafficUsageRecords/>;
+        break;
      default:
        CurrentDom = null;
        break;
@ -37,12 +48,23 @@ class Index extends Component {
  };

  render() {
-    const { selectedKey } = this.state;
+    const { selectedKey, lastUpdateTime } = this.state;
+    const buttons = selectedKey === "INSUFFICIENT_TRAFFIC_ALERT" ?
+      [<Button type="primary">{getLabel(537558, "保存")}</Button>] :
+      selectedKey === "TRAFFIC_USAGE_RECORD" ?
+        [<Button type="primary">{getLabel(17416, "导出")}</Button>] :
+        selectedKey === "INTERFACE_FLOW_STATISTICS" ? [
+          <span className="statistic-time">
+            <span className="label">{getLabel(111, "最后统计时间：")}</span>
+            <span className="value">{lastUpdateTime}</span>
+          </span>
+        ] : [];
    return (
      <WeaReqTop
        title={getLabel(111, "智能算薪")} selectedKey={selectedKey}
        icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
        tabDatas={tabs} onChange={selectedKey => this.setState({ selectedKey })}
+        buttons={buttons} className="intelligentSetting-layout"
      >
        <div style={{ height: "100%", background: "#f6f6f6", padding: 16 }}>{this.renderChildren()}</div>
      </WeaReqTop>
--- a/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/index.less
+++ b/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/index.less
@ -0,0 +1,131 @@
+.intelligentSetting-layout {
+  .wea-new-top-req-title > div:last-child {
+    right: 16px !important;
+  }
+
+  .statistic-time {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    font-size: 12px;
+  }
+}
+
+.enable-settings {
+  .swith-area, .userinfo {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    background-color: #fff;
+    box-sizing: border-box;
+    height: 80px;
+    border: 2px solid #e5e5e5;
+    border-left-color: #5d9cec;
+
+    .left {
+      padding: 10px 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+
+      .title {
+        font-size: 14px;
+        margin-bottom: 4px;
+      }
+
+      .info {
+        font-size: 12px;
+        color: #999;
+      }
+    }
+  }
+
+  .userinfo {
+    margin-top: 16px;
+
+    .left {
+      flex: 1 !important;
+
+      .wea-search-group, .wea-form-cell {
+        padding: 0;
+      }
+    }
+  }
+}
+
+.insufficientAlertWrapper {
+  background: #fff;
+  padding: 0;
+  border: 1px solid #f2f2f2;
+  border-bottom: none;
+
+  .wea-content {
+    padding: 0;
+
+    .wea-form-item {
+      padding: 5px 12px;
+      border-bottom: 1px solid #f2f2f2;
+    }
+  }
+}
+
+.trafficUsageRecords-layout {
+  height: 100%;
+  box-sizing: border-box;
+
+  .head {
+    margin-bottom: 16px;
+
+    .wea-search-group {
+      width: 80%;
+    }
+
+    .wea-search-group, .wea-content, .wea-form-cell, .wea-form-item {
+      padding: 0;
+    }
+  }
+}
+
+.statisticsInfo-layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .static-data {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    height: 80px;
+    background-color: #fff;
+    border: 2px solid #e5e5e5;
+
+    .item {
+      display: flex;
+
+      .left {
+        width: 65px;
+        height: 65px;
+
+        img {
+          width: 100%;
+          height: 100%
+        }
+      }
+
+      .right {
+        margin-left: 8px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        .title {
+          margin-top: 8px;
+          color: #999;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
--- a/pc4mobx/hrmSalary/stores/index.js
+++ b/pc4mobx/hrmSalary/stores/index.js
@ -20,6 +20,7 @@ import { PayrollFilesStore } from "./payrollFiles";
 import { SpecialAddStore } from "./specialAdd";
 import { ExternalPersonManageStore } from "./externalPersonManage";
 import { EmployeeDeclareStore } from "./employeeDeclare";
+import { IntelligentStore } from "./intelligent";

 module.exports = {
  baseFormStore: new BaseFormStore(),
@ -43,5 +44,6 @@ module.exports = {
  payrollFilesStore: new PayrollFilesStore(),
  specialAddStore: new SpecialAddStore(),
  externalPersonManageStore: new ExternalPersonManageStore(),
-  employeeDeclareStore: new EmployeeDeclareStore()
+  employeeDeclareStore: new EmployeeDeclareStore(),
+  intelligentStore: new IntelligentStore(),
 };
--- a/pc4mobx/hrmSalary/stores/intelligent.js
+++ b/pc4mobx/hrmSalary/stores/intelligent.js
@ -0,0 +1,13 @@
+import { action, observable } from "mobx";
+import { WeaForm, WeaTableNew } from "comsMobx";
+
+const { TableStore } = WeaTableNew;
+
+export class IntelligentStore {
+  @observable form = new WeaForm(); //流量使用记录查询form实例
+  @observable tableStore = new TableStore();
+
+  @action("...")
+  Init = () => {
+  };
+}