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

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

@@ -1,10 +1,10 @@
 "use strict";
 const vue = require("vue");
-const core = require("../utils/core");
+const common = require("../utils/common");
 const hook = require("../utils/hook");
 const util = require("../ele-pro-form/util");
 const EleSplitPanel = require("../ele-split-panel/index");
-const EleTabs = require("../ele-tabs/index");
+const EleTabBar = require("../ele-tab-bar/index");
 const ComponentList = require("./components/component-list");
 const TemplateList = require("./components/template-list");
 const OutlineTree = require("./components/outline-tree");
@@ -13,120 +13,110 @@ const BodyForm = require("./components/body-form");
 const PropsForm = require("./components/props-form");
 const ConfigForm = require("./components/config-form");
 const TableToolMenu = require("./components/table-tool-menu");
+const ComponentPicker = require("./components/component-picker");
+const buildCore = require("./components/build-core");
 const props = require("./props");
-const _sfc_main = vue.defineComponent({
-  name: "EleProFormBuilder",
-  components: {
-    EleSplitPanel,
-    EleTabs,
-    ComponentList,
-    TemplateList,
-    OutlineTree,
-    BodyHeader,
-    BodyForm,
-    PropsForm,
-    ConfigForm,
-    TableToolMenu
-  },
+const _hoisted_1 = { class: "ele-pro-form-builder-tab-body" };
+const _hoisted_2 = { class: "ele-pro-form-builder-body-wrapper" };
+const _hoisted_3 = { class: "ele-pro-form-builder-tab-body" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "EleProFormBuilder" },
+  __name: "index",
   props: props.proFormBuilderProps,
   emits: props.proFormBuilderEmits,
-  setup(props2) {
-    const [mobile] = hook.useMobile((isMobile) => {
-      leftSideCollapse.value = isMobile;
-      rightSideCollapse.value = isMobile;
-    });
-    const [mobileDevice] = hook.useMobileDevice();
+  setup(__props, { emit: __emit }) {
+    const props2 = __props;
+    const emit = __emit;
     const formProps = vue.useModel(props2, "modelValue");
-    const leftSideCollapse = vue.ref(mobile.value);
-    const rightSideCollapse = vue.ref(mobile.value);
-    const leftTabActive = vue.ref("proFormBuilderComponents");
-    const rightTabActive = vue.ref("proFormBuilderFormProps");
+    const leftSideCollapse = vue.ref(false);
+    const rightSideCollapse = vue.ref(false);
+    const [isMobile] = hook.useMobile((mobile) => {
+      leftSideCollapse.value = mobile;
+      rightSideCollapse.value = mobile;
+    });
+    const [isMobileDevice] = hook.useMobileDevice();
+    const leftTabActive = vue.ref(
+      "components"
+    );
+    const rightTabActive = vue.ref("formProps");
     const currentFormItemId = vue.ref();
     const currentScreen = vue.ref("pc");
     const historyDataList = vue.ref([]);
     const redoDataList = vue.ref([]);
     const tableToolMenuRef = vue.ref(null);
-    const setFormPropValue = (field, value) => {
-      if (!formProps.value) {
-        formProps.value = { items: [] };
-      }
-      if (!field) {
-        Object.assign(formProps.value, value);
-      } else {
-        util.setValue(formProps.value, field, value);
+    const componentPickerOption = vue.reactive({
+      visible: false,
+      addParentFormItemId: void 0,
+      editFormItemId: void 0,
+      editFormItemType: void 0
+    });
+    let storeHistoryTimer = null;
+    const stopStoreHistoryTimer = () => {
+      if (storeHistoryTimer != null) {
+        clearTimeout(storeHistoryTimer);
+        storeHistoryTimer = null;
       }
     };
-    const getFormItems = (setEmptyIfNull) => {
+    const getFormItems = () => {
       var _a;
-      if (!setEmptyIfNull) {
-        return ((_a = formProps.value) == null ? void 0 : _a.items) || [];
-      }
-      if (!formProps.value) {
-        formProps.value = { items: [] };
-        return [];
-      }
-      if (!formProps.value.items) {
-        formProps.value.items = [];
-        return [];
-      }
-      return formProps.value.items;
+      return ((_a = formProps.value) == null ? void 0 : _a.items) || [];
     };
     const setFormItems = (items) => {
       if (!formProps.value) {
-        formProps.value = { items: items || [] };
-      } else {
-        formProps.value.items = items || [];
-      }
-    };
-    const storeHistory = () => {
-      const undoData = JSON.parse(
-        JSON.stringify({
-          items: getFormItems()
-        })
-      );
-      historyDataList.value.push(undoData);
-      redoDataList.value = [];
-    };
-    const handleUndo = () => {
-      const data = historyDataList.value.pop();
-      if (!data) {
+        formProps.value = Object.assign({}, props2.proFormInitialProps || {}, {
+          items: items || []
+        });
         return;
       }
-      const redoData = JSON.parse(
-        JSON.stringify({
-          items: getFormItems()
-        })
-      );
-      redoDataList.value.unshift(redoData);
-      setFormItems(data.items);
-      currentFormItemId.value = void 0;
-    };
-    const handleRedo = () => {
-      const data = redoDataList.value.shift();
-      if (!data) {
+      const data = formProps.value;
+      if (!data.items && props2.proFormInitialProps) {
+        const keys = Object.keys(data).filter(
+          (k) => typeof data[k] !== "undefined"
+        );
+        Object.assign(formProps.value, common.omit(props2.proFormInitialProps, keys), {
+          items: items || []
+        });
         return;
       }
-      const undoData = JSON.parse(
-        JSON.stringify({
-          items: getFormItems()
-        })
-      );
-      historyDataList.value.push(undoData);
-      setFormItems(data.items);
-      currentFormItemId.value = void 0;
+      formProps.value.items = items || [];
     };
-    const handleUpdateFormProp = (field, value) => {
-      setFormPropValue(field, value);
+    const setFormPropValue = (field, value, store) => {
+      {
+        storeHistory(!!field);
+      }
+      if (!formProps.value) {
+        formProps.value = { items: [] };
+      }
+      if (!field) {
+        const excludeFields = ["items"];
+        const temp = common.omit(value, excludeFields);
+        Object.assign(formProps.value, temp);
+        const valueKeys = Object.keys(temp);
+        Object.keys(formProps.value).forEach((key) => {
+          if (formProps.value && !excludeFields.includes(key) && !valueKeys.includes(key) && typeof formProps.value[key] !== "undefined") {
+            formProps.value[key] = void 0;
+          }
+        });
+      } else {
+        util.setValue(formProps.value, field, value);
+      }
     };
-    const updateFormItemProp = (formItemId, field, value) => {
-      const item = core.findTree(
-        getFormItems(),
-        (item2) => item2.key === formItemId
-      );
+    const updateFormItemProp = (formItemId, field, value, store) => {
+      const item = common.findTree(getFormItems(), (item2) => item2.key === formItemId);
       if (item) {
+        if (store) {
+          storeHistory(!!field);
+        }
         if (!field) {
-          const temp = core.omit(value, ["key", "children"]);
+          const excludeFields = ["key", "children"];
+          const temp = common.omit(value, excludeFields);
           Object.assign(item, temp);
+          const valueKeys = Object.keys(temp);
+          Object.keys(item).forEach((key) => {
+            if (item && !excludeFields.includes(key) && !valueKeys.includes(key) && typeof item[key] !== "undefined") {
+              item[key] = void 0;
+            }
+          });
         } else {
           util.setValue(item, field, value);
         }
@@ -137,50 +127,62 @@ const _sfc_main = vue.defineComponent({
         currentFormItemId.value = void 0;
       }
       const formItemsData = getFormItems();
-      core.eachTree(formItemsData, (item, index2, parent) => {
+      common.eachTree(formItemsData, (item, index, parent) => {
         if (item.key === formItemId) {
           if (parent) {
             if (parent.children) {
-              parent.children.splice(index2, 1);
+              parent.children.splice(index, 1);
             }
           } else {
-            formItemsData.splice(index2, 1);
+            formItemsData.splice(index, 1);
           }
           return false;
         }
       });
     };
+    const handleUpdateFormProp = (field, value) => {
+      setFormPropValue(field, value);
+    };
+    const handleUpdateFormItemProp = (formItemId, field, value) => {
+      updateFormItemProp(formItemId, field, value, true);
+    };
     const handleUpdateItems = ({
       addItems,
       updateItems,
       deleteItemIds
     }) => {
-      if (addItems.length || deleteItemIds.length) {
+      hideTableTool();
+      componentPickerOption.visible = false;
+      componentPickerOption.addParentFormItemId = void 0;
+      componentPickerOption.editFormItemId = void 0;
+      componentPickerOption.editFormItemType = void 0;
+      if (addItems.length || deleteItemIds.length || updateItems.length) {
         storeHistory();
       }
       updateItems.forEach((effect) => {
         updateFormItemProp(effect.itemId, effect.field, effect.value);
       });
-      addItems.forEach(({ item, parentItemId, index: index2 }) => {
+      addItems.forEach(({ item, parentItemId, index }) => {
         if (!item) {
           return;
         }
         if (parentItemId == null) {
-          if (index2 != null) {
-            getFormItems(true).splice(index2, 0, item);
+          if (index != null) {
+            const items = getFormItems();
+            setFormItems([...items.slice(0, index), item, ...items.slice(index)]);
           } else {
-            getFormItems(true).push(item);
+            setFormItems([...getFormItems(), item]);
           }
           return;
         }
-        const parent = core.findTree(
+        const parent = common.findTree(
           getFormItems(),
           (item2) => item2.key === parentItemId
         );
         if (parent) {
           if (parent.children) {
-            if (index2 != null) {
-              parent.children.splice(index2, 0, item);
+            if (index != null) {
+              parent.children.splice(index, 0, item);
             } else {
               parent.children.push(item);
             }
@@ -192,15 +194,12 @@ const _sfc_main = vue.defineComponent({
       deleteItemIds.forEach((formItemId) => {
         deleteFormItem(formItemId);
       });
-      if (addItems.length && mobile.value) {
+      if (addItems.length && isMobile.value) {
         leftSideCollapse.value = true;
       }
     };
     const handleSortItemChildren = (childIds, formItemId) => {
-      const item = core.findTree(
-        getFormItems(),
-        (item2) => item2.key === formItemId
-      );
+      const item = common.findTree(getFormItems(), (item2) => item2.key === formItemId);
       if (item && item.children) {
         storeHistory();
         item.children.sort((a, b) => {
@@ -210,17 +209,62 @@ const _sfc_main = vue.defineComponent({
         });
       }
     };
-    const handleUpdateItemChildren = (data, parent) => {
-      storeHistory();
-      if (!parent) {
+    const handleUpdateItemChildren = (data, parentKey) => {
+      hideTableTool();
+      storeHistory(true);
+      if (parentKey == null) {
         setFormItems(data);
         return;
       }
-      parent.children = data;
+      common.eachTree(getFormItems(), (item) => {
+        if (item.key === parentKey) {
+          item.children = data;
+          return false;
+        }
+      });
     };
     const handleUpdateFormItems = (items) => {
       handleUpdateItemChildren(items);
     };
+    const getStoreConfigData = () => {
+      return buildCore.deepCloneObject(formProps.value);
+    };
+    const setStoreConfigData = (data) => {
+      formProps.value = data;
+    };
+    const storeHistory = (delay) => {
+      stopStoreHistoryTimer();
+      const undoData = getStoreConfigData();
+      if (!delay) {
+        historyDataList.value.push(undoData);
+        redoDataList.value = [];
+        return;
+      }
+      storeHistoryTimer = setTimeout(() => {
+        historyDataList.value.push(undoData);
+        redoDataList.value = [];
+      }, 600);
+    };
+    const handleUndo = () => {
+      const data = historyDataList.value.pop();
+      if (!data) {
+        return;
+      }
+      const redoData = getStoreConfigData();
+      redoDataList.value.unshift(redoData);
+      setStoreConfigData(data);
+      currentFormItemId.value = void 0;
+    };
+    const handleRedo = () => {
+      const data = redoDataList.value.shift();
+      if (!data) {
+        return;
+      }
+      const undoData = getStoreConfigData();
+      historyDataList.value.push(undoData);
+      setStoreConfigData(data);
+      currentFormItemId.value = void 0;
+    };
     const handleClear = () => {
       if (getFormItems().length) {
         storeHistory();
@@ -232,7 +276,7 @@ const _sfc_main = vue.defineComponent({
       storeHistory();
       formProps.value = { ...data, items: data.items || [] };
       currentFormItemId.value = void 0;
-      if (mobile.value) {
+      if (isMobile.value) {
         leftSideCollapse.value = true;
         rightSideCollapse.value = true;
       }
@@ -240,236 +284,232 @@ const _sfc_main = vue.defineComponent({
     const handleOpenTableTool = (formItemId, el) => {
       tableToolMenuRef.value && tableToolMenuRef.value.openMenu(formItemId, el);
     };
+    const hideTableTool = () => {
+      tableToolMenuRef.value && tableToolMenuRef.value.hideMenu();
+    };
+    const handleOpenComponentPicker = (formItemId, formItemType) => {
+      if (formItemType != null) {
+        componentPickerOption.addParentFormItemId = void 0;
+        componentPickerOption.editFormItemId = formItemId;
+        componentPickerOption.editFormItemType = formItemType;
+      } else {
+        componentPickerOption.addParentFormItemId = formItemId;
+        componentPickerOption.editFormItemId = void 0;
+        componentPickerOption.editFormItemType = void 0;
+      }
+      componentPickerOption.visible = true;
+    };
+    const handlePreviewFormSubmit = (data) => {
+      emit("previewFormSubmit", data);
+    };
     vue.watch(currentFormItemId, (formItemId) => {
       if (formItemId != null) {
-        if (rightTabActive.value !== "proFormBuilderItemProps") {
-          rightTabActive.value = "proFormBuilderItemProps";
+        if (rightTabActive.value !== "itemProps") {
+          rightTabActive.value = "itemProps";
         }
-      } else if (!getFormItems().length && rightTabActive.value !== "proFormBuilderFormProps") {
-        rightTabActive.value = "proFormBuilderFormProps";
+      } else if (!getFormItems().length && rightTabActive.value !== "formProps") {
+        rightTabActive.value = "formProps";
       }
     });
-    return {
-      leftSideCollapse,
-      rightSideCollapse,
-      leftTabActive,
-      rightTabActive,
-      formProps,
-      mobileDevice,
-      mobile,
-      currentFormItemId,
-      currentScreen,
-      historyDataList,
-      redoDataList,
-      tableToolMenuRef,
-      handleUpdateItems,
-      handleSortItemChildren,
-      handleUpdateItemChildren,
-      handleClear,
-      handleUpdateFormItems,
-      handleUndo,
-      handleRedo,
-      handleImport,
-      handleOpenTableTool,
-      updateFormItemProp,
-      handleUpdateFormProp
-    };
-  }
-});
-const _export_sfc = (sfc, props2) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props2) {
-    target[key] = val;
-  }
-  return target;
-};
-const _hoisted_1 = { class: "ele-pro-form-builder-body-wrapper" };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ComponentList = vue.resolveComponent("ComponentList");
-  const _component_TemplateList = vue.resolveComponent("TemplateList");
-  const _component_OutlineTree = vue.resolveComponent("OutlineTree");
-  const _component_EleTabs = vue.resolveComponent("EleTabs");
-  const _component_BodyHeader = vue.resolveComponent("BodyHeader");
-  const _component_BodyForm = vue.resolveComponent("BodyForm");
-  const _component_PropsForm = vue.resolveComponent("PropsForm");
-  const _component_ConfigForm = vue.resolveComponent("ConfigForm");
-  const _component_EleSplitPanel = vue.resolveComponent("EleSplitPanel");
-  const _component_TableToolMenu = vue.resolveComponent("TableToolMenu");
-  return vue.openBlock(), vue.createBlock(_component_EleSplitPanel, {
-    space: "0px",
-    size: "280px",
-    allowCollapse: true,
-    collapse: _ctx.leftSideCollapse,
-    "onUpdate:collapse": _cache[7] || (_cache[7] = ($event) => _ctx.leftSideCollapse = $event),
-    class: "ele-pro-form-builder-wrapper"
-  }, {
-    body: vue.withCtx(() => [
-      vue.createVNode(_component_EleSplitPanel, {
+    vue.onBeforeUnmount(() => {
+      stopStoreHistoryTimer();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(EleSplitPanel, vue.mergeProps({
         space: "0px",
-        size: "220px",
-        reverse: true,
-        allowCollapse: true,
-        collapse: _ctx.rightSideCollapse,
-        "onUpdate:collapse": _cache[6] || (_cache[6] = ($event) => _ctx.rightSideCollapse = $event),
-        class: "ele-pro-form-builder-main-wrapper"
-      }, {
+        size: "280px",
+        allowCollapse: true
+      }, _ctx.splitPanelProps || {}, {
+        collapse: leftSideCollapse.value,
+        "onUpdate:collapse": _cache[8] || (_cache[8] = ($event) => leftSideCollapse.value = $event),
+        class: "ele-pro-form-builder-wrapper"
+      }), {
         body: vue.withCtx(() => [
-          vue.createElementVNode("div", _hoisted_1, [
-            vue.createVNode(_component_BodyHeader, {
-              currentScreen: _ctx.currentScreen,
-              "onUpdate:currentScreen": _cache[2] || (_cache[2] = ($event) => _ctx.currentScreen = $event),
-              undoDisabled: !_ctx.historyDataList.length,
-              redoDisabled: !_ctx.redoDataList.length,
-              formProps: _ctx.formProps,
-              proFormComponent: _ctx.proFormComponent,
-              onUndo: _ctx.handleUndo,
-              onRedo: _ctx.handleRedo,
-              onClear: _ctx.handleClear
-            }, vue.createSlots({ _: 2 }, [
-              vue.renderList(Object.keys(_ctx.$slots), (name) => {
-                return {
-                  name,
-                  fn: vue.withCtx((slotProps) => [
-                    vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-                  ])
-                };
-              })
-            ]), 1032, ["currentScreen", "undoDisabled", "redoDisabled", "formProps", "proFormComponent", "onUndo", "onRedo", "onClear"]),
-            vue.createVNode(_component_BodyForm, {
-              formProps: _ctx.formProps,
-              componentData: _ctx.componentData,
-              currentFormItemId: _ctx.currentFormItemId,
-              "onUpdate:currentFormItemId": _cache[3] || (_cache[3] = ($event) => _ctx.currentFormItemId = $event),
-              currentScreen: _ctx.currentScreen,
-              proFormComponent: _ctx.proFormComponent,
-              onUpdateItems: _ctx.handleUpdateItems,
-              onOpenTableTool: _ctx.handleOpenTableTool,
-              onUpdateFormItems: _ctx.handleUpdateFormItems
-            }, vue.createSlots({ _: 2 }, [
-              vue.renderList(Object.keys(_ctx.$slots), (name) => {
-                return {
-                  name,
-                  fn: vue.withCtx((slotProps) => [
-                    vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-                  ])
-                };
-              })
-            ]), 1032, ["formProps", "componentData", "currentFormItemId", "currentScreen", "proFormComponent", "onUpdateItems", "onOpenTableTool", "onUpdateFormItems"])
-          ])
-        ]),
-        default: vue.withCtx(() => [
-          vue.createVNode(_component_EleTabs, {
-            flexTable: true,
-            modelValue: _ctx.rightTabActive,
-            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => _ctx.rightTabActive = $event),
-            items: [
-              { name: "proFormBuilderItemProps", label: "属性设置" },
-              { name: "proFormBuilderFormProps", label: "表单设置" }
-            ],
-            class: "ele-pro-form-builder-right-wrapper"
-          }, {
-            proFormBuilderItemProps: vue.withCtx(() => [
-              vue.createVNode(_component_PropsForm, {
-                formProps: _ctx.formProps,
-                currentFormItemId: _ctx.currentFormItemId,
-                "onUpdate:currentFormItemId": _cache[4] || (_cache[4] = ($event) => _ctx.currentFormItemId = $event),
-                configFormPresetProps: _ctx.configFormPresetProps,
-                componentData: _ctx.componentData,
-                proFormComponent: _ctx.proFormComponent,
-                onUpdateItem: _ctx.updateFormItemProp,
-                onUpdateItems: _ctx.handleUpdateItems,
-                onSortItemChildren: _ctx.handleSortItemChildren
-              }, vue.createSlots({ _: 2 }, [
-                vue.renderList(Object.keys(_ctx.$slots), (name) => {
-                  return {
-                    name,
-                    fn: vue.withCtx((slotProps) => [
-                      vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-                    ])
-                  };
-                })
-              ]), 1032, ["formProps", "currentFormItemId", "configFormPresetProps", "componentData", "proFormComponent", "onUpdateItem", "onUpdateItems", "onSortItemChildren"])
+          vue.createVNode(EleSplitPanel, vue.mergeProps({
+            space: "0px",
+            size: "220px",
+            reverse: true,
+            allowCollapse: true
+          }, _ctx.rightSplitPanelProps || {}, {
+            collapse: rightSideCollapse.value,
+            "onUpdate:collapse": _cache[6] || (_cache[6] = ($event) => rightSideCollapse.value = $event),
+            class: "ele-pro-form-builder-main-wrapper"
+          }), {
+            body: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_2, [
+                vue.createVNode(BodyHeader, {
+                  currentScreen: currentScreen.value,
+                  "onUpdate:currentScreen": _cache[2] || (_cache[2] = ($event) => currentScreen.value = $event),
+                  undoDisabled: !historyDataList.value.length,
+                  redoDisabled: !redoDataList.value.length,
+                  formProps: vue.unref(formProps),
+                  headerTools: _ctx.headerTools,
+                  proFormComponent: _ctx.proFormComponent,
+                  jsonEditerComponent: _ctx.jsonEditerComponent,
+                  codeViewerComponent: _ctx.codeViewerComponent,
+                  itemTypeData: _ctx.itemTypeData,
+                  componentData: _ctx.componentData,
+                  httpRequest: _ctx.httpRequest,
+                  onUndo: handleUndo,
+                  onRedo: handleRedo,
+                  onClear: handleClear,
+                  onPreviewFormSubmit: handlePreviewFormSubmit,
+                  onImportData: handleImport
+                }, vue.createSlots({ _: 2 }, [
+                  vue.renderList(Object.keys(_ctx.$slots), (name) => {
+                    return {
+                      name,
+                      fn: vue.withCtx((slotProps) => [
+                        vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                      ])
+                    };
+                  })
+                ]), 1032, ["currentScreen", "undoDisabled", "redoDisabled", "formProps", "headerTools", "proFormComponent", "jsonEditerComponent", "codeViewerComponent", "itemTypeData", "componentData", "httpRequest"]),
+                vue.createVNode(BodyForm, {
+                  formProps: vue.unref(formProps),
+                  componentData: _ctx.componentData,
+                  currentFormItemId: currentFormItemId.value,
+                  "onUpdate:currentFormItemId": _cache[3] || (_cache[3] = ($event) => currentFormItemId.value = $event),
+                  currentScreen: currentScreen.value,
+                  proFormComponent: _ctx.proFormComponent,
+                  itemTypeData: _ctx.itemTypeData,
+                  httpRequest: _ctx.httpRequest,
+                  onUpdateItems: handleUpdateItems,
+                  onOpenTableTool: handleOpenTableTool,
+                  onUpdateFormItems: handleUpdateFormItems
+                }, vue.createSlots({ _: 2 }, [
+                  vue.renderList(Object.keys(_ctx.$slots), (name) => {
+                    return {
+                      name,
+                      fn: vue.withCtx((slotProps) => [
+                        vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                      ])
+                    };
+                  })
+                ]), 1032, ["formProps", "componentData", "currentFormItemId", "currentScreen", "proFormComponent", "itemTypeData", "httpRequest"])
+              ])
             ]),
-            proFormBuilderFormProps: vue.withCtx(() => [
-              vue.createVNode(_component_ConfigForm, {
-                formProps: _ctx.formProps,
-                configFormItems: _ctx.configFormItems,
-                configFormPresetProps: _ctx.configFormPresetProps,
-                proFormComponent: _ctx.proFormComponent,
-                onUpdateFormProp: _ctx.handleUpdateFormProp
-              }, vue.createSlots({ _: 2 }, [
-                vue.renderList(Object.keys(_ctx.$slots), (name) => {
-                  return {
-                    name,
-                    fn: vue.withCtx((slotProps) => [
-                      vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-                    ])
-                  };
-                })
-              ]), 1032, ["formProps", "configFormItems", "configFormPresetProps", "proFormComponent", "onUpdateFormProp"])
+            default: vue.withCtx(() => [
+              vue.createVNode(EleTabBar, {
+                modelValue: rightTabActive.value,
+                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => rightTabActive.value = $event),
+                items: [
+                  { value: "itemProps", label: "属性设置" },
+                  { value: "formProps", label: "表单设置" }
+                ]
+              }, null, 8, ["modelValue"]),
+              vue.createElementVNode("div", _hoisted_3, [
+                rightTabActive.value === "itemProps" ? (vue.openBlock(), vue.createBlock(PropsForm, {
+                  key: 0,
+                  formProps: vue.unref(formProps),
+                  currentFormItemId: currentFormItemId.value,
+                  "onUpdate:currentFormItemId": _cache[5] || (_cache[5] = ($event) => currentFormItemId.value = $event),
+                  configFormPresetProps: _ctx.configFormPresetProps,
+                  componentData: _ctx.componentData,
+                  proFormComponent: _ctx.proFormComponent,
+                  codeEditerComponent: _ctx.codeEditerComponent,
+                  jsonEditerComponent: _ctx.jsonEditerComponent,
+                  htmlEditerComponent: _ctx.htmlEditerComponent,
+                  itemTypeData: _ctx.itemTypeData,
+                  httpRequest: _ctx.httpRequest,
+                  onUpdateItem: handleUpdateFormItemProp,
+                  onUpdateItems: handleUpdateItems,
+                  onSortItemChildren: handleSortItemChildren,
+                  onOpenComponentPicker: handleOpenComponentPicker
+                }, vue.createSlots({ _: 2 }, [
+                  vue.renderList(Object.keys(_ctx.$slots), (name) => {
+                    return {
+                      name,
+                      fn: vue.withCtx((slotProps) => [
+                        vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                      ])
+                    };
+                  })
+                ]), 1032, ["formProps", "currentFormItemId", "configFormPresetProps", "componentData", "proFormComponent", "codeEditerComponent", "jsonEditerComponent", "htmlEditerComponent", "itemTypeData", "httpRequest"])) : (vue.openBlock(), vue.createBlock(ConfigForm, {
+                  key: 1,
+                  formProps: vue.unref(formProps),
+                  configFormItems: _ctx.configFormItems,
+                  configFormPresetProps: _ctx.configFormPresetProps,
+                  proFormComponent: _ctx.proFormComponent,
+                  jsonEditerComponent: _ctx.jsonEditerComponent,
+                  itemTypeData: _ctx.itemTypeData,
+                  httpRequest: _ctx.httpRequest,
+                  onUpdateFormProp: handleUpdateFormProp
+                }, vue.createSlots({ _: 2 }, [
+                  vue.renderList(Object.keys(_ctx.$slots), (name) => {
+                    return {
+                      name,
+                      fn: vue.withCtx((slotProps) => [
+                        vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                      ])
+                    };
+                  })
+                ]), 1032, ["formProps", "configFormItems", "configFormPresetProps", "proFormComponent", "jsonEditerComponent", "itemTypeData", "httpRequest"]))
+              ])
             ]),
             _: 3
-          }, 8, ["modelValue"])
+          }, 16, ["collapse"])
         ]),
-        _: 3
-      }, 8, ["collapse"])
-    ]),
-    default: vue.withCtx(() => {
-      var _a;
-      return [
-        vue.createVNode(_component_EleTabs, {
-          flexTable: true,
-          modelValue: _ctx.leftTabActive,
-          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.leftTabActive = $event),
-          items: [
-            { name: "proFormBuilderComponents", label: "组件库" },
-            { name: "proFormBuilderTemplates", label: "模板库" },
-            { name: "proFormBuilderOutlines", label: "大纲" }
-          ],
-          class: "ele-pro-form-builder-left-wrapper"
-        }, {
-          proFormBuilderComponents: vue.withCtx(() => {
-            var _a2;
-            return [
-              vue.createVNode(_component_ComponentList, {
-                formItems: (_a2 = _ctx.formProps) == null ? void 0 : _a2.items,
-                draggable: !_ctx.mobileDevice && !_ctx.mobile,
+        default: vue.withCtx(() => {
+          var _a, _b, _c, _d;
+          return [
+            vue.createVNode(EleTabBar, {
+              modelValue: leftTabActive.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => leftTabActive.value = $event),
+              items: [
+                { value: "components", label: "组件库" },
+                { value: "templates", label: "模板库" },
+                { value: "outlines", label: "大纲" }
+              ]
+            }, null, 8, ["modelValue"]),
+            vue.createElementVNode("div", _hoisted_1, [
+              leftTabActive.value === "outlines" ? (vue.openBlock(), vue.createBlock(OutlineTree, {
+                key: 0,
+                formItems: (_a = vue.unref(formProps)) == null ? void 0 : _a.items,
+                currentFormItemId: currentFormItemId.value,
+                "onUpdate:currentFormItemId": _cache[1] || (_cache[1] = ($event) => currentFormItemId.value = $event),
                 componentData: _ctx.componentData,
-                onUpdateItems: _ctx.handleUpdateItems
-              }, null, 8, ["formItems", "draggable", "componentData", "onUpdateItems"])
-            ];
-          }),
-          proFormBuilderTemplates: vue.withCtx(() => [
-            vue.createVNode(_component_TemplateList, {
-              templateData: _ctx.templateData,
-              onImportData: _ctx.handleImport
-            }, null, 8, ["templateData", "onImportData"])
-          ]),
-          proFormBuilderOutlines: vue.withCtx(() => {
-            var _a2;
-            return [
-              vue.createVNode(_component_OutlineTree, {
-                formItems: (_a2 = _ctx.formProps) == null ? void 0 : _a2.items,
-                currentFormItemId: _ctx.currentFormItemId,
-                "onUpdate:currentFormItemId": _cache[0] || (_cache[0] = ($event) => _ctx.currentFormItemId = $event),
+                itemTypeData: _ctx.itemTypeData,
+                onUpdateItems: handleUpdateItems,
+                onUpdateItemChildren: handleUpdateItemChildren,
+                onOpenTableTool: handleOpenTableTool,
+                onOpenComponentPicker: handleOpenComponentPicker
+              }, null, 8, ["formItems", "currentFormItemId", "componentData", "itemTypeData"])) : leftTabActive.value === "templates" ? (vue.openBlock(), vue.createBlock(TemplateList, {
+                key: 1,
+                templateData: _ctx.templateData,
+                onImportData: handleImport
+              }, null, 8, ["templateData"])) : (vue.openBlock(), vue.createBlock(ComponentList, {
+                key: 2,
+                formItems: (_b = vue.unref(formProps)) == null ? void 0 : _b.items,
+                draggable: !vue.unref(isMobileDevice) && !vue.unref(isMobile),
                 componentData: _ctx.componentData,
-                onUpdateItems: _ctx.handleUpdateItems,
-                onUpdateItemChildren: _ctx.handleUpdateItemChildren,
-                onOpenTableTool: _ctx.handleOpenTableTool
-              }, null, 8, ["formItems", "currentFormItemId", "componentData", "onUpdateItems", "onUpdateItemChildren", "onOpenTableTool"])
-            ];
-          }),
-          _: 1
-        }, 8, ["modelValue"]),
-        vue.createVNode(_component_TableToolMenu, {
-          ref: "tableToolMenuRef",
-          formItems: (_a = _ctx.formProps) == null ? void 0 : _a.items,
-          onUpdateItems: _ctx.handleUpdateItems
-        }, null, 8, ["formItems", "onUpdateItems"])
-      ];
-    }),
-    _: 3
-  }, 8, ["collapse"]);
-}
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-module.exports = index;
+                itemTypeData: _ctx.itemTypeData,
+                onUpdateItems: handleUpdateItems
+              }, null, 8, ["formItems", "draggable", "componentData", "itemTypeData"]))
+            ]),
+            vue.createVNode(TableToolMenu, {
+              ref_key: "tableToolMenuRef",
+              ref: tableToolMenuRef,
+              formItems: (_c = vue.unref(formProps)) == null ? void 0 : _c.items,
+              componentData: _ctx.componentData,
+              onUpdateItems: handleUpdateItems
+            }, null, 8, ["formItems", "componentData"]),
+            vue.createVNode(ComponentPicker, {
+              modelValue: componentPickerOption.visible,
+              "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => componentPickerOption.visible = $event),
+              addParentFormItemId: componentPickerOption.addParentFormItemId,
+              editFormItemId: componentPickerOption.editFormItemId,
+              editFormItemType: componentPickerOption.editFormItemType,
+              formItems: (_d = vue.unref(formProps)) == null ? void 0 : _d.items,
+              componentData: _ctx.componentData,
+              itemTypeData: _ctx.itemTypeData,
+              onUpdateItems: handleUpdateItems
+            }, null, 8, ["modelValue", "addParentFormItemId", "editFormItemId", "editFormItemType", "formItems", "componentData", "itemTypeData"])
+          ];
+        }),
+        _: 3
+      }, 16, ["collapse"]);
+    };
+  }
+});
+module.exports = _sfc_main;