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

package/lib/ele-pro-form-builder/types.d.ts

@@ -1,34 +1,17 @@
-import type { CSSProperties } from 'vue';
-import type { ComponentProps } from '../ele-app/types';
-import type { ProFormProps } from '../ele-pro-form/props';
+import type { UserComponent, StyleValue } from '../ele-app/types';
+import type { EleProFormProps } from '../ele-app/plus';
 import type {
   ProFormItemKey,
   ProFormItemProps,
-  ProFormItemOption
+  ScreenSize
 } from '../ele-pro-form/types';
+import type { TreeTableColumn } from '../ele-tree-table/types';
+export type TemplateFormConfig = EleProFormProps;
 
 /**
- * 表单项
+ * 表单除表单项外的配置数据
  */
-export interface BuildFormItem extends Omit<ProFormItemProps, 'children'> {
-  /** 初始值 */
-  initValue?: any;
-  /** 子级 */
-  children?: BuildFormItem[];
-}
-
-/**
- * 表单属性
- */
-export type BuildFormProps = ComponentProps<Omit<ProFormProps, 'items'>>;
-
-/**
- * 表单配置模板
- */
-export interface TemplateFormConfig extends BuildFormProps {
-  /** 表单项 */
-  items: BuildFormItem[];
-}
+export type TemplateFormProps = Omit<EleProFormProps, 'items'>;
 
 /**
  * 表单模板库模板
@@ -37,11 +20,9 @@ export interface TemplateItem {
   /** 模板名称 */
   name: string;
   /** 模板缩略图 */
-  cover?: any;
-  /** 模板缩略图组件属性 */
-  coverProps?: Record<string, any>;
+  cover?: UserComponent;
   /** 模板数据 */
-  config: TemplateFormConfig;
+  config: EleProFormProps;
 }
 
 /**
@@ -53,23 +34,25 @@ export interface ComponentItem {
   /** 组件类型名称 */
   name: string;
   /** 组件类型缩略图 */
-  cover?: any;
+  cover?: UserComponent;
   /** 是否不显示在组件库列表中 */
   hide?: boolean;
   /** 组件原本的预设属性 */
   presetProps: Record<string, any>;
-  /** 组件在 ProForm 中的默认属性 */
+  /** 组件在 EleProForm 中的默认属性 */
   defaultProps: Record<string, any>;
   /** 组件添加时的初始属性 */
   initialProps: Record<string, any>;
   /** 组件的强制保留属性 */
   reservedProps: Record<string, any>;
-  /** 组件添加时的初始选项数据 */
-  initialOptions?: ProFormItemOption[];
-  /** 表单项属性配置的表单数据 */
+  /** 添加时的初始表单项配置 */
+  initialData?: Omit<ProFormItemProps, 'props'>;
+  /** 组件属性配置的表单配置数据 */
   configForm?: ProFormItemProps[];
-  /** 代码生成时组件名称 */
+  /** 生成 ElForm 代码时组件名称 */
   componentName: string;
+  /** 生成代码时组件引入语句 */
+  componentImport?: string;
 }
 
 /**
@@ -83,23 +66,49 @@ export interface ComponentGroup {
 }
 
 /**
- * 树表格列配置
+ * 顶栏右侧操作按钮名称
  */
