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

package/lib/ele-pro-form-builder/components/options-edit.cjs

@@ -1,201 +1,35 @@
 "use strict";
 const vue = require("vue");
 const elementPlus = require("element-plus");
+const renderUtil = require("../../ele-pro-form/components/render-util");
 const EleModal = require("../../ele-modal/index");
-const core = require("../../utils/core");
-const icons = require("../../icons");
-const TreeTable = require("./tree-table");
-const ToolButton = require("./tool-button");
-const util = require("../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 EleTabBar = require("../../ele-tab-bar/index");
+const OptionsTable = require("./options-table");
+const OptionsCode = require("./options-code");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "options-edit",
   props: {
     modelValue: {},
-    title: { default: "编辑选项数据" },
-    width: { default: 600 },
+    title: {},
     isTreeData: { type: [Boolean, Object] },
-    columns: {}
+    columns: {},
+    codeOptions: { type: Boolean },
+    codeTips: {},
+    codePlaceholder: {},
+    codeEditerComponent: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const visible = vue.ref(false);
-    const tableColumns = vue.ref([]);
-    const tableData = vue.ref([]);
-    const tableMinWidth = vue.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 = util.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 optionsType = vue.ref("optionsTable");
+    const editerRef = vue.ref(null);
     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 = [];
-        core.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 = core.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;
+      if (props.modelValue != null && typeof props.modelValue === "string" && props.modelValue.startsWith(renderUtil.codeStringPrefix)) {
+        optionsType.value = "optionsCode";
       } else {
-        tableColumns.value = [
-          { prop: "label", label: "文本", style: { textAlign: "center" } },
-          { prop: "value", label: "值", style: { textAlign: "center" } },
-          actionCol
-        ];
-        tableData.value = userData;
+        optionsType.value = "optionsTable";
       }
       visible.value = true;
     };
@@ -203,78 +37,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       visible.value = false;
     };
     const handleSave = () => {
-      let result = JSON.parse(JSON.stringify(tableData.value));
-      if (props.columns === "tableData") {
-        result = core.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);
+      var _a, _b;
+      const result = (_b = (_a = editerRef.value) == null ? void 0 : _a.getResult) == null ? void 0 : _b.call(_a);
+      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 vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
         vue.createVNode(vue.unref(elementPlus.ElButton), {
           size: "small",
-          onClick: openModal,
-          style: { width: "100%" }
+          style: { width: "100%" },
+          onClick: openModal
         }, {
           default: vue.withCtx(() => [
             vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
@@ -282,21 +55,31 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           _: 1
         }),
         vue.createVNode(EleModal, {
-          width: _ctx.width,
+          width: 960,
+          maxable: true,
+          position: "center",
           title: _ctx.title,
           modelValue: visible.value,
-          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => visible.value = $event),
-          position: { top: "60px" },
-          closeOnClickModal: false
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
+          closeOnClickModal: false,
+          destroyOnClose: true,
+          bodyStyle: {
+            height: "568px",
+            minHeight: "100%",
+            maxHeight: "100%",
+            padding: "0 16px 8px 16px",
+            display: "flex",
+            flexDirection: "column"
+          }
         }, {
           footer: vue.withCtx(() => [
             vue.createVNode(vue.unref(elementPlus.ElButton), {
               size: "default",
               onClick: handleCancel
             }, {
-              default: vue.withCtx(() => [
+              default: vue.withCtx(() => _cache[2] || (_cache[2] = [
                 vue.createTextVNode("取消")
-              ]),
+              ])),
               _: 1
             }),
             vue.createVNode(vue.unref(elementPlus.ElButton), {
@@ -304,190 +87,43 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               size: "default",
               onClick: handleSave
             }, {
-              default: vue.withCtx(() => [
+              default: vue.withCtx(() => _cache[3] || (_cache[3] = [
                 vue.createTextVNode(" 保存 ")
-              ]),
+              ])),
               _: 1
             })
           ]),
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1, [
-              vue.createElementVNode("div", _hoisted_2, [
-                vue.createElementVNode("div", {
-                  class: "ele-pro-form-builder-options-edit-table",
-                  style: vue.normalizeStyle({ minWidth: tableMinWidth.value })
-                }, [
-                  vue.createVNode(TreeTable, {
-                    columns: tableColumns.value,
-                    data: tableData.value
-                  }, {
-                    bodyCell: vue.withCtx(({ row, column, treeLevel }) => [
-                      _ctx.columns === "tableColumns" && column && column.prop === "align" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.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: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(elementPlus.ElOption), {
-                            label: "左对齐",
-                            value: "left"
-                          }),
-                          vue.createVNode(vue.unref(elementPlus.ElOption), {
-                            label: "居中",
-                            value: "center"
-                          }),
-                          vue.createVNode(vue.unref(elementPlus.ElOption), {
-                            label: "右对齐",
-                            value: "right"
-                          })
-                        ]),
-                        _: 2
-                      }, 1032, ["modelValue", "onUpdate:modelValue"])) : _ctx.columns === "tableColumns" && column && column.prop === "sortable" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.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" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.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: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(elementPlus.ElOption), {
-                            label: "不固定",
-                            value: false
-                          }),
-                          vue.createVNode(vue.unref(elementPlus.ElOption), {
-                            label: "固定在左侧",
-                            value: "left"
-                          }),
-                          vue.createVNode(vue.unref(elementPlus.ElOption), {
-                            label: "固定在右侧",
-                            value: "right"
-                          })
-                        ]),
-                        _: 2
-                      }, 1032, ["modelValue", "onUpdate:modelValue"])) : _ctx.columns === "tableColumns" && column && column.prop === "type" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.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: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(elementPlus.ElOption), {
-                            label: "默认",
-                            value: "default"
-                          }),
-                          vue.createVNode(vue.unref(elementPlus.ElOption), {
-                            label: "选择列",
-                            value: "selection"
-                          }),
-                          vue.createVNode(vue.unref(elementPlus.ElOption), {
-                            label: "序号列",
-                            value: "index"
-                          }),
-                          vue.createVNode(vue.unref(elementPlus.ElOption), {
-                            label: "展开列",
-                            value: "expand"
-                          })
-                        ]),
-                        _: 2
-                      }, 1032, ["modelValue", "onUpdate:modelValue"])) : column && column.prop && column.editType === "switch" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElSwitch), {
-                        key: 4,
-                        size: "default",
-                        modelValue: row[column.prop],
-                        "onUpdate:modelValue": ($event) => row[column.prop] = $event
-                      }, null, 8, ["modelValue", "onUpdate:modelValue"])) : column && column.prop ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.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" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-                        vue.createVNode(ToolButton, {
-                          buttonProps: {
-                            type: "danger",
-                            plain: true,
-                            circle: true,
-                            icon: vue.unref(icons.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) ? (vue.openBlock(), vue.createBlock(ToolButton, {
-                          key: 0,
-                          buttonProps: {
-                            type: "primary",
-                            plain: true,
-                            circle: true,
-                            icon: vue.unref(icons.PlusOutlined)
-                          },
-                          tooltip: "新增子级",
-                          onClick: ($event) => handleAdd(row)
-                        }, null, 8, ["buttonProps", "onClick"])) : vue.createCommentVNode("", true)
-                      ])) : vue.createCommentVNode("", true)
-                    ]),
-                    headerCell: vue.withCtx(({ column }) => [
-                      _ctx.columns === "tableData" && column && column.prop ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
-                        vue.createVNode(vue.unref(elementPlus.ElInput), {
-                          size: "default",
-                          clearable: true,
-                          modelValue: column.userProp,
-                          "onUpdate:modelValue": ($event) => column.userProp = $event
-                        }, null, 8, ["modelValue", "onUpdate:modelValue"]),
-                        vue.createVNode(ToolButton, {
-                          buttonProps: {
-                            type: "danger",
-                            plain: true,
-                            circle: true,
-                            icon: vue.unref(icons.DeleteOutlined)
-                          },
-                          tooltip: "删除属性",
-                          onClick: ($event) => handleDeleteCol(column)
-                        }, null, 8, ["buttonProps", "onClick"])
-                      ])) : column && column.key === "action" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
-                        _ctx.columns === "tableData" ? (vue.openBlock(), vue.createBlock(ToolButton, {
-                          key: 0,
-                          buttonProps: {
-                            type: "primary",
-                            plain: true,
-                            circle: true,
-                            icon: vue.unref(icons.AppstoreAddOutlined)
-                          },
-                          tooltip: "新增属性",
-                          onClick: _cache[0] || (_cache[0] = ($event) => handleAddCol())
-                        }, null, 8, ["buttonProps"])) : vue.createCommentVNode("", true),
-                        vue.createVNode(ToolButton, {
-                          buttonProps: {
-                            type: "primary",
-                            plain: true,
-                            circle: true,
-                            icon: vue.unref(icons.PlusOutlined)
-                          },
-                          tooltip: "新增数据",
-                          onClick: _cache[1] || (_cache[1] = ($event) => handleAdd())
-                        }, null, 8, ["buttonProps"])
-                      ])) : vue.createCommentVNode("", true)
-                    ]),
-                    _: 1
-                  }, 8, ["columns", "data"])
-                ], 4)
-              ])
-            ])
+            _ctx.codeOptions ? (vue.openBlock(), vue.createBlock(EleTabBar, {
+              key: 0,
+              modelValue: optionsType.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => optionsType.value = $event),
+              items: [
+                { value: "optionsTable", label: "静态数据" },
+                { value: "optionsCode", label: "远程数据" }
+              ],
+              type: "plain",
+              class: "ele-pro-form-builder-options-tabs"
+            }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true),
+            !_ctx.codeOptions || optionsType.value === "optionsTable" ? (vue.openBlock(), vue.createBlock(OptionsTable, {
+              key: 1,
+              ref_key: "editerRef",
+              ref: editerRef,
+              data: _ctx.modelValue,
+              isTreeData: _ctx.isTreeData,
+              columns: _ctx.columns
+            }, null, 8, ["data", "isTreeData", "columns"])) : _ctx.codeOptions ? (vue.openBlock(), vue.createBlock(OptionsCode, {
+              key: 2,
+              ref_key: "editerRef",
+              ref: editerRef,
+              data: _ctx.modelValue,
+              codeTips: _ctx.codeTips,
+              codePlaceholder: _ctx.codePlaceholder,
+              codeEditerComponent: _ctx.codeEditerComponent
+            }, null, 8, ["data", "codeTips", "codePlaceholder", "codeEditerComponent"])) : vue.createCommentVNode("", true)
           ]),
           _: 1
