salary-management-front/pc4mobx/hrmSalary/pages/intelligentCalculateSalarySettings/components/interfaceFlowStatistics.js

/*
 * Author: 黎永顺
 * name: 智能算薪-接口流量统计
 * Description:
 * Date: 2023/8/29
 */
import React, { Component } from "react";
import { Button, message, Spin } from "antd";
import { WeaLocaleProvider, WeaTable } from "ecCom";
import { apiflowStatisticsInfo, apiflowStatisticsList } from "../../../apis/intelligentCalculateSalarySettings";
import MonthStaticsDetailDialog from "./monthStaticsDetailDialog";

const getLabel = WeaLocaleProvider.getLabel;

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

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

  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));
      }
    });
  };
  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 }));
  };
  handleExport = () => {
    window.open(`${window.ecologyContentPath || ""}/api/bs/hrmsalary/taxdeclaration/apiflow/statistics/export`, "_blank");
  };

  render() {
    const { statisticsInfo, pageInfo, loading, dataSource, columns, visible } = 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">
          {
            _.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 className="title">
            <div className="text">{getLabel(111, "使用明细")}</div>
            <Button type="primary" onClick={this.handleExport}>{getLabel(81272, "导出全部")}</Button>
          </div>
          {
            loading ? <div className="loading-layout">
              <Spin spinning={loading}/>
            </div> : <WeaTable
              dataSource={dataSource} pagination={pagination} loading={loading}
              columns={[
                ...columns,
                {
                  title: getLabel(30585, "操作"), dataIndex: "operate",
                  render: () => (<a href="javascript:void(0);" rel="noreferrer"
                                    onClick={() => this.setState({ visible: true })}>{getLabel(111, "月统计详情")}</a>)
                }
              ]}
              scroll={{ y: `calc(100vh - 190px)` }}
            />
          }
        </div>
        <MonthStaticsDetailDialog visible={visible} onCancel={() => this.setState({ visible: false })}/>
      </div>
    );
  }
}

export default InterfaceFlowStatistics;