@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/dist/src/page-designer/setting-panel/Setting.js

@@ -0,0 +1,296 @@
+import '../../../style.css';
+import CodeEditor from "./CodeEditor.js";
+import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementBlock, createElementVNode, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+/* empty css            */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-page-designer-setting-panel",
+  components: {
+    CodeEditor
+  },
+  props: {
+    designer: {
+      type: Object
+    },
+    relationList: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      activeTab: "property",
+      showCodeEditor: false
+    };
+  },
+  computed: {
+    widgetInfo() {
+      if (!this.designer.selectedWidget) return {};
+      const { contentType, type } = this.designer.selectedWidget;
+      const widgetInfo = this.designer.getWidgetByType(contentType, type) || {};
+      return widgetInfo;
+    },
+    widgetId() {
+      if (!this.designer.selectedWidget) return this.designer.page.pageId;
+      return this.designer.selectedWidget.id;
+    },
+    widgetConfig() {
+      const { configs = {}, id } = this.designer.selectedWidget;
+      const widgetConfig = this.designer.widgetConfig[id] || {};
+      const allConfigs = { ...configs, ...widgetConfig };
+      delete allConfigs.componentName;
+      return allConfigs;
+    }
+  },
+  watch: {
+    widgetId() {
+      if (this.$refs.codeEditorPopover) this.$refs.codeEditorPopover.hide();
+    }
+  },
+  methods: {
+    createElement(text) {
+      var isRTL = document.documentElement.getAttribute("dir") === "rtl";
+      var element = document.createElement("textarea");
+      element.style.fontSize = "12pt";
+      element.style.border = "0";
+      element.style.padding = "0";
+      element.style.margin = "0";
+      element.style.position = "absolute";
+      element.style[isRTL ? "right" : "left"] = "-9999px";
+      const yPosition = window.pageYOffset || document.documentElement.scrollTop;
+      element.style.top = `${yPosition}px`;
+      element.setAttribute("readonly", "");
+      element.value = text;
+      document.body.appendChild(element);
+      return element;
+    },
+    copyPageId() {
+      var element = this.createElement(this.designer.page.pageId);
+      element.select();
+      element.setSelectionRange(0, element.value.length);
+      document.execCommand("copy");
+      element.remove();
+      this.$message.success("复制成功");
+    },
+    openComponentHelp() {
+      this.$http.get({
+        entityId: "FM_SERVICE_HELP",
+        id: this.component.HELP,
+        link: "help,help#system,help#client"
+      }).then((data) => {
+        if (!data) {
+          const { "CLIENT|CODE": clientCode, "SYSTEM|CODE": systemCode, CODE } = this.appConfig;
+          window.open(`#/help/${clientCode}/${systemCode}/${CODE}/${this.component.HELP}`);
+        } else {
+          const { ID, "HELP|CLIENT|CODE": clientCode, "HELP|SYSTEM|CODE": systemCode, "HELP|CODE": code } = data.data;
+          window.open(`#/help/${clientCode}/${systemCode}/${code}/${ID}`);
+        }
+      });
+    },
+    updateWidgetConfig(v) {
+      this.designer.updateWidgetConfig(this.designer.selectedWidget.id, v);
+    },
+    splitTemplate() {
+      const { CONTENT } = this.widgetInfo;
+      if (CONTENT) {
+        const config = JSON.parse(CONTENT);
+        const { id } = this.designer.selectedWidget;
+        const { items, itemConfigs, JS: templateJs } = config;
+        const formatConfig = (arr) => {
+          arr.forEach((compItem) => {
+            const oldId = compItem.id;
+            const newId = compItem.contentType + "_" + this.$util.genId();
+            if (itemConfigs[oldId]) {
+              itemConfigs[newId] = itemConfigs[oldId];
+              delete itemConfigs[oldId];
+            }
+            compItem.id = newId;
+            if (compItem.items) {
+              formatConfig(compItem.items);
+            }
+          });
+        };
+        formatConfig(items);
+        const findWidgetPos = (arr, parent) => {
+          for (let i = 0; i < arr.length; i++) {
+            const item = arr[i];
+            if (item.id === id) {
+              return { parent, index: i };
+            } else if (item.items) {
+              const child = findWidgetPos(item.items, item);
+              if (child) return child;
+            }
+          }
+        };
+        const widgetPos = findWidgetPos(this.designer.widgetList, null);
+        if (widgetPos) {
+          const { parent, index } = widgetPos;
+          if (parent) {
+            parent.items.splice(index, 1, ...items);
+          } else {
+            this.designer.widgetList.splice(index, 1, ...items);
+          }
+          this.designer.mergeWidgetConfig(itemConfigs);
+          delete this.designer.widgetConfig[id];
+          if (templateJs) {
+            let { JS = "" } = this.designer.pageConfig;
+            const result = JS.match(/export\sfunction\s(\w+)/g);
+            const events = [];
+            if (result) {
+              result.forEach((item) => {
+                events.push(item.replace(/export\sfunction\s/, ""));
+              });
+            }
+            const templateJsResult = templateJs.split(/export\s+function\s+/);
+            templateJsResult.forEach((item) => {
+              const funtionStr = item.replace(/\/\*(\n|.)+?\*\/[\n\s]+$/, "");
+              if (funtionStr.replace(/[\n\s]+/g, "").length > 0) {
+                const funtionName = funtionStr.split(/\s+\(/)[0];
+                if (![...new Set(events)].includes(funtionName)) {
+                  JS += "export function " + funtionStr.replace(/^\w+/, funtionName);
+                }
+              }
+            });
+            this.designer.updatePageConfig({ JS });
+          }
+          this.designer.setSelected(items[0]);
+        }
+      }
+    }
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "epx-page-designer-setting__widget-title"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "epx-page-designer-setting__widget-title"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_button = resolveComponent("el-button");
+  const _component_code_editor = resolveComponent("code-editor");
+  const _component_el_popover = resolveComponent("el-popover");
+  const _component_epx_page_designer_setting_property = resolveComponent("epx-page-designer-setting-property");
+  const _component_el_tab_pane = resolveComponent("el-tab-pane");
+  const _component_epx_page_designer_setting_style = resolveComponent("epx-page-designer-setting-style");
+  const _component_epx_page_designer_setting_advance = resolveComponent("epx-page-designer-setting-advance");
+  const _component_el_tabs = resolveComponent("el-tabs");
+  const _component_el_container = resolveComponent("el-container");
+  return $props.designer.selectedWidget || $props.designer.mode !== "template" && $props.designer.mode !== "component" ? (openBlock(), createBlock(_component_el_container, {
+    key: 0,
+    class: "epx-page-designer-setting"
+  }, {
+    default: withCtx(() => [
+      createVNode(_component_el_tabs, {
+        class: "epx-page-designer-setting__tabs",
+        modelValue: $data.activeTab,
+        "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => $data.activeTab = $event),
+        stretch: true
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_el_tab_pane, {
+            label: _ctx.$t("property"),
+            name: "property"
+          }, {
+            default: withCtx(() => [
+              !$props.designer.selectedWidget ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                _cache[6] || (_cache[6] = createElementVNode("label", { class: "epx-page-designer-setting__widget-title-label" }, "页面", -1)),
+                createTextVNode(toDisplayString($props.designer.page.title) + " ", 1),
+                createElementVNode("i", {
+                  class: "el-icon-copy-document",
+                  title: "复制ID",
+                  onClick: _cache[0] || (_cache[0] = (...args) => $options.copyPageId && $options.copyPageId(...args))
+                })
+              ])) : (openBlock(), createElementBlock("div", _hoisted_2, [
+                _cache[9] || (_cache[9] = createElementVNode("label", { class: "epx-page-designer-setting__widget-title-label" }, "组件类型", -1)),
+                createTextVNode(toDisplayString($options.widgetInfo.TITLE || $options.widgetInfo.NAME) + " ", 1),
+                $options.widgetInfo.HELP ? (openBlock(), createElementBlock("i", {
+                  key: 0,
+                  class: "epx-page-designer-setting__widget-help epx-icon-question-circle",
+                  title: "点击进入帮助页面",
+                  onClick: _cache[1] || (_cache[1] = (...args) => $options.openComponentHelp && $options.openComponentHelp(...args))
+                })) : createCommentVNode("", true),
+                $props.designer.selectedWidget.type === "template" ? (openBlock(), createElementBlock("span", {
+                  key: 1,
+                  class: "epx-page-designer-setting__widget-split",
+                  onClick: _cache[2] || (_cache[2] = (...args) => $options.splitTemplate && $options.splitTemplate(...args))
+                }, [..._cache[7] || (_cache[7] = [
+                  createElementVNode("i", {
+                    class: "epx-icon-quxiaofenzu",
+                    title: "拆分模板"
+                  }, null, -1),
+                  createElementVNode("span", null, "拆分", -1)
+                ])])) : createCommentVNode("", true),
+                createVNode(_component_el_popover, {
+                  ref: "codeEditorPopover",
+                  placement: "bottom",
+                  width: "400",
+                  trigger: "click",
+                  onBeforeEnter: _cache[3] || (_cache[3] = ($event) => $data.showCodeEditor = true),
+                  onAfterLeave: _cache[4] || (_cache[4] = ($event) => $data.showCodeEditor = false)
+                }, {
+                  reference: withCtx(() => [
+                    createVNode(_component_el_button, {
+                      class: "epx-page-designer-setting__widget-code",
+                      round: "",
+                      size: "small"
+                    }, {
+                      default: withCtx(() => [..._cache[8] || (_cache[8] = [
+                        createElementVNode("i", { class: "epx-icon-code" }, null, -1)
+                      ])]),
+                      _: 1
+                    })
+                  ]),
+                  default: withCtx(() => [
+                    $data.showCodeEditor ? (openBlock(), createBlock(_component_code_editor, {
+                      key: 0,
+                      value: $options.widgetConfig,
+                      onChange: $options.updateWidgetConfig
+                    }, null, 8, ["value", "onChange"])) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                }, 512)
+              ])),
+              (openBlock(), createBlock(_component_epx_page_designer_setting_property, {
+                key: $options.widgetId,
+                designer: $props.designer,
+                relationList: $props.relationList
+              }, null, 8, ["designer", "relationList"]))
+            ]),
+            _: 1
+          }, 8, ["label"]),
+          createVNode(_component_el_tab_pane, {
+            label: _ctx.$t("style"),
+            name: "style",
+            lazy: ""
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_epx_page_designer_setting_style, { designer: $props.designer }, null, 8, ["designer"])
+            ]),
+            _: 1
+          }, 8, ["label"]),
+          $props.designer.selectedWidget ? (openBlock(), createBlock(_component_el_tab_pane, {
+            key: 0,
+            label: "高级",
+            name: "advance",
+            lazy: ""
+          }, {
+            default: withCtx(() => [
+              (openBlock(), createBlock(_component_epx_page_designer_setting_advance, {
+                key: $options.widgetId,
+                designer: $props.designer
+              }, null, 8, ["designer"]))
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["modelValue"])
+    ]),
+    _: 1
+  })) : createCommentVNode("", true);
+}
+const SettingPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  SettingPanel as default
+};