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

package/es/ele-crud/style/index.js

@@ -0,0 +1,17 @@
+import "element-plus/es/components/button/style/index";
+import "element-plus/es/components/link/style/index";
+import "element-plus/es/components/divider/style/index";
+import "element-plus/es/components/input/style/index";
+import "element-plus/es/components/tree/style/index";
+import "element-plus/es/components/empty/style/index";
+import "element-plus/es/components/message-box/style/index";
+import "../../ele-page/style/index";
+import "../../ele-card/style/index";
+import "../../ele-pro-table/style/index";
+import "../../ele-pro-form/style/index";
+import "../../ele-modal/style/index";
+import "../../ele-loading/style/index";
+import "../../ele-split-panel/style/index";
+import "../../ele-popconfirm/style/index";
+import "../../ele-app/style/message/index";
+import "./index.scss";

package/es/ele-crud/style/index.scss

@@ -0,0 +1,50 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+/* 折叠面板 */
+.ele-crud-split-panel.ele-split-panel {
+  height: 100%;
+
+  &.is-flex-table {
+    overflow: hidden;
+  }
+
+  & > .ele-split-panel-wrap > .ele-split-panel-side {
+    border-width: 0 1px 0 0;
+  }
+
+  &.is-responsive > .ele-split-panel-wrap > div.ele-split-panel-side {
+    background: none;
+  }
+
+  & > .ele-split-panel-body {
+    overflow: hidden;
+  }
+
+  &.is-collapse > .ele-split-collapse-button {
+    margin-left: 2px;
+  }
+}
+
+/* 侧栏搜索栏 */
+.ele-crud-search-bar {
+  flex-shrink: 0;
+  padding: 16px 16px 12px 16px;
+  box-sizing: border-box;
+
+  & > .el-input .el-input__prefix-inner > .el-input__icon {
+    transform: translateY(-0.5px);
+  }
+}
+
+/* 侧栏树组件 */
+.ele-crud-tree-wrapper {
+  flex: 1;
+  padding: 0 16px 16px 16px;
+  box-sizing: border-box;
+  overflow: auto;
+
+  & > .ele-crud-tree {
+    #{eleVarName('tree', 'item-height')}: 34px;
+  }
+}

package/es/ele-crud/types.d.ts

