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

package/dist/src/visual/config-page/ConfigPanel.js

@@ -0,0 +1,301 @@
+import { walkItems } from "@epxing/dashboard/src/grid/model";
+import StyleConfig from "./StyleConfig.js";
+import { resolveComponent, openBlock, createElementBlock, createBlock, withCtx, createVNode, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, mergeProps, normalizeClass, withDirectives, Fragment, renderList, vShow } from "vue";
+/* empty css                */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const LAYOUT_KEYS = ["float", "z", "static", "minW", "minH", "maxW", "maxH"];
+const _sfc_main = {
+  name: "epx-visual-config-panel",
+  components: {
+    "epx-component-style-config": StyleConfig
+  },
+  // gridLayout：看板设计器传 true，「样式」tab 顶部显示网格项的「布局」分组（页面设计器不传）
+  props: ["upCompId", "component", "itemConfigs", "metaId", "globalConfigs", "relationList", "gridLayout"],
+  inject: {
+    changeItemConfigs: "changeItemConfigs",
+    pageId: "pageId",
+    // 看板设计器 provide：取当前 items 树（含容器子项），「布局」分组按 id 找到真实 item 读初值
+    getComponentItems: { default: null }
+  },
+  data() {
+    return {
+      load: true,
+      activeTab: "attribute",
+      layoutUnfold: true,
+      sizeFields: [
+        { key: "minW", label: "最小宽度" },
+        { key: "minH", label: "最小高度" },
+        { key: "maxW", label: "最大宽度" },
+        { key: "maxH", label: "最大高度" }
+      ]
+    };
+  },
+  computed: {
+    componentConfigs() {
+      if (this.component.type === "page") return this.component.config || {};
+      const { configs = {}, id, contentType, ...otherConfigs } = this.component.config || {};
+      let _configs = {};
+      for (const key in otherConfigs) {
+        if (/^title(.i18n)?$/.test(key)) {
+          _configs[key.replace(/^title(.i18n)?$/, "componentName$1")] = otherConfigs[key];
+        } else {
+          _configs[key] = otherConfigs[key];
+        }
+      }
+      const compId = this.upCompId ? this.upCompId + "-" + id : this.component.id;
+      const itemConfig = this.itemConfigs[compId] || {};
+      _configs = { ..._configs, ...configs, ...itemConfig };
+      if (this.gridLayout) for (const key of LAYOUT_KEYS) delete _configs[key];
+      return _configs;
+    },
+    upCompConfigs() {
+      const compId = this.upCompId ? this.upCompId + "-" + this.component.upId : this.component.upId;
+      const itemConfig = this.itemConfigs[compId] || {};
+      return { ...itemConfig };
+    },
+    // 「布局」分组的显示值：直读当前选中的真实 item（写回落到 item 上后自动刷新，不持有本地副本）
+    layout() {
+      const item = this.findItem();
+      const layout = { float: !!item.float, static: !!item.static };
+      for (const key of ["z", "minW", "minH", "maxW", "maxH"]) layout[key] = item[key] == null ? void 0 : Number(item[key]);
+      return layout;
+    }
+  },
+  watch: {
+    component(v) {
+      if (!v) {
+        const { visualConfigPath } = this.currentPage;
+        if (visualConfigPath) {
+          const name = this.getVisualComponent({ VISUAL_CONFIG_PATH: visualConfigPath });
+          if (name) this.pagePath = name;
+        }
+      }
+    },
+    "component.id"(v) {
+      this.load = false;
+      this.$nextTick(() => {
+        this.load = true;
+      });
+    },
+    // 外壳每次打开（clickComponent）都换一个 openSeq：按 openTab 定位 tab（chart 项的「布局」按钮要落到「样式」tab，R29）；
+    // 配置改动时外壳也会换 component 对象但 openSeq 不变，不动 tab
+    "component.openSeq"() {
+      this.applyOpenTab();
+    }
+  },
+  created() {
+    this.applyOpenTab();
+  },
+  methods: {
+    // 当前选中的真实 item（容器内子项也按 id 深度找）；没有 items getter 时退回 component.config（打开面板时铺开的项字段快照）
+    findItem() {
+      const id = this.component && this.component.id;
+      let found = null;
+      if (this.getComponentItems && id != null) walkItems(this.getComponentItems(), (item) => {
+        if (!found && item.id === id) found = item;
+      });
+      return found || this.component && this.component.config || {};
+    },
+    applyOpenTab() {
+      if (this.component && this.component.openSeq != null) this.activeTab = this.component.openTab || "attribute";
+    },
+    // 写回项本身：changeItemConfigs 的 type='component' 把键当组件属性直接落到 item 上（容器内子项按 id 递归找到），
+    // null 会删掉该键（数字框清空 / 关掉锁定时不留脏值）；外壳的 selectComponentList deep watch 据此自动保存，画布按 item 字段同步引擎
+    setLayout(key, v) {
+      const value = v === void 0 || v === null || v === "" ? null : v;
+      const patch = { [key]: value };
+      if (key === "static" && !value) patch.static = null;
+      this.changeItemConfigs(this.component.id, patch, "component");
+    },
+    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}`);
+        }
+      });
+    },
+    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.pageId);
+      element.select();
+      element.setSelectionRange(0, element.value.length);
+      document.execCommand("copy");
+      element.remove();
+      this.$message.success("复制成功");
+    }
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "config-container"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "componet-title page-title"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "componet-title"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "layout-config"
+};
+const _hoisted_5 = { class: "layout-config__header" };
+const _hoisted_6 = { class: "layout-config__content" };
+const _hoisted_7 = {
+  key: 0,
+  class: "layout-config__item"
+};
+const _hoisted_8 = { class: "layout-config__item" };
+const _hoisted_9 = { class: "layout-config__label" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_epx_component = resolveComponent("epx-component");
+  const _component_el_tab_pane = resolveComponent("el-tab-pane");
+  const _component_el_input_number = resolveComponent("el-input-number");
+  const _component_el_switch = resolveComponent("el-switch");
+  const _component_epx_component_style_config = resolveComponent("epx-component-style-config");
+  const _component_el_tabs = resolveComponent("el-tabs");
+  return $data.load ? (openBlock(), createElementBlock("div", _hoisted_1, [
+    (openBlock(), createBlock(_component_el_tabs, {
+      modelValue: $data.activeTab,
+      "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => $data.activeTab = $event),
+      class: "tabs",
+      stretch: true,
+      key: $props.component.id
+    }, {
+      default: withCtx(() => [
+        createVNode(_component_el_tab_pane, {
+          label: _ctx.$t("property"),
+          name: "attribute"
+        }, {
+          default: withCtx(() => [
+            $props.component.type === "page" ? (openBlock(), createElementBlock("div", _hoisted_2, [
+              _cache[7] || (_cache[7] = createElementVNode("label", { class: "component-title__label" }, "页面", -1)),
+              createTextVNode(toDisplayString($props.component.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_3, [
+              _cache[8] || (_cache[8] = createElementVNode("label", { class: "component-title__label" }, "组件类型", -1)),
+              createTextVNode(toDisplayString($props.component.TITLE) + " ", 1),
+              $props.component.HELP ? (openBlock(), createElementBlock("i", {
+                key: 0,
+                class: "component-help epx-icon-question-circle",
+                title: "点击进入帮助页面",
+                onClick: _cache[1] || (_cache[1] = (...args) => $options.openComponentHelp && $options.openComponentHelp(...args))
+              })) : createCommentVNode("", true)
+            ])),
+            (openBlock(), createBlock(_component_epx_component, mergeProps(_ctx.$forwardAttrs(_ctx.$attrs), {
+              key: $props.component.id,
+              id: $props.component.id,
+              metaId: $props.metaId,
+              upMetaId: $options.upCompConfigs.metaId,
+              upMetaViewId: $options.upCompConfigs.metaViewId,
+              ref: "component",
+              name: $props.component.visualComponentName || "visual-component",
+              "comp-config": $options.componentConfigs,
+              globalConfigs: $props.globalConfigs,
+              pageRelationList: $props.relationList,
+              "component-info": $props.component
+            }), null, 16, ["id", "metaId", "upMetaId", "upMetaViewId", "name", "comp-config", "globalConfigs", "pageRelationList", "component-info"]))
+          ]),
+          _: 1
+        }, 8, ["label"]),
+        (openBlock(), createBlock(_component_el_tab_pane, {
+          label: _ctx.$t("style"),
+          name: "style",
+          key: $props.component.id
+        }, {
+          default: withCtx(() => [
+            $props.gridLayout && $props.component.type !== "page" ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              createElementVNode("div", _hoisted_5, [
+                createElementVNode("i", {
+                  class: normalizeClass(["fold-icon", "el-icon-caret-right", { "is-unfold": $data.layoutUnfold }]),
+                  onClick: _cache[2] || (_cache[2] = ($event) => $data.layoutUnfold = !$data.layoutUnfold)
+                }, null, 2),
+                _cache[9] || (_cache[9] = createElementVNode("label", { class: "layout-config__label" }, "布局", -1))
+              ]),
+              withDirectives(createElementVNode("div", _hoisted_6, [
+                $options.layout.float ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                  _cache[10] || (_cache[10] = createElementVNode("label", { class: "layout-config__label" }, "层级", -1)),
+                  createVNode(_component_el_input_number, {
+                    size: "small",
+                    "model-value": $options.layout.z,
+                    min: 0,
+                    step: 1,
+                    "step-strictly": "",
+                    "controls-position": "right",
+                    onChange: _cache[3] || (_cache[3] = (v) => $options.setLayout("z", v))
+                  }, null, 8, ["model-value"])
+                ])) : createCommentVNode("", true),
+                createElementVNode("div", _hoisted_8, [
+                  _cache[11] || (_cache[11] = createElementVNode("label", { class: "layout-config__label" }, "锁定位置", -1)),
+                  createVNode(_component_el_switch, {
+                    "model-value": !!$options.layout.static,
+                    "onUpdate:modelValue": _cache[4] || (_cache[4] = (v) => $options.setLayout("static", v))
+                  }, null, 8, ["model-value"])
+                ]),
+                (openBlock(true), createElementBlock(Fragment, null, renderList($data.sizeFields, (field) => {
+                  return openBlock(), createElementBlock("div", {
+                    class: "layout-config__item",
+                    key: field.key
+                  }, [
+                    createElementVNode("label", _hoisted_9, toDisplayString(field.label), 1),
+                    createVNode(_component_el_input_number, {
+                      size: "small",
+                      "model-value": $options.layout[field.key],
+                      min: 1,
+                      step: 1,
+                      "step-strictly": "",
+                      "controls-position": "right",
+                      onChange: (v) => $options.setLayout(field.key, v)
+                    }, null, 8, ["model-value", "onChange"])
+                  ]);
+                }), 128))
+              ], 512), [
+                [vShow, $data.layoutUnfold]
+              ])
+            ])) : createCommentVNode("", true),
+            (openBlock(), createBlock(_component_epx_component_style_config, {
+              key: "style-" + $props.component.id,
+              value: $props.component.config && $props.component.config.style || {},
+              onChange: _cache[5] || (_cache[5] = (v) => $options.changeItemConfigs($props.component.id, { style: v }))
+            }, null, 8, ["value"]))
+          ]),
+          _: 1
+        }, 8, ["label"]))
+      ]),
+      _: 1
+    }, 8, ["modelValue"]))
+  ])) : createCommentVNode("", true);
+}
+const ConfigPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-62dd97f0"]]);
+export {
+  ConfigPanel as default
+};