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

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

@@ -0,0 +1,61 @@
+import { ProFormItemOption } from '../../ele-pro-form/types';
+import { TreeTableColumn } from '../types';
+
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /** 选项数据 */
+    modelValue?: ProFormItemOption[];
+    /** 弹窗标题 */
+    title?: string;
+    /** 弹窗宽度 */
+    width?: number | string;
+    /** 是否是树形结构数据 */
+    isTreeData?: boolean | {
+        maxDepth?: number;
+    };
+    /** 自定义列 */
+    columns?: TreeTableColumn[] | "tableData" | "tableColumns" | "stringArray";
+}>, {
+    title: string;
+    width: number;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (data: ProFormItemOption[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /** 选项数据 */
+    modelValue?: ProFormItemOption[];
+    /** 弹窗标题 */
+    title?: string;
+    /** 弹窗宽度 */
+    width?: number | string;
+    /** 是否是树形结构数据 */
+    isTreeData?: boolean | {
+        maxDepth?: number;
+    };
+    /** 自定义列 */
+    columns?: TreeTableColumn[] | "tableData" | "tableColumns" | "stringArray";
+}>, {
+    title: string;
+    width: number;
+}>>> & {
+    "onUpdate:modelValue"?: ((data: ProFormItemOption[]) => any) | undefined;
+}, {
+    title: string;
+    width: number | string;
+}, {}>;
+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_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/es/ele-pro-form-builder/components/options-edit.js

@@ -0,0 +1,496 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, Fragment, createVNode, unref, withCtx, createTextVNode, toDisplayString, createElementVNode, normalizeStyle, createBlock, createCommentVNode } from "vue";
+import { ElButton, ElSelect, ElOption, ElSwitch, ElInput } from "element-plus";
+import EleModal from "../../ele-modal/index";
+import { eachTree, mapTree } from "../../utils/core";
+import { DeleteOutlined, PlusOutlined, AppstoreAddOutlined } from "../../icons";
+import TreeTable from "./tree-table";
+import ToolButton from "./tool-button";
+import { generateItemKey } from "../util";
+const _hoisted_1 = { class: "ele-pro-form-builder-options-edit-wrapper" };
+const _hoisted_2 = { class: "ele-pro-form-builder-options-edit-table-wrapper" };
+const _hoisted_3 = {
+  key: 6,
+  class: "ele-pro-form-builder-options-edit-actions"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "ele-pro-form-builder-options-edit-th-cell"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "ele-pro-form-builder-options-edit-actions"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "options-edit",
+  props: {
+    modelValue: {},
+    title: { default: "编辑选项数据" },
+    width: { default: 600 },
+    isTreeData: { type: [Boolean, Object] },
+    columns: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const visible = ref(false);
+    const tableColumns = ref([]);
+    const tableData = ref([]);
+    const tableMinWidth = computed(() => {
+      let width = 0;
+      tableColumns.value.forEach((col) => {
+        width += col.width ? Number.parseInt(col.width) : 120;
+      });
+      return `${width}px`;
+    });
+    let tablePropStart = 0;
+    const generateCellKey = () => {
+      const key = generateItemKey();
+      tablePropStart++;
+      return `${key}c${tablePropStart}`;
+    };
+    const getPropertyPath = (data, excludeKeys, prefix) => {
+      const keys = [];
+      if (data != null) {
+        if (Array.isArray(data)) {
+          data.forEach((v, i) => {
+            const path = prefix ? `${prefix}[${i}]` : String(i);
+            if (v != null && typeof v === "object") {
+              getPropertyPath(v, excludeKeys, path).forEach((k) => {
+                keys.push(k);
+              });
+            } else {
+              keys.push(path);
+            }
+          });
+        } else {
+          Object.keys(data).forEach((key) => {
+            if (!excludeKeys || !excludeKeys.includes(key)) {
+              const path = prefix ? `${prefix}.${key}` : key;
+              const v = data[key];
+              if (v != null && typeof v === "object") {
+                getPropertyPath(v, excludeKeys, path).forEach((k) => {
+                  keys.push(k);
+                });
+              } else {
+                keys.push(path);
+              }
+            }
+          });
+        }
+      }
+      return keys;
+    };
+    const openModal = () => {
+      tableData.value = [];
+      const userData = JSON.parse(JSON.stringify(props.modelValue || []));
+      const actionCol = {
+        key: "action",
+        label: "",
+        style: { textAlign: "center" },
+        class: "is-action-col",
+        width: props.isTreeData ? "78px" : "48px"
+      };
+      if (props.columns === "tableData") {
+        const keys = [];
+        eachTree(userData, (row) => {
+          getPropertyPath(row, ["children"]).forEach((k) => {
+            if (!keys.includes(k)) {
+              keys.push(k);
+            }
+          });
+        });
+        tableColumns.value = [
+          ...keys.map((k) => {
+            return {
+              userProp: k,
+              prop: generateCellKey(),
+              label: "",
+              style: { textAlign: "center" }
+            };
+          }),
+          actionCol
+        ];
+        tableData.value = mapTree(userData, (row) => {
+          const temp = { ...row };
+          tableColumns.value.forEach((col) => {
+            if (col.prop && col.userProp) {
+              temp[col.prop] = temp[col.userProp];
+            }
+          });
+          return temp;
+        });
+      } else if (props.columns === "tableColumns") {
+        tableColumns.value = [
+          {
+            prop: "label",
+            label: "标题",
+            style: { textAlign: "center" },
+            width: "130px"
+          },
+          {
+            prop: "prop",
+            label: "属性名",
+            style: { textAlign: "center" },
+            width: "130px"
+          },
+          {
+            prop: "columnKey",
+            label: "ColumnKey",
+            style: { textAlign: "center" },
+            width: "130px"
+          },
+          {
+            prop: "align",
+            label: "对齐方式",
+            style: { textAlign: "center" },
+            width: "110px"
+          },
+          {
+            prop: "width",
+            label: "列宽",
+            style: { textAlign: "center" },
+            width: "110px"
+          },
+          {
+            prop: "minWidth",
+            label: "最小列宽",
+            style: { textAlign: "center" },
+            width: "110px"
+          },
+          {
+            prop: "sortable",
+            label: "支持排序",
+            style: { textAlign: "center" },
+            width: "80px"
+          },
+          {
+            prop: "fixed",
+            label: "固定",
+            style: { textAlign: "center" },
+            width: "130px"
+          },
+          {
+            prop: "type",
+            label: "类型",
+            style: { textAlign: "center" },
+            width: "110px"
+          },
+          actionCol
+        ];
+        tableData.value = userData;
+      } else if (props.columns === "stringArray") {
+        tableColumns.value = [
+          { prop: "value", label: "值", style: { textAlign: "center" } },
+          actionCol
+        ];
+        tableData.value = userData.map((d) => ({ value: d }));
+      } else if (props.columns) {
+        tableColumns.value = [...props.columns, actionCol];
+        tableData.value = userData;
+      } else {
+        tableColumns.value = [
+          { prop: "label", label: "文本", style: { textAlign: "center" } },
+          { prop: "value", label: "值", style: { textAlign: "center" } },
+          actionCol
+        ];
+        tableData.value = userData;
+      }
+      visible.value = true;
+    };
+    const handleCancel = () => {
+      visible.value = false;
+    };
+    const handleSave = () => {
+      let result = JSON.parse(JSON.stringify(tableData.value));
+      if (props.columns === "tableData") {
+        result = mapTree(result, (row) => {
+          const temp = {};
+          tableColumns.value.forEach((col) => {
+            if (col.prop) {
+              temp[col.userProp || col.prop] = row[col.prop];
+            }
+          });
+          return temp;
+        });
+      } else if (props.columns === "stringArray") {
+        result = result.map((d) => d.value);
+      }
+      emit("update:modelValue", result);
+      visible.value = false;
+    };
+    const handleDelete = (row, parent) => {
+      const children = parent ? parent.children : tableData.value;
+      if (children && children.length) {
+        for (let i = 0; i < children.length; i++) {
+          const temp = children[i];
+          if (temp === row) {
+            children.splice(i, 1);
+            return true;
+          }
+          if (handleDelete(row, temp)) {
+            return;
+          }
+        }
+      }
+    };
+    const handleAdd = (parent) => {
+      const item = {};
+      if (!parent) {
+        tableData.value.push(item);
+      } else if (parent.children) {
+        parent.children.push(item);
+      } else {
+        parent.children = [item];
+      }
+    };
+    const handleAddCol = () => {
+      const index = tableColumns.value.findIndex((c) => c.key === "action");
+      if (index !== -1) {
+        const col = {
+          userProp: "",
+          prop: generateCellKey(),
+          label: "",
+          style: { textAlign: "center" }
+        };
+        if (index <= 0) {
+          tableColumns.value.unshift(col);
+        } else {
+          tableColumns.value.splice(index, 0, col);
+        }
+      }
+    };
+    const handleDeleteCol = (column) => {
+      if (column.prop != null) {
+        const index = tableColumns.value.findIndex((c) => c.prop === column.prop);
+        if (index !== -1) {
+          tableColumns.value.splice(index, 1);
+        }
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(ElButton), {
+          size: "small",
+          onClick: openModal,
+          style: { width: "100%" }
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(_ctx.title), 1)
+          ]),
+          _: 1
+        }),
+        createVNode(EleModal, {
+          width: _ctx.width,
+          title: _ctx.title,
+          modelValue: visible.value,
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => visible.value = $event),
+          position: { top: "60px" },
+          closeOnClickModal: false
+        }, {
+          footer: withCtx(() => [
+            createVNode(unref(ElButton), {
+              size: "default",
+              onClick: handleCancel
+            }, {
+              default: withCtx(() => [
+                createTextVNode("取消")
+              ]),
+              _: 1
+            }),
+            createVNode(unref(ElButton), {
+              type: "primary",
+              size: "default",
+              onClick: handleSave
+            }, {
+              default: withCtx(() => [
+                createTextVNode(" 保存 ")
+              ]),
+              _: 1
+            })
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_1, [
+              createElementVNode("div", _hoisted_2, [
+                createElementVNode("div", {
+                  class: "ele-pro-form-builder-options-edit-table",
+                  style: normalizeStyle({ minWidth: tableMinWidth.value })
+                }, [
+                  createVNode(TreeTable, {
+                    columns: tableColumns.value,
+                    data: tableData.value
+                  }, {
+                    bodyCell: withCtx(({ row, column, treeLevel }) => [
+                      _ctx.columns === "tableColumns" && column && column.prop === "align" ? (openBlock(), createBlock(unref(ElSelect), {
+                        key: 0,
+                        size: "default",
+                        clearable: true,
+                        modelValue: row[column.prop],
+                        "onUpdate:modelValue": ($event) => row[column.prop] = $event,
+                        popperOptions: { strategy: "fixed" },
+                        class: "ele-fluid"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(ElOption), {
+                            label: "左对齐",
+                            value: "left"
+                          }),
+                          createVNode(unref(ElOption), {
+                            label: "居中",
+                            value: "center"
+                          }),
+                          createVNode(unref(ElOption), {
+                            label: "右对齐",
+                            value: "right"
+                          })
+                        ]),
+                        _: 2
+                      }, 1032, ["modelValue", "onUpdate:modelValue"])) : _ctx.columns === "tableColumns" && column && column.prop === "sortable" ? (openBlock(), createBlock(unref(ElSwitch), {
+                        key: 1,
+                        size: "default",
+                        modelValue: row[column.prop],
+                        "onUpdate:modelValue": ($event) => row[column.prop] = $event
+                      }, null, 8, ["modelValue", "onUpdate:modelValue"])) : _ctx.columns === "tableColumns" && column && column.prop === "fixed" ? (openBlock(), createBlock(unref(ElSelect), {
+                        key: 2,
+                        size: "default",
+                        clearable: true,
+                        modelValue: row[column.prop],
+                        "onUpdate:modelValue": ($event) => row[column.prop] = $event,
+                        popperOptions: { strategy: "fixed" },
+                        class: "ele-fluid"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(ElOption), {
+                            label: "不固定",
+                            value: false
+                          }),
+                          createVNode(unref(ElOption), {
+                            label: "固定在左侧",
+                            value: "left"
+                          }),
+                          createVNode(unref(ElOption), {
+                            label: "固定在右侧",
+                            value: "right"
+                          })
+                        ]),
+                        _: 2
+                      }, 1032, ["modelValue", "onUpdate:modelValue"])) : _ctx.columns === "tableColumns" && column && column.prop === "type" ? (openBlock(), createBlock(unref(ElSelect), {
+                        key: 3,
+                        size: "default",
+                        clearable: true,
+                        modelValue: row[column.prop],
+                        "onUpdate:modelValue": ($event) => row[column.prop] = $event,
+                        popperOptions: { strategy: "fixed" },
+                        class: "ele-fluid"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(ElOption), {
+                            label: "默认",
+                            value: "default"
+                          }),
+                          createVNode(unref(ElOption), {
+                            label: "选择列",
+                            value: "selection"
+                          }),
+                          createVNode(unref(ElOption), {
+                            label: "序号列",
+                            value: "index"
+                          }),
+                          createVNode(unref(ElOption), {
+                            label: "展开列",
+                            value: "expand"
+                          })
+                        ]),
+                        _: 2
+                      }, 1032, ["modelValue", "onUpdate:modelValue"])) : column && column.prop && column.editType === "switch" ? (openBlock(), createBlock(unref(ElSwitch), {
+                        key: 4,
+                        size: "default",
+                        modelValue: row[column.prop],
+                        "onUpdate:modelValue": ($event) => row[column.prop] = $event
+                      }, null, 8, ["modelValue", "onUpdate:modelValue"])) : column && column.prop ? (openBlock(), createBlock(unref(ElInput), {
+                        key: 5,
+                        size: "default",
+                        clearable: true,
+                        modelValue: row[column.prop],
+                        "onUpdate:modelValue": ($event) => row[column.prop] = $event
+                      }, null, 8, ["modelValue", "onUpdate:modelValue"])) : column && column.key === "action" ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                        createVNode(ToolButton, {
+                          buttonProps: {
+                            type: "danger",
+                            plain: true,
+                            circle: true,
+                            icon: unref(DeleteOutlined)
+                          },
+                          tooltip: "删除数据",
+                          onClick: ($event) => handleDelete(row)
+                        }, null, 8, ["buttonProps", "onClick"]),
+                        _ctx.isTreeData && !(typeof _ctx.isTreeData === "object" && _ctx.isTreeData.maxDepth && (treeLevel || 0) + 1 >= _ctx.isTreeData.maxDepth) ? (openBlock(), createBlock(ToolButton, {
+                          key: 0,
+                          buttonProps: {
+                            type: "primary",
+                            plain: true,
+                            circle: true,
+                            icon: unref(PlusOutlined)
+                          },
+                          tooltip: "新增子级",
+                          onClick: ($event) => handleAdd(row)
+                        }, null, 8, ["buttonProps", "onClick"])) : createCommentVNode("", true)
+                      ])) : createCommentVNode("", true)
+                    ]),
+                    headerCell: withCtx(({ column }) => [
+                      _ctx.columns === "tableData" && column && column.prop ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                        createVNode(unref(ElInput), {
+                          size: "default",
+                          clearable: true,
+                          modelValue: column.userProp,
+                          "onUpdate:modelValue": ($event) => column.userProp = $event
+                        }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+                        createVNode(ToolButton, {
+                          buttonProps: {
+                            type: "danger",
+                            plain: true,
+                            circle: true,
+                            icon: unref(DeleteOutlined)
+                          },
+                          tooltip: "删除属性",
+                          onClick: ($event) => handleDeleteCol(column)
+                        }, null, 8, ["buttonProps", "onClick"])
+                      ])) : column && column.key === "action" ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                        _ctx.columns === "tableData" ? (openBlock(), createBlock(ToolButton, {
+                          key: 0,
+                          buttonProps: {
+                            type: "primary",
+                            plain: true,
+                            circle: true,
+                            icon: unref(AppstoreAddOutlined)
+                          },
+                          tooltip: "新增属性",
+                          onClick: _cache[0] || (_cache[0] = ($event) => handleAddCol())
+                        }, null, 8, ["buttonProps"])) : createCommentVNode("", true),
+                        createVNode(ToolButton, {
+                          buttonProps: {
+                            type: "primary",
+                            plain: true,
+                            circle: true,
+                            icon: unref(PlusOutlined)
+                          },
+                          tooltip: "新增数据",
+                          onClick: _cache[1] || (_cache[1] = ($event) => handleAdd())
+                        }, null, 8, ["buttonProps"])
+                      ])) : createCommentVNode("", true)
+                    ]),
+                    _: 1
+                  }, 8, ["columns", "data"])
+                ], 4)
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["width", "title", "modelValue"])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,56 @@
+import { ProFormItemKey, ProFormItemProps, ProFormItemTypeData } from '../../ele-pro-form/types';
+import { AddChildrenItemAction, ComponentGroup } from '../types';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 表单项 */
+    items: ProFormItemProps[];
+    /** 选中的表单项 */
+    currentFormItemId?: ProFormItemKey;
+    /** 折叠的表单项 */
+    collapseItemIds?: ProFormItemKey[];
+    /** 父级数据 */
+    parent?: ProFormItemProps;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:currentFormItemId": (formItemId?: string | number | symbol | undefined) => void;
+    toggleItemCollapse: (formItemId: string | number | symbol) => void;
+    deleteItem: (formItemId: string | number | symbol) => void;
+    copyItem: (formItemId: string | number | symbol) => void;
+    addChildren: (triggerItem: ProFormItemProps, action?: AddChildrenItemAction | undefined) => void;
+    openTableTool: (item: ProFormItemProps, event: MouseEvent) => void;
+    updateItemChildren: (children: ProFormItemProps[], parent?: ProFormItemProps | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 表单项 */
+    items: ProFormItemProps[];
+    /** 选中的表单项 */
+    currentFormItemId?: ProFormItemKey;
+    /** 折叠的表单项 */
+    collapseItemIds?: ProFormItemKey[];
+    /** 父级数据 */
+    parent?: ProFormItemProps;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+}>>> & {
+    "onUpdate:currentFormItemId"?: ((formItemId?: string | number | symbol | undefined) => any) | undefined;
+    onToggleItemCollapse?: ((formItemId: string | number | symbol) => any) | undefined;
+    onDeleteItem?: ((formItemId: string | number | symbol) => any) | undefined;
+    onCopyItem?: ((formItemId: string | number | symbol) => any) | undefined;
+    onAddChildren?: ((triggerItem: ProFormItemProps, action?: AddChildrenItemAction | undefined) => any) | undefined;
+    onOpenTableTool?: ((item: ProFormItemProps, event: MouseEvent) => any) | undefined;
+    onUpdateItemChildren?: ((children: ProFormItemProps[], parent?: ProFormItemProps | undefined) => 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;
+    };
+};