@@ -0,0 +1,248 @@
+import type { ComponentProps } from '../ele-app/types';
+import type {
+  ElButtonProps,
+  ElLinkProps,
+  ElTreeProps,
+  ElInputProps,
+  ElEmptyProps
+} from '../ele-app/el';
+import type {
+  ElePageProps,
+  EleCardProps,
+  EleProTableProps,
+  EleProFormProps,
+  EleSplitPanelProps,
+  EleLoadingProps,
+  EleModalProps,
+  ElePopconfirmProps,
+  EleMessageBoxOptions
+} from '../ele-app/plus';
+import type { ProFormItemProps } from '../ele-pro-form/types';
+import type { DataItem, DataKey, Column } from '../ele-data-table/types';
+
+/**
+ * 字段
+ */
+export interface CrudField {
+  /** 唯一值 */
+  key?: string;
+  /** 属性名 */
+  prop: string;
+  /** 字段名 */
+  label?: string;
+  /** 不显示在列表中 */
+  hideInList?: boolean | 'flat';
+  /** 不显示在搜索栏中 */
+  hideInSearch?: boolean | 'flat';
+  /** 不显示在添加中 */
+  hideInAdd?: boolean | 'flat';
+  /** 不显示在修改中 */
+  hideInEdit?: boolean | 'flat';
+  /** 表格列属性 */
+  columnProps?: Column;
+  /** 搜索表单项属性 */
+  searchItemProps?: ProFormItemProps;
+  /** 添加表单项属性 */
+  addItemProps?: ProFormItemProps;
+  /** 修改表单项属性 */
+  editItemProps?: ProFormItemProps;
+  /** 子级 */
+  children?: Array<Partial<CrudField>>;
+}
+
+/**
+ * 删除确认框属性
+ */
+export type DelConfirmProps = ElePopconfirmProps | EleMessageBoxOptions;
+
+/**
+ * 删除气泡确认框属性
+ */
+export type DelPopConfirmProps = DelConfirmProps & {
+  /** 是否是气泡确认框 */
+  isPopConfirm?: boolean;
+};
+
+/**
+ * 列表配置
+ */
+export interface ListConfig {
+  /** 卡片属性 */
+  cardProps?: boolean | EleCardProps;
+  /** 卡片插槽 */
+  cardSlots?: Record<string, string>;
+  /** 表格属性 */
+  tableProps?: EleProTableProps;
+  /** 表格插槽 */
+  tableSlots?: Record<string, any>;
+  /** 表格多选列属性 */
+  selectionColumnProps?: boolean | Column;
+  /** 表格序号列属性 */
+  indexColumnProps?: boolean | Column;
+  /** 表格操作列属性 */
+  actionColumnProps?: boolean | Column;
+  /** 添加按钮属性 */
+  addBtnProps?: boolean | ElButtonProps;
+  /** 批量删除按钮属性 */
+  delBtnProps?: boolean | ElButtonProps;
+  /** 修改按钮属性 */
+  editLinkProps?: boolean | ElLinkProps;
+  /** 删除按钮属性 */
+  delLinkProps?: boolean | ElLinkProps;
+  /** 删除气泡确认框属性 */
+  delPopConfirmProps?: boolean | DelPopConfirmProps;
+  /** 删除确认框属性 */
+  delConfirmProps?: boolean | EleMessageBoxOptions;
+}
+
+/**
+ * 搜索栏配置
+ */
+export interface SearchConfig {
+  /** 卡片属性 */
+  cardProps?: boolean | EleCardProps;
+  /** 卡片插槽 */
+  cardSlots?: Record<string, string>;
+  /** 表单属性 */
+  formProps?: EleProFormProps;
+  /** 表单插槽 */
+  formSlots?: Record<string, string>;
+}
+
+/**
+ * 修改配置
+ */
+export interface EditConfig {
+  /** 弹窗属性 */
+  modalProps?: EleModalProps;
+  /** 弹窗插槽 */
+  modalSlots?: Record<string, string>;
+  /** 表单属性 */
+  formProps?: EleProFormProps;
+  /** 表单插槽 */
+  formSlots?: Record<string, string>;
+  /** 取消按钮属性 */
+  cancelBtnProps?: boolean | ElButtonProps;
+  /** 保存按钮属性 */
+  saveBtnProps?: boolean | ElButtonProps;
+}
+
+/**
+ * 侧栏配置
+ */
+export interface SideConfig {
+  /** 搜索栏属性 */
+  searchProps?: boolean | ComponentProps<{}>;
+  /** 搜索输入框属性 */
+  searchInputProps?: ElInputProps;
+  /** 搜索输入框插槽 */
+  searchInputSlots?: Record<string, string>;
+  /** 树组件属性 */
+  treeProps?: ElTreeProps;
+  /** 树组件插槽 */
+  treeSlots?: Record<string, string>;
+  /** 加载组件属性 */
+  loadingProps?: EleLoadingProps;
+  /** 空组件属性 */
+  emptyProps?: ElEmptyProps;
+}
+
+/**
+ * 页面配置
+ */
+export interface PageConfig {
+  /** 页面容器组件属性 */
+  pageProps?: boolean | ElePageProps;
+  /** 卡片属性 */
+  cardProps?: boolean | EleCardProps;
+  /** 卡片插槽 */
+  cardSlots?: Record<string, string>;
+  /** 分割面板属性 */
+  splitPanelProps?: boolean | EleSplitPanelProps;
+  /** 分割面板插槽 */
+  splitPanelSlots?: Record<string, string>;
+  /** 侧栏配置 */
+  sideConfig?: SideConfig;
+  /** 侧栏对表格筛选的字段名 */
+  tableFilterField?: string;
+}
+
+/**
+ * 操作按钮点击动作
+ */
+export type BtnClickAction =
+  | 'add'
+  | 'edit'
+  | 'del'
+  | 'delSelections'
+  | 'delConfirm';
+
+/**
+ * 删除气泡配置
+ */
+export interface DeletePopOption {
+  /** 删除气泡数据 */
+  item?: DataItem;
+  /** 删除气泡触发节点 */
+  triggerEl?: any;
+  /** 删除气泡属性 */
+  confirmProps?: DelPopConfirmProps;
+}
+
+/**
+ * 删除数据接口
+ */
+export type DeleteApi = (
+  dataKeys: DataKey[],
+  data: DataItem[]
+) => Promise<string | undefined>;
+
+/**
+ * 修改数据接口
+ */
+export type EditApi = (data: DataItem) => Promise<string | undefined>;
+
+/**
+ * 侧栏树组件数据接口
+ */
+export type TreeListApi = (
+  searchValue?: string
+) => Promise<Array<Record<string, any>> | undefined>;
+
+/**
+ * 获取并缓存代码解析结果的方法
+ */
+export type GetFieldsFormItemsFunction = (
+  fields?: CrudField[]
+) => ProFormItemProps[];
+
+/**
+ * 获取并缓存代码解析结果的方法
+ */
+export type GetAndCacheCodeFunction = (code: string, codeResult?: any) => any;
+
+/**
+ * 国际化
+ */
+export interface CrudLocale {
+  save: string;
+  cancel: string;
+  action: string;
+  add: string;
+  edit: string;
+  delete: string;
+  deleteConfirm: string;
+  deleteConfirmTitle: string;
+  deleteBatch: string;
+  deleteBatchConfirm: string;
+  deleteBatchConfirmTitle: string;
+  deleteBatchTip: string;
+  deleteLoading: string;
+  deleteSuccess: string;
+  deleteError: string;
+  editSuccess: string;
+  editError: string;
+  addSuccess: string;
+  addError: string;
+  search: string;
+}

