ele-admin-plus 1.2.2-beta.4 → 1.3.0-beta.2

package/lib/ele-pro-form-builder/components/table-util.d.ts

@@ -0,0 +1,145 @@
+import { ProFormItemKey, ProFormItemProps } from '../../ele-pro-form/types';
+import { TableGridData, TableGridRow, UpdateItemsResult } from '../types';
+
+/**
+ * 获取单元格对应的表格表单项
+ * @param tdFormItemId 单元格表单项 id
+ * @param formItems 当前的全部表单项数据
+ */
+export declare function getTableFormItemByTd(tdFormItemId: string, formItems?: ProFormItemProps[]): {
+    tableFormItem: ProFormItemProps | undefined;
+    tdFormItem: ProFormItemProps | undefined;
+    trItemIndex: number | undefined;
+};
+/**
+ * 获取单元格的全部内容表单项
+ * @param tdFormItemId 单元格表单项 id
+ * @param formItems 当前的全部表单项数据
+ */
+export declare function getTableCellContents(tdFormItemId?: ProFormItemKey, formItems?: ProFormItemProps[]): ProFormItemProps[];
+/**
+ * 生成用于处理表格跨行跨列的数据
+ * @param tableRowFormItems 表格所有行表单项
+ */
+export declare function generateTableGrid(tableRowFormItems?: ProFormItemProps[]): TableGridData;
+/**
+ * 表格数据拆分单元格合并
+ * @param gridData 表格封装后的数据
+ * @param tdFormItemId 单元格表单项 id
+ */
+export declare function splitTableGridCell(gridData: TableGridRow[], tdFormItemId: ProFormItemKey): void;
+/**
+ * 重新计算表格数据的跨行跨列
+ * @param gridData 表格封装后的数据
+ * @param precorrect 是否先纠正之前的跨行跨列
+ */
+export declare function computeTableGridSpan(gridData: TableGridRow[], precorrect?: boolean): void;
+/**
+ * 表格数据删除所有空行
+ * @param gridData 表格封装后的数据
+ */
+export declare function deleteTableGridEmptyRow(gridData: TableGridRow[]): (string | number | symbol)[];
+/**
+ * 表格数据删除所有空列
+ * @param gridData 表格封装后的数据
+ */
+export declare function deleteTableGridEmptyCol(gridData: TableGridRow[]): (string | number | symbol)[];
+/**
+ * 表格数据删除整行
+ * @param gridData 表格封装后的数据
+ * @param deleteRowIndex 要删除的行索引
+ */
+export declare function deleteTableGridRow(gridData: TableGridRow[], deleteRowIndex: number): (string | number | symbol)[];
+/**
+ * 表格数据删除整列
+ * @param gridData 表格封装后的数据
+ * @param deleteColIndex 要删除的列索引
+ */
+export declare function deleteTableGridCol(gridData: TableGridRow[], deleteColIndex: number): (string | number | symbol)[];
+/**
+ * 获取表格数据添加和删除以及拆分后导致跨行跨列变化的影响
+ * @param gridData 表格封装后的数据
+ * @param formItems 当前的全部表单项数据
+ */
+export declare function getTableGridEffects(gridData: TableGridRow[], formItems?: ProFormItemProps[]): UpdateItemsResult;
+/**
+ * 添加表格行时获取插入的位置索引
+ * @param gridData 表格封装后的数据
+ * @param tdFormItem 指定位置对应的单元格表单项
+ * @param position 指定位置的上方或下方添加, 默认下方
+ */
+export declare function getTableRowInsertIndex(gridData: TableGridRow[], tdFormItem?: ProFormItemProps, position?: -1): {
+    insertIndex: number;
+    trFormItemIndex?: undefined;
+    tdFormItemIndex?: undefined;
+} | {
+    trFormItemIndex: number;
+    insertIndex: number;
+    tdFormItemIndex: number;
+};
+/**
+ * 添加表格列时获取插入的位置索引
+ * @param gridData 表格封装后的数据
+ * @param tdFormItem 指定位置对应的单元格表单项
+ * @param position 指定位置的左侧或右侧添加, 默认右侧
+ */
+export declare function getTableColInsertIndex(gridData: TableGridRow[], tdFormItem?: ProFormItemProps, position?: -1): {
+    insertIndex: number;
+    tdFormItemIndex?: undefined;
+    trFormItemIndex?: undefined;
+} | {
+    tdFormItemIndex: number;
+    insertIndex: number;
+    trFormItemIndex: number;
+};
+/**
+ * 表格添加行时生成需要的数据
+ * @param tableFormItem 表格表单项
+ * @param formItems 当前的全部表单项数据
+ * @param tdFormItem 指定位置对应的单元格表单项
+ * @param position 指定位置的上方或下方添加, 默认下方
+ */
+export declare function generateAddTableRowData(tableFormItem: ProFormItemProps, formItems?: ProFormItemProps[], tdFormItem?: ProFormItemProps, position?: -1): UpdateItemsResult;
+/**
+ * 表格添加列时生成需要的数据
+ * @param tableFormItem 表格表单项
+ * @param formItems 当前的全部表单项数据
+ * @param tdFormItem 指定位置对应的单元格表单项
+ * @param position 指定位置的左侧或右侧添加, 默认右侧
+ */
+export declare function generateAddTableColData(tableFormItem: ProFormItemProps, formItems?: ProFormItemProps[], tdFormItem?: ProFormItemProps, position?: -1): UpdateItemsResult;
+/**
+ * 获取表格拆分单元格的影响数据
+ * @param tableFormItem 表格表单项
+ * @param formItems 当前的全部表单项数据
+ * @param tdFormItem 单元格表单项
+ */
+export declare function getTableSplitEffects(tableFormItem: ProFormItemProps, formItems: ProFormItemProps[] | undefined, tdFormItem: ProFormItemProps): UpdateItemsResult;
+/**
+ * 获取表格删除整行的影响数据
+ * @param tableFormItem 表格表单项
+ * @param formItems 当前的全部表单项数据
+ * @param deleteRowIndex 要删除的行索引
+ */
+export declare function getTableDeleteRowEffects(tableFormItem: ProFormItemProps, formItems: ProFormItemProps[] | undefined, deleteRowIndex: number): UpdateItemsResult;
+/**
+ * 获取表格删除整列的影响数据
+ * @param tableFormItem 表格表单项
+ * @param formItems 当前的全部表单项数据
+ * @param tdFormItem 要删除所在列的单元格表单项
+ */
+export declare function getTableDeleteColEffects(tableFormItem: ProFormItemProps, formItems: ProFormItemProps[] | undefined, tdFormItem: ProFormItemProps): UpdateItemsResult;
+/**
+ * 获取表格合并右侧的影响数据
+ * @param tableFormItem 表格表单项
+ * @param formItems 当前的全部表单项数据
+ * @param tdFormItem 单元格表单项
+ */
+export declare function getTableMergeRightEffects(tableFormItem: ProFormItemProps, formItems: ProFormItemProps[] | undefined, tdFormItem: ProFormItemProps): UpdateItemsResult;
+/**
+ * 获取表格合并下方的影响数据
+ * @param tableFormItem 表格表单项
+ * @param formItems 当前的全部表单项数据
+ * @param tdFormItem 单元格表单项
+ */
+export declare function getTableMergeBelowEffects(tableFormItem: ProFormItemProps, formItems: ProFormItemProps[] | undefined, tdFormItem: ProFormItemProps): UpdateItemsResult;

