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

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

@@ -0,0 +1,428 @@
+<template>
+  <el-dialog
+    class="dialog source-manager"
+    title="关联源管理"
+    width="900px"
+    :model-value="visible"
+    append-to-body
+    :close-on-click-modal="false"
+    @close="$emit('update:visible', false)"
+  >
+    <el-alert
+      type="info"
+      :closable="false"
+      show-icon
+      title="先创建可复用的数据源实例，再到字段或公式中选择它。"
+      description="同一个关联关系可以创建多个源，例如“全部工资”“最近12个月工资”“仅有效工资”，每个源都能独立设置范围和前 N 条限定。"
+    ></el-alert>
+    <div class="source-manager__toolbar">
+      <el-button type="primary" size="small" icon="el-icon-plus" @click="openCreate">新增关联源</el-button>
+      <span>共 {{ sources.length }} 个源</span>
+    </div>
+    <el-table :data="sources" size="small" border max-height="430">
+      <el-table-column label="所属段" min-width="120">
+        <template v-slot="{ row }">{{ ownerLabel(row.ownerCode) }}</template>
+      </el-table-column>
+      <el-table-column label="源实例" min-width="165">
+        <template v-slot="{ row }">
+          <div class="source-manager__name">{{ row.name }}</div>
+          <code>{{ row.code }}</code>
+        </template>
+      </el-table-column>
+      <el-table-column label="关联" min-width="180">
+        <template v-slot="{ row }">
+          <div>{{ row.title || row.flag }}</div>
+          <span class="source-manager__muted">{{ row.metaName }} · {{ row.relTypeLabel }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="数据范围" width="105" align="center">
+        <template v-slot="{ row }">{{ scopeCount(row.aggScope) ? scopeCount(row.aggScope) + ' 个条件' : '全部数据' }}</template>
+      </el-table-column>
+      <el-table-column label="前 N 条" width="100" align="center">
+        <template v-slot="{ row }">{{ row.topN ? '前 ' + row.topN + ' 条' : '不限定' }}</template>
+      </el-table-column>
+      <el-table-column label="引用" width="70" align="center">
+        <template v-slot="{ row }">{{ referenceCount(row) }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="125" fixed="right">
+        <template v-slot="{ row }">
+          <el-button type="primary" link size="small" @click="openEdit(row)">编辑</el-button>
+          <el-button type="primary" link size="small" class="source-manager__danger" @click="remove(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <template #footer>
+      <el-button size="small" @click="$emit('update:visible', false)">关闭</el-button>
+    </template>
+
+    <el-dialog
+      class="dialog"
+      :title="form.id ? '编辑关联源' : '新增关联源'"
+      width="600px"
+      v-model="editorVisible"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-form label-position="top" size="small">
+        <el-form-item label="所属段" required>
+          <el-select v-model="form.ownerCode" :disabled="!!form.id" @change="onOwnerChange">
+            <el-option v-for="item in ownerOptions" :key="item.code" :value="item.code" :label="item.label"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="关联关系" required>
+          <el-select v-model="form.flag" filterable :disabled="!!form.id" @change="onRelationChange">
+            <el-option
+              v-for="item in candidateOptions"
+              :key="item.flag"
+              :value="item.flag"
+              :label="(item.title || item.relatedName) + '（' + item.relatedName + ' · ' + relTypeLabel(item.relType) + '）'"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="源名称" required>
+          <el-input v-model="form.name" placeholder="例如：最近12个月工资"></el-input>
+          <div class="source-manager__hint">名称用于字段和公式选择，请写清范围或用途。</div>
+        </el-form-item>
+        <el-form-item label="源实例编号">
+          <el-input :model-value="form.code" disabled placeholder="保存后由系统自动生成"></el-input>
+          <div class="source-manager__hint">用于区分同一对象的不同关联实例，并稳定用于公式引用；创建后不可修改。</div>
+        </el-form-item>
+        <el-form-item label="数据范围">
+          <div class="source-manager__scope">
+            <span>{{ scopeSummary }}</span>
+            <el-button size="small" icon="el-icon-set-up" :disabled="!sourceMetaId" @click="scopeVisible = true">设置范围</el-button>
+          </div>
+        </el-form-item>
+        <template v-if="isOneToMany">
+          <el-form-item label="前 N 条（选填）">
+            <el-input-number v-model="form.topN" :min="1" :max="9999" controls-position="right"></el-input-number>
+            <el-button v-if="form.topN" type="primary" link @click="clearTopN">清除限定</el-button>
+            <div class="source-manager__hint">先按下面的排序为每个主记录编号，再只保留前 N 条参与聚合。</div>
+          </el-form-item>
+          <el-form-item v-if="form.topN" label="排序（可多键）" required>
+            <div v-for="(key, index) in form.keys" :key="index" class="source-manager__order">
+              <el-select v-model="key.field" filterable placeholder="排序字段">
+                <el-option
+                  v-for="item in topNFieldOptions"
+                  :key="item.id"
+                  :value="item.id"
+                  :label="item.label + '（' + item.name + '）'"
+                ></el-option>
+              </el-select>
+              <el-select v-model="key.dir" class="source-manager__dir">
+                <el-option value="desc" label="降序（最新在前）"></el-option>
+                <el-option value="asc" label="升序"></el-option>
+              </el-select>
+              <i class="el-icon-delete source-manager__delete" @click="form.keys.splice(index, 1)"></i>
+            </div>
+            <el-button type="primary" link icon="el-icon-plus" @click="form.keys.push({ field: '', dir: 'desc' })">添加排序键</el-button>
+          </el-form-item>
+        </template>
+      </el-form>
+      <template #footer>
+        <el-button size="small" @click="editorVisible = false">取消</el-button>
+        <el-button type="primary" size="small" :loading="saving" @click="save">保存</el-button>
+      </template>
+      <epx-scope-drawer
+        v-if="sourceMetaId"
+        v-model="form.scopeParams"
+        v-model:visible="scopeVisible"
+        :meta-id="sourceMetaId"
+      ></epx-scope-drawer>
+    </el-dialog>
+  </el-dialog>
+</template>
+
+<script>
+import { parseFormulaTokens, relTypeLabel } from './constants'
+
+function emptyForm () {
+  return {
+    id: '',
+    ownerCode: 'MAIN',
+    flag: '',
+    name: '',
+    code: '',
+    scopeParams: [],
+    topN: undefined,
+    keys: []
+  }
+}
+
+export default {
+  name: 'epx-base-entity-view-config-source-manager-dialog',
+  props: {
+    visible: Boolean,
+    viewId: String,
+    system: String,
+    mainMeta: {
+      type: Object,
+      default () { return {} }
+    },
+    sources: {
+      type: Array,
+      default () { return [] }
+    },
+    unions: {
+      type: Array,
+      default () { return [] }
+    },
+    candidatesMap: {
+      type: Object,
+      default () { return {} }
+    },
+    fields: {
+      type: Array,
+      default () { return [] }
+    },
+    unionMappingsMap: {
+      type: Object,
+      default () { return {} }
+    },
+    metaFieldsMap: {
+      type: Object,
+      default () { return {} }
+    }
+  },
+  data () {
+    return {
+      editorVisible: false,
+      scopeVisible: false,
+      saving: false,
+      form: emptyForm()
+    }
+  },
+  computed: {
+    ownerOptions () {
+      return [
+        { code: 'MAIN', metaId: this.mainMeta.id, label: '主段 · ' + (this.mainMeta.name || '主对象') },
+        ...this.unions.map(union => ({
+          code: union.code,
+          metaId: union.metaId,
+          label: '聚合段 · ' + union.metaName + '（' + union.code + '）'
+        }))
+      ]
+    },
+    ownerMetaId () {
+      const owner = this.ownerOptions.find(item => item.code === this.form.ownerCode)
+      return (owner && owner.metaId) || ''
+    },
+    candidateOptions () {
+      return this.candidatesMap[this.ownerMetaId] || []
+    },
+    selectedCandidate () {
+      return this.candidateOptions.find(item => item.flag === this.form.flag) || {}
+    },
+    sourceMetaId () {
+      return this.selectedCandidate.relatedMetaId || ''
+    },
+    isOneToMany () {
+      return this.selectedCandidate.relType === '1'
+    },
+    topNFieldOptions () {
+      return this.metaFieldsMap[this.sourceMetaId] || []
+    },
+    scopeSummary () {
+      return this.form.scopeParams.length
+        ? this.form.scopeParams.length + ' 个过滤条件'
+        : '全部数据（未设置过滤条件）'
+    }
+  },
+  methods: {
+    relTypeLabel,
+    requestOptions () {
+      return this.system ? { system: this.system } : {}
+    },
+    ownerLabel (ownerCode) {
+      const owner = this.ownerOptions.find(item => item.code === (ownerCode || 'MAIN'))
+      return (owner && owner.label) || ownerCode
+    },
+    scopeCount (scope) {
+      try {
+        const parsed = scope ? JSON.parse(scope) : {}
+        return ((parsed && parsed.scopeParams) || []).length
+      } catch (e) {
+        return 0
+      }
+    },
+    allMappings () {
+      return Object.keys(this.unionMappingsMap).reduce(
+        (list, key) => list.concat(this.unionMappingsMap[key] || []),
+        []
+      )
+    },
+    referenceCount (source) {
+      return [...this.fields, ...this.allMappings()].filter(field => {
+        if (field.SOURCE_CODE === source.code) return true
+        return parseFormulaTokens(field.FORMULA).some(token => token.source === source.code)
+      }).length
+    },
+    openCreate () {
+      this.form = emptyForm()
+      this.editorVisible = true
+    },
+    openEdit (source) {
+      let scopeParams = []
+      let keys = []
+      try {
+        const scope = source.aggScope ? JSON.parse(source.aggScope) : {}
+        scopeParams = (scope && scope.scopeParams) || []
+      } catch (e) {
+        scopeParams = []
+      }
+      try {
+        const order = source.topOrder ? JSON.parse(source.topOrder) : []
+        keys = Array.isArray(order) ? order.map(item => ({ field: item.field, dir: item.dir === 'desc' ? 'desc' : 'asc' })) : []
+      } catch (e) {
+        keys = []
+      }
+      this.form = {
+        id: source.id,
+        ownerCode: source.ownerCode || 'MAIN',
+        flag: source.flag,
+        name: source.name,
+        code: source.code,
+        scopeParams,
+        topN: source.topN ? Number(source.topN) : undefined,
+        keys
+      }
+      this.$emit('load-meta-fields', source.metaId)
+      this.editorVisible = true
+    },
+    onOwnerChange () {
+      this.form.flag = ''
+      this.form.name = ''
+      this.form.scopeParams = []
+      this.clearTopN()
+    },
+    onRelationChange () {
+      this.form.name = this.selectedCandidate.title || this.selectedCandidate.relatedName || ''
+      this.form.scopeParams = []
+      this.clearTopN()
+      if (this.sourceMetaId) this.$emit('load-meta-fields', this.sourceMetaId)
+    },
+    clearTopN () {
+      this.form.topN = undefined
+      this.form.keys = []
+    },
+    async save () {
+      if (!this.form.flag) {
+        this.$message.error('请选择关联关系')
+        return
+      }
+      if (!this.form.name.trim()) {
+        this.$message.error('请输入源名称')
+        return
+      }
+      let topN = ''
+      let topOrder = ''
+      if (this.form.topN) {
+        const keys = this.form.keys.filter(item => item.field)
+        if (!keys.length) {
+          this.$message.error('配置前 N 条时，至少需要一个排序键')
+          return
+        }
+        topN = String(this.form.topN)
+        topOrder = JSON.stringify(keys)
+      }
+      this.saving = true
+      try {
+        const params = {
+          entityId: 'FM_VIEW_SOURCE',
+          action: 'save',
+          'bean.ENTITY_ID': this.viewId,
+          'bean.OWNER_CODE': this.form.ownerCode === 'MAIN' ? '' : this.form.ownerCode,
+          'bean.SOURCE_CODE': this.form.code || '',
+          'bean.SOURCE_META_ID': this.sourceMetaId,
+          'bean.REL_FLAG': this.form.flag,
+          'bean.SOURCE_NAME': this.form.name.trim(),
+          'bean.AGG_SCOPE': this.form.scopeParams.length ? JSON.stringify({ scopeParams: this.form.scopeParams }) : '',
+          'bean.TOP_N': topN,
+          'bean.TOP_ORDER': topOrder
+        }
+        if (this.form.id) params['bean.ID'] = this.form.id
+        await this.$http.$post(params, this.requestOptions())
+        this.$message.success('关联源已保存')
+        this.editorVisible = false
+        this.$emit('change')
+      } catch (error) {
+        this.$message.error(error.message || '保存失败')
+      } finally {
+        this.saving = false
+      }
+    },
+    async remove (source) {
+      const count = this.referenceCount(source)
+      if (count) {
+        this.$message.error('该源仍被 ' + count + ' 个字段或公式引用，请先解除引用')
+        return
+      }
+      try {
+        await this.$confirm('确定删除关联源“' + source.name + '”吗？', '删除关联源', { type: 'warning' })
+        await this.$http.$post({
+          entityId: 'FM_VIEW_SOURCE',
+          action: 'delete',
+          id: source.id
+        }, this.requestOptions())
+        this.$message.success('关联源已删除')
+        this.$emit('change')
+      } catch (error) {
+        if (error !== 'cancel' && error !== 'close') this.$message.error(error.message || '删除失败')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.source-manager {
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 16px 0 10px;
+    color: var(--epx-text-secondary);
+  }
+  &__name {
+    color: var(--epx-text);
+    font-weight: 500;
+  }
+  &__muted {
+    color: var(--epx-text-secondary);
+    font-size: 12px;
+  }
+  &__hint {
+    margin-top: 4px;
+    color: var(--epx-text-secondary);
+    font-size: 12px;
+  }
+  &__scope {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  &__order {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+  &__dir {
+    width: 150px;
+  }
+  &__delete {
+    color: #f56c6c;
+    cursor: pointer;
+  }
+  &__danger {
+    color: #f56c6c;
+  }
+  code {
+    color: var(--color-text-secondary);
+    font-size: 12px;
+  }
+  .el-select {
+    width: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,138 @@
+<template>
+  <div v-loading="loading" class="sql-panel">
+    <div class="sql-panel__title">
+      <span class="sql-panel__title-bar"></span>SQL 语句
+      <span class="sql-panel__title-sub">根据当前字段与聚合配置生成的视图查询 SQL（发布时以 CREATE OR REPLACE VIEW 落库）</span>
+      <el-button size="small" icon="el-icon-refresh" @click="$emit('refresh')">刷新</el-button>
+      <el-button size="small" :icon="copied ? 'el-icon-check' : 'el-icon-document-copy'" @click="copy">
+        {{ copied ? '已复制' : '复制 SQL' }}
+      </el-button>
+    </div>
+    <div class="sql-panel__body">
+      <pre v-if="sql" class="sql-panel__pre"><code v-html="highlighted"></code></pre>
+      <div v-else class="sql-panel__empty">暂无 SQL，请先配置字段后刷新</div>
+    </div>
+  </div>
+</template>
+
+<script>
+const SQL_KEYWORDS = /\b(SELECT|FROM|LEFT|RIGHT|INNER|OUTER|JOIN|ON|WHERE|GROUP|ORDER|BY|AS|AND|OR|CASE|WHEN|THEN|ELSE|END|SUM|AVG|MAX|MIN|COUNT|DISTINCT|UNION|ALL|CREATE|REPLACE|VIEW)\b/gi
+
+export default {
+  name: 'epx-base-entity-view-config-sql-panel',
+  props: {
+    sql: String,
+    loading: Boolean
+  },
+  data () {
+    return {
+      copied: false
+    }
+  },
+  computed: {
+    highlighted () {
+      const escaped = (this.sql || '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+      return escaped
+        // .replace(/('[^']*')/g, '<span class="sql-panel__str">$1</span>')
+        .replace(SQL_KEYWORDS, '<span class="sql-panel__kw">$&</span>')
+    }
+  },
+  methods: {
+    copy () {
+      const done = () => {
+        this.copied = true
+        setTimeout(() => {
+          this.copied = false
+        }, 1600)
+      }
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(this.sql || '').then(done)
+      } else {
+        const textarea = document.createElement('textarea')
+        textarea.value = this.sql || ''
+        document.body.appendChild(textarea)
+        textarea.select()
+        document.execCommand('copy')
+        document.body.removeChild(textarea)
+        done()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sql-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;
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: var(--epx-space-2);
+    padding: 13px 18px;
+    font-size: var(--epx-font-size-base);
+    font-weight: 700;
+    color: var(--color-text-title);
+    border-bottom: 1px solid var(--epx-border);
+    .el-button {
+      &:first-of-type {
+        margin-left: auto;
+      }
+    }
+  }
+  &__title-bar {
+    width: 4px;
+    height: 14px;
+    border-radius: 2px;
+    @include bg_color_primary;
+  }
+  &__title-sub {
+    margin-left: 4px;
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-assistant);
+    font-weight: 400;
+  }
+  &__body {
+    padding: 16px 18px;
+  }
+  &__pre {
+    margin: 0;
+    background: #1e2430;
+    border-radius: var(--epx-radius-l);
+    padding: 18px 20px;
+    overflow-x: auto;
+    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+    font-size: 13px;
+    line-height: 1.7;
+    color: #d7dce4;
+    white-space: pre-wrap;
+    word-break: break-all;
+    @include scroll-bar;
+  }
+  &__empty {
+    color: var(--color-text-disabled);
+    font-size: var(--epx-font-size-s);
+    text-align: center;
+    padding: 40px 0;
+  }
+}
+</style>
+<!-- __kw/__str 是 v-html 注入的原始字符串拼出来的 <span>，压根没经过本文件的模板编译，永远
+     拿不到 data-v-x，scoped 选择器匹配不到，必须放非 scoped 全局块。 -->
+<style lang="scss">
+.sql-panel__kw {
+  color: #6cb6ff;
+  font-weight: 600;
+}
+.sql-panel__str {
+  color: #9ed98a;
+}
+</style>