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

package/es/ele-pro-form/util.js

@@ -0,0 +1,296 @@
+import { h } from "vue";
+import ProFormContent from "./components/pro-form-content";
+import { default as default2 } from "../../node_modules/lodash-es/get.js";
+import { default as default3 } from "../../node_modules/lodash-es/set.js";
+import { default as default4 } from "../../node_modules/lodash-es/merge.js";
+const viewTypes = [
+  "label",
+  "divider",
+  "button",
+  "icon",
+  "image",
+  "alert",
+  "steps",
+  "proTable"
+];
+const containerTypes = [
+  "card",
+  "tabs",
+  "tabPane",
+  "table",
+  "tableRow",
+  "tableCell",
+  "collapse",
+  "collapseItem",
+  "carousel",
+  "carouselItem",
+  "row",
+  "col",
+  "descriptions",
+  "descriptionsItem",
+  "div"
+];
+const defaultTypes = [
+  "input",
+  "textarea",
+  "select",
+  "multipleSelect",
+  "radio",
+  "radioButton",
+  "checkbox",
+  "checkboxButton",
+  "date",
+  "datetime",
+  "daterange",
+  "datetimerange",
+  "time",
+  "timerange",
+  "timeSelect",
+  "switch",
+  "inputNumber",
+  "autocomplete",
+  "cascader",
+  "multipleCascader",
+  "rate",
+  "slider",
+  "sliderRange",
+  "mention",
+  "colorPicker",
+  "treeSelect",
+  "treeMultipleSelect",
+  "virtualTreeSelect",
+  "virtualTreeMultipleSelect",
+  "tableSelect",
+  "tableMultipleSelect",
+  "checkCard",
+  "multipleCheckCard",
+  "editTag",
+  "transfer",
+  "iconSelect",
+  "dictRadio",
+  "dictCheckbox",
+  "dictSelect",
+  "dictMultipleSelect",
+  "imageUpload",
+  "fileUpload",
+  "regions",
+  "multipleRegions",
+  "editor",
+  "text",
+  ...viewTypes,
+  ...containerTypes
+];
+const selectTypes = [
+  "select",
+  "multipleSelect",
+  "radio",
+  "radioButton",
+  "checkbox",
+  "checkboxButton",
+  "date",
+  "datetime",
+  "daterange",
+  "datetimerange",
+  "time",
+  "timerange",
+  "timeSelect",
+  "switch",
+  "cascader",
+  "multipleCascader",
+  "rate",
+  "slider",
+  "sliderRange",
+  "colorPicker",
+  "treeSelect",
+  "tableMultipleSelect",
+  "virtualTreeSelect",
+  "virtualTreeMultipleSelect",
+  "tableSelect",
+  "tableMultipleSelect",
+  "checkCard",
+  "multipleCheckCard",
+  "transfer",
+  "iconSelect",
+  "dictRadio",
+  "dictCheckbox",
+  "dictSelect",
+  "dictMultipleSelect",
+  "regions",
+  "multipleRegions"
+];
+const uploadTypes = ["imageUpload", "fileUpload"];
+const optionsTypes = [
+  "select",
+  "multipleSelect",
+  "radio",
+  "radioButton",
+  "checkbox",
+  "checkboxButton",
+  "autocomplete",
+  "cascader",
+  "multipleCascader",
+  "mention",
+  "treeSelect",
+  "treeMultipleSelect",
+  "checkCard",
+  "multipleCheckCard"
+];
+const blurTypes = ["input", "textarea"];
+const stringTypes = [
+  "input",
+  "textarea",
+  "date",
+  "datetime",
+  "time",
+  "timeSelect",
+  "autocomplete",
+  "mention",
+  "colorPicker",
+  "editor",
+  "text"
+];
+const numberTypes = [
+  "select",
+  "radio",
+  "radioButton",
+  "checkbox",
+  "checkboxButton",
+  "switch",
+  "inputNumber",
+  "rate",
+  "slider",
+  "tableSelect"
+];
+const arrayTypes = [
+  "multipleSelect",
+  "checkbox",
+  "checkboxButton",
+  "daterange",
+  "datetimerange",
+  "timerange",
+  "cascader",
+  "multipleCascader",
+  "sliderRange",
+  "transfer",
+  "treeMultipleSelect",
+  "virtualTreeMultipleSelect",
+  "tableMultipleSelect",
+  "multipleCheckCard",
+  "editTag",
+  "dictCheckbox",
+  "dictMultipleSelect",
+  "regions",
+  "multipleRegions"
+];
+function getRuleType(type) {
+  if (type) {
+    if (arrayTypes.includes(type)) {
+      return "array";
+    }
+    if (numberTypes.includes(type)) {
+      return "number";
+    }
+  }
+  return "string";
+}
+function getRuleTrigger(type) {
+  return type && blurTypes.includes(type) ? "blur" : "change";
+}
+function getRuleMessage(type, label, requiredMessage, placeholder) {
+  if (typeof requiredMessage === "string" && requiredMessage) {
+    return requiredMessage;
+  }
+  if (typeof placeholder === "string" && placeholder) {
+    return placeholder;
+  }
+  const text = label ?? "";
+  if (type) {
+    if (selectTypes.includes(type)) {
+      return `请选择${text}`;
+    }
+    if (uploadTypes.includes(type)) {
+      return `请上传${text}`;
+    }
+  }
+  return `请输入${text}`;
+}
+function isShowItem(item, form, items, searchExpand) {
+  if (!item.prop) {
+    return false;
+  }
+  if (item.vIf != null) {
+    if (typeof item.vIf === "function") {
+      return item.vIf(form, items, searchExpand);
+    }
+    if (typeof item.vIf === "string" && item.vIf.trim().length) {
+      try {
+        return new Function(
+          "form",
+          "items",
+          "searchExpand",
+          "formItems",
+          "formData",
+          `return (${item.vIf})`
+        )(form, items, searchExpand, items, form);
+      } catch (e) {
+        console.error(e);
+        return false;
+      }
+    }
+    if (item.vIf === false) {
+      return false;
+    }
+  }
+  return true;
+}
+function ChildrenRender(props, { emit }) {
+  return h(
+    ProFormContent,
+    {
+      model: props.model,
+      rules: props.rules,
+      items: props.item.children ?? [],
+      grid: props.item.grid,
+      rowProps: props.item.rowProps,
+      formItems: props.formItems,
+      searchExpand: props.searchExpand,
+      parentItem: props.item,
+      editable: props.editable,
+      sortDisabled: props.sortDisabled,
+      containerSelectable: props.containerSelectable,
+      activeItemKey: props.activeItemKey,
+      onUpdateItemValue: (prop, value) => {
+        emit("updateItemValue", prop, value);
+      },
+      onUpdateItemsData: (items, parentItem) => {
+        emit("updateItemsData", items, parentItem);
+      },
+      "onUpdate:activeItemKey": (activeKey) => {
+        emit("update:activeItemKey", activeKey);
+      }
+    },
+    props.slots
+  );
+}
+const sortableGroupName = "ProFormBuilderBodySortGroup";
+export {
+  ChildrenRender,
+  arrayTypes,
+  blurTypes,
+  containerTypes,
+  defaultTypes,
+  getRuleMessage,
+  getRuleTrigger,
+  getRuleType,
+  default2 as getValue,
+  isShowItem,
+  default4 as mergeValue,
+  numberTypes,
+  optionsTypes,
+  selectTypes,
+  default3 as setValue,
+  sortableGroupName,
+  stringTypes,
+  uploadTypes,
+  viewTypes
+};

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

