ele-admin-plus 1.3.0-beta.2 → 1.3.0-beta.3

package/es/ele-pro-form-builder/components/options-table.js

@@ -0,0 +1,381 @@
+import { defineComponent, ref, computed, onMounted, openBlock, createBlock, normalizeClass, withCtx, createElementBlock, createVNode, unref, createCommentVNode } from "vue";
+import { ElSwitch, ElInput } from "element-plus";
+import { eachTree, mapTree } from "../../utils/core";
+import EleTreeTable from "../../ele-tree-table/index";
+import EleSelect from "../../ele-select/index";
+import { DeleteOutlined, PlusOutlined, AppstoreAddOutlined } from "../../icons";
+import { getValue, setValue } from "../../ele-pro-form/util";
+import { getPropertyPath, generateItemKey } from "./build-core";
+import ToolButton from "./tool-button";
+const _hoisted_1 = {
+  key: 4,
+  class: "ele-pro-form-builder-options-edit-cell"
+};
+const _hoisted_2 = {
+  key: 6,
+  class: "ele-pro-form-builder-options-edit-cell"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "ele-pro-form-builder-options-edit-th"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "ele-pro-form-builder-options-edit-cell"
+};
+const actionColKey = "optionsEditTreeTableAction";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "options-table",
+  props: {
+    data: {},
+    isTreeData: { type: [Boolean, Object] },
+    columns: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const tableColumns = ref([]);
+    const tableData = ref([]);
+    const tableMinWidth = computed(() => {
+      let width = 0;
+      tableColumns.value.forEach((col) => {
+        var _a;
+        const w = (_a = col.style) == null ? void 0 : _a.width;
+        const wn = w == null || typeof w === "number" ? w : Number.parseInt(w);
+        width += (wn == null || isNaN(wn) ? void 0 : wn) ?? 120;
+      });
+      return `${width}px`;
+    });
+    let tablePropStart = 0;
+    const generateCellKey = () => {
+      const key = generateItemKey();
+      tablePropStart++;
+      return `${key}c${tablePropStart}`;
+    };
+    const handleDelete = (row, parent) => {
+      const children = parent ? parent.children : tableData.value;
+      if (children && children.length) {
+        for (let i = 0; i < children.length; i++) {
+          const temp = children[i];
+          if (temp === row) {
+            children.splice(i, 1);
+            return true;
+          }
+          if (handleDelete(row, temp)) {
+            return;
+          }
+        }
+      }
+    };
+    const handleAdd = (parent) => {
+      const item = {};
+      if (!parent) {
+        tableData.value.push(item);
+      } else if (parent.children) {
+        parent.children.push(item);
+      } else {
+        parent.children = [item];
+      }
+    };
+    const handleAddCol = () => {
+      const index = tableColumns.value.findIndex((c) => c.key === actionColKey);
+      if (index !== -1) {
+        const col = {
+          userProp: "",
+          prop: generateCellKey(),
+          label: "",
+          style: { textAlign: "center" }
+        };
+        if (index <= 0) {
+          tableColumns.value.unshift(col);
+        } else {
+          tableColumns.value.splice(index, 0, col);
+        }
+      }
+    };
+    const handleDeleteCol = (column) => {
+      if (column.prop != null) {
+        const index = tableColumns.value.findIndex((c) => c.prop === column.prop);
+        if (index !== -1) {
+          tableColumns.value.splice(index, 1);
+        }
+      }
+    };
+    const getResult = () => {
+      let result = JSON.parse(
+        JSON.stringify(tableData.value)
+      );
+      if (props.columns === "tableData") {
+        result = mapTree(result, (row) => {
+          const temp = {};
+          tableColumns.value.forEach((col) => {
+            if (col.prop) {
+              setValue(temp, col.userProp || col.prop, row[col.prop]);
+            }
+          });
+          return temp;
+        });
+      } else if (props.columns === "stringArray") {
+        result = result.map((d) => d.value);
+      }
+      return result;
+    };
+    onMounted(() => {
+      tableData.value = [];
+      const userData = props.data == null || typeof props.data === "string" ? [] : JSON.parse(JSON.stringify(props.data));
+      const actionCol = {
+        key: actionColKey,
+        label: "",
+        style: {
+          textAlign: "center",
+          width: props.isTreeData ? "78px" : "48px",
+          flex: "none"
+        },
+        class: "is-fixed-right is-fixed-right-first"
+      };
+      if (props.columns === "tableData") {
+        const keys = [];
+        eachTree(userData, (row) => {
+          getPropertyPath(row, ["children"]).forEach((k) => {
+            if (!keys.includes(k)) {
+              keys.push(k);
+            }
+          });
+        });
+        tableColumns.value = [
+          ...keys.map((k) => ({
+            userProp: k,
+            prop: generateCellKey(),
+            label: "",
+            style: { textAlign: "center" }
+          })),
+          actionCol
+        ];
+        tableData.value = mapTree(userData, (row) => {
+          const temp = { ...row };
+          tableColumns.value.forEach((col) => {
+            if (col.prop && col.userProp) {
+              temp[col.prop] = getValue(temp, col.userProp);
+            }
+          });
+          return temp;
+        });
+      } else if (props.columns === "tableColumns") {
+        tableColumns.value = [
+          {
+            prop: "label",
+            label: "标题",
+            style: { textAlign: "center" }
+          },
+          {
+            prop: "prop",
+            label: "属性名",
+            style: { textAlign: "center" }
+          },
+          {
+            prop: "columnKey",
+            label: "ColumnKey",
+            style: { textAlign: "center" }
+          },
+          {
+            prop: "align",
+            label: "对齐方式",
+            style: { textAlign: "center", width: "110px", flex: "none" }
+          },
+          {
+            prop: "width",
+            label: "列宽",
+            style: { textAlign: "center", width: "110px", flex: "none" }
+          },
+          {
+            prop: "minWidth",
+            label: "最小列宽",
+            style: { textAlign: "center", width: "110px", flex: "none" }
+          },
+          {
+            prop: "sortable",
+            label: "支持排序",
+            style: { textAlign: "center", width: "110px", flex: "none" },
+            editType: "switch"
+          },
+          {
+            prop: "fixed",
+            label: "固定",
+            style: { textAlign: "center" }
+          },
+          {
+            prop: "type",
+            label: "类型",
+            style: { textAlign: "center", width: "110px", flex: "none" }
+          },
+          actionCol
+        ];
+        tableData.value = userData;
+      } else if (props.columns === "stringArray") {
+        tableColumns.value = [
+          { prop: "value", label: "值", style: { textAlign: "center" } },
+          actionCol
+        ];
+        tableData.value = userData.map((d) => ({ value: d }));
+      } else if (props.columns) {
+        tableColumns.value = [...props.columns, actionCol];
+        tableData.value = userData;
+      } else {
+        tableColumns.value = [
+          { prop: "label", label: "文本", style: { textAlign: "center" } },
+          { prop: "value", label: "值", style: { textAlign: "center" } },
+          actionCol
+        ];
+        tableData.value = userData;
+      }
+    });
+    __expose({ getResult });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(EleTreeTable, {
+        data: tableData.value,
+        columns: tableColumns.value,
+        tableStyle: { minWidth: tableMinWidth.value },
+        class: normalizeClass([
+          "ele-pro-form-builder-options-editer",
+          { "is-table-data": _ctx.columns === "tableData" }
+        ])
+      }, {
+        bodyCell: withCtx(({ row, column, treeLevel }) => [
+          _ctx.columns === "tableColumns" && column.prop === "align" ? (openBlock(), createBlock(EleSelect, {
+            key: 0,
+            size: "default",
+            clearable: true,
+            modelValue: row[column.prop],
+            "onUpdate:modelValue": ($event) => row[column.prop] = $event,
+            options: [
+              { label: "左对齐", value: "left" },
+              { label: "居中", value: "center" },
+              { label: "右对齐", value: "right" }
+            ],
+            popperOptions: { strategy: "fixed" },
+            class: "ele-fluid"
+          }, null, 8, ["modelValue", "onUpdate:modelValue"])) : _ctx.columns === "tableColumns" && column.prop === "fixed" ? (openBlock(), createBlock(EleSelect, {
+            key: 1,
+            size: "default",
+            clearable: true,
+            modelValue: row[column.prop],
+            "onUpdate:modelValue": ($event) => row[column.prop] = $event,
+            options: [
+              { label: "不固定", value: false },
+              { label: "固定在左侧", value: "left" },
+              { label: "固定在右侧", value: "right" }
+            ],
+            popperOptions: { strategy: "fixed" },
+            class: "ele-fluid"
+          }, null, 8, ["modelValue", "onUpdate:modelValue"])) : _ctx.columns === "tableColumns" && column.prop === "type" ? (openBlock(), createBlock(EleSelect, {
+            key: 2,
+            size: "default",
+            clearable: true,
+            modelValue: row[column.prop],
+            "onUpdate:modelValue": ($event) => row[column.prop] = $event,
+            options: [
+              { label: "默认", value: "default" },
+              { label: "选择列", value: "selection" },
+              { label: "序号列", value: "index" },
+              { label: "展开列", value: "expand" }
+            ],
+            popperOptions: { strategy: "fixed" },
+            class: "ele-fluid"
+          }, null, 8, ["modelValue", "onUpdate:modelValue"])) : _ctx.columns === "tableColumns" && column.prop === "sortable" ? (openBlock(), createBlock(EleSelect, {
+            key: 3,
+            size: "default",
+            clearable: true,
+            modelValue: row[column.prop],
+            "onUpdate:modelValue": ($event) => row[column.prop] = $event,
+            options: [
+              { label: "true", value: true },
+              { label: "false", value: false },
+              { label: "custom", value: "custom" }
+            ],
+            popperOptions: { strategy: "fixed" },
+            class: "ele-fluid"
+          }, null, 8, ["modelValue", "onUpdate:modelValue"])) : column.prop && column.editType === "switch" ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            createVNode(unref(ElSwitch), {
+              size: "small",
+              modelValue: row[column.prop],
+              "onUpdate:modelValue": ($event) => row[column.prop] = $event
+            }, null, 8, ["modelValue", "onUpdate:modelValue"])
+          ])) : column.prop ? (openBlock(), createBlock(unref(ElInput), {
+            key: 5,
+            size: "default",
+            clearable: true,
+            modelValue: row[column.prop],
+            "onUpdate:modelValue": ($event) => row[column.prop] = $event
+          }, null, 8, ["modelValue", "onUpdate:modelValue"])) : column.key === actionColKey ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            createVNode(ToolButton, {
+              buttonProps: {
+                type: "danger",
+                plain: true,
+                circle: true,
+                icon: unref(DeleteOutlined)
+              },
+              tooltip: "删除数据",
+              onClick: ($event) => handleDelete(row)
+            }, null, 8, ["buttonProps", "onClick"]),
+            _ctx.isTreeData && !(typeof _ctx.isTreeData === "object" && _ctx.isTreeData.maxDepth && (treeLevel || 1) >= _ctx.isTreeData.maxDepth) ? (openBlock(), createBlock(ToolButton, {
+              key: 0,
+              buttonProps: {
+                type: "primary",
+                plain: true,
+                circle: true,
+                icon: unref(PlusOutlined)
+              },
+              tooltip: "新增子级",
+              onClick: ($event) => handleAdd(row)
+            }, null, 8, ["buttonProps", "onClick"])) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ]),
+        headerCell: withCtx(({ column }) => [
+          _ctx.columns === "tableData" && column.prop ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            createVNode(unref(ElInput), {
+              size: "default",
+              clearable: true,
+              modelValue: column.userProp,
+              "onUpdate:modelValue": ($event) => column.userProp = $event
+            }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+            createVNode(ToolButton, {
+              buttonProps: {
+                type: "danger",
+                plain: true,
+                circle: true,
+                icon: unref(DeleteOutlined)
+              },
+              tooltip: "删除属性",
+              onClick: ($event) => handleDeleteCol(column)
+            }, null, 8, ["buttonProps", "onClick"])
+          ])) : column.key === actionColKey ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            _ctx.columns === "tableData" ? (openBlock(), createBlock(ToolButton, {
+              key: 0,
+              buttonProps: {
+                type: "primary",
+                plain: true,
+                circle: true,
+                icon: unref(AppstoreAddOutlined)
+              },
+              tooltip: "新增属性",
+              onClick: _cache[0] || (_cache[0] = ($event) => handleAddCol())
+            }, null, 8, ["buttonProps"])) : createCommentVNode("", true),
+            createVNode(ToolButton, {
+              buttonProps: {
+                type: "primary",
+                plain: true,
+                circle: true,
+                icon: unref(PlusOutlined)
+              },
+              tooltip: "新增数据",
+              onClick: _cache[1] || (_cache[1] = ($event) => handleAdd())
+            }, null, 8, ["buttonProps"])
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["data", "columns", "tableStyle", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/ele-pro-form-builder/components/outline-list.js

@@ -2,7 +2,7 @@ import { defineComponent, resolveComponent, openBlock, createBlock, unref, withC
 import VueDraggable from "vuedraggable";
 import { ElIcon } from "element-plus";
 import { ArrowDown, DeleteOutlined, CopyOutlined, InsertRowOutlined, InsertColumnOutlined, AppstoreAddOutlined, PlusSquareDashOutlined, DragOutlined } from "../../icons";
-import { defaultItemTypeData } from "../../ele-pro-form/components/item-type-data";
+import { isContainerType } from "../../ele-pro-form/util";
 import ComponentName from "./component-name";
 const _hoisted_1 = ["title", "onClick"];
 const _hoisted_2 = { class: "ele-pro-form-builder-outline-item-content" };
@@ -52,18 +52,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const handleUpdateItemChildren = (children, parent) => {
       emit("updateItemChildren", children, parent);
     };
-    const isContainerType = (item) => {
-      if (!(item == null ? void 0 : item.type)) {
-        return false;
-      }
-      const typeData = [
-        ...props.itemTypeData || [],
-        ...defaultItemTypeData
-      ].find((d) => d.type === item.type);
-      if (typeData && typeData.isContainer) {
-        return true;
-      }
-      return item.itemType === "container" || item.itemType === "view";
+    const itemIsContainerType = (item) => {
+      return isContainerType(item, props.itemTypeData);
     };
     const isTableChildType = (item) => {
       if (!item.type) {
@@ -93,16 +83,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               {
                 "is-collapse": element.key != null && _ctx.collapseItemIds && _ctx.collapseItemIds.includes(element.key)
               },
-              { "is-form-item": !isContainerType(element) }
+              { "is-form-item": !itemIsContainerType(element) }
             ])
           }, [
-            isContainerType(element) ? (openBlock(), createBlock(_component_OutlineList, {
+            itemIsContainerType(element) ? (openBlock(), createBlock(_component_OutlineList, {
               key: 0,
               items: element.children || [],
               currentFormItemId: _ctx.currentFormItemId,
               collapseItemIds: _ctx.collapseItemIds,
               parent: element,
               componentData: _ctx.componentData,
+              itemTypeData: _ctx.itemTypeData,
               "onUpdate:currentFormItemId": handleUpdateCurrentFormItemId,
               onToggleItemCollapse: handleToggleItemCollapse,
               onDeleteItem: handleDeleteItem,
@@ -110,7 +101,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               onAddChildren: handleAddChildren,
               onOpenTableTool: handleOpenTableTool,
               onUpdateItemChildren: handleUpdateItemChildren
-            }, null, 8, ["items", "currentFormItemId", "collapseItemIds", "parent", "componentData"])) : createCommentVNode("", true),
+            }, null, 8, ["items", "currentFormItemId", "collapseItemIds", "parent", "componentData", "itemTypeData"])) : createCommentVNode("", true),
             createElementVNode("div", {
               class: "ele-pro-form-builder-outline-item-body",
               title: (element.prop ?? "") + " " + (element.label ?? ""),
@@ -190,7 +181,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 2
               }, 1032, ["onClick"])) : createCommentVNode("", true),
-              isContainerType(element) && element.type !== "table" && element.type !== "tableRow" ? (openBlock(), createBlock(unref(ElIcon), {
+              itemIsContainerType(element) && element.type !== "table" && element.type !== "tableRow" ? (openBlock(), createBlock(unref(ElIcon), {
                 key: 6,
                 class: "ele-pro-form-builder-outline-item-tool",
                 title: "添加子级",

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

@@ -1,4 +1,4 @@
-import { ProFormItemKey, ProFormItemProps } from '../../ele-pro-form/types';
+import { ProFormItemKey, ProFormItemProps, ProFormItemTypeData } from '../../ele-pro-form/types';
 import { ComponentGroup, UpdateItemsResult } from '../types';
 
 declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
@@ -8,11 +8,14 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     currentFormItemId?: ProFormItemKey;
     /** 组件库数据 */
     componentData?: ComponentGroup[];
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:currentFormItemId": (formItemId?: string | number | symbol | undefined) => void;
     updateItems: (result: UpdateItemsResult) => void;
     updateItemChildren: (children: ProFormItemProps[], parent?: ProFormItemProps | undefined) => void;
     openTableTool: (formItemId: string, el: HTMLElement) => void;
+    openComponentPicker: (formItemId: string) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 全部表单项 */
     formItems?: ProFormItemProps[];
@@ -20,11 +23,14 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     currentFormItemId?: ProFormItemKey;
     /** 组件库数据 */
     componentData?: ComponentGroup[];
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
 }>>> & {
-    onUpdateItems?: ((result: UpdateItemsResult) => any) | undefined;
     "onUpdate:currentFormItemId"?: ((formItemId?: string | number | symbol | undefined) => any) | undefined;
     onOpenTableTool?: ((formItemId: string, el: HTMLElement) => any) | undefined;
     onUpdateItemChildren?: ((children: ProFormItemProps[], parent?: ProFormItemProps | undefined) => any) | undefined;
+    onUpdateItems?: ((result: UpdateItemsResult) => any) | undefined;
+    onOpenComponentPicker?: ((formItemId: string) => any) | undefined;
 }, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/es/ele-pro-form-builder/components/outline-tree.js

@@ -1,28 +1,23 @@
-import { defineComponent, ref, watch, openBlock, createElementBlock, Fragment, createElementVNode, createBlock, createCommentVNode, unref, createVNode, Transition, withCtx, withModifiers } from "vue";
+import { defineComponent, ref, watch, openBlock, createElementBlock, createBlock, createCommentVNode, unref } from "vue";
 import { ElEmpty } from "element-plus";
 import { findTree } from "../../utils/core";
+import { fixedChildTypes } from "./build-core";
 import { generateCopyItemData, generateAddChildData } from "./build-util";
 import OutlineList from "./outline-list";
-import ComponentList from "./component-list";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "outline-tree",
   props: {
     formItems: {},
     currentFormItemId: {},
-    componentData: {}
+    componentData: {},
+    itemTypeData: {}
   },
-  emits: ["update:currentFormItemId", "updateItems", "updateItemChildren", "openTableTool"],
+  emits: ["update:currentFormItemId", "updateItems", "updateItemChildren", "openTableTool", "openComponentPicker"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const outlineWrapperRef = ref(null);
     const collapseItemIds = ref([]);
-    const isShowComponentList = ref(false);
-    const addParentFormItemId = ref();
-    const hideComponentList = () => {
-      isShowComponentList.value = false;
-      addParentFormItemId.value = void 0;
-    };
     const handleUpdateCurrentFormItemId = (itemId) => {
       emit("update:currentFormItemId", itemId);
     };
@@ -40,21 +35,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       handleUpdateItems(generateCopyItemData(formItemId, props.formItems));
     };
     const handleAddChildren = (triggerItem, action) => {
-      if (triggerItem.type && ["tabs", "collapse", "row", "table", "carousel"].includes(
-        triggerItem.type
-      )) {
+      if (triggerItem.type && fixedChildTypes.some((d) => d.type === triggerItem.type)) {
         const result = generateAddChildData(
           triggerItem,
           void 0,
           void 0,
           action,
-          props.formItems
+          props.formItems,
+          void 0,
+          props.componentData
         );
         handleUpdateItems(result);
-        return;
+      } else {
+        emit("openComponentPicker", triggerItem.key);
       }
-      addParentFormItemId.value = triggerItem.key;
-      isShowComponentList.value = true;
     };
     const handleOpenTableTool = (item, e) => {
       var _a, _b;
@@ -84,57 +78,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             collapseItemIds.value.splice(i, 1);
           }
         }
-        hideComponentList();
       },
       { deep: true }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", {
-          ref_key: "outlineWrapperRef",
-          ref: outlineWrapperRef,
-          class: "ele-pro-form-builder-outline-wrapper"
-        }, [
-          _ctx.formItems ? (openBlock(), createBlock(OutlineList, {
-            key: 0,
-            items: _ctx.formItems,
-            currentFormItemId: _ctx.currentFormItemId,
-            collapseItemIds: collapseItemIds.value,
-            componentData: _ctx.componentData,
-            "onUpdate:currentFormItemId": handleUpdateCurrentFormItemId,
-            onToggleItemCollapse: handleToggleItemCollapse,
-            onDeleteItem: handleDeleteItem,
-            onCopyItem: handleCopyItem,
-            onAddChildren: handleAddChildren,
-            onOpenTableTool: handleOpenTableTool,
-            onUpdateItemChildren: handleUpdateItemChildren
-          }, null, 8, ["items", "currentFormItemId", "collapseItemIds", "componentData"])) : createCommentVNode("", true),
-          !_ctx.formItems || !_ctx.formItems.length ? (openBlock(), createBlock(unref(ElEmpty), {
-            key: 1,
-            imageSize: 58,
-            class: "ele-pro-form-builder-form-empty"
-          })) : createCommentVNode("", true)
-        ], 512),
-        createVNode(Transition, { name: "ele-pro-form-builder-outline-component-anim" }, {
-          default: withCtx(() => [
-            isShowComponentList.value ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: "ele-pro-form-builder-outline-component-wrapper",
-              onClick: hideComponentList
-            }, [
-              createVNode(ComponentList, {
-                formItems: _ctx.formItems,
-                parentFormItemId: addParentFormItemId.value,
-                componentData: _ctx.componentData,
-                onUpdateItems: handleUpdateItems,
-                onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-                }, ["stop"]))
-              }, null, 8, ["formItems", "parentFormItemId", "componentData"])
-            ])) : createCommentVNode("", true)
-          ]),
-          _: 1
-        })
-      ], 64);
+      return openBlock(), createElementBlock("div", {
+        ref_key: "outlineWrapperRef",
+        ref: outlineWrapperRef,
+        class: "ele-pro-form-builder-outline-wrapper"
+      }, [
+        _ctx.formItems ? (openBlock(), createBlock(OutlineList, {
+          key: 0,
+          items: _ctx.formItems,
+          currentFormItemId: _ctx.currentFormItemId,
+          collapseItemIds: collapseItemIds.value,
+          componentData: _ctx.componentData,
+          itemTypeData: _ctx.itemTypeData,
+          "onUpdate:currentFormItemId": handleUpdateCurrentFormItemId,
+          onToggleItemCollapse: handleToggleItemCollapse,
+          onDeleteItem: handleDeleteItem,
+          onCopyItem: handleCopyItem,
+          onAddChildren: handleAddChildren,
+          onOpenTableTool: handleOpenTableTool,
+          onUpdateItemChildren: handleUpdateItemChildren
+        }, null, 8, ["items", "currentFormItemId", "collapseItemIds", "componentData", "itemTypeData"])) : createCommentVNode("", true),
+        !_ctx.formItems || !_ctx.formItems.length ? (openBlock(), createBlock(unref(ElEmpty), {
+          key: 1,
+          imageSize: 58,
+          class: "ele-pro-form-builder-form-empty"
+        })) : createCommentVNode("", true)
+      ], 512);
     };
   }
 });

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

@@ -12,6 +12,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
     proFormComponent?: UserComponent;
     /** 高级表单组件类型数据 */
     itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (visible?: boolean | undefined) => void;
     previewFormSubmit: (data: Record<string, any>) => void;
@@ -24,6 +26,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
     proFormComponent?: UserComponent;
     /** 高级表单组件类型数据 */
     itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
 }>>> & {
     "onUpdate:modelValue"?: ((visible?: boolean | undefined) => any) | undefined;
     onPreviewFormSubmit?: ((data: Record<string, any>) => any) | undefined;