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

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

@@ -68,7 +68,9 @@ const proFormProps = {
   /** 编辑模式选中的表单项 */
   activeItemKey: [String, Number],
   /** 组件类型数据 */
-  itemTypeData: Array
+  itemTypeData: Array,
+  /** 远程数据源请求工具 */
+  httpRequest: [Object, Function]
 };
 const proFormEmits = {
   ...formEmits,
@@ -88,7 +90,8 @@ const childrenRenderProps = {
     "rowProps",
     "editable",
     "activeItemKey",
-    "itemTypeData"
+    "itemTypeData",
+    "httpRequest"
   ]),
   /** 额外的 ElCol 属性 */
   contentExtraColProps: Object,
@@ -103,7 +106,19 @@ const childrenRenderProps = {
   /** 编辑模式父级拖拽容器是否可点击选中 */
   containerSelectable: Boolean,
   /** 直接传递插槽数据 */
-  slots: Object
+  slots: Object,
+  /** 获取表单组件的组件引用数据方法 */
+  getProFormRefs: Function,
+  /** 获取并缓存代码解析结果方法 */
+  getAndCacheCode: Function,
+  /** 更新表单数据属性值方法 */
+  updateItemValue: Function,
+  /** 编辑模式更新表单项数据方法 */
+  updateItemsData: Function,
+  /** 更新编辑模式选中项方法 */
+  updateActiveItemKey: Function,
+  /** 兼容旧版 */
+  item: Object
 };
 export {
   childrenRenderProps,

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

@@ -14,36 +14,33 @@ import "element-plus/es/components/carousel-item/style/index";
 import "element-plus/es/components/descriptions/style/index";
 import "element-plus/es/components/descriptions-item/style/index";
 import "element-plus/es/components/input/style/index";
-import "element-plus/es/components/radio-group/style/index";
-import "element-plus/es/components/radio/style/index";
-import "element-plus/es/components/radio-button/style/index";
-import "element-plus/es/components/checkbox-group/style/index";
-import "element-plus/es/components/checkbox/style/index";
-import "element-plus/es/components/checkbox-button/style/index";
 import "element-plus/es/components/date-picker/style/index";
 import "element-plus/es/components/time-picker/style/index";
 import "element-plus/es/components/time-select/style/index";
 import "element-plus/es/components/switch/style/index";
 import "element-plus/es/components/input-number/style/index";
-import "element-plus/es/components/autocomplete/style/index";
 import "element-plus/es/components/rate/style/index";
 import "element-plus/es/components/slider/style/index";
-import "element-plus/es/components/mention/style/index";
 import "element-plus/es/components/color-picker/style/index";
-import "element-plus/es/components/transfer/style/index";
-import "element-plus/es/components/tree-select/style/index";
-import "../../ele-icon/style/index";
-import "../../ele-text/style/index";
+import "../../ele-admin-layout/style/index";
 import "../../ele-alert/style/index";
-import "../../ele-steps/style/index";
-import "../../ele-pro-table/style/index";
+import "../../ele-autocomplete/style/index";
 import "../../ele-card/style/index";
-import "../../ele-tabs/style/index";
-import "../../ele-table/style/index";
-import "../../ele-tree-select/style/index";
-import "../../ele-table-select/style/index";
+import "../../ele-cascader/style/index";
 import "../../ele-check-card/style/index";
+import "../../ele-checkbox-group/style/index";
 import "../../ele-edit-tag/style/index";
+import "../../ele-icon/style/index";
+import "../../ele-mention/style/index";
+import "../../ele-pro-table/style/index";
+import "../../ele-radio-group/style/index";
 import "../../ele-select/style/index";
-import "../../ele-cascader/style/index";
+import "../../ele-select-tree/style/index";
+import "../../ele-steps/style/index";
+import "../../ele-table/style/index";
+import "../../ele-table-select/style/index";
+import "../../ele-tabs/style/index";
+import "../../ele-text/style/index";
+import "../../ele-transfer/style/index";
+import "../../ele-tree-select/style/index";
 import "./index.scss";

package/es/ele-pro-form/style/index.scss

@@ -181,3 +181,105 @@ $exclude-disabled-selectors: list.join(
     font-weight: normal;
   }
 }
