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

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

@@ -0,0 +1,196 @@
+import type { CSSProperties } from 'vue';
+import type { ComponentProps } from '../ele-app/types';
+import type { ProFormProps } from '../ele-pro-form/props';
+import type {
+  ProFormItemKey,
+  ProFormItemProps,
+  ProFormItemOption
+} from '../ele-pro-form/types';
+
+/**
+ * 表单项
+ */
+export interface BuildFormItem extends Omit<ProFormItemProps, 'children'> {
+  /** 初始值 */
+  initValue?: any;
+  /** 子级 */
+  children?: BuildFormItem[];
+}
+
+/**
+ * 表单属性
+ */
+export type BuildFormProps = ComponentProps<Omit<ProFormProps, 'items'>>;
+
+/**
+ * 表单配置模板
+ */
+export interface TemplateFormConfig extends BuildFormProps {
+  /** 表单项 */
+  items: BuildFormItem[];
+}
+
+/**
+ * 表单模板库模板
+ */
+export interface TemplateItem {
+  /** 模板名称 */
+  name: string;
+  /** 模板缩略图 */
+  cover?: any;
+  /** 模板缩略图组件属性 */
+  coverProps?: Record<string, any>;
+  /** 模板数据 */
+  config: TemplateFormConfig;
+}
+
+/**
+ * 表单组件库组件
+ */
+export interface ComponentItem {
+  /** 组件类型 */
+  type: string;
+  /** 组件类型名称 */
+  name: string;
+  /** 组件类型缩略图 */
+  cover?: any;
+  /** 是否不显示在组件库列表中 */
+  hide?: boolean;
+  /** 组件原本的预设属性 */
+  presetProps: Record<string, any>;
+  /** 组件在 ProForm 中的默认属性 */
+  defaultProps: Record<string, any>;
+  /** 组件添加时的初始属性 */
+  initialProps: Record<string, any>;
+  /** 组件的强制保留属性 */
+  reservedProps: Record<string, any>;
+  /** 组件添加时的初始选项数据 */
+  initialOptions?: ProFormItemOption[];
+  /** 表单项属性配置的表单数据 */
+  configForm?: ProFormItemProps[];
+  /** 代码生成时组件名称 */
+  componentName: string;
+}
+
+/**
+ * 表单组件库组件分组
+ */
+export interface ComponentGroup {
+  /** 分组名称 */
+  name: string;
+  /** 组件数据 */
+  items: ComponentItem[];
+}
+
+/**
+ * 树表格列配置
+ */
+export interface TreeTableColumn extends Record<keyof any, any> {
+  /** key */
+  key?: string;
+  /** 标题 */
+  label?: string;
+  /** 属性名 */
+  prop?: string;
+  /** 列宽 */
+  width?: string;
+  /** 样式 */
+  style?: CSSProperties;
+  /** 类名 */
+  class?: string;
+  /** 编辑组件类型 */
+  editType?: 'input' | 'switch';
+}
+
+/**
+ * 样式编辑数据
+ */
+export interface ComponentStyleItem {
+  /** id */
+  id?: number;
+  /** 属性名 */
+  name?: string;
+  /** 值 */
+  value?: string;
+}
+
+/**
+ * 表格跨行跨列处理时单元格数据
+ */
+export interface TableGridItem {
+  /** 表单项 key */
+  itemId?: ProFormItemKey;
+  /** 跨行 */
+  colspan: number;
+  /** 跨列 */
+  rowspan: number;
+  /** 数据处理后的跨行 */
+  newColspan?: number;
+  /** 数据处理后的跨列 */
+  newRowspan?: number;
+  /** 数据处理前的跨行 */
+  oldColspan?: number;
+  /** 数据处理前的跨列 */
+  oldRowspan?: number;
+}
+
+/**
+ * 表格跨行跨列处理时行数据
+ */
+export interface TableGridRow {
+  /** 表单项 key */
+  itemId: ProFormItemKey;
+  /** 单元格数据 */
+  children: TableGridItem[];
+}
+
+/**
+ * 表格跨行跨列处理时数据
+ */
+export type TableGridData = TableGridRow[];
+
+/**
+ * 修改表单项需要的数据
+ */
+export interface UpdateItemResult {
+  /** 表单项 key */
+  itemId: ProFormItemKey;
+  /** 需要修改的字段名 */
+  field: string;
+  /** 新的值 */
+  value: any;
+}
+
+/**
+ * 添加表单项需要的数据
+ */
+export interface AddItemResult {
+  /** 表单项 */
+  item?: BuildFormItem;
+  /** 父级表单项 key */
+  parentItemId?: ProFormItemKey;
+  /** 添加位置 */
+  index?: number;
+}
+
+/**
+ * 修改表单项时需要的数据
+ */
+export interface UpdateItemsResult {
+  /** 需要删除的数据 */
+  deleteItemIds: ProFormItemKey[];
+  /** 需要添加的数据 */
+  addItems: AddItemResult[];
+  /** 需要修改的数据 */
+  updateItems: UpdateItemResult[];
+}
+
+/**
+ * 添加子级时操作类型
+ */
+export type AddChildrenItemAction = 'addTableRow' | 'addTableCol';
+
+/**
+ * 屏幕尺寸
+ */
+export type ScreenSize = 'pc' | 'pad' | 'phone';

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