-export interface TreeTableColumn extends Record<keyof any, any> {
-  /** key */
-  key?: string;
-  /** 标题 */
-  label?: string;
-  /** 属性名 */
-  prop?: string;
-  /** 列宽 */
-  width?: string;
-  /** 样式 */
-  style?: CSSProperties;
-  /** 类名 */
-  class?: string;
-  /** 编辑组件类型 */
-  editType?: 'input' | 'switch';
+export type HeaderRightToolName =
+  | 'import'
+  | 'export'
+  | 'clear'
+  | 'preview'
+  | 'code';
+
+/**
+ * 添加表单项需要的数据
+ */
+export interface AddItemResult {
+  /** 表单项 */
+  item?: ProFormItemProps;
+  /** 父级表单项 key */
+  parentItemId?: ProFormItemKey;
+  /** 添加位置 */
+  index?: number;
+}
+
+/**
+ * 修改表单项属性需要的数据
+ */
+export interface UpdateItemResult {
+  /** 表单项 key */
+  itemId: ProFormItemKey;
+  /** 需要修改的字段名 */
+  field: string;
+  /** 新的值 */
+  value: any;
+}
+
+/**
+ * 修改表单项需要的数据
+ */
+export interface UpdateItemsResult {
+  /** 需要删除的数据 */
+  deleteItemIds: ProFormItemKey[];
+  /** 需要添加的数据 */
+  addItems: AddItemResult[];
+  /** 需要修改的数据 */
+  updateItems: UpdateItemResult[];
 }
 
 /**
@@ -114,6 +123,21 @@ export interface ComponentStyleItem {
   value?: string;
 }
 
+/**
+ * 树表格列配置
+ */
+export interface OptionsTableColumn extends TreeTableColumn {
+  /** 列宽 */
+  width?: string;
+  /** 编辑组件类型 */
+  editType?: 'input' | 'switch';
+}
+
+/**
+ * 添加子级时操作类型
+ */
+export type AddChildrenItemAction = 'addTableRow' | 'addTableCol';
+
 /**
  * 表格跨行跨列处理时单元格数据
  */
@@ -150,47 +174,20 @@ export interface TableGridRow {
 export type TableGridData = TableGridRow[];
 
 /**
- * 修改表单项需要的数据
- */
-export interface UpdateItemResult {
-  /** 表单项 key */
-  itemId: ProFormItemKey;
-  /** 需要修改的字段名 */
-  field: string;
-  /** 新的值 */
-  value: any;
-}
-
-/**
- * 添加表单项需要的数据
+ * 组件选择弹窗配置
  */
-export interface AddItemResult {
-  /** 表单项 */
-  item?: BuildFormItem;
-  /** 父级表单项 key */
-  parentItemId?: ProFormItemKey;
-  /** 添加位置 */
-  index?: number;
+export interface ComponentPickerOption {
+  visible?: boolean;
+  addParentFormItemId?: ProFormItemKey;
+  editFormItemId?: ProFormItemKey;
+  editFormItemType?: string;
 }
 
 /**
- * 修改表单项时需要的数据
+ * 屏幕尺寸数据
  */
-export interface UpdateItemsResult {
-  /** 需要删除的数据 */
-  deleteItemIds: ProFormItemKey[];
-  /** 需要添加的数据 */
-  addItems: AddItemResult[];
-  /** 需要修改的数据 */
-  updateItems: UpdateItemResult[];
+export interface ScreenItem {
+  value: ScreenSize;
+  icon: UserComponent;
+  iconStyle?: StyleValue;
 }
-
-/**
- * 添加子级时操作类型
- */
-export type AddChildrenItemAction = 'addTableRow' | 'addTableCol';
-
-/**
- * 屏幕尺寸
- */
-export type ScreenSize = 'pc' | 'pad' | 'phone';

package/lib/ele-pro-form-builder/util.cjs

@@ -1,183 +1,39 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const core = require("../utils/core");
-const icons = require("../icons");
-const util = require("../ele-pro-form/util");
+const vue = require("vue");
+const index = require("../icons/index");
 const componentData = require("./components/component-data");
-function generateItemKey() {
-  return `f${core.uuid(15, 36).toLowerCase()}`;
-}
-function generateUniqueItemKey(items, keys) {
-  let itemKey = generateItemKey();
-  while (true) {
-    if (!core.findTree(items, (d) => d.key === itemKey) && (!keys || !keys.includes(itemKey))) {
-      break;
-    }
-    itemKey = generateItemKey();
-  }
-  return itemKey;
-}
-function getFormInitValue(items) {
-  const init = {};
-  core.eachTree(items, (item) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-    if (item.initValue != null && item.initValue !== "") {
-      util.setValue(init, item.prop, item.initValue);
-      return;
-    }
-    if (item.type) {
-      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) || "";
-        util.setValue(init, item.prop, active);
-        return;
-      }
-      if ("collapse" === item.type) {
-        const active = ((_d = item.props) == null ? void 0 : _d.modelValue) || ((_g = (_f = (_e = item.children) == null ? void 0 : _e[0]) == null ? void 0 : _f.props) == null ? void 0 : _g.name) || ((_i = (_h = item.children) == null ? void 0 : _h[0]) == null ? void 0 : _i.prop) || "";
-        util.setValue(init, item.prop, ((_j = item.props) == null ? void 0 : _j.accordion) ? active : []);
-        return;
-      }
-      if ("sliderRange" === item.type) {
-        util.setValue(init, item.prop, [0, 100]);
-        return;
-      }
-      if (util.arrayTypes.includes(item.type)) {
-        util.setValue(init, item.prop, []);
-        return;
-      }
-      if (util.stringTypes.includes(item.type)) {
-        util.setValue(init, item.prop, "");
-        return;
-      }
-      if (util.viewTypes.includes(item.type) || util.containerTypes.includes(item.type)) {
-        return;
-      }
-    }
-    util.setValue(init, item.prop, void 0);
-  });
-  return init;
-}
-function getComponentItemByType(type, componentData2) {
-  if (!type || !componentData2) {
-    return;
-  }
-  return componentData2.map((groupItem) => groupItem.items).flat().find((item) => item.type === type);
-}
-function generateChildFormItem(parentType, childNo, childKey) {
-  let child;
-  if (parentType) {
-    if (parentType === "tabs") {
-      child = { prop: "", label: "选项卡", type: "tabPane" };
-    } else if (parentType === "collapse") {
-      child = { prop: "", label: "折叠面板", type: "collapseItem" };
-    } else if (parentType === "row") {
-      child = { prop: "", label: "", type: "col", props: { span: 12 } };
-    } else if (parentType === "carousel") {
-      child = { prop: "", label: "", type: "carouselItem" };
-    } else if (parentType === "descriptions") {
-      child = { prop: "", label: "标题", type: "descriptionsItem" };
-    } else if (parentType === "table") {
-      child = { prop: "", label: "", type: "tableRow" };
-    } else if (parentType === "tableRow") {
-      child = { prop: "", label: "", type: "tableCell" };
-    }
-  }
-  if (!child) {
-    child = { prop: "", label: "", type: "div" };
-  }
-  if (child.label && childNo) {
-    child.label = child.label + childNo;
-  }
-  if (childKey) {
-    child.key = childKey;
-    child.prop = childKey;
-  }
-  return child;
-}
-function generateBuildFormItem(type, formItems, componentData2) {
-  const componentItem = getComponentItemByType(type, componentData2);
-  if (!componentItem) {
-    return;
-  }
-  const itemKey = generateUniqueItemKey(formItems);
-  const addedKeys = [itemKey];
-  const item = {
-    key: itemKey,
-    prop: itemKey,
-    label: componentItem.name,
-    type: componentItem.type,
-    //encasedTypeName: componentItem.name,
-    required: false,
-    props: componentItem.initialProps ? JSON.parse(JSON.stringify(componentItem.initialProps)) : void 0,
-    options: componentItem.initialOptions ? JSON.parse(JSON.stringify(componentItem.initialOptions)) : void 0
-  };
-  if (!item.type || item.type === "div" || item.type === "image" || item.type === "proTable") {
-    item.label = "";
-  } else if (item.type === "icon") {
-    item.label = "UserOutlined";
-  } else if (["tabs", "collapse", "row", "carousel", "descriptions"].includes(item.type)) {
-    item.label = "";
-    item.children = Array.from({ length: 2 }).map((_, i) => {
-      const childKey = generateUniqueItemKey(formItems, addedKeys);
-      addedKeys.push(childKey);
-      const childNo = String(i + 1).padStart(2, "0");
-      return generateChildFormItem(item.type, childNo, childKey);
-    });
-  } else if (item.type === "table") {
-    item.label = "";
-    item.children = Array.from({ length: 2 }).map(() => {
-      const trKey = generateUniqueItemKey(formItems, addedKeys);
-      addedKeys.push(trKey);
-      const childItem = generateChildFormItem(item.type, void 0, trKey);
-      const children = Array.from({ length: 3 }).map(() => {
-        const tdKey = generateUniqueItemKey(formItems, addedKeys);
-        addedKeys.push(tdKey);
-        return generateChildFormItem(childItem.type, void 0, tdKey);
-      });
-      childItem.children = children;
-      return childItem;
-    });
-  } else if (item.type === "steps") {
-    item.label = "";
-    if (!item.props) {
-      item.props = {};
-    }
-    item.props.items = Array.from({ length: 3 }).map((_, i) => {
-      const childNo = String(i + 1).padStart(2, "0");
-      return {
-        title: `步骤${childNo}`,
-        description: `步骤${childNo}的描述内容`
-      };
-    });
-  }
-  return item;
-}
-function getFormDataAndItems(item, componentData2) {
-  const data = item ? JSON.parse(JSON.stringify(item)) : item;
-  if (!data) {
-    return { data: {}, items: [] };
-  }
-  const componentItem = getComponentItemByType(data.type, componentData2);
-  return {
-    data: util.mergeValue(
-      {},
-      { props: (componentItem == null ? void 0 : componentItem.presetProps) || {} },
-      { props: (componentItem == null ? void 0 : componentItem.defaultProps) || {} },
-      data
-    ),
-    items: (componentItem == null ? void 0 : componentItem.configForm) || []
-  };
-}
+const defaultHeaderRightTools = [
+  "import",
+  "export",
+  "clear",
+  "preview"
+];
+const screenItems = [
+  { value: "pc", icon: vue.markRaw(index.DesktopOutlined) },
+  {
+    value: "pad",
+    icon: vue.markRaw(index.MobileOutlined),
+    iconStyle: { transform: "rotate(270deg) scale(1.06)" }
+  },
+  { value: "phone", icon: vue.markRaw(index.MobileOutlined) }
+];
 const defaultConfigFormItems = [
   {
     label: "组件尺寸",
     prop: "size",
     type: "checkCard",
-    options: [
-      { value: "large", label: "大型" },
-      { value: "default", label: "默认" },
-      { value: "small", label: "小型" }
-    ],
-    props: { class: "ele-pro-form-builder-props-options-check-card" }
+    props: {
+      items: [
+        { value: "large", label: "大型" },
+        { value: "default", label: "默认" },
+        { value: "small", label: "小型" }
+      ],
+      class: "ele-pro-form-builder-props-options-check-card"
+    },
+    itemProps: {
+      style: { marginTop: "8px" }
+    }
   },
   {
     label: "标签宽度",
@@ -189,12 +45,14 @@ const defaultConfigFormItems = [
     label: "标签位置",
     prop: "labelPosition",
     type: "checkCard",
-    options: [
-      { value: "left", label: "左对齐" },
-      { value: "right", label: "右对齐" },
-      { value: "top", label: "顶部" }
-    ],
-    props: { class: "ele-pro-form-builder-props-options-check-card" }
+    props: {
+      items: [
+        { value: "left", label: "左对齐" },
+        { value: "right", label: "右对齐" },
+        { value: "top", label: "顶部" }
+      ],
+      class: "ele-pro-form-builder-props-options-check-card"
+    }
   },
   {
     label: "标签后缀",
@@ -211,11 +69,13 @@ const defaultConfigFormItems = [
     label: "必填星号位置",
     prop: "requireAsteriskPosition",
     type: "checkCard",
-    options: [
-      { value: "left", label: "左侧" },
-      { value: "right", label: "右侧" }
-    ],
-    props: { class: "ele-pro-form-builder-props-options-check-card" }
+    props: {
+      items: [
+        { value: "left", label: "左侧" },
+        { value: "right", label: "右侧" }
+      ],
+      class: "ele-pro-form-builder-props-options-check-card"
+    }
   },
   {
     label: "显示校验错误信息",
@@ -239,6 +99,78 @@ const defaultConfigFormItems = [
     prop: "class",
     type: "proFormBuilderStyleEdit",
     props: { isClass: true }
+  },
+  {
+    label: "底栏配置",
+    prop: "groupFooterLabel",
+    type: "label",
+    props: { class: "ele-pro-form-builder-props-group-label" }
+  },
+  {
+    label: "是否需要底栏",
+    prop: "footer",
+    type: "switch",
+    props: { activeValue: true, inactiveValue: false }
+  },
+  {
+    label: "提交按钮文本",
+    prop: "submitText",
+    type: "input"
+  },
+  {
+    label: "重置按钮文本",
+    prop: "resetText",
+    type: "input"
+  },
+  {
+    label: "底栏样式",
+    prop: "footerStyle",
+    type: "proFormBuilderStyleEdit"
+  },
+  {
+    label: "底栏标签宽度",
+    prop: "footerProps.labelWidth",
+    type: "inputNumber",
+    props: { min: 0 }
+  },
+  {
+    label: "底栏表单项样式",
+    prop: "footerProps.style",
+    type: "proFormBuilderStyleEdit"
+  },
+  {
+    label: "底栏表单项类名",
+    prop: "footerProps.class",
+    type: "proFormBuilderStyleEdit",
+    props: { isClass: true }
+  },
+  {
+    label: "底栏显示展开收起按钮",
+    prop: "showSearchExpand",
+    type: "switch",
+    props: { activeValue: true, inactiveValue: false }
+  },
+  {
+    label: "展开按钮的文字",
+    prop: "searchExpandText",
+    type: "input"
+  },
+  {
+    label: "收起按钮的文字",
+    prop: "searchShrinkText",
+    type: "input"
+  },
+  {
+    label: "高级配置",
+    prop: "groupAdvancedLabel",
+    type: "label",
+    props: { class: "ele-pro-form-builder-props-group-label" }
+  },
+  {
+    label: "开发者选项",
+    prop: "__sourceCode",
+    type: "proFormBuilderSourceEdit",
+    props: { title: "编辑源码" }
   }
 ];
 const defaultConfigFormPresetProps = {
@@ -253,26 +185,11 @@ const defaultConfigFormPresetProps = {
   searchExpandText: "展开",
   searchShrinkText: "收起"
 };
-const screenItems = [
-  { value: "pc", icon: icons.DesktopOutlined },
-  {
-    value: "pad",
-    icon: icons.MobileOutlined,
-    iconStyle: { transform: "rotate(270deg) scale(1.06)" }
-  },
-  { value: "phone", icon: icons.MobileOutlined }
-];
 Object.defineProperty(exports, "defaultComponentData", {
   enumerable: true,
   get: () => componentData.defaultComponentData
 });
 exports.defaultConfigFormItems = defaultConfigFormItems;
 exports.defaultConfigFormPresetProps = defaultConfigFormPresetProps;
-exports.generateBuildFormItem = generateBuildFormItem;
-exports.generateChildFormItem = generateChildFormItem;
-exports.generateItemKey = generateItemKey;
-exports.generateUniqueItemKey = generateUniqueItemKey;
-exports.getComponentItemByType = getComponentItemByType;
-exports.getFormDataAndItems = getFormDataAndItems;
-exports.getFormInitValue = getFormInitValue;
+exports.defaultHeaderRightTools = defaultHeaderRightTools;
 exports.screenItems = screenItems;

package/lib/ele-pro-form-builder/util.d.ts

@@ -1,57 +1,15 @@
 import { ProFormItemProps } from '../ele-pro-form/types';
-import { BuildFormItem, ComponentGroup } from './types';
+import { TemplateFormProps, HeaderRightToolName, ScreenItem } from './types';
 
 export { defaultComponentData } from './components/component-data';
 /**
- * 生成表单项 id
+ * 默认表头工具栏右侧按钮布局
  */
-export declare function generateItemKey(): string;
+export declare const defaultHeaderRightTools: HeaderRightToolName[];
 /**
- * 生成表单项 id 并检查重复
- * @param items 当前表单项数据
- * @param keys 新生成还未添加的表单项 id
- */
-export declare function generateUniqueItemKey(items?: BuildFormItem[], keys?: string[]): string;
-/**
- * 获取表单数据初始值
- * @param items 表单项数据
- */
-export declare function getFormInitValue(items?: BuildFormItem[]): Record<string, any>;
-/**
- * 根据组件类型名称获取对应组件定义
- * @param type 组件类型名称
- * @param componentData 组件库数据
- */
-export declare function getComponentItemByType(type: string | undefined, componentData?: ComponentGroup[]): import('./types').ComponentItem | undefined;
-/**
- * 处理表单项数据每个包裹构建容器
- * @param formItems 表单项数据
- * @param parentIsDiv 父表单项是否是 div
- * @param componentData 组件库数据
- */
-/**
- * 生成子级表单项数据
- * @param parentType 父组件类型
- * @param childNo 子组件编号
- * @param childKey 子组件 id
- */
-export declare function generateChildFormItem(parentType?: string, childNo?: string, childKey?: string): BuildFormItem;
-/**
- * 生成表单项数据
- * @param type 组件类型或组件数据
- * @param formItems 当前的全部表单项数据
- * @param componentData 组件库数据
- */
-export declare function generateBuildFormItem(type: string | undefined, formItems: BuildFormItem[] | undefined, componentData?: ComponentGroup[]): BuildFormItem | undefined;
-/**
- * 获取表单项的属性值和对应的属性配置表单项数据
- * @param item 表单项
- * @param componentData 组件库数据
+ * 屏幕尺寸选项
  */
-export declare function getFormDataAndItems(item: BuildFormItem | undefined, componentData?: ComponentGroup[]): {
-    data: Record<string, any>;
-    items: ProFormItemProps[];
-};
+export declare const screenItems: ScreenItem[];
 /**
  * 表单属性设置的表单项配置
  */
@@ -59,35 +17,4 @@ export declare const defaultConfigFormItems: ProFormItemProps[];
 /**
  * 表单属性设置的组件预设属性值
  */
-export declare const defaultConfigFormPresetProps: {
-    size: string;
-    labelPosition: string;
-    requireAsteriskPosition: string;
-    showMessage: boolean;
-    labelWidth: number;
-    footerColProps: {
-        span: number;
-    };
-    submitText: string;
-    resetText: string;
-    searchExpandText: string;
-    searchShrinkText: string;
-};
-/**
- * 屏幕尺寸选项
- */
-export declare const screenItems: ({
-    value: string;
-    icon: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
-    iconStyle?: undefined;
-} | {
-    value: string;
-    icon: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
-    iconStyle: {
-        transform: string;
-    };
-})[];
-/**
- * 解析 json 配置用于 ProForm
- * @param initJson json
- */
+export declare const defaultConfigFormPresetProps: TemplateFormProps;