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 } from "antd";
import { condition } from "./condition";
import { getSearchs } from "../../../util";
import { reportStatisticsItemSave } from "../../../apis/statistics";
import "../index.less";


const { getLabel } = WeaLocaleProvider;

class StatisticalMicroSettingsSlide extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      selectedRowKeys: [],
      conditions: [],
      salaryMonth: [moment().startOf("year").format("YYYY-MM"), moment().format("YYYY-MM")],
      statisticalItemPayload: {
        visible: false, id: "", dimension: ""
      }
    };
  }

  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);
    }
  }

  reportStatisticsItemSave = () => {
    const { salaryMonth } = this.state;
    const { form, id, dimension } = this.props;
    const [salaryStartMonth, salaryEndMonth] = salaryMonth;
    const { hiredate, ...extra } = form.getFormDatas();
    if (!salaryEndMonth && !salaryStartMonth) {
      this.refs.weaError.showError();
      return;
    }
    const payload = {
      dimension, id,
      hiredate: hiredate.value, items: [],
      salaryEndMonth,
      salaryStartMonth
    };
    console.log(payload, extra);
    return;
    this.setState({ loading: true });
    reportStatisticsItemSave(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      console.log(status, data);
    }).catch(() => this.setState({ loading: false }));
  };

  renderGroupTitle = () => {
    return <div className="groupTitleWrapper">
      <span>{getLabel(111, "统计数据范围")}</span>
      <span>{getLabel(111, "统计满足以下所有条件的人员薪资核算数据，不选则默认为选择全部")}</span>
    </div>;
  };
  renderProjectTitle = () => {
    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"/>
        <WeaButtonIcon
          buttonType="add" type="primary"
          onClick={() => this.setState({
            statisticalItemPayload: { visible: true, id, dimension }
          })}
        />
      </div>
    </div>;
  };
  drop = datas => {
    console.log("datas", datas);
  };

  render() {
    const { salaryMonth, conditions, selectedRowKeys, loading, statisticalItemPayload } = this.state;
    const columns = [
      {
        title: "统计项名称",
        dataIndex: "itemName"
      },
      {
        title: "统计单位",
        dataIndex: "unitType",
        render: () => {
          return <WeaSelect options={[]} style={{ width: 150 }}/>;
        }
      }
    ];
    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys) => {
        this.setState({ selectedRowKeys }, () => {
        });
      }
    };
    return (
      <WeaSlideModal
        className="microSlideWrapper"
        {...this.props}
        top={0}
        measureT="%"
        width={800}
        measureX="px"
        height={100}
        measureY="%"
        direction={"right"}
        title={<TitleDialog loading={loading} onSave={this.reportStatisticsItemSave}/>}
        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
                columns={columns}
                dataSource={[{}]}
                draggable={true}
                onDrop={this.drop}
                pagination={false}
                rowSelection={rowSelection}
              />
              <CustomStatisticsItemsModal {...statisticalItemPayload}
                                          onCancel={() => this.setState({
                                            statisticalItemPayload: { visible: false, id: "", dimension: "" }
                                          })}
              />
            </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>;
};