salary-management-front/pc4mobx/hrmSalary/pages/ledger/salaryItemForm.js

import React from "react";
import { Button, Icon, Table } from "antd";
import { WeaInputSearch, WeaHelpfulTip, WeaSelect } from "ecCom";
import { slideStep3Columns, dataSource } from "./columns";
import "./index.less";
import AddCategoryModal from "./step3/AddCategoryModal";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import CanMoveItem from "./step3/canMoveItem";
import UserInfoSelected from "./step3/UserInfoSelect";
import PreviewSalaryModal from "./step3/previewSalaryModal";

@inject("ledgerStore")
@observer
export default class SalaryItemForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      addCategoryVisible: false,
      previewVisible: false
    };
    const { ledgerStore: { empFieldList } } = this.props;
    empFieldList();
  }

  componentWillMount() {
    const { ledgerStore: { getLedgerItemForm } } = this.props;
    getLedgerItemForm();
  }

  handleAddCategorySave(name) {
    const { ledgerStore: { addItemGroup } } = this.props;
    addItemGroup(name);
  }

  handleCanMoveItemChange(dataSource, item) {
    const { ledgerStore: { itemGroups, setItemGroups } } = this.props;
    let groups = [...itemGroups];
    groups.map(i => {
      if (i.title == item.title) {
        item.items = dataSource;
      }
    });
    setItemGroups(groups);
  }

  // 薪资项目
  handleItemDataSourceChange(dataSource, item) {
    const { ledgerStore: { itemGroups, setItemGroups } } = this.props;
    let newItemGroups = [...itemGroups];
    newItemGroups.map(group => {
      if (group.id == item.id) {
        group.items = dataSource;
      }
    });
    setItemGroups(newItemGroups);
  }

  // 预览点击事件
  handlePreview() {
    this.setState({ previewVisible: true });
  }

  // 修改薪资分类标题回调
  handleItemTitleChange(item, value) {
    const { ledgerStore: { itemGroups, setItemGroups } } = this.props;
    let newItemGroups = [...itemGroups];
    newItemGroups.map(group => {
      if (group.id == item.id) {
        group.name = value;
      }
    });
    setItemGroups(newItemGroups);
  }

  // 删除分类回调
  handleGroupDelete(item) {
    const { ledgerStore: { itemGroups, setItemGroups } } = this.props;
    let newItemGroups = [...itemGroups];
    newItemGroups = newItemGroups.filter(group => group.id !== item.id);
    setItemGroups(newItemGroups);
  }

  // 修改列表数据顺序
  handleItemDataSourceChange(dataSource, item) {
    const { ledgerStore: { itemGroups, setItemGroups } } = this.props;
    dataSource.map((data, index) => {
      data.sortedIndex = index;
    });
    let itemResultGroups = itemGroups ? [...itemGroups] : [];
    itemResultGroups.map(groupItem => {
      if (groupItem.id == item.id) {
        groupItem.items = dataSource;
      }
    });
    setItemGroups(itemResultGroups);
  }

  render() {
    const {
      ledgerStore: {
        itemGroups,
        salaryItems,
        empBrowserList,
        setAddCategoryVisible,
        addCategoryVisible,
        baseInfoRequest
      }
    } = this.props;
    const { canEdit = "true" } = baseInfoRequest;
    const { previewVisible } = this.state;

    return (
      <div className="salaryItemForm">
        <div className="btnBar">
          <div className="btns">
            <Button
              type="default"
              onClick={() => {
                setAddCategoryVisible(true);
              }}
              disabled={canEdit !== "true"}>
              新增分类
            </Button>
            <Button
              type="default"
              style={{ marginLeft: "10px" }}
              onClick={() => {
                this.handlePreview();
              }}
              disabled={canEdit !== "true"}>
              预览
            </Button>
          </div>
          {/* <div className="searchInputWrapper">
                        <WeaInputSearch style={{width: "150px"}} />
                    </div> */}
        </div>

        <div className="userInfoWrapper">
          <div>
            <span>
              员工信息{" "}
              <WeaHelpfulTip
                style={{ marginLeft: "10px" }}
                width={100}
                title="姓名、部门、个税扣缴义务人为必须项，不可删除"
                placement="topLeft"
              />
            </span>
            <div className="rightBtnsWrapper">
              <Icon type="down" />
            </div>
          </div>

          <UserInfoSelected />
        </div>
        {itemGroups &&
          itemGroups.map(item => {
            if (item.items) {
              return (
                <CanMoveItem
                  disabled={canEdit !== "true"}
                  dataSource={toJS(item.items)}
                  onDataSourceChange={dataSource => {
                    this.handleItemDataSourceChange(dataSource, item);
                  }}
                  title={item.name}
                  onGroupDelete={() => {
                    this.handleGroupDelete(item);
                  }}
                  onTitleChange={value => {
                    this.handleItemTitleChange(item, value);
                  }}
                  onChange={dataSource => {
                    this.handleCanMoveItemChange(dataSource, item);
                  }}
                />
              );
            }
            return "";
          })}
        {addCategoryVisible &&
          <AddCategoryModal
            onSave={value => {
              this.handleAddCategorySave(value);
            }}
            visible={addCategoryVisible}
            onCancel={() => {
              setAddCategoryVisible(false);
            }}
          />}

        {previewVisible &&
          <PreviewSalaryModal
            visible={previewVisible}
            onCancel={() => {
              this.setState({ previewVisible: false });
            }}
          />}
      </div>
    );
  }
}