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

package/dist/src/visual/config-page/DashboardGlobalConfig.vue.js

@@ -0,0 +1,292 @@
+import { createVNode, resolveComponent, isVNode } from "vue";
+import _sfc_main$1 from "../Component.vue.js";
+/* empty css                */
+import { DEFAULT_GRID, gridPitch, maxGapForPitch, fromGrid, getPageGrid } from "@epxing/dashboard/src/grid/model";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const COL_PRESETS = [12, 24, 48, 60];
+const AUTO_KEYS = [["gridRowHeight", gridPitch(DEFAULT_GRID)], ["gridGap", DEFAULT_GRID.gap[0]]];
+const _sfc_main = {
+  name: "epx-visual-config-dashboard-global-config",
+  extends: _sfc_main$1,
+  computed: {
+    // 高度自适应开着：行高 / 间距由视口等比推导，数值框禁用并显示「自动」
+    gridNumberDisabled() {
+      return !!this.getConfigValue("autoHeight");
+    }
+  },
+  methods: {
+    initDefaultConfigs() {
+      this.defaultConfigs = {
+        layout: "grid",
+        direction: "row",
+        justify: "flex-start",
+        align: "top",
+        readonly: false,
+        searchDefaultFlag: false,
+        loadWay: "all",
+        span: 24
+      };
+    },
+    initConfigOptions() {
+      const configOptions = [
+        {
+          key: "componentName",
+          label: "组件名称",
+          type: "input"
+        },
+        {
+          key: "globalScopeParams",
+          label: "全局范围",
+          type: "scope",
+          allocation: true
+        },
+        {
+          key: "scopeFlag",
+          label: "筛选开关",
+          type: "switch",
+          allocation: true
+        },
+        {
+          key: "globalSearchFields",
+          label: "筛选字段",
+          type: "list-field",
+          allocation: true
+        },
+        {
+          key: "searchDefaultFlag",
+          label: "查询筛选是否打开",
+          type: "switch",
+          allocation: true
+        },
+        {
+          key: "chartCache",
+          label: "开启图表缓存",
+          type: "switch",
+          allocation: true
+        },
+        {
+          key: "autoHeight",
+          label: "高度自适应",
+          type: "switch",
+          allocation: true
+        },
+        {
+          key: "scrollBarHidden",
+          label: "隐藏滚动条",
+          type: "switch",
+          allocation: true
+        },
+        {
+          key: "loadWay",
+          label: "图表加载方式",
+          type: "radio",
+          options: [{
+            label: "全部",
+            value: "all"
+          }, {
+            label: "当前页",
+            value: "current"
+          }, {
+            label: "视口内",
+            value: "viewport"
+          }],
+          allocation: true
+        },
+        {
+          key: "backgroundColor",
+          label: "背景颜色",
+          type: "color",
+          allocation: true
+        },
+        {
+          key: "autoRefresh",
+          label: "自动刷新",
+          type: "switch",
+          allocation: true
+        },
+        {
+          key: "refreshInterval",
+          label: "刷新间隔",
+          type: "num",
+          defaultValue: 60,
+          allocation: true
+        },
+        // 布局（v3 网格参数，spec §9.6）：扁平键由 initConfig 从 grid 铺开，提交后由外壳折回 grid 对象
+        {
+          key: "layout",
+          label: "布局",
+          children: [
+            {
+              key: "gridColNum",
+              label: "列数",
+              renderContent: this.renderGridColNum
+            },
+            // 行高是行距（每行占位、含间距）、间距只是组件四周内缩：改间距不改变组件位置与页面高度，改行高才改（model.gridPitch）
+            {
+              key: "gridRowHeight",
+              label: "行高",
+              renderContent: this.renderGridNumber,
+              min: 2,
+              max: 200,
+              autoDisabled: true,
+              tip: "每行占位高度（含间距，px）。组件高 = 行数 × 行高 − 间距；改间距不会改变它"
+            },
+            {
+              key: "gridGap",
+              label: "间距",
+              renderContent: this.renderGridNumber,
+              min: 0,
+              max: 60,
+              autoDisabled: true,
+              tip: "组件之间的空隙（px），内边距留空时四边留白也跟着它；只影响间距，不改变组件位置与页面高度"
+            },
+            {
+              key: "gridPadding",
+              label: "内边距",
+              renderContent: this.renderGridNumber,
+              min: 0,
+              max: 100,
+              placeholder: "跟随间距",
+              tip: "容器四边留白（px）；留空时与间距相同，即旧版页面的边距语义"
+            },
+            {
+              key: "gridMode",
+              label: "布局模式",
+              type: "radio",
+              options: [{
+                label: "碰撞紧凑",
+                value: "grid"
+              }, {
+                label: "整页悬浮",
+                value: "float"
+              }],
+              tip: "整页悬浮：全部组件可自由叠放、不推挤不压紧"
+            },
+            {
+              key: "showGridLines",
+              label: "显示网格线",
+              type: "switch"
+            }
+          ]
+        }
+      ];
+      this.configOptions = configOptions;
+    },
+    initConfig() {
+      const itemConfig = this.itemConfigs[this.id] || {};
+      const {
+        grid,
+        ...rest
+      } = {
+        ...this.compConfig,
+        ...itemConfig
+      };
+      const config = {
+        ...rest,
+        ...fromGrid(getPageGrid(this.compConfig))
+      };
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span;
+      }
+      this.config = config;
+      for (const key in this.config) {
+        const configOption = this.configOptions.find((item) => item.key === key) || {};
+        if (configOption.type === "field") {
+          this.selectFieldWay[key] = "custom";
+        }
+      }
+    },
+    // 高度自适应开关联动行高 / 间距：开 ⇒ 先记下当前数值再清空（外壳保存成 'auto'）；
+    // 关 ⇒ 优先恢复本次会话里开之前记下的数值（M1），没有记录（打开面板时就是 auto）才回默认，与外壳的 grid 保持一致
+    changeConfigItem(key, value) {
+      this.config[key] = value;
+      if (key !== "autoHeight") return;
+      if (value) {
+        const numbers = {};
+        for (const [numKey] of AUTO_KEYS) if (this.config[numKey] != null) numbers[numKey] = this.config[numKey];
+        if (Object.keys(numbers).length) this._gridNumbers = numbers;
+      }
+      const saved = this._gridNumbers || {};
+      for (const [numKey, fallback] of AUTO_KEYS) {
+        this.config[numKey] = value ? null : this.config[numKey] != null ? this.config[numKey] : saved[numKey] != null ? saved[numKey] : fallback;
+      }
+    },
+    // 列数仅接受四个预设值，历史配置的其它列数在用户主动改选前保持原值。
+    changeColNum(v) {
+      const n = Number(v);
+      if (!COL_PRESETS.includes(n)) return;
+      this.changeConfigItem("gridColNum", n);
+    },
+    renderGridColNum(item) {
+      let _slot;
+      const value = this.getConfigValue(item.key);
+      return createVNode("div", {
+        "class": "epx-dashboard-layout-config__col"
+      }, [createVNode(resolveComponent("el-radio-group"), {
+        "modelValue": COL_PRESETS.includes(value) ? value : void 0,
+        "onChange": this.changeColNum
+      }, _isSlot(_slot = COL_PRESETS.map((n) => createVNode(resolveComponent("el-radio"), {
+        "key": n,
+        "label": n,
+        "value": n
+      }, _isSlot(n) ? n : {
+        default: () => [n]
+      }))) ? _slot : {
+        default: () => [_slot]
+      })]);
+    },
+    // 行高 / 间距 / 内边距的数字框：autoDisabled 的项在高度自适应开着时禁用并显示「自动」；清空提交 null（内边距 = 跟随间距）。
+    // 间距不能吃掉整行（一行内容高 ≥ 1）：间距的上限随行高、行高的下限随间距
+    renderGridNumber(item) {
+      const disabled = !!item.autoDisabled && this.gridNumberDisabled;
+      const value = disabled ? null : this.getConfigValue(item.key);
+      let {
+        min,
+        max
+      } = item;
+      if (item.key === "gridGap") max = Math.min(max, maxGapForPitch(this.getConfigValue("gridRowHeight")));
+      if (item.key === "gridRowHeight") min = Math.max(min, (Number(this.getConfigValue("gridGap")) || 0) + 1);
+      return createVNode(resolveComponent("el-input-number"), {
+        "class": "epx-dashboard-layout-config__num",
+        "size": "small",
+        "modelValue": value == null ? void 0 : value,
+        "disabled": disabled,
+        "placeholder": disabled ? "自动" : item.placeholder || "",
+        "min": min,
+        "max": max,
+        "step": 1,
+        "step-strictly": true,
+        "controls-position": "right",
+        "onChange": (v) => this.changeConfigItem(item.key, v == null ? null : v)
+      }, null);
+    },
+    getFieldOptions() {
+      this.fieldOptions = [{
+        key: "attriName",
+        label: "字段",
+        type: "readonly"
+      }, {
+        key: "configWay",
+        label: "配置方式",
+        type: "radio",
+        options: [{
+          label: "默认配置",
+          value: "default"
+        }, {
+          label: "自定义",
+          value: "custom"
+        }],
+        defaultValue: "default"
+      }, {
+        key: "attriLabel",
+        label: "名称",
+        type: "text"
+      }];
+    }
+  }
+};
+export {
+  _sfc_main as default
+};