@hw-component/form 0.0.1-beta-v6 → 0.0.1-beta-v8

package/lib/Form/HFormConnect.js

@@ -2,20 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _Object$keys = require('@babel/runtime-corejs3/core-js/object/keys');
-var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js/object/get-own-property-symbols');
-var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/filter');
-var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js/object/get-own-property-descriptor');
-var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/for-each');
-var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js/object/get-own-property-descriptors');
-var _Object$defineProperties = require('@babel/runtime-corejs3/core-js/object/define-properties');
-var _Object$defineProperty = require('@babel/runtime-corejs3/core-js/object/define-property');
-var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _extends = require('@babel/runtime-corejs3/helpers/extends');
 var index = require('./Context/index.js');
 var React = require('react');
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var formatMaker = function formatMaker(itemProps, formats) {
   if (!formats) {
     return formats;
@@ -31,11 +21,11 @@ var formatMaker = function formatMaker(itemProps, formats) {
     }
   };
 };
-var HFormConnect = (function (Component) {
+var HFormConnect = (function (component) {
   var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var _config$format = config.format,
     format = _config$format === void 0 ? {} : _config$format;
-  return function (props) {
+  var Index = function Index(props, ref) {
     var _props$name = props.name,
       name = _props$name === void 0 ? "" : _props$name;
     var _useFormContext = index.useFormContext(),
@@ -54,11 +44,14 @@ var HFormConnect = (function (Component) {
         name: name
       }, fn);
     };
-    return /*#__PURE__*/React.createElement(Component, _objectSpread(_objectSpread({}, props), {}, {
+    var Component = component;
+    return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       addFormat: addFormat,
-      addDispatchListener: addDispatchListener
+      addDispatchListener: addDispatchListener,
+      ref: ref
     }));
   };
+  return /*#__PURE__*/React.forwardRef(Index);
 });
 
 exports.default = HFormConnect;

package/lib/Form/config.d.ts

@@ -6,21 +6,21 @@ export declare const placeholderConfig: {
 declare const _default: {
     select: ({ style, mode, options, modeConfig, value, onChange, fieldNames: propsFieldNames, request, manual, optionLabelProp, filterProvider, optionFilterProp, serviceSearch, onSearch: propsOnSearch, filterOption, showSearch, labelInValue, noMatchItemRender, allSelect, ...props }: import("../Select/modal").HSelectProps) => JSX.Element;
     inputNumber: ({ style, ...props }: import("antd").InputNumberProps<string | number>) => JSX.Element;
-    selectInput: (props: import("./modal").HFormItemProps) => import("react").ReactElement<import("./modal").ConnectResultProps, string | import("react").JSXElementConstructor<any>>;
+    selectInput: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
     buttonInput: import("react").FC<import("../Input/modal").HButtonInputProps>;
-    checkboxGroup: (props: import("./modal").HFormItemProps) => import("react").ReactElement<import("./modal").ConnectResultProps, string | import("react").JSXElementConstructor<any>>;
+    checkboxGroup: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
     checkBox: import("react").FC<import("../CheckboxGroup/modal").HCheckboxProps>;
     radioGroup: ({ value, options, onChange, fieldNames: propsFieldNames, ...props }: import("../RadioGroup").HRadioGroupProps) => JSX.Element;
     switch: import("react").FC<import("../Switch").HSwitchProps>;
     datePicker: ({ value, onChange, showTime, format, ...props }: import("../TDPicker/modal").HDatePickerProps) => JSX.Element;
     rangePicker: {
-        Component: (props: import("./modal").HFormItemProps) => import("react").ReactElement<import("./modal").ConnectResultProps, string | import("react").JSXElementConstructor<any>>;
+        Component: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
         placeholder: ({ label }: import("./modal").HItemProps) => string[];
         requiredErrMsg: ({ label }: import("./modal").HItemProps) => string;
     };
     timePicker: ({ value, format, onChange, ...props }: import("../TDPicker/modal").HTimePickerProps) => JSX.Element;
     input: ({ ...props }: import("antd").InputProps) => JSX.Element;
-    upload: import("react").ForwardRefExoticComponent<import("../Upload/modal").IUpLoadProps & import("react").RefAttributes<import("../Upload/modal").IUploadRefModal>>;
+    upload: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
     urlUpload: ({ placeholder, value, onChange, mediaType, ...props }: import("../Upload/modal").IUrlUploadProps) => JSX.Element;
     submit: ({ text, type, form, loading, ...props }: import("../Submit").ISubmitProps) => JSX.Element;
     formConfigProvider: import("react").FC<import("./modal").IFormConfigContextProps>;

package/lib/Form/modal.d.ts

@@ -12,6 +12,7 @@ import type { IUpLoadProps } from "@/components/Upload/modal";
 import type { SelectProps } from "antd";
 import type { RangePickerProps } from "antd/es/date-picker";
 import type { PromiseFnResult, ValueCheckMapModal, ValueSwitchMapModal, DateRangePickerValueMapModal } from "../modal";
+import type { ForwardedRef } from "react";
 type RenderFun = (props: HItemProps, node: React.ReactNode, form: FormInstance) => void;
 type ItemPropsType = HCheckboxProps | HInputProps | HSelectInputProps | HButtonProps | HRadioGroupProps | HSelectProps | ButtonProps | HSwitchProps | HDatePickerProps | HRangePickerProps | HTimePickerProps | TextAreaProps | IUpLoadProps;
 export interface HoverModal {
@@ -42,6 +43,8 @@ export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form"> {
 }
 export interface HFormItemProps extends HItemProps {
     required?: boolean;
+    value?: any;
+    onChange?: (val: any, item: any) => void;
 }
 export interface FormItemWithRender extends Omit<HFormItemProps, "render"> {
     render: (form: HFormInstance) => React.ReactNode;
@@ -91,8 +94,11 @@ export interface addFormatItemModal {
     inputValue: addValueFormat;
     outputValue: addValueFormat;
 }
-export interface ConnectResultProps {
+export interface ConnectResultProps extends HFormItemProps {
     addFormat?: (format: Record<string, addFormatItemModal>) => void;
     addDispatchListener?: (key: string, fn: argsFn) => void;
+    ref?: ForwardedRef<any>;
+    value?: any;
+    onChange?: (value: any, item?: any) => void;
 }
 export {};

package/lib/Input/SelectInput.d.ts

@@ -5,5 +5,5 @@ export declare enum SelectInputType {
     select = 1
 }
 export declare const Index: ({ selectProps, value, onChange, valueName, addFormat, addDispatchListener, ...props }: HSelectInputProps) => JSX.Element;
-declare const _default: (props: import("../Form/modal").HFormItemProps) => import("react").ReactElement<import("../Form/modal").ConnectResultProps, string | import("react").JSXElementConstructor<any>>;
+declare const _default: import("react").ForwardRefExoticComponent<import("@/components/Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export default _default;

package/lib/TDPicker/RangePicker.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { HItemProps } from "../Form/modal";
 declare const _default: {
-    Component: (props: import("../Form/modal").HFormItemProps) => React.ReactElement<import("../Form/modal").ConnectResultProps, string | React.JSXElementConstructor<any>>;
+    Component: React.ForwardRefExoticComponent<import("../Form/modal").HFormItemProps & React.RefAttributes<any>>;
     placeholder: ({ label }: HItemProps) => string[];
     requiredErrMsg: ({ label }: HItemProps) => string;
 };

package/lib/Upload/UrlUpload/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { IUrlUploadProps } from "../modal";
-declare const _default: ({ placeholder, value, onChange, mediaType, ...props }: IUrlUploadProps) => JSX.Element;
-export default _default;
+declare const Index: ({ placeholder, value, onChange, mediaType, ...props }: IUrlUploadProps) => JSX.Element;
+export default Index;

package/lib/Upload/UrlUpload/index.js

@@ -16,7 +16,7 @@ var index = require('../index.js');
 var TypeEle = require('../MediaTypeEle/TypeEle.js');
 
 var _excluded = ["placeholder", "value", "onChange", "mediaType"];
-var HUrlUpload = (function (_ref) {
+var Index = function Index(_ref) {
   var _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? "请输入文件地址" : _ref$placeholder,
     _ref$value = _ref.value,
@@ -116,7 +116,7 @@ var HUrlUpload = (function (_ref) {
     onReady: onReady,
     onError: onError
   })));
-});
+};
 
-exports.default = HUrlUpload;
+exports.default = Index;
 // powered by h

package/lib/Upload/index.d.ts

@@ -1,4 +1,3 @@
 import React from "react";
-import type { IUpLoadProps, IUploadRefModal } from "./modal";
-declare const _default: React.ForwardRefExoticComponent<IUpLoadProps & React.RefAttributes<IUploadRefModal>>;
+declare const _default: React.ForwardRefExoticComponent<import("../Form/modal").HFormItemProps & React.RefAttributes<any>>;
 export default _default;

package/lib/Upload/index.js

@@ -14,14 +14,16 @@ var _extends = require('@babel/runtime-corejs3/helpers/extends');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
-var antd = require('antd');
-var Btn = require('./Btn.js');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/map');
 var React = require('react');
+var propsMaker = require('./hooks/propsMaker.js');
 var index = require('./Preview/index.js');
 var change = require('./hooks/change.js');
-var propsMaker = require('./hooks/propsMaker.js');
+var antd = require('antd');
+var Btn = require('./Btn.js');
+var HFormConnect = require('../Form/HFormConnect.js');
 
-var _excluded = ["value", "onChange", "listType", "exFiles", "maxCount", "maxRowNum", "onPreview", "request", "maxSize"];
+var _excluded = ["value", "onChange", "listType", "exFiles", "maxCount", "maxRowNum", "onPreview", "request", "maxSize", "addFormat"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Index = function Index(_ref, ref) {
@@ -38,6 +40,7 @@ var Index = function Index(_ref, ref) {
     onPreview = _ref.onPreview,
     request = _ref.request,
     maxSize = _ref.maxSize,
+    addFormat = _ref.addFormat,
     props = _objectWithoutProperties(_ref, _excluded);
   var matchProps = propsMaker.useProps({
     request: request,
@@ -80,6 +83,37 @@ var Index = function Index(_ref, ref) {
   var maxNum = maxCount === 1 ? maxCount : Number.MAX_VALUE;
   var visible = previewModal.visible,
     previewFile = previewModal.file;
+  addFormat === null || addFormat === void 0 ? void 0 : addFormat({
+    "float": {
+      inputValue: function inputValue(item, initValue) {
+        var _item$name = item.name,
+          name = _item$name === void 0 ? "" : _item$name;
+        var initFileList = initValue[name] || [];
+        var fileList = _mapInstanceProperty(initFileList).call(initFileList, function (url, index) {
+          return {
+            name: url,
+            response: {
+              url: url
+            },
+            status: "done",
+            uid: "init-".concat(index),
+            thumbUrl: url
+          };
+        });
+        return _defineProperty({}, name, fileList);
+      },
+      outputValue: function outputValue(item, _outputValue) {
+        var _item$name2 = item.name,
+          valueName = _item$name2 === void 0 ? "" : _item$name2;
+        var _outputValue$valueNam = _outputValue[valueName],
+          itemVal = _outputValue$valueNam === void 0 ? [] : _outputValue$valueNam;
+        var urls = _mapInstanceProperty(itemVal).call(itemVal, function (fileItem) {
+          return fileItem.response.url;
+        });
+        return _defineProperty({}, valueName, urls);
+      }
+    }
+  });
   return /*#__PURE__*/React.createElement("div", {
     style: contentStyle
   }, /*#__PURE__*/React.createElement(antd.Upload, _extends({
@@ -103,7 +137,7 @@ var Index = function Index(_ref, ref) {
     }
   }));
 };
-var HUpload = /*#__PURE__*/React.forwardRef(Index);
+var HUpload = HFormConnect.default( /*#__PURE__*/React.forwardRef(Index));
 
 exports.default = HUpload;
 // powered by h

package/lib/Upload/modal.d.ts

@@ -3,6 +3,7 @@ import type { UploadFile } from "antd/es/upload/interface";
 import type { BeforeUploadFileType, RcFile } from "rc-upload/lib/interface";
 import type { UploadChangeParam } from "antd/lib/upload/interface";
 import type { MediaTypeEnum } from "@/components/Upload/enums";
+import type { addFormatItemModal } from "@/components/Form/modal";
 export interface IUpLoadProps extends Omit<UploadProps, "onChange"> {
     exFiles?: string[];
     request?: (file: Exclude<BeforeUploadFileType, File | boolean> | RcFile) => Promise<{
@@ -13,6 +14,7 @@ export interface IUpLoadProps extends Omit<UploadProps, "onChange"> {
     value?: UploadFile[];
     maxRowNum?: number;
     maxSize?: number;
+    addFormat?: (config: Record<string, addFormatItemModal>) => void;
 }
 export interface IMediaTypeEleProps {
     file?: UploadFile;

package/lib/index.d.ts

@@ -2,22 +2,23 @@
 import "./styles/index.less";
 export { default as HForm } from "./Form";
 export { default as useHForm } from "./Form/hooks/useHForm";
-export { useHModalForm } from "./ModalForm/hooks";
+export { useHDialogForm } from "./DialogForm/hooks";
 export declare const HSelect: ({ style, mode, options, modeConfig, value, onChange, fieldNames: propsFieldNames, request, manual, optionLabelProp, filterProvider, optionFilterProp, serviceSearch, onSearch: propsOnSearch, filterOption, showSearch, labelInValue, noMatchItemRender, allSelect, ...props }: import("./Select/modal").HSelectProps) => JSX.Element;
 export declare const HInput: ({ ...props }: import("antd").InputProps) => JSX.Element;
-export declare const HSelectInput: (props: import("./Form/modal").HFormItemProps) => import("react").ReactElement<import("./Form/modal").ConnectResultProps, string | import("react").JSXElementConstructor<any>>;
-export declare const HUpload: import("react").ForwardRefExoticComponent<import("./Upload/modal").IUpLoadProps & import("react").RefAttributes<import("./Upload/modal").IUploadRefModal>>;
+export declare const HSelectInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
+export declare const HUpload: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HUrlUpload: ({ placeholder, value, onChange, mediaType, ...props }: import("./Upload/modal").IUrlUploadProps) => JSX.Element;
 export declare const HButtonInput: import("react").FC<import("./Input/modal").HButtonInputProps>;
 export declare const HCheckBox: import("react").FC<import("./CheckboxGroup/modal").HCheckboxProps>;
 export declare const HSwitch: import("react").FC<import("./Switch").HSwitchProps>;
-export declare const HCheckboxGroup: (props: import("./Form/modal").HFormItemProps) => import("react").ReactElement<import("./Form/modal").ConnectResultProps, string | import("react").JSXElementConstructor<any>>;
+export declare const HCheckboxGroup: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HDatePicker: ({ value, onChange, showTime, format, ...props }: import("./TDPicker/modal").HDatePickerProps) => JSX.Element;
-export declare const HRangePicker: (props: import("./Form/modal").HFormItemProps) => import("react").ReactElement<import("./Form/modal").ConnectResultProps, string | import("react").JSXElementConstructor<any>>;
+export declare const HRangePicker: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HRadioGroup: ({ value, options, onChange, fieldNames: propsFieldNames, ...props }: import("./RadioGroup").HRadioGroupProps) => JSX.Element;
 export declare const HTimePicker: ({ value, format, onChange, ...props }: import("./TDPicker/modal").HTimePickerProps) => JSX.Element;
 export declare const HInputNumber: ({ style, ...props }: import("antd").InputNumberProps<string | number>) => JSX.Element;
 export declare const HPageHandler: import("react").FC<import("./PageHandler/modal").IHPageHandler<any>>;
 export declare const HFormConfigProvider: import("react").FC<import("./Form/modal").IFormConfigContextProps>;
 export declare const HTextArea: ({ autoSize, ...props }: import("antd/es/input").TextAreaProps) => JSX.Element;
-export declare const HModalForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, modalForm, initialValues, ...props }: import("./ModalForm/modal").ModalFormProps) => JSX.Element;
+export declare const HModalForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, initialValues, onFinish, ...props }: import("./DialogForm/modal").DialogFormProps) => JSX.Element;
+export declare const HDrawerForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, closable, initialValues, labelWidth, onOk, onFinish, size, form, footer, ...props }: import("./DialogForm/modal").DialogFormProps) => JSX.Element;

package/lib/index.js

@@ -4,8 +4,9 @@ var config = require('./Form/config.js');
 var index$1 = require('./PageHandler/index.js');
 var index = require('./Form/index.js');
 var useHForm = require('./Form/hooks/useHForm.js');
-var hooks = require('./ModalForm/hooks.js');
-var index$2 = require('./ModalForm/index.js');
+var hooks = require('./DialogForm/hooks.js');
+var ModalForm = require('./DialogForm/ModalForm.js');
+var index$2 = require('./DialogForm/DrawerForm/index.js');
 
 var HSelect = config.default.select;
 var HInput = config.default.input;
@@ -24,15 +25,17 @@ var HInputNumber = config.default.inputNumber;
 var HPageHandler = index$1.default;
 var HFormConfigProvider = config.default.formConfigProvider;
 var HTextArea = config.default.textArea;
-var HModalForm = index$2.default;
+var HModalForm = ModalForm.default;
+var HDrawerForm = index$2.default;
 
 exports.HForm = index.default;
 exports.useHForm = useHForm.default;
-exports.useHModalForm = hooks.useHModalForm;
+exports.useHDialogForm = hooks.useHDialogForm;
 exports.HButtonInput = HButtonInput;
 exports.HCheckBox = HCheckBox;
 exports.HCheckboxGroup = HCheckboxGroup;
 exports.HDatePicker = HDatePicker;
+exports.HDrawerForm = HDrawerForm;
 exports.HFormConfigProvider = HFormConfigProvider;
 exports.HInput = HInput;
 exports.HInputNumber = HInputNumber;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "0.0.1-beta-v6",
+  "version": "0.0.1-beta-v8",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",

package/src/components/DialogForm/DrawerForm/Footer.tsx

@@ -0,0 +1,19 @@
+import { Row, Space, Button } from "antd";
+import type { DialogFormProps } from "@/components/DialogForm/modal";
+
+export default ({
+  onCancel,
+  onOk,
+  confirmLoading,
+}: Omit<DialogFormProps, "configData">) => {
+  return (
+    <Row justify={"end"}>
+      <Space size={"middle"}>
+        <Button onClick={onCancel}>关闭</Button>
+        <Button type={"primary"} onClick={onOk} loading={confirmLoading}>
+          确定
+        </Button>
+      </Space>
+    </Row>
+  );
+};

package/src/components/DialogForm/DrawerForm/Title.tsx

@@ -0,0 +1,12 @@
+import type { ModalProps} from "antd";
+import { Row } from "antd";
+import { CloseOutlined } from "@ant-design/icons";
+
+export default ({ title, closable, onCancel }: ModalProps) => {
+  return (
+    <Row justify={"space-between"}>
+      <div>{title}</div>
+      {closable && <CloseOutlined onClick={onCancel} />}
+    </Row>
+  );
+};

package/src/components/DialogForm/DrawerForm/index.tsx

@@ -0,0 +1,85 @@
+import { Drawer } from "antd";
+import type { DialogFormProps } from "@/components/DialogForm/modal";
+import { useCurrentForm, useModifyProps, useSub } from "../hooks";
+import HForm from "../../Form";
+import Title from "./Title";
+import Footer from "./Footer";
+export default ({
+  visible,
+  title,
+  onCancel,
+  configData,
+  infoRequest,
+  request,
+  afterClose,
+  dialogForm,
+  closable = true,
+  initialValues = {},
+  labelWidth,
+  onOk,
+  onFinish,
+  size,
+  form,
+  footer,
+  ...props
+}: DialogFormProps) => {
+  const currentForm = useCurrentForm(dialogForm);
+  const {
+    modalVisible,
+    modalFormData,
+    setModalVisible,
+    initValue,
+    onAfterClose,
+  } = useModifyProps({
+    configData,
+    visible,
+    initialValues,
+    dialogForm: currentForm,
+  });
+  const cancel = (e) => {
+    onAfterClose();
+    if (onCancel) {
+      return onCancel?.(e);
+    }
+    setModalVisible(false);
+  };
+  const { loading, run } = useSub({ request, onFinish });
+  const footerComponent = () => {
+    if (footer === null) {
+      return null;
+    }
+    return (
+      footer || (
+        <Footer
+          onCancel={cancel}
+          onOk={currentForm.submit}
+          confirmLoading={loading}
+        />
+      )
+    );
+  };
+  return (
+    <Drawer
+      visible={modalVisible}
+      title={<Title title={title} closable={closable} onCancel={cancel} />}
+      {...props}
+      onClose={cancel}
+      closable={false}
+      destroyOnClose={true}
+      footer={footerComponent()}
+    >
+      <HForm
+        configData={modalFormData}
+        initialValues={initValue}
+        {...props}
+        form={currentForm}
+        onFinish={async (values) => {
+          await run(values);
+          setModalVisible(false);
+        }}
+        infoRequest={infoRequest}
+        labelWidth={labelWidth}
+      />
+    </Drawer>
+  );
+};

package/src/components/{ModalForm/index.tsx → DialogForm/ModalForm.tsx}

@@ -1,7 +1,7 @@
 import { Modal } from "antd";
-import type { ModalFormProps } from "@/components/ModalForm/modal";
+import type { DialogFormProps } from "@/components/DialogForm/modal";
 import HForm from "../Form";
-import { useCurrentForm, useModifyProps } from "./hooks";
+import { useCurrentForm, useModifyProps, useSub } from "./hooks";
 export default ({
   visible,
   title,
@@ -10,17 +10,18 @@ export default ({
   infoRequest,
   request,
   afterClose,
-  modalForm,
+  dialogForm,
   initialValues = {},
+  onFinish,
   ...props
-}: ModalFormProps) => {
-  const currentForm = useCurrentForm(modalForm);
+}: DialogFormProps) => {
+  const currentForm = useCurrentForm(dialogForm);
   const { modalVisible, modalFormData, setModalVisible, initValue } =
     useModifyProps({
       configData,
       visible,
       initialValues,
-      modalForm: currentForm,
+      dialogForm: currentForm,
     });
   const cancel = (e) => {
     if (onCancel) {
@@ -28,21 +29,28 @@ export default ({
     }
     setModalVisible(false);
   };
+  const { loading, run } = useSub({ request, onFinish });
   return (
     <Modal
       title={title}
       visible={modalVisible}
       onCancel={cancel}
+      confirmLoading={loading}
       afterClose={() => {
         currentForm.resetFields();
         afterClose?.();
       }}
       {...props}
+      onOk={currentForm.submit}
       destroyOnClose={true}
     >
       <HForm
         configData={modalFormData}
         initialValues={initValue}
+        onFinish={async (values) => {
+          await run(values);
+          setModalVisible(false);
+        }}
         {...props}
         form={currentForm}
         infoRequest={infoRequest}

package/src/components/{ModalForm → DialogForm}/hooks.ts

@@ -1,19 +1,28 @@
 import { useEffect, useMemo, useState } from "react";
 import useHForm from "../Form/hooks/useHForm";
 import type {
-  HModalFormInstance,
+  HDialogFormInstance,
   ModifyPropsModal,
-} from "@/components/ModalForm/modal";
+} from "@/components/DialogForm/modal";
+import type { DialogFormProps } from "@/components/DialogForm/modal";
+import { useRequest } from "ahooks";
 
 export const useModifyProps = ({
   visible,
   configData,
   initialValues,
-  modalForm,
+  dialogForm,
+  afterClose,
 }: ModifyPropsModal) => {
   const [modalVisible, setModalVisible] = useState(visible);
   const [modalFormData, setModalFormData] = useState(configData);
   const [initValue, setInitValue] = useState(initialValues);
+  const onAfterClose = () => {
+    setTimeout(() => {
+      dialogForm.resetFields();
+      afterClose?.();
+    }, 0);
+  };
   useEffect(() => {
     setModalVisible(visible);
   }, [visible]);
@@ -21,7 +30,7 @@ export const useModifyProps = ({
     setModalFormData(configData);
   }, [configData]);
   useEffect(() => {
-    modalForm.show = ({
+    dialogForm.show = ({
       configData: changeConfigData,
       initialValues: changeInitialValues,
     }) => {
@@ -31,10 +40,11 @@ export const useModifyProps = ({
       setInitValue(changeInitialValues);
       setModalVisible(true);
     };
-    modalForm.hide = () => {
+    dialogForm.hide = () => {
       setModalVisible(false);
+      onAfterClose();
     };
-  }, []);
+  }, [afterClose]);
   return {
     modalFormData,
     modalVisible,
@@ -42,11 +52,12 @@ export const useModifyProps = ({
     setModalFormData,
     initValue,
     setInitValue,
+    onAfterClose,
   };
 };
-export const useHModalForm = () => {
+export const useHDialogForm = () => {
   const hForm = useHForm();
-  return useMemo<HModalFormInstance>(() => {
+  return useMemo<HDialogFormInstance>(() => {
     return {
       ...hForm,
       show: (params) => {},
@@ -55,7 +66,21 @@ export const useHModalForm = () => {
   }, []);
 };
 
-export const useCurrentForm = (hModalForm?: HModalFormInstance) => {
-  const defaultHModalForm = useHModalForm();
-  return hModalForm || defaultHModalForm;
+export const useCurrentForm = (hDialogForm?: HDialogFormInstance) => {
+  const defaultHModalForm = useHDialogForm();
+  return hDialogForm || defaultHModalForm;
+};
+
+export const useSub = ({ request, onFinish }: Partial<DialogFormProps>) => {
+  return useRequest(
+    async (values) => {
+      if (onFinish) {
+        return onFinish(values);
+      }
+      if (request) {
+        return request(values);
+      }
+    },
+    { manual: true }
+  );
 };

package/src/components/{ModalForm → DialogForm}/modal.ts

@@ -1,6 +1,7 @@
 import type { HFormProps } from "@/components/Form/modal";
 import type { ModalProps } from "antd";
 import type { HFormInstance, HItemProps } from "@/components/Form/modal";
+import type { PromiseFnResult } from "@/components/modal";
 
 type RootProps = HFormProps & ModalProps;
 
@@ -8,7 +9,8 @@ export interface ModifyPropsModal {
   configData: HItemProps[];
   visible?: boolean;
   initialValues?: Record<string, any>;
-  modalForm: HModalFormInstance;
+  dialogForm: HDialogFormInstance;
+  afterClose?: VoidFunction;
 }
 export interface ShowParamsModal {
   configData?: HItemProps[];
@@ -16,10 +18,11 @@ export interface ShowParamsModal {
   initialValues?: Record<string, any>;
 }
 
-export interface HModalFormInstance extends HFormInstance {
+export interface HDialogFormInstance extends HFormInstance {
   show: (data: ShowParamsModal) => void;
   hide: VoidFunction;
 }
-export interface ModalFormProps extends RootProps {
-  modalForm?: HModalFormInstance;
+export interface DialogFormProps extends Omit<RootProps, "onFinish"> {
+  dialogForm?: HDialogFormInstance;
+  onFinish?: PromiseFnResult;
 }