+
+/* 边框色辅助类 */
+.ele-icon-border-color-base {
+  border-color: elVar('border-color');
+}
+
+.ele-icon-border-color-light {
+  border-color: elVar('border-color', 'light');
+}
+
+.ele-icon-border-color-primary {
+  border-color: elVar('color-primary');
+}
+
+.ele-icon-border-color-primary5 {
+  border-color: elVar('color-primary', 'light-5');
+}
+
+.ele-icon-border-color-text {
+  border-color: elVar('text-color', 'primary');
+}
+
+.ele-icon-border-color-text-light {
+  border-color: elVar('text-color', 'placeholder');
+}
+
+/* 背景色辅助类 */
+.ele-icon-bg-primary {
+  background: elVar('color-primary');
+}
+
+.ele-icon-bg-primary7 {
+  background: elVar('color-primary', 'light-7');
+}
+
+.ele-icon-bg-primary9 {
+  background: elVar('color-primary', 'light-9');
+}
+
+.ele-icon-bg-base {
+  background: elVar('bg-color');
+}
+
+.ele-icon-bg-fill {
+  background: elVar('fill-color');
+}
+
+.ele-icon-bg-fill-light {
+  background: elVar('border-color', 'light');
+}
+
+.ele-icon-bg-fill-lighter {
+  background: elVar('fill-color', 'light');
+}
+
+.ele-icon-bg-fill-dark {
+  background: elVar('border-color');
+}
+
+.ele-icon-bg-white {
+  background: #fff;
+}
+
+.ele-icon-bg-calendar {
+  background-image: radial-gradient(
+    elVar('border-color', 'light') 50%,
+    transparent 50%
+  );
+}
+
+/* 文字色辅助类 */
+.ele-icon-color-base {
+  color: elVar('text-color', 'regular');
+}
+
+.ele-icon-color-secondary {
+  color: elVar('text-color', 'secondary');
+}
+
+.ele-icon-color-placeholder {
+  color: elVar('text-color', 'placeholder');
+}
+
+.ele-icon-color-light {
+  color: elVar('border-color');
+}
+
+.ele-icon-color-lighter {
+  color: elVar('border-color', 'light');
+}
+
+.ele-icon-color-primary {
+  color: elVar('color-primary');
+}
+
+.ele-icon-color-primary5 {
+  color: elVar('color-primary', 'light-5');
+}
+
+.ele-icon-color-success {
+  color: elVar('color-success');
+}

package/es/ele-pro-form/types.d.ts

