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

package/dist/src/visual/ConfigItem.js

@@ -0,0 +1,8 @@
+import '../../style.css';
+import _sfc_main from "./ConfigItem.vue.js";
+/* empty css                */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const ConfigItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7da8ba85"]]);
+export {
+  ConfigItem as default
+};

package/dist/src/visual/ConfigItem.vue.js

@@ -0,0 +1,192 @@
+import { createVNode, createTextVNode, resolveComponent, mergeProps } from "vue";
+import { mapGetters } from "vuex";
+const _sfc_main = {
+  name: "epx-visual-config-item",
+  props: {
+    upId: String,
+    upTitle: String,
+    metaId: String,
+    allComponentList: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    componentList: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    globalConfigs: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      fold: {},
+      pagePath: "visual-base-page"
+    };
+  },
+  inject: {
+    pageId: {
+      type: String
+    },
+    getItemConfigs: {
+      type: Function
+    },
+    getVisualComponent: {
+      type: Function
+    }
+  },
+  computed: {
+    ...mapGetters(["getPageById"]),
+    currentPage() {
+      const page = this.getPageById(this.pageId);
+      return page;
+    },
+    itemConfigs() {
+      return this.getItemConfigs();
+    },
+    getComponentConfigs() {
+      return (component, componentId) => {
+        const {
+          configs = {},
+          id,
+          title,
+          "title.i18n": titleI18n,
+          contentType,
+          ...otherConfigs
+        } = component;
+        const itemConfig = this.itemConfigs[componentId] || {};
+        const _configs = {
+          ...configs,
+          ...itemConfig,
+          ...otherConfigs
+        };
+        if (title) {
+          _configs.componentName = title;
+        }
+        if (titleI18n) {
+          _configs["componentName.i18n"] = titleI18n;
+        }
+        return _configs;
+      };
+    },
+    getComponentInfo() {
+      return (component) => {
+        const componentInfo = this.allComponentList.find((item) => (item.componentName || item.CODE) === component.contentType) || {};
+        return {
+          ...componentInfo
+        };
+      };
+    }
+  },
+  methods: {
+    /**
+     * @param { Array } componentList 组件列表
+     * @param { String } upId 上级组件id
+     * @param { Object } upComponentInfo 上级组件信息 { id, title, contentType }
+     */
+    renderConfigList(componentList = [], {
+      id,
+      title,
+      contentType
+    } = {}) {
+      if (!componentList) return;
+      return componentList.map((component = {}) => this.renderItem(component, {
+        id,
+        title,
+        contentType
+      }));
+    },
+    renderItem(component, {
+      id,
+      title,
+      contentType
+    }) {
+      const componentId = id ? id + "-" + component.id : component.id;
+      const compConfigs = this.getComponentConfigs(component, componentId);
+      const componentInfo = this.getComponentInfo(component);
+      const componentTitle = title ? title + " - " + component.title : component.title;
+      return createVNode("div", {
+        "ref": "config-" + componentId,
+        "key": componentId,
+        "class": ["component-config__item", {
+          fold: this.fold[componentId]
+        }]
+      }, [createVNode("p", {
+        "class": "component-config__item--title"
+      }, [createVNode("span", {
+        "class": "component-config__item--border"
+      }, [componentTitle]), createVNode("i", {
+        "class": ["el-icon-caret-top"],
+        "onClick": () => this.fold[componentId] = !this.fold[componentId]
+      }, null)]), createVNode("div", {
+        "class": "component-config__item--content"
+      }, [createVNode("div", {
+        "class": "componet-title"
+      }, [createVNode("label", {
+        "class": "component-title__label"
+      }, [createTextVNode("组件类型：")]), componentInfo.TITLE]), createVNode(resolveComponent("epx-component"), mergeProps({
+        "class": "component-config__item--component",
+        "id": componentId,
+        "metaId": this.metaId,
+        "ref": `config-item-${componentId}`
+      }, this.$forwardAttrs(this.$attrs), {
+        "name": component.visualComponentName || componentInfo.visualComponentName || "visual-component",
+        "comp-config": compConfigs,
+        "globalConfigs": this.globalConfigs,
+        "component-info": component,
+        "up-component": contentType,
+        "up-component-instance": this.$refs[`config-item-${id}`]
+      }), null), component.items && component.items.length > 0 && this.renderConfigList(component.items, {
+        id: componentId,
+        title: componentTitle,
+        contentType: component.contentType
+      })])]);
+    }
+  },
+  render() {
+    const componentId = "page";
+    return createVNode("div", null, [createVNode("div", {
+      "ref": "config-page",
+      "class": ["component-config__item", {
+        fold: this.fold[componentId]
+      }]
+    }, [createVNode("p", {
+      "class": "component-config__item--title"
+    }, [createVNode("span", {
+      "class": "component-config__item--border"
+    }, [createTextVNode("页面全局配置")]), createVNode("i", {
+      "class": ["el-icon-caret-top"],
+      "onClick": () => this.fold[componentId] = !this.fold[componentId]
+    }, null)]), createVNode("div", {
+      "class": "component-config__item--content"
+    }, [createVNode(resolveComponent("epx-component"), {
+      "class": "component-config__item--component",
+      "id": "page",
+      "name": this.pagePath,
+      "comp-config": this.globalConfigs
+    }, null), this.renderConfigList(this.componentList)])])]);
+  },
+  created() {
+    if (this.currentPage) {
+      const {
+        visualConfigPath
+      } = this.currentPage;
+      if (visualConfigPath) {
+        const name = this.getVisualComponent({
+          VISUAL_CONFIG_PATH: visualConfigPath
+        });
+        if (name) this.pagePath = name;
+      }
+    }
+  }
+};
+export {
+  _sfc_main as default
+};