-        }, 8, ["width", "title", "modelValue"])
+        }, 8, ["title", "modelValue"])
       ], 64);
     };
   }

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

@@ -1,46 +1,49 @@
-import { ProFormItemOption } from '../../ele-pro-form/types';
-import { TreeTableColumn } from '../types';
+import { UserComponent } from '../../ele-app/types';
+import { TreeTableColumn } from '../../ele-tree-table/types';
 
-declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 选项数据 */
-    modelValue?: ProFormItemOption[];
+    modelValue?: Array<any> | string;
     /** 弹窗标题 */
     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<{
+    /** 是否支持远程数据 */
+    codeOptions?: boolean;
+    /** 顶部提示内容 */
+    codeTips?: string;
+    /** 默认提示示例代码 */
+    codePlaceholder?: string;
+    /** 代码编辑器组件 */
+    codeEditerComponent?: UserComponent;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (data: string | any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 选项数据 */
-    modelValue?: ProFormItemOption[];
+    modelValue?: Array<any> | string;
     /** 弹窗标题 */
     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;
-}, {}>;
+    /** 是否支持远程数据 */
+    codeOptions?: boolean;
+    /** 顶部提示内容 */
+    codeTips?: string;
+    /** 默认提示示例代码 */
+    codePlaceholder?: string;
+    /** 代码编辑器组件 */
+    codeEditerComponent?: UserComponent;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((data: string | any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -51,11 +54,3 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         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];
-} & {};