salary-management-front/pc4mobx/hrmSalary/pages/calculateDetail/acctResult/importModal/selectFieldModal.js

import React from "react";
import { Button, Col, Row } from "antd";
import { inject, observer } from "mobx-react";
import { WeaCheckbox, WeaDialog } from "ecCom";
import { cacheImportField } from "../../../../apis/calculate";

@inject("calculateStore", "standingBookStore")
@observer
export default class SelectFieldModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fieldData: {}
    };
  }

  componentWillMount() {
    const {
      calculateStore: { getImportField },
      standingBookStore: { getWelfareList, getBalanceWelfareList },
      isStandingBook, standingBookType
    } = this.props;
    if (!isStandingBook) {
      getImportField(this.props.id).then(data => {
        let fieldData = {};
        let formulaItems = [];
        formulaItems = data.formulaItems;
        if (this.props.fieldData.formulaItems) {
          formulaItems = this.props.fieldData.formulaItems;
        }
        let inputItems = [];
        inputItems = data.inputItems;
        if (this.props.fieldData.inputItems) {
          inputItems = this.props.fieldData.inputItems;
        }
        let sqlItems = [];
        sqlItems = data.sqlItems;
        if (this.props.fieldData.inputItems) {
          sqlItems = this.props.fieldData.sqlItems;
        }
        fieldData.formulaItems = _.map(formulaItems, item => {
          if (data.checkItems.includes(item.salaryItemId)) {
            return { ...item, checked: true };
          }
          return { ...item };
        });
        fieldData.inputItems = _.map(inputItems, item => {
          if (data.checkItems.includes(item.salaryItemId)) {
            return { ...item, checked: true };
          }
          return { ...item };
        });
        fieldData.sqlItems = _.map(sqlItems, item => {
          if (data.checkItems.includes(item.salaryItemId)) {
            return { ...item, checked: true };
          }
          return { ...item };
        });
        this.setState({ fieldData });
        this.fieldData = fieldData;
      });
    } else {
      const APIFox = standingBookType === "difference" ? getBalanceWelfareList : getWelfareList;
      APIFox().then(result => {
        let fieldData = {};
        let formulaItems = [];
        formulaItems = _.map(result, it => ({ ...it, salaryItemId: it.salaryItemName }));
        if (this.props.fieldData.formulaItems) {
          formulaItems = this.props.fieldData.formulaItems;
        }
        fieldData.formulaItems = formulaItems;

        this.setState({
          fieldData
        });
        this.fieldData = fieldData;
      });
    }
  }

  // 公式项改变
  handleFormalChange(item, value, flag) {
    item.checked = value == 1 ? true : false;
    let fieldData = { ...this.state.fieldData };
    if (flag === "formluma") { // 公式项
      fieldData.formulaItems.map(fieldItem => {
        if (item.salaryItemId === fieldItem.salaryItemId) {
          fieldItem.checked = item.checked;
        }
      });
    } else if (flag === "inputs") { // 输入项
      fieldData.inputItems.map(fieldItem => {
        if (item.salaryItemId === fieldItem.salaryItemId) {
          fieldItem.checked = item.checked;
        }
      });
    } else if (flag === "sql") { // sql项
      fieldData.sqlItems.map(fieldItem => {
        if (item.salaryItemId === fieldItem.salaryItemId) {
          fieldItem.checked = item.checked;
        }
      });
    }
    this.setState({
      fieldData
    });
    this.fieldData = fieldData;
  }

  // 添加按钮点击回调
  handleAddClick = async () => {
    const { status } = await this.cacheImportField();
    this.props.onAdd(this.fieldData);
    this.props.onCancel();
  };
  cacheImportField = () => {
    const salaryItemList = _.reduce(_.keys(this.fieldData), (pre, cur) => ([...pre, ...this.fieldData[cur]]), []);
    const salaryItems = _.map(_.filter(salaryItemList, it => !!it.checked), item => item.salaryItemId);
    return cacheImportField({ salaryItems });
  };

  // 标题checkbox点击
  handleTitleCheckboxChange(value, flag) {
    let checked = value == 1 ? true : false;
    let fieldData = { ...this.state.fieldData };
    if (flag === "formula") {
      fieldData.formulaItems.map(fieldItem => {
        fieldItem.checked = checked;
      });
    } else if (flag === "input") {
      fieldData.inputItems.map(fieldItem => {
        fieldItem.checked = checked;
      });
    } else if (flag === "sql") {
      fieldData.sqlItems.map(fieldItem => {
        fieldItem.checked = checked;
      });
    }
    this.setState({
      fieldData
    });

    this.fieldData = fieldData;
  }

  // 只显示已选中
  showSelectedChange(value) {
    let checked = value == 1 ? true : false;
    let fieldData = { ...this.fieldData };
    if (checked) {
      if (fieldData.formulaItems) {
        fieldData.formulaItems = fieldData.formulaItems.filter(fieldItem => fieldItem.checked);
      }
      if (fieldData.inputItems) {
        fieldData.inputItems = fieldData.inputItems.filter(fieldItem => fieldItem.checked);
      }
      if (fieldData.sqlItems) {
        fieldData.sqlItems = fieldData.sqlItems.filter(fieldItem => fieldItem.checked);
      }
    }

    this.setState({
      fieldData
    });
  }


  render() {
    const { fieldData } = this.state;
    const { isStandingBook } = this.props;
    return (
      <WeaDialog
        title="添加表头字段"
        visible={this.props.visible}
        style={{ width: 800 }}
        onCancel={() => {
          this.props.onCancel();
        }}
        buttons={[
          <Button type="primary" onClick={this.handleAddClick}>添加</Button>
        ]}
      >
        <div style={{ minHeight: "20vh", maxHeight: "50vh", overflow: "hidden auto", padding: "16px 20px" }}>
          {
            !_.isEmpty(fieldData.formulaItems) &&
            <div>
              <div style={{ height: "40px", lineHeight: "40px" }}>
                <WeaCheckbox content={!isStandingBook ? "公式项" : "全选"} onChange={(value) => {
                  this.handleTitleCheckboxChange(value, "formula");
                }}/>
              </div>
              <div style={{
                height: "100px",
                border: "1px solid #f2f2f2",
                margin: "10px",
                padding: "10px",
                overflowY: "scroll"
              }}>
                <Row>
                  {fieldData.formulaItems && fieldData.formulaItems.map(item => (
                    <Col span={6}>
                      <WeaCheckbox
                        value={item.checked ? 1 : 0}
                        content={item.salaryItemName}
                        onChange={(value) => {
                          this.handleFormalChange(item, value, "formula");
                        }}/></Col>
                  ))}
                </Row>
              </div>
            </div>
          }

          {
            !_.isEmpty(fieldData.inputItems) &&
            <div style={{ marginTop: "20px" }}>
              <div style={{ height: "50px", lineHeight: "50px" }}>
                <WeaCheckbox content="输入项" onChange={(value) => {
                  this.handleTitleCheckboxChange(value, "input");
                }}/>
              </div>
              <div style={{
                height: "100px",
                border: "1px solid #f2f2f2",
                margin: "10px",
                padding: "10px",
                overflowY: "scroll"
              }}>
                <Row>
                  {fieldData.inputItems && fieldData.inputItems.map(item => (
                    <Col span={6}>
                      <WeaCheckbox
                        value={item.checked ? 1 : 0}
                        content={item.salaryItemName}
                        onChange={(value) => {
                          this.handleFormalChange(item, value, "input");
                        }}/></Col>
                  ))}
                </Row>
              </div>
            </div>
          }

          {
            !_.isEmpty(fieldData.sqlItems) &&
            <div style={{ marginTop: "20px" }}>
              <div style={{ height: "50px", lineHeight: "50px" }}>
                <WeaCheckbox content="SQL项" onChange={(value) => {
                  this.handleTitleCheckboxChange(value, "sql");
                }}/>
              </div>
              <div style={{
                height: "100px",
                border: "1px solid #f2f2f2",
                margin: "10px",
                padding: "10px",
                overflowY: "scroll"
              }}>
                <Row>
                  {fieldData.sqlItems && fieldData.sqlItems.map(item => (
                    <Col span={6}>
                      <WeaCheckbox
                        value={item.checked ? 1 : 0}
                        content={item.salaryItemName}
                        onChange={(value) => {
                          this.handleFormalChange(item, value, "sql");
                        }}/></Col>
                  ))}
                </Row>
              </div>
            </div>
          }

          <div style={{ marginTop: "20px" }}>
            <WeaCheckbox content="只显示已选中" onChange={(value) => {
              this.showSelectedChange(value);
            }}/>
          </div>
        </div>
      </WeaDialog>
    );
  }
}