ele-admin-plus 1.3.1-beta.1 → 1.4.0-beta.1

package/es/ele-pro-form/util.d.ts

@@ -1,116 +1,18 @@
-import { SetupContext } from 'vue';
-import { FormRules } from 'element-plus';
-import { ProFormItemProps, ProFormItemKey } from './types';
+import { ProFormItemProps, ProFormItemTypeData } from './types';
+import { getValue, setValue, mergeValue, cloneDeep, ChildrenRender } from './components/render-util';
 
-export { get as getValue, set as setValue, merge as mergeValue } from 'lodash-es';
+export { sortableGroupName } from './components/render-core';
+export { setValue, getValue, mergeValue, cloneDeep, ChildrenRender };
 /**
- * 展示类型组件
- */
-export declare const viewTypes: string[];
-/**
- * 容器类型组件
- */
-export declare const containerTypes: string[];
-/**
- * 内置的组件类型
- */
-export declare const defaultTypes: string[];
-/**
- * 选择类型的组件类型
- */
-export declare const selectTypes: string[];
-/**
- * 上传类型的组件类型
- */
-export declare const uploadTypes: string[];
-/**
- * 支持 options 配置下拉选项数据的组件类型
- */
-export declare const optionsTypes: string[];
-/**
- * 表单验证规则使用 blur 触发的组件类型
- */
-export declare const blurTypes: string[];
-/**
- * 表单数据类型为字符串的组件类型
- */
-export declare const stringTypes: string[];
-/**
- * 表单数据类型为数字的组件类型
- */
-export declare const numberTypes: string[];
-/**
- * 表单数据类型为数组的组件类型
- */
-export declare const arrayTypes: string[];
-/**
- * 获取验证规则值类型
- * @param type 组件类型
- */
-export declare function getRuleType(type?: string): "string" | "number" | "array";
-/**
- * 获取验证规则触发类型
- * @param type 组件类型
- */
-export declare function getRuleTrigger(type?: string): "change" | "blur";
-/**
- * 获取验证规则提示文本
- * @param type 组件类型
- * @param label 表单项标题
- * @param requiredMessage 必填校验信息
- * @param placeholder 组件占位文本
- */
-export declare function getRuleMessage(type?: string, label?: string, requiredMessage?: string, placeholder?: string): string;
-/**
- * 判断表单项是否展示
+ * 判断表单项是否是容器类型
  * @param item 表单项
- * @param form 表单数据
- * @param items 表单项数据
- * @param searchExpand 搜索表单展开状态
- */
-export declare function isShowItem(item: ProFormItemProps, form: Record<string, any>, items: ProFormItemProps[], searchExpand?: boolean): any;
-/**
- * 子组件渲染器属性
- */
-export interface ChildrenRenderProps {
-    /** 表单项配置 */
-    item: ProFormItemProps;
-    /** 表单数据 */
-    model: Record<string, any>;
-    /** 验证规则 */
-    rules?: FormRules;
-    /** 全部的表单项 */
-    formItems?: ProFormItemProps[];
-    /** 搜索表单展开状态 */
-    searchExpand?: boolean;
-    /** 编辑模式 */
-    editable?: boolean;
-    /** 编辑模式禁用子级排序 */
-    sortDisabled?: boolean;
-    /** 编辑模式父级拖拽容器是否可点击选中 */
-    containerSelectable?: boolean;
-    /** 编辑模式选中的表单项 */
-    activeItemKey?: ProFormItemProps['key'];
-    /** 插槽 */
-    slots: any;
-}
-/**
- * 子组件渲染器事件
- */
-export type ChildrenRenderEmits = {
-    updateItemValue: (prop: string, value: unknown) => boolean;
-    updateItemsData: (items: ProFormItemProps[], parentItem?: ProFormItemProps) => boolean;
-    'update:activeItemKey': (activeKey?: ProFormItemKey) => boolean;
-};
-/**
- * 自定义容器组件时子组件渲染器
- * @param props 属性
- * @param context 上下文
+ * @param itemTypeData 高级表单组件类型数据
  */
-export declare function ChildrenRender(props: ChildrenRenderProps, { emit }: SetupContext<ChildrenRenderEmits>): import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
-    [key: string]: any;
-}>;
+export declare function isContainerType(item: ProFormItemProps, itemTypeData?: ProFormItemTypeData[]): boolean;
 /**
- * 编辑模式拖拽排序分组名称
+ * 获取表单数据初始值
+ * @param items 表单项数据
+ * @param itemTypeData 高级表单组件类型数据
+ * @param excludeUndefined 排除空值
  */
