ele-admin-plus 1.2.2-beta.5 → 1.3.1-beta.1

package/es/ele-pro-form-builder/index.js

@@ -0,0 +1,476 @@
+import { defineComponent, useModel, ref, watch, resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementVNode, createSlots, renderList, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { findTree, omit, eachTree } from "../utils/core";
+import { useMobile, useMobileDevice } from "../utils/hook";
+import { setValue } from "../ele-pro-form/util";
+import EleSplitPanel from "../ele-split-panel/index";
+import EleTabs from "../ele-tabs/index";
+import ComponentList from "./components/component-list";
+import TemplateList from "./components/template-list";
+import OutlineTree from "./components/outline-tree";
+import BodyHeader from "./components/body-header";
+import BodyForm from "./components/body-form";
+import PropsForm from "./components/props-form";
+import ConfigForm from "./components/config-form";
+import TableToolMenu from "./components/table-tool-menu";
+import { proFormBuilderProps, proFormBuilderEmits } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleProFormBuilder",
+  components: {
+    EleSplitPanel,
+    EleTabs,
+    ComponentList,
+    TemplateList,
+    OutlineTree,
+    BodyHeader,
+    BodyForm,
+    PropsForm,
+    ConfigForm,
+    TableToolMenu
+  },
+  props: proFormBuilderProps,
+  emits: proFormBuilderEmits,
+  setup(props) {
+    const [mobile] = useMobile((isMobile) => {
+      leftSideCollapse.value = isMobile;
+      rightSideCollapse.value = isMobile;
+    });
+    const [mobileDevice] = useMobileDevice();
+    const formProps = useModel(props, "modelValue");
+    const leftSideCollapse = ref(mobile.value);
+    const rightSideCollapse = ref(mobile.value);
+    const leftTabActive = ref("proFormBuilderComponents");
+    const rightTabActive = ref("proFormBuilderFormProps");
+    const currentFormItemId = ref();
+    const currentScreen = ref("pc");
+    const historyDataList = ref([]);
+    const redoDataList = ref([]);
+    const tableToolMenuRef = ref(null);
+    const setFormPropValue = (field, value) => {
+      if (!formProps.value) {
+        formProps.value = { items: [] };
+      }
+      if (!field) {
+        Object.assign(formProps.value, value);
+      } else {
+        setValue(formProps.value, field, value);
+      }
+    };
+    const getFormItems = (setEmptyIfNull) => {
+      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;
+    };
+    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) {
+        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) {
+        return;
+      }
+      const undoData = JSON.parse(
+        JSON.stringify({
+          items: getFormItems()
+        })
+      );
+      historyDataList.value.push(undoData);
+      setFormItems(data.items);
+      currentFormItemId.value = void 0;
+    };
+    const handleUpdateFormProp = (field, value) => {
+      setFormPropValue(field, value);
+    };
+    const updateFormItemProp = (formItemId, field, value) => {
+      const item = findTree(
+        getFormItems(),
+        (item2) => item2.key === formItemId
+      );
+      if (item) {
+        if (!field) {
+          const temp = omit(value, ["key", "children"]);
+          Object.assign(item, temp);
+        } else {
+          setValue(item, field, value);
+        }
+      }
+    };
+    const deleteFormItem = (formItemId) => {
+      if (currentFormItemId.value != null && currentFormItemId.value === formItemId) {
+        currentFormItemId.value = void 0;
+      }
+      const formItemsData = getFormItems();
+      eachTree(formItemsData, (item, index2, parent) => {
+        if (item.key === formItemId) {
+          if (parent) {
+            if (parent.children) {
+              parent.children.splice(index2, 1);
+            }
+          } else {
+            formItemsData.splice(index2, 1);
+          }
+          return false;
+        }
+      });
+    };
+    const handleUpdateItems = ({
+      addItems,
+      updateItems,
+      deleteItemIds
+    }) => {
+      if (addItems.length || deleteItemIds.length) {
+        storeHistory();
+      }
+      updateItems.forEach((effect) => {
+        updateFormItemProp(effect.itemId, effect.field, effect.value);
+      });
+      addItems.forEach(({ item, parentItemId, index: index2 }) => {
+        if (!item) {
+          return;
+        }
+        if (parentItemId == null) {
+          if (index2 != null) {
+            getFormItems(true).splice(index2, 0, item);
+          } else {
+            getFormItems(true).push(item);
+          }
+          return;
+        }
+        const parent = findTree(
+          getFormItems(),
+          (item2) => item2.key === parentItemId
+        );
+        if (parent) {
+          if (parent.children) {
+            if (index2 != null) {
+              parent.children.splice(index2, 0, item);
+            } else {
+              parent.children.push(item);
+            }
+          } else {
+            parent.children = [item];
+          }
+        }
+      });
+      deleteItemIds.forEach((formItemId) => {
+        deleteFormItem(formItemId);
+      });
+      if (addItems.length && mobile.value) {
+        leftSideCollapse.value = true;
+      }
+    };
+    const handleSortItemChildren = (childIds, formItemId) => {
+      const item = findTree(
+        getFormItems(),
+        (item2) => item2.key === formItemId
+      );
+      if (item && item.children) {
+        storeHistory();
+        item.children.sort((a, b) => {
+          const aIndex = a.key == null ? -1 : childIds.indexOf(a.key);
+          const bIndex = b.key == null ? -1 : childIds.indexOf(b.key);
+          return aIndex - bIndex;
+        });
+      }
+    };
+    const handleUpdateItemChildren = (data, parent) => {
+      storeHistory();
+      if (!parent) {
+        setFormItems(data);
+        return;
+      }
+      parent.children = data;
+    };
+    const handleUpdateFormItems = (items) => {
+      handleUpdateItemChildren(items);
+    };
+    const handleClear = () => {
+      if (getFormItems().length) {
+        storeHistory();
+        setFormItems([]);
+        currentFormItemId.value = void 0;
+      }
+    };
+    const handleImport = (data) => {
+      storeHistory();
+      formProps.value = { ...data, items: data.items || [] };
+      currentFormItemId.value = void 0;
+      if (mobile.value) {
+        leftSideCollapse.value = true;
+        rightSideCollapse.value = true;
+      }
+    };
+    const handleOpenTableTool = (formItemId, el) => {
+      tableToolMenuRef.value && tableToolMenuRef.value.openMenu(formItemId, el);
+    };
+    watch(currentFormItemId, (formItemId) => {
+      if (formItemId != null) {
+        if (rightTabActive.value !== "proFormBuilderItemProps") {
+          rightTabActive.value = "proFormBuilderItemProps";
+        }
+      } else if (!getFormItems().length && rightTabActive.value !== "proFormBuilderFormProps") {
+        rightTabActive.value = "proFormBuilderFormProps";
+      }
+    });
+    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, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    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 = resolveComponent("ComponentList");
+  const _component_TemplateList = resolveComponent("TemplateList");
+  const _component_OutlineTree = resolveComponent("OutlineTree");
+  const _component_EleTabs = resolveComponent("EleTabs");
+  const _component_BodyHeader = resolveComponent("BodyHeader");
+  const _component_BodyForm = resolveComponent("BodyForm");
+  const _component_PropsForm = resolveComponent("PropsForm");
+  const _component_ConfigForm = resolveComponent("ConfigForm");
+  const _component_EleSplitPanel = resolveComponent("EleSplitPanel");
+  const _component_TableToolMenu = resolveComponent("TableToolMenu");
+  return openBlock(), 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: withCtx(() => [
+      createVNode(_component_EleSplitPanel, {
+        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"
+      }, {
+        body: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            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
+            }, createSlots({ _: 2 }, [
+              renderList(Object.keys(_ctx.$slots), (name) => {
+                return {
+                  name,
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+                  ])
+                };
+              })
+            ]), 1032, ["currentScreen", "undoDisabled", "redoDisabled", "formProps", "proFormComponent", "onUndo", "onRedo", "onClear"]),
+            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
+            }, createSlots({ _: 2 }, [
+              renderList(Object.keys(_ctx.$slots), (name) => {
+                return {
+                  name,
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+                  ])
+                };
+              })
+            ]), 1032, ["formProps", "componentData", "currentFormItemId", "currentScreen", "proFormComponent", "onUpdateItems", "onOpenTableTool", "onUpdateFormItems"])
+          ])
+        ]),
+        default: withCtx(() => [
+          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: withCtx(() => [
+              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
+              }, createSlots({ _: 2 }, [
+                renderList(Object.keys(_ctx.$slots), (name) => {
+                  return {
+                    name,
+                    fn: withCtx((slotProps) => [
+                      renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+                    ])
+                  };
+                })
+              ]), 1032, ["formProps", "currentFormItemId", "configFormPresetProps", "componentData", "proFormComponent", "onUpdateItem", "onUpdateItems", "onSortItemChildren"])
+            ]),
+            proFormBuilderFormProps: withCtx(() => [
+              createVNode(_component_ConfigForm, {
+                formProps: _ctx.formProps,
+                configFormItems: _ctx.configFormItems,
+                configFormPresetProps: _ctx.configFormPresetProps,
+                proFormComponent: _ctx.proFormComponent,
+                onUpdateFormProp: _ctx.handleUpdateFormProp
+              }, createSlots({ _: 2 }, [
+                renderList(Object.keys(_ctx.$slots), (name) => {
+                  return {
+                    name,
+                    fn: withCtx((slotProps) => [
+                      renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+                    ])
+                  };
+                })
+              ]), 1032, ["formProps", "configFormItems", "configFormPresetProps", "proFormComponent", "onUpdateFormProp"])
+            ]),
+            _: 3
+          }, 8, ["modelValue"])
+        ]),
+        _: 3
+      }, 8, ["collapse"])
+    ]),
+    default: withCtx(() => {
+      var _a;
+      return [
+        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: withCtx(() => {
+            var _a2;
+            return [
+              createVNode(_component_ComponentList, {
+                formItems: (_a2 = _ctx.formProps) == null ? void 0 : _a2.items,
+                draggable: !_ctx.mobileDevice && !_ctx.mobile,
+                componentData: _ctx.componentData,
+                onUpdateItems: _ctx.handleUpdateItems
+              }, null, 8, ["formItems", "draggable", "componentData", "onUpdateItems"])
+            ];
+          }),
+          proFormBuilderTemplates: withCtx(() => [
+            createVNode(_component_TemplateList, {
+              templateData: _ctx.templateData,
+              onImportData: _ctx.handleImport
+            }, null, 8, ["templateData", "onImportData"])
+          ]),
+          proFormBuilderOutlines: withCtx(() => {
+            var _a2;
+            return [
+              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),
+                componentData: _ctx.componentData,
+                onUpdateItems: _ctx.handleUpdateItems,
+                onUpdateItemChildren: _ctx.handleUpdateItemChildren,
+                onOpenTableTool: _ctx.handleOpenTableTool
+              }, null, 8, ["formItems", "currentFormItemId", "componentData", "onUpdateItems", "onUpdateItemChildren", "onOpenTableTool"])
+            ];
+          }),
+          _: 1
+        }, 8, ["modelValue"]),
+        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]]);
+export {
+  index as default
+};

