salary-management-front/pc4mobx/hrmSalary/components/CustomBrowser/index.js

/*
  * 自定义浏览框组件
  *
  * @Author:    黎永顺
  * @Date:      2024/8/29
  * @Wechat:
  * @Email:     971387674@qq.com
  * @description:
*/
import React, { Component } from "react";
import { WeaLocaleProvider, WeaTools } from "ecCom";
import AssociativeTreeMult from "./components/associativeTreeMult";
import AssociativeSearchMult from "./components/associativeSearchMult";
import AssociativeSearchSingle from "./components/AssociativeSearchSingle";
import CustomBrowserDialog from "./components/customBrowserDialog";
import classNames from "classnames";
import "./index.less";

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

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      browserDialog: { visible: false },
      selectedData: {}, searchKeys: [], // 搜索按钮选择的数据和keys
      rightDatas: []  // 右侧展示的数据
    };
  }

  componentDidMount() {
    const { value, fieldConfig } = this.props;
    const { value: defaultValue, browserConditionParam: { replaceDatas = [] } } = fieldConfig;
    if ((value || defaultValue) && replaceDatas.length > 0) {
      this.setState({
        searchKeys: (value || defaultValue).split(","),
        selectedData: _.reduce(replaceDatas, (pre, cur) => ({ ...pre, [cur["id"]]: cur }), {})
      });
    }
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (
      (nextProps.value !== this.props.value && _.isEmpty(nextProps.value)) ||
      (nextProps.fieldConfig.value !== this.props.fieldConfig.value && _.isEmpty(nextProps.fieldConfig.value))
    ) {
      this.setState({ searchKeys: [], selectedData: [] });
    }
  }

  renderSingle = () => {
    const { fieldConfig } = this.props;
    const { selectedData, searchKeys } = this.state;
    return (<div>
      <AssociativeSearchSingle
        {...fieldConfig}
        {...this.props}
        datas={selectedData}
        selectedValues={searchKeys}
        onChange={this.onBrowerChangeHandler}
        clickCallback={this.onBrowerClick}
      />
    </div>);
  };
  renderMult = () => {
    const { fieldConfig } = this.props;
    const { browserConditionParam = {} } = fieldConfig || {};
    const { selectedData, searchKeys } = this.state;
    return (<div>
      {
        browserConditionParam.treeSelect ?
          <AssociativeTreeMult
            {...fieldConfig}
            {...this.props}
            datas={selectedData}
            selectedValues={searchKeys}
            onChange={this.onBrowerChangeHandler}
          /> :
          <AssociativeSearchMult
            {...fieldConfig}
            {...this.props}
            datas={selectedData}
            selectedValues={searchKeys}
            onChange={this.onBrowerChangeHandler}
            clickCallback={this.onBrowerClick}
          />
      }
    </div>);
  };
  onBrowerChangeHandler = (values, datas) => {
    const { form, fieldConfig, isSingle } = this.props;
    const { browserConditionParam = {} } = fieldConfig || {};
    this.setState({
      searchKeys: (isSingle || browserConditionParam.isSingle) ? values.slice(-1) : values,
      selectedData: ((isSingle || browserConditionParam.isSingle) && !_.isEmpty(values)) ? { [_.last(values)]: datas[_.last(values)] } : datas
    }, () => {
      this.props.onChange && this.props.onChange(values.join(","));
      this.props.onCustomChange && this.props.onCustomChange(this.state.selectedData);
      if (form) {
        form.updateFields({
          [getKey(fieldConfig)]: { value: this.state.searchKeys.join(",") }
        });
      }
    });
  };
  onBrowerClick = (keys, selectedObj) => {
    if (_.isEmpty(keys)) {
      this.setState({ searchKeys: [], selectedData: {}, rightDatas: [] });
    }
    this.setState({ browserDialog: { visible: true } });
  };

  render() {
    const { browserDialog, selectedData, searchKeys } = this.state;
    const { isSingle, viewAttr, fieldConfig = {} } = this.props;
    const { browserConditionParam = {} } = fieldConfig || {};
    const className = classNames({
      "wea-browser": true,
      "wea-field-readonly": viewAttr === "1" || fieldConfig.viewAttr === "1"
    });
    const browser = (isSingle || browserConditionParam.isSingle) ? this.renderSingle() : this.renderMult();
    const style = {};
    if (this.props.resize) style.visibility = "hidden";
    return (<React.Fragment>
        <div className={`${className} ${this.props.className || ""}`} style={style}>{browser}</div>
        <CustomBrowserDialog
          {...browserDialog} {...browserConditionParam} {...this.props} onChange={this.onBrowerChangeHandler}
          onCancel={() => this.setState({ browserDialog: { visible: false } })}
          datas={selectedData} selectedValues={searchKeys}/>
      </React.Fragment>
    );
  }
}

export default Index;