vap1 0.0.1

package/components/UForm/UForm.js

@@ -0,0 +1,484 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UForm = exports.initValue = void 0;
+const react_1 = __importStar(require("react"));
+const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("../../utils");
+const antd_1 = require("antd");
+const Row_1 = require("../_adapt/Row");
+const Col_1 = require("../_adapt/Col");
+const Popconfirm_1 = require("../_adapt/Popconfirm");
+const Button_1 = require("../_adapt/Button");
+const FormWrapper_1 = require("./FormWrapper");
+const useUpdate_1 = require("../../hooks/useUpdate");
+const Icon_1 = require("../_adapt/Icon");
+const _FormUtils_1 = require("./_FormUtils");
+const _register_1 = require("./_register");
+const Popover_1 = require("../_adapt/Popover");
+const onChangeEvent = (state, field, form, update, values, extra) => {
+    const { multipleFields, requireFields, disableFields, hiddenFields, optionFields, } = state;
+    if (!lodash_1.default.isArray(field.link) || field.link.length == 0)
+        return values;
+    var value = {};
+    let size = 0;
+    let needUpdate = false;
+    const pushBus = (targetField, result) => {
+        if (lodash_1.default.isObject(result)) {
+            if (lodash_1.default.has(result, 'value'))
+                value[targetField] = result.value;
+            if (lodash_1.default.has(result, 'required')) {
+                if (!requireFields.current.has(targetField)) {
+                    needUpdate = true;
+                    requireFields.current.set(targetField, result.required);
+                }
+                else if (requireFields.current.get(targetField) != result.required) {
+                    needUpdate = true;
+                    requireFields.current.set(targetField, result.required);
+                }
+            }
+            if (lodash_1.default.has(result, 'disabled')) {
+                if (result.disabled) {
+                    if (!disableFields.current.has(targetField)) {
+                        needUpdate = true;
+                        disableFields.current.add(targetField);
+                    }
+                }
+                else if (disableFields.current.has(targetField)) {
+                    needUpdate = true;
+                    disableFields.current.delete(targetField);
+                }
+            }
+            if (lodash_1.default.has(result, 'show')) {
+                if (result.show) {
+                    if (hiddenFields.current.has(targetField)) {
+                        needUpdate = true;
+                        hiddenFields.current.delete(targetField);
+                    }
+                }
+                else if (!hiddenFields.current.has(targetField)) {
+                    needUpdate = true;
+                    hiddenFields.current.add(targetField);
+                }
+            }
+            if (lodash_1.default.has(result, 'options')) {
+                if (result.options === null) {
+                    if (optionFields.current.has(targetField)) {
+                        needUpdate = true;
+                        optionFields.current.delete(targetField);
+                    }
+                }
+                else if (optionFields.current.get(targetField) != result.options) {
+                    needUpdate = true;
+                    optionFields.current.set(targetField, result.options);
+                }
+            }
+        }
+        else {
+            value[targetField] = result;
+        }
+        size++;
+        if (size == field.link.length) {
+            if (lodash_1.default.keys(value).length)
+                form.setFieldsValue(value);
+            if (needUpdate)
+                update();
+        }
+    };
+    field.link.map(link => {
+        const resp = link.call(values, getValue(multipleFields.current, form.getFieldsValue()), extra);
+        if (resp === null)
+            return;
+        if (resp instanceof Promise) {
+            resp.then(result => pushBus(link.field, result));
+        }
+        else {
+            pushBus(link.field, resp);
+        }
+    });
+    return values;
+};
+// const FieldContent = (component: InputComponent, field: UFormField)=>{
+//     React.createElement(component.element, {
+//         form: this.props.form,
+//         field,
+//         disabled: this.disableFields.has(field.field),
+//         options: (this.reOptions.has(field.field) ? this.reOptions.get(field.field) : undefined)
+//     })
+// }
+// export type FormFieldComponent = ComponentType<FormFieldProps>;
+const renderFormField = (state, field, form, update, data) => {
+    const input = (0, _register_1.getUFormInput)(field.type || 'text');
+    const { labelSpan, inputSpan, colSpan, cols, disableFields, hiddenFields, requireFields, optionFields, } = state;
+    if (hiddenFields.current.has(field.field)) {
+        return react_1.default.createElement(antd_1.Form.Item, { style: { display: 'none' } }, form.getFieldDecorator(field.field)(react_1.default.createElement(input.component, {
+            form,
+            field,
+            disabled: disableFields.current.has(field.field),
+            options: (0, _FormUtils_1.getOptions)(optionFields.current.has(field.field) ? optionFields.current.get(field.field) : (field.options || []), field, data)
+        })));
+    }
+    const [required, rules] = (0, _FormUtils_1.requireStatus)(field, requireFields.current, disableFields.current, hiddenFields.current);
+    const options = {
+        // initialValue: form.getFieldValue(field.field),
+        validateFirst: true,
+        rules,
+        getValueFromEvent: (value, extra) => onChangeEvent(state, field, form, update, value, extra),
+    };
+    let itemProps = {
+        label: utils_1.i18n.txt(field.ik, field.title),
+        labelCol: { span: labelSpan },
+        wrapperCol: { span: inputSpan },
+        required,
+    };
+    let colProps = { span: colSpan };
+    if (field.extra)
+        itemProps.extra = field.extra;
+    if (field.help)
+        itemProps.help = field.help;
+    if (field.tip && !input.breakTitle) {
+        itemProps.label = react_1.default.createElement("span", null,
+            itemProps.label,
+            react_1.default.createElement(Popover_1.Popover, { content: field.tip, placement: "top" },
+                react_1.default.createElement(Icon_1.Icon, { type: "question-circle", style: { marginLeft: 4, cursor: 'pointer' } })));
+    }
+    // 消除非必填项认证
+    const ignoreRule = disableFields.current.has(field.field);
+    if (ignoreRule) {
+        itemProps.required = false;
+        options.rules = null;
+    }
+    if (input.rules && field.ignore !== true) {
+        let rule;
+        if (lodash_1.default.isFunction(input.rules)) {
+            rule = input.rules(field);
+        }
+        else {
+            rule = input.rules;
+        }
+        if (lodash_1.default.isArray(rule)) {
+            rule.map(item => {
+                if (item)
+                    rules.push(item);
+            });
+        }
+        else if (rule) {
+            rules.push(rule);
+        }
+    }
+    if (cols == 1 || input.breakTitle || input.breakCol) {
+        colProps.span = 24;
+        if (input.breakTitle) {
+            itemProps.labelCol = { span: 0 };
+            itemProps.wrapperCol = { span: 24 };
+            itemProps.label = null;
+        }
+        else if (input.breakCol && cols > 1) {
+            let label = Math.floor(labelSpan / cols);
+            itemProps.labelCol = { span: label };
+            itemProps.wrapperCol = { span: 24 - label };
+        }
+    }
+    else {
+        let span = field.span || 1;
+        if (span > 1) {
+            colProps.span = colSpan * span;
+            colProps.span = colProps.span > 24 ? 24 : colProps.span;
+            var label = Math.floor(labelSpan / span);
+            itemProps.labelCol = { span: label };
+            itemProps.wrapperCol = { span: 24 - label };
+        }
+    }
+    return react_1.default.createElement(Col_1.Col, Object.assign({}, colProps),
+        react_1.default.createElement(antd_1.Form.Item, Object.assign({}, itemProps), form.getFieldDecorator(field.field, options)(react_1.default.createElement(input.component, {
+            form,
+            field,
+            disabled: disableFields.current.has(field.field),
+            options: (0, _FormUtils_1.getOptions)(optionFields.current.has(field.field) ? optionFields.current.get(field.field) : (field.options || []), field, data)
+        }))));
+};
+const renderFormActions = (state, buttons, form, initRef) => {
+    const btns = lodash_1.default.filter(buttons || [], item => {
+        if (!lodash_1.default.isPlainObject(item))
+            return false;
+        if (lodash_1.default.has(item, 'roleCode') && item.roleCode && !utils_1.PageUtil.hasRole(item.roleCode))
+            return false;
+        return true;
+    });
+    if (btns.length == 0)
+        return utils_1.Const.NONE;
+    var labelWidth = (state.labelSpan / 24) * (1 / state.cols) * 100;
+    return react_1.default.createElement(Col_1.Col, { span: 24, className: 'c-form-buttons' },
+        react_1.default.createElement(Row_1.Row, { wrap: false },
+            react_1.default.createElement(Col_1.Col, { style: { width: utils_1.Format.formatPercent(labelWidth) } }),
+            react_1.default.createElement(Col_1.Col, { style: { width: utils_1.Format.formatPercent(99 - labelWidth) }, className: 'c-form-actions' }, btns.map(btn => {
+                if (btn.roleCode && !utils_1.PageUtil.hasRole(btn.roleCode))
+                    return utils_1.Const.NONE;
+                let onClick;
+                switch (btn.action) {
+                    case 'button':
+                        onClick = (evt) => {
+                            utils_1.PageUtil.stopEvent(evt);
+                            if (btn.onClick) {
+                                btn.onClick(getValue(state.multipleFields.current, form.getFieldsValue(), initRef));
+                            }
+                        };
+                        break;
+                    case 'reset':
+                        onClick = (evt) => {
+                            utils_1.PageUtil.stopEvent(evt);
+                            form.resetFields();
+                            if (btn.onClick) {
+                                btn.onClick();
+                            }
+                        };
+                        break;
+                    default:
+                        onClick = (evt) => __awaiter(void 0, void 0, void 0, function* () {
+                            utils_1.PageUtil.stopEvent(evt);
+                            form.validateFields((err, result) => {
+                                if (err) {
+                                    console.error(err);
+                                    return;
+                                }
+                                if (btn.onClick) {
+                                    btn.onClick(getValue(state.multipleFields.current, result, initRef));
+                                    return;
+                                }
+                            });
+                        });
+                        break;
+                }
+                if (btn.icon) {
+                    if (lodash_1.default.isString(btn.icon))
+                        // @ts-ignore
+                        btn.icon = react_1.default.createElement(Icon_1.Icon, { type: btn.icon });
+                }
+                if (btn.disabled) {
+                    return react_1.default.createElement(Button_1.Button, Object.assign({}, btn, { onClick: (evt) => utils_1.PageUtil.stopEvent(evt), disabled: true }), utils_1.i18n.getText(btn.ik, btn.label));
+                }
+                if (btn.confirm) {
+                    return react_1.default.createElement(Popconfirm_1.Popconfirm, { title: btn.confirm, onConfirm: (evt) => onClick(evt) },
+                        react_1.default.createElement(Button_1.Button, Object.assign({}, btn, { onClick: undefined }), utils_1.i18n.getText(btn.ik, btn.label)));
+                }
+                return react_1.default.createElement(Button_1.Button, Object.assign({}, btn, { onClick: evt => onClick(evt) }), utils_1.i18n.getText(btn.ik, btn.label));
+            }))));
+};
+const getValue = (multipleFields, values, initRef) => {
+    const data = {};
+    let RTNData = Object.assign(Object.assign({}, initRef === null || initRef === void 0 ? void 0 : initRef.current), values);
+    lodash_1.default.keys(RTNData).map(property => {
+        if (multipleFields.has(property)) {
+            let conbined = RTNData[property];
+            let fields = property.split(',').map(lodash_1.default.trim);
+            fields.map(field => {
+                if (lodash_1.default.has(conbined, field))
+                    data[field] = conbined[field];
+            });
+            return;
+        }
+        if (RTNData[property] !== undefined && RTNData[property] !== null) {
+            data[property] = RTNData[property];
+        }
+    });
+    return data;
+};
+const initValue = (props) => {
+    let values = Object.assign(Object.assign({}, props.default), props.data);
+    for (let key of props.state.multipleFields.current) {
+        let fields = key.split(',').map(lodash_1.default.trim);
+        if (fields.length == 1) {
+            if (lodash_1.default.has(values, key)) {
+                values[key] = { [key]: values[key] };
+            }
+            else {
+                values[key] = {};
+            }
+        }
+        else {
+            fields.map(item => {
+                if (lodash_1.default.has(values, item)) {
+                    if (!lodash_1.default.has(values, key))
+                        values[key] = {};
+                    values[key][item] = values[item];
+                }
+            });
+        }
+    }
+    return values;
+};
+exports.initValue = initValue;
+const _FormField = (props) => {
+    const { form } = props;
+    const update = (0, useUpdate_1.useUpdate)();
+    (0, react_1.useEffect)(() => {
+        const values = (0, exports.initValue)(props);
+        props.initRef.current = values;
+        form.setFieldsValue(values);
+        props.fields.map(field => {
+            if (field == null || field == false)
+                return;
+            if (!lodash_1.default.has(values, field.field) || values[field.field] === null || values[field.field] === undefined)
+                return;
+            // setFieldsValue 要 render 后才能get ,延时执行 link事件
+            if (lodash_1.default.isArray(field.link) && field.link.length > 0)
+                setTimeout(() => onChangeEvent(props.state, field, form, update, values[field.field]), 2);
+        });
+        update();
+    }, []);
+    if (props.initRef.current === null)
+        return utils_1.Const.NONE;
+    const data = form.getFieldsValue();
+    return props.fields.map(field => {
+        if (field == null || field === false)
+            return utils_1.Const.NONE;
+        return renderFormField(props.state, field, form, update, data);
+    });
+};
+const _FormGroup = (props) => {
+    const { form } = props;
+    const update = (0, useUpdate_1.useUpdate)();
+    (0, react_1.useEffect)(() => {
+        const values = (0, exports.initValue)(props);
+        props.initRef.current = values;
+        form.setFieldsValue(values);
+        props.fields.map(group => {
+            if (group == null || group == false)
+                return;
+            group.fields.map(field => {
+                // @ts-ignore
+                if (field == null || field == false)
+                    return;
+                if (!lodash_1.default.has(values, field.field) || values[field.field] === null || values[field.field] === undefined)
+                    return;
+                // setFieldsValue 要 render 后才能get ,延时执行 link事件
+                if (lodash_1.default.isArray(field.link) && field.link.length > 0)
+                    setTimeout(() => onChangeEvent(props.state, field, form, update, values[field.field]), 2);
+            });
+        });
+        update();
+    }, []);
+    if (props.initRef.current === null)
+        return utils_1.Const.NONE;
+    const data = form.getFieldsValue();
+    return props.fields.map(group => {
+        if (group == null || group === false)
+            return utils_1.Const.NONE;
+        return react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Col_1.Col, { span: 24, className: "c-form-group-title" }, utils_1.i18n.getText(group.ik, group.title)),
+            group.fields.map(field => {
+                if (field == null || field === false)
+                    return utils_1.Const.NONE;
+                return renderFormField(props.state, field, form, update, data);
+            }));
+    });
+};
+const _UForm = react_1.default.forwardRef((props, ref) => {
+    const state = (0, FormWrapper_1.useFormLayout)();
+    const { form } = props;
+    const [checked, setChecked] = (0, react_1.useState)(false);
+    const initRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        if (ref != null) {
+            ref.current = {
+                validate: () => __awaiter(void 0, void 0, void 0, function* () {
+                    return new Promise((r, j) => {
+                        form.validateFields((err, result) => {
+                            if (err) {
+                                console.error(err);
+                                return;
+                            }
+                            r(getValue(state.multipleFields.current, result, initRef));
+                        });
+                    });
+                }),
+                reset: () => form.resetFields(),
+                data: () => getValue(state.multipleFields.current, form.getFieldsValue(), initRef),
+            };
+        }
+        const checkMultiple = (field) => {
+            // @ts-ignore
+            if (field == null || field == false)
+                return;
+            if (field.type) {
+                let info = (0, _register_1.getUFormInput)(field.type);
+                if (info.isMultiple && field.field.indexOf(',') > 0) {
+                    state.multipleFields.current.add(field.field);
+                }
+            }
+        };
+        props.fields.map(item => {
+            if (state.isGroup) {
+                (item.fields || []).map(field => checkMultiple(field));
+            }
+            else {
+                checkMultiple(item);
+            }
+        });
+        setChecked(true);
+    }, []);
+    return checked && react_1.default.createElement(antd_1.Form
+    // initialValues={props.default}
+    // size={props.size || GLOBAL.CONFIG.FORM.SIZE}
+    , { 
+        // initialValues={props.default}
+        // size={props.size || GLOBAL.CONFIG.FORM.SIZE}
+        className: state.isGroup ? 'c-form c-form-group' : 'c-form', style: { width: state.width }, form: form },
+        props.tip && react_1.default.createElement("div", { className: 'c-form-tip' }, props.tip),
+        state.isGroup ? react_1.default.createElement(_FormGroup, Object.assign({}, props, { state: state, initRef: initRef })) : react_1.default.createElement(_FormField, Object.assign({}, props, { state: state, initRef: initRef })),
+        lodash_1.default.isArray(props.buttons) && props.buttons.length && renderFormActions(state, props.buttons, form, initRef));
+});
+class _UFormAdaptor extends react_1.default.Component {
+    render() {
+        return react_1.default.createElement(_UForm, Object.assign({}, this.props, { ref: this.props.kref }));
+    }
+}
+// 3.0 适配层
+const UFormAdaptor = react_1.default.forwardRef((0, react_1.memo)((props, ref) => {
+    const FROM = antd_1.Form.create()(_UFormAdaptor);
+    return react_1.default.createElement(FROM, Object.assign({}, props, { aref: ref }));
+}));
+/**
+ * 说明：
+ * 相比旧版UForm ,新版本 UForm 功能更强
+ * 1. 降低大部分没必要的渲染，性能提升
+ * 2. 现已支持 Link 联动 返回 Promise
+ * 3. 支持 ref 控制方法
+ * 4. filed 支持更多提示，验证方法
+*/
+exports.UForm = react_1.default.forwardRef((props, ref) => react_1.default.createElement(FormWrapper_1.FormWrapper, Object.assign({ isInfo: false }, props),
+    react_1.default.createElement(UFormAdaptor, Object.assign({}, props, { ref: ref }))));

package/components/UForm/UFormModal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { UModalProps } from './index';
+export declare const UFormModal: React.FC<UModalProps>;

package/components/UForm/UFormModal.js

@@ -0,0 +1,149 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UFormModal = void 0;
+const react_1 = __importStar(require("react"));
+const lodash_1 = __importDefault(require("lodash"));
+const antd_1 = require("antd");
+const Modal_1 = require("../_adapt/Modal");
+const Button_1 = require("../_adapt/Button");
+const UForm_1 = require("./UForm");
+const utils_1 = require("../../utils");
+const Const_1 = require("../_setup/Const");
+const FormWrapper_1 = require("./FormWrapper");
+const FORM_FIELDS = ['layout', 'fields', 'groupType', 'isEdit', 'tip', 'default', 'data', 'mode', 'size'];
+const UFormModal = (props) => {
+    const ref = (0, react_1.useRef)(null);
+    let modalProps = {
+        onOk: () => __awaiter(void 0, void 0, void 0, function* () {
+            const result = yield ref.current.validate();
+            props.onOk(result);
+        })
+    };
+    if (!lodash_1.default.has(props, 'width')) {
+        modalProps.width = (0, FormWrapper_1.getDefault)(props)[1];
+    }
+    if (!lodash_1.default.has(props, 'title') && lodash_1.default.has(props, 'autoTitle')) {
+        let isAdd = true;
+        let name = null;
+        if (props.mode == 'EDIT' || props.isEdit || lodash_1.default.keys(props.data).length)
+            isAdd = false;
+        if (lodash_1.default.isObject(props.autoTitle)) {
+            if (lodash_1.default.has(props.data, props.autoTitle.field)) {
+                name = `${props.autoTitle.label} : ${props.data[props.autoTitle.field]}`;
+            }
+            else {
+                name = props.autoTitle.label;
+            }
+        }
+        else if (lodash_1.default.isString(props.autoTitle)) {
+            if (lodash_1.default.has(props.data, props.autoTitle)) {
+                name = props.data[props.autoTitle];
+            }
+            else if (utils_1.i18n.hasKey(props.autoTitle)) {
+                name = utils_1.i18n.txt(props.autoTitle);
+            }
+            else {
+                if (!isAdd) {
+                    name = props.autoTitle;
+                }
+            }
+        }
+        if (name) {
+            modalProps.title = utils_1.i18n.txt(isAdd ? Const_1.V.ACT_ADD_TITLE_NAMED : Const_1.V.ACT_UPDATE_TITLE_NAMED, name);
+        }
+        else {
+            modalProps.title = utils_1.i18n.txt(isAdd ? Const_1.V.ACT_ADD_TITLE : Const_1.V.ACT_UPDATE_TITLE);
+        }
+    }
+    if (props.buttons && props.buttons.length) {
+        const btns = lodash_1.default.filter(props.buttons || [], item => {
+            if (lodash_1.default.has(item, 'roleCode') && item.roleCode && !utils_1.PageUtil.hasRole(item.roleCode))
+                return false;
+            return true;
+        });
+        if (btns.length == 0) {
+            modalProps.footer = null;
+        }
+        else {
+            modalProps.footer = btns.map(btn => {
+                let onClick;
+                switch (btn.action) {
+                    case 'button':
+                        onClick = (evt) => {
+                            utils_1.PageUtil.stopEvent(evt);
+                            if (btn.onClick) {
+                                btn.onClick(ref.current.data());
+                            }
+                        };
+                        break;
+                    case 'reset':
+                        onClick = (evt) => {
+                            utils_1.PageUtil.stopEvent(evt);
+                            ref.current.reset();
+                            if (btn.onClick) {
+                                btn.onClick();
+                            }
+                        };
+                        break;
+                    default:
+                        onClick = (evt) => __awaiter(void 0, void 0, void 0, function* () {
+                            utils_1.PageUtil.stopEvent(evt);
+                            const result = yield ref.current.validate();
+                            if (btn.onClick) {
+                                btn.onClick(result);
+                                return;
+                            }
+                        });
+                        break;
+                }
+                if (btn.icon) {
+                    // @ts-ignore
+                    btn.icon = react_1.default.createElement(Icon, { type: btn.icon });
+                }
+                if (btn.confirm) {
+                    return react_1.default.createElement(antd_1.Popconfirm, { title: btn.confirm, onConfirm: (evt) => onClick(evt) },
+                        react_1.default.createElement(Button_1.Button, Object.assign({}, btn, { onClick: undefined }), utils_1.i18n.getText(btn.ik, btn.label)));
+                }
+                return react_1.default.createElement(Button_1.Button, Object.assign({}, btn, { onClick: evt => onClick(evt) }), utils_1.i18n.getText(btn.ik, btn.label));
+            });
+        }
+    }
+    return react_1.default.createElement(Modal_1.Modal, Object.assign({ maskClosable: utils_1.GLOBAL.CONFIG.FORM.maskClosable, destroyOnClose: true }, lodash_1.default.omit(props, FORM_FIELDS), { className: utils_1.StringUtil.className(['u-form-modal'], props.className), onCancel: () => props.onCancel() }, modalProps),
+        react_1.default.createElement(UForm_1.UForm, Object.assign({}, lodash_1.default.pick(props, FORM_FIELDS), { ref: ref })));
+};
+exports.UFormModal = UFormModal;

package/components/UForm/UInfo.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { UFromProps, UDescriptionsProps } from './index';
+import type { PlainObject } from '../../basetype';
+export type UInfoProps = Omit<UFromProps, 'buttons' | 'mode' | 'isEdit'> & Pick<UDescriptionsProps, 'hideBorder' | 'theme'> & {
+    /**
+     * 数据 在 UInfo 中为必传项
+    */
+    data: PlainObject;
+};
+export declare const UInfo: React.FC<UInfoProps>;