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

package/es/ele-pro-form/components/render-core.js

@@ -0,0 +1,175 @@
+const sortableGroupName = "ProFormBuilderBodySortGroup";
+const codeStringPrefix = "/*__PRO_FORM__*/";
+function getColObjectProp(prop) {
+  if (typeof prop === "number") {
+    return { span: prop };
+  }
+  return prop || {};
+}
+function getScreenSizeColProps(screenSize, gridColProps, itemColProps) {
+  const colProps = {
+    ...gridColProps || {},
+    ...itemColProps || {}
+  };
+  if (!screenSize || screenSize === "pc") {
+    return colProps;
+  }
+  const obj = getColObjectProp(
+    screenSize === "phone" ? colProps.xs : colProps.sm
+  );
+  const props = {
+    span: obj.span ?? colProps.span,
+    offset: obj.offset ?? colProps.offset,
+    push: obj.push ?? colProps.push,
+    pull: obj.pull ?? colProps.pull
+  };
+  return {
+    ...colProps,
+    ...props,
+    xs: { ...props },
+    sm: { ...props },
+    md: { ...props },
+    lg: { ...props },
+    xl: { ...props }
+  };
+}
+function computeContentExtraCol(grid, itemsLength) {
+  const colProps = {};
+  if (!grid) {
+    return colProps;
+  }
+  Object.keys(grid).forEach((key) => {
+    const value = grid[key];
+    if (value != null && ["span", "xs", "sm", "md", "lg", "xl"].includes(key)) {
+      if (typeof value === "number") {
+        const cols = 24 / value;
+        colProps[key] = (cols - (itemsLength || 0) % cols) * value;
+        return;
+      }
+      if (typeof value === "object" && value.span != null) {
+        const cols = 24 / value.span;
+        colProps[key] = {
+          ...value,
+          span: (cols - (itemsLength || 0) % cols) * value
+        };
+        return;
+      }
+    }
+    colProps[key] = value;
+  });
+  return colProps;
+}
+function getCodeResult(code, form, items, searchExpand, httpRequest, getProFormRefs) {
+  try {
+    return new Function(
+      "form",
+      "items",
+      "searchExpand",
+      "httpRequest",
+      "getProFormRefs",
+      "formItems",
+      // 兼容旧版
+      "formData",
+      // 兼容旧版
+      `return (${code})`
+    )(form, items, searchExpand, httpRequest, getProFormRefs, items, form);
+  } catch (e) {
+    console.error(e);
+  }
+}
+function isShowItem(item, form, items, searchExpand, editable) {
+  if (editable) {
+    return true;
+  }
+  if (item.prop == null && item.key == null) {
+    return false;
+  }
+  if (item.vIf != null) {
+    if (typeof item.vIf === "function") {
+      return item.vIf(form, items, searchExpand);
+    }
+    if (typeof item.vIf === "string" && item.vIf.trim().length) {
+      return getCodeResult(item.vIf, form, items, searchExpand);
+    }
+    if (item.vIf === false) {
+      return false;
+    }
+  }
+  return true;
+}
+function translateJsCode(code, form, items, searchExpand, httpRequest, getProFormRefs, getAndCacheCode) {
+  if (code != null) {
+    if (typeof code === "string") {
+      if (code.startsWith(codeStringPrefix)) {
+        const result = getCodeResult(
+          code,
+          form,
+          items,
+          searchExpand,
+          httpRequest,
+          getProFormRefs
+        );
+        if (getAndCacheCode && typeof result === "function") {
+          return { result: getAndCacheCode(code, result), isCode: true };
+        }
+        return { result, isCode: true };
+      }
+      return { result: code, isCode: false };
+    } else if (Array.isArray(code)) {
+      const arrayResult = [];
+      let arrayIsCode = false;
+      code.forEach((c) => {
+        const { result, isCode } = translateJsCode(
+          c,
+          form,
+          items,
+          searchExpand,
+          httpRequest,
+          getProFormRefs,
+          getAndCacheCode
+        );
+        arrayResult.push(result);
+        if (isCode) {
+          arrayIsCode = true;
+        }
+      });
+      if (arrayIsCode) {
+        return { result: arrayResult, isCode: true };
+      }
+      return { result: code, isCode: false };
+    } else if (typeof code === "object") {
+      const objectResult = {};
+      let objectIsCode = false;
+      Object.keys(code).forEach((k) => {
+        const { result, isCode } = translateJsCode(
+          code[k],
+          form,
+          items,
+          searchExpand,
+          httpRequest,
+          getProFormRefs,
+          getAndCacheCode
+        );
+        objectResult[k] = result;
+        if (isCode) {
+          objectIsCode = true;
+        }
+      });
+      if (objectIsCode) {
+        return { result: objectResult, isCode: true };
+      }
+      return { result: code, isCode: false };
+    }
+  }
+  return { result: code, isCode: false };
+}
+export {
+  codeStringPrefix,
+  computeContentExtraCol,
+  getCodeResult,
+  getColObjectProp,
+  getScreenSizeColProps,
+  isShowItem,
+  sortableGroupName,
+  translateJsCode
+};

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

