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

package/dist/src/visual/config/Background.js

@@ -0,0 +1,526 @@
+import '../../../style.css';
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, Fragment, renderList, normalizeClass, createCommentVNode } from "vue";
+/* empty css               */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-visual-config-background",
+  props: {
+    value: Object,
+    defaultValue: Object,
+    definingNameType: String
+  },
+  data() {
+    return {
+      backgroundStyle: "color",
+      predefineColors: ["#ff4500", "#ff8c00", "#ffd700", "#90ee90"],
+      backgroundPositionList: [
+        { label: "左上", value: "left top" },
+        { label: "上", value: "top" },
+        { label: "右上", value: "right top" },
+        { label: "左", value: "left" },
+        { label: "中", value: "center" },
+        { label: "右", value: "right" },
+        { label: "左下", value: "left bottom" },
+        { label: "下", value: "bottom" },
+        { label: "右下", value: "right bottom" }
+      ],
+      backgroundWidth: "",
+      backgroundHeight: "",
+      style: {},
+      defaultStyle: {
+        backgroundPosition: "left top",
+        backgroundSize: "auto",
+        backgroundRepeat: "repeat"
+      }
+    };
+  },
+  computed: {
+    backgroundSize: {
+      get() {
+        const { backgroundSize } = this.style;
+        if (this.$_.isNil(backgroundSize)) return this.defaultStyle.backgroundSize;
+        return backgroundSize === "cover" || backgroundSize === "contain" || backgroundSize === "auto" || backgroundSize === "100% 100%" ? backgroundSize : "custom";
+      },
+      set(v) {
+        if (v === "custom") {
+          this.style.backgroundSize = "";
+        } else {
+          this.style.backgroundSize = v;
+        }
+      }
+    },
+    clearSuffix() {
+      return (v = "") => v === "auto" ? "auto" : typeof v === "string" ? v.replace(/(px|%)/, "") : v;
+    },
+    toNumber() {
+      return (v) => Number(v) || 0;
+    },
+    unit() {
+      return (value) => {
+        if (value === "auto") {
+          return "";
+        } else if (value) {
+          return value.replace(/[-\d]+/, "");
+        } else {
+          return "px";
+        }
+      };
+    }
+  },
+  watch: {
+    style: {
+      handler() {
+        this.updateStyle();
+      },
+      deep: true
+    }
+  },
+  methods: {
+    changeBgImage(e) {
+      const file = e.target.files[0];
+      if (file) {
+        this.$http.save(
+          {
+            action: "upload",
+            file,
+            SOURCE: "page"
+          },
+          {
+            requestType: "formData"
+          }
+        ).then((data) => {
+          if (data && data.bean) {
+            this.style.backgroundImage = data.bean;
+          }
+        });
+      }
+    },
+    updateStyle() {
+      const style = { ...this.style };
+      const formatStyle = {};
+      if (style.backgroundImage) {
+        if (this.backgroundStyle === "gradient") {
+          delete style.backgroundRepeat;
+          delete style.backgroundPosition;
+          delete style.backgroundSize;
+        } else {
+          style.backgroundImage = `url(${style.backgroundImage})`;
+        }
+      }
+      for (const key in style) {
+        if (this.definingNameType === "kebab-case") {
+          formatStyle[this.camelToKebab(key)] = style[key];
+        } else {
+          formatStyle[key] = style[key];
+        }
+      }
+      this.$emit("input", formatStyle);
+    },
+    changePx(key, v, unit = "px") {
+      if ((unit || v) === "auto") {
+        this[key] = unit;
+      } else {
+        const formatV = parseFloat(v) ? parseFloat(v) + unit : "";
+        if (formatV || v === "-") {
+          this[key] = formatV || v + unit;
+        } else {
+          this[key] = null;
+        }
+      }
+      this.changeBackgroundSize("custom");
+    },
+    changeBackgroundSize(v) {
+      if (v === "custom") {
+        if (this.backgroundWidth || this.backgroundHeight) {
+          this.style.backgroundSize = (this.backgroundWidth || 0) + " " + (this.backgroundHeight || 0);
+        } else {
+          this.style.backgroundSize = "";
+        }
+      } else {
+        this.style.backgroundSize = v;
+      }
+    },
+    kebabToCamel(str) {
+      return str.replace(/-([a-z])/g, function(match, char) {
+        return char.toUpperCase();
+      });
+    },
+    camelToKebab(str) {
+      return str.replace(/([A-Z])/g, function(match, char) {
+        return "-" + char.toLowerCase();
+      });
+    }
+  },
+  created() {
+    if (this.defaultValue) {
+      this.defaultStyle = { ...this.defaultStyle, ...this.defaultValue };
+    }
+    if (this.value) {
+      if (this.definingNameType === "kebab-case") {
+        for (const key in this.value) {
+          this.style[this.kebabToCamel(key)] = this.value[key];
+        }
+      } else {
+        this.style = { ...this.value };
+      }
+      if (this.style.backgroundImage) {
+        if (this.style.backgroundImage.includes("linear-gradient(")) {
+          this.backgroundStyle = "gradient";
+        } else {
+          this.style.backgroundImage = this.style.backgroundImage.replace(/url\((.+)\)/, "$1");
+        }
+      }
+      if (this.backgroundSize === "custom") {
+        this.backgroundWidth = this.style.backgroundSize.split(" ")[0] || "";
+        this.backgroundHeight = this.style.backgroundSize.split(" ")[1] || "";
+      }
+    }
+  }
+};
+const _hoisted_1 = { class: "container" };
+const _hoisted_2 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_3 = { class: "epx-page-designer-setting-style__upload" };
+const _hoisted_4 = {
+  key: 0,
+  class: "epx-page-designer-setting-style__subitem"
+};
+const _hoisted_5 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_6 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_7 = {
+  class: "epx-page-designer-setting-style__label",
+  for: ""
+};
+const _hoisted_8 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_9 = { class: "epx-page-designer-setting-style__upload" };
+const _hoisted_10 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_11 = { class: "epx-page-designer-setting-style__background-position" };
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_14 = { class: "epx-page-designer-setting-style__subcontent" };
+const _hoisted_15 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_16 = { class: "epx-page-designer-setting-style__subcontent" };
+const _hoisted_17 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_18 = { class: "epx-page-designer-setting-style__subcontent" };
+const _hoisted_19 = { class: "epx-page-designer-setting-style__subitem" };
+const _hoisted_20 = { class: "epx-page-designer-setting-style__subcontent" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_radio = resolveComponent("el-radio");
+  const _component_el_radio_group = resolveComponent("el-radio-group");
+  const _component_epx_color_picker = resolveComponent("epx-color-picker");
+  const _component_el_color_picker = resolveComponent("el-color-picker");
+  const _component_el_input = resolveComponent("el-input");
+  const _component_el_option = resolveComponent("el-option");
+  const _component_el_select = resolveComponent("el-select");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      _cache[14] || (_cache[14] = createElementVNode("label", {
+        class: "epx-page-designer-setting-style__label",
+        for: ""
+      }, "背景色样式", -1)),
+      createElementVNode("div", _hoisted_3, [
+        createVNode(_component_el_radio_group, {
+          modelValue: $data.backgroundStyle,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.backgroundStyle = $event),
+          size: "default",
+          onChange: _cache[1] || (_cache[1] = ($event) => {
+            $data.style["backgroundImage"] = "";
+            $data.style["backgroundColor"] = "";
+          })
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_el_radio, {
+              label: "color",
+              value: "color"
+            }, {
+              default: withCtx(() => [..._cache[12] || (_cache[12] = [
+                createTextVNode("纯色", -1)
+              ])]),
+              _: 1
+            }),
+            createVNode(_component_el_radio, {
+              label: "gradient",
+              value: "gradient"
+            }, {
+              default: withCtx(() => [..._cache[13] || (_cache[13] = [
+                createTextVNode("渐变色", -1)
+              ])]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ])
+    ]),
+    $data.backgroundStyle === "gradient" ? (openBlock(), createElementBlock("div", _hoisted_4, [
+      createElementVNode("label", _hoisted_5, toDisplayString(_ctx.$t("background color")), 1),
+      createVNode(_component_epx_color_picker, {
+        modelValue: $data.style["backgroundImage"],
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $data.style["backgroundImage"] = $event),
+        "append-to-body": ""
+      }, null, 8, ["modelValue"])
+    ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+      createElementVNode("div", _hoisted_6, [
+        createElementVNode("label", _hoisted_7, toDisplayString(_ctx.$t("background color")), 1),
+        createVNode(_component_el_color_picker, {
+          modelValue: $data.style["backgroundColor"],
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $data.style["backgroundColor"] = $event),
+          "show-alpha": "",
+          predefine: $data.predefineColors
+        }, null, 8, ["modelValue", "predefine"])
+      ]),
+      createElementVNode("div", _hoisted_8, [
+        _cache[15] || (_cache[15] = createElementVNode("label", {
+          class: "epx-page-designer-setting-style__label",
+          for: ""
+        }, "背景图片", -1)),
+        createElementVNode("div", _hoisted_9, [
+          createVNode(_component_el_input, {
+            class: "input upload-input",
+            "model-value": $data.style["backgroundImage"],
+            type: "text",
+            size: "default",
+            clearable: "",
+            onClear: _cache[5] || (_cache[5] = ($event) => $data.style["backgroundImage"] = "")
+          }, {
+            suffix: withCtx(() => [
+              createElementVNode("i", {
+                class: "el-icon-upload",
+                onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$refs.fileInput.click())
+              })
+            ]),
+            _: 1
+          }, 8, ["model-value"]),
+          createElementVNode("input", {
+            style: { width: 0, height: 0 },
+            ref: "fileInput",
+            type: "file",
+            onChange: _cache[6] || (_cache[6] = (...args) => $options.changeBgImage && $options.changeBgImage(...args))
+          }, null, 544)
+        ])
+      ]),
+      createElementVNode("div", _hoisted_10, [
+        _cache[17] || (_cache[17] = createElementVNode("label", {
+          class: "epx-page-designer-setting-style__label",
+          for: ""
+        }, "背景图位置", -1)),
+        createElementVNode("div", _hoisted_11, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($data.backgroundPositionList, (item) => {
+            return openBlock(), createElementBlock("div", {
+              key: item.value,
+              onClick: ($event) => $data.style["backgroundPosition"] = item.value,
+              class: normalizeClass({ "is-active": ($data.style.backgroundPosition || $data.defaultStyle.backgroundPosition) === item.value })
+            }, [..._cache[16] || (_cache[16] = [
+              createElementVNode("i", { class: "el-icon-picture" }, null, -1)
+            ])], 10, _hoisted_12);
+          }), 128))
+        ])
+      ]),
+      createElementVNode("div", _hoisted_13, [
+        _cache[22] || (_cache[22] = createElementVNode("label", {
+          class: "epx-page-designer-setting-style__label",
+          for: ""
+        }, "背景图重复", -1)),
+        createElementVNode("div", _hoisted_14, [
+          createVNode(_component_el_radio_group, {
+            "model-value": $data.style.backgroundRepeat || $data.defaultStyle.backgroundRepeat,
+            "onUpdate:modelValue": _cache[7] || (_cache[7] = (v) => $data.style["backgroundRepeat"] = v),
+            size: "medium"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_radio, {
+                label: "repeat",
+                value: "repeat"
+              }, {
+                default: withCtx(() => [..._cache[18] || (_cache[18] = [
+                  createTextVNode("重复", -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio, {
+                label: "repeat-x",
+                value: "repeat-x"
+              }, {
+                default: withCtx(() => [..._cache[19] || (_cache[19] = [
+                  createTextVNode("水平重复", -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio, {
+                label: "repeat-y",
+                value: "repeat-y"
+              }, {
+                default: withCtx(() => [..._cache[20] || (_cache[20] = [
+                  createTextVNode("垂直重复", -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio, {
+                label: "no-repeat",
+                value: "no-repeat"
+              }, {
+                default: withCtx(() => [..._cache[21] || (_cache[21] = [
+                  createTextVNode("不重复", -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["model-value"])
+        ])
+      ]),
+      createElementVNode("div", _hoisted_15, [
+        _cache[28] || (_cache[28] = createElementVNode("label", {
+          class: "epx-page-designer-setting-style__label",
+          for: ""
+        }, "背景图大小", -1)),
+        createElementVNode("div", _hoisted_16, [
+          createVNode(_component_el_radio_group, {
+            "model-value": $options.backgroundSize,
+            "onUpdate:modelValue": $options.changeBackgroundSize,
+            size: "default"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_radio, {
+                label: "cover",
+                value: "cover"
+              }, {
+                default: withCtx(() => [..._cache[23] || (_cache[23] = [
+                  createTextVNode("裁剪", -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio, {
+                label: "contain",
+                value: "contain"
+              }, {
+                default: withCtx(() => [..._cache[24] || (_cache[24] = [
+                  createTextVNode("适应", -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio, {
+                label: "100% 100%",
+                value: "100% 100%"
+              }, {
+                default: withCtx(() => [..._cache[25] || (_cache[25] = [
+                  createTextVNode("拉伸", -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio, {
+                label: "auto",
+                value: "auto"
+              }, {
+                default: withCtx(() => [..._cache[26] || (_cache[26] = [
+                  createTextVNode("原图", -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio, {
+                label: "custom",
+                value: "custom"
+              }, {
+                default: withCtx(() => [..._cache[27] || (_cache[27] = [
+                  createTextVNode("自定义", -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["model-value", "onUpdate:modelValue"])
+        ])
+      ]),
+      $options.backgroundSize === "custom" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        createElementVNode("div", _hoisted_17, [
+          _cache[29] || (_cache[29] = createElementVNode("label", {
+            class: "epx-page-designer-setting-style__label",
+            for: ""
+          }, "背景图宽度", -1)),
+          createElementVNode("div", _hoisted_18, [
+            createVNode(_component_el_input, {
+              class: "epx-page-designer-setting-style__number-with-unit",
+              size: "small",
+              "model-value": $options.clearSuffix($data.backgroundWidth),
+              "onUpdate:modelValue": _cache[9] || (_cache[9] = (v) => $options.changePx("backgroundWidth", v, $options.unit($data.backgroundWidth)))
+            }, {
+              append: withCtx(() => [
+                createVNode(_component_el_select, {
+                  class: "epx-page-designer-setting-style__unit",
+                  "model-value": $options.unit($data.backgroundWidth),
+                  "onUpdate:modelValue": _cache[8] || (_cache[8] = (v) => $options.changePx("backgroundWidth", $data.backgroundWidth, v)),
+                  size: "small",
+                  placeholder: "-"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_option, {
+                      label: "px",
+                      value: "px"
+                    }),
+                    createVNode(_component_el_option, {
+                      label: "%",
+                      value: "%"
+                    }),
+                    createVNode(_component_el_option, {
+                      label: "auto",
+                      value: "auto"
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["model-value"])
+              ]),
+              _: 1
+            }, 8, ["model-value"])
+          ])
+        ]),
+        createElementVNode("div", _hoisted_19, [
+          _cache[30] || (_cache[30] = createElementVNode("label", {
+            class: "epx-page-designer-setting-style__label",
+            for: ""
+          }, "背景图高度", -1)),
+          createElementVNode("div", _hoisted_20, [
+            createVNode(_component_el_input, {
+              class: "epx-page-designer-setting-style__number-with-unit",
+              size: "small",
+              "model-value": $options.clearSuffix($data.backgroundHeight),
+              "onUpdate:modelValue": _cache[11] || (_cache[11] = (v) => $options.changePx("backgroundHeight", v, $options.unit($data.backgroundHeight)))
+            }, {
+              append: withCtx(() => [
+                createVNode(_component_el_select, {
+                  class: "epx-page-designer-setting-style__unit",
+                  "model-value": $options.unit($data.backgroundHeight),
+                  "onUpdate:modelValue": _cache[10] || (_cache[10] = (v) => $options.changePx("backgroundHeight", $data.backgroundHeight, v)),
+                  size: "small",
+                  placeholder: "-"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_option, {
+                      label: "px",
+                      value: "px"
+                    }),
+                    createVNode(_component_el_option, {
+                      label: "%",
+                      value: "%"
+                    }),
+                    createVNode(_component_el_option, {
+                      label: "auto",
+                      value: "auto"
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["model-value"])
+              ]),
+              _: 1
+            }, 8, ["model-value"])
+          ])
+        ])
+      ], 64)) : createCommentVNode("", true)
+    ], 64))
+  ]);
+}
+const Background = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  Background as default
+};

package/dist/src/visual/config/Chart.js

@@ -0,0 +1,154 @@
+import '../../../style.css';
+import { resolveComponent, openBlock, createElementBlock, createVNode, createElementVNode, normalizeClass, withCtx, createTextVNode, createBlock, createCommentVNode } from "vue";
+/* empty css          */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-visual-config-chart",
+  props: {
+    value: String,
+    defaultValue: String
+  },
+  data() {
+    return {
+      chart: null,
+      preview: false
+    };
+  },
+  watch: {
+    chart(v) {
+      if (v.id) {
+        this.$emit("callback", v);
+        this.changeValue(v.id);
+      }
+    }
+  },
+  methods: {
+    changeValue(v) {
+      if (v !== this.value) {
+        this.$emit("change-configs", v === this.defaultValue ? null : v);
+      }
+    },
+    addChart() {
+      const that = this;
+      this.$createPage({
+        metaId: "FM_REPORT_BASE",
+        openType: "2",
+        flag: "dialog_add",
+        component: "entity-add-page",
+        pageType: "ADD",
+        callback(data) {
+          that.getChart(data.id);
+        }
+      });
+    },
+    viewChart() {
+      this.preview = true;
+    },
+    editChart() {
+      if (!this.chart) {
+        this.$message("请先选择报表");
+        return;
+      }
+      this.$createPage({
+        metaId: "FM_REPORT_BASE",
+        openType: "2",
+        defaultFullscreen: true,
+        component: "report-design",
+        reportId: this.chart.id || this.chart,
+        id: this.chart.id || this.chart
+      });
+    },
+    getChart(chartId) {
+      if (chartId) {
+        this.$http.get({
+          entityId: "FM_REPORT_BASE",
+          id: chartId
+        }).then((data) => {
+          if (data && data.data) {
+            const { ID, NAME } = data.data;
+            this.chart = {
+              id: ID,
+              name: NAME
+            };
+          }
+        });
+      }
+    }
+  },
+  created() {
+    this.getChart(this.value);
+  }
+};
+const _hoisted_1 = { class: "chart" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_epx_object = resolveComponent("epx-object");
+  const _component_el_button = resolveComponent("el-button");
+  const _component_epx_report_chart = resolveComponent("epx-report-chart");
+  const _component_epx_visual_config_lazy_dialog = resolveComponent("epx-visual-config-lazy-dialog");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_component_epx_object, {
+      class: "chart-select",
+      modelValue: $data.chart,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.chart = $event),
+      fieldConfigs: { state: "ADD", attriLabel: "报表", codeKey: "FM_REPORT_BASE", scopeParams: [{ field: "SYSTEM", values: this.SYSTEM }] }
+    }, null, 8, ["modelValue", "fieldConfigs"]),
+    createElementVNode("div", null, [
+      createVNode(_component_el_button, {
+        type: "default",
+        class: normalizeClass(["add-operate", { "no-border": !$data.chart }]),
+        size: "small",
+        onClick: $options.addChart
+      }, {
+        default: withCtx(() => [..._cache[2] || (_cache[2] = [
+          createTextVNode("+ 新增", -1)
+        ])]),
+        _: 1
+      }, 8, ["class", "onClick"]),
+      $data.chart ? (openBlock(), createBlock(_component_el_button, {
+        key: 0,
+        type: "primary",
+        link: "",
+        class: "operate",
+        onClick: $options.viewChart
+      }, {
+        default: withCtx(() => [..._cache[3] || (_cache[3] = [
+          createTextVNode("预览", -1)
+        ])]),
+        _: 1
+      }, 8, ["onClick"])) : createCommentVNode("", true),
+      $data.chart ? (openBlock(), createBlock(_component_el_button, {
+        key: 1,
+        type: "primary",
+        link: "",
+        class: "operate",
+        onClick: $options.editChart
+      }, {
+        default: withCtx(() => [..._cache[4] || (_cache[4] = [
+          createTextVNode("设计", -1)
+        ])]),
+        _: 1
+      }, 8, ["onClick"])) : createCommentVNode("", true)
+    ]),
+    $data.chart ? (openBlock(), createBlock(_component_epx_visual_config_lazy_dialog, {
+      key: 0,
+      title: "预览",
+      "append-to-body": true,
+      modelValue: $data.preview,
+      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $data.preview = $event),
+      "destroy-on-close": "",
+      width: "70%"
+    }, {
+      default: withCtx(() => [
+        createVNode(_component_epx_report_chart, {
+          designMode: true,
+          config: { id: $data.chart.id || $data.chart }
+        }, null, 8, ["config"])
+      ]),
+      _: 1
+    }, 8, ["modelValue"])) : createCommentVNode("", true)
+  ]);
+}
+const Chart = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-cf3daefb"]]);
+export {
+  Chart as default
+};