package/es/ele-crud/util.d.ts

@@ -0,0 +1,47 @@
+import { EleProFormProps } from '../ele-app/plus';
+import { ProFormItemProps } from '../ele-pro-form/types';
+import { CrudField, SideConfig } from './types';
+
+/**
+ * 代码字符串前缀
+ */
+export declare const codeStringPrefix = "/*__PRO_CRUD__*/";
+/**
+ * 获取搜索表单默认属性
+ */
+export declare function getDefaultSearchFormProps(): EleProFormProps;
+/**
+ * 获取字段数据对应的搜索表单项数据
+ * @param fields 字段数据
+ */
+export declare function getFieldsSearchFormItems(fields?: CrudField[]): ProFormItemProps[];
+/**
+ * 获取字段数据对应的添加表单项数据
+ * @param fields 字段数据
+ */
+export declare function getFieldsAddFormItems(fields?: CrudField[]): ProFormItemProps[];
+/**
+ * 获取字段数据对应的修改表单项数据
+ * @param fields 字段数据
+ */
+export declare function getFieldsEditFormItems(fields?: CrudField[]): ProFormItemProps[];
+/**
+ * 树组件默认的节点值字段名
+ */
+export declare const defaultTreeNodeKey = "value";
+/**
+ * 获取树组件数据值的字段名
+ * @param sideConfig 侧栏配置
+ */
+export declare function getTreeValueField(sideConfig?: SideConfig): string;
+/**
+ * 获取树组件显示文本的字段名
+ * @param sideConfig 侧栏配置
+ */
+export declare function getTreeLabelField(sideConfig?: SideConfig): string;
+/**
+ * 执行代码字符串
+ * @param code 代码字符串
+ * @param httpRequest 远程数据源请求工具
+ */
+export declare function getCodeResult(code: string, httpRequest?: any): any;

package/es/ele-crud/util.js