package/es/ele-pro-form-builder/props.d.ts

@@ -0,0 +1,29 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { UserComponent } from '../ele-app/types';
+import { ProFormItemProps } from '../ele-pro-form/types';
+import { TemplateFormConfig, ComponentGroup, TemplateItem } from './types';
+
+/**
+ * 属性
+ */
+export declare const proFormBuilderProps: {
+    /** 配置数据 */
+    modelValue: PropType<TemplateFormConfig>;
+    /** 组件库数据 */
+    componentData: PropType<ComponentGroup[]>;
+    /** 模板库数据 */
+    templateData: PropType<TemplateItem[]>;
+    /** 表单属性设置的表单项配置 */
+    configFormItems: PropType<ProFormItemProps[]>;
+    /** 表单属性设置的组件预设属性值 */
+    configFormPresetProps: PropType<Record<string, any>>;
+    /** 高级表单组件 */
+    proFormComponent: PropType<UserComponent>;
+};
+export type ProFormBuilderProps = ExtractPropTypes<typeof proFormBuilderProps>;
+/**
+ * 事件
+ */
+export declare const proFormBuilderEmits: {
+    'update:modelValue': (_config: TemplateFormConfig) => boolean;
+};

package/es/ele-pro-form-builder/props.js

@@ -0,0 +1,21 @@
+const proFormBuilderProps = {
+  /** 配置数据 */
+  modelValue: Object,
+  /** 组件库数据 */
+  componentData: Array,
+  /** 模板库数据 */
+  templateData: Array,
+  /** 表单属性设置的表单项配置 */
+  configFormItems: Array,
+  /** 表单属性设置的组件预设属性值 */
+  configFormPresetProps: Object,
+  /** 高级表单组件 */
+  proFormComponent: [String, Object, Function]
+};
+const proFormBuilderEmits = {
+  "update:modelValue": (_config) => true
+};
+export {
+  proFormBuilderEmits,
+  proFormBuilderProps
+};

package/es/ele-pro-form-builder/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 表单构建器主题变量 */
+@mixin set-pro-form-builder-var($var) {
+  .ele-pro-form-builder-wrapper {
+    @include set-ele-var('pro-form-builder', $var);
+  }
+}

package/es/ele-pro-form-builder/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-pro-form-builder/style/index.js

@@ -0,0 +1,3 @@
+import "element-plus/es/components/icon/style/index";
+import "../../ele-pro-form/style/index";
+import "./index.scss";