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

import React from "react";
import { inject, observer } from "mobx-react";

import { Button, Dropdown, Menu, Modal, Switch } from "antd";

import { WeaInputSearch, WeaSlideModal, WeaTable, WeaTop } from "ecCom";
import { renderNoright } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from "../../components/customTab";
import StepSlide from "../../components/stepSlide";
import SlideBaseForm from "./slideBaseForm";
import SlideRefereUser from "./slideRefereUser";
import SalaryItemForm from "./salaryItemForm";
import CalRulesForm from "./calcRulesForm";
import ValidRulesForm from "./validRulesForm";
import SlideModalTitle from "../../components/slideModalTitle";
import CopyFormModal from "./copyFormModal";
import "./index.less";

@inject("ledgerStore", "taxAgentStore")
@observer
export default class Ledger extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      selectedKey: "0",
      stepSlideVisible: false,
      editSlideVisible: false,
      copyFormVisible: false,
      currentStep: 0,
      selectedTab: 0,
      currentReocrd: {},
      searchValue: "",
      step1Request: {}
    };
  }

  handleSearch(value) {
    const { ledgerStore: { getTableDatas } } = this.props;
    getTableDatas({ name: value });
  }

  componentWillMount() {
    const {
      ledgerStore: { doInit },
      taxAgentStore: { getTaxAgentSelectListAsAdmin }
    } = this.props;
    doInit();
    getTaxAgentSelectListAsAdmin();
  }

  handleItemStatusChange(value, record) {
    const { ledgerStore: { changeLedgerStatus } } = this.props;
    changeLedgerStatus(record.id, value ? 0 : 1);
  }

  handleItemClick(record, selectedTab = 0) {
    const { ledgerStore: { setSalarySobId } } = this.props;
    setSalarySobId(record.id);
    this.setState({
      selectedTab,
      editSlideVisible: true,
      request: record
    });
  }

  // 编辑Slide保存按钮
  handleEditSlideSave() {
    const { selectedTab, step1Request } = this.state;
    const {
      ledgerStore: {
        saveLedgerItem,
        saveAdjustmentRule,
        saveLedgerBasic,
        baseInfoRequest
      }
    } = this.props;
    if (selectedTab == 0) {
      saveLedgerBasic(baseInfoRequest);
    } else if (selectedTab == 2) {
      saveLedgerItem();
    } else if (selectedTab == 3) {
      saveAdjustmentRule();
    }
  }

  // 增加编辑功能，重写columns绑定事件
  getColumns = columns => {
    let newColumns = "";
    newColumns = columns.map(column => {
      let newColumn = column;
      newColumn.render = (text, record, index) => {
        //前端元素转义
        let valueSpan =
          record[newColumn.dataIndex + "span"] !== undefined
            ? record[newColumn.dataIndex + "span"]
            : record[newColumn.dataIndex];
        switch (newColumn.dataIndex) {
          case "name":
            return (
              <a
                onClick={() => {
                  this.handleItemClick(record);
                }}>
                {text}
              </a>
            );
          case "disable":
            return (
              <Switch
                checked={text == 0}
                onChange={value => {
                  this.handleItemStatusChange(value, record);
                }}
              />
            );
          case "operate":
            return (
              <a
                onClick={() => {
                  this.handleItemClick(record, 1);
                }}>
                关联人员
              </a>
            );
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
        }
      };
      return newColumn;
    });
    return newColumns;
  };

  onOperatesClick = (record, type) => {
    const { ledgerStore: { deleteLedger } } = this.props;
    switch (type.toString()) {
      case "0": // 编辑
        this.handleItemClick(record);
        break;
      case "1": // 复制
        this.setState({
          copyFormVisible: true,
          currentReocrd: record
        });
        break;
      case "3": // 关联人员
        this.handleItemClick(record, 1);
        break;
      case "4": // 删除
        Modal.confirm({
          title: "信息确认",
          content: "确认删除",
          onOk: () => {
            deleteLedger([record.id]);
          },
          onCancel: () => {
          }
        });

        break;
    }
  };

  handleCopySave = value => {
    const { ledgerStore: { doCopy } } = this.props;
    doCopy({ id: this.state.currentReocrd.id, ...value }).then(() => {
      this.setState({ copyFormVisible: false });
    });
  };

  handleNew = () => {
    const { ledgerStore: { initSlideData } } = this.props;
    initSlideData();
    this.setState({ stepSlideVisible: true, currentStep: 0 });
  };

  render() {
    const { ledgerStore, taxAgentStore } = this.props;
    const {
      loading,
      saveLoading,
      dataSource,
      columns,
      pageObj,
      setPageObj,
      hasRight,
      form,
      condition,
      tableStore,
      showSearchAd,
      getTableDatas,
      doSearch,
      setShowSearchAd,
      baseInfoRequest
    } = ledgerStore;
    const { showOperateBtn } = taxAgentStore;
    const { canEdit } = baseInfoRequest;
    const { currentStep, selectedTab } = this.state;
    if (!hasRight && !loading) {
      // 无权限处理
      return renderNoright();
    }

    const rightMenu = [
      // 右键菜单
      // {
      //   key: "BTN_COLUMN",
      //   icon: <i className="icon-coms-Custom"/>,
      //   content: "显示列定制",
      //   onClick: this.showColumn
      // }
    ];
    const collectParams = {
      // 收藏功能配置
      favname: "薪资账套",
      favouritetype: 1,
      objid: 0,
      link: "wui/index.html#/ns_demo03/index",
      importantlevel: 1
    };
    const adBtn = [
      // 高级搜索内部按钮
      <Button type="primary" onClick={doSearch}>
        搜索
      </Button>,
      <Button type="ghost" onClick={() => form.resetForm()}>
        重置
      </Button>,
      <Button type="ghost" onClick={() => setShowSearchAd(false)}>
        取消
      </Button>
    ];

    const topTab = [];

    const renderRightOperation = () => {
      return (
        <div style={{ display: "inline-block" }}>
          {showOperateBtn &&
            <Button
              type="primary"
              style={{ marginRight: "10px" }}
              onClick={() => this.handleNew()}>
              新建
            </Button>}
          <WeaInputSearch
            value={this.state.searchValue}
            onChange={value => {
              this.setState({ searchValue: value });
            }}
            placeholder={"请输入薪资账套名称"}
            onSearch={value => {
              this.handleSearch(value);
            }}
          />
        </div>
      );
    };

    const nextStep = () => {
      const { currentStep } = this.state;
      this.setState({ currentStep: currentStep + 1 });
    };

    const prevStep = () => {
      const { currentStep } = this.state;
      this.setState({ currentStep: currentStep - 1 });
    };
    const steps = [
      "基础设置",
      "关联人员",
      "薪资项目",
      "调薪计薪规则"
      // "校验规则"
    ];

    const handleStep1Save = () => {
      const { step1Request } = this.state;
      const { ledgerStore: { saveLedgerBasic, baseInfoRequest } } = this.props;
      saveLedgerBasic(baseInfoRequest).then(() => {
        nextStep();
      });
    };

    const handleStep3Save = () => {
      const { ledgerStore: { saveAdjustmentRule } } = this.props;
      saveAdjustmentRule().then(() => {
        nextStep();
      });
    };

    const handleStepSave = () => {
      const { currentStep } = this.state;
      const {
        ledgerStore: {
          saveLedgerBasic,
          saveLedgerItem,
          saveAdjustmentRule,
          baseInfoRequest
        }
      } = this.props;
      if (currentStep == 0) {
        saveLedgerBasic(baseInfoRequest).then(() => {
          nextStep();
        });
        // } else if (currentStep == 1 || currentStep == 3) {
      } else if (currentStep == 1) {
        nextStep();
      } else if (currentStep == 2) {
        saveLedgerItem().then(() => {
          nextStep();
        });
        // } else if (currentStep == 4) {
      } else if (currentStep == 3) {
        saveAdjustmentRule().then(() => {
          this.setState({ stepSlideVisible: false });
        });
      }
    };

    const pagination = {
      total: pageObj.total,
      showTotal: total => `共 ${total} 条`,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        setPageObj({ ...pageObj, current, pageSize });
        getTableDatas({ current, pageSize, name: this.state.searchValue });
      },
      onChange: current => {
        setPageObj({ ...pageObj, current, pageSize: pageObj.pageSize });
        getTableDatas({
          current,
          pageSize: pageObj.pageSize,
          name: this.state.searchValue
        });
      }
    };
    const newColumns = _.map([...columns], item => {
      if (item.dataIndex === "name") {
        return {
          ...item,
          render: (text, record) =>
            <div className="linkWapper">
              <a
                href="javaScript:void(0);"
                onClick={() => {
                  this.handleItemClick(record);
                }}>
                {text}
              </a>
            </div>
        };
      } else if (item.dataIndex === "disable") {
        return {
          ...item,
          render: (text, record) =>
            <Switch
              checked={text == 0}
              disabled={!showOperateBtn}
              onChange={value => {
                this.handleItemStatusChange(value, record);
              }}
            />
        };
      } else if (item.dataIndex === "operate" && showOperateBtn) {
        return {
          ...item,
          render: (text, record) =>
            <div className="linkWapper">
              <a
                onClick={() => {
                  this.handleItemClick(record, 1);
                }}>
                关联人员
              </a>
              <Dropdown
                overlay={
                  <Menu
                    onClick={item => this.onOperatesClick(record, item.key)}>
                    <Menu.Item key="0">编辑</Menu.Item>
                    <Menu.Item key="1">复制</Menu.Item>
                    {/*<Menu.Item key="3">关联人员</Menu.Item>*/}
                    <Menu.Item key="4">删除</Menu.Item>
                  </Menu>
                }>
                <a className="ant-dropdown-link" href="javaScript:void(0);">
                  <i className="icon-coms-more" style={{ marginLeft: 18 }}/>
                </a>
              </Dropdown>
            </div>
        };
      } else {
        return { ...item };
      }
    });

    return (
      <div className="mySalaryBenefitsWrapper">
        <WeaTop
          title="薪资账套" // 文字
          icon={<i className="icon-coms-fa"/>} // 左侧图标
          iconBgcolor="#F14A2D" // 左侧图标背景色
          showDropIcon={false} // 是否显示下拉按钮
          dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
          dropMenuProps={{ collectParams }}>
          <CustomTab
            searchOperationItem={renderRightOperation()}
            onChange={v => {
            }}
          />
          <WeaTable
            rowKey="id"
            columns={
              showOperateBtn
                ? newColumns
                : _.filter(newColumns, it => it.dataIndex !== "operate")
            }
            dataSource={dataSource}
            pagination={pagination}
            loading={loading}
            scroll={{ x: 1300 }}
          />
          {this.state.stepSlideVisible &&
            <StepSlide
              visible={this.state.stepSlideVisible}
              steps={steps}
              currentStep={currentStep}
              onCancel={() => {
                this.setState({ stepSlideVisible: false });
              }}
              customOperate={
                currentStep == 0 ? [
                  <Button
                    type="primary"
                    loading={saveLoading}
                    onClick={() => {
                      handleStep1Save();
                    }}>
                    保存并进入下一步
                  </Button>
                ] : currentStep == 1 ? [
                  <Button
                    type="default"
                    onClick={() => {
                      this.setState({ stepSlideVisible: false });
                    }}>
                    完成，跳过所有步骤
                  </Button>,
                  <Button
                    type="primary"
                    style={{ marginLeft: "10px" }}
                    onClick={() => {
                      handleStepSave();
                    }}>
                    下一步
                  </Button>
                ] : currentStep == 2 ? [
                  <Button
                    type="default"
                    onClick={() => {
                      this.setState({ stepSlideVisible: false });
                    }}>
                    完成，跳过所有步骤
                  </Button>,
                  <Button
                    type="default"
                    style={{ marginLeft: "10px" }}
                    onClick={() => {
                      prevStep();
                    }}>
                    上一步
                  </Button>,
                  <Button
                    type="primary"
                    loading={saveLoading}
                    style={{ marginLeft: "10px" }}
                    onClick={() => {
                      handleStepSave();
                    }}>
                    保存并进入下一步
                  </Button>
                ] : currentStep == 3 ? [
                  <Button
                    type="default"
                    style={{ marginRight: "10px" }}
                    onClick={() => {
                      prevStep();
                    }}>
                    上一步
                  </Button>,
                  <Button
                    type="primary"
                    onClick={() => {
                      handleStepSave();
                    }}>
                    完成
                  </Button>
                ] : []
              }
              title="新建账套"
              content={
                <div>
                  {currentStep == 0 && <SlideBaseForm/>}
                  {currentStep == 1 && <SlideRefereUser/>}
                  {currentStep == 2 && <SalaryItemForm/>}
                  {currentStep == 3 && <CalRulesForm/>}
                  {currentStep == 4 && <ValidRulesForm/>}
                </div>
              }
            />}
          {this.state.editSlideVisible &&
            <WeaSlideModal
              className="slideOuterWrapper"
              visible={this.state.editSlideVisible}
              top={0}
              width={65}
              height={100}
              direction={"right"}
              measure={"%"}
              title={
                <SlideModalTitle
                  subtitle={`编辑账套`}
                  tabs={[
                    { title: "基础设置", key: 0 },
                    { title: "关联人员", key: 1 },
                    { title: "薪资项目", key: 2 },
                    { title: "调薪计薪规则", key: 3 }
                    // { title: "校验规则", key: 4 }
                  ]}
                  loading={saveLoading}
                  showOperateBtn={showOperateBtn}
                  editable={canEdit === "true"}
                  selectedTab={selectedTab}
                  onSave={() => this.handleEditSlideSave()}
                  subItemChange={selectedTab => {
                    this.setState({ selectedTab });
                  }}
                />
              }
              content={
                <div>
                  {selectedTab == 0 && <SlideBaseForm edit={true}/>}
                  {selectedTab == 1 && <SlideRefereUser edit={true}/>}
                  {selectedTab == 2 && <SalaryItemForm edit={true}/>}
                  {selectedTab == 3 && <CalRulesForm edit={true}/>}
                  {selectedTab == 4 && <ValidRulesForm edit={true}/>}
                </div>
              }
              onClose={() => this.setState({ editSlideVisible: false }, () => {
                this.setState({ selectedTab: 0 });
              })}
              showMask={true}
              closeMaskOnClick={() =>
                this.setState({ editSlideVisible: false }, () => {
                  this.setState({ selectedTab: 0 });
                })}
            />}
        </WeaTop>

        {this.state.copyFormVisible &&
          <CopyFormModal
            taxAgentStore={taxAgentStore}
            visible={this.state.copyFormVisible}
            onSave={value => this.handleCopySave(value)}
            onCancel={() => {
              this.setState({ copyFormVisible: false });
            }}
          />}
      </div>
    );
  }
}