@@ -14,7 +14,7 @@ export interface ProFormItemProps {
   /** 表单项 key */
   key?: ProFormItemKey;
   /** 字段名 */
-  prop: string;
+  prop?: string;
   /** 标题 */
   label?: string;
   /** 是否为必填项 */
@@ -31,8 +31,6 @@ export interface ProFormItemProps {
   props?: Record<string, any>;
   /** 组件插槽 */
   slots?: Record<string, string>;
-  /** 下拉单选多选等选项数据 */
-  options?: ProFormItemOption[];
   /** ElCol 属性 */
   colProps?: ElColProps;
   /** 容器组件是否栅格布局 */
@@ -43,28 +41,14 @@ export interface ProFormItemProps {
   itemType?: 'default' | 'view' | 'container';
   /** 显示条件 */
   vIf?: any;
+  /** 容器组件编辑模式是否可拖拽排序 */
+  containerDraggable?: boolean;
   /** 初始值 */
   initValue?: any;
   /** 子级 */
   children?: ProFormItemProps[];
 }
 
-/**
- * 下拉选项数据
- */
-export interface ProFormItemOption extends Record<string, any> {
-  /** 循环的 key */
-  key?: keyof any;
-  /** 选中值 */
-  value: any;
-  /** 显示文本 */
-  label?: string;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 子级 */
-  children?: ProFormItemOption[];
-}
-
 /**
  * 获取表单项类型组件属性的方法参数
  */
@@ -115,10 +99,6 @@ export interface ProFormItemTypeData {
   ) => ProFormItemRenderSlots;
   /** 必填校验触发方式 */
   requiredTrigger?: string;
-  /** 选项组件 */
-  optionsComponent?: UserComponent;
-  /** 选项组件属性 */
-  optionsComponentProps?: (option: ProFormItemOption) => Record<string, any>;
 }
 
 /**

package/es/ele-pro-form/util.d.ts

@@ -1,2 +1,17 @@
-export { get as getValue, set as setValue, merge as mergeValue } from 'lodash-es';
+import { get as getValue, set as setValue, merge as mergeValue } from 'lodash-es';
+import { ProFormItemProps, ProFormItemTypeData } from './types';
+
 export { sortableGroupName, ChildrenRender } from './components/render-util';
+export { setValue, getValue, mergeValue };
+/**
+ * 判断表单项是否是容器类型
+ * @param item 表单项
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function isContainerType(item: ProFormItemProps, itemTypeData?: ProFormItemTypeData[]): boolean;
+/**
+ * 获取表单数据初始值
+ * @param items 表单项数据
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function getFormInitValue(items?: ProFormItemProps[], itemTypeData?: ProFormItemTypeData[]): Record<string, any>;

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

@@ -1,11 +1,59 @@
+import { eachTree } from "../utils/core";
+import { defaultItemTypeData } from "./components/item-type-data";
 import { ChildrenRender, sortableGroupName } from "./components/render-util";
-import { default as default2 } from "../../node_modules/lodash-es/get.js";
-import { default as default3 } from "../../node_modules/lodash-es/set.js";
+import setValue from "../../node_modules/lodash-es/set.js";
+import { default as default2 } from "../../node_modules/lodash-es/set.js";
+import getValue from "../../node_modules/lodash-es/get.js";
+import { default as default3 } from "../../node_modules/lodash-es/get.js";
 import { default as default4 } from "../../node_modules/lodash-es/merge.js";
+function isContainerType(item, itemTypeData) {
+  const typeData = item.type ? [...itemTypeData || [], ...defaultItemTypeData].find(
+    (d) => d.type === item.type
+  ) : void 0;
+  return (typeData == null ? void 0 : typeData.isContainer) || item.itemType === "container" || item.itemType === "view";
+}
+function getFormInitValue(items, itemTypeData) {
+  const init = {};
+  eachTree(items, (item) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    if (item.initValue != null && item.initValue !== "" && item.prop) {
+      setValue(init, item.prop, item.initValue);
+      return;
+    }
+    if (item.type && item.prop) {
+      if ("tabs" === item.type) {
+        const active = ((_a = item.props) == null ? void 0 : _a.modelValue) ?? ((_c = (_b = item.children) == null ? void 0 : _b[0]) == null ? void 0 : _c.prop);
+        setValue(init, item.prop, active);
+        return;
+      }
+      if ("collapse" === item.type) {
+        const active = ((_d = item.props) == null ? void 0 : _d.modelValue) ?? (((_e = item.props) == null ? void 0 : _e.accordion) ? ((_h = (_g = (_f = item.children) == null ? void 0 : _f[0]) == null ? void 0 : _g.props) == null ? void 0 : _h.name) ?? ((_j = (_i = item.children) == null ? void 0 : _i[0]) == null ? void 0 : _j.prop) : []);
+        setValue(init, item.prop, active);
+        return;
+      }
+      if ("sliderRange" === item.type) {
+        setValue(init, item.prop, [
+          ((_k = item.props) == null ? void 0 : _k.min) ?? 0,
+          ((_l = item.props) == null ? void 0 : _l.max) ?? 100
+        ]);
+        return;
+      }
+    }
+    if (isContainerType(item, itemTypeData) || !item.prop) {
+      return;
+    }
+    if (typeof getValue(init, item.prop) === "undefined") {
+      setValue(init, item.prop, void 0);
+    }
+  });
+  return init;
+}
 export {
   ChildrenRender,
-  default2 as getValue,
+  getFormInitValue,
+  default3 as getValue,
+  isContainerType,
   default4 as mergeValue,
-  default3 as setValue,
+  default2 as setValue,
   sortableGroupName
 };

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

@@ -16,6 +16,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
     proFormComponent?: UserComponent;
     /** 高级表单组件类型数据 */
     itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:currentFormItemId": (formItemId?: string | number | symbol | undefined) => void;
     updateItems: (result: UpdateItemsResult) => void;
@@ -34,9 +36,11 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
     proFormComponent?: UserComponent;
     /** 高级表单组件类型数据 */
     itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
 }>>> & {
-    onUpdateItems?: ((result: UpdateItemsResult) => any) | undefined;
     onOpenTableTool?: ((formItemId: string, el: HTMLElement) => any) | undefined;
+    onUpdateItems?: ((result: UpdateItemsResult) => any) | undefined;
     "onUpdate:currentFormItemId"?: ((formItemId?: string | number | symbol | undefined) => any) | undefined;
     onUpdateFormItems?: ((items: ProFormItemProps[]) => any) | undefined;
 }, {}, {}>;

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

