salary-management-front/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editCalcAdvanceSearchPannel.js

/*
 * Author: 黎永顺
 * name: 薪资核算-高级搜索面板
 * Description:
 * Date: 2023/9/14
 */
import React, { Component } from "react";
import { WeaFormItem, WeaInput, WeaLocaleProvider, WeaSearchGroup, WeaSelect, WeaTools } from "ecCom";
import { Button, Col, Row } from "antd";
import { inject, observer } from "mobx-react";
import uuidV4 from "uuid/v4";
import { editCalcSearchConditions } from "./condition";
import { getExportField } from "../../../../../apis/calculate";
import { commonEnumList } from "../../../../../apis/ruleconfig";
import { getSearchs } from "../../../../../util";

const getKey = WeaTools.getKey;
const getLabel = WeaLocaleProvider.getLabel;

@inject("calculateStore")
@observer
class EditCalcAdvanceSearchPannel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchConditions: [], salaryItems: [],
      customSearchConditions: [], filterEnum: []
    };
  }

  componentDidMount() {
    this.getExportField();
    this.getFilterEnumList();
    this.setState({
      searchConditions: _.map(editCalcSearchConditions, item => {
        return {
          ...item,
          items: _.map(item.items, o => {
            if (getKey(o) === "statuses") {
              return {
                ...o,
                options: [
                  { key: "0", showname: getLabel(18883, "试用") }, { key: "1", showname: getLabel(15711, "正式") },
                  { key: "2", showname: getLabel(480, "临时") }, { key: "3", showname: getLabel(15844, "试用延期") },
                  { key: "4", showname: getLabel(542707, "解雇") }, { key: "5", showname: getLabel(6091, "离职") },
                  { key: "6", showname: getLabel(6092, "退休") }
                ]
              };
            }
            return { ...o, hide: getKey(o) === "consolidatedTaxation" && this.props.calcType !== "calc" };
          }),
          title: getLabel(32905, "常用条件")
        };
      })
    }, () => {
      const { calculateStore: { ECSearchForm } } = this.props;
      ECSearchForm.initFormFields(this.state.searchConditions);
    });
  }

  getFilterEnumList = () => {
    commonEnumList({ enumClass: "com.engine.salary.enums.common.FilterEnum" })
      .then(({ status, data }) => {
        if (status) {
          this.setState({
            filterEnum: _.map(data, item => ({
              key: item.value,
              showname: item.defaultLabel
            }))
          });
        }
      });
  };
  getExportField = () => {
    getExportField({ salaryAcctRecordId: this.props.salaryAcctRecordId })
      .then(({ status, data }) => {
        if (status) {
          const { itemsByGroup } = data;
          this.setState({
            salaryItems: _.map(itemsByGroup, item => ({
              key: item.salarySobItemGroupId.toString(),
              label: item.salarySobItemGroupName,
              options: _.map(item.salaryItems, o => ({
                key: o.salaryItemId.toString(), showname: o.salaryItemName
              }))
            }))
          });
        }
      });
  };
  handleAddCustomSearchForm = () => {
    const { calculateStore: { setOtherConditions } } = this.props;
    const { customSearchConditions, salaryItems, filterEnum } = this.state;
    const uuid = uuidV4();
    this.setState({
      customSearchConditions: [
        ...customSearchConditions,
        {
          com: CustomFormFields({
            uuid, salaryItems, filterEnum, onDelete: this.handleDelete, onChange: this.handleChange
          }),
          uuid, itemId: "", filter: "", params: ""
        }
      ]
    }, () => {
      setOtherConditions(_.map(this.state.customSearchConditions, o => ({
        itemId: o.itemId, filter: o.filter, params: o.params
      })));
    });
  };
  handleChange = (uuid, params) => {
    const { calculateStore: { setOtherConditions } } = this.props;
    const { customSearchConditions } = this.state;
    this.setState({
      customSearchConditions: _.map(customSearchConditions, o => {
        if (o.uuid === uuid) {
          return { ...o, ...params };
        }
        return { ...o };
      })
    }, () => {
      setOtherConditions(_.map(this.state.customSearchConditions, o => ({
        itemId: o.itemId, filter: o.filter, params: o.params
      })));
    });
  };
  handleDelete = (uuid) => {
    const { calculateStore: { setOtherConditions } } = this.props;
    const { customSearchConditions } = this.state;
    this.setState({
      customSearchConditions: _.filter(customSearchConditions, o => o.uuid !== uuid)
    }, () => {
      setOtherConditions(_.map(this.state.customSearchConditions, o => ({
        itemId: o.itemId, filter: o.filter, params: o.params
      })));
    });
  };

  render() {
    const { searchConditions, customSearchConditions } = this.state;
    const { calculateStore: { ECSearchForm, setOtherConditions } } = this.props;
    return (
      <React.Fragment>
        <div className="wea-advanced-searchsAd">
          {getSearchs(ECSearchForm, searchConditions, 2, false)}
          {
            this.props.calcType === "calc" && <React.Fragment>
              <WeaSearchGroup needTigger showGroup title={getLabel(32843, "其他条件")} items={customSearchConditions}
                              col={2}/>
              <div className="custom-advance-largeSpacing">
                <Button className="link" icon="plus"
                        onClick={this.handleAddCustomSearchForm}>{getLabel(111, "添加搜索条件")}</Button>
              </div>
              <div className="searchAdvanced-commonSelect">
                {/*<Button type="ghost">{getLabel(111, "保存常用筛选")}</Button>*/}
              </div>
            </React.Fragment>
          }
        </div>
        <div className="wea-search-buttons">
          <div style={{ textAlign: "center" }}>
            <span style={{ marginLeft: 15 }}><Button type="primary"
                                                     onClick={this.props.onAdSearch}>{getLabel(388113, "搜索")}</Button></span>
            <span style={{ marginLeft: 15 }}><Button type="ghost"
                                                     onClick={() => {
                                                       this.setState({
                                                         customSearchConditions: []
                                                       }, () => {
                                                         ECSearchForm.resetForm();
                                                         setOtherConditions([]);
                                                       });
                                                     }}>{getLabel(2022, "重置")}</Button></span>
            <span style={{ marginLeft: 15 }}><Button type="ghost"
                                                     onClick={this.props.onToggleSwitch}>{getLabel(31129, "取消")}</Button></span>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default EditCalcAdvanceSearchPannel;

const CustomFormFields = (props) => {
  const { uuid, onDelete, salaryItems, filterEnum, onChange } = props;
  return <WeaFormItem labelCol={{ span: 0 }} wrapperCol={{ span: 18 }}>
    <Row>
      <Col span={6} style={{ paddingRight: 10 }}>
        <WeaSelect
          options={salaryItems} detailtype={5} showSearch optionFilterProp="children"
          onChange={v => onChange(uuid, { itemId: v })}
        />
      </Col>
      <Col span={18}>
        <Row>
          <Col span={12} style={{ paddingRight: 10 }}>
            <WeaSelect options={filterEnum} onChange={v => onChange(uuid, { filter: v })}/>
          </Col>
          <Col span={12} style={{ position: "relative" }}>
            <WeaInput onChange={v => onChange(uuid, { params: v })}/>
            <Button
              type="ghost" icon="cross" className="formItem-delete" shape="circle"
              onClick={() => onDelete(uuid)}
            />
          </Col>
        </Row>
      </Col>
    </Row>
  </WeaFormItem>;
};