salary-management-front/pc4mobx/hrmSalary/pages/appConfig/index.js

/*
 * Author: 黎永顺
 * name: 应用设置
 * Description:
 * Date: 2022-09-27 18:17:02
 */
import React, { Component } from "react";
import {
  WeaCheckbox,
  WeaDatePicker,
  WeaFormItem,
  WeaInput,
  WeaLoadingGlobal,
  WeaLocaleProvider,
  WeaSearchGroup,
  WeaTop
} from "ecCom";
import MoveInDialog from "./moveInDialog";
import * as API from "../../apis/ruleconfig";
import { Button, message } from "antd";
import "./index.less";

const Input = (props) => {
  const { label, value } = props;
  return (
    <WeaFormItem label={label} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
      <WeaInput viewAttr={1} value={value}/>
    </WeaFormItem>
  );
};
const getLabel = WeaLocaleProvider.getLabel;

class AppConfig extends Component {
  constructor(props) {
    super(props);
    this.state = {
      openAcctResultSum: "0",
      displayEmpInfoReport: "0",
      isLog: "0",
      openFormulaForcedEditing: "0",
      version: "",
      loading: false,
      moveInDialog: { visible: false, title: getLabel(111, "数据迁入") }
    };
  }

  componentDidMount() {
    this.queryAppsetting();
  }

  queryAppsetting = () => {
    API.queryAppsetting().then(({ status, data }) => {
      if (status) {
        const { openAcctResultSum, displayEmpInfoReport, isLog, openFormulaForcedEditing, version } = data;
        this.setState({
          openAcctResultSum, displayEmpInfoReport,
          isLog: isLog === "true" ? "1" : "0",
          openFormulaForcedEditing: openFormulaForcedEditing === "true" ? "1" : "0",
          version
        });
      }
    });
  };
  appSettingSave = () => {
    const { openAcctResultSum, displayEmpInfoReport } = this.state;
    this.setState({ loading: true });
    API.appSettingSave({ openAcctResultSum, displayEmpInfoReport }).then(({ status, errormsg }) => {
      this.setState({ loading: false });
      if (status) {
        message.success("设置成功!");
        this.queryAppsetting();
      } else {
        message.error(errormsg || "设置失败!");
      }
    });
  };
  handleOperate = (type) => {
    switch (type) {
      case "import":
        this.setState({ moveInDialog: { ...this.state.moveInDialog, visible: true } });
        break;
      case "export":
        WeaLoadingGlobal.start();
        const promise = API.downloadConfig();
        break;
      default:
        break;
    }
  };

  render() {
    const {
      openAcctResultSum, displayEmpInfoReport, loading, openFormulaForcedEditing, isLog, version, moveInDialog
    } = this.state;
    const btns = [
      <Button type="primary" loading={loading} onClick={this.appSettingSave}>保存</Button>,
      <Button type="ghost" onClick={() => this.handleOperate("import")}>{getLabel(111, "迁入")}</Button>,
      <Button type="ghost" onClick={() => this.handleOperate("export")}>{getLabel(111, "迁出")}</Button>
    ];
    const items = [
      {
        com: Input({
          label: "版本号",
          value: version
        })
      },
      {
        com: CheckBox({
          label: "显示薪资核算结果合计列",
          value: openAcctResultSum,
          onChange: (openAcctResultSum) => {
            this.setState({ openAcctResultSum });
          }
        })
      },
      {
        com: CheckBox({
          label: "是否显示脱敏表人员信息",
          value: displayEmpInfoReport,
          onChange: (displayEmpInfoReport) => {
            this.setState({ displayEmpInfoReport });
          }
        })
      },
      {
        com: CheckBox({
          label: "是否输出日志",
          disabled: true,
          value: isLog
        })
      },
      {
        com: CheckBox({
          label: "是否可编辑系统公式",
          disabled: true,
          value: openFormulaForcedEditing
        })
      }
    ];
    return (
      <div className="appConfigWrapper">
        <WeaTop
          title={<span>应用设置</span>}
          icon={<i className="icon-coms-Flow-setting"/>}
          iconBgcolor="#F14A2D"
          buttons={btns}
        />
        <WeaSearchGroup title="" showGroup center items={items}/>
        <MoveInDialog {...moveInDialog}
                      onCancel={() => this.setState({ moveInDialog: { ...this.state.moveInDialog, visible: false } })}/>
      </div>
    );
  }
}

export default AppConfig;

export const CheckBox = payload => {
  const { label, onChange, value, disabled = false } = payload;
  return (
    <WeaFormItem label={label} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
      <WeaCheckbox display="switch" disabled={disabled} value={value} onChange={onChange}/>
    </WeaFormItem>
  );
};

export const PickDate = payload => {
  const { label, onChange, value, viewAttr, format, labelCol = { span: 8 }, wrapperCol = { span: 16 } } = payload;
  return (
    <WeaFormItem label={label} labelCol={labelCol} wrapperCol={wrapperCol}>
      <WeaDatePicker
        value={value}
        viewAttr={viewAttr}
        format={format}
        onChange={(date) => onChange({ type: label, date })}/>
    </WeaFormItem>
  );
};