@@ -1,9 +1,8 @@
 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 { mergeValue, getFormInitValue, 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";
@@ -15,7 +14,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     currentScreen: {},
     componentData: {},
     proFormComponent: {},
-    itemTypeData: {}
+    itemTypeData: {},
+    httpRequest: {}
   },
   emits: ["update:currentFormItemId", "updateItems", "openTableTool", "updateFormItems"],
   setup(__props, { emit: __emit }) {
@@ -51,7 +51,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               parent,
               cIndex,
               action,
-              (_a2 = props.formProps) == null ? void 0 : _a2.items
+              (_a2 = props.formProps) == null ? void 0 : _a2.items,
+              void 0,
+              props.componentData
             );
             handleUpdateItems(result);
             return false;
@@ -85,7 +87,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         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) {
+            if (item.type && ["tabPane", "collapseItem"].includes(item.type) && parent && parent.prop) {
               setBuilderFormDataFieldValue(parent.prop, item.prop);
             }
             return false;
@@ -133,6 +135,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           scrollToError: false,
           showMessage: false,
           itemTypeData: _ctx.itemTypeData,
+          httpRequest: _ctx.httpRequest,
           class: "ele-pro-form-builder-body-form",
           onUpdateValue: setBuilderFormDataFieldValue,
           "onUpdate:items": handleUpdateFormItems,
@@ -165,7 +168,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])
             };
           })
