salary-management-front/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerAccountSalaryItemsSet.js

/*
 * Author: 黎永顺
 * name: 薪资核算规则配置-审批薪资项目
 * Description:
 * Date: 2024/4/24
 */
import React, { Component } from "react";
import { WeaButtonIcon, WeaLocaleProvider, WeaSortable, WeaTransfer } from "ecCom";
import LedgerAccountApprRuleClassifyNameEditDialog from "./ledgerAccountApprRuleClassifyNameEditDialog";
import * as API from "../../../apis/ledger";
import { Icon, Modal } from "antd";
import cs from "classnames";
import SalaryItemModal from "../../payroll/stepForm/salaryItemModal";

const getLabel = WeaLocaleProvider.getLabel;

class LedgerAccountSalaryItemsSet extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editDialog: { visible: false, groupName: "", groupId: "", title: "" },
      salaryItemDialog: { visible: false, title: getLabel(111, "薪资项目项"), options: [], groupId: "" }
    };
  }

  handleDeleteClick = (group, item = {}) => {
    Modal.confirm({
      title: getLabel(131329, "信息确认"),
      content: getLabel(543231, "确认删除本条数据吗?"),
      onOk: () => this.props.onDelete(group, item)
    });
  };
  handleAddSalaryItems = (group) => {
    const { salaryItemDialog } = this.state;
    const { salarySobId, datas } = this.props;
    const payload = {
      salarySobId, excludeIds: _.reduce(datas, (pre, cur) => {
        return pre.concat(_.map(cur.approvalItems, o => o.salaryItemId));
      }, [])
    };
    API.getListSalaryItem(payload).then(({ status, data }) => {
      if (status) this.setState({
        salaryItemDialog: {
          ...salaryItemDialog, visible: true, options: data, groupId: group.id
        }
      });
    });
  };
  handleConfirm = () => {
    const { salaryItemDialog } = this.state;
    this.setState({
      salaryItemDialog: { ...salaryItemDialog, visible: false }
    }, () => this.props.onAddItems(salaryItemDialog.groupId, _.filter(this.state.salaryItemDialog.options, g => g.checkedSalaryItem)));
  };

  render() {
    const { editDialog, salaryItemDialog } = this.state;
    const { datas, showOperateBtn = true } = this.props;
    return (
      <div>
        <div style={{ textAlign: "right", padding: "10px 0" }}>
          {
            showOperateBtn && <WeaButtonIcon buttonType="add" type="primary"
                                             onClick={() => this.setState({
                                               editDialog: { visible: true, title: getLabel(111, "添加分类") }
                                             })}/>
          }
        </div>
        <div className={cs("salaryItemSettingWrapper", { required: _.isEmpty(datas) })}>
          <WeaSortable
            datas={_.map(datas, o => ({ ...o, filter: !showOperateBtn }))}
            onChange={list => this.props.onChange(list)}
            renderNodeItem={(item) => {
              return <div className="salaryItemWrapper">
                <div className="salaryItemHeader">
                <span className="titleWrapper">
                  <span className="salaryClassTitle">{item.groupName}</span>
                  {
                    showOperateBtn &&
                    <span className="iconWrapper">
                    <i className="icon-coms-edit" onClick={() => this.setState({
                      editDialog: {
                        visible: true, groupName: item.groupName, groupId: item.id, title: getLabel(111, "分类名称编辑")
                      }
                    })}/>
                    <i className="icon-coms-Delete" onClick={() => this.handleDeleteClick(item)}/>
                  </span>
                  }
                </span>
                  {
                    showOperateBtn && <i className="icon-coms-Add-to" onClick={() => this.handleAddSalaryItems(item)}/>
                  }
                </div>
                <div className="salaryItemContent">
                  {
                    !_.isEmpty(item.approvalItems) ?
                      <WeaSortable
                        datas={_.map(item.approvalItems, o => ({ ...o, filter: !showOperateBtn }))}
                        onChange={(items) => this.props.onChange(
                          _.map(datas, child => {
                            if (child.id === item.id) {
                              return { ...child, approvalItems: items };
                            }
                            return { ...child };
                          })
                        )}
                        renderNodeItem={(filed) => {
                          return <div className="salaryItemList">
                            <div className="salaryItem" title={filed.salaryItemName}>
                              <div className="salaryItemName">{filed.salaryItemName}</div>
                              {
                                showOperateBtn &&
                                <Icon type="cross" onClick={() => this.handleDeleteClick(item, filed)}/>
                              }
                            </div>
                          </div>;
                        }}
                        className="wea-sortable-salary-item"
                      /> :
                      <div className="empty">暂无数据</div>
                  }
                </div>
              </div>;
            }}
            className="wea-sortable-salary-item"
          />
          <LedgerAccountApprRuleClassifyNameEditDialog {...editDialog} {...this.props}
                                                       onCancel={() => this.setState({
                                                         editDialog: { ...editDialog, visible: false }
                                                       })}/>
          <SalaryItemModal {...salaryItemDialog}
                           onCancel={() => this.setState({
                             salaryItemDialog: { ...salaryItemDialog, visible: false }
                           })} onConfirm={this.handleConfirm}>
            <div className="modalContent">
              <WeaTransfer
                data={salaryItemDialog.options}
                selectedKeys={_.map(_.filter(salaryItemDialog.options, g => g.checkedSalaryItem), o => o.id)}
                onChange={v => {
                  this.setState({
                    salaryItemDialog: {
                      ...salaryItemDialog,
                      options: _.map(salaryItemDialog.options, o => ({ ...o, checkedSalaryItem: _.includes(v, o.id) }))
                    }
                  });
                }}
              />
            </div>
          </SalaryItemModal>
        </div>
      </div>
    );
  }
}

export default LedgerAccountSalaryItemsSet;