ProSubmit 提交表单

基本使用

// 设置全局的点击遮罩不可以关闭
import { setConfig } from "@lite-code/pro-shineout";

setConfig({ 
  defaultMaskCloseAble: false 
});

tsx

import { Button } from "shineout";
import { ProSubmit } from "@lite-code/pro-shineout";
import { useState } from "react";

const sleep = async () => {
  await new Promise((res) => setTimeout(res, 2000));
};

const schema = [
  {
    type: "Input",
    label: "单行文本",
    name: "86627142ff",
    span: 12,
    required: true,
  },
  {
    type: "Input",
    label: "单行文本2",
    name: "name2",
    span: 12,
    required: true,
  },
  {
    type: "Select",
    label: "下拉选",
    name: "86627142fg",
    span: 12,
    props: {
      data: [
        {
          label: "选项1",
          value: 1,
        },
        {
          label: "选项2",
          value: 2,
        },
        {
          label: "选项3",
          value: 3,
        },
      ],
    },
  },
  {
    type: "TreeSelect",
    label: "树形下拉选",
    name: "64d67a5d38",
    props: {
      data: [
        {
          label: "Node1",
          value: "0-0",
          children: [
            {
              label: "Child Node1",
              value: "0-0-1",
            },
            {
              label: "Child Node2",
              value: "0-0-2",
            },
          ],
        },
        {
          label: "Node2",
          value: "0-1",
        },
      ],
    },
  },
  {
    type: "DatePicker",
    label: "日期框",
    name: "32571396cf",
    effect: ["86627142fg"],
    visible: (datum: { get: (arg0: string) => number }) => {
      return datum.get("86627142fg") === 1;
    },
  },
];

export default () => {
  const [open, setOpen] = useState(0);
  return (
    <>
      <Button
        type="primary"
        onClick={() => {
          setOpen(1);
        }}
      >
        打开 Modal
      </Button>
      <Button
        onClick={() => {
          setOpen(2);
        }}
      >
        打开 Drawer
      </Button>
      <ProSubmit
        title="Modal 提交"
        type="modal"
        visible={open === 1}
        schema={schema}
        onClose={() => {
          setOpen(0);
        }}
        onSubmit={async (v) => {
          await sleep();
          console.log(v);
        }}
      />
      <ProSubmit
        title="Drawer 提交"
        type="drawer"
        visible={open === 2}
        schema={schema}
        onClose={() => {
          setOpen(0);
        }}
        onSubmit={async (v) => {
          await sleep();
          console.log(v);
        }}
        drawerProps={{
          width: 400,
        }}
      />
    </>
  );
};

API

ProSubmitProps 继承 ProModalProps 额外的属性描述

属性名	描述	类型	默认值	是否必需
type	类型	'modal' ｜ 'drawer'	modal	否
schema	数据模型	ProFormItemProps[]	无	是
onSubmit	提交事件	(values): void	无	是
onClose	关闭事件	Function	无	否
cancelText	取消文案	string	无	否
okText	确定文案	string	无	否
visible	是否展示	boolean	false	否
width	宽度	number	500	否