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

package/src/base/entity-view-config/UnionPanel.vue

@@ -0,0 +1,1037 @@
+<template>
+  <div class="union-panel">
+    <div class="union-panel__tabbar">
+      <span
+        v-for="union in unions"
+        :key="union.id"
+        :class="['union-panel__tab', { 'is-active': union.id === selId }]"
+        :title="`${union.metaName}（${union.metaCode}）· 分支编号 ${union.code}`"
+        @click="selId = union.id"
+      >
+        <i class="el-icon-copy-document"></i>{{ union.metaName }}
+        <span class="union-panel__tab-code">{{ union.code }}</span>
+        <i class="el-icon-close union-panel__tab-x" title="删除分支" @click.stop="removeUnion(union)"></i>
+      </span>
+      <span class="union-panel__tab-add" @click="openAdd">
+        <i class="el-icon-plus"></i>添加聚合对象
+      </span>
+    </div>
+
+    <div v-if="!unions.length" class="union-panel__blank">
+      <i class="el-icon-copy-document"></i>
+      <div>
+        暂无聚合对象。聚合对象是与主段列结构一致的 UNION ALL 分支，<br />
+        需与主对象在同一数据库源，点击「添加聚合对象」开始配置
+      </div>
+    </div>
+
+    <template v-else-if="sel">
+      <div class="union-panel__seg-bar">
+        <span class="union-panel__seg-label">
+          <i class="el-icon-set-up"></i>分支「<b>{{ sel.metaName }}</b>」数据范围
+        </span>
+        <span class="union-panel__scope-text">{{ scopeSummary }}</span>
+        <span class="union-panel__spacer"></span>
+        <el-button size="small" icon="el-icon-set-up" @click="openScope">设置数据范围</el-button>
+      </div>
+
+      <div class="union-panel__map-sub">
+        将聚合对象 <b>{{ sel.metaName }}</b> 的数据映射到 <b>{{ viewName }}</b> 的各列，未映射的列在该分支输出 NULL
+        <span class="union-panel__spacer"></span>
+        <span class="union-panel__total">已映射 <b>{{ mappedCount }}</b> / {{ rows.length }}</span>
+      </div>
+
+      <el-table v-loading="mappingLoading" :data="rows" size="small" class="union-panel__map-table">
+        <el-table-column type="index" label="序号" width="48"></el-table-column>
+        <el-table-column label="视图字段" min-width="110" show-overflow-tooltip>
+          <template v-slot="{ row }">
+            <span class="union-panel__vf-name">{{ row.NAME }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="CODE" label="编号" width="110" show-overflow-tooltip>
+          <template v-slot="{ row }">
+            <span class="union-panel__mono">{{ row.CODE }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="VIEW_TYPE" label="类型" width="60"></el-table-column>
+        <el-table-column width="46" align="center">
+          <template v-slot="{ row }">
+            <i :class="['el-icon-sort', 'union-panel__arrow', { 'is-set': !!row.ID }]"></i>
+          </template>
+        </el-table-column>
+        <el-table-column label="数据来源" width="118">
+          <template v-slot="{ row }">
+            <el-select :model-value="row.DATA_SOURCE || 'field'" size="small" @change="onDataSourceChange(row, $event)">
+              <el-option value="field" label="对象字段"></el-option>
+              <el-option value="formula" label="公式"></el-option>
+              <el-option value="fixed" label="指定值"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="映射字段 / 取值" min-width="230">
+          <template v-slot="{ row }">
+            <el-select
+              v-if="(row.DATA_SOURCE || 'field') === 'field'"
+              :model-value="matchValue(row)"
+              :class="['union-panel__match', { 'is-matched': matched(row) }]"
+              size="small"
+              filterable
+              @visible-change="onMatchDropdown"
+              @change="onMatchChange(row, $event)"
+            >
+              <el-option value="" label="— 不映射（输出 NULL） —"></el-option>
+              <el-option-group :label="`${sel.metaName}（聚合对象自身）`">
+                <el-option
+                  v-for="item in selMetaFields"
+                  :key="`::${item.id}`"
+                  :value="`::${item.id}`"
+                  :label="`${item.label}（${item.name}）· ${dataTypeMap[item.dataType] || item.dataType || ''}`"
+                ></el-option>
+              </el-option-group>
+              <el-option-group
+                v-for="candidate in segCandidates"
+                :key="candidate.flag"
+                :label="`${candidate.title || candidate.relatedName}（${candidate.relatedName} · ${relTypeLabel(candidate.relType) || '关联'}）`"
+              >
+                <el-option
+                  v-for="item in metaFieldsMap[candidate.relatedMetaId] || []"
+                  :key="`@${candidate.flag}::${item.id}`"
+                  :value="`@${candidate.flag}::${item.id}`"
+                  :label="`${item.label}（${item.name}）· ${dataTypeMap[item.dataType] || item.dataType || ''}`"
+                ></el-option>
+              </el-option-group>
+            </el-select>
+            <span v-else-if="row.DATA_SOURCE === 'formula' && formulaRefs(row).length" class="union-panel__refs">
+              <span v-for="(ref, index) in formulaRefs(row)" :key="index" class="union-panel__ref">{{ ref }}</span>
+            </span>
+            <span v-else-if="row.DATA_SOURCE === 'formula'" class="union-panel__none">公式中引用的字段</span>
+            <el-input
+              v-else
+              :model-value="row.FIXED_VALUE"
+              size="small"
+              placeholder="输入固定值"
+              @change="saveRow(row, { DATA_SOURCE: 'fixed', FIXED_VALUE: $event, SOURCE_CODE: '', SOURCE_META_ID: '', REL_FLAG: '', SOURCE_FIELD: '', VALUE_FN: '', DISTINCT_FLAG: '', SOURCE_EXPR: '', FORMULA: '' })"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="公式" width="200">
+          <template v-slot="{ row }">
+            <div v-if="row.DATA_SOURCE === 'formula'" class="union-panel__formula-cell">
+              <div :class="['union-panel__formula-box', { 'is-empty': !row.FORMULA }]" :title="row.FORMULA">
+                {{ row.FORMULA || '未设置公式' }}
+              </div>
+              <el-button size="small" @click="openFormula(row)">fx 编辑</el-button>
+            </div>
+            <span v-else class="union-panel__none">—</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="函数" width="112">
+          <template v-slot="{ row }">
+            <el-select
+              v-if="matched(row) && isManyRow(row)"
+              :model-value="row.VALUE_FN || ''"
+              size="small"
+              @change="onValueFnChange(row, $event)"
+            >
+              <el-option v-for="fn in valueFns" :key="fn.value" :value="fn.value" :label="fn.label"></el-option>
+            </el-select>
+            <span v-else class="union-panel__none">—</span>
+            <el-checkbox
+              v-if="matched(row) && isManyRow(row) && ['sum', 'avg', 'count'].includes(row.VALUE_FN)"
+              :model-value="row.DISTINCT_FLAG === '1'"
+              @change="saveRow(row, { DISTINCT_FLAG: $event ? '1' : '' })"
+            >去重</el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column label="数据匹配" width="110">
+          <template v-slot="{ row }">
+            <el-button v-if="matched(row)" type="primary" link size="small" icon="el-icon-sort" @click="openCodeMap(row)">
+              代码映射{{ codeMapCount(row) ? `·${codeMapCount(row)}` : '' }}
+            </el-button>
+            <span v-else class="union-panel__none">—</span>
+          </template>
+        </el-table-column>
+        <el-table-column width="46" align="center">
+          <template v-slot="{ row }">
+            <i
+              v-if="row.ID"
+              class="el-icon-delete union-panel__del"
+              title="清除该列映射"
+              @click="clearMapping(row)"
+            ></i>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <div class="union-panel__empty">暂无视图字段，请先在「字段配置」页签中添加</div>
+        </template>
+      </el-table>
+    </template>
+
+    <!--
+      弹窗/抽屉统一放在这个固定容器里：el-dialog 的 append-to-body 会在打开时把自身根节点搬到
+      document.body，如果它们直接和上面的 v-if / v-else-if 内容做兄弟节点，分支切换时 Vue 需要
+      「插到弹窗节点之前」，而 Vue 的 insert() 在参照节点已不属于该父节点时会静默跳过，导致映射
+      表格等新增节点被丢弃（表现为新增聚合对象后下方不显示字段，返回重进才有）。
+    -->
+    <div class="union-panel__overlays">
+      <el-dialog
+        class="dialog"
+        title="添加聚合对象"
+        width="520px"
+        v-model="addVisible"
+        append-to-body
+      >
+        <el-form label-position="top" size="small">
+          <el-form-item label="聚合对象" required>
+            <!-- 通用对象查找：点击弹出查找页面，范围限定为后端返回的候选对象 -->
+            <epx-object
+              v-if="addVisible"
+              :model-value="addForm.metaId"
+              :field-configs="unionObjectFieldConfigs"
+              @update:model-value="onPickObject"
+            ></epx-object>
+            <div v-if="!unionCandidates.length && candidatesError" class="union-panel__hint is-error">
+              候选对象加载失败：{{ candidatesError }}
+            </div>
+            <div v-else-if="!unionCandidates.length" class="union-panel__hint">
+              暂无可选对象（需与主对象同一数据库源且有物理表）
+            </div>
+            <div v-else class="union-panel__hint">仅可选择与主对象同一数据库源的对象；分支数据与主段按 UNION ALL 合并</div>
+          </el-form-item>
+          <el-form-item label="分支编号" required>
+            <el-input v-model="addForm.code" placeholder="视图内唯一，创建后不可修改，如 RESIGNED"></el-input>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <el-button size="small" @click="addVisible = false">取消</el-button>
+          <el-button type="primary" size="small" :loading="saving" :disabled="!addForm.metaId || !addForm.code" @click="saveUnion">确定</el-button>
+        </template>
+      </el-dialog>
+
+      <epx-base-entity-view-config-formula-dialog
+        v-model:visible="formulaVisible"
+        :view-id="viewId"
+        :system="system"
+        :union-id="selId"
+        :meta-id="sel ? sel.metaId : ''"
+        :sources="segSources"
+        :field-name="formulaRow ? formulaRow.NAME : ''"
+        :value="formulaRow ? formulaRow.FORMULA : ''"
+        @confirm="onFormulaConfirm"
+      ></epx-base-entity-view-config-formula-dialog>
+
+      <el-dialog
+        class="dialog"
+        title="代码映射"
+        width="460px"
+        v-model="codeMapVisible"
+        append-to-body
+      >
+        <div class="union-panel__cm-sub">
+          将视图字段「{{ codeMapRow ? codeMapRow.NAME : '' }}」的显示值映射为源值（生成 CASE），如 男 → 1
+        </div>
+        <div v-for="(kvRow, index) in codeMapRows" :key="index" class="union-panel__kv">
+          <el-input v-model="kvRow.key" size="small" placeholder="显示值"></el-input>
+          <i class="el-icon-right"></i>
+          <el-input v-model="kvRow.value" size="small" placeholder="源值"></el-input>
+          <i class="el-icon-delete union-panel__kv-del" @click="codeMapRows.splice(index, 1)"></i>
+        </div>
+        <el-button type="primary" link size="small" icon="el-icon-plus" @click="codeMapRows.push({ key: '', value: '' })">添加映射</el-button>
+        <template #footer>
+          <el-button size="small" @click="codeMapVisible = false">取消</el-button>
+          <el-button type="primary" size="small" @click="saveCodeMap">确定</el-button>
+        </template>
+      </el-dialog>
+
+      <epx-scope-drawer
+        v-if="scopeTarget"
+        v-model="scopeParams"
+        v-model:visible="scopeVisible"
+        :meta-id="scopeTarget.metaId"
+        @change-params="saveScope"
+      ></epx-scope-drawer>
+    </div>
+  </div>
+</template>
+
+<script>
+import FormulaDialog from './FormulaDialog.vue'
+import { relTypeLabel, VALUE_FNS, UNION_MAPPING_BEAN_KEYS, SQL_IDENTIFIER_RE, parseFormulaTokens } from './constants'
+
+export default {
+  name: 'epx-base-entity-view-config-union-panel',
+  components: {
+    [FormulaDialog.name]: FormulaDialog
+  },
+  props: {
+    viewId: String,
+    system: String,
+    viewName: String,
+    // 已配置聚合对象 [{ id, code, metaId, metaName, metaCode, scope, sort }]
+    unions: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 可选聚合对象（与主对象同 DB_SOURCE）[{ metaId, name, code }]
+    unionCandidates: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 候选对象加载失败原因（如接口权限未绑定），空表示加载成功
+    candidatesError: String,
+    // 全部关联源（含主段），按 ownerCode 分段
+    sources: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 各段主对象的关联候选：metaId -> candidates
+    candidatesMap: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    fields: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    metaFieldsMap: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    // 字段类型代码表（FM_DATA_TYPE）编号 -> 名称
+    dataTypeMap: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    // 各聚合对象的列映射（ViewConfig 统一加载）：unionId -> FM_VIEW_UNION_FIELD data 数组
+    mappingsMap: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    mappingLoading: Boolean
+  },
+  data () {
+    return {
+      selId: '',
+      rows: [],
+      valueFns: VALUE_FNS,
+      saving: false,
+      addVisible: false,
+      addForm: { metaId: '', code: '' },
+      formulaVisible: false,
+      formulaRow: null,
+      codeMapVisible: false,
+      codeMapRow: null,
+      codeMapRows: [],
+      scopeVisible: false,
+      scopeTarget: null,
+      scopeParams: []
+    }
+  },
+  computed: {
+    sel () {
+      return this.unions.find(union => union.id === this.selId) || null
+    },
+    // 本聚合段的关联源（OWNER_CODE = 分支编号）
+    segSources () {
+      if (!this.sel) return []
+      return this.sources.filter(source => source.ownerCode === this.sel.code)
+    },
+    segCandidates () {
+      return (this.sel && this.candidatesMap[this.sel.metaId]) || []
+    },
+    selMetaFields () {
+      return (this.sel && this.metaFieldsMap[this.sel.metaId]) || []
+    },
+    selMappings () {
+      return this.mappingsMap[this.selId] || []
+    },
+    // 通用对象字段（epx-object）配置：点击弹出对象查找页面，范围限定为 objectCandidates 返回的候选
+    unionObjectFieldConfigs () {
+      return {
+        state: 'ADD',
+        attriName: 'UNION_META_ID',
+        attriLabel: '聚合对象',
+        dataType: 'object',
+        codeKey: 'FM_ENTITY',
+        placeholder: '点击选择要并入视图的对象',
+        scopeParams: [{
+          field: 'ID',
+          mode: 'in',
+          values: this.unionCandidates.map(item => item.metaId).join(',')
+        }]
+      }
+    },
+    mappedCount () {
+      return this.rows.filter(row => row.ID).length
+    },
+    scopeSummary () {
+      if (!this.sel) return ''
+      try {
+        const scope = this.sel.scope ? JSON.parse(this.sel.scope) : null
+        const count = scope && scope.scopeParams ? scope.scopeParams.length : 0
+        return count ? `${count} 个过滤条件` : '全部数据'
+      } catch (e) {
+        return '全部数据'
+      }
+    }
+  },
+  watch: {
+    unions: {
+      handler () {
+        if (!this.unions.some(union => union.id === this.selId)) {
+          this.selId = this.unions.length ? this.unions[0].id : ''
+        }
+      },
+      immediate: true
+    },
+    selId: {
+      handler () {
+        this.buildRows()
+      },
+      immediate: true
+    },
+    selMappings () {
+      this.buildRows()
+    },
+    fields () {
+      this.buildRows()
+    }
+  },
+  methods: {
+    relTypeLabel,
+    requestOptions () {
+      return this.system ? { system: this.system } : {}
+    },
+    metaFieldLabel (metaId, attrId) {
+      const field = (this.metaFieldsMap[metaId] || []).find(item => item.id === attrId || item.name === attrId)
+      return field ? field.label : attrId
+    },
+    // ---- 列映射数据 ----
+    // 以主视图列为基准，按 FIELD_CODE 合并当前分支的映射
+    buildRows () {
+      if (!this.selId) {
+        this.rows = []
+        return
+      }
+      const mappings = this.selMappings
+      this.rows = this.fields.map(field => {
+        const mapping = mappings.find(item => item.FIELD_CODE === field.CODE) || {}
+        return {
+          NAME: field.NAME,
+          CODE: field.CODE,
+          VIEW_TYPE: field.VIEW_TYPE,
+          ID: mapping.ID || '',
+          DATA_SOURCE: mapping.DATA_SOURCE || '',
+          SOURCE_CODE: mapping.SOURCE_CODE || '',
+          // 保存期入参（不落库）：改绑关联对象字段时设置，后端自动登记源
+          SOURCE_META_ID: '',
+          REL_FLAG: '',
+          SOURCE_FIELD: mapping.SOURCE_FIELD || '',
+          SOURCE_EXPR: mapping.SOURCE_EXPR || '',
+          VALUE_FN: mapping.VALUE_FN || '',
+          DISTINCT_FLAG: mapping.DISTINCT_FLAG || '',
+          FORMULA: mapping.FORMULA || '',
+          FIXED_VALUE: mapping.FIXED_VALUE || '',
+          CODE_MAP: mapping.CODE_MAP || '',
+          ORDER_FIELD: mapping.ORDER_FIELD || '',
+          ORDER_DIR: mapping.ORDER_DIR || ''
+        }
+      })
+    },
+    matched (row) {
+      return (row.DATA_SOURCE || 'field') === 'field' && !!row.SOURCE_FIELD
+    },
+    // 下拉值：自身字段 `::字段id`；关联对象字段 `@flag::字段id`（存量按源编号的映射解析回 flag）
+    matchValue (row) {
+      if (!this.matched(row)) return ''
+      if (row.REL_FLAG) return `@${row.REL_FLAG}::${row.SOURCE_FIELD}`
+      if (!row.SOURCE_CODE) return `::${row.SOURCE_FIELD}`
+      const source = this.segSources.find(item => item.code === row.SOURCE_CODE)
+      return source ? `@${source.flag}::${row.SOURCE_FIELD}` : ''
+    },
+    rowRelType (row) {
+      if (row.REL_FLAG) {
+        const candidate = this.segCandidates.find(item => item.flag === row.REL_FLAG)
+        return (candidate && candidate.relType) || ''
+      }
+      if (!row.SOURCE_CODE) return ''
+      const source = this.segSources.find(item => item.code === row.SOURCE_CODE)
+      return (source && source.relType) || ''
+    },
+    isManyRow (row) {
+      return this.rowRelType(row) === '1'
+    },
+    // 打开映射下拉时懒加载各关联候选对象的字段
+    onMatchDropdown (open) {
+      if (!open) return
+      this.segCandidates.forEach(candidate => {
+        if (!this.metaFieldsMap[candidate.relatedMetaId]) this.$emit('load-meta-fields', candidate.relatedMetaId)
+      })
+    },
+    formulaRefs (row) {
+      return parseFormulaTokens(row.FORMULA).map(token => {
+        if (token.code) {
+          const field = this.fields.find(item => item.CODE === token.code)
+          if (field) return field.NAME
+          return `${this.sel.metaName}/${this.metaFieldLabel(this.sel.metaId, token.code)}`
+        }
+        // 聚合段 token 里 MAIN 表示聚合对象自身
+        if (token.source === 'MAIN') {
+          return `${this.sel.metaName}/${this.metaFieldLabel(this.sel.metaId, token.field)}`
+        }
+        // 传输态 token [metaId@relFlag.字段id]（保存后后端会重写为源编号形式）
+        if (token.relFlag) {
+          const candidate = this.segCandidates.find(item => item.flag === token.relFlag)
+          const name = (candidate && (candidate.title || candidate.relatedName)) || token.relFlag
+          return `${name}/${this.metaFieldLabel(token.metaId, token.field)}`
+        }
+        const source = this.segSources.find(item => item.code === token.source)
+        return source
+          ? `${source.name}/${this.metaFieldLabel(source.metaId, token.field)}`
+          : `${token.source}.${token.field}`
+      })
+    },
+    // ---- 列映射保存 ----
+    saveRow (row, patch) {
+      Object.assign(row, patch)
+      const params = {
+        'bean.ENTITY_ID': this.viewId,
+        'bean.UNION_ID': this.selId,
+        'bean.FIELD_CODE': row.CODE
+      }
+      if (row.ID) params['bean.ID'] = row.ID
+      UNION_MAPPING_BEAN_KEYS.forEach(key => {
+        params[`bean.${key}`] = row[key] === undefined || row[key] === null ? '' : row[key]
+      })
+      this.$http.$post({
+        entityId: 'FM_VIEW_UNION_FIELD',
+        action: 'saveMapping',
+        ...params
+      }, this.requestOptions()).then(() => {
+        this.$message.success('已保存')
+        this.$emit('change-mappings', this.selId)
+        this.$emit('state-change')
+      }).catch(error => {
+        this.$message.error(error.message || '保存失败')
+        this.$emit('change-mappings', this.selId)
+      })
+    },
+    clearMapping (row) {
+      if (!row.ID) {
+        this.buildRows()
+        return
+      }
+      this.$confirm(`确定清除列「${row.NAME}」的映射吗？清除后该列在本分支输出 NULL`, '提示', { type: 'warning' }).then(() => {
+        return this.$http.$post({
+          entityId: 'FM_VIEW_UNION_FIELD',
+          action: 'deleteMapping',
+          id: row.ID
+        }, this.requestOptions()).then(() => {
+          this.$message.success('已清除')
+          this.$emit('change-mappings', this.selId)
+          this.$emit('state-change')
+        }).catch(error => {
+          this.$message.error(error.message || '清除失败')
+        })
+      }).catch(() => {
+        // 取消清除时重建行数据，恢复下拉框显示
+        this.buildRows()
+      })
+    },
+    // 切换数据来源只改本地，待填入具体取值（字段/公式/固定值）后才保存
+    onDataSourceChange (row, value) {
+      Object.assign(row, { DATA_SOURCE: value })
+    },
+    onMatchChange (row, value) {
+      if (!value) {
+        this.clearMapping(row)
+        return
+      }
+      const [sourcePart, fieldId] = value.split('::')
+      const patch = {
+        DATA_SOURCE: 'field',
+        SOURCE_CODE: '',
+        SOURCE_META_ID: '',
+        REL_FLAG: '',
+        SOURCE_FIELD: fieldId,
+        FORMULA: '',
+        FIXED_VALUE: ''
+      }
+      let relType = ''
+      if (sourcePart.startsWith('@')) {
+        // 关联对象字段：带 SOURCE_META_ID + REL_FLAG，后端按当前分支自动登记/复用关联源
+        const flag = sourcePart.slice(1)
+        const candidate = this.segCandidates.find(item => item.flag === flag) || {}
+        patch.SOURCE_META_ID = candidate.relatedMetaId || ''
+        patch.REL_FLAG = flag
+        relType = candidate.relType || ''
+      }
+      if (relType === '1') {
+        if (!row.VALUE_FN) patch.VALUE_FN = 'raw'
+      } else {
+        patch.VALUE_FN = ''
+        patch.DISTINCT_FLAG = ''
+        patch.SOURCE_EXPR = ''
+        patch.ORDER_FIELD = ''
+        patch.ORDER_DIR = ''
+      }
+      this.saveRow(row, patch)
+    },
+    onValueFnChange (row, value) {
+      const patch = { VALUE_FN: value }
+      if (!['raw', 'last', 'concat'].includes(value)) {
+        patch.ORDER_FIELD = ''
+        patch.ORDER_DIR = ''
+      }
+      if (!['sum', 'avg', 'max', 'min', 'count'].includes(value)) {
+        patch.SOURCE_EXPR = ''
+      }
+      if (!['sum', 'avg', 'count'].includes(value)) {
+        patch.DISTINCT_FLAG = ''
+      }
+      this.saveRow(row, patch)
+    },
+    openFormula (row) {
+      this.formulaRow = row
+      this.formulaVisible = true
+    },
+    onFormulaConfirm (expr) {
+      if (!this.formulaRow) return
+      this.saveRow(this.formulaRow, {
+        DATA_SOURCE: 'formula',
+        FORMULA: expr,
+        SOURCE_CODE: '',
+        SOURCE_META_ID: '',
+        REL_FLAG: '',
+        SOURCE_FIELD: '',
+        VALUE_FN: '',
+        DISTINCT_FLAG: '',
+        SOURCE_EXPR: '',
+        FIXED_VALUE: '',
+        ORDER_FIELD: '',
+        ORDER_DIR: ''
+      })
+      this.formulaVisible = false
+    },
+    codeMapCount (row) {
+      try {
+        const map = row.CODE_MAP ? JSON.parse(row.CODE_MAP) : {}
+        return Object.keys(map).length
+      } catch (e) {
+        return 0
+      }
+    },
+    openCodeMap (row) {
+      this.codeMapRow = row
+      let map = {}
+      try {
+        map = row.CODE_MAP ? JSON.parse(row.CODE_MAP) : {}
+      } catch (e) {
+        map = {}
+      }
+      this.codeMapRows = Object.keys(map).map(key => ({ key, value: map[key] }))
+      this.codeMapVisible = true
+    },
+    saveCodeMap () {
+      const map = {}
+      this.codeMapRows.forEach(kvRow => {
+        if (kvRow.key !== '') map[kvRow.key] = kvRow.value
+      })
+      this.saveRow(this.codeMapRow, { CODE_MAP: Object.keys(map).length ? JSON.stringify(map) : '' })
+      this.codeMapVisible = false
+    },
+    // ---- 聚合对象增删 ----
+    openAdd () {
+      this.addForm = { metaId: '', code: '' }
+      // 候选为空（如权限修复后）时打开弹窗自动重试加载
+      if (!this.unionCandidates.length) this.$emit('reload-candidates')
+      this.addVisible = true
+    },
+    // 对象查找选中/清空：v = { id: metaId, name } | null
+    onPickObject (v) {
+      if (!v || !v.id) {
+        this.addForm.metaId = ''
+        this.addForm.code = ''
+        return
+      }
+      const candidate = this.unionCandidates.find(item => item.metaId === v.id)
+      if (!candidate) {
+        this.$message.warning('该对象不在可选聚合对象范围内')
+        return
+      }
+      this.addForm.metaId = v.id
+      this.onCandidateChange(v.id)
+    },
+    // 分支编号取对象编码大写；已被占用则依次加 _2/_3 后缀
+    onCandidateChange (metaId) {
+      const candidate = this.unionCandidates.find(item => item.metaId === metaId)
+      const base = ((candidate && candidate.code) || '').replace(/[^A-Za-z0-9]+/g, '_').replace(/^_+|_+$/g, '').toUpperCase() || 'U1'
+      const usedCodes = this.unions.map(union => (union.code || '').toUpperCase())
+      let code = base === 'MAIN' ? 'MAIN_2' : base
+      let index = 2
+      while (usedCodes.includes(code)) {
+        code = `${base}_${index++}`
+      }
+      this.addForm.code = code
+    },
+    saveUnion () {
+      const candidate = this.unionCandidates.find(item => item.metaId === this.addForm.metaId)
+      if (!candidate) return
+      const code = this.addForm.code.trim().toUpperCase()
+      if (!SQL_IDENTIFIER_RE.test(code)) {
+        this.$message.warning('分支编号仅允许字母、数字、下划线，且不能以数字开头')
+        return
+      }
+      if (code === 'MAIN') {
+        this.$message.warning('「MAIN」为主段保留编号，请更换')
+        return
+      }
+      if (this.unions.some(union => (union.code || '').toUpperCase() === code)) {
+        this.$message.warning(`分支编号「${code}」已存在`)
+        return
+      }
+      const nextSort = this.unions.reduce((acc, union) => Math.max(acc, Number(union.sort) || 0), 0) + 1
+      this.saving = true
+      this.$http.$post({
+        entityId: 'FM_VIEW_UNION',
+        action: 'save',
+        'bean.ENTITY_ID': this.viewId,
+        'bean.UNION_CODE': code,
+        'bean.UNION_META_ID': candidate.metaId,
+        'bean.SORT': nextSort
+      }, this.requestOptions()).then(id => {
+        this.$message.success('添加成功')
+        this.addVisible = false
+        if (id) this.selId = id
+        this.$emit('change')
+      }).catch(error => {
+        this.$message.error(error.message || '添加失败')
+      }).finally(() => {
+        this.saving = false
+      })
+    },
+    removeUnion (union) {
+      this.$confirm(
+        `删除聚合对象「${union.metaName}（${union.code}）」将级联删除该分支的全部列映射与本段关联源，确定删除吗？`,
+        '提示',
+        { type: 'warning' }
+      ).then(() => {
+        return this.$http.$post({
+          entityId: 'FM_VIEW_UNION',
+          action: 'delete',
+          id: union.id
+        }, this.requestOptions()).then(() => {
+          this.$message.success('删除成功')
+          this.$emit('change')
+        }).catch(error => {
+          this.$message.error(error.message || '删除失败')
+        })
+      }).catch(() => {})
+    },
+    // ---- 分支数据范围（UNION_SCOPE）----
+    openScope () {
+      if (!this.sel) return
+      this.scopeTarget = { metaId: this.sel.metaId, row: this.sel }
+      try {
+        const scope = this.sel.scope ? JSON.parse(this.sel.scope) : null
+        this.scopeParams = (scope && scope.scopeParams) || []
+      } catch (e) {
+        this.scopeParams = []
+      }
+      this.$nextTick(() => {
+        this.scopeVisible = true
+      })
+    },
+    saveScope (scopeParams) {
+      const target = this.scopeTarget
+      if (!target) return
+      const scopeJson = scopeParams && scopeParams.length ? JSON.stringify({ scopeParams }) : ''
+      const row = target.row
+      this.$http.$post({
+        entityId: 'FM_VIEW_UNION',
+        action: 'save',
+        'bean.ID': row.id,
+        'bean.ENTITY_ID': this.viewId,
+        'bean.UNION_CODE': row.code,
+        'bean.UNION_META_ID': row.metaId,
+        'bean.UNION_SCOPE': scopeJson,
+        'bean.SORT': row.sort || ''
+      }, this.requestOptions()).then(() => {
+        this.$message.success('数据范围已保存')
+        this.$emit('change')
+      }).catch(error => {
+        this.$message.error(error.message || '保存失败')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.union-panel {
+  background: var(--epx-bg-card);
+  border-radius: var(--epx-radius-l);
+  box-shadow: var(--epx-shadow-s);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  &__tabbar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--epx-space-3);
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--epx-border);
+  }
+  &__tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 32px;
+    padding: 0 12px;
+    border-radius: var(--epx-radius-base);
+    background: var(--epx-bg);
+    color: var(--color-text-secondary);
+    font-size: var(--epx-font-size-s);
+    cursor: pointer;
+    transition: all 0.12s;
+    &:hover {
+      @include font_color_primary;
+    }
+    &.is-active {
+      font-weight: 600;
+      @include font_color_primary;
+      @include bg_color_primary(0.1);
+    }
+  }
+  &__tab-code {
+    font-family: ui-monospace, Menlo, monospace;
+    font-size: 10.5px;
+    font-weight: 500;
+    color: var(--color-text-assistant);
+  }
+  &__tab-x {
+    font-size: 11px;
+    color: var(--color-text-disabled);
+    margin-left: 2px;
+    &:hover {
+      color: #f56c6c;
+    }
+  }
+  &__tab-add {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    height: 32px;
+    padding: 0 12px;
+    border-radius: var(--epx-radius-base);
+    border: 1px dashed #c6ccd8;
+    color: var(--color-text-secondary);
+    font-size: var(--epx-font-size-s);
+    cursor: pointer;
+    transition: all 0.12s;
+    &:hover {
+      @include font_color_primary;
+      @include border_color_primary;
+    }
+  }
+  &__blank {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--epx-space-3);
+    padding: 60px 0;
+    color: var(--color-text-disabled);
+    font-size: var(--epx-font-size-s);
+    text-align: center;
+    line-height: 1.8;
+    i {
+      font-size: 40px;
+    }
+  }
+  &__seg-bar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--epx-space-3);
+    padding: 9px 18px;
+    background: var(--epx-bg);
+    border-bottom: 1px solid var(--epx-border);
+  }
+  &__seg-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-secondary);
+    flex: 0 0 auto;
+    b {
+      @include font_color_primary;
+    }
+  }
+  &__spacer {
+    flex: 1;
+  }
+  &__scope-text {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-assistant);
+  }
+  &__map-sub {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 12px 18px;
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-secondary);
+    b {
+      @include font_color_primary;
+    }
+  }
+  &__total {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-assistant);
+    b {
+      @include font_color_primary;
+    }
+  }
+  &__map-table {
+    flex: 1;
+    .el-select {
+      width: 100%;
+    }
+  }
+  &__vf-name {
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+  &__arrow {
+    transform: rotate(90deg);
+    color: #d4dae3;
+    font-size: var(--epx-font-size-l);
+    &.is-set {
+      @include font_color_primary;
+    }
+  }
+  &__match {
+    &.is-matched {
+      // EP2 el-input 的"边框"其实是 .el-input__wrapper 上的 inset box-shadow（.el-input__inner
+      // 被 EP 显式设了 border:none）；照抄 border-color 只会染中一条宽度为 0 的边框，界面上不会
+      // 有任何变化。.is-focus 变体是为了不被 EP 自己的聚焦态盖回去（同 FormItem.vue/Login.vue
+      // 已踩过的坑，此处对齐同一写法，只是用主题色不用危险色）。
+      :deep(.el-input__wrapper),
+      :deep(.el-input__wrapper.is-focus) {
+        @include box_shadow_primary(0, 0, 0, 1px, 0.4, inset);
+      }
+      :deep(.el-input__inner) {
+        color: var(--color-text-primary);
+      }
+    }
+  }
+  &__refs {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+  &__ref {
+    font-size: 11px;
+    border-radius: var(--epx-radius-base);
+    padding: 1px 7px;
+    background: #faf6ff;
+    color: #8a5fc0;
+  }
+  &__formula-cell {
+    display: flex;
+    align-items: center;
+    gap: var(--epx-space-2);
+  }
+  &__formula-box {
+    flex: 1;
+    min-width: 0;
+    padding: 4px 10px;
+    background: var(--epx-bg);
+    border: 1px solid #d8ecdd;
+    border-radius: var(--epx-radius-base);
+    font-family: ui-monospace, Menlo, monospace;
+    font-size: var(--epx-font-size-s);
+    color: #3a7d4e;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &.is-empty {
+      background: var(--epx-bg);
+      border-color: var(--epx-border);
+      color: var(--color-text-disabled);
+      font-family: inherit;
+    }
+  }
+  &__del {
+    color: var(--color-text-disabled);
+    cursor: pointer;
+    &:hover {
+      color: #f56c6c;
+    }
+  }
+  &__cm-sub {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-secondary);
+    margin-bottom: var(--epx-space-3);
+    line-height: 1.6;
+  }
+  &__kv {
+    display: flex;
+    align-items: center;
+    gap: var(--epx-space-2);
+    margin-bottom: var(--epx-space-2);
+    i {
+      color: var(--color-text-disabled);
+      flex: 0 0 auto;
+    }
+  }
+  &__kv-del {
+    cursor: pointer;
+    &:hover {
+      color: #f56c6c !important;
+    }
+  }
+  &__mono {
+    font-family: ui-monospace, Menlo, monospace;
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-secondary);
+  }
+  &__none {
+    color: var(--color-text-disabled);
+  }
+  &__empty {
+    color: var(--color-text-disabled);
+    padding: 30px 0;
+  }
+  &__hint {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-disabled);
+    line-height: 1.5;
+    margin-top: 4px;
+    &.is-error {
+      color: #f56c6c;
+    }
+  }
+}
+</style>