@@ -0,0 +1,117 @@
+import { mapTree } from "../utils/common";
+const codeStringPrefix = "/*__PRO_CRUD__*/";
+function getDefaultSearchFormProps() {
+  const config = {
+    grid: { lg: 6, md: 8, sm: 12, xs: 24 },
+    footer: true,
+    footerProps: { labelWidth: 16 },
+    autoFooterCol: true
+  };
+  return config;
+}
+function getFieldsSearchFormItems(fields) {
+  return mapTree(
+    fields || [],
+    (field, index) => {
+      if (field.hideInSearch === "flat") {
+        return "flatChildren";
+      } else if (!field.hideInSearch) {
+        return {
+          key: field.key ?? `${index}-${field.prop}`,
+          prop: field.prop,
+          label: field.label,
+          ...field.searchItemProps || {}
+        };
+      }
+    },
+    "children",
+    "children",
+    (item) => {
+      var _a;
+      return {
+        type: ((_a = item.children) == null ? void 0 : _a.length) ? "div" : "input",
+        ...item
+      };
+    }
+  );
+}
+function getFieldsAddFormItems(fields) {
+  return mapTree(
+    fields || [],
+    (field, index) => {
+      if (field.hideInAdd === "flat") {
+        return "flatChildren";
+      } else if (!field.hideInAdd) {
+        return {
+          key: field.key ?? `${index}-${field.prop}`,
+          prop: field.prop,
+          label: field.label,
+          ...field.addItemProps || {}
+        };
+      }
+    },
+    "children",
+    "children",
+    (item) => {
+      var _a;
+      return {
+        type: ((_a = item.children) == null ? void 0 : _a.length) ? "div" : "input",
+        ...item
+      };
+    }
+  );
+}
+function getFieldsEditFormItems(fields) {
+  return mapTree(
+    fields || [],
+    (field, index) => {
+      if (field.hideInEdit === "flat") {
+        return "flatChildren";
+      } else if (!field.hideInEdit) {
+        return {
+          key: field.key ?? `${index}-${field.prop}`,
+          prop: field.prop,
+          label: field.label,
+          ...field.editItemProps || {}
+        };
+      }
+    },
+    "children",
+    "children",
+    (item) => {
+      var _a;
+      return {
+        type: ((_a = item.children) == null ? void 0 : _a.length) ? "div" : "input",
+        ...item
+      };
+    }
+  );
+}
+const defaultTreeNodeKey = "value";
+function getTreeValueField(sideConfig) {
+  var _a;
+  return ((_a = sideConfig == null ? void 0 : sideConfig.treeProps) == null ? void 0 : _a.nodeKey) ?? defaultTreeNodeKey;
+}
+function getTreeLabelField(sideConfig) {
+  var _a, _b;
+  const field = (_b = (_a = sideConfig == null ? void 0 : sideConfig.treeProps) == null ? void 0 : _a.props) == null ? void 0 : _b.label;
+  return typeof field === "string" ? field : "label";
+}
+function getCodeResult(code, httpRequest) {
+  try {
+    return new Function("httpRequest", `return (${code})`)(httpRequest);
+  } catch (e) {
+    console.error(e);
+  }
+}
+export {
+  codeStringPrefix,
+  defaultTreeNodeKey,
+  getCodeResult,
+  getDefaultSearchFormProps,
+  getFieldsAddFormItems,
+  getFieldsEditFormItems,
+  getFieldsSearchFormItems,
+  getTreeLabelField,
+  getTreeValueField
+};

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

@@ -0,0 +1,79 @@
+import { UserComponent } from '../../ele-app/types';
+import { EleCrudProps } from '../../ele-app/plus';
+import { ProFormItemTypeData, ScreenSize } from '../../ele-pro-form/types';
+import { HeaderRightToolName } from '../types';
+
+declare function __VLS_template(): {
+    headerTools?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: ScreenSize;
+    /** 是否禁用撤销 */
+    undoDisabled?: boolean;
+    /** 是否禁用恢复 */
+    redoDisabled?: boolean;
+    /** 增删改查配置 */
+    config?: EleCrudProps;
+    /** 顶栏右侧操作按钮顺序 */
+    headerTools?: boolean | HeaderRightToolName[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 代码查看器组件 */
+    codeViewerComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:currentScreen": (size?: string | undefined) => void;
+    undo: () => void;
+    redo: () => void;
+    clear: () => void;
+    importData: (data: EleCrudProps) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: ScreenSize;
+    /** 是否禁用撤销 */
+    undoDisabled?: boolean;
+    /** 是否禁用恢复 */
+    redoDisabled?: boolean;
+    /** 增删改查配置 */
+    config?: EleCrudProps;
+    /** 顶栏右侧操作按钮顺序 */
+    headerTools?: boolean | HeaderRightToolName[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 代码查看器组件 */
+    codeViewerComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onImportData?: ((data: EleCrudProps) => any) | undefined;
+    "onUpdate:currentScreen"?: ((size?: string | undefined) => any) | undefined;
+    onUndo?: (() => any) | undefined;
+    onRedo?: (() => 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_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;
+    };
+};