-        ]), 1040, ["model", "searchExpand", "activeItemKey", "itemTypeData"])),
+        ]), 1040, ["model", "searchExpand", "activeItemKey", "itemTypeData", "httpRequest"])),
         !_ctx.formProps || !_ctx.formProps.items || !_ctx.formProps.items.length ? (openBlock(), createBlock(unref(ElEmpty), {
           key: 0,
           imageSize: 80,

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

@@ -1,8 +1,8 @@
 import { UserComponent } from '../../ele-app/types';
 import { ProFormItemTypeData } from '../../ele-pro-form/types';
-import { TemplateFormConfig } from '../types';
+import { TemplateFormConfig, HeaderRightToolName } from '../types';
 
-declare function __VLS_template(): {
+declare function __VLS_template(): Partial<Record<string, (_: any) => any>> & {
     headerTools?(_: {}): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
@@ -14,16 +14,23 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
     redoDisabled?: boolean;
     /** 表单属性 */
     formProps?: TemplateFormConfig;
+    /** 顶栏右侧操作按钮顺序 */
+    headerTools?: HeaderRightToolName[];
     /** 高级表单组件 */
     proFormComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
     /** 高级表单组件类型数据 */
     itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:currentScreen": (size?: string | undefined) => void;
     undo: () => void;
     redo: () => void;
     clear: () => void;
     previewFormSubmit: (data: Record<string, any>) => void;
+    importData: (data: TemplateFormConfig) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 当前选中屏幕尺寸 */
     currentScreen?: string;
@@ -33,13 +40,20 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
     redoDisabled?: boolean;
     /** 表单属性 */
     formProps?: TemplateFormConfig;
+    /** 顶栏右侧操作按钮顺序 */
+    headerTools?: HeaderRightToolName[];
     /** 高级表单组件 */
     proFormComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
     /** 高级表单组件类型数据 */
     itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
 }>>> & {
     onClear?: (() => any) | undefined;
     onPreviewFormSubmit?: ((data: Record<string, any>) => any) | undefined;
+    onImportData?: ((data: TemplateFormConfig) => any) | undefined;
     "onUpdate:currentScreen"?: ((size?: string | undefined) => any) | undefined;
     onUndo?: (() => any) | undefined;
     onRedo?: (() => any) | undefined;

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

@@ -1,8 +1,9 @@
-import { defineComponent, ref, resolveComponent, openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, createBlock, normalizeClass, withCtx, resolveDynamicComponent, normalizeStyle, createVNode, createTextVNode, renderSlot } from "vue";
-import { ElIcon } from "element-plus";
-import { RollbackOutlined, RecoverOutlined, DeleteOutlined, EyeOutlined } from "../../icons";
+import { defineComponent, ref, openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, createBlock, normalizeClass, withCtx, resolveDynamicComponent, normalizeStyle, createVNode, createTextVNode, createCommentVNode, renderSlot, createSlots, normalizeProps, guardReactiveProps } from "vue";
+import { ElIcon, ElButton } from "element-plus";
+import { RollbackOutlined, RecoverOutlined, UploadOutlined, DownloadOutlined, DeleteOutlined, EyeOutlined } from "../../icons";
 import { screenItems } from "../util";
 import PreviewModal from "./preview-modal";
+import ImportModal from "./import-modal";
 const _hoisted_1 = { class: "ele-pro-form-builder-header" };
 const _hoisted_2 = { class: "ele-pro-form-builder-screen-radio" };
 const _hoisted_3 = { class: "ele-pro-form-builder-header-left" };
@@ -14,14 +15,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     undoDisabled: { type: Boolean },
     redoDisabled: { type: Boolean },
     formProps: {},
+    headerTools: {},
     proFormComponent: {},
-    itemTypeData: {}
+    jsonEditerComponent: {},
+    itemTypeData: {},
+    httpRequest: {}
   },
-  emits: ["update:currentScreen", "undo", "redo", "clear", "previewFormSubmit"],
+  emits: ["update:currentScreen", "undo", "redo", "clear", "previewFormSubmit", "importData"],
   setup(__props, { emit: __emit }) {
+    const ownSlots = ["headerTools"];
     const props = __props;
     const emit = __emit;
     const previewVisible = ref(false);
+    const importVisible = ref(false);
+    const isImport = ref(false);
     const handleUpdateScreen = (size) => {
       emit("update:currentScreen", size);
     };
@@ -44,8 +51,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const handlePreviewFormSubmit = (data) => {
       emit("previewFormSubmit", data);
     };
+    const handleOpenImport = () => {
+      importVisible.value = true;
+      isImport.value = true;
+    };
+    const handleOpenExport = () => {
+      importVisible.value = true;
+      isImport.value = false;
+    };
+    const handleImportData = (data) => {
+      emit("importData", data);
+    };
     return (_ctx, _cache) => {
-      const _component_ElButton = resolveComponent("ElButton");
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(screenItems), (item) => {
@@ -98,38 +115,83 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, 8, ["class"])
         ]),
         createElementVNode("div", _hoisted_4, [
-          createVNode(_component_ElButton, {
-            text: true,
-            type: "danger",
-            icon: unref(DeleteOutlined),
-            onClick: handleClear
-          }, {
-            default: withCtx(() => [
-              createTextVNode(" 清空 ")
-            ]),
-            _: 1
-          }, 8, ["icon"]),
-          createVNode(_component_ElButton, {
-            text: true,
-            type: "primary",
-            icon: unref(EyeOutlined),
-            onClick: handleOpenPreview
-          }, {
-            default: withCtx(() => [
-              createTextVNode(" 预览 ")
-            ]),
-            _: 1
-          }, 8, ["icon"]),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.headerTools || [], (toolName) => {
+            return openBlock(), createElementBlock(Fragment, { key: toolName }, [
+              toolName === "import" ? (openBlock(), createBlock(unref(ElButton), {
+                key: 0,
+                text: true,
+                icon: unref(UploadOutlined),
+                onClick: handleOpenImport
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" 导入 ")
+                ]),
+                _: 1
+              }, 8, ["icon"])) : toolName === "export" ? (openBlock(), createBlock(unref(ElButton), {
+                key: 1,
+                text: true,
+                icon: unref(DownloadOutlined),
+                onClick: handleOpenExport
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" 导出 ")
+                ]),
+                _: 1
+              }, 8, ["icon"])) : toolName === "clear" ? (openBlock(), createBlock(unref(ElButton), {
+                key: 2,
+                text: true,
+                type: "danger",
+                icon: unref(DeleteOutlined),
+                onClick: handleClear
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" 清空 ")
+                ]),
+                _: 1
+              }, 8, ["icon"])) : toolName === "preview" ? (openBlock(), createBlock(unref(ElButton), {
+                key: 3,
+                text: true,
+                type: "primary",
+                icon: unref(EyeOutlined),
+                onClick: handleOpenPreview
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" 预览 ")
+                ]),
+                _: 1
+              }, 8, ["icon"])) : createCommentVNode("", true)
+            ], 64);
+          }), 128)),
           renderSlot(_ctx.$slots, "headerTools")
         ]),
