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

/*
 * Author: 黎永顺
 * name: 启用设置
 * Description:
 * Date: 2023/7/19
 */
import React, { Component } from "react";
import { Button, Col, Input, message, Modal, Row } from "antd";
import TipLabel from "../../../components/TipLabel";
import { WeaCheckbox, WeaFormItem, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
import {
  apiflowBillingConfigEnable,
  apiflowBillingConfigGet,
  apiflowBillingConfigSave
} from "../../../apis/intelligentCalculateSalarySettings";

const getLabel = WeaLocaleProvider.getLabel;

class EnableSettings extends Component {
  constructor(props) {
    super(props);
    this.state = {
      enable: "1", id: "",
      appKey: "", appSecret: "",
      loading: false
    };
  }

  componentDidMount() {
    this.apiflowBillingConfigGet();
  }

  apiflowBillingConfigGet = () => {
    apiflowBillingConfigGet().then(({ status, data }) => {
      if (status) {
        const { id, appKey, appSecret, enable } = data;
        this.setState({
          appKey, appSecret, enable: enable ? "1" : "0", id
        });
      }
    });
  };
  apiflowBillingConfigEnable = (enable) => {
    apiflowBillingConfigEnable({ enable }).then(({ status, errormsg }) => {
      if (status) {
        message.success(enable === "OFF" ? getLabel(111, "关闭成功！") : getLabel(111, "开启成功！"));
        enable === "OFF" && this.setState({ enable: "0" });
      } else {
        message.error(errormsg || (enable === "OFF" ? getLabel(111, "关闭失败！") : getLabel(111, "开启失败！")));
        this.setState({ enable: this.state.enable });
      }
    });
  };
  apiflowBillingConfigSave = () => {
    const { enable, id, appKey, appSecret } = this.state;
    const payload = {
      id, appKey, appSecret,
      enable: enable === "1" ? "ON" : "OFF"
    };
    this.setState({ loading: true });
    apiflowBillingConfigSave(payload).then(({ status, errormsg }) => {
      this.setState({ loading: false });
      if (status) {
        message.success(getLabel(384521, "设置成功！"));
      } else {
        message.error(errormsg || getLabel(384522, "设置失败！"));
      }
    }).catch(() => this.setState({ loading: false }));
  };
  handleEnale = (enable) => {
    if (enable === "1") {
      this.setState({ enable }, () => this.apiflowBillingConfigEnable("ON"));
    } else {
      Modal.confirm({
        title: getLabel(131329, "信息确认"),
        content: getLabel(544344, "确定要关闭智能算薪功能吗？关闭后，将无法使用在线报送人员信息、在线获取专项附加扣除数据、在线个税申报等功能！"),
        onOk: () => this.apiflowBillingConfigEnable("OFF"),
        onCancel: () => {
          this.setState({ enable: this.state.enable });
        }
      });
    }
  };
  handleChangeInput = (key, val) => this.setState({ [key]: val });

  render() {
    const { enable, appKey, appSecret, loading } = this.state;
    const tipList = [
      getLabel(544282, "1、智能算薪默认是开启的，若购买了智能算薪，请先配置账号密码，在购买的流量足够的前提下即可正常使用；"),
      getLabel(544283, "2、您可在【接口流量统计】中查看接口流量使用情况；"),
      getLabel(544284, "3、您可以设置【流量不足提醒】，提前提醒可以避免次月要用时因流量不足无法使用的情况。"),
      getLabel(544285, "4、如您需了解您购买的流量的使用明细，可查看【流量使用记录】；")
    ];
    const InputAccount = label => {
      return (
        <WeaFormItem label={label} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
          <Input
            value={appKey} autoComplete="new-password" placeholder={getLabel(83869, "请输入")}
            onChange={e => this.handleChangeInput("appKey", e.target.value)}
          />
        </WeaFormItem>
      );
    };
    const InputPassword = label => {
      return (
        <WeaFormItem label={label} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
          <Input
            value={appSecret} type="password" autoComplete="new-password" placeholder={getLabel(83869, "请输入")}
            onChange={e => this.handleChangeInput("appSecret", e.target.value)}
          />
        </WeaFormItem>
      );
    };
    return (
      <Row className="enable-settings" gutter={16}>
        <Col span={16}>
          <div className="swith-area">
            <div className="left">
              <div className="title">{getLabel(111, "智能算薪")}</div>
              <div
                className="info">{getLabel(111, "开启智能算薪并输入正确的账号密码，且购买了智能算薪流量，才能正常使用智能算薪功能。")}</div>
            </div>
            <div className="right"><WeaCheckbox display="switch" value={enable} onChange={this.handleEnale}/></div>
          </div>
          <div className="userinfo">
            <div className="left">
              <WeaSearchGroup
                showGroup needTigger={false} col={3}
                items={[
                  { com: InputAccount(getLabel(83594, "账号")) },
                  { com: InputPassword(getLabel(33150, "密码")) }
                ]}
              />
            </div>
            <div className="right">
              <Button type="primary" onClick={this.apiflowBillingConfigSave}
                      loading={loading}>{getLabel(725, "提交")}</Button>
            </div>
          </div>
        </Col>
        <Col span={8}>
          <TipLabel tipList={tipList}/>
        </Col>
      </Row>
    );
  }
}

export default EnableSettings;