@@ -0,0 +1,93 @@
+import { ProFormItemProps } from '../ele-pro-form/types';
+import { BuildFormItem, ComponentGroup } from './types';
+
+export { defaultComponentData } from './components/component-data';
+/**
+ * 生成表单项 id
+ */
+export declare function generateItemKey(): string;
+/**
+ * 生成表单项 id 并检查重复
+ * @param items 当前表单项数据
+ * @param keys 新生成还未添加的表单项 id
+ */
+export declare function generateUniqueItemKey(items?: BuildFormItem[], keys?: string[]): string;
+/**
+ * 获取表单数据初始值
+ * @param items 表单项数据
+ */
+export declare function getFormInitValue(items?: BuildFormItem[]): Record<string, any>;
+/**
+ * 根据组件类型名称获取对应组件定义
+ * @param type 组件类型名称
+ * @param componentData 组件库数据
+ */
+export declare function getComponentItemByType(type: string | undefined, componentData?: ComponentGroup[]): import('./types').ComponentItem | undefined;
+/**
+ * 处理表单项数据每个包裹构建容器
+ * @param formItems 表单项数据
+ * @param parentIsDiv 父表单项是否是 div
+ * @param componentData 组件库数据
+ */
+/**
+ * 生成子级表单项数据
+ * @param parentType 父组件类型
+ * @param childNo 子组件编号
+ * @param childKey 子组件 id
+ */
+export declare function generateChildFormItem(parentType?: string, childNo?: string, childKey?: string): BuildFormItem;
+/**
+ * 生成表单项数据
+ * @param type 组件类型或组件数据
+ * @param formItems 当前的全部表单项数据
+ * @param componentData 组件库数据
+ */
+export declare function generateBuildFormItem(type: string | undefined, formItems: BuildFormItem[] | undefined, componentData?: ComponentGroup[]): BuildFormItem | undefined;
+/**
+ * 获取表单项的属性值和对应的属性配置表单项数据
+ * @param item 表单项
+ * @param componentData 组件库数据
+ */
+export declare function getFormDataAndItems(item: BuildFormItem | undefined, componentData?: ComponentGroup[]): {
+    data: Record<string, any>;
+    items: ProFormItemProps[];
+};
+/**
+ * 表单属性设置的表单项配置
+ */
+export declare const defaultConfigFormItems: ProFormItemProps[];
+/**
+ * 表单属性设置的组件预设属性值
+ */
+export declare const defaultConfigFormPresetProps: {
+    size: string;
+    labelPosition: string;
+    requireAsteriskPosition: string;
+    showMessage: boolean;
+    labelWidth: number;
+    footerColProps: {
+        span: number;
+    };
+    submitText: string;
+    resetText: string;
+    searchExpandText: string;
+    searchShrinkText: string;
+};
+/**
+ * 屏幕尺寸选项
+ */
+export declare const screenItems: ({
+    value: string;
+    icon: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+    iconStyle?: undefined;
+} | {
+    value: string;
+    icon: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+    iconStyle: {
+        transform: string;
+    };
+})[];
+/**
+ * 解析 json 配置用于 ProForm
+ * @param initJson json
+ */

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

