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

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

@@ -0,0 +1,153 @@
+<template>
+  <el-dialog
+    class="epx-view-config-formula-dialog"
+    fullscreen
+    append-to-body
+    :model-value="visible"
+    :close-on-click-modal="false"
+    :show-close="false"
+    @close="$emit('update:visible', false)"
+  >
+    <epx-formula-editor
+      v-if="visible && !loading"
+      :value="{ el: value || '' }"
+      :param-list="paramList"
+      :db-function-meta-id="dbFunctionMetaId"
+      ai-app-id=""
+      show-header
+      @confirm="onConfirm"
+      @cancel="$emit('update:visible', false)"
+    ></epx-formula-editor>
+    <div v-else v-loading="loading" class="epx-view-config-formula-dialog__loading"></div>
+  </el-dialog>
+</template>
+
+<script>
+import { relTypeLabel } from './constants'
+
+// 数据库函数库对象：按编码引用（跨环境记录 id 不同，编码全局一致）
+const DB_FORMULA_META_ID = 'FM_DB_FORMULA'
+
+export default {
+  name: 'epx-base-entity-view-config-formula-dialog',
+  props: {
+    visible: Boolean,
+    viewId: String,
+    system: String,
+    fieldName: String,
+    value: String,
+    // 聚合段公式必传聚合对象 id；空为主段。token 里 MAIN 表示「当前段主对象」
+    unionId: String,
+    // 当前段主对象 metaId（主段=视图主对象，聚合段=聚合对象），用于拉主对象字段与关联候选
+    metaId: String,
+    // 保留父组件已加载的关联源输入；公式参数以 formulaTokens 返回的完整字段清单为准
+    sources: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      dbFunctionMetaId: DB_FORMULA_META_ID,
+      viewFields: [],
+      tokenSources: []
+    }
+  },
+  computed: {
+    // 参数树包含视图列、当前段主对象和已登记关联源；同关系的多个源实例按 SOURCE_CODE 分开展示。
+    paramList () {
+      const groups = []
+      if (this.viewFields.length) {
+        groups.push({
+          code: 'VIEW_FIELDS',
+          text: '本视图列',
+          children: this.viewFields.map(field => ({
+            code: `[${field.code}]`,
+            text: field.name || field.code,
+            type: 'string'
+          }))
+        })
+      }
+      const mainSource = this.tokenSources.find(source => source.sourceCode === 'MAIN')
+      if (mainSource && (mainSource.fields || []).length) {
+        groups.push({
+          code: 'MAIN',
+          text: `${mainSource.metaName || mainSource.sourceName || '当前段主对象'}（主对象）`,
+          children: mainSource.fields.map(field => ({
+            code: `[MAIN.${field.id}]`,
+            text: field.label,
+            type: 'string'
+          }))
+        })
+      }
+      this.tokenSources.filter(source => source.sourceCode !== 'MAIN').forEach(candidate => {
+        groups.push({
+          code: candidate.sourceCode,
+          text: `${candidate.sourceName || candidate.sourceCode}（实例：${candidate.sourceCode} · ${candidate.metaName || '关联对象'} · ${relTypeLabel(candidate.relType) || '关联'}${candidate.oneToMany ? '，需聚合' : ''}）`,
+          children: (candidate.fields || []).map(field => ({
+            code: `[${candidate.sourceCode}.${field.id}]`,
+            text: field.label,
+            type: 'string'
+          }))
+        })
+      })
+      return groups
+    }
+  },
+  watch: {
+    visible (value) {
+      if (value) this.loadTokens()
+    }
+  },
+  methods: {
+    async loadTokens () {
+      this.loading = true
+      const options = this.system ? { system: this.system } : {}
+      const tokenParams = {
+        entityId: 'FM_VIEW_FIELD',
+        action: 'formulaTokens',
+        viewMetaId: this.viewId
+      }
+      if (this.unionId) tokenParams.unionId = this.unionId
+      try {
+        const tokens = await this.$http.$post(tokenParams, options).catch(() => ({}))
+        this.viewFields = (tokens && tokens.viewFields) || []
+        this.tokenSources = (tokens && tokens.sources) || []
+      } finally {
+        this.loading = false
+      }
+    },
+    onConfirm (payload) {
+      // 数据库模式 el 为 SQL 表达式（不带 #{} 包裹）；防御性剥一层包裹
+      const expr = payload && payload.el
+        ? payload.el.replace(/^#\{([\s\S]*)\}$/, '$1').trim()
+        : ''
+      if (expr) this.$emit('confirm', expr)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.epx-view-config-formula-dialog {
+  &__loading {
+    height: 100vh;
+  }
+}
+</style>
+<!-- append-to-body 弹窗的 el-dialog__header/__body 是 el-dialog 自身模板渲染的元素，不是本组件
+     传入的插槽内容，scoped 的 data-v-x 到不了那一层，必须放非 scoped 全局块才生效。 -->
+<style lang="scss">
+.epx-view-config-formula-dialog {
+  .el-dialog__header {
+    display: none;
+  }
+  .el-dialog__body {
+    padding: 0;
+    height: 100vh;
+  }
+}
+</style>

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

@@ -0,0 +1,367 @@
+<template>
+  <el-dialog
+    class="dialog field-dialog evc-object-field-dialog"
+    title="添加对象字段"
+    width="720px"
+    :model-value="visible"
+    append-to-body
+    @close="$emit('update:visible', false)"
+  >
+    <div class="field-dialog__sub">
+      <span>从主对象及可关联对象中选择字段，支持一次勾选多个；勾选未登记关联对象的字段时自动登记关联源。</span>
+      <el-input
+        v-model="keyword"
+        class="field-dialog__search"
+        size="small"
+        placeholder="搜索字段名称 / 编号"
+        prefix-icon="el-icon-search"
+        clearable
+      ></el-input>
+    </div>
+    <div class="field-dialog__body">
+      <div v-for="group in groups" :key="group.key" class="field-dialog__group">
+        <div class="field-dialog__node">
+          <i
+            :class="['el-icon-caret-right', 'field-dialog__exp', { 'is-open': expanded[group.key] }]"
+            @click="toggleExpand(group)"
+          ></i>
+          <el-checkbox
+            :model-value="isGroupChecked(group)"
+            :indeterminate="isGroupIndeterminate(group)"
+            @change="toggleGroup(group)"
+          ></el-checkbox>
+          <span
+            :class="['field-dialog__node-ic', group.key === 'main' ? 'is-main' : 'is-rel']"
+            @click="toggleExpand(group)"
+          >
+            <i :class="group.key === 'main' ? 'el-icon-s-grid' : 'el-icon-link'"></i>
+          </span>
+          <span class="field-dialog__node-name" @click="toggleExpand(group)">{{ group.name }}</span>
+          <span :class="['field-dialog__badge', group.key === 'main' ? 'is-main' : (group.relType === '1' ? 'is-many' : 'is-one')]">
+            {{ group.badge }}
+          </span>
+          <span v-if="group.key !== 'main'" class="field-dialog__via">
+            {{ group.sourceCode ? `源编号：${group.sourceCode}` : '添加字段时自动登记' }}
+          </span>
+        </div>
+        <div v-if="expanded[group.key]" class="field-dialog__fields">
+          <div v-if="visibleFields(group).length === 0" class="field-dialog__empty">无匹配字段</div>
+          <div
+            v-for="field in visibleFields(group)"
+            :key="field.id"
+            :class="['field-dialog__field', { 'is-added': isAdded(group, field), 'is-on': checked[keyOf(group, field)] }]"
+            @click="toggleField(group, field)"
+          >
+            <el-checkbox
+              :model-value="!!checked[keyOf(group, field)] || isAdded(group, field)"
+              :disabled="isAdded(group, field)"
+              @click.stop
+              @change="toggleField(group, field)"
+            ></el-checkbox>
+            <span class="field-dialog__field-name">{{ field.label }}</span>
+            <span class="field-dialog__field-code">{{ field.name }}</span>
+            <span class="field-dialog__field-type">{{ dataTypeLabel(field.dataType) }}</span>
+            <span v-if="group.relType === '1'" class="field-dialog__fx" title="一对多源，可设置取值函数">fx</span>
+            <span v-if="isAdded(group, field)" class="field-dialog__added">已添加</span>
+          </div>
+        </div>
+      </div>
+      <div v-if="groups.length === 0" class="field-dialog__empty">暂无可选对象</div>
+    </div>
+    <template #footer>
+      <span class="field-dialog__count">已勾选 <b>{{ checkedCount }}</b> 个字段</span>
+      <el-button @click="$emit('update:visible', false)">取消</el-button>
+      <el-button type="primary" :disabled="checkedCount === 0" :loading="saving" @click="confirm">确定添加</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'epx-base-entity-view-config-field-dialog',
+  props: {
+    visible: Boolean,
+    saving: Boolean,
+    // [{ key('main'|关联flag), sourceCode(未登记为空), flag, name, badge, relType, metaId, fields: [{id, name, label, dataType}] }]
+    groups: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 已存在字段 key 集合：`${group.key}::${SOURCE_FIELD}`
+    existingKeys: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 字段类型代码表（FM_DATA_TYPE）编号 -> 名称
+    dataTypeMap: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      keyword: '',
+      expanded: {},
+      checked: {}
+    }
+  },
+  computed: {
+    checkedCount () {
+      return Object.keys(this.checked).filter(key => this.checked[key]).length
+    }
+  },
+  watch: {
+    visible (value) {
+      if (value) {
+        this.keyword = ''
+        this.checked = {}
+        const expanded = {}
+        this.groups.forEach((group, index) => {
+          expanded[group.key] = index === 0
+        })
+        this.expanded = expanded
+      }
+    }
+  },
+  methods: {
+    keyOf (group, field) {
+      return `${group.key}::${field.id}`
+    },
+    dataTypeLabel (dataType) {
+      return this.dataTypeMap[dataType] || dataType
+    },
+    isAdded (group, field) {
+      return this.existingKeys.includes(this.keyOf(group, field))
+    },
+    visibleFields (group) {
+      const keyword = this.keyword.trim().toLowerCase()
+      if (!keyword) return group.fields
+      return group.fields.filter(field => {
+        return (field.label || '').toLowerCase().includes(keyword) || (field.name || '').toLowerCase().includes(keyword)
+      })
+    },
+    selectableFields (group) {
+      return this.visibleFields(group).filter(field => !this.isAdded(group, field))
+    },
+    isGroupChecked (group) {
+      const fields = this.selectableFields(group)
+      return fields.length > 0 && fields.every(field => this.checked[this.keyOf(group, field)])
+    },
+    isGroupIndeterminate (group) {
+      const fields = this.selectableFields(group)
+      const count = fields.filter(field => this.checked[this.keyOf(group, field)]).length
+      return count > 0 && count < fields.length
+    },
+    toggleExpand (group) {
+      const opening = !this.expanded[group.key]
+      this.expanded[group.key] = opening
+      // 展开时通知外层懒加载该对象的字段
+      if (opening) this.$emit('expand', group)
+    },
+    toggleGroup (group) {
+      const allChecked = this.isGroupChecked(group)
+      this.selectableFields(group).forEach(field => {
+        this.checked[this.keyOf(group, field)] = !allChecked
+      })
+    },
+    toggleField (group, field) {
+      if (this.isAdded(group, field)) return
+      const key = this.keyOf(group, field)
+      this.checked[key] = !this.checked[key]
+    },
+    confirm () {
+      const descriptors = []
+      this.groups.forEach(group => {
+        group.fields.forEach(field => {
+          if (this.checked[this.keyOf(group, field)] && !this.isAdded(group, field)) {
+            descriptors.push({ group, field })
+          }
+        })
+      })
+      this.$emit('confirm', descriptors)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.field-dialog {
+  &__sub {
+    display: flex;
+    align-items: center;
+    gap: var(--epx-space-3);
+    padding: var(--epx-space-3) 20px;
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-assistant);
+    border-bottom: 1px solid var(--epx-border);
+    span {
+      flex: 1;
+    }
+  }
+  &__search {
+    width: 220px;
+    flex: 0 0 220px;
+  }
+  &__body {
+    max-height: 50vh;
+    overflow-y: auto;
+    @include scroll-bar;
+  }
+  &__group {
+    border-bottom: 1px solid var(--epx-bg);
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  &__node {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    height: 44px;
+    padding: 0 18px;
+    user-select: none;
+    &:hover {
+      background: var(--epx-bg);
+    }
+  }
+  &__exp {
+    color: var(--color-text-disabled);
+    cursor: pointer;
+    transition: transform 0.15s;
+    &.is-open {
+      transform: rotate(90deg);
+    }
+  }
+  &__node-ic {
+    width: 24px;
+    height: 24px;
+    border-radius: var(--epx-radius-base);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    &.is-main {
+      @include font_color_primary;
+      @include bg_color_primary(0.1);
+    }
+    &.is-rel {
+      background: var(--epx-bg);
+      color: var(--color-text-assistant);
+    }
+  }
+  &__node-name {
+    font-size: var(--epx-font-size-s);
+    font-weight: 600;
+    color: var(--color-text-primary);
+    cursor: pointer;
+  }
+  &__badge {
+    font-size: var(--epx-font-size-s);
+    padding: 1px 8px;
+    border-radius: 10px;
+    font-weight: 600;
+    &.is-main {
+      @include font_color_primary;
+      @include bg_color_primary(0.1);
+    }
+    &.is-one {
+      background: #eef7f0;
+      color: #5aa469;
+    }
+    &.is-many {
+      background: #fff2e6;
+      color: #e08a3c;
+    }
+  }
+  &__via {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-assistant);
+    font-family: ui-monospace, Menlo, monospace;
+  }
+  &__fields {
+    padding: 2px 0 8px;
+    background: var(--epx-bg);
+  }
+  &__field {
+    display: flex;
+    align-items: center;
+    gap: var(--epx-space-3);
+    padding: var(--epx-space-2) 18px 8px 56px;
+    cursor: pointer;
+    transition: background 0.12s;
+    &:hover {
+      @include bg_color_primary(0.06);
+    }
+    &.is-on {
+      @include bg_color_primary(0.08);
+    }
+    &.is-added {
+      cursor: default;
+      opacity: 0.55;
+      &:hover {
+        background: transparent;
+      }
+    }
+  }
+  &__field-name {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-primary);
+  }
+  &__field-code {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-assistant);
+    font-family: ui-monospace, Menlo, monospace;
+  }
+  &__field-type {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-disabled);
+    margin-left: auto;
+  }
+  &__fx {
+    font-size: 10px;
+    font-weight: 700;
+    color: #e08a3c;
+    background: #fff2e6;
+    border-radius: var(--epx-radius-base);
+    padding: 1px 5px;
+    font-style: italic;
+  }
+  &__added {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-disabled);
+    background: var(--epx-bg);
+    border-radius: var(--epx-radius-base);
+    padding: 1px 7px;
+  }
+  &__empty {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-disabled);
+    padding: var(--epx-space-2) 18px 8px 56px;
+  }
+  &__count {
+    float: left;
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-assistant);
+    line-height: 36px;
+    b {
+      @include font_color_primary;
+    }
+  }
+}
+</style>
+<!-- append-to-body 弹窗的 el-dialog__body 是 el-dialog 自身渲染的元素，不是本组件传入的插槽
+     内容，scoped 的 data-v-x 到不了那一层，必须放非 scoped 全局块才生效。
+     ⚠️ 这里故意不用 .field-dialog 这个类名做选择器——packages/business/src/components/
+     viewport/ViewFiedList.vue 的两个 el-dialog 也叫 field-dialog，裸用会漏到那两个弹窗上，
+     模板上专门加了 evc-object-field-dialog 这个更唯一的类名来避免撞车。 -->
+<style lang="scss">
+.evc-object-field-dialog .el-dialog__body {
+  padding: 0;
+}
+</style>