salary-management-front/pc4mobx/hrmSalary/pages/ledger/step3/canMoveItem.js

import React, { Fragment } from "react";
import { Icon, Table, message, Modal } from "antd";
import { WeaTable } from "ecCom";
import { slideStep3Columns } from "../columns";
import AddSalaryItemModal from "./AddSalaryItemModal";
import { inject, observer } from "mobx-react";
import FormalFormModal from "../../salaryItem/formalFormModal";
import AddCategoryModal from "../step3/AddCategoryModal";
import { toJS } from "mobx";

@inject("ledgerStore")
@observer
export default class CanMoveItem extends React.Component {
  constructor(props) {
    super(props);
    let columns = slideStep3Columns.map(item => {
      item = { ...item };
      if (item.key == "formulaContent") {
        item.render = (text, record) => {
          if (record.canEdit) {
            return (
              <span className="linkWapper">
                <a
                  onClick={() => {
                    this.handleFormulaClick(record.formulaId, record);
                  }}>
                  {text}
                </a>
              </span>
            );
          } else {
            return (
              <span>
                {text}
              </span>
            );
          }
        };
      }
      return item;
    });
    this.state = {
      addItemVisible: false,
      showContent: true,
      selectedRowKeys: [],
      columns,
      formalModalVisible: false,
      addCategoryVisible: false
    };

    this.formulaId = "";
    this.record = {};
    this.title = "";
  }

  // 编辑公式
  handleFormulaClick(formulaId, record) {
    this.formulaId = formulaId;
    this.record = record;
    this.setState({
      formalModalVisible: true
    });
  }

  handleTiggleContent() {
    this.setState({ showContent: !this.state.showContent });
  }

  onSelectChange = selectedRowKeys => {
    this.setState({ selectedRowKeys });
  };

  // 删除
  handleDelete = () => {
    const { selectedRowKeys } = this.state;
    if (selectedRowKeys.length == 0) {
      message.warning("为选择任何条目");
      return;
    }
    Modal.confirm({
      title: "信息确认",
      content: "确认删除",
      onOk: () => {
        const { dataSource } = this.props;
        let result = [...dataSource];
        this.props.onChange(
          result.filter(item => selectedRowKeys.indexOf(item.key) < 0)
        );
      },
      onCancel: () => {}
    });
  };

  // 保存
  handleSaveFormal(data) {
    let record = { ...this.record };
    record.formulaId = data.id;
    let dataSource = [...this.props.dataSource];
    dataSource.map(item => {
      if (item.id == record.id) {
        item.formulaId = data.id;
        item.formulaContent = data.formula;
      }
    });
    this.props.onDataSourceChange(dataSource);
  }

  // 编辑分类名称
  handleUpdateCategorySave(name) {
    this.props.onTitleChange && this.props.onTitleChange(name);
    this.setState({
      addCategoryVisible: false
    });
  }

  // 修改分类名称，弹出修改弹出
  handleEditGroupIconClick(title) {
    this.title = title;
    this.setState({ addCategoryVisible: true });
  }

  // 删除分类回调
  handleDeleteGroupIconClick() {
    Modal.confirm({
      title: "信息确认",
      content: "确认删除",
      onOk: () => {
        this.props.onGroupDelete && this.props.onGroupDelete();
      },
      onCancel: () => {}
    });
  }

  render() {
    const {
      disabled,
      ledgerStore: { setAddItemVisible, addItemVisible }
    } = this.props;
    const {
      selectedRowKeys,
      formalModalVisible,
      addCategoryVisible
    } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      getCheckboxProps: record => ({
        disabled: !record.canDelete
      })
    };

    return (
      <div className="tableItemWrapper">
        <div style={{ padding: "10px" }}>
          <span className="itemTitle">
            {this.props.title}
            {this.props.title !== "未分类" &&
              <span>
                {!disabled &&
                  <Fragment>
                    <i
                      className="icon-coms-edit"
                      style={{
                        marginLeft: "10px",
                        marginRight: "10px",
                        cursor: "pointer"
                      }}
                      onClick={() => {
                        this.handleEditGroupIconClick(this.props.title);
                      }}
                    />
                    <i
                      className="icon-coms-Delete"
                      style={{ cursor: "pointer" }}
                      onClick={() => {
                        this.handleDeleteGroupIconClick();
                      }}
                    />
                  </Fragment>}
              </span>}
          </span>
          <span className="rightBtnsWrapper">
            {!disabled &&
              <Fragment>
                <Icon
                  className="iconItem"
                  type="minus-square"
                  onClick={() => {
                    this.handleDelete();
                  }}
                />
                <Icon
                  className="iconItem"
                  type="plus-square"
                  onClick={() => {
                    this.setState({ addItemVisible: true });
                  }}
                />
              </Fragment>}
            <Icon
              type={this.state.showContent ? "down" : "left"}
              style={{ cursor: "pointer" }}
              onClick={() => {
                this.handleTiggleContent();
              }}
            />
          </span>
        </div>
        {this.state.showContent &&
          <WeaTable
            rowSelection={rowSelection}
            dataSource={this.props.dataSource}
            columns={this.state.columns}
            onRow={(record, index) => ({
              index,
              moveRow: record
            })}
            pagination={false}
            onDrop={datas => this.props.onDataSourceChange(datas)}
            draggable={true}
          />}
        {this.state.addItemVisible &&
          <AddSalaryItemModal
            visible={this.state.addItemVisible}
            title={this.props.title}
            onCancel={() => {
              this.setState({ addItemVisible: false });
            }}
          />}

        {formalModalVisible &&
          <FormalFormModal
            formulaId={this.formulaId}
            visible={formalModalVisible}
            onSaveFormal={data => {
              this.handleSaveFormal(data);
            }}
            onCancel={() =>
              this.setState({
                formalModalVisible: false
              })}
          />}

        {/* 编辑分类名称 */}
        {addCategoryVisible &&
          <AddCategoryModal
            title={this.title}
            onSave={value => {
              this.handleUpdateCategorySave(value);
            }}
            visible={addCategoryVisible}
            onCancel={() => {
              this.setState({ addCategoryVisible: false });
            }}
          />}
      </div>
    );
  }
}