salary-management-front/pc4mobx/hrmSalary/pages/calculate/doCalc/components/expFieldsSetDialog/index.js

/*
 * Author: 黎永顺
 * name:自定义导出-导出字段设置
 * Description:
 * Date: 2024/3/28
 */
import React, { Component } from "react";
import { WeaCheckbox, WeaDialog, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
import { Button, Col, message, Row } from "antd";
import * as API from "../../../../../apis/calculate";
import TempDialog from "./tempDialog";

const getLabel = WeaLocaleProvider.getLabel;

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      itemsCheckeds: [], itemsByGroup: [],
      tempDialog: { visible: false, salaryAcctRecordId: "", id: "", salaryItemIds: [] }
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) this.getExportField(nextProps);
    if (nextProps.visible !== this.props.visible && !nextProps.visible) this.setState({
      itemsCheckeds: [], itemsByGroup: []
    });
  }

  getExportField = (props) => {
    const { salaryAcctRecordId, checkItems } = props;
    API.getExportField({ salaryAcctRecordId }).then(({ status, data }) => {
      if (status) {
        const { itemsByGroup } = data;
        this.setState({ itemsByGroup, itemsCheckeds: checkItems });
      }
    });
  };
  handleSelectGroupAll = (groupId, checked) => {
    const { itemsCheckeds, itemsByGroup } = this.state;
    _.map(itemsByGroup, item => {
      if (item.salarySobItemGroupId === groupId) {
        if (!!Number(checked)) {
          this.setState({
            itemsCheckeds: [...itemsCheckeds, ..._.map(item.salaryItems, child => String(child.salaryItemId))]
          });
        } else {
          this.setState({
            itemsCheckeds: _.differenceWith(itemsCheckeds, _.map(item.salaryItems, child => String(child.salaryItemId)), _.isEqual)
          });
        }
      }
    });
  };
  save = () => {
    const { itemsCheckeds } = this.state;
    const { salaryAcctRecordId, tempId: id, templateName } = this.props;
    if (!id) {
      this.setState({
        tempDialog: {
          visible: true, salaryAcctRecordId, id, salaryItemIds: itemsCheckeds
        }
      });
    } else {
      API.saveExportTemplate({ templateName, salaryAcctRecordId, id, salaryItemIds: itemsCheckeds })
        .then(({ status, errormsg }) => {
          this.setState({ loading: false });
          if (status) {
            message.success(getLabel(111, "操作成功！"));
            this.props.onCancel(true);
          } else {
            message.error(errormsg);
          }
        }).catch(() => this.setState({ loading: false }));
    }
  };

  render() {
    const { itemsCheckeds, itemsByGroup, tempDialog } = this.state;
    let dataSource = _.map(itemsByGroup, item => {
      return {
        ...item, salaryItems: _.map(item.salaryItems, child => {
          return { ...child, checked: itemsCheckeds.includes(String(child.salaryItemId)) };
        })
      };
    });
    return (
      <WeaDialog
        {...this.props} hasScroll scalable title={getLabel(111, "导出字段设置")}
        initLoadCss className="customEpDialogLayout"
        style={{
          width: 700, height: 606.6, minHeight: 200, minWidth: 380, maxHeight: "70%",
          maxWidth: "90%", overflow: "hidden", transform: "translate(0px, 0px)"
        }}
        buttons={[<Button type="primary" onClick={this.save}>{getLabel(111, "保存")}</Button>]}
      >
        {
          _.map(dataSource, item => {
            const { salarySobItemGroupName, salaryItems, salarySobItemGroupId } = item;
            const value = _.every(salaryItems, it => !!it.checked) ? "1" : "0";
            return <WeaSearchGroup showGroup needTigger
                                   title={<WeaCheckbox content={salarySobItemGroupName} value={value}
                                                       onChange={(val) => this.handleSelectGroupAll(salarySobItemGroupId, val)}
                                   />}>
              <Row gutter={16}>
                {
                  !_.isEmpty(salaryItems) ?
                    _.map(salaryItems, it => {
                      const { salaryItemId, salaryItemName, checked } = it;
                      return <Col span={8} style={{ marginBottom: 16 }}>
                        <WeaCheckbox content={salaryItemName} value={checked ? "1" : "0"}
                                     onChange={() => this.setState({ itemsCheckeds: _.xorWith(itemsCheckeds, [String(salaryItemId)], _.isEqual) })}
                        />
                      </Col>;
                    }) : <Col span={24} style={{
                      minHeight: 20,
                      padding: "5%",
                      textAlign: "center"
                    }}>{getLabel(83553, "暂无数据")}</Col>
                }
              </Row>
            </WeaSearchGroup>;
          })
        }
        <TempDialog {...tempDialog} onCancel={(isRefresh) => this.setState({
          tempDialog: { ...tempDialog, visible: false }
        }, () => isRefresh && this.props.onCancel(true))}/>
      </WeaDialog>
    );
  }
}

export default Index;