@@ -0,0 +1,275 @@
+import { uuid, findTree, eachTree } from "../utils/core";
+import { DesktopOutlined, MobileOutlined } from "../icons";
+import { setValue, arrayTypes, stringTypes, viewTypes, containerTypes, mergeValue } from "../ele-pro-form/util";
+import { defaultComponentData } from "./components/component-data";
+function generateItemKey() {
+  return `f${uuid(15, 36).toLowerCase()}`;
+}
+function generateUniqueItemKey(items, keys) {
+  let itemKey = generateItemKey();
+  while (true) {
+    if (!findTree(items, (d) => d.key === itemKey) && (!keys || !keys.includes(itemKey))) {
+      break;
+    }
+    itemKey = generateItemKey();
+  }
+  return itemKey;
+}
+function getFormInitValue(items) {
+  const init = {};
+  eachTree(items, (item) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    if (item.initValue != null && item.initValue !== "") {
+      setValue(init, item.prop, item.initValue);
+      return;
+    }
+    if (item.type) {
+      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) || ((_g = (_f = (_e = item.children) == null ? void 0 : _e[0]) == null ? void 0 : _f.props) == null ? void 0 : _g.name) || ((_i = (_h = item.children) == null ? void 0 : _h[0]) == null ? void 0 : _i.prop) || "";
+        setValue(init, item.prop, ((_j = item.props) == null ? void 0 : _j.accordion) ? active : []);
+        return;
+      }
+      if ("sliderRange" === item.type) {
+        setValue(init, item.prop, [0, 100]);
+        return;
+      }
+      if (arrayTypes.includes(item.type)) {
+        setValue(init, item.prop, []);
+        return;
+      }
+      if (stringTypes.includes(item.type)) {
+        setValue(init, item.prop, "");
+        return;
+      }
+      if (viewTypes.includes(item.type) || containerTypes.includes(item.type)) {
+        return;
+      }
+    }
+    setValue(init, item.prop, void 0);
+  });
+  return init;
+}
+function getComponentItemByType(type, componentData) {
+  if (!type || !componentData) {
+    return;
+  }
+  return componentData.map((groupItem) => groupItem.items).flat().find((item) => item.type === type);
+}
+function generateChildFormItem(parentType, childNo, childKey) {
+  let child;
+  if (parentType) {
+    if (parentType === "tabs") {
+      child = { prop: "", label: "选项卡", type: "tabPane" };
+    } else if (parentType === "collapse") {
+      child = { prop: "", label: "折叠面板", type: "collapseItem" };
+    } else if (parentType === "row") {
+      child = { prop: "", label: "", type: "col", props: { span: 12 } };
+    } else if (parentType === "carousel") {
+      child = { prop: "", label: "", type: "carouselItem" };
+    } else if (parentType === "descriptions") {
+      child = { prop: "", label: "标题", type: "descriptionsItem" };
+    } else if (parentType === "table") {
+      child = { prop: "", label: "", type: "tableRow" };
+    } else if (parentType === "tableRow") {
+      child = { prop: "", label: "", type: "tableCell" };
+    }
+  }
+  if (!child) {
+    child = { prop: "", label: "", type: "div" };
+  }
+  if (child.label && childNo) {
+    child.label = child.label + childNo;
+  }
+  if (childKey) {
+    child.key = childKey;
+    child.prop = childKey;
+  }
+  return child;
+}
+function generateBuildFormItem(type, formItems, componentData) {
+  const componentItem = getComponentItemByType(type, componentData);
+  if (!componentItem) {
+    return;
+  }
+  const itemKey = generateUniqueItemKey(formItems);
+  const addedKeys = [itemKey];
+  const item = {
+    key: itemKey,
+    prop: itemKey,
+    label: componentItem.name,
+    type: componentItem.type,
+    //encasedTypeName: componentItem.name,
+    required: false,
+    props: componentItem.initialProps ? JSON.parse(JSON.stringify(componentItem.initialProps)) : void 0,
+    options: componentItem.initialOptions ? JSON.parse(JSON.stringify(componentItem.initialOptions)) : void 0
+  };
+  if (!item.type || item.type === "div" || item.type === "image" || item.type === "proTable") {
+    item.label = "";
+  } else if (item.type === "icon") {
+    item.label = "UserOutlined";
+  } else if (["tabs", "collapse", "row", "carousel", "descriptions"].includes(item.type)) {
+    item.label = "";
+    item.children = Array.from({ length: 2 }).map((_, i) => {
+      const childKey = generateUniqueItemKey(formItems, addedKeys);
+      addedKeys.push(childKey);
+      const childNo = String(i + 1).padStart(2, "0");
+      return generateChildFormItem(item.type, childNo, childKey);
+    });
+  } else if (item.type === "table") {
+    item.label = "";
+    item.children = Array.from({ length: 2 }).map(() => {
+      const trKey = generateUniqueItemKey(formItems, addedKeys);
+      addedKeys.push(trKey);
+      const childItem = generateChildFormItem(item.type, void 0, trKey);
+      const children = Array.from({ length: 3 }).map(() => {
+        const tdKey = generateUniqueItemKey(formItems, addedKeys);
+        addedKeys.push(tdKey);
+        return generateChildFormItem(childItem.type, void 0, tdKey);
+      });
+      childItem.children = children;
+      return childItem;
+    });
+  } else if (item.type === "steps") {
+    item.label = "";
+    if (!item.props) {
+      item.props = {};
+    }
+    item.props.items = Array.from({ length: 3 }).map((_, i) => {
+      const childNo = String(i + 1).padStart(2, "0");
+      return {
+        title: `步骤${childNo}`,
+        description: `步骤${childNo}的描述内容`
+      };
+    });
+  }
+  return item;
+}
+function getFormDataAndItems(item, componentData) {
+  const data = item ? JSON.parse(JSON.stringify(item)) : item;
+  if (!data) {
+    return { data: {}, items: [] };
+  }
+  const componentItem = getComponentItemByType(data.type, componentData);
+  return {
+    data: mergeValue(
+      {},
+      { props: (componentItem == null ? void 0 : componentItem.presetProps) || {} },
+      { props: (componentItem == null ? void 0 : componentItem.defaultProps) || {} },
+      data
+    ),
+    items: (componentItem == null ? void 0 : componentItem.configForm) || []
+  };
+}
+const defaultConfigFormItems = [
+  {
+    label: "组件尺寸",
+    prop: "size",
+    type: "checkCard",
+    options: [
+      { value: "large", label: "大型" },
+      { value: "default", label: "默认" },
+      { value: "small", label: "小型" }
+    ],
+    props: { class: "ele-pro-form-builder-props-options-check-card" }
+  },
+  {
+    label: "标签宽度",
+    prop: "labelWidth",
+    type: "inputNumber",
+    props: { min: 0 }
+  },
+  {
+    label: "标签位置",
+    prop: "labelPosition",
+    type: "checkCard",
+    options: [
+      { value: "left", label: "左对齐" },
+      { value: "right", label: "右对齐" },
+      { value: "top", label: "顶部" }
+    ],
+    props: { class: "ele-pro-form-builder-props-options-check-card" }
+  },
+  {
+    label: "标签后缀",
+    prop: "labelSuffix",
+    type: "input"
+  },
+  {
+    label: "隐藏必填星号",
+    prop: "hideRequiredAsterisk",
+    type: "switch",
+    props: { activeValue: true, inactiveValue: false }
+  },
+  {
+    label: "必填星号位置",
+    prop: "requireAsteriskPosition",
+    type: "checkCard",
+    options: [
+      { value: "left", label: "左侧" },
+      { value: "right", label: "右侧" }
+    ],
+    props: { class: "ele-pro-form-builder-props-options-check-card" }
+  },
+  {
+    label: "显示校验错误信息",
+    prop: "showMessage",
+    type: "switch",
+    props: { activeValue: true, inactiveValue: false }
+  },
+  {
+    label: "行内展示校验错误信息",
+    prop: "inlineMessage",
+    type: "switch",
+    props: { activeValue: true, inactiveValue: false }
+  },
+  {
+    label: "样式",
+    prop: "style",
+    type: "proFormBuilderStyleEdit"
+  },
+  {
+    label: "类名",
+    prop: "class",
+    type: "proFormBuilderStyleEdit",
+    props: { isClass: true }
+  }
+];
+const defaultConfigFormPresetProps = {
+  size: "default",
+  labelPosition: "right",
+  requireAsteriskPosition: "left",
+  showMessage: true,
+  labelWidth: 80,
+  footerColProps: { span: 24 },
+  submitText: "提交",
+  resetText: "重置",
+  searchExpandText: "展开",
+  searchShrinkText: "收起"
+};
+const screenItems = [
+  { value: "pc", icon: DesktopOutlined },
+  {
+    value: "pad",
+    icon: MobileOutlined,
+    iconStyle: { transform: "rotate(270deg) scale(1.06)" }
+  },
+  { value: "phone", icon: MobileOutlined }
+];
+export {
+  defaultComponentData,
+  defaultConfigFormItems,
+  defaultConfigFormPresetProps,
+  generateBuildFormItem,
+  generateChildFormItem,
+  generateItemKey,
+  generateUniqueItemKey,
+  getComponentItemByType,
+  getFormDataAndItems,
+  getFormInitValue,
+  screenItems
+};

