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

package/dist/src/DesignItem.js

@@ -0,0 +1,64 @@
+import '../style.css';
+import { openBlock, createElementBlock, withModifiers, normalizeClass, createElementVNode, renderSlot, Fragment, renderList, createCommentVNode } from "vue";
+/* empty css               */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const HANDLES = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
+const _sfc_main = {
+  name: "epx-dashboard-design-item",
+  props: {
+    item: { type: Object, required: true },
+    active: Boolean,
+    // 是否显示悬浮切换图标：整页悬浮（grid.mode === 'float'）与移动端布局不显示
+    floatable: { type: Boolean, default: true }
+  },
+  emits: ["select"],
+  data() {
+    return { handles: HANDLES };
+  },
+  methods: {
+    // 悬浮 ↔ 默认：字段直接落到 item 上（与 DesignGrid.setFloat / 属性面板 changeItemConfigs 'component' 同一路径），
+    // 画布按 item.float 把壳搬到悬浮层 / 碰撞层，外壳 deep watch 自动保存；关掉时层级 z 一并删掉、不留脏值。
+    // 点击会冒泡到根元素的 select，所以切换的同时该项也被选中
+    toggleFloat() {
+      const item = this.item;
+      if (item.float) {
+        delete item.float;
+        delete item.z;
+      } else {
+        item.float = true;
+      }
+    }
+  }
+};
+const _hoisted_1 = { class: "epx-dashboard-design-item__body" };
+const _hoisted_2 = { class: "epx-dashboard-design-item__operates" };
+const _hoisted_3 = ["title"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["epx-dashboard-design-item", { "epx-dashboard-design-item--active": $props.active }]),
+    onClick: _cache[1] || (_cache[1] = withModifiers(($event) => _ctx.$emit("select", $props.item), ["stop"]))
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    (openBlock(true), createElementBlock(Fragment, null, renderList($data.handles, (dir) => {
+      return openBlock(), createElementBlock("i", {
+        key: dir,
+        class: normalizeClass(["epx-dashboard-design-item__handle", "epx-dashboard-design-item__handle--" + dir])
+      }, null, 2);
+    }), 128)),
+    createElementVNode("div", _hoisted_2, [
+      $props.floatable ? (openBlock(), createElementBlock("i", {
+        key: 0,
+        class: normalizeClass(["epx-dashboard-design-item__float", "el-icon-top", { "is-on": !!$props.item.float }]),
+        title: $props.item.float ? "悬浮中，点击恢复默认" : "设为悬浮（可叠放、不推挤）",
+        onClick: _cache[0] || (_cache[0] = (...args) => $options.toggleFloat && $options.toggleFloat(...args))
+      }, null, 10, _hoisted_3)) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "operates")
+    ])
+  ], 2);
+}
+const DesignItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DesignItem as default
+};

package/dist/src/Div.js

