salary-management-front/pc4mobx/hrmSalary/pages/reportView/components/customStatisticsItemsModal.js

/*
 * Author: 黎永顺
 * name: 新建自定义统计项目弹框
 * Description:
 * Date: 2023/4/10
 */
import React, { Component } from "react";
import { Button } from "antd";
import {
  WeaCheckbox,
  WeaDialog,
  WeaError,
  WeaFormItem,
  WeaHelpfulTip,
  WeaInput,
  WeaInputNumber,
  WeaLocaleProvider,
  WeaTable
} from "ecCom";
import { statisticsItemGetform } from "../../../apis/statistics";
import "../index.less";

const { getLabel } = WeaLocaleProvider;

class CustomStatisticsItemsModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      columns: [],
      dataSource: [],
      formData: {}
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) {
      this.statisticsItemGetform();
    }
  }

  statisticsItemGetform = (payload) => {
    statisticsItemGetform(payload).then(({ status, data }) => {
      if (status) {
        const { ruleData } = data;
        const { columns, data: dataSource } = ruleData;
        this.setState({ columns, dataSource });
      }
    });
  };
  handleChangeColumnCheckBox = (key, value, id) => {
    const { dataSource } = this.state;
    this.setState({
      dataSource: _.map(dataSource, it => {
        if (it.id === id) {
          return {
            ...it,
            [key]: Number(value)
          };
        }
        return { ...it };
      })
    });
  };
  handleChangeColumnAllChecked = (key, val) => {
    const { dataSource } = this.state;
    this.setState({
      dataSource: _.map(dataSource, it => {
        return {
          ...it,
          [key]: Number(val)
        };
      })
    });
  };
  handleChangeColumnM2MValue = (key, value, id) => {
    const { dataSource } = this.state;
    this.setState({
      dataSource: _.map(dataSource, it => {
        if (it.id === id) {
          return {
            ...it,
            [key]: value
          };
        }
        return { ...it };
      })
    });
  };

  render() {
    const { loading, columns, dataSource, formData } = this.state;
    const { itemName } = formData;
    const cols = _.map(columns, it => {
      const { text, column } = it;
      if (column === "ruleName" || column === "ratio" || column === "m2m" || column === "y2y") {
        const key = column === "ruleName" ? "total" : column;
        return {
          ...it,
          title: <span>
                  <WeaCheckbox
                    value={_.every(dataSource, child => !!child[`${key}Value`])}
                    onChange={val => this.handleChangeColumnAllChecked(`${key}Value`, val)}
                  />
                  <span style={{ marginLeft: 8 }}>{text}</span>
                </span>,
          render: (txt, record) => {
            return <span>
                    <WeaCheckbox
                      value={record[`${key}Value`].toString()}
                      onChange={val => this.handleChangeColumnCheckBox(`${key}Value`, val, record.id)}
                    />
                    <span style={{ marginLeft: 8 }}>
                      {column === "ruleName" ? record["ruleName"] : text}
                    </span>
                  </span>;
          }
        };
      } else if (column === "m2mLimit") {
        return {
          ...it,
          title: <span>
                  <span style={{ marginRight: 8 }}>{text}</span>
                  <WeaHelpfulTip title={getLabel(111, "如：增幅>10%,差值和增幅标记为红色，增幅<-10%标记为绿色")}
                                 placement="top" width={200}/>
                </span>,
          render: (txt, record) => {
            return !!record["m2mValue"] && <IntervalSettingsComp
              LowerLimit={record[`${column.replace("Limit", "")}LowerLimit`]}
              UpperLimit={record[`${column.replace("Limit", "")}UpperLimit`]}
              onChange={(type, val) => this.handleChangeColumnM2MValue(`${column.replace("Limit", "")}${type === "min" ? "LowerLimit" : "UpperLimit"}`, val, record.id)}
            />;
          }
        };
      } else if (column === "y2yLimit") {
        return {
          ...it,
          title: <span>
                  <span style={{ marginRight: 8 }}>{text}</span>
                  <WeaHelpfulTip title={getLabel(111, "如：增幅>10%,差值和增幅标记为红色，增幅<-10%标记为绿色")}
                                 placement="top" width={200}/>
                </span>,
          render: (txt, record) => {
            return !!record["y2yValue"] && <IntervalSettingsComp
              LowerLimit={record[`${column.replace("Limit", "")}LowerLimit`]}
              UpperLimit={record[`${column.replace("Limit", "")}UpperLimit`]}
              onChange={(type, val) => this.handleChangeColumnM2MValue(`${column.replace("Limit", "")}${type === "min" ? "LowerLimit" : "UpperLimit"}`, val, record.id)}
            />;
          }
        };
      }
    });
    return (
      <WeaDialog
        {...this.props} hasScroll buttons={[]} initLoadCss
        title={
          <div className="itemsTitle">
            <span>{getLabel(111, "新建自定义统计项目")}</span>
            <Button type="primary" loading={loading}>{getLabel(111, "保存")}</Button>
          </div>
        }
        style={{ width: 900, height: 500 }}
        className="statisticItemsWrapper"
      >
        <div className="statisticItemsBox">
          <WeaFormItem label={getLabel(111, "统计项目")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
            <WeaError tipPosition="bottom" ref="proError" error={getLabel(111, "此项必填")}>
            </WeaError>
          </WeaFormItem>
          <WeaFormItem label={getLabel(111, "统计项名称")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
            <WeaError tipPosition="bottom" ref="nameError" error={getLabel(111, "此项必填")}>
              <WeaInput
                value={itemName}
                viewAttr={3}/>
            </WeaError>
          </WeaFormItem>
          <div className="customRuleTableWrapper">
            <WeaTable
              dataSource={dataSource}
              columns={cols}
              pagination={false}
            />
          </div>
        </div>
      </WeaDialog>
    );
  }
}

export default CustomStatisticsItemsModal;
/*
 * Author: 黎永顺
 * Description: 区间设置
 * Params:
 * Date: 2023/4/23
 */
const IntervalSettingsComp = (props) => {
  const { LowerLimit, UpperLimit, onChange } = props;
  return <div className="intervalSettingsCompWrapper">
    <WeaInputNumber value={LowerLimit} precision={2} onChange={val => onChange("min", val)}/>
    <span className="increaseTitle">{`% <${getLabel(111, "增幅")}<`}</span>
    <WeaInputNumber value={UpperLimit} precision={2} onChange={val => onChange("max", val)}/>
    <span className="pecentTitle">%</span>
  </div>;
};