package/es/ele-pro-table/components/tool-export.d.ts

@@ -147,9 +147,9 @@ declare const _default: import('vue').DefineComponent<{
 }>>, {
     showSummary: boolean;
     tableHeader: boolean;
+    defaultFileName: string;
     defaultDataType: ExportDataType;
     defaultShowFooter: boolean;
     defaultShowTreeIndex: boolean;
-    defaultFileName: string;
 }, {}>;
 export default _default;

package/es/ele-pro-table/index.d.ts

@@ -231,6 +231,9 @@ declare const _default: import('vue').DefineComponent<{
     sizeChange: (_size: TableSize) => boolean;
     maximizedChange: (_maximized: boolean) => boolean;
     refresh: () => boolean;
+    endEeached: (_params: any) => boolean;
+    scroll: (_params: import('element-plus/es/components/table-v2/src/composables/use-scrollbar').ScrollPos) => boolean;
+    rowsRendered: (_params: any) => boolean;
     select: (_selection: DataItem[], _row: DataItem) => boolean;
     selectAll: (_selection: DataItem[]) => boolean;
     selectionChange: (_selection: DataItem[]) => boolean;
@@ -415,6 +418,8 @@ declare const _default: import('vue').DefineComponent<{
 }>> & {
     onSelect?: ((_selection: DataItem[], _row: DataItem) => any) | undefined;
     onExpandChange?: ((_row: DataItem, _expanded: boolean) => any) | undefined;
+    onScroll?: ((_params: import('element-plus/es/components/table-v2/src/composables/use-scrollbar').ScrollPos) => any) | undefined;
+    onRowsRendered?: ((_params: any) => any) | undefined;
     onSelectAll?: ((_selection: DataItem[]) => any) | undefined;
     onSelectionChange?: ((_selection: DataItem[]) => any) | undefined;
     onCellMouseEnter?: ((_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => any) | undefined;
@@ -433,6 +438,7 @@ declare const _default: import('vue').DefineComponent<{
     onHeaderDragend?: ((_width: number, _old: number, _column: Column, _e: MouseEvent) => any) | undefined;
     "onUpdate:currentRowKey"?: ((_currentRowKey?: import('../ele-data-table/types').DataKey | undefined) => any) | undefined;
     "onUpdate:selectedRowKeys"?: ((_selectedRowKeys?: import('../ele-data-table/types').DataKey[] | undefined) => any) | undefined;
+    onEndEeached?: ((_params: any) => any) | undefined;
     onDone?: ((_result: DoneParams<DataItem>, _parent?: DataItem | undefined) => any) | undefined;
     onRefresh?: (() => any) | undefined;
     "onUpdate:selections"?: ((_selections: DataItem[]) => any) | undefined;

package/es/ele-pro-table/index.js

@@ -31,6 +31,17 @@ const _sfc_main = defineComponent({
     const events = useEmits(emit);
     const methods = useMethods(() => getTableRef());
     const globalProps = useGlobalProps("table");
+    const virtualTableEvents = {
+      onEndEeached: (params) => {
+        emit("endEeached", params);
+      },
+      onScroll: (params) => {
+        emit("scroll", params);
+      },
+      onRowsRendered: (params) => {
+        emit("rowsRendered", params);
+      }
+    };
     const tableState = {
       sorter: props.defaultSort ?? {},
       filter: getDefaultFilter(props.columns),
@@ -82,7 +93,7 @@ const _sfc_main = defineComponent({
     });
     const tableProps = computed(() => {
       const isMaximized = tableMaximized.value && props.maximizedHeight;
-      return {
+      const options = {
         ...pick(props, dataTablePropKeys),
         height: isMaximized ? props.maximizedHeight : props.height,
         border: props.border ?? globalProps.value.border ?? false,
@@ -106,6 +117,10 @@ const _sfc_main = defineComponent({
         onCurrentChange: handleCurrentChange,
         onHeaderDragend: handleHeaderDragend
       };
+      if (props.virtual) {
+        Object.assign(options, virtualTableEvents);
+      }
+      return options;
     });
     const toolNames = computed(() => {
       const tools = props.tools ?? globalProps.value.tools ?? true;

package/es/ele-pro-table/props.d.ts

@@ -217,6 +217,9 @@ export declare const proTableEmits: {
     maximizedChange: (_maximized: boolean) => boolean;
     /** 数组数据源时刷新按钮点击事件 */
     refresh: () => boolean;
+    endEeached: (_params: any) => boolean;
+    scroll: (_params: import('element-plus/es/components/table-v2/src/composables/use-scrollbar').ScrollPos) => boolean;
+    rowsRendered: (_params: any) => boolean;
     select: (_selection: DataItem[], _row: DataItem) => boolean;
     selectAll: (_selection: DataItem[]) => boolean;
     selectionChange: (_selection: DataItem[]) => boolean;

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

@@ -1,5 +1,6 @@
 import { omit } from "../utils/core";
-import { dataTableProps, dataTableEmits } from "../ele-data-table/props";
+import { dataTableProps } from "../ele-data-table/props";
+import { virtualTableEmits } from "../ele-virtual-table/props";
 const proTableProps = {
   ...omit(dataTableProps, ["data", "pageIndex", "errorText", "cacheData"]),
   rowKey: {
@@ -90,7 +91,7 @@ const proTableProps = {
   printConfig: Object
 };
 const proTableEmits = {
-  ...dataTableEmits,
+  ...virtualTableEmits,
   /** 表格数据请求完成事件 */
   done: (_result, _parent) => true,
   /** 更新多选选中数据 */

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

@@ -1,5 +1,4 @@
-import type { Component } from 'vue';
-import type { StyleValue } from '../ele-app/types';
+import type { StyleValue, UserComponent } from '../ele-app/types';
 import type { ElIconProps } from '../ele-app/el';
 
 /**
@@ -16,7 +15,7 @@ export interface SegmentedItem extends Record<keyof any, any> {
   /** 值 */
   value: string | number;
   /** 图标 */
-  icon?: string | Component;
+  icon?: UserComponent;
   /** 是否禁用 */
   disabled?: boolean;
   /** 自定义样式 */