package/dist/src/visual/ConfigSelectItems.js

@@ -0,0 +1,8 @@
+import '../../style.css';
+import _sfc_main from "./ConfigSelectItems.vue.js";
+/* empty css                       */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const ConfigSelectItems = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7f5a2213"]]);
+export {
+  ConfigSelectItems as default
+};

package/dist/src/visual/ConfigSelectItems.vue.js

@@ -0,0 +1,260 @@
+import { createVNode, resolveComponent, createTextVNode, isVNode } from "vue";
+import draggable from "@epxing/core/src/components/draggable";
+import { ensureIcons, collectIconNames } from "@epxing/icons/src/runtime.mjs";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const _sfc_main = {
+  name: "epx-config-select-items",
+  components: {
+    draggable
+  },
+  props: {
+    metaId: String,
+    componentList: Array,
+    allComponentList: Array
+  },
+  inject: ["getItemConfigs", "changeItemConfigs"],
+  data() {
+    return {
+      foldMap: {},
+      showModal: false,
+      beforeMoveUpId: null,
+      afterMoveUpId: null,
+      componentType: [],
+      componentTypeList: [],
+      collapseList: [],
+      searchKey: "",
+      TERMINAL: "pc",
+      LEVEL: "01",
+      selectComponent: null,
+      loadInfo: true
+    };
+  },
+  computed: {
+    itemConfigs() {
+      return this.getItemConfigs();
+    },
+    componentImage() {
+      return (v) => {
+        const component = this.allComponentList.find((item) => item.ID === v.id) || {};
+        return component.PICTURE ? this.$util.getFileUrl(component.PICTURE) : "";
+      };
+    }
+  },
+  watch: {
+    // 图标按需：同 config-page/ComponentList.vue 的同名 watch，理由见那里。
+    allComponentList: {
+      immediate: true,
+      handler(list) {
+        if (list && list.length) ensureIcons(collectIconNames(list));
+      }
+    },
+    searchKey(v) {
+      this.getComponentList();
+    },
+    TERMINAL() {
+      this.getComponentList();
+    },
+    LEVEL() {
+      this.getComponentList();
+    },
+    selectComponent() {
+      this.loadInfo = false;
+      this.$nextTick(() => {
+        this.loadInfo = true;
+      });
+    }
+  },
+  methods: {
+    getComponentInfo(component) {
+      return this.allComponentList.find((item) => (item.componentName || item.CODE) === component.contentType) || {};
+    },
+    foldComponent(id) {
+      this.foldMap[id] = !this.foldMap[id];
+    },
+    closeModal() {
+      this.showModal = false;
+    },
+    addComponent(component) {
+      const compId = (/* @__PURE__ */ new Date()).getTime() + "";
+      const chartMap = {
+        "chart-column": "column",
+        "chart-hori-column": "horiColumn",
+        "chart-line": "line",
+        "chart-pie": "pie",
+        "chart-circular-pie": "circularPie"
+      };
+      if (chartMap[component.CODE]) {
+        this.$http.save({
+          entityId: "FM_REPORT_BASE",
+          "bean.CLIENT": this.CLIENT,
+          "bean.SYSTEM": this.SYSTEM,
+          "bean.NAME": "统计报表-" + (/* @__PURE__ */ new Date()).getTime(),
+          "bean.TYPE": component.CODE === "chart-table" ? "1" : "2",
+          "bean.OBJECT": this.metaId,
+          "bean.CHART_TYPE": chartMap[component.CODE]
+        }).then((data) => {
+          this.$emit("changeConfigs", this.showModal ? this.showModal + "-" + compId : compId, {
+            reportId: data
+          });
+        });
+      }
+      this.$emit("add", [{
+        id: compId,
+        ...component
+      }, this.showModal]);
+      this.showModal = false;
+    },
+    selectComponentFn(id) {
+      const component = this.allComponentList.find((comp) => comp.ID === id);
+      this.selectComponent = component;
+    },
+    renderItem(component, upId) {
+      const componentInfo = this.getComponentInfo(component);
+      const componentId = upId === "root" ? component.id : upId + "-" + component.id;
+      if (componentInfo.COMPONENT_TYPE === "page" || componentInfo.COMPONENT_TYPE === "container") {
+        if (!component.items) component.items = [];
+      }
+      return createVNode("li", {
+        "class": ["select-component-item", {
+          fold: this.foldMap[componentId]
+        }],
+        "component-id": componentId
+      }, [createVNode("p", {
+        "class": "select-component-item__header"
+      }, [createVNode("span", null, [createVNode("i", {
+        "class": ["component-icon", "fa", componentInfo.ICON || "el-icon-box"]
+      }, null), createVNode("span", {
+        "onClick": () => this.$emit("scrollToConfig", componentId)
+      }, [component.title]), (componentInfo.COMPONENT_TYPE === "container" || componentInfo.COMPONENT_TYPE === "page") && createVNode("i", {
+        "class": ["el-icon-arrow-up", "fr"],
+        "onClick": this.foldComponent.bind(this, componentId)
+      }, null), createVNode("i", {
+        "class": "el-icon-close",
+        "onClick": this.$emit.bind(this, "delete", componentId)
+      }, null)])]), createVNode("div", {
+        "class": "select-component-child"
+      }, [(componentInfo.COMPONENT_TYPE === "page" || componentInfo.COMPONENT_TYPE === "container" || componentInfo.CONTAINER === "1") && !component.fold && this.renderList(component.items, componentId, component.contentType)])]);
+    },
+    /**
+     * @param { Array } componentList 组件列表
+     * @param { String } upId 上级组件id
+     * @param { upComponent } 上级组件 epx-xxxx
+     */
+    renderList(componentList = [], upId = "root", upComponent) {
+      let _slot;
+      if (!componentList) return;
+      return createVNode("div", {
+        "class": "select-component-container"
+      }, [createVNode(draggable, {
+        "class": "select-component-list",
+        "tag": "ul",
+        "draggable-id": upId,
+        "list": componentList,
+        "componentData": {
+          attrs: {
+            "up-id": upId
+          }
+        },
+        "group": {
+          name: "g1"
+        },
+        "move": this.move.bind(this),
+        "onChange": this.change.bind(this)
+      }, _isSlot(_slot = componentList.map((component) => {
+        return this.renderItem(component, upId, upComponent);
+      })) ? _slot : {
+        default: () => [_slot]
+      }), upId === "root" ? createVNode(resolveComponent("el-button"), {
+        "class": "add-component-add root",
+        "type": "primary",
+        "size": "default",
+        "onClick": (e) => {
+          e.stopPropagation();
+          this.showModal = upId;
+        }
+      }, {
+        default: () => [createTextVNode("+ 新增组件")]
+      }) : createVNode(resolveComponent("el-button"), {
+        "class": "add-component-add",
+        "type": "primary",
+        "link": true,
+        "onClick": (e) => {
+          e.stopPropagation();
+          this.showModal = upId;
+        }
+      }, {
+        default: () => [createTextVNode("+ 新增组件")]
+      })]);
+    },
+    renderModal() {
+      return createVNode(resolveComponent("el-dialog"), {
+        "title": "页面组件查询",
+        "modelValue": !!this.showModal,
+        "width": "960px",
+        "append-to-body": true,
+        "class": "visual-component-select-dialog",
+        "onClick": (e) => e.stopPropagation(),
+        "onClose": () => this.showModal = false
+      }, {
+        default: () => [createVNode(resolveComponent("epx-visual-component-library-dialog"), {
+          "onClick": this.addComponent.bind(this)
+        }, null)]
+      });
+    },
+    move(evt, orginEvt) {
+      this.beforeMoveUpId = evt.from.getAttribute("up-id");
+      this.afterMoveUpId = evt.to.getAttribute("up-id");
+    },
+    change(e) {
+      if (e.removed) ;
+      else if (e.added) {
+        const {
+          element = {}
+        } = e.added;
+        if (element.id && this.beforeMoveUpId !== this.afterMoveUpId) {
+          const beforeElementId = this.beforeMoveUpId && this.beforeMoveUpId !== "root" ? this.beforeMoveUpId + "-" + element.id : element.id;
+          const afterElementId = this.afterMoveUpId && this.afterMoveUpId !== "root" ? this.afterMoveUpId + "-" + element.id : element.id;
+          const beforeMoveConfig = this.itemConfigs[beforeElementId];
+          if (beforeMoveConfig) {
+            this.changeItemConfigs(afterElementId, beforeMoveConfig);
+          }
+        }
+        this.beforeMoveUpId = null;
+        this.afterMoveUpId = null;
+      }
+    },
+    getComponentList() {
+      const params = {
+        action: "getPageComponentTree",
+        entityId: "FM_PAGE",
+        searchText: this.searchKey,
+        "scope.TERMINAL#in": this.TERMINAL,
+        "scope.LEVEL#in": this.LEVEL,
+        "scope.TYPE": "01"
+      };
+      if (this.LEVEL === "03") {
+        params["scope.SYSTEM"] = this.SYSTEM;
+      }
+      this.$http.get(params).then((data) => {
+        this.componentTypeList = data;
+      });
+    }
+  },
+  render() {
+    return createVNode("div", {
+      "class": "config-select-container"
+    }, [this.renderList(this.componentList), this.renderModal()]);
+  },
+  created() {
+    document.body.addEventListener("click", this.closeModal, false);
+    this.getComponentList();
+  },
+  unmounted() {
+    document.body.removeEventListener("click", this.closeModal, false);
+  }
+};
+export {
+  _sfc_main as default
+};