super-page-designer 2.0.34 → 2.0.39

package/dist/es/components/design/views/design/page-event/page-event-content.vue.js

@@ -1,7 +1,596 @@
-import _sfc_main from "./page-event-content.vue2.js";
-import "./page-event-content.vue3.js";
-import _export_sfc from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const pageEventContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-524242a9"]]);
+import { defineComponent, ref, onMounted, onUnmounted, watch, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, withDirectives, vShow, unref, createTextVNode, toDisplayString, Fragment, renderList, createBlock } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import config from "./config.vue.js";
+import { standardButtonOperations } from "../../../utils/assemblys-config.js";
+import { getUuidv4, deepCopy } from "../../../utils/common-util.js";
+import { usePageContextStore } from "../../../../../stores/page-store.js";
+import { undoRedo } from "../../../../../stores/event-undo-redo-store.js";
+import eventBus from "../../../utils/eventBus.js";
+const _hoisted_1 = { style: { "margin": "10px" } };
+const _hoisted_2 = {
+  class: "amb-design-tool",
+  style: { "user-select": "none" }
+};
+const _hoisted_3 = { class: "amb-design-tool-item" };
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("label", null, "添加自定义方法", -1);
+const _hoisted_5 = { style: { "margin-left": "0px", "display": "inline-block", "width": "39px" } };
+const _hoisted_6 = /* @__PURE__ */ createElementVNode("span", {
+  class: "iconfont icon-chexiaozuo",
+  style: { "font-size": "20px" },
+  title: "撤销"
+}, null, -1);
+const _hoisted_7 = [
+  _hoisted_6
+];
+const _hoisted_8 = /* @__PURE__ */ createElementVNode("span", {
+  class: "iconfont icon-chexiaoyou",
+  style: { "font-size": "20px" },
+  title: "恢复"
+}, null, -1);
+const _hoisted_9 = [
+  _hoisted_8
+];
+const _hoisted_10 = {
+  class: "amb-design-tool-item",
+  style: { "padding-right": "10px" }
+};
+const _hoisted_11 = /* @__PURE__ */ createElementVNode("label", null, "确定", -1);
+const _hoisted_12 = /* @__PURE__ */ createElementVNode("label", null, "清除", -1);
+const _hoisted_13 = {
+  class: "codemirror",
+  style: { "margin-left": "20px", "margin-top": "-10px" }
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "page-event-content",
+  props: {
+    eventForm: {},
+    configure: {},
+    customEvent: {},
+    handleType: {}
+  },
+  emits: ["changeSelectEvent", "addEvent", "changeSelectStandardEvent"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const undoRedoStore = undoRedo();
+    const pageDesignUtil = usePageContextStore();
+    const editorRef = ref(null);
+    const winHeight = ref();
+    let containerHeightStyle = ref();
+    const standardEventOptions = standardButtonOperations;
+    let myCustomEvent = props.customEvent;
+    const editEvent = ref({ jsContent: "" });
+    const tempEvent = ref({ jsContent: "" });
+    const snapshotLen = ref(0);
+    const snapshotIndex = ref(-1);
+    onMounted(() => {
+      winHeight.value = window.innerHeight;
+      containerHeightStyle.value = {
+        overflow: "auto",
+        height: winHeight.value + "px"
+      };
+      bindEventBus();
+    });
+    onUnmounted(() => {
+      clearEventBus();
+    });
+    function standardChange() {
+      let isStandard = false;
+      if (tempEvent.value && tempEvent.value.standardValues && tempEvent.value.standardValues.includes("true")) {
+        isStandard = true;
+      }
+      if (tempEvent.value) {
+        tempEvent.value.isStandard = isStandard;
+      }
+    }
+    function addCustomFunc() {
+      const hisStr = editEvent.value ? JSON.stringify(editEvent.value) : null;
+      const newStr = tempEvent.value ? JSON.stringify(tempEvent.value) : null;
+      if (hisStr && hisStr !== newStr) {
+        ElMessageBox.confirm("当前方法有修改,是否需要暂存?", "确认", {
+          confirmButtonText: "确定",
+          cancelButtonText: "忽略",
+          type: "warning"
+        }).then(() => {
+          const res = tempSaveEvent();
+          if (res !== false) {
+            _addCustomFunc();
+          }
+        }).catch((err) => {
+          _addCustomFunc();
+        });
+      } else {
+        _addCustomFunc();
+      }
+    }
+    function _addCustomFunc() {
+      const customFunc = {
+        name: "customFunc",
+        isStandard: false,
+        jsContent: ""
+      };
+      customFunc.uuid = getUuidv4();
+      beginEditEvent(customFunc);
+    }
+    _addCustomFunc();
+    function beginEditEvent(eventObj) {
+      eventObj = eventObj ? eventObj : {};
+      editEvent.value = eventObj;
+      tempEvent.value = deepCopy(eventObj);
+      if (editorRef.value && editorRef.value.updateJsContent) {
+        editorRef.value.updateJsContent(tempEvent.value);
+      }
+      undoRedoStore.clearSnapshot();
+      undoRedoStore.addSnapshot(tempEvent);
+      snapshotLen.value = 1;
+      snapshotIndex.value = 0;
+    }
+    function tempSaveEvent() {
+      if (!tempEvent.value) {
+        ElMessageBox.confirm("编辑对象不存在,不需要保存！", "提示", {
+          confirmButtonText: "确定",
+          showCancelButton: false,
+          type: "error"
+        });
+        return false;
+      }
+      const pageDesign = pageDesignUtil.pageContext;
+      if (!pageDesign) {
+        ElMessageBox.confirm("页面设计对象不存在,不可保存！", "提示", {
+          confirmButtonText: "确定",
+          showCancelButton: false,
+          type: "error"
+        });
+        return false;
+      }
+      const validRes = validateBeforeSave();
+      if (validRes === false) {
+        return false;
+      }
+      if (!pageDesign.customEvents) {
+        pageDesign.customEvents = [];
+      }
+      const tempObj = tempEvent.value;
+      let hisEvent = null;
+      for (let e of pageDesign.customEvents) {
+        if (tempObj.name == "customFunc") {
+          if (e.uuid == tempObj.uuid) {
+            hisEvent = e;
+            break;
+          }
+        } else {
+          if (e.componentUuid == tempObj.componentUuid && e.name == tempObj.name) {
+            hisEvent = e;
+            break;
+          }
+        }
+      }
+      if (hisEvent) {
+        Object.assign(hisEvent, tempObj);
+      } else {
+        Object.assign(editEvent.value, tempObj);
+        pageDesign.customEvents.push(editEvent.value);
+      }
+      editEvent.value = tempObj;
+      tempEvent.value = deepCopy(tempObj);
+      ElMessage({
+        message: "暂存成功!",
+        type: "success"
+      });
+    }
+    function clearFunc() {
+      ElMessageBox.confirm("确定要清除吗?", "确认", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        _clearFunc();
+      });
+    }
+    function _clearFunc() {
+      if (tempEvent.value) {
+        deleteEvent(tempEvent.value);
+      }
+      _addCustomFunc();
+    }
+    function clearEventBus() {
+      console.log("unmounted---------------------");
+      eventBus.$off("clearEvent");
+      eventBus.$off("editEvent");
+    }
+    function bindEventBus() {
+      eventBus.$on("clearEvent", (event) => {
+        deleteEvent(event);
+        if (tempEvent.value) {
+          const tempObj = tempEvent.value;
+          if (event.name == "customFunc") {
+            if (event.uuid == tempObj.uuid) {
+              _addCustomFunc();
+            }
+          } else {
+            if (event.componentUuid == tempObj.componentUuid && event.name == tempObj.name) {
+              _addCustomFunc();
+            }
+          }
+        }
+      });
+      eventBus.$on("editEvent", (event) => {
+        let isSame = false;
+        if (tempEvent.value) {
+          if (event.name == "customFunc") {
+            if (tempEvent.value.uuid == event.uuid) {
+              isSame = true;
+            }
+          } else {
+            if (tempEvent.value.componentUuid == event.componentUuid && event.name == tempEvent.value.name) {
+              isSame = true;
+            }
+          }
+        }
+        if (isSame) {
+          return;
+        }
+        if (event.jsContent == void 0) {
+          event.jsContent = "";
+        }
+        if (event.isStandard == void 0) {
+          event.isStandard = false;
+          event.standardValues = [];
+        }
+        if (event.isStandard && !event.standardValues) {
+          event.standardValues = ["true"];
+        }
+        const hisStr = editEvent.value ? JSON.stringify(editEvent.value) : null;
+        const newStr = tempEvent.value ? JSON.stringify(tempEvent.value) : null;
+        if (hisStr && hisStr !== newStr) {
+          console.log("hisStr", hisStr, newStr);
+          ElMessageBox.confirm("当前方法有修改,是否需要暂存?", "确认", {
+            confirmButtonText: "确定",
+            cancelButtonText: "忽略",
+            type: "warning"
+          }).then(() => {
+            const res = tempSaveEvent();
+            if (res !== false) {
+              beginEditEvent(event);
+            }
+          }).catch((err) => {
+            beginEditEvent(event);
+          });
+        } else {
+          beginEditEvent(event);
+        }
+      });
+    }
+    function deleteEvent(event) {
+      const tempObj = event;
+      const pageDesign = pageDesignUtil.pageContext;
+      console.log("exist", tempObj, pageDesign.customEvents);
+      if (pageDesign && pageDesign.customEvents) {
+        for (let i = 0; i < pageDesign.customEvents.length; i++) {
+          let event2 = pageDesign.customEvents[i];
+          if (tempObj.name == "customFunc") {
+            if (tempObj.uuid == event2.uuid) {
+              pageDesign.customEvents.splice(i, 1);
+              break;
+            }
+          } else {
+            if (event2.name == tempObj.name && tempObj.componentUuid == event2.componentUuid) {
+              event2.eventName = null;
+              event2.isStandard = false;
+              event2.jsContent = "";
+              event2.remark = "";
+              event2.standardValues = [];
+              pageDesign.customEvents.splice(i, 1);
+              break;
+            }
+          }
+        }
+      }
+    }
+    function validateBeforeSave() {
+      const tempObj = tempEvent.value;
+      if (!tempObj.isStandard) {
+        if (!tempObj.jsContent) {
+          ElMessage({
+            message: "方法内容不能为空!",
+            type: "error"
+          });
+          return false;
+        }
+      }
+      if (tempObj.name == "customFunc") {
+        if (tempObj.eventName) {
+          tempObj.eventName = tempObj.eventName.trim();
+        }
+        const funcName = tempObj.eventName;
+        if (!funcName) {
+          ElMessage({
+            message: "方法名不能为空!",
+            type: "error"
+          });
+          return false;
+        }
+        const regex = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/;
+        if (!regex.test(funcName)) {
+          ElMessage({
+            message: "方法名只能以字母、下划线或$开头,只能包含数字、字母或$!",
+            type: "error"
+          });
+          return false;
+        }
+        if (tempObj.funcParam) {
+          tempObj.funcParam = tempObj.funcParam.trim().replace("，", ",");
+        }
+        const funcParam = tempObj.funcParam;
+        if (funcParam) {
+          const regex2 = /^([a-zA-Z_$][a-zA-Z0-9_$]*(?:,[a-zA-Z_$][a-zA-Z0-9_$]*)*)$/;
+          if (!regex2.test(funcParam)) {
+            ElMessage({
+              message: "方法参数只能以字母、下划线或$开头,只能包含数字、字母或$!",
+              type: "error"
+            });
+            return false;
+          }
+        }
+        const pageDesign = pageDesignUtil.pageContext;
+        if (pageDesign && pageDesign.customEvents) {
+          for (let e of pageDesign.customEvents) {
+            if (e.name == "customFunc" && e.eventName == funcName && e.uuid != tempObj.uuid) {
+              ElMessage({
+                message: "存在相同的方法名!",
+                type: "error"
+              });
+              return false;
+            }
+          }
+        }
+      } else {
+        if (tempObj.isStandard && !tempObj.eventName) {
+          ElMessage({
+            message: "未指定标准功能!",
+            type: "error"
+          });
+          return false;
+        }
+      }
+    }
+    let isUndoRedo = false;
+    watch(
+      () => tempEvent,
+      (newVal) => {
+        if (!isUndoRedo) {
+          undoRedoStore.addSnapshot(tempEvent, function() {
+            snapshotLen.value = undoRedoStore.getTotalLen();
+            snapshotIndex.value = undoRedoStore.getCurrentIndex();
+          });
+        }
+      },
+      { deep: true }
+    );
+    function revocation() {
+      isUndoRedo = true;
+      undoRedoStore.undo(tempEvent);
+      snapshotLen.value = undoRedoStore.getTotalLen();
+      snapshotIndex.value = undoRedoStore.getCurrentIndex();
+      if (editorRef.value && editorRef.value.updateJsContent) {
+        editorRef.value.updateJsContent(tempEvent.value);
+      }
+      setTimeout(() => {
+        isUndoRedo = false;
+      }, 100);
+    }
+    function regain() {
+      isUndoRedo = true;
+      undoRedoStore.record(tempEvent);
+      snapshotLen.value = undoRedoStore.getTotalLen();
+      snapshotIndex.value = undoRedoStore.getCurrentIndex();
+      if (editorRef.value && editorRef.value.updateJsContent) {
+        editorRef.value.updateJsContent(tempEvent.value);
+      }
+      setTimeout(() => {
+        isUndoRedo = false;
+      }, 100);
+    }
+    function resize() {
+      if (editorRef.value && editorRef.value.resize) {
+        editorRef.value.resize();
+      }
+    }
+    __expose({ resize });
+    return (_ctx, _cache) => {
+      const _component_Plus = resolveComponent("Plus");
+      const _component_el_icon = resolveComponent("el-icon");
+      const _component_el_divider = resolveComponent("el-divider");
+      const _component_Check = resolveComponent("Check");
+      const _component_View = resolveComponent("View");
+      const _component_el_text = resolveComponent("el-text");
+      const _component_el_input = resolveComponent("el-input");
+      const _component_el_form_item = resolveComponent("el-form-item");
+      const _component_el_checkbox = resolveComponent("el-checkbox");
+      const _component_el_checkbox_group = resolveComponent("el-checkbox-group");
+      const _component_el_option = resolveComponent("el-option");
+      const _component_el_option_group = resolveComponent("el-option-group");
+      const _component_el_select = resolveComponent("el-select");
+      const _component_el_col = resolveComponent("el-col");
+      const _component_el_row = resolveComponent("el-row");
+      const _component_el_form = resolveComponent("el-form");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("label", {
+              class: "amb-page-type",
+              onClick: addCustomFunc
+            }, [
+              createVNode(_component_el_icon, { size: 18 }, {
+                default: withCtx(() => [
+                  createVNode(_component_Plus)
+                ]),
+                _: 1
+              }),
+              _hoisted_4
+            ]),
+            createVNode(_component_el_divider, { direction: "vertical" }),
+            withDirectives(createElementVNode("label", _hoisted_5, null, 512), [
+              [vShow, snapshotIndex.value < 1]
+            ]),
+            withDirectives(createElementVNode("label", {
+              class: "amb-page-type",
+              style: { "margin-left": "0px" },
+              onClick: revocation
+            }, _hoisted_7, 512), [
+              [vShow, snapshotIndex.value > 0]
+            ]),
+            withDirectives(createElementVNode("label", {
+              class: "amb-page-type",
+              onClick: regain
+            }, _hoisted_9, 512), [
+              [vShow, snapshotIndex.value > -1 && snapshotIndex.value + 1 < snapshotLen.value]
+            ])
+          ]),
+          withDirectives(createElementVNode("div", _hoisted_10, [
+            createElementVNode("label", {
+              class: "amb-page-type",
+              onClick: _cache[0] || (_cache[0] = ($event) => tempSaveEvent())
+            }, [
+              createVNode(_component_el_icon, { size: 18 }, {
+                default: withCtx(() => [
+                  createVNode(_component_Check)
+                ]),
+                _: 1
+              }),
+              _hoisted_11
+            ]),
+            createVNode(_component_el_divider, { direction: "vertical" }),
+            createElementVNode("label", {
+              class: "amb-page-type",
+              style: { "margin-left": "0px" },
+              onClick: clearFunc
+            }, [
+              createVNode(_component_el_icon, { size: 18 }, {
+                default: withCtx(() => [
+                  createVNode(_component_View)
+                ]),
+                _: 1
+              }),
+              _hoisted_12
+            ])
+          ], 512), [
+            [vShow, tempEvent.value.name]
+          ])
+        ]),
+        createVNode(_component_el_form, {
+          class: "amb-design-board",
+          style: { "padding-top": "10px" },
+          ref: "form",
+          size: "small",
+          model: unref(myCustomEvent),
+          "inline-message": "",
+          "label-width": "80px"
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_el_row, null, {
+              default: withCtx(() => [
+                createVNode(_component_el_form_item, {
+                  label: "名称",
+                  style: { "min-width": "280px" }
+                }, {
+                  default: withCtx(() => [
+                    withDirectives(createVNode(_component_el_text, { type: "primary" }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(tempEvent.value.title ? tempEvent.value.title + (tempEvent.value.componentLabel ? "(" + tempEvent.value.componentLabel + ")" : "") : tempEvent.value.componentLabel) + "." + toDisplayString(tempEvent.value.name), 1)
+                      ]),
+                      _: 1
+                    }, 512), [
+                      [vShow, tempEvent.value.name && tempEvent.value.name != "customFunc"]
+                    ]),
+                    withDirectives(createVNode(_component_el_input, {
+                      modelValue: tempEvent.value.eventName,
+                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => tempEvent.value.eventName = $event),
+                      title: "自定义方法名"
+                    }, null, 8, ["modelValue"]), [
+                      [vShow, tempEvent.value.name == "customFunc"]
+                    ])
+                  ]),
+                  _: 1
+                }),
+                withDirectives(createVNode(_component_el_checkbox_group, {
+                  modelValue: tempEvent.value.standardValues,
+                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => tempEvent.value.standardValues = $event),
+                  onChange: standardChange
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_checkbox, {
+                      value: "true",
+                      label: "标准功能"
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["modelValue"]), [
+                  [vShow, tempEvent.value.name != "customFunc"]
+                ]),
+                withDirectives(createVNode(_component_el_select, {
+                  disabled: !tempEvent.value.isStandard,
+                  modelValue: tempEvent.value.eventName,
+                  "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => tempEvent.value.eventName = $event),
+                  placeholder: "请选择",
+                  filterable: "",
+                  style: { "width": "240px", "margin-left": "10px" }
+                }, {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(standardEventOptions), (group) => {
+                      return openBlock(), createBlock(_component_el_option_group, {
+                        key: group.label,
+                        label: group.label
+                      }, {
+                        default: withCtx(() => [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(group.options, (item) => {
+                            return openBlock(), createBlock(_component_el_option, {
+                              key: item.value,
+                              label: item.label,
+                              value: item.value
+                            }, null, 8, ["label", "value"]);
+                          }), 128))
+                        ]),
+                        _: 2
+                      }, 1032, ["label"]);
+                    }), 128))
+                  ]),
+                  _: 1
+                }, 8, ["disabled", "modelValue"]), [
+                  [vShow, tempEvent.value.name != "customFunc"]
+                ]),
+                createVNode(_component_el_col, { span: 10 }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_form_item, { label: "描述" }, {
+                      default: withCtx(() => [
+                        createVNode(_component_el_input, {
+                          modelValue: tempEvent.value.remark,
+                          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => tempEvent.value.remark = $event)
+                        }, null, 8, ["modelValue"])
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            withDirectives(createElementVNode("div", _hoisted_13, [
+              createVNode(config, {
+                eventForm: tempEvent.value,
+                ref_key: "editorRef",
+                ref: editorRef
+              }, null, 8, ["eventForm"])
+            ], 512), [
+              [vShow, tempEvent.value.name == "customFunc" || tempEvent.value.name != "customFunc" && !tempEvent.value.isStandard]
+            ])
+          ]),
+          _: 1
+        }, 8, ["model"])
+      ]);
+    };
+  }
+});
 export {
-  pageEventContent as default
+  _sfc_main as default
 };