@@ -0,0 +1,409 @@
+import '../style.css';
+import { __vitePreload as __epxPackagePreload } from "../_virtual/preload-helper.js";
+import { defineAsyncComponent, resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, Fragment, createCommentVNode, toDisplayString, createBlock, withCtx, resolveDynamicComponent, createVNode, createTextVNode } from "vue";
+import { normalizeGridItem } from "./layout-util.js";
+import DashboardGrid from "./DashboardGrid.js";
+import { containerGridMixin } from "./grid/mixins.js";
+/* empty css        */
+/* empty css         */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-dashboard-div",
+  // 运行态网格参数 / 门控策略 / 嵌套容器网格透传（compGrid prop、gridParams / loadWay / childGrid）来自 containerGridMixin
+  mixins: [containerGridMixin],
+  components: {
+    [DashboardGrid.name]: DashboardGrid,
+    // 设计态画布（gridstack 封装）与项 chrome 按需加载，运行态不拉 gridstack
+    "epx-dashboard-design-grid": defineAsyncComponent(() => __epxPackagePreload(() => import("./DesignGrid.js"), true ? [] : void 0, import.meta.url)),
+    "epx-dashboard-design-item": defineAsyncComponent(() => __epxPackagePreload(() => import("./DesignItem.js"), true ? [] : void 0, import.meta.url))
+  },
+  inject: {
+    // 父网格 api（页面级画布或上级容器的 DesignGrid 提供）：本容器的子网格挂到它下面；独立挂载时为空，子网格退化为独立网格
+    epxDashboardDesignGrid: { default: null },
+    // 设计态共享选中态（页面级画布提供）：容器内与页面级只有一个选中项
+    epxDashboardDesign: { default: null }
+  },
+  props: {
+    theme: String,
+    compId: String,
+    compStyle: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    compItem: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    compConfigs: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    items: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    itemConfigs: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    mode: String,
+    allComponentList: Array,
+    chartCache: Boolean,
+    dashboardId: String
+  },
+  data() {
+    return {
+      reloadComponent: {},
+      isDragElement: false,
+      // 设计态内容区可视高度（壳内容盒高 − 标题栏高），传给子网格做 min-height
+      designMinHeight: 0
+    };
+  },
+  computed: {
+    compTheme() {
+      return this.$configs.theme || this.theme;
+    },
+    getCompConfigs() {
+      return (component) => {
+        const { configs = {}, id, title, contentType, ...otherConfigs } = component;
+        const compId = this.getDashboardLegacy() && this.dashboardId ? this.dashboardId + "-" + id : id;
+        const itemConfig = this.itemConfigs[compId] || {};
+        const _configs = { ...otherConfigs, ...configs, ...itemConfig };
+        if (title) {
+          _configs.componentName = title;
+        }
+        return _configs;
+      };
+    },
+    $configs() {
+      const itemConfig = this.itemConfigs[this.compId] || {};
+      const _configs = { ...this.compConfigs, ...itemConfig };
+      return _configs;
+    },
+    style() {
+      const style = { ...this.compStyle };
+      if (style.backgroundImage) {
+        style.backgroundImage = style.backgroundImage.replace(/url\s*\(([\w+-/.\s]+)\)/g, (str, $1) => {
+          return `url(${this.$util.getFileUrl($1)})`;
+        });
+      }
+      return style;
+    },
+    showTitle() {
+      const { showTitle } = this.$configs;
+      return showTitle;
+    },
+    title() {
+      const { title = "" } = this.$configs;
+      return title;
+    },
+    titleStyle() {
+      const { align, backgroundStyle, backgroundColor, backgroundImage } = this.titleFontStyle || {};
+      const style = {};
+      if (align) {
+        style.justifyContent = align;
+      }
+      if (backgroundStyle === "image") {
+        style.backgroundImage = `url(${this.$util.getFileUrl(backgroundImage)})`;
+      } else if (backgroundColor) {
+        style.backgroundColor = backgroundColor;
+      }
+      return style;
+    },
+    titleText() {
+      return this.$configs.title;
+    },
+    design() {
+      return this.epxDashboardDesign;
+    },
+    activeComponent() {
+      return this.design ? this.design.state.activeItem : null;
+    }
+  },
+  watch: {
+    items: {
+      handler(v = []) {
+        for (const item of v) {
+          if (!item) continue;
+          normalizeGridItem(item);
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    addGridItem(v) {
+      this.$emit("changeItems", [...this.items, v]);
+    },
+    // 库改了子项坐标（拖拽 / 缩放 / 推挤 / 首次对账）：画布已就地写回，只需通知上层保存
+    onDesignChange() {
+      this.$emit("changeItems", [...this.items]);
+    },
+    // 跨网格搬出（子项被拖到页面或别的容器）：源侧必须同步移出，否则子网格下一次同步会把壳重新加回来
+    onTransferOut(item) {
+      this.$emit("changeItems", this.items.filter((i) => i.id !== item.id));
+    },
+    // 跨网格搬入：画布已按本网格换算过 w/h
+    onTransferIn(item) {
+      this.$emit("changeItems", [...this.items, item]);
+    },
+    // 嵌套容器的子项变化：替换该容器项对象后上报（与页面级画布 changeSubItems 同手法）
+    changeSubItems(item, v) {
+      const index = this.items.findIndex((i) => i.id === item.id);
+      if (index === -1) return;
+      const items = [...this.items];
+      items.splice(index, 1, { ...items[index], items: v });
+      this.$emit("changeItems", items);
+    },
+    openConfigPanel(component) {
+      if (this.design) this.design.select(component, this.compId);
+    },
+    // 设计态内容区可视高度：壳内容盒高 − 标题栏高（内容区是 flex 撑满的一层，量它即可；无标题时等于壳内容盒高）
+    measureDesignHeight() {
+      if (this.$refs.designBody) this.designMinHeight = this.$refs.designBody.clientHeight;
+    },
+    designReport(component) {
+      const configs = this.getCompConfigs(component, component.id);
+      this.goPage({
+        component: "report-design",
+        params: {
+          id: configs.id,
+          callback: () => {
+            this.reloadComponent[component.id] = true;
+            this.$nextTick(() => {
+              this.reloadComponent[component.id] = false;
+            });
+          }
+        }
+      });
+    },
+    editComponent(activeComponent) {
+      const componentInfo = this.allComponentList.find((item) => item.CODE === activeComponent.contentType) || { CODE: activeComponent.contentType };
+      const configs = this.getCompConfigs(activeComponent, activeComponent.id);
+      this.$emit("open-config", activeComponent.id, componentInfo, configs);
+    },
+    deleteComponent(component, command) {
+      const activeComponent = component || this.activeComponent;
+      const index = this.items.findIndex((item) => item.id === activeComponent.id);
+      if (activeComponent.contentType === "report-chat" && command === "all") {
+        const configs = this.getCompConfigs(activeComponent, activeComponent.id);
+        this.$http.removeMulti({
+          entityId: "FM_REPORT_BASE",
+          ids: configs.id
+        });
+      }
+      if (index !== -1) {
+        const items = [...this.items];
+        items.splice(index, 1);
+        this.$emit("changeItems", items);
+        if (this.design && this.design.isActive(activeComponent)) this.design.clear();
+      }
+    }
+  },
+  mounted() {
+    if (this.mode !== "design") return;
+    this.measureDesignHeight();
+    if (typeof ResizeObserver !== "undefined" && this.$refs.designBody) {
+      this.designResizeObserver = new ResizeObserver(() => this.measureDesignHeight());
+      this.designResizeObserver.observe(this.$refs.designBody);
+    }
+  },
+  beforeUnmount() {
+    if (this.designResizeObserver) this.designResizeObserver.disconnect();
+  }
+};
+const _hoisted_1 = {
+  key: 1,
+  class: "epx-chart__header-icon"
+};
+const _hoisted_2 = { class: "drag-component" };
+const _hoisted_3 = {
+  key: 2,
+  ref: "designBody",
+  class: "epx-dashboard-div__design-body"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "drag-component"
+};
+const _hoisted_5 = { key: 1 };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = ["onClick"];
+const _hoisted_8 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_epx_dashboard_grid = resolveComponent("epx-dashboard-grid");
+  const _component_epx_component = resolveComponent("epx-component");
+  const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
+  const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
+  const _component_el_dropdown = resolveComponent("el-dropdown");
+  const _component_epx_dashboard_design_item = resolveComponent("epx-dashboard-design-item");
+  const _component_epx_dashboard_design_grid = resolveComponent("epx-dashboard-design-grid");
+  return openBlock(), createElementBlock("div", {
+    ref: "container",
+    class: normalizeClass(["container", "epx-dashboard-div", `epx-dashboard-div--${$options.compTheme}`, { "drag-element": $data.isDragElement }, { "is-design": $props.mode === "design" }]),
+    style: normalizeStyle($options.style)
+  }, [
+    $options.showTitle && $options.titleText ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: normalizeClass(["epx-chart__header", { "epx-chart__header--no-icon": $options.$configs.iconFlag === false }]),
+      style: normalizeStyle($options.titleStyle)
+    }, [
+      createElementVNode("div", {
+        class: "epx-chart__header-left",
+        style: normalizeStyle({ color: $options.$configs.iconColor })
+      }, [
+        $options.$configs.iconFlag !== false ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          $options.$configs.icon ? (openBlock(), createElementBlock("i", {
+            key: 0,
+            style: normalizeStyle($options.$configs.textStyle),
+            class: normalizeClass(["epx-chart__header-icon--icon", $options.$configs.icon || "epx-icon-kapianmorentubiao"])
+          }, null, 6)) : (openBlock(), createElementBlock("span", _hoisted_1))
+        ], 64)) : createCommentVNode("", true),
+        createElementVNode("span", {
+          class: "epx-chart__title",
+          style: normalizeStyle($options.$configs.textStyle)
+        }, toDisplayString($options.titleText), 5)
+      ], 4)
+    ], 6)) : createCommentVNode("", true),
+    $props.mode !== "design" ? (openBlock(), createBlock(_component_epx_dashboard_grid, {
+      key: 1,
+      class: "epx-dashboard-div__grid",
+      items: _ctx.mobileItems($props.items),
+      grid: _ctx.gridParams,
+      "load-way": _ctx.loadWay,
+      "body-height": _ctx.bodyHeight,
+      "scroll-root-selector": ".epx-dashboard__container, .dashboard-container"
+    }, {
+      item: withCtx(({ item }) => [
+        createElementVNode("div", _hoisted_2, [
+          (openBlock(), createBlock(resolveDynamicComponent("epx-" + item.contentType), {
+            ref: `component_${item.i}`,
+            class: "epx-dashboard__component",
+            "is-dashboard": "",
+            key: item.id,
+            "comp-id": item.id,
+            "comp-title": item.title,
+            "comp-style": item.style,
+            "comp-configs": $options.getCompConfigs(item, item.id),
+            "comp-grid": _ctx.childGrid(item),
+            "chart-cache": $props.chartCache,
+            "mobile-appearance": _ctx.mobileStacked ? item.mobileAppearance : void 0,
+            items: item.items,
+            "item-configs": $props.itemConfigs,
+            theme: $props.theme
+          }, null, 8, ["comp-id", "comp-title", "comp-style", "comp-configs", "comp-grid", "chart-cache", "mobile-appearance", "items", "item-configs", "theme"]))
+        ])
+      ]),
+      _: 1
+    }, 8, ["items", "grid", "load-way", "body-height"])) : (openBlock(), createElementBlock("div", _hoisted_3, [
+      createVNode(_component_epx_dashboard_design_grid, {
+        class: "epx-dashboard-div__design-grid",
+        "sub-grid-of": $options.epxDashboardDesignGrid,
+        items: $props.items,
+        grid: _ctx.gridParams,
+        "body-height": _ctx.bodyHeight,
+        "min-height": $data.designMinHeight,
+        onChange: $options.onDesignChange,
+        onTransferOut: $options.onTransferOut,
+        onTransferIn: $options.onTransferIn
+      }, {
+        item: withCtx(({ item }) => [
+          createVNode(_component_epx_dashboard_design_item, {
+            item,
+            active: !!$options.design && $options.design.isActive(item),
+            floatable: _ctx.gridParams.mode !== "float",
+            onSelect: $options.openConfigPanel
+          }, {
+            operates: withCtx(() => [
+              item.contentType === "report-chart" ? (openBlock(), createElementBlock("i", {
+                key: 0,
+                class: "component-operate__item el-icon-edit-outline",
+                onClick: ($event) => $options.designReport(item)
+              }, null, 8, _hoisted_6)) : createCommentVNode("", true),
+              createElementVNode("i", {
+                class: "component-operate__item el-icon-setting",
+                onClick: ($event) => $options.editComponent(item)
+              }, null, 8, _hoisted_7),
+              item.contentType === "report-chart" ? (openBlock(), createBlock(_component_el_dropdown, {
+                key: 1,
+                class: "componnet-dropdown",
+                onCommand: (v) => $options.deleteComponent(item, v)
+              }, {
+                dropdown: withCtx(() => [
+                  createVNode(_component_el_dropdown_menu, null, {
+                    default: withCtx(() => [
+                      createVNode(_component_el_dropdown_item, { command: "only" }, {
+                        default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                          createTextVNode("仅从仪表盘中删除", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      createVNode(_component_el_dropdown_item, { command: "all" }, {
+                        default: withCtx(() => [..._cache[2] || (_cache[2] = [
+                          createTextVNode("从仪表盘和报表库中删除", -1)
+                        ])]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                default: withCtx(() => [
+                  _cache[3] || (_cache[3] = createElementVNode("i", { class: "component-operate__item el-icon-delete" }, null, -1))
+                ]),
+                _: 1
+              }, 8, ["onCommand"])) : (openBlock(), createElementBlock("i", {
+                key: 2,
+                class: "component-operate__item el-icon-delete",
+                onClick: ($event) => $options.deleteComponent(item)
+              }, null, 8, _hoisted_8))
+            ]),
+            default: withCtx(() => [
+              item.contentType && !$data.reloadComponent[item.id] ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                (openBlock(), createBlock(_component_epx_component, {
+                  name: item.contentType,
+                  ref: `component_${item.i}`,
+                  class: "epx-dashboard__component",
+                  "is-dashboard": "",
+                  key: item.id,
+                  "comp-id": item.id,
+                  "comp-title": item.title,
+                  "comp-style": item.style,
+                  "comp-configs": $options.getCompConfigs(item, item.id),
+                  "comp-grid": _ctx.childGrid(item),
+                  "comp-item": item,
+                  items: item.items,
+                  "item-configs": $props.itemConfigs,
+                  "dashboard-id": $props.dashboardId,
+                  "all-component-list": $props.allComponentList,
+                  theme: $options.compTheme,
+                  mode: "design",
+                  "mobile-appearance": _ctx.mobileStacked ? item.mobileAppearance : void 0,
+                  onChangeItems: (v) => $options.changeSubItems(item, v),
+                  onOpenConfig: _cache[0] || (_cache[0] = (...args) => _ctx.$emit("open-config", ...args))
+                }, null, 8, ["name", "comp-id", "comp-title", "comp-style", "comp-configs", "comp-grid", "comp-item", "items", "item-configs", "dashboard-id", "all-component-list", "theme", "mobile-appearance", "onChangeItems"]))
+              ])) : (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(item.i), 1))
+            ]),
+            _: 2
+          }, 1032, ["item", "active", "floatable", "onSelect"])
+        ]),
+        _: 1
+      }, 8, ["sub-grid-of", "items", "grid", "body-height", "min-height", "onChange", "onTransferOut", "onTransferIn"])
+    ], 512))
+  ], 6);
+}
+const DashboardDiv = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-668cf4f9"]]);
+export {
+  DashboardDiv as default
+};