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

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

@@ -1,200 +1,34 @@
-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 { defineComponent, ref, openBlock, createElementBlock, Fragment, createVNode, unref, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode } from "vue";
+import { ElButton } from "element-plus";
+import { codeStringPrefix } from "../../ele-pro-form/components/render-util";
 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"
-};
+import EleTabBar from "../../ele-tab-bar/index";
+import OptionsTable from "./options-table";
+import OptionsCode from "./options-code";
 const _sfc_main = /* @__PURE__ */ 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 = 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 optionsType = ref("optionsTable");
+    const editerRef = 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 = [];
-        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;
+      if (props.modelValue != null && typeof props.modelValue === "string" && props.modelValue.startsWith(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;
     };
@@ -202,78 +36,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       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);
+      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 openBlock(), createElementBlock(Fragment, null, [
         createVNode(unref(ElButton), {
           size: "small",
-          onClick: openModal,
-          style: { width: "100%" }
+          style: { width: "100%" },
+          onClick: openModal
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(_ctx.title), 1)
@@ -281,12 +54,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           _: 1
         }),
         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: withCtx(() => [
             createVNode(unref(ElButton), {
@@ -310,183 +93,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             })
           ]),
           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)
-              ])
-            ])
+            _ctx.codeOptions ? (openBlock(), 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"])) : createCommentVNode("", true),
+            !_ctx.codeOptions || optionsType.value === "optionsTable" ? (openBlock(), 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 ? (openBlock(), 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"])) : createCommentVNode("", true)
           ]),
           _: 1
-        }, 8, ["width", "title", "modelValue"])
+        }, 8, ["title", "modelValue"])
       ], 64);
     };
   }

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

@@ -0,0 +1,33 @@
+import { TreeTableColumn } from '../../ele-tree-table/types';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 选项数据 */
+    data?: Array<any> | string;
+    /** 是否是树形结构数据 */
+    isTreeData?: boolean | {
+        maxDepth?: number;
+    };
+    /** 自定义列 */
+    columns?: TreeTableColumn[] | "tableData" | "tableColumns" | "stringArray";
+}>, {
+    getResult: () => Array<any>;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 选项数据 */
+    data?: Array<any> | string;
+    /** 是否是树形结构数据 */
+    isTreeData?: boolean | {
+        maxDepth?: number;
+    };
+    /** 自定义列 */
+    columns?: TreeTableColumn[] | "tableData" | "tableColumns" | "stringArray";
+}>>>, {}, {}>;
+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;
+    };
+};