-        createVNode(PreviewModal, {
+        _ctx.headerTools && _ctx.headerTools.includes("preview") ? (openBlock(), createBlock(PreviewModal, {
+          key: 0,
           modelValue: previewVisible.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => previewVisible.value = $event),
           formProps: _ctx.formProps,
           proFormComponent: _ctx.proFormComponent,
           itemTypeData: _ctx.itemTypeData,
+          httpRequest: _ctx.httpRequest,
           onPreviewFormSubmit: handlePreviewFormSubmit
-        }, null, 8, ["modelValue", "formProps", "proFormComponent", "itemTypeData"])
+        }, createSlots({ _: 2 }, [
+          renderList(Object.keys(_ctx.$slots).filter((k) => !ownSlots.includes(k)), (name) => {
+            return {
+              name,
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1032, ["modelValue", "formProps", "proFormComponent", "itemTypeData", "httpRequest"])) : createCommentVNode("", true),
+        _ctx.headerTools && (_ctx.headerTools.includes("import") || _ctx.headerTools.includes("export")) ? (openBlock(), createBlock(ImportModal, {
+          key: 1,
+          modelValue: importVisible.value,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => importVisible.value = $event),
+          config: _ctx.formProps,
+          isImport: isImport.value,
+          jsonEditerComponent: _ctx.jsonEditerComponent,
+          onImportData: handleImportData
+        }, null, 8, ["modelValue", "config", "isImport", "jsonEditerComponent"])) : createCommentVNode("", true)
       ]);
     };
   }