package/lib/ele-pro-form-builder/components/template-list.cjs

@@ -0,0 +1,51 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const buildUtil = require("./build-util");
+const _hoisted_1 = { class: "ele-pro-form-builder-template-wrapper" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = { class: "ele-pro-form-builder-template-item-label" };
+const _hoisted_4 = { class: "ele-pro-form-builder-template-item-body" };
+const _hoisted_5 = { class: "ele-pro-form-builder-template-item-cover" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "template-list",
+  props: {
+    templateData: {}
+  },
+  emits: ["importData"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const handleImportTemplate = (item) => {
+      const result = JSON.parse(JSON.stringify(item.config));
+      buildUtil.itemsGenerateNewKey(result.items, [], false);
+      emit("importData", result);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        _ctx.templateData ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.templateData, (item) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: item.name,
+            class: "ele-pro-form-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), vue.mergeProps({
+                  key: 0,
+                  ref_for: true
+                }, item.coverProps || {}), null, 16)) : vue.createCommentVNode("", true)
+              ])
+            ])
+          ], 8, _hoisted_2);
+        }), 128)) : vue.createCommentVNode("", true),
+        !_ctx.templateData || !_ctx.templateData.length ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElEmpty), {
+          key: 1,
+          imageSize: 58,
+          class: "ele-pro-form-builder-form-empty"
+        })) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

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

@@ -0,0 +1,23 @@
+import { TemplateItem, TemplateFormConfig } from '../types';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 模板数据 */
+    templateData?: TemplateItem[];
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    importData: (data: TemplateFormConfig) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 模板数据 */
+    templateData?: TemplateItem[];
+}>>> & {
+    onImportData?: ((data: TemplateFormConfig) => any) | undefined;
+}, {}, {}>;
+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-pro-form-builder/components/tool-button.cjs

