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

package/lib/ele-crud-builder/components/import-modal.cjs

@@ -0,0 +1,136 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const EleModal = require("../../ele-modal/index");
+const buildCore = require("../../ele-pro-form-builder/components/build-core");
+const CodeEditer = require("../../ele-pro-form-builder/components/code-editer");
+const util = require("../util");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "ImportModal" },
+  __name: "import-modal",
+  props: {
+    modelValue: { type: Boolean },
+    config: {},
+    isImport: { type: Boolean },
+    jsonEditerComponent: { type: [String, Object, Function] }
+  },
+  emits: ["update:modelValue", "importData"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const jsonContent = vue.ref("");
+    const handleUpdateModelValue = (visible) => {
+      emit("update:modelValue", visible);
+    };
+    const handleImportData = (data) => {
+      emit("importData", data);
+    };
+    const handleCloseModal = () => {
+      handleUpdateModelValue(false);
+    };
+    const handleImport = () => {
+      if (!jsonContent.value) {
+        return;
+      }
+      handleCloseModal();
+      try {
+        const result = JSON.parse(jsonContent.value);
+        if (result && Array.isArray(result)) {
+          const config = buildCore.deepCloneObject(props.config);
+          util.itemsGenerateNewKey(result, config.fields, false);
+          if (config.fields) {
+            result.forEach((item) => {
+              config.fields.push(item);
+            });
+          } else {
+            config.fields = result;
+          }
+          handleImportData(config);
+          return;
+        }
+        if (result && typeof result === "object" && result.prop && result.fields == null) {
+          const config = buildCore.deepCloneObject(props.config);
+          util.itemsGenerateNewKey(result, config.fields, false);
+          if (config.fields) {
+            config.fields.push(result);
+          } else {
+            config.fields = [result];
+          }
+          handleImportData(config);
+          return;
+        }
+        if (result) {
+          util.itemsGenerateNewKey(result.fields, [], false);
+          handleImportData(result);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    };
+    vue.watch(
+      () => props.modelValue,
+      (visible) => {
+        if (visible && !props.isImport) {
+          jsonContent.value = JSON.stringify(props.config || {}, void 0, 2);
+        } else {
+          jsonContent.value = "";
+        }
+      }
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(EleModal, {
+        width: 800,
+        maxable: true,
+        position: "center",
+        title: "配置JSON",
+        modelValue: _ctx.modelValue,
+        closeOnClickModal: false,
+        destroyOnClose: true,
+        bodyStyle: {
+          height: "520px",
+          minHeight: "100%",
+          maxHeight: "100%",
+          padding: _ctx.isImport ? "8px 16px 8px 16px" : "8px 16px 12px 16px"
+        },
+        "onUpdate:modelValue": handleUpdateModelValue
+      }, vue.createSlots({
+        default: vue.withCtx(() => [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.jsonEditerComponent || CodeEditer), {
+            modelValue: jsonContent.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => jsonContent.value = $event)
+          }, null, 8, ["modelValue"]))
+        ]),
+        _: 2
+      }, [
+        _ctx.isImport ? {
+          name: "footer",
+          fn: vue.withCtx(() => [
+            vue.createVNode(vue.unref(elementPlus.ElButton), {
+              size: "default",
+              onClick: handleCloseModal
+            }, {
+              default: vue.withCtx(() => _cache[1] || (_cache[1] = [
+                vue.createTextVNode("取消")
+              ])),
+              _: 1,
+              __: [1]
+            }),
+            vue.createVNode(vue.unref(elementPlus.ElButton), {
+              type: "primary",
+              size: "default",
+              onClick: handleImport
+            }, {
+              default: vue.withCtx(() => _cache[2] || (_cache[2] = [
+                vue.createTextVNode(" 导入 ")
+              ])),
+              _: 1,
+              __: [2]
+            })
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["modelValue", "bodyStyle"]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-crud-builder/components/import-modal.d.ts

@@ -0,0 +1,38 @@
+import { UserComponent } from '../../ele-app/types';
+import { EleCrudProps } from '../../ele-app/plus';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 配置数据 */
+    config?: EleCrudProps;
+    /** 是否是导入 */
+    isImport?: boolean;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (visible?: boolean | undefined) => void;
+    importData: (data: EleCrudProps) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 配置数据 */
+    config?: EleCrudProps;
+    /** 是否是导入 */
+    isImport?: boolean;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((visible?: boolean | undefined) => any) | undefined;
+    onImportData?: ((data: EleCrudProps) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+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;
+    };
+};

package/lib/ele-crud-builder/components/page-config.cjs

@@ -0,0 +1,232 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const index = require("../../icons/index");
+const EleProForm = require("../../ele-pro-form/index");
+const util = require("../../ele-pro-form/util");
+const OptionsEdit = require("../../ele-pro-form-builder/components/options-edit");
+const EventEdit = require("../../ele-pro-form-builder/components/event-edit");
+const SourceEdit = require("../../ele-pro-form-builder/components/source-edit");
+const StyleEdit = require("../../ele-pro-form-builder/components/style-edit");
+const FormDesignModal = require("./form-design-modal");
+const _hoisted_1 = {
+  key: 0,
+  class: "ele-crud-builder-page-config-group-list"
+};
+const _hoisted_2 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "PageConfig" },
+  __name: "page-config",
+  props: {
+    /** 配置数据 */
+    config: Object,
+    /** 页面设置的表单项配置 */
+    pageConfigFormItems: Array,
+    /** 高级表单组件 */
+    proFormComponent: [String, Object, Function],
+    /** 表单构建组件 */
+    proFormBuilderComponent: [
+      String,
+      Object,
+      Function
+    ],
+    /** 表单构建组件属性 */
+    proFormBuilderProps: Object,
+    /** 代码编辑器组件 */
+    codeEditerComponent: [String, Object, Function],
+    /** JSON 编辑器组件 */
+    jsonEditerComponent: [String, Object, Function],
+    /** 高级表单组件类型数据 */
+    itemTypeData: Array,
+    /** 远程数据源请求工具 */
+    httpRequest: [Object, Function]
+  },
+  emits: ["updateConfigValue", "updateFormConfig"],
+  setup(__props, { emit: __emit }) {
+    var _a, _b;
+    const props = __props;
+    const emit = __emit;
+    const configFormData = vue.computed(() => {
+      const data = {};
+      util.mergeValue(
+        data,
+        util.getFormInitValue(props.pageConfigFormItems, props.itemTypeData, true),
+        props.config
+      );
+      return data;
+    });
+    const pageConfigGroups = vue.computed(() => {
+      return (props.pageConfigFormItems || []).filter((item) => !!(item.children && item.label)).map((item) => {
+        var _a2, _b2;
+        return {
+          key: item.key ?? item.prop,
+          label: item.label ?? ((_b2 = (_a2 = item.children) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.label) ?? item.prop ?? item.key
+        };
+      });
+    });
+    const groupActive = vue.ref((_b = (_a = pageConfigGroups.value) == null ? void 0 : _a[0]) == null ? void 0 : _b.key);
+    const activePageConfigFormItems = vue.computed(() => {
+      if (!props.pageConfigFormItems) {
+        return [];
+      }
+      if (groupActive.value == null) {
+        return props.pageConfigFormItems;
+      }
+      const items = [];
+      props.pageConfigFormItems.forEach((item) => {
+        if (!item.children || !item.label) {
+          items.push(item);
+        } else if (groupActive.value === (item.key ?? item.prop)) {
+          items.push({ ...item, label: void 0 });
+        }
+      });
+      return items;
+    });
+    const formDesignOption = vue.reactive({});
+    const handlePageConfigGroupClick = (item) => {
+      groupActive.value = item.key;
+    };
+    const handleUpdateConfigField = (field, value) => {
+      emit("updateConfigValue", field, value);
+    };
+    const handleFormDesignBtnClick = (type, title) => {
+      formDesignOption.type = type;
+      formDesignOption.title = title;
+      formDesignOption.visible = true;
+    };
+    const handleUpdateFormConfig = (data, type) => {
+      emit("updateFormConfig", data, type);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        pageConfigGroups.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(pageConfigGroups.value, (item) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: item.key,
+              class: vue.normalizeClass([
+                "ele-crud-builder-page-config-group-list-item",
+                { "is-active": item.key === groupActive.value }
+              ]),
+              onClick: ($event) => handlePageConfigGroupClick(item)
+            }, vue.toDisplayString(item.label), 11, _hoisted_2);
+          }), 128))
+        ])) : vue.createCommentVNode("", true),
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.proFormComponent || EleProForm), {
+          itemTypeData: __props.itemTypeData,
+          httpRequest: __props.httpRequest,
+          size: "small",
+          labelPosition: "top",
+          model: configFormData.value,
+          items: activePageConfigFormItems.value,
+          class: "ele-crud-builder-page-config-form",
+          onUpdateValue: handleUpdateConfigField
+        }, vue.createSlots({ _: 2 }, [
+          !_ctx.$slots.crudBuilderFormDesign ? {
+            name: "crudBuilderFormDesign",
+            fn: vue.withCtx(({ item }) => [
+              vue.createVNode(vue.unref(elementPlus.ElButton), {
+                icon: vue.unref(index.FormOutlined),
+                class: "ele-pro-form-builder-props-fluid-btn",
+                onClick: ($event) => {
+                  var _a2;
+                  return handleFormDesignBtnClick((_a2 = item.props) == null ? void 0 : _a2.type, item.label);
+                }
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(item.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["icon", "onClick"])
+            ]),
+            key: "0"
+          } : void 0,
+          !_ctx.$slots.crudBuilderSwitch ? {
+            name: "crudBuilderSwitch",
+            fn: vue.withCtx(({ item, modelValue, updateValue }) => {
+              var _a2;
+              return [
+                vue.createVNode(vue.unref(elementPlus.ElSwitch), {
+                  modelValue: (modelValue ?? ((_a2 = item.props) == null ? void 0 : _a2.defaultValue)) !== false,
+                  "onUpdate:modelValue": (val) => updateValue(val ? {} : false)
+                }, null, 8, ["modelValue", "onUpdate:modelValue"])
+              ];
+            }),
+            key: "1"
+          } : void 0,
+          !_ctx.$slots.proFormBuilderOptionsEdit ? {
+            name: "proFormBuilderOptionsEdit",
+            fn: vue.withCtx(({ item, modelValue, updateValue }) => [
+              vue.createVNode(OptionsEdit, vue.mergeProps({ codeEditerComponent: __props.codeEditerComponent }, item.props || {}, {
+                modelValue,
+                "onUpdate:modelValue": updateValue
+              }), null, 16, ["codeEditerComponent", "modelValue", "onUpdate:modelValue"])
+            ]),
+            key: "2"
+          } : void 0,
+          !_ctx.$slots.proFormBuilderEventEdit ? {
+            name: "proFormBuilderEventEdit",
+            fn: vue.withCtx(({ item, modelValue, updateValue }) => [
+              vue.createVNode(EventEdit, vue.mergeProps({ codeEditerComponent: __props.codeEditerComponent }, item.props || {}, {
+                modelValue,
+                "onUpdate:modelValue": updateValue
+              }), null, 16, ["codeEditerComponent", "modelValue", "onUpdate:modelValue"])
+            ]),
+            key: "3"
+          } : void 0,
+          !_ctx.$slots.proFormBuilderSourceEdit ? {
+            name: "proFormBuilderSourceEdit",
+            fn: vue.withCtx(({ item, model, updatePropValue }) => [
+              vue.createVNode(SourceEdit, vue.mergeProps({ jsonEditerComponent: __props.jsonEditerComponent }, item.props || {}, {
+                modelValue: model,
+                "onUpdate:modelValue": (val) => updatePropValue("", val)
+              }), null, 16, ["jsonEditerComponent", "modelValue", "onUpdate:modelValue"])
+            ]),
+            key: "4"
+          } : void 0,
+          !_ctx.$slots.proFormBuilderStyleEdit ? {
+            name: "proFormBuilderStyleEdit",
+            fn: vue.withCtx(({ item, modelValue, updateValue }) => [
+              vue.createVNode(StyleEdit, vue.mergeProps(item.props || {}, {
+                modelValue,
+                "onUpdate:modelValue": updateValue
+              }), null, 16, ["modelValue", "onUpdate:modelValue"])
+            ]),
+            key: "5"
+          } : void 0,
+          vue.renderList(Object.keys(_ctx.$slots), (name) => {
+            return {
+              name,
+              fn: vue.withCtx((slotProps) => [
+                vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1064, ["itemTypeData", "httpRequest", "model", "items"])),
+        vue.createVNode(FormDesignModal, {
+          modelValue: formDesignOption.visible,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => formDesignOption.visible = $event),
+          title: formDesignOption.title,
+          type: formDesignOption.type,
+          config: __props.config,
+          proFormComponent: __props.proFormComponent,
+          proFormBuilderComponent: __props.proFormBuilderComponent,
+          proFormBuilderProps: __props.proFormBuilderProps,
+          jsonEditerComponent: __props.jsonEditerComponent,
+          itemTypeData: __props.itemTypeData,
+          httpRequest: __props.httpRequest,
+          onUpdateFormConfig: handleUpdateFormConfig
+        }, 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, ["modelValue", "title", "type", "config", "proFormComponent", "proFormBuilderComponent", "proFormBuilderProps", "jsonEditerComponent", "itemTypeData", "httpRequest"])
+      ], 64);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-crud-builder/components/page-config.d.ts

@@ -0,0 +1,59 @@
+import { PropType } from 'vue';
+import { UserComponent } from '../../ele-app/types';
+import { EleCrudProps, EleProFormBuilderProps, EleProFormProps } from '../../ele-app/plus';
+import { ProFormItemTypeData, ProFormItemProps } from '../../ele-pro-form/types';
+import { FormDesignType } from '../types';
+
+declare function __VLS_template(): Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** 配置数据 */
+    config: PropType<EleCrudProps>;
+    /** 页面设置的表单项配置 */
+    pageConfigFormItems: PropType<ProFormItemProps[]>;
+    /** 高级表单组件 */
+    proFormComponent: PropType<UserComponent>;
+    /** 表单构建组件 */
+    proFormBuilderComponent: PropType<UserComponent>;
+    /** 表单构建组件属性 */
+    proFormBuilderProps: PropType<EleProFormBuilderProps>;
+    /** 代码编辑器组件 */
+    codeEditerComponent: PropType<UserComponent>;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent: PropType<UserComponent>;
+    /** 高级表单组件类型数据 */
+    itemTypeData: PropType<ProFormItemTypeData[]>;
+    /** 远程数据源请求工具 */
+    httpRequest: (ObjectConstructor | FunctionConstructor)[];
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    updateConfigValue: (field: string, value: any) => void;
+    updateFormConfig: (data?: EleProFormProps | undefined, type?: FormDesignType | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 配置数据 */
+    config: PropType<EleCrudProps>;
+    /** 页面设置的表单项配置 */
+    pageConfigFormItems: PropType<ProFormItemProps[]>;
+    /** 高级表单组件 */
+    proFormComponent: PropType<UserComponent>;
+    /** 表单构建组件 */
+    proFormBuilderComponent: PropType<UserComponent>;
+    /** 表单构建组件属性 */
+    proFormBuilderProps: PropType<EleProFormBuilderProps>;
+    /** 代码编辑器组件 */
+    codeEditerComponent: PropType<UserComponent>;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent: PropType<UserComponent>;
+    /** 高级表单组件类型数据 */
+    itemTypeData: PropType<ProFormItemTypeData[]>;
+    /** 远程数据源请求工具 */
+    httpRequest: (ObjectConstructor | FunctionConstructor)[];
+}>> & Readonly<{
+    onUpdateConfigValue?: ((field: string, value: any) => any) | undefined;
+    onUpdateFormConfig?: ((data?: EleProFormProps | undefined, type?: FormDesignType | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/ele-crud-builder/components/template-list.cjs

@@ -0,0 +1,49 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const buildCore = require("../../ele-pro-form-builder/components/build-core");
+const util = require("../util");
+const _hoisted_1 = { class: "ele-crud-builder-template-wrapper" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = { class: "ele-crud-builder-template-item-label" };
+const _hoisted_4 = { class: "ele-crud-builder-template-item-body" };
+const _hoisted_5 = { class: "ele-crud-builder-template-item-cover" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "TemplateList" },
+  __name: "template-list",
+  props: {
+    templateData: {}
+  },
+  emits: ["importData"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const handleImportTemplate = (item) => {
+      const result = buildCore.deepCloneObject(item.config);
+      util.itemsGenerateNewKey(result.fields, [], false);
+      emit("importData", result);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        !_ctx.templateData || !_ctx.templateData.length ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElEmpty), {
+          key: 0,
+          imageSize: 58,
+          class: "ele-crud-builder-form-empty"
+        })) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.templateData, (item) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: item.name,
+            class: "ele-crud-builder-template-item",
+            onClick: ($event) => handleImportTemplate(item)
+          }, [
+            vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(item.name), 1),
+            vue.createElementVNode("div", _hoisted_4, [
+              vue.createElementVNode("div", _hoisted_5, [
+                item.cover ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.cover), { key: 0 })) : vue.createCommentVNode("", true)
+              ])
+            ])
+          ], 8, _hoisted_2);
+        }), 128))
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-crud-builder/components/template-list.d.ts

@@ -0,0 +1,24 @@
+import { EleCrudProps } from '../../ele-app/plus';
+import { TemplateItem } from '../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 模板数据 */
+    templateData?: TemplateItem[];
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    importData: (data: EleCrudProps) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 模板数据 */
+    templateData?: TemplateItem[];
+}>>> & Readonly<{
+    onImportData?: ((data: EleCrudProps) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+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;
+    };
+};