@@ -0,0 +1,54 @@
+import { UserComponent } from '../../ele-app/types';
+import { ProFormItemKey } from '../../ele-pro-form/types';
+import { BuildFormItem, TemplateFormConfig, ComponentGroup, UpdateItemsResult } from '../types';
+
+declare function __VLS_template(): Partial<Record<string, (_: any) => any>>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 选中的表单项 id */
+    currentFormItemId?: ProFormItemKey;
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: string;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:currentFormItemId": (formItemId?: string | number | symbol | undefined) => void;
+    updateItems: (result: UpdateItemsResult) => void;
+    openTableTool: (formItemId: string, el: HTMLElement) => void;
+    updateFormItems: (items: BuildFormItem[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 选中的表单项 id */
+    currentFormItemId?: ProFormItemKey;
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: string;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+}>>> & {
+    onOpenTableTool?: ((formItemId: string, el: HTMLElement) => any) | undefined;
+    onUpdateItems?: ((result: UpdateItemsResult) => any) | undefined;
+    "onUpdate:currentFormItemId"?: ((formItemId?: string | number | symbol | undefined) => any) | undefined;
+    onUpdateFormItems?: ((items: BuildFormItem[]) => any) | undefined;
+}, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/ele-pro-form-builder/components/body-form.js

@@ -0,0 +1,179 @@
+import { defineComponent, ref, reactive, watch, openBlock, createElementBlock, normalizeClass, createBlock, resolveDynamicComponent, mergeProps, createSlots, withCtx, createVNode, renderList, renderSlot, normalizeProps, guardReactiveProps, unref, createCommentVNode } from "vue";
+import { ElEmpty } from "element-plus";
+import { eachTree } from "../../utils/core";
+import { mergeValue, setValue } from "../../ele-pro-form/util";
+import EleProForm from "../../ele-pro-form/index";
+import { getFormInitValue } from "../util";
+import { generateAddChildData, generateCopyItemData } from "./build-util";
+import ComponentName from "./component-name";
+import BuilderTools from "./builder-tools";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "body-form",
+  props: {
+    formProps: {},
+    currentFormItemId: {},
+    currentScreen: {},
+    componentData: {},
+    proFormComponent: {}
+  },
+  emits: ["update:currentFormItemId", "updateItems", "openTableTool", "updateFormItems"],
+  setup(__props, { emit: __emit }) {
+    const ownSlots = ["builderItemHandleContent", "builderItemTools"];
+    const props = __props;
+    const emit = __emit;
+    const proFormRef = ref(null);
+    const formData = reactive({});
+    const cachebuilderFormData = reactive({});
+    const handleUpdateItems = (result) => {
+      emit("updateItems", result);
+    };
+    const handleUpdateCurrentFormItemId = (formItemId) => {
+      emit("update:currentFormItemId", formItemId);
+    };
+    const handleDeleteItem = (item) => {
+      if (item.key != null) {
+        handleUpdateItems({
+          deleteItemIds: [item.key],
+          addItems: [],
+          updateItems: []
+        });
+      }
+    };
+    const handleAddChildrenItem = (formItem, action) => {
+      var _a;
+      if (formItem.key != null) {
+        eachTree((_a = props.formProps) == null ? void 0 : _a.items, (item, cIndex, parent) => {
+          var _a2;
+          if (item.key === formItem.key) {
+            const result = generateAddChildData(
+              item,
+              parent,
+              cIndex,
+              action,
+              (_a2 = props.formProps) == null ? void 0 : _a2.items
+            );
+            handleUpdateItems(result);
+            return false;
+          }
+        });
+      }
+    };
+    const handleCopyItem = (item) => {
+      var _a;
+      if (item.key != null) {
+        handleUpdateItems(
+          generateCopyItemData(item.key, (_a = props.formProps) == null ? void 0 : _a.items)
+        );
+      }
+    };
+    const handleOpenTableTool = (item, e) => {
+      if (item.key != null) {
+        emit("openTableTool", item.key, e.currentTarget);
+      }
+    };
+    const setBuilderFormDataFieldValue = (field, value) => {
+      setValue(formData, field, value);
+      setValue(cachebuilderFormData, field, value);
+    };
+    const handleUpdateFormItems = (items) => {
+      emit("updateFormItems", items);
+    };
+    watch(
+      () => props.currentFormItemId,
+      (currentFormItemId) => {
+        var _a;
+        eachTree((_a = props.formProps) == null ? void 0 : _a.items, (item, _cIndex, parent) => {
+          if (item.key === currentFormItemId) {
+            if (item.type && ["tabPane", "collapseItem"].includes(item.type) && parent) {
+              setBuilderFormDataFieldValue(parent.prop, item.prop);
+            }
+            return false;
+          }
+        });
+      }
+    );
+    watch(
+      () => props.formProps,
+      () => {
+        var _a;
+        Object.keys(formData).forEach((k) => {
+          formData[k] = void 0;
+        });
+        mergeValue(
+          formData,
+          getFormInitValue((_a = props.formProps) == null ? void 0 : _a.items),
+          cachebuilderFormData
+        );
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "ele-pro-form-builder-body",
+          { "is-pc": _ctx.currentScreen === "pc" },
+          { "is-pad": _ctx.currentScreen === "pad" },
+          { "is-phone": _ctx.currentScreen === "phone" }
+        ])
+      }, [
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.proFormComponent || EleProForm), mergeProps(_ctx.formProps || {}, {
+          ref_key: "proFormRef",
+          ref: proFormRef,
+          model: formData,
+          searchExpand: formData.searchExpand,
+          "onUpdate:searchExpand": _cache[0] || (_cache[0] = ($event) => formData.searchExpand = $event),
+          activeKey: _ctx.currentFormItemId,
+          editable: true,
+          footer: false,
+          validateOnRuleChange: false,
+          scrollToError: false,
+          showMessage: false,
+          class: "ele-pro-form-builder-body-form",
+          onUpdateValue: setBuilderFormDataFieldValue,
+          "onUpdate:items": handleUpdateFormItems,
+          "onUpdate:activeKey": handleUpdateCurrentFormItemId
+        }), createSlots({
+          builderItemHandleContent: withCtx(({ item }) => [
+            createVNode(ComponentName, {
+              itemType: item.type,
+              componentData: _ctx.componentData
+            }, null, 8, ["itemType", "componentData"])
+          ]),
+          builderItemTools: withCtx(({ item }) => [
+            createVNode(BuilderTools, {
+              itemType: item.type,
+              onDelete: ($event) => handleDeleteItem(item),
+              onCopy: ($event) => handleCopyItem(item),
+              onAdd: ($event) => handleAddChildrenItem(item),
+              onAddTableRow: ($event) => handleAddChildrenItem(item, "addTableRow"),
+              onAddTableCol: ($event) => handleAddChildrenItem(item, "addTableCol"),
+              onOpenTableTool: (e) => handleOpenTableTool(item, e)
+            }, null, 8, ["itemType", "onDelete", "onCopy", "onAdd", "onAddTableRow", "onAddTableCol", "onOpenTableTool"])
+          ]),
+          _: 2
+        }, [
+          renderList(Object.keys(_ctx.$slots).filter((k) => !ownSlots.includes(k)), (name) => {
+            return {
+              name,
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1040, ["model", "searchExpand", "activeKey"])),
+        !_ctx.formProps || !_ctx.formProps.items || !_ctx.formProps.items.length ? (openBlock(), createBlock(unref(ElEmpty), {
+          key: 0,
+          imageSize: 80,
+          description: "拖拽左侧组件到此",
+          class: "ele-pro-form-builder-form-empty"
+        })) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/ele-pro-form-builder/components/body-header.d.ts

@@ -0,0 +1,55 @@
+import { UserComponent } from '../../ele-app/types';
+import { TemplateFormConfig } from '../types';
+
+declare function __VLS_template(): {
+    headerTools?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: string;
+    /** 是否禁用撤销 */
+    undoDisabled?: boolean;
+    /** 是否禁用恢复 */
+    redoDisabled?: boolean;
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:currentScreen": (size?: string | undefined) => void;
+    undo: () => void;
+    redo: () => void;
+    clear: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: string;
+    /** 是否禁用撤销 */
+    undoDisabled?: boolean;
+    /** 是否禁用恢复 */
+    redoDisabled?: boolean;
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+}>>> & {
+    onClear?: (() => any) | undefined;
+    "onUpdate:currentScreen"?: ((size?: string | undefined) => any) | undefined;
+    onUndo?: (() => any) | undefined;
+    onRedo?: (() => any) | undefined;
+}, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};