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

/*
 * Author: 黎永顺
 * name: 统计数据范围及规则设置
 * Description:
 * Date: 2023/4/21
 */
import React, { Component } from "react";
import { toJS } from "mobx";
import {
  WeaButtonIcon,
  WeaError,
  WeaFormItem,
  WeaHelpfulTip,
  WeaLocaleProvider,
  WeaRangePicker,
  WeaSearchGroup,
  WeaSelect,
  WeaSlideModal,
  WeaTable
} from "ecCom";
import CustomStatisticsItemsModal from "./customStatisticsItemsModal";
import moment from "moment";
import { Button, message, Modal } from "antd";
import { condition } from "./condition";
import { getSearchs } from "../../../util";
import {
  reportStatisticsGetSearchCondition,
  reportStatisticsItemDelete,
  reportStatisticsSaveSearchCondition,
  statisticsItemList
} from "../../../apis/statistics";
import { commonEnumList } from "../../../apis/ruleconfig";
import "../index.less";

const { getLabel } = WeaLocaleProvider;

class StatisticalMicroSettingsSlide extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      selectedRowKeys: [],
      conditions: [],
      dataSource: [],
      unitTypeList: [],
      salaryMonth: [],
      statisticalItemPayload: {
        visible: false, id: "", dimension: "",
        statisticsItemId: ""
      }
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.taxAgentAdminOption !== this.props.taxAgentAdminOption && !_.isEmpty(nextProps.taxAgentAdminOption)) {
      const conditions = _.map(condition, item => {
        return {
          ...item,
          items: _.map(item.items, child => {
            if (child.domkey[0] === "taxAgent") {
              return {
                ...child,
                options: toJS(nextProps.taxAgentAdminOption)
              };
            }
            return { ...child };
          })
        };
      });
      this.setState({ conditions });
      nextProps.form.initFormFields(condition);
    }
    if (nextProps.id !== this.props.id && !_.isEmpty(nextProps.id)) {
      this.reportStatisticsGetSearchCondition(nextProps.id);
      this.statisticsItemList(nextProps.id).then(r => {
      });
    }
    if (nextProps.visible !== this.props.visible && !nextProps.visible) {
      nextProps.form.resetForm();
      this.setState({ selectedRowKeys: [] });
    }
  }

  reportStatisticsGetSearchCondition = (id) => {
    const { conditions } = this.state;
    const { form } = this.props;
    reportStatisticsGetSearchCondition({ id }).then(({ status, data }) => {
      if (status && !_.isEmpty(data)) {
        const { salaryEndMonth, salaryStartMonth, ...formData } = data.data;
        this.setState({
          salaryMonth: [salaryStartMonth || moment().startOf("year").format("YYYY-MM"), salaryEndMonth || moment().format("YYYY-MM")]
        });
        const fields = _.map(conditions[0].items, it => it.domkey[0]);
        fields.map(item => {
          const value = item.indexOf("hiredate") !== -1 ? {
            value: formData["hiredate"] || []
          } : {
            value: !_.isNil(formData[item]) ? _.map(formData[item], val => val.id).join(",") : "",
            valueSpan: !_.isNil(formData[item]) ? _.map(formData[item], val => val.name).join(",") : "",
            valueObj: !_.isNil(formData[item]) ? formData[item] : []
          };
          const key = item.indexOf("hiredate") !== -1 ? "hiredate1__hiredate2" : item;
          form.updateFields({
            [key]: value
          });
        });
      }
    });
  };
  reportStatisticsSaveSearchCondition = () => {
    const { salaryMonth, dataSource } = this.state;
    const { form, id, dimension, onClose } = this.props;
    const [salaryStartMonth, salaryEndMonth] = salaryMonth;
    const { department, employee, position, subCompany, taxAgent, ...extra } = form.getFormDatas();
    const { value, valueSpan } = taxAgent;
    if (!salaryEndMonth && !salaryStartMonth) {
      this.refs.weaError.showError();
      return;
    }
    const payload = {
      dimension, id,
      hiredate: extra["hiredate1__hiredate2"].value || [],
      department: _.map(department.valueObj, it => ({ id: it.id, name: it.name })),
      employee: _.map(employee.valueObj, it => ({ id: it.id, name: it.name })),
      position: _.map(position.valueObj, it => ({ id: it.id, name: it.name })),
      subCompany: _.map(subCompany.valueObj, it => ({ id: it.id, name: it.name })),
      taxAgent: value ? _.map(value.split(","), (it, idx) => ({ id: it, name: valueSpan.split(",")[idx] })) : [],
      items: dataSource,
      salaryEndMonth: salaryEndMonth + "-01",
      salaryStartMonth: salaryStartMonth + "-01"
    };
    this.setState({ loading: true });
    reportStatisticsSaveSearchCondition(payload).then(({ status, errormsg }) => {
      this.setState({ loading: false });
      if (status) {
        onClose(true);
        message.success(getLabel(111, "保存成功"));
      } else {
        message.error(errormsg);
      }
    }).catch(() => this.setState({ loading: false }));
  };
  reportStatisticsItemDelete = () => {
    Modal.confirm({
      title: getLabel(111, "信息确认"),
      content: getLabel(111, "确认要删除吗?"),
      onOk: () => {
        const { selectedRowKeys } = this.state;
        reportStatisticsItemDelete(selectedRowKeys).then(({ status, errormsg }) => {
          if (status) {
            message.success(getLabel(111, "删除成功"));
            this.setState({
              selectedRowKeys: []
            }, () => {
              this.statisticsItemList(this.props.id).then(r => {
              });
            });
          } else {
            message.error(errormsg || getLabel(111, "删除失败"));
          }
        });
      }
    });
  };
  statisticsItemList = async (statisticsReportId = "") => {
    const { data: unitTypeList } = await this.commonEnumList();
    statisticsItemList({ statisticsReportId }).then(({ status, data }) => {
      if (status) {
        this.setState({
          dataSource: data,
          unitTypeList: _.map(unitTypeList, it => ({ key: it.value.toString(), showname: it.defaultLabel }))
        });
      }
    });
  };
  commonEnumList = () => {
    const payload = {
      enumClass: "com.engine.salary.report.enums.UnitTypeEnum"
    };
    return commonEnumList(payload);
  };
  renderGroupTitle = () => {
    return <div className="groupTitleWrapper">
      <span>{getLabel(111, "统计数据范围")}</span>
      <span>{getLabel(111, "统计满足以下所有条件的人员薪资核算数据，不选则默认为选择全部")}</span>
    </div>;
  };
  renderProjectTitle = () => {
    const { selectedRowKeys } = this.state;
    const { id, dimension } = this.props;
    return <div className="groupPorjectTitleWrapper">
      <div>
        <span>{getLabel(111, "统计项目")}</span>
        <WeaHelpfulTip width={200} placement="topLeft"
                       title={getLabel(111, "统计列表的统计项排序与本列表统计项的顺序一致")}
        />
      </div>
      <div>
        <WeaButtonIcon
          buttonType="del" type="primary" disabled={_.isEmpty(selectedRowKeys)}
          onClick={this.reportStatisticsItemDelete}
        />
        <WeaButtonIcon
          buttonType="add" type="primary"
          onClick={() => this.setState({
            statisticalItemPayload: {
              visible: true, id, dimension,
              statisticsItemId: ""
            }
          })}
        />
      </div>
    </div>;
  };

  render() {
    const {
      salaryMonth, conditions, selectedRowKeys, loading,
      statisticalItemPayload, dataSource, unitTypeList
    } = this.state;
    const { id, dimension } = this.props;
    const columns = [
      {
        title: "统计项名称",
        dataIndex: "itemName",
        render: (txt, record) => {
          return (
            <a href="javascript: void(0);" onClick={() => this.setState({
              statisticalItemPayload: { visible: true, id, dimension, statisticsItemId: record.id }
            })}>{txt}</a>
          );
        }
      },
      {
        title: "统计单位",
        dataIndex: "unitType",
        render: (txt, record) => {
          return <WeaSelect
            value={!_.isNil(txt) ? txt.toString() : ""} options={unitTypeList} style={{ width: 150 }}
            onChange={unitType => this.customStatisticsItemsRef.reportStatisticsItemSave({ id: record.id, unitType })}
          />;
        }
      }
    ];
    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys) => {
        this.setState({ selectedRowKeys });
      }
    };
    return (
      <WeaSlideModal
        className="microSlideWrapper"
        {...this.props}
        onClose={() => this.props.onClose()}
        top={0}
        measureT="%"
        width={800}
        measureX="px"
        height={100}
        measureY="%"
        direction={"right"}
        title={<TitleDialog loading={loading} onSave={this.reportStatisticsSaveSearchCondition}/>}
        content={
          <React.Fragment>
            <WeaSearchGroup title={getLabel(111, "统计时间范围")} col={2} showGroup needTigger>
              <WeaFormItem label={getLabel(111, "薪资所属月")} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
                <WeaError tipPosition="bottom" ref="weaError" error={getLabel(111, "此项必填")}>
                  <WeaRangePicker
                    value={salaryMonth} viewAttr={3} format="YYYY-MM"
                    onChange={v => this.setState({ salaryMonth: v })}
                  />
                </WeaError>
              </WeaFormItem>
            </WeaSearchGroup>
            {
              getSearchs(this.props.form, conditions, 2, false, () => {
              }, this.renderGroupTitle())
            }
            <WeaSearchGroup title={this.renderProjectTitle()} showGroup needTigger>
              <WeaTable
                rowKey="id"
                columns={columns}
                dataSource={dataSource}
                draggable={true}
                onDrop={datas => this.setState({
                  dataSource: _.map(datas, (it, idx) => ({ ...it, indexValue: idx.toString() }))
                })}
                pagination={false}
                rowSelection={rowSelection}
              />
              <CustomStatisticsItemsModal
                ref={dom => this.customStatisticsItemsRef = dom}
                {...statisticalItemPayload}
                onCancel={(isRefresh) => this.setState({
                  statisticalItemPayload: {
                    visible: false,
                    id: "",
                    dimension: "",
                    statisticsItemId: ""
                  }
                }, () => isRefresh && this.statisticsItemList(this.props.id))}
              />
            </WeaSearchGroup>
          </React.Fragment>
        }
      />
    );
  }
}

export default StatisticalMicroSettingsSlide;
const TitleDialog = (props) => {
  return <div className="titleDialog">
    <div className="titleCol">
      <div className="titleLeftBox">
        <div className="titleIcon"><i className="icon-coms-fa"/></div>
        <div className="title">{getLabel(111, "统计数据范围及规则设置")}</div>
      </div>
    </div>
    <div className="titleCol titleRightBox">
      <Button type="primary" loading={props.loading} onClick={props.onSave}>{getLabel(111, "保存")}</Button>
    </div>
  </div>;
};