@@ -1,16 +1,10 @@
 import { VNode } from 'vue';
+import { get as getValue, set as setValue, merge as mergeValue, cloneDeep } from 'lodash-es';
 import { FormItemRule } from 'element-plus';
 import { ProFormItemKey, ProFormItemProps, ProFormItemTypeData, ProFormItemRenderSlots } from '../types';
 import { RenderProFormItemProps, RenderProFormContentProps } from '../props';
 
-/**
- * 编辑模式拖拽排序分组名称
- */
-export declare const sortableGroupName = "ProFormBuilderBodySortGroup";
-/**
- * 代码字符串前缀
- */
-export declare const codeStringPrefix = "/*__PRO_FORM__*/";
+export { setValue, getValue, mergeValue, cloneDeep };
 /**
  * 获取表单项的类型名称
  * @param item 表单项
@@ -32,46 +26,14 @@ export declare function getComponentLegacyProps(item: ProFormItemProps): Record<
  * @param label 表单项标题
  * @param requiredMessage 必填校验信息
  * @param placeholder 组件占位文本
+ * @param requiredLang 默认的必填提示文本
  */
-export declare function getRuleMessage(label?: string, requiredMessage?: string, placeholder?: string): string;
+export declare function getRuleMessage(label?: string, requiredMessage?: string, placeholder?: string, requiredLang?: string): string;
 /**
  * 获取组件引用名称
  * @param item 表单项
  */
 export declare function getComponentRefName(item: ProFormItemProps): string;
-/**
- * 执行代码字符串
- * @param code 代码字符串
- * @param model 表单数据
- * @param items 全部表单项
- * @param searchExpand 搜索表单折叠展开状态
- * @param httpRequest 远程数据源请求工具
- * @param getProFormRefs 获取表单组件的组件引用数据的方法
- */
-export declare function getCodeResult(code: string, form: Record<string, any>, items: ProFormItemProps[], searchExpand?: boolean, httpRequest?: any, getProFormRefs?: () => Record<string, any>): any;
-/**
- * 判断表单项是否展示
- * @param item 表单项
- * @param form 表单数据
- * @param items 表单项数据
- * @param searchExpand 搜索表单展开状态
- * @param editable 是否是编辑模式
- */
-export declare function isShowItem(item: ProFormItemProps, form: Record<string, any>, items: ProFormItemProps[], searchExpand?: boolean, editable?: boolean): any;
-/**
- * 解析代码字符串
- * @param code 值
- * @param model 表单数据
- * @param items 全部表单项
- * @param searchExpand 搜索表单折叠展开状态
- * @param httpRequest 远程数据源请求工具
- * @param getProFormRefs 获取表单组件的组件引用数据的方法
- * @param getAndCacheCode 获取并缓存代码解析结果方法
- */
-export declare function translateJsCode(code: any, form: Record<string, any>, items: ProFormItemProps[], searchExpand: boolean, httpRequest: any, getProFormRefs?: () => Record<string, any>, getAndCacheCode?: (code: string, codeResult: any) => any): {
-    result: any;
-    isCode: boolean;
-};
 /**
  * 渲染表单项组件
  * @param props 属性
@@ -87,6 +49,10 @@ export declare function renderProFormContent(props: RenderProFormContentProps):
  */
 export declare const ChildrenRender: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     contentExtraColProps: import('vue').PropType<import('../../ele-app/el').ElColProps>;
