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

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

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

  renderEditForm = () => {
    const { editConditions } = this.props;
    const { form } = this.props.taxAgentStore;
    const { isFormInit } = form;
    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={form.getError(field)}
                tipPosition="bottom"
                wrapperCol={{ span: `${field.fieldcol}` }}>
                <WeaSwitch
                  ecId={`tasAgent_WeaSwitch@r2lhga@${index}@${idx}`}
                  fieldConfig={field}
                  form={form}
                />
              </WeaFormItem>
            ),
            col: 1,
            hide: form.isHide(field, (keys, allParams) => {
              return false;
            }),
          });
        });
        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,
      editConditions,
    } = this.props;
    const { form } = taxAgentStore;
    return (
      <WeaDialog
        onCancel={() => {
          form.resetForm();
          onClose && onClose();
        }}
        title={
          <div style={titleOuter}>
            <div style={left}>
              <div className="title">{title}</div>
            </div>
            <div className="right">
              {editType !== "set" && (
                <Button
                  type="primary"
                  onClick={this.handleSubmit}
                  loading={saveloading}>
                  {btnType === "save"
                    ? "保存并进入下一步"
                    : btnType === "prev"
                    ? "上一步"
                    : "保存"}
                </Button>
              )}
            </div>
          </div>
        }
        visible={visible}
        style={{ width: 800, minHeight: 350 }}
        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>
    );
  }
}