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

/*
 * Author: 黎永顺
 * name: 薪资项目-正常薪资所得
 * Description:
 * Date: 2022/12/13
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaButtonIcon, WeaInputSearch, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
import { Button, Modal } from "antd";
import CategoryAddModal from "./categoryAddModal";
import LedgerSalaryItemAddModal from "./ledgerSalaryItemAddModal";
import LedgerSalaryItemTable from "./ledgerSalaryItemTable";
import LedgerMovoTo from "./ledgerMovoTo";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

@inject("ledgerStore")
@observer
class LedgerSalaryItemNormal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      addCategoryItemsVisible: { visible: false, id: "", record: {} },
      categoryModal: {
        visible: false,
        title: "新增分类",
        name: "",
        id: ""
      },
      moveModalPayload: {
        visible: false, title: "",
        dataList: [], record: null, value: ""
      },
      salaryItemKeywords: ""
    };
  }

  handleAddCategory = (name = "", id = "") => {
    const { categoryModal } = this.state;
    this.setState({
      categoryModal: {
        ...categoryModal,
        visible: true,
        name,
        title: name ? "编辑分类" : "新增分类",
        id
      }
    });
  };
  handleDeleteCategory = (id) => {
    const { onDeleteCategroy } = this.props;
    Modal.confirm({
      title: "信息确认",
      content: "确认要删除吗?",
      onOk: () => {
        onDeleteCategroy(id);
      }
    });
  };
  handleDeleteCategoryItems = (id, selectedRowKeys) => {
    const { onDeleteCategroyItems } = this.props;
    Modal.confirm({
      title: "信息确认",
      content: "确认删除所选薪资项目吗？删除后此项目下的进位规则/保留小数位/公式内容会一起被清除!",
      onOk: () => {
        onDeleteCategroyItems(id, selectedRowKeys);
      }
    });
  };
  handleUpgo = (sortedIndex) => {
    const { onUpgo } = this.props;
    onUpgo(sortedIndex);
  };
  handleDowngo = (sortedIndex) => {
    const { onDowngo } = this.props;
    onDowngo(sortedIndex);
  };
  handleClose = () => {
    const { ledgerStore } = this.props;
    const { categoryForm: form } = ledgerStore;
    const { categoryModal } = this.state;
    this.setState({
      categoryModal: {
        ...categoryModal,
        visible: false,
        title: "新增分类",
        name: "",
        id: ""
      }
    }, () => form.resetForm());
  };
  handleCancelMove = () => {
    this.setState({
      moveModalPayload: {
        visible: false, title: "",
        dataList: [], value: "",
        record: null
      }
    });
  };
  handleChangeMoveVal = (value) => {
    const { moveModalPayload } = this.state;
    this.setState({
      moveModalPayload: {
        ...moveModalPayload, value
      }
    });
  };
  handleMoveTo = (record) => {
    const { salaryItemGroupId } = record;
    const { dataSource } = this.props;
    this.setState({
      moveModalPayload: {
        visible: true,
        title: "移动到",
        value: salaryItemGroupId !== "0" ? salaryItemGroupId : (_.find(dataSource, it => it.name === "未分类").id || _.find(dataSource, it => it.name === "未分类").uuid),
        record,
        dataList: _.map(dataSource, item => ({ key: item.id || item.uuid, showname: item.name }))
      }
    });
  };
  handleSubmitMoveTo = () => {
    const { onMoveSalaryItem, dataSource } = this.props;
    const { moveModalPayload } = this.state;
    const { record, value } = moveModalPayload;
    this.handleCancelMove();
    onMoveSalaryItem(value, record, _.find(dataSource, it => (it.id === value || it.uuid === value)).name);
  };

  render() {
    const {
      editId,
      saveSalarySobId,
      dataSource,
      onSaveCategory,
      onDropCategoryItem,
      onHandleItemhide,
      onChangeSelectedRowKeys,
      onAddSalaryItems,
      incomeCategoriesTitleName,
      taxAgentStore
    } = this.props;
    const { showOperateBtn } = taxAgentStore;
    const { categoryModal, addCategoryItemsVisible, moveModalPayload, salaryItemKeywords } = this.state;
    const newDateSource = _.map(dataSource, item => {
      return {
        ...item,
        items: _.filter(item.items || [], child => (child.name.indexOf(salaryItemKeywords) !== -1 || child.formulaContent.indexOf(salaryItemKeywords) !== -1))
      };
    });
    return (
      <WeaSearchGroup needTigger={false} showGroup
                      title={<TitleComp showOperateBtn={showOperateBtn} titleName={incomeCategoriesTitleName}
                                        onAddCategory={this.handleAddCategory} keyword={salaryItemKeywords}
                                        onChange={val => this.setState({ salaryItemKeywords: val })}
                      />}>
        <div className="categroyListWrapper">
          {
            _.map(newDateSource, field => {
              const { items, id, uuid } = field;
              return <WeaSearchGroup
                needTigger showGroup
                title={
                  <TitleNormalComp
                    {...field}
                    showOperateBtn={showOperateBtn}
                    dataSourceLen={dataSource.length}
                    onEditCategory={this.handleAddCategory}
                    onDeleteCategory={this.handleDeleteCategory}
                    onDeleteCategoryItems={this.handleDeleteCategoryItems}
                    onAddCategoryItems={(id) => this.setState({
                      addCategoryItemsVisible: {
                        ...addCategoryItemsVisible, visible: true, id
                      }
                    })}
                    onUpgo={this.handleUpgo}
                    onDowngo={this.handleDowngo}
                  />
                }
              >
                <LedgerSalaryItemTable
                  tableData={items}
                  dataSource={_.find(dataSource, childItem => childItem.uuid === uuid).items}
                  salarySobId={editId || saveSalarySobId}
                  selectedRowKeys={field.selectedRowKeys || []}
                  onDropCategoryItem={(data) => onDropCategoryItem(field, data)}
                  onHandleItemhide={(data) => onHandleItemhide(field, data)}
                  onChangeSelectedRowKeys={(data) => onChangeSelectedRowKeys(field, data)}
                  onMoveTo={this.handleMoveTo}
                  onAddCategoryItems={(record) => this.setState({
                    addCategoryItemsVisible: { visible: true, record, id: uuid }
                  })}
                />
              </WeaSearchGroup>;
            })
          }
          <LedgerMovoTo
            {...moveModalPayload}
            onCancel={this.handleCancelMove}
            onChangeMoveVal={this.handleChangeMoveVal}
            onSubmitMoveTo={this.handleSubmitMoveTo}
          />
          <LedgerSalaryItemAddModal
            {...addCategoryItemsVisible}
            itemGroups={dataSource}
            onCancel={() => this.setState({ addCategoryItemsVisible: { visible: false, id: "", record: {} } })}
            onAddSalaryItems={onAddSalaryItems}
          />
          <CategoryAddModal
            {...categoryModal}
            onSaveCategory={onSaveCategory}
            onCancel={this.handleClose}
          />
        </div>
      </WeaSearchGroup>
    );
  }
}

export default LedgerSalaryItemNormal;
const TitleNormalComp = (props) => {
  const {
    name, onEditCategory, onDeleteCategory,
    sortedIndex, dataSourceLen, uuid, onUpgo,
    onDowngo, selectedRowKeys = [], onDeleteCategoryItems,
    onAddCategoryItems, items, showOperateBtn
  } = props;
  return <div className="titleNormalWrapper">
    <div className="titleWrapper">
      <span>{name}</span>
      {
        name !== "未分类" && showOperateBtn &&
        <i className="icon-coms-edit" title="编辑" onClick={() => onEditCategory(name, uuid)}/>
      }
      {
        name !== "未分类" && _.isEmpty(items) && showOperateBtn &&
        <i className="icon-coms-Delete" title="删除" onClick={() => onDeleteCategory(uuid)}/>
      }
      {
        name !== getLabel(111, "未分类") && sortedIndex !== 0 && showOperateBtn &&
        <i className="icon-coms-Reverse" title="向上移动" onClick={() => onUpgo(sortedIndex)}/>
      }
      {
        name !== getLabel(111, "未分类") && sortedIndex !== dataSourceLen - 2 && showOperateBtn &&
        <i className="icon-coms-positive-sequence" title="向下移动" onClick={() => onDowngo(sortedIndex)}/>
      }
    </div>
    <div className="titleBtnWrapper">
      {
        showOperateBtn && <React.Fragment>
          <WeaButtonIcon buttonType="del" type="primary" disabled={_.isEmpty(selectedRowKeys)}
                         onClick={() => onDeleteCategoryItems(uuid, selectedRowKeys)}/>
          <WeaButtonIcon buttonType="add" type="primary" onClick={() => onAddCategoryItems(uuid)}/>
        </React.Fragment>
      }
    </div>
  </div>;
};

const TitleComp = (props) => {
  const { onAddCategory, titleName, showOperateBtn, salaryItemKeywords, onChange } = props;
  return <div className="titleWrapper">
    <div><span className="topTitle active">{titleName}</span></div>
    <div>
      {
        showOperateBtn &&
        <Button type="ghost" onClick={() => onAddCategory()} style={{ marginRight: 10 }}>新增分类</Button>
      }
      <WeaInputSearch value={salaryItemKeywords} onChange={onChange}
                      placeholder={getLabel(111, "请输入薪资项目名称或者公式名称")}
      />
    </div>
  </div>;
};