salary-management-front/pc4mobx/hrmSalary/pages/salary/components/taxAgentSlide.js

/*
 * Author: 黎永顺
 * name: 新增/编辑个税扣缴义务人
 * Description:
 * Date: 2022/11/29
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { Button } from "antd";
import { WeaSlideModal, WeaSteps } from "ecCom";
import SlideModalTitle from "../../../components/slideModalTitle";
import { decentralizationConditions, editConditions } from "../../taxAgent/editConditions";
import BaseSettings from "./baseSettings";
import PersonalScope from "./personalScope";
import "./index.less";

const Step = WeaSteps.Step;
const tabs = [
  { key: 0, title: "基础设置" },
  { key: 1, title: "报税信息" },
  { key: 2, title: "人员范围" }
];

@inject("taxAgentStore")
@observer
class TaxAgentSlide extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible || nextProps.decentralization !== this.props.decentralization) {
      const { taxAgentStore: { salarytaxAgentForm }, decentralization } = nextProps;
      decentralization === "0" ?
        salarytaxAgentForm.setCondition(decentralizationConditions, true) :
        salarytaxAgentForm.setCondition(editConditions, true);
      this.setState({ current: nextProps.current });
    }
  }

  handleSave = () => {
    const { taxAgentStore: { salarytaxAgentForm } } = this.props;
    // salarytaxAgentForm.updateFields({
    //   name: { value: "data.name" },
    //   description: { value: "123", hide: true },
    // });
    // salarytaxAgentForm.setField("adminUserIds", {
    //   hide: true
    // });

    salarytaxAgentForm.validateForm().then((f) => {
      if (f.isValid) {
        const formData = salarytaxAgentForm.getFormParams();
        console.log(formData);
      } else {
        f.showErrors();
      }
    });
  };
  renderChildren = () => {
    const { current } = this.state;
    const { decentralization, taxAgentId } = this.props;
    let CurrentDom = null;
    switch (current) {
      case 0:
        CurrentDom = <BaseSettings decentralization={decentralization}/>;
        break;
      case 2:
        CurrentDom = <PersonalScope taxAgentId={taxAgentId}/>;
        break;
      default:
        CurrentDom = null;
        break;
    }
    return CurrentDom;
  };
  renderCustomOperate = () => {
    const { taxAgentId, isChief } = this.props;
    const { current, per } = this.state;
    let CurrentDom = [];
    //总管理员权限
    if (isChief) {
      switch (current) {
        case 0:
          CurrentDom = [
            <Button type="primary" onClick={this.handleSave}>{taxAgentId ? "保存" : "保存并进入下一步"}</Button>
          ];
          break;
        case 1:
          const tmpV = [<Button type="primary">保存并验证</Button>];
          const tmpJ = [
            <Button type="ghost">完成，跳过所有步骤</Button>,
            <Button type="ghost">下一步</Button>
          ];
          CurrentDom = taxAgentId ? tmpV : [...tmpV, ...tmpJ];
          break;
        case 2:
          CurrentDom = !taxAgentId ? [<Button type="ghost">上一步</Button>] : [];
          break;
        default:
          break;
      }
    }
    return CurrentDom;
  };
  handleChangeSlideTab = (current) => {
    this.setState({ current: Number(current) });
  };

  render() {
    const { title, visible, onCancel, taxAgentId, taxAgentStore: { showOperateBtn } } = this.props;
    const { current } = this.state;
    return (
      <WeaSlideModal
        className="slideOuterWrapper"
        visible={visible}
        top={0}
        width={50}
        height={100}
        direction="right"
        measure="%"
        title={
          <SlideModalTitle
            subtitle={title}
            tabs={taxAgentId ? tabs : []}
            loading={false}
            showOperateBtn={showOperateBtn}
            editable={false}
            onSave={() => {
            }}
            selectedTab={current}
            customOperate={this.renderCustomOperate()}
            subItemChange={this.handleChangeSlideTab}
          />
        }
        content={
          <div className="taxAgentSlideContent">
            {
              !taxAgentId &&
              <WeaSteps current={current} style={{ margin: "20px 0" }}>
                {
                  _.map(tabs, item => {
                    const { key, title } = item;
                    return <Step description={title} key={key}/>;
                  })
                }
              </WeaSteps>
            }
            {
              this.renderChildren()
            }
          </div>
        }
        onClose={onCancel}
      />
    );
  }
}

export default TaxAgentSlide;