salary-management-front/pc4mobx/hrmSalary/pages/taxAgent/editModal.js

import React from "react";
import { Button } from "antd";
import { WeaDialog, WeaFormItem, WeaSearchGroup, WeaSteps, WeaTab } from "ecCom";
import { WeaSwitch } from "comsMobx";
import PersonalScope from "./personalScope";
import "./index.less";

const titleOuter = {
  display: "flex",
  justifyContent: "space-between",
  alignItems: "center"
};
const left = {
  display: "flex",
  flexDirection: "column"
};
const stepWrapper = {
  padding: "20px 200px"
};

const Step = WeaSteps.Step;

export default class EditModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: ""
    };
  }

  handleSubmit = () => {
    const { onSubmit, btnType, onPrev, devolutionStatus } = this.props;
    const { form, formDecentralization } = this.props.taxAgentStore;
    if (btnType === "prev") {
      onPrev && onPrev();
      return;
    }
    const formExample = devolutionStatus === 1 ? form : formDecentralization;
    formExample.validateForm().then((f) => {
      if (f.isValid) {
        const formData = formExample.getFormParams();
        const { adminUserIds, ...extraVal } = formData;
        onSubmit &&
        onSubmit(devolutionStatus === 1 ? { adminUserIds: adminUserIds.split(","), ...extraVal } : { ...extraVal });
      } else {
        f.showErrors();
        this.setState({ date: new Date() }); // 改变一个state的变量,强制页面刷新
      }
    });
  };

  renderEditForm = () => {
    const { editConditions, devolutionStatus } = this.props;
    const { form, formDecentralization } = this.props.taxAgentStore;
    const { isFormInit } = devolutionStatus === 1 ? form : formDecentralization;
    let group = [];
    isFormInit &&
    editConditions.map((c, index) => {
      let items = [];
      c.items.map((field, idx) => {
        items.push({
          com: (
            <WeaFormItem
              ecId={`tasAgent_WeaFormItem@jsxoq6@${index}@${idx}`}
              label={`${field.label}`}
              labelCol={{ span: `${field.labelcol}` }}
              error={devolutionStatus === 1 ? form.getError(field) : formDecentralization.getError(field)}
              tipPosition="bottom"
              underline
              wrapperCol={{ span: `${field.fieldcol}` }}>
              <WeaSwitch
                ecId={`tasAgent_WeaSwitch@r2lhga@${index}@${idx}`}
                fieldConfig={field}
                form={devolutionStatus === 1 ? form : formDecentralization}
              />
            </WeaFormItem>
          ),
          col: 1
        });
      });
      group.push(
        <WeaSearchGroup
          ecId={`tasAgent_WeaSearchGroup@3y8h9i@${index}`}
          needTigger={false}
          title={c.title}
          showGroup={c.defaultshow}
          items={items}
        />
      );
    });
    return group;
  };

  render() {
    const { date } = this.state;
    const {
      visible,
      title,
      current,
      btnType,
      editType,
      editId,
      saveloading,
      onClose,
      onChangeTab,
      taxAgentStore,
      isChief,
      devolutionStatus
    } = this.props;
    const { form, formDecentralization } = taxAgentStore;
    return (
      <WeaDialog
        onCancel={() => {
          devolutionStatus === 1 ? form.resetForm() : formDecentralization.resetForm();
          onClose && onClose();
        }}
        title={
          <div style={titleOuter}>
            <div style={left}>
              <div className="title">{title}</div>
            </div>
            <div className="right">
              {/*总管理权限*/}
              {(editType !== "set" && isChief) && (
                <Button
                  type="primary"
                  onClick={this.handleSubmit}
                  loading={saveloading}>
                  {btnType === "save"
                    ? "保存并进入下一步"
                    : btnType === "prev"
                      ? "上一步"
                      : "保存"}
                </Button>
              )}
            </div>
          </div>
        }
        initLoadCss
        className="taxagentModalWrapper"
        visible={visible}
        style={{ width: 800, height: 450 }}
        hasScroll>
        {title.indexOf("编辑") >= 0 && (
          <WeaTab
            datas={[
              {
                title: "基础设置",
                viewcondition: 0
              },
              {
                title: "人员范围",
                viewcondition: 1
              }
            ]}
            keyParam="viewcondition" //主键
            selectedKey={current}
            onChange={(v) => onChangeTab && onChangeTab(v)}
          />
        )}
        {(btnType === "save" || title.indexOf("编辑") < 0) && (
          <div style={stepWrapper}>
            <WeaSteps current={current} size="small">
              <Step description="基础设置"/>
              <Step description="人员范围"/>
            </WeaSteps>
          </div>
        )}
        {current == 0 ? (
          this.renderEditForm()
        ) : (
          <PersonalScope taxAgentId={editId}/>
        )}
      </WeaDialog>
    );
  }
}