@@ -0,0 +1,33 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "tool-button",
+  props: {
+    buttonProps: {},
+    tooltip: {}
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const handleClick = (e) => {
+      emit("click", e);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElButton), vue.mergeProps(_ctx.buttonProps || {}, {
+        title: _ctx.tooltip,
+        class: "ele-pro-form-builder-tool-button",
+        onClick: handleClick
+      }), vue.createSlots({ _: 2 }, [
+        _ctx.$slots.default ? {
+          name: "default",
+          fn: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "default")
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["title"]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-pro-form-builder/components/tool-button.d.ts

@@ -0,0 +1,36 @@
+import { ElButtonProps } from '../../ele-app/el';
+
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 按钮属性 */
+    buttonProps?: ElButtonProps;
+    /** 提示信息 */
+    tooltip?: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 按钮属性 */
+    buttonProps?: ElButtonProps;
+    /** 提示信息 */
+    tooltip?: string;
+}>>> & {
+    onClick?: ((event: MouseEvent) => 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/lib/ele-pro-form-builder/components/tree-table.cjs

@@ -0,0 +1,238 @@
+"use strict";
+const vue = require("vue");
+const EleTable = require("../../ele-table/index");
+const _hoisted_1 = ["width"];
+const _hoisted_2 = ["colspan", "rowspan"];
+const _hoisted_3 = ["rowspan", "colspan"];
+const _hoisted_4 = {
+  key: 0,
+  class: "is-empty-tr"
+};
+const _hoisted_5 = ["colspan"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "tree-table",
+  props: {
+    data: {},
+    columns: {},
+    headerStyle: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const tableHeader = vue.ref([]);
+    const tableBody = vue.ref([]);
+    const tableCols = vue.ref([]);
+    const analyseTreeData = (data, childrenField, level = 0, parents = []) => {
+      const treeNodes = [];
+      let maxDepth = 0;
+      data.forEach((item, index) => {
+        const node = { item, index, level, childSize: 0 };
+        treeNodes.push(node);
+        parents.forEach((parent) => {
+          parent.childSize++;
+        });
+        const children = item[childrenField];
+        if (children && children.length) {
+          const { depth, nodes } = analyseTreeData(
+            children,
+            childrenField,
+            level + 1,
+            [...parents, node]
+          );
+          maxDepth = Math.max(maxDepth, depth);
+          nodes.forEach((n) => {
+            treeNodes.push(n);
+          });
+        }
+      });
+      return { depth: maxDepth + 1, nodes: treeNodes };
+    };
+    const getTableData = (data, columns, childrenField = "children") => {
+      const { nodes, depth } = analyseTreeData(data, childrenField);
+      const showTreeIndex = depth > 1;
+      const bodyCols = columns.map((col) => {
+        return {
+          key: col.key ?? col.prop,
+          width: col.width,
+          column: col
+        };
+      });
+      const bodyData = [];
+      nodes.forEach((node, index) => {
+        const item = node.item;
+        const bodyRowData = [];
+        bodyCols.forEach((col, colIndex) => {
+          const key = `${index}-${colIndex}-${col.key}`;
+          bodyRowData.push({
+            key,
+            item,
+            column: col.column,
+            treeLevel: node.level
+          });
+        });
+        bodyData.push(bodyRowData);
+        if (showTreeIndex) {
+          for (let i = depth - 1; i >= 0; i--) {
+            const colspan = i < node.level ? 0 : 1;
+            bodyRowData.unshift({
+              key: `_index_${index}-${i}`,
+              treeLevel: node.level,
+              colspan,
+              rowspan: i === node.level ? node.childSize + 1 : colspan,
+              isTreeIndex: true,
+              treeIndex: i === node.level ? node.index + 1 : void 0,
+              hideLeftBorder: i === node.level ? false : true
+            });
+          }
+        } else {
+          bodyRowData.unshift({
+            key: `_index_${index}-0`,
+            isTreeIndex: true,
+            treeIndex: index + 1
+          });
+        }
+      });
+      const headerData = [];
+      const headerRowData = [];
+      bodyCols.forEach((col, colIndex) => {
+        const key = `${colIndex}-${col.key}`;
+        headerRowData.push({ key, column: col.column });
+      });
+      headerData.push(headerRowData);
+      if (showTreeIndex) {
+        for (let i = depth - 1; i >= 0; i--) {
+          headerRowData.unshift({
+            key: `_index-${i}`,
+            colspan: i === 0 ? depth : 0,
+            rowspan: i === 0 ? 1 : 0,
+            isTreeIndex: true
+          });
+        }
+      } else {
+        headerRowData.unshift({ key: "_index-0", isTreeIndex: true });
+      }
+      if (showTreeIndex) {
+        for (let i = depth - 1; i >= 0; i--) {
+          bodyCols.unshift({ key: `_index_${i}`, width: "24px" });
+        }
+      } else {
+        bodyCols.unshift({ key: `_index_0`, width: "24px" });
+      }
+      return { headerData, bodyData, bodyCols };
+    };
+    vue.watch(
+      [() => props.data, () => props.columns],
+      () => {
+        if (!props.columns || !props.columns.length) {
+          tableHeader.value = [];
+          tableBody.value = [];
+          tableCols.value = [];
+          return;
+        }
+        const { headerData, bodyData, bodyCols } = getTableData(
+          props.data || [],
+          props.columns
+        );
+        tableHeader.value = headerData;
+        tableBody.value = bodyData;
+        tableCols.value = bodyCols;
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(EleTable, {
+        border: true,
+        class: "ele-pro-form-builder-tree-table"
+      }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("colgroup", null, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tableCols.value, (col) => {
+              return vue.openBlock(), vue.createElementBlock("col", {
+                key: col.key,
+                width: col.width
+              }, null, 8, _hoisted_1);
+            }), 128))
+          ]),
+          vue.createElementVNode("thead", {
+            style: vue.normalizeStyle(_ctx.headerStyle)
+          }, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tableHeader.value, (item, index) => {
+              return vue.openBlock(), vue.createElementBlock("tr", { key: index }, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item, (cell) => {
+                  var _a, _b;
+                  return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                    key: cell.key
+                  }, [
+                    !cell.isTreeIndex ? (vue.openBlock(), vue.createElementBlock("th", {
+                      key: 0,
+                      style: vue.normalizeStyle((_a = cell.column) == null ? void 0 : _a.style),
+                      class: vue.normalizeClass((_b = cell.column) == null ? void 0 : _b.class)
+                    }, [
+                      vue.renderSlot(_ctx.$slots, "headerCell", {
+                        column: cell.column
+                      }, () => {
+                        var _a2;
+                        return [
+                          vue.createTextVNode(vue.toDisplayString((_a2 = cell.column) == null ? void 0 : _a2.label), 1)
+                        ];
+                      })
+                    ], 6)) : cell.rowspan !== 0 && cell.colspan !== 0 ? (vue.openBlock(), vue.createElementBlock("th", {
+                      key: 1,
+                      colspan: cell.colspan,
+                      rowspan: cell.rowspan,
+                      class: "is-tree-index"
+                    }, null, 8, _hoisted_2)) : vue.createCommentVNode("", true)
+                  ], 64);
+                }), 128))
+              ]);
+            }), 128))
+          ], 4),
+          vue.createElementVNode("tbody", null, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tableBody.value, (item, index) => {
+              return vue.openBlock(), vue.createElementBlock("tr", { key: index }, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item, (cell) => {
+                  var _a, _b;
+                  return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                    key: cell.key
+                  }, [
+                    !cell.isTreeIndex ? (vue.openBlock(), vue.createElementBlock("td", {
+                      key: 0,
+                      style: vue.normalizeStyle((_a = cell.column) == null ? void 0 : _a.style),
+                      class: vue.normalizeClass((_b = cell.column) == null ? void 0 : _b.class)
+                    }, [
+                      vue.renderSlot(_ctx.$slots, "bodyCell", {
+                        row: cell.item,
+                        rowIndex: index,
+                        column: cell.column,
+                        treeLevel: cell.treeLevel
+                      }, () => [
+                        vue.createTextVNode(vue.toDisplayString(cell.item && cell.column && cell.column.prop != null ? cell.item[cell.column.prop] : ""), 1)
+                      ])
+                    ], 6)) : cell.rowspan !== 0 && cell.colspan !== 0 ? (vue.openBlock(), vue.createElementBlock("td", {
+                      key: 1,
+                      rowspan: cell.rowspan,
+                      colspan: cell.colspan,
+                      style: vue.normalizeStyle({
+                        borderLeftColor: cell.hideLeftBorder ? "transparent" : void 0
+                      }),
+                      class: "is-tree-index"
+                    }, vue.toDisplayString(cell.treeIndex), 13, _hoisted_3)) : vue.createCommentVNode("", true)
+                  ], 64);
+                }), 128))
+              ]);
+            }), 128)),
+            !tableBody.value.length ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_4, [
+              vue.createElementVNode("td", {
+                colspan: tableCols.value.length
+              }, "无数据", 8, _hoisted_5)
+            ])) : vue.createCommentVNode("", true)
+          ])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+module.exports = _sfc_main;