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

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

@@ -0,0 +1,158 @@
+<script>
+// @jsx-vue3（「布局」组的列数 / 数值控件用 JSX 自定义渲染：列数预设、随高度自适应禁用）
+import ComponentVue from '@epxing/designer/src/visual/Component.vue'
+import { DEFAULT_GRID, getPageGrid, fromGrid, gridPitch, maxGapForPitch } from '@epxing/dashboard/src/grid/model'
+
+// 新看板可选的列数；历史配置中的其它列数仍由网格模型读取，直到用户改选。
+const COL_PRESETS = [12, 24, 48, 60]
+// 高度自适应开着时被接管的数值键（保存成 'auto'）及其关掉时的恢复值；面板上的行高是行距（默认 10 + 20 = 30，见 model.gridPitch）
+const AUTO_KEYS = [['gridRowHeight', gridPitch(DEFAULT_GRID)], ['gridGap', DEFAULT_GRID.gap[0]]]
+
+export default {
+  name: 'epx-visual-config-dashboard-global-config',
+  extends: ComponentVue,
+  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] || {}
+      // grid 对象不进面板（面板只认扁平键；外壳的 grid 才是保存真值），铺成扁平键供「布局」组编辑
+      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]
+        // _gridNumbers 有意不放 data：只是本会话内「开自适应前的数值」记忆，不参与渲染、不随配置保存
+        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) {
+      const value = this.getConfigValue(item.key)
+      return (
+        <div class="epx-dashboard-layout-config__col">
+          <el-radio-group modelValue={COL_PRESETS.includes(value) ? value : undefined} onChange={this.changeColNum}>
+            {COL_PRESETS.map(n => <el-radio key={n} label={n} value={n}>{n}</el-radio>)}
+          </el-radio-group>
+        </div>
+      )
+    },
+    // 行高 / 间距 / 内边距的数字框：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 (
+        <el-input-number
+          class="epx-dashboard-layout-config__num"
+          size="small"
+          modelValue={value == null ? undefined : value}
+          disabled={disabled}
+          placeholder={disabled ? '自动' : (item.placeholder || '')}
+          min={min}
+          max={max}
+          step={1}
+          step-strictly
+          controls-position="right"
+          onChange={v => this.changeConfigItem(item.key, v == null ? null : v)}
+        />
+      )
+    },
+    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' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.epx-dashboard-layout-config__col {
+  .el-radio {
+    margin-right: 12px;
+  }
+}
+.epx-dashboard-layout-config__num {
+  width: 160px;
+}
+</style>