+    autoContentExtraCol: {
+        type: BooleanConstructor;
+        required: boolean;
+    };
     parentItem: import('vue').PropType<ProFormItemProps>;
     formItems: import('vue').PropType<ProFormItemProps[]>;
     searchExpand: BooleanConstructor;
@@ -98,18 +64,20 @@ export declare const ChildrenRender: import('vue').DefineComponent<import('vue')
     updateItemValue: import('vue').PropType<(prop: string, value: any) => void>;
     updateItemsData: import('vue').PropType<(items: ProFormItemProps[], parentItem?: ProFormItemProps) => void>;
     updateActiveItemKey: import('vue').PropType<(activeKey?: ProFormItemKey) => void>;
+    requiredLang: StringConstructor;
     item: import('vue').PropType<ProFormItemProps>;
+    grid: import('vue').PropType<boolean | import('../../ele-app/el').ElColProps>;
     model: ObjectConstructor;
     rules: {
-        readonly type: import('vue').PropType<Partial<Record<string, import('element-plus/es/utils/typescript').Arrayable<import('element-plus/es/components/form/src/types').FormItemRule>>>>;
+        readonly type: import('vue').PropType<Partial<Record<string, FormItemRule | FormItemRule[]>>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    grid: import('vue').PropType<boolean | import('../../ele-app/el').ElColProps>;
     rowProps: import('vue').PropType<import('../../ele-app/el').ElRowProps>;
     editable: BooleanConstructor;
     items: import('vue').PropType<ProFormItemProps[]>;
+    screenSize: import('vue').PropType<import('../types').ScreenSize>;
     activeItemKey: import('vue').PropType<ProFormItemKey>;
     itemTypeData: import('vue').PropType<ProFormItemTypeData[]>;
     httpRequest: (ObjectConstructor | FunctionConstructor)[];
@@ -123,6 +91,10 @@ export declare const ChildrenRender: import('vue').DefineComponent<import('vue')
     'update:activeItemKey': (_activeKey?: ProFormItemKey) => true;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     contentExtraColProps: import('vue').PropType<import('../../ele-app/el').ElColProps>;
+    autoContentExtraCol: {
+        type: BooleanConstructor;
+        required: boolean;
+    };
     parentItem: import('vue').PropType<ProFormItemProps>;
     formItems: import('vue').PropType<ProFormItemProps[]>;
     searchExpand: BooleanConstructor;
@@ -134,18 +106,20 @@ export declare const ChildrenRender: import('vue').DefineComponent<import('vue')
     updateItemValue: import('vue').PropType<(prop: string, value: any) => void>;
     updateItemsData: import('vue').PropType<(items: ProFormItemProps[], parentItem?: ProFormItemProps) => void>;
     updateActiveItemKey: import('vue').PropType<(activeKey?: ProFormItemKey) => void>;
+    requiredLang: StringConstructor;
     item: import('vue').PropType<ProFormItemProps>;
+    grid: import('vue').PropType<boolean | import('../../ele-app/el').ElColProps>;
     model: ObjectConstructor;
     rules: {
-        readonly type: import('vue').PropType<Partial<Record<string, import('element-plus/es/utils/typescript').Arrayable<import('element-plus/es/components/form/src/types').FormItemRule>>>>;
+        readonly type: import('vue').PropType<Partial<Record<string, FormItemRule | FormItemRule[]>>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    grid: import('vue').PropType<boolean | import('../../ele-app/el').ElColProps>;
     rowProps: import('vue').PropType<import('../../ele-app/el').ElRowProps>;
     editable: BooleanConstructor;
     items: import('vue').PropType<ProFormItemProps[]>;
+    screenSize: import('vue').PropType<import('../types').ScreenSize>;
     activeItemKey: import('vue').PropType<ProFormItemKey>;
     itemTypeData: import('vue').PropType<ProFormItemTypeData[]>;
     httpRequest: (ObjectConstructor | FunctionConstructor)[];
@@ -156,6 +130,7 @@ export declare const ChildrenRender: import('vue').DefineComponent<import('vue')
 }>, {
     editable: boolean;
     searchExpand: boolean;
+    autoContentExtraCol: boolean;
     sortDisabled: boolean;
     containerSelectable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;