-export declare const sortableGroupName = "ProFormBuilderBodySortGroup";
+export declare function getFormInitValue(items?: ProFormItemProps[], itemTypeData?: ProFormItemTypeData[], excludeUndefined?: boolean): Record<string, any>;

package/es/ele-pro-form/util.js

@@ -1,296 +1,52 @@
-import { h } from "vue";
-import ProFormContent from "./components/pro-form-content";
-import { default as default2 } from "../../node_modules/lodash-es/get.js";
-import { default as default3 } from "../../node_modules/lodash-es/set.js";
-import { default as default4 } from "../../node_modules/lodash-es/merge.js";
-const viewTypes = [
-  "label",
-  "divider",
-  "button",
-  "icon",
-  "image",
-  "alert",
-  "steps",
-  "proTable"
-];
-const containerTypes = [
-  "card",
-  "tabs",
-  "tabPane",
-  "table",
-  "tableRow",
-  "tableCell",
-  "collapse",
-  "collapseItem",
-  "carousel",
-  "carouselItem",
-  "row",
-  "col",
-  "descriptions",
-  "descriptionsItem",
-  "div"
-];
-const defaultTypes = [
-  "input",
-  "textarea",
-  "select",
-  "multipleSelect",
-  "radio",
-  "radioButton",
-  "checkbox",
-  "checkboxButton",
-  "date",
-  "datetime",
-  "daterange",
-  "datetimerange",
-  "time",
-  "timerange",
-  "timeSelect",
-  "switch",
-  "inputNumber",
-  "autocomplete",
-  "cascader",
-  "multipleCascader",
-  "rate",
-  "slider",
-  "sliderRange",
-  "mention",
-  "colorPicker",
-  "treeSelect",
-  "treeMultipleSelect",
-  "virtualTreeSelect",
-  "virtualTreeMultipleSelect",
-  "tableSelect",
-  "tableMultipleSelect",
-  "checkCard",
-  "multipleCheckCard",
-  "editTag",
-  "transfer",
-  "iconSelect",
-  "dictRadio",
-  "dictCheckbox",
-  "dictSelect",
-  "dictMultipleSelect",
-  "imageUpload",
-  "fileUpload",
-  "regions",
-  "multipleRegions",
-  "editor",
-  "text",
-  ...viewTypes,
-  ...containerTypes
-];
-const selectTypes = [
-  "select",
-  "multipleSelect",
-  "radio",
-  "radioButton",
-  "checkbox",
-  "checkboxButton",
-  "date",
-  "datetime",
-  "daterange",
-  "datetimerange",
-  "time",
-  "timerange",
-  "timeSelect",
-  "switch",
-  "cascader",
-  "multipleCascader",
-  "rate",
-  "slider",
-  "sliderRange",
-  "colorPicker",
-  "treeSelect",
-  "tableMultipleSelect",
-  "virtualTreeSelect",
-  "virtualTreeMultipleSelect",
-  "tableSelect",
-  "tableMultipleSelect",
-  "checkCard",
-  "multipleCheckCard",
-  "transfer",
-  "iconSelect",
-  "dictRadio",
-  "dictCheckbox",
-  "dictSelect",
-  "dictMultipleSelect",
-  "regions",
-  "multipleRegions"
-];
-const uploadTypes = ["imageUpload", "fileUpload"];
-const optionsTypes = [
-  "select",
-  "multipleSelect",
-  "radio",
-  "radioButton",
-  "checkbox",
-  "checkboxButton",
-  "autocomplete",
-  "cascader",
-  "multipleCascader",
-  "mention",
-  "treeSelect",
-  "treeMultipleSelect",
-  "checkCard",
-  "multipleCheckCard"
-];
-const blurTypes = ["input", "textarea"];
-const stringTypes = [
-  "input",
-  "textarea",
-  "date",
-  "datetime",
-  "time",
-  "timeSelect",
-  "autocomplete",
-  "mention",
-  "colorPicker",
-  "editor",
-  "text"
-];
-const numberTypes = [
-  "select",
-  "radio",
-  "radioButton",
-  "checkbox",
-  "checkboxButton",
-  "switch",
-  "inputNumber",
-  "rate",
-  "slider",
-  "tableSelect"
-];
-const arrayTypes = [
-  "multipleSelect",
-  "checkbox",
-  "checkboxButton",
-  "daterange",
-  "datetimerange",
-  "timerange",
-  "cascader",
-  "multipleCascader",
-  "sliderRange",
-  "transfer",
-  "treeMultipleSelect",
-  "virtualTreeMultipleSelect",
-  "tableMultipleSelect",
-  "multipleCheckCard",
-  "editTag",
-  "dictCheckbox",
-  "dictMultipleSelect",
-  "regions",
-  "multipleRegions"
-];
-function getRuleType(type) {
-  if (type) {
-    if (arrayTypes.includes(type)) {
-      return "array";
-    }
-    if (numberTypes.includes(type)) {
-      return "number";
-    }
-  }
-  return "string";
-}
-function getRuleTrigger(type) {
-  return type && blurTypes.includes(type) ? "blur" : "change";
-}
-function getRuleMessage(type, label, requiredMessage, placeholder) {
-  if (typeof requiredMessage === "string" && requiredMessage) {
-    return requiredMessage;
-  }
-  if (typeof placeholder === "string" && placeholder) {
-    return placeholder;
-  }
-  const text = label ?? "";
-  if (type) {
-    if (selectTypes.includes(type)) {
-      return `请选择${text}`;
-    }
-    if (uploadTypes.includes(type)) {
-      return `请上传${text}`;
-    }
-  }
-  return `请输入${text}`;
+import { eachTree } from "../utils/common";
+import { getItemTypeData, setValue, getValue } from "./components/render-util";
+import { ChildrenRender, cloneDeep, getValue as getValue2, mergeValue, setValue as setValue2 } from "./components/render-util";
+import { sortableGroupName } from "./components/render-core";
+function isContainerType(item, itemTypeData) {
+  const typeData = getItemTypeData(item, itemTypeData);
+  return (typeData == null ? void 0 : typeData.isContainer) || item.itemType === "container" || item.itemType === "view";
 }
-function isShowItem(item, form, items, searchExpand) {
-  if (!item.prop) {
-    return false;
-  }
-  if (item.vIf != null) {
-    if (typeof item.vIf === "function") {
-      return item.vIf(form, items, searchExpand);
+function getFormInitValue(items, itemTypeData, excludeUndefined) {
+  const init = {};
+  eachTree(items, (item) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    if (item.initValue != null && item.initValue !== "" && item.prop) {
+      setValue(init, item.prop, item.initValue);
+      return;
     }
-    if (typeof item.vIf === "string" && item.vIf.trim().length) {
-      try {
-        return new Function(
-          "form",
-          "items",
-          "searchExpand",
-          "formItems",
-          "formData",
-          `return (${item.vIf})`
-        )(form, items, searchExpand, items, form);
-      } catch (e) {
-        console.error(e);
-        return false;
+    if (item.type && item.prop) {
+      if ("tabs" === item.type) {
+        const active = ((_a = item.props) == null ? void 0 : _a.modelValue) ?? ((_c = (_b = item.children) == null ? void 0 : _b[0]) == null ? void 0 : _c.prop);
+        setValue(init, item.prop, active);
+        return;
+      }
+      if ("collapse" === item.type) {
+        const active = ((_d = item.props) == null ? void 0 : _d.modelValue) ?? (((_e = item.props) == null ? void 0 : _e.accordion) ? ((_h = (_g = (_f = item.children) == null ? void 0 : _f[0]) == null ? void 0 : _g.props) == null ? void 0 : _h.name) ?? ((_j = (_i = item.children) == null ? void 0 : _i[0]) == null ? void 0 : _j.prop) : []);
+        setValue(init, item.prop, active);
+        return;
+      }
+      if ("sliderRange" === item.type) {
+        setValue(init, item.prop, [
+          ((_k = item.props) == null ? void 0 : _k.min) ?? 0,
+          ((_l = item.props) == null ? void 0 : _l.max) ?? 100
+        ]);
+        return;
       }
     }
-    if (item.vIf === false) {
-      return false;
+    if (excludeUndefined || isContainerType(item, itemTypeData) || !item.prop || typeof getValue(init, item.prop) !== "undefined") {
+      return;
     }
-  }
-  return true;
-}
-function ChildrenRender(props, { emit }) {
-  return h(
-    ProFormContent,
-    {
-      model: props.model,
-      rules: props.rules,
-      items: props.item.children ?? [],
-      grid: props.item.grid,
-      rowProps: props.item.rowProps,
-      formItems: props.formItems,
-      searchExpand: props.searchExpand,
-      parentItem: props.item,
-      editable: props.editable,
-      sortDisabled: props.sortDisabled,
-      containerSelectable: props.containerSelectable,
-      activeItemKey: props.activeItemKey,
-      onUpdateItemValue: (prop, value) => {
-        emit("updateItemValue", prop, value);
-      },
-      onUpdateItemsData: (items, parentItem) => {
-        emit("updateItemsData", items, parentItem);
-      },
-      "onUpdate:activeItemKey": (activeKey) => {
-        emit("update:activeItemKey", activeKey);
-      }
-    },
-    props.slots
-  );
+    setValue(init, item.prop, void 0);
+  });
+  return init;
 }
-const sortableGroupName = "ProFormBuilderBodySortGroup";
 export {
   ChildrenRender,
-  arrayTypes,
-  blurTypes,
-  containerTypes,
-  defaultTypes,
-  getRuleMessage,
-  getRuleTrigger,
-  getRuleType,
-  default2 as getValue,
-  isShowItem,
-  default4 as mergeValue,
-  numberTypes,
-  optionsTypes,
-  selectTypes,
-  default3 as setValue,
-  sortableGroupName,
-  stringTypes,
-  uploadTypes,
-  viewTypes
+  cloneDeep,
+  getFormInitValue,
+  getValue2 as getValue,
+  isContainerType,
+  mergeValue,
+  setValue2 as setValue,
+  sortableGroupName
 };

package/es/ele-pro-form-builder/components/body-form.d.ts

@@ -1,41 +1,50 @@
 import { UserComponent } from '../../ele-app/types';
-import { ProFormItemKey } from '../../ele-pro-form/types';
-import { BuildFormItem, TemplateFormConfig, ComponentGroup, UpdateItemsResult } from '../types';
+import { EleProFormProps } from '../../ele-app/plus';
+import { ProFormItemKey, ProFormItemProps, ProFormItemTypeData, ScreenSize } from '../../ele-pro-form/types';
+import { ComponentGroup, UpdateItemsResult } from '../types';
 
 declare function __VLS_template(): Partial<Record<string, (_: any) => any>>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 表单属性 */
-    formProps?: TemplateFormConfig;
+    formProps?: EleProFormProps;
     /** 选中的表单项 id */
     currentFormItemId?: ProFormItemKey;
     /** 当前选中屏幕尺寸 */
-    currentScreen?: string;
+    currentScreen?: ScreenSize;
     /** 组件库数据 */
     componentData?: ComponentGroup[];
     /** 高级表单组件 */
     proFormComponent?: UserComponent;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:currentFormItemId": (formItemId?: string | number | symbol | undefined) => void;
     updateItems: (result: UpdateItemsResult) => void;
     openTableTool: (formItemId: string, el: HTMLElement) => void;
-    updateFormItems: (items: BuildFormItem[]) => void;
+    updateFormItems: (items: ProFormItemProps[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 表单属性 */
-    formProps?: TemplateFormConfig;
+    formProps?: EleProFormProps;
     /** 选中的表单项 id */
     currentFormItemId?: ProFormItemKey;
     /** 当前选中屏幕尺寸 */
-    currentScreen?: string;
+    currentScreen?: ScreenSize;
     /** 组件库数据 */
     componentData?: ComponentGroup[];
     /** 高级表单组件 */
     proFormComponent?: UserComponent;
-}>>> & {
-    onOpenTableTool?: ((formItemId: string, el: HTMLElement) => any) | undefined;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>> & Readonly<{
     onUpdateItems?: ((result: UpdateItemsResult) => any) | undefined;
     "onUpdate:currentFormItemId"?: ((formItemId?: string | number | symbol | undefined) => any) | undefined;
-    onUpdateFormItems?: ((items: BuildFormItem[]) => any) | undefined;
-}, {}, {}>;
+    onOpenTableTool?: ((formItemId: string, el: HTMLElement) => any) | undefined;
+    onUpdateFormItems?: ((items: ProFormItemProps[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/es/ele-pro-form-builder/components/body-form.js

@@ -1,20 +1,22 @@
-import { defineComponent, ref, reactive, watch, openBlock, createElementBlock, normalizeClass, createBlock, resolveDynamicComponent, mergeProps, createSlots, withCtx, createVNode, renderList, renderSlot, normalizeProps, guardReactiveProps, unref, createCommentVNode } from "vue";
+import { defineComponent, ref, reactive, watch, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, resolveDynamicComponent, mergeProps, createSlots, withCtx, createVNode, renderList, renderSlot, normalizeProps, guardReactiveProps, unref } from "vue";
 import { ElEmpty } from "element-plus";
-import { eachTree } from "../../utils/core";
-import { mergeValue, setValue } from "../../ele-pro-form/util";
+import { eachTree } from "../../utils/common";
+import { mergeValue, getFormInitValue, setValue } from "../../ele-pro-form/util";
 import EleProForm from "../../ele-pro-form/index";
-import { getFormInitValue } from "../util";
 import { generateAddChildData, generateCopyItemData } from "./build-util";
 import ComponentName from "./component-name";
 import BuilderTools from "./builder-tools";
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "BodyForm" },
   __name: "body-form",
   props: {
     formProps: {},
     currentFormItemId: {},
     currentScreen: {},
     componentData: {},
-    proFormComponent: {}
+    proFormComponent: { type: [String, Object, Function] },
+    itemTypeData: {},
+    httpRequest: {}
   },
   emits: ["update:currentFormItemId", "updateItems", "openTableTool", "updateFormItems"],
   setup(__props, { emit: __emit }) {
@@ -50,7 +52,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               parent,
               cIndex,
               action,
-              (_a2 = props.formProps) == null ? void 0 : _a2.items
+              (_a2 = props.formProps) == null ? void 0 : _a2.items,
+              void 0,
+              props.componentData
             );
             handleUpdateItems(result);
             return false;
@@ -84,7 +88,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         var _a;
         eachTree((_a = props.formProps) == null ? void 0 : _a.items, (item, _cIndex, parent) => {
           if (item.key === currentFormItemId) {
-            if (item.type && ["tabPane", "collapseItem"].includes(item.type) && parent) {
+            if (item.type && ["tabPane", "collapseItem"].includes(item.type) && parent && parent.prop) {
               setBuilderFormDataFieldValue(parent.prop, item.prop);
             }
             return false;
@@ -101,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         });
         mergeValue(
           formData,
-          getFormInitValue((_a = props.formProps) == null ? void 0 : _a.items),
+          getFormInitValue((_a = props.formProps) == null ? void 0 : _a.items, props.itemTypeData, true),
           cachebuilderFormData
         );
       },
@@ -123,18 +127,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ref_key: "proFormRef",
           ref: proFormRef,
           model: formData,
-          searchExpand: formData.searchExpand,
-          "onUpdate:searchExpand": _cache[0] || (_cache[0] = ($event) => formData.searchExpand = $event),
-          activeKey: _ctx.currentFormItemId,
+          activeItemKey: _ctx.currentFormItemId,
           editable: true,
+          screenSize: _ctx.currentScreen,
           footer: false,
           validateOnRuleChange: false,
           scrollToError: false,
           showMessage: false,
+          itemTypeData: _ctx.itemTypeData,
+          httpRequest: _ctx.httpRequest,
           class: "ele-pro-form-builder-body-form",
           onUpdateValue: setBuilderFormDataFieldValue,
           "onUpdate:items": handleUpdateFormItems,
-          "onUpdate:activeKey": handleUpdateCurrentFormItemId
+          "onUpdate:activeItemKey": handleUpdateCurrentFormItemId
         }), createSlots({
           builderItemHandleContent: withCtx(({ item }) => [
             createVNode(ComponentName, {
@@ -163,7 +168,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])
             };
           })
-        ]), 1040, ["model", "searchExpand", "activeKey"])),
+        ]), 1040, ["model", "activeItemKey", "screenSize", "itemTypeData", "httpRequest"])),
         !_ctx.formProps || !_ctx.formProps.items || !_ctx.formProps.items.length ? (openBlock(), createBlock(unref(ElEmpty), {
           key: 0,
           imageSize: 80,