@epxing/business 5.3.0-beta.1 → 5.3.0-beta.3

package/src/components/EntityCheckboxFind.vue

@@ -38,15 +38,19 @@ export default {
     }
   },
   watch: {
-    checked (v) {
-      const result = v.map(item => ({ id: item }))
-      if (result.length === 0) {
-        this.change({})
-      } else {
-        if (this.multiple) {
-          this.change(result, v)
+    checked: {
+      // 兼容选中数组的原地变更，确保角色选择结果同步回表单。
+      deep: true,
+      handler (v) {
+        const result = v.map(item => ({ id: item }))
+        if (result.length === 0) {
+          this.change({})
         } else {
-          this.change(result[0], v[0])
+          if (this.multiple) {
+            this.change(result, v)
+          } else {
+            this.change(result[0], v[0])
+          }
         }
       }
     },

package/src/components/EntityRightFormItem.vue

@@ -248,7 +248,7 @@ export default {
     renderForm () {
       if (this.fieldsConfigs.length > 0) {
         return (
-          <div>
+          <div class="epx-entity-right-form-item">
             <epx-table-form class="form-content" ref="form" metaId={this.$metaId} fieldsConfigs={this.fieldsConfigs} v-model={this.data}
               column={this.column} labelAlign={this.$configs.labelAlign}
               v-slots= {{
@@ -338,7 +338,9 @@ export default {
   }
 }
 </script>
-<style scoped lang="scss">
+<style lang="scss">
+// 继承的 JSX 渲染节点不带本组件的 scope 标记，以专用根类隔离样式。
+.epx-entity-right-form-item {
 .container {
   background: var(--epx-bg-card);
   &.fold {
@@ -436,7 +438,7 @@ export default {
   display: flex;
   justify-content: center;
 
-    :deep(.el-button) {
+    .el-button {
       padding: 12px 42px;
       margin: 0 12px;
     }
@@ -453,14 +455,12 @@ export default {
     margin-right: 16px;
   }
 
-    :deep(.el-input) {
+    .el-input {
       width: 160px;
       margin-right: 10px;
     }
 
 }
-</style>
-<style lang="scss" scoped>
 .apis-checkbox__group {
   .checkbox{
     display: inline-block;
@@ -486,8 +486,6 @@ export default {
   max-height: 500px;
   overflow: auto;
 }
-</style>
-<style lang="scss" scoped>
 .interface {
   background: var(--epx-bg-card);
 }
@@ -568,7 +566,7 @@ export default {
    margin-left: 12px;
   }
 
-    :deep(.el-input) {
+    .el-input {
       width: 220px;
     }
 
@@ -609,10 +607,11 @@ export default {
 .api-type__content {
   padding: 10px 20px;
 
-    :deep(.el-checkbox) {
+    .el-checkbox {
       padding: 10px 0;
       color: var(--epx-text);
     }
 
+}
 }
 </style>

package/src/components/EntitySystemEr.vue

@@ -0,0 +1,517 @@
+<template>
+  <el-tabs v-model="activeTab" class="er-tabs" @tab-remove="removeTab">
+    <el-tab-pane name="panorama" label="对象全景图" :closable="false">
+      <div class="epx-entity-system-er">
+        <div class="er-header">
+          <div class="er-tools">
+            <el-input
+              v-model="keyword"
+              size="default"
+              clearable
+              placeholder="搜索对象名称 / 编号"
+              class="er-search"
+              @keyup.enter="locateNode"
+              @clear="clearHighlight"
+            >
+              <template #append><el-button  icon="el-icon-search" @click="locateNode"></el-button></template>
+            </el-input>
+            <el-checkbox-group v-model="relationTypes" class="er-filter" @change="renderGraph">
+              <el-checkbox label="1">一对多</el-checkbox>
+              <el-checkbox label="2">单条</el-checkbox>
+            </el-checkbox-group>
+            <el-button size="default" @click="resetView">重置视图</el-button>
+            <el-button size="default" type="primary" @click="exportEr">导出</el-button>
+          </div>
+          <div class="er-legend">
+            <span class="er-count">对象 {{ nodes.length }} 个 · 关系 {{ edges.length }} 条</span>
+            <div class="legend-item">
+              <span class="legend-icon">
+                <i class="el-icon-caret-left"></i>
+              </span>
+              <span>单条</span>
+            </div>
+            <div class="legend-item">
+              <span class="legend-icon legend-icon--sub">
+                <i class="el-icon-caret-left"></i>
+              </span>
+              <span>一对多</span>
+            </div>
+            <div class="legend-item">
+              <span class="legend-node legend-node--external"></span>
+              <span>外部对象</span>
+            </div>
+          </div>
+        </div>
+        <div ref="er" v-loading="loading" class="er-container"></div>
+      </div>
+    </el-tab-pane>
+    <el-tab-pane
+      v-for="tab in relationTabs"
+      :key="tab.metaId"
+      :name="tab.metaId"
+      :label="tab.label"
+      closable
+      lazy
+    >
+      <relation-diagram :current-query="{ id: tab.metaId }" class="er-tab-diagram"></relation-diagram>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+import component from '@epxing/core/src/mixins/component'
+import { Graph } from '@antv/x6'
+import { Export } from '@antv/x6-plugin-export'
+import Er from './entity-relation-diagram/Er.vue'
+
+// 内嵌单对象关系图：扩展 currentQuery prop，让 Er 内部的 $query.id 取到各标签自己的对象
+const RelationDiagram = {
+  extends: Er,
+  props: ['currentQuery']
+}
+// 关系类型：一对多
+const RELATION_ONE_MOST = '1'
+
+// 对象级节点：上行对象名称、下行对象编号，外部对象灰显
+Graph.registerNode(
+  'er-system-node',
+  {
+    inherit: 'rect',
+    width: 180,
+    height: 56,
+    markup: [
+      {
+        tagName: 'rect',
+        selector: 'body'
+      },
+      {
+        tagName: 'text',
+        selector: 'name'
+      },
+      {
+        tagName: 'text',
+        selector: 'code'
+      }
+    ],
+    attrs: {
+      body: {
+        width: 180,
+        height: 56,
+        rx: 6,
+        ry: 6,
+        fill: '#1461E4',
+        stroke: '#76A8FF',
+        strokeWidth: 1,
+        cursor: 'pointer'
+      },
+      name: {
+        fontSize: 14,
+        fill: '#fff',
+        ref: 'body',
+        refX: '50%',
+        refY: 20,
+        textAnchor: 'middle',
+        textVerticalAnchor: 'middle',
+        textWrap: {
+          width: 160,
+          ellipsis: true
+        }
+      },
+      code: {
+        fontSize: 11,
+        fill: 'rgba(255, 255, 255, 0.75)',
+        ref: 'body',
+        refX: '50%',
+        refY: 40,
+        textAnchor: 'middle',
+        textVerticalAnchor: 'middle',
+        textWrap: {
+          width: 160,
+          ellipsis: true
+        }
+      }
+    }
+  },
+  true
+)
+export default {
+  name: 'epx-entity-system-er',
+  mixins: [component],
+  components: { RelationDiagram },
+  data () {
+    return {
+      relation: {},
+      keyword: '',
+      // 关系类型过滤：勾选后仅显示对应类型的关系，全不勾选显示全部
+      relationTypes: [],
+      loading: false,
+      // 当前标签；panorama 为固定全景图，其余为页内打开的对象关系图
+      activeTab: 'panorama',
+      relationTabs: []
+    }
+  },
+  computed: {
+    nodes () {
+      return this.relation.NODES || []
+    },
+    edges () {
+      return this.relation.EDGES || []
+    }
+  },
+  methods: {
+    getMetaRelation () {
+      this.loading = true
+      this.$http.get({
+        action: 'metaSystemER',
+        entityId: 'FM_ENTITY'
+      })
+        .then(data => {
+          this.loading = false
+          this.relation = data || {}
+          this.renderGraph()
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    getVisibleEdges () {
+      if (this.relationTypes.length === 0 || this.relationTypes.length === 2) {
+        return this.edges
+      }
+      const types = this.relationTypes
+      return this.edges.filter(edge => (edge.SORTS || []).some(sort => types.includes(sort)))
+    },
+    // 轻量力导布局：环形初始布点，库仑斥力 + 弹簧引力 + 向心力迭代收敛，结果确定性可复现
+    forceLayout (nodes, edges) {
+      const pos = {}
+      const count = nodes.length
+      if (count === 0) return pos
+      const radius = Math.max(300, count * 8)
+      nodes.forEach((node, i) => {
+        const angle = (2 * Math.PI * i) / count
+        pos[node.META_ID] = {
+          x: radius * Math.cos(angle),
+          y: radius * Math.sin(angle),
+          vx: 0,
+          vy: 0
+        }
+      })
+      const ids = nodes.map(node => node.META_ID)
+      const pairs = edges.map(edge => [edge.SOURCE, edge.TARGET])
+      const REPULSION = 60000
+      const SPRING_LEN = 240
+      const SPRING = 0.03
+      const CENTER_PULL = 0.03
+      const MAX_STEP = 30
+      const ITERATIONS = 200
+      for (let iter = 0; iter < ITERATIONS; iter++) {
+        for (let i = 0; i < ids.length; i++) {
+          for (let j = i + 1; j < ids.length; j++) {
+            const a = pos[ids[i]]
+            const b = pos[ids[j]]
+            let dx = a.x - b.x
+            let dy = a.y - b.y
+            let dist2 = dx * dx + dy * dy
+            if (dist2 < 1) {
+              // 重合时按索引错开，避免除零
+              dx = (i % 7) - 3.5
+              dy = (j % 7) - 3.5
+              dist2 = dx * dx + dy * dy
+            }
+            const dist = Math.sqrt(dist2)
+            const force = REPULSION / dist2
+            const fx = (dx / dist) * force
+            const fy = (dy / dist) * force
+            a.vx += fx
+            a.vy += fy
+            b.vx -= fx
+            b.vy -= fy
+          }
+        }
+        pairs.forEach(pair => {
+          if (pair[0] === pair[1]) return
+          const a = pos[pair[0]]
+          const b = pos[pair[1]]
+          if (!a || !b) return
+          const dx = a.x - b.x
+          const dy = a.y - b.y
+          const dist = Math.sqrt(dx * dx + dy * dy) || 1
+          const force = SPRING * (dist - SPRING_LEN)
+          const fx = (dx / dist) * force
+          const fy = (dy / dist) * force
+          a.vx -= fx
+          a.vy -= fy
+          b.vx += fx
+          b.vy += fy
+        })
+        ids.forEach(id => {
+          const p = pos[id]
+          p.vx += -p.x * CENTER_PULL
+          p.vy += -p.y * CENTER_PULL
+          let stepX = p.vx * 0.5
+          let stepY = p.vy * 0.5
+          const step = Math.sqrt(stepX * stepX + stepY * stepY)
+          if (step > MAX_STEP) {
+            stepX = (stepX / step) * MAX_STEP
+            stepY = (stepY / step) * MAX_STEP
+          }
+          p.x += stepX
+          p.y += stepY
+          p.vx = 0
+          p.vy = 0
+        })
+      }
+      return pos
+    },
+    renderGraph () {
+      if (this.graph) this.graph.dispose()
+      const graph = new Graph({
+        container: this.$refs.er,
+        background: {
+          color: '#fff'
+        },
+        panning: true,
+        mousewheel: {
+          enabled: true
+        }
+      })
+      graph.use(new Export())
+      this.graph = graph
+      const edges = this.getVisibleEdges()
+      const pos = this.forceLayout(this.nodes, edges)
+      this.nodes.forEach(node => {
+        const p = pos[node.META_ID]
+        const external = node.EXTERNAL === '1'
+        graph.addNode({
+          id: node.META_ID,
+          shape: 'er-system-node',
+          x: p.x - 90,
+          y: p.y - 28,
+          data: node,
+          attrs: {
+            body: external
+              ? { fill: '#95A2B3', stroke: '#B8C0CC', cursor: 'default' }
+              : { fill: '#1461E4', stroke: '#76A8FF', cursor: 'pointer' },
+            name: { text: node.META_NAME },
+            code: { text: node.META_CODE }
+          },
+          zIndex: 2
+        })
+      })
+      edges.forEach(edge => {
+        // 自关联补一个顶点形成可见环路
+        const selfLoop = edge.SOURCE === edge.TARGET
+        graph.addEdge({
+          source: edge.SOURCE,
+          target: edge.TARGET,
+          vertices: selfLoop ? [{ x: pos[edge.SOURCE].x, y: pos[edge.SOURCE].y - 100 }] : undefined,
+          attrs: {
+            line: {
+              stroke: '#5795FF',
+              strokeWidth: 1.5,
+              strokeDasharray: (edge.SORTS || []).includes(RELATION_ONE_MOST) ? '5, 5' : '0'
+            }
+          },
+          labels: edge.COUNT > 1
+            ? [{
+              attrs: {
+                text: { text: '×' + edge.COUNT, fill: '#5A6473', fontSize: 11 },
+                rect: { fill: '#E8F2FF', stroke: '#91B9FF', rx: 3, strokeWidth: 1 }
+              }
+            }]
+            : undefined,
+          connector: {
+            name: 'smooth'
+          },
+          zIndex: 1
+        })
+      })
+      graph.on('node:click', ({ node }) => {
+        const data = node.getData()
+        if (!data || data.EXTERNAL === '1') return
+        this.openRelationTab(data)
+      })
+      graph.centerContent()
+      graph.zoomToFit({ padding: 40, maxScale: 1.5, minScale: 0.05 })
+    },
+    locateNode () {
+      if (!this.graph) return
+      const keyword = (this.keyword || '').trim().toLowerCase()
+      if (!keyword) {
+        this.clearHighlight()
+        return
+      }
+      const matched = []
+      this.nodes.forEach(node => {
+        if (
+          (node.META_NAME || '').toLowerCase().includes(keyword) ||
+          (node.META_CODE || '').toLowerCase().includes(keyword)
+        ) {
+          matched.push(node)
+        }
+      })
+      this.clearHighlight()
+      if (matched.length === 0) {
+        this.$message.info('未找到匹配的对象')
+        return
+      }
+      matched.forEach(node => {
+        const cell = this.graph.getCellById(node.META_ID)
+        if (cell) {
+          cell.attr('body/stroke', '#F59A23')
+          cell.attr('body/strokeWidth', 2.5)
+        }
+      })
+      this.highlighted = matched.map(node => node.META_ID)
+      const first = this.graph.getCellById(matched[0].META_ID)
+      if (first) this.graph.centerCell(first)
+    },
+    clearHighlight () {
+      if (!this.graph || !this.highlighted) return
+      this.highlighted.forEach(id => {
+        const cell = this.graph.getCellById(id)
+        if (!cell) return
+        const external = cell.getData().EXTERNAL === '1'
+        cell.attr('body/stroke', external ? '#B8C0CC' : '#76A8FF')
+        cell.attr('body/strokeWidth', 1)
+      })
+      this.highlighted = []
+    },
+    resetView () {
+      if (!this.graph) return
+      this.graph.centerContent()
+      this.graph.zoomToFit({ padding: 40, maxScale: 1.5, minScale: 0.05 })
+    },
+    exportEr () {
+      this.graph.exportPNG('对象全景图', {
+        padding: 20
+      })
+    },
+    // 页内新开对象关系图标签；同对象已打开则只聚焦
+    openRelationTab (node) {
+      if (this.relationTabs.some(tab => tab.metaId === node.META_ID)) {
+        this.activeTab = node.META_ID
+        return
+      }
+      this.relationTabs.push({
+        metaId: node.META_ID,
+        label: node.META_NAME || node.META_CODE
+      })
+      this.activeTab = node.META_ID
+    },
+    removeTab (name) {
+      if (name === 'panorama') return
+      const index = this.relationTabs.findIndex(tab => tab.metaId === name)
+      if (index === -1) return
+      this.relationTabs.splice(index, 1)
+      if (this.activeTab === name) {
+        const next = this.relationTabs[index] || this.relationTabs[index - 1]
+        this.activeTab = next ? next.metaId : 'panorama'
+      }
+    }
+  },
+  mounted () {
+    this.getMetaRelation()
+  },
+  beforeUnmount () {
+    if (this.graph) this.graph.dispose()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.er-tabs {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  :deep(.el-tabs__content) {
+    flex: 1;
+    overflow: hidden;
+  }
+  :deep(.el-tab-pane) {
+    height: 100%;
+  }
+}
+.er-tab-diagram {
+  height: 100%;
+}
+.epx-entity-system-er {
+  height: 100%;
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+}
+.er-container {
+  flex: 1;
+}
+.er-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.er-tools {
+  display: flex;
+  align-items: center;
+}
+.er-search {
+  width: 240px;
+  margin-right: 16px;
+}
+.er-filter {
+  margin-right: 16px;
+}
+.er-legend {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 20px;
+  background: var(--epx-bg-card, #ffffff);
+  border-radius: 4px;
+}
+.er-count {
+  font-size: 13px;
+  color: var(--epx-text, #5a6473);
+  margin-right: 20px;
+}
+.legend-item {
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  font-size: 13px;
+  color: var(--epx-text, #5a6473);
+}
+.legend-icon {
+  position: relative;
+  top: 2px;
+  height: 20px;
+  width: 40px;
+  margin-right: 8px;
+  i {
+    position: absolute;
+    left: 0;
+    color: var(--epx-text-secondary, #5795ff);
+    font-size: 20px;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    width: 30px;
+    height: 0;
+    border: 1px solid var(--epx-border, #5795ff);
+    left: 10px;
+    top: 50%;
+    margin-top: -1px;
+  }
+}
+.legend-icon--sub {
+  &::after {
+    border-style: dashed;
+  }
+}
+.legend-node {
+  width: 18px;
+  height: 12px;
+  border-radius: 3px;
+  margin-right: 8px;
+  background: var(--epx-bg, #95a2b3);
+}
+</style>

package/src/components/HallNav.vue

@@ -49,45 +49,18 @@ export default {
           dropdown: () => (<el-dropdown-menu >
             { this.manageRight.clientAdmin === 'true' && <el-dropdown-item command="frame" onClick={this.openFrameManage.bind(this)}>{this.$t('Platform Management Center')}</el-dropdown-item> }
             { this.manageRight.roleManage === 'true' && <el-dropdown-item command="role" onClick={this.openService.bind(this, 'role')}>{this.$t('navigation.role_assignment_management')}</el-dropdown-item> }
-            {
-              (this.appConfig.IS_SET_TOOLBAR ? this.toolbar.includes('skip') : this.clientConfig.THEME_FLAG !== '0') && (
-                <el-popover
-                  popper-class="epx-app-nav__skin-popover"
-                  placement="left-start"
-                  trigger="hover"
-                  width="auto"
-                  v-slots={{
-                    // reference 必须是「根节点为真实元素」的东西：EP 的 ElOnlyChild 会用
-                    // withDirectives(cloneVNode(node), [[forwardRef]]) 挂指令来拿 reference 的真实
-                    // DOM，而 Vue 的运行时指令只能落在元素上。el-dropdown-item 的根节点是
-                    // ElRovingFocusItem 组件 ⇒ 指令挂不上，Vue 只发一条 "Runtime directive used on
-                    // component with non-element root node" 的 warning 就静默失效 ⇒ tooltip 拿不到
-                    // reference ⇒ hover 完全没反应。
-                    // 用原生 li + EP 的 item 类名：根是元素、在 ul.el-dropdown-menu 里也合法、样式不变。
-                    // 原来的 command 属性没人消费（所在 el-dropdown 无 onCommand），去掉无影响。
-                    reference: () => (<li class="el-dropdown-menu__item">{this.$t('skin')}</li>)
-                  }}>
-                  <ul class="epx-app-nav__theme">
-                    {
-                      this.themeList.map(theme => (
-                        <li class={{ 'is-active': theme.key === this.selectTheme }} style={!theme.icon && theme.color ? { background: theme.color } : {}} key={theme.key} onClick={this.changeTheme.bind(this, theme)}>
-                          {theme.icon && <img src={theme.icon} alt="" />}
-                          {!theme.icon && <span class="epx-app-nav__theme-custom-label">{theme.name}</span>}
-                          {theme.key === this.selectTheme && <i class="epx-app-nav__theme-select el-icon-success"></i>}
-                        </li>
-                      ))
-                    }
-                  </ul>
-                </el-popover>
-              )
-            }
+            {!this.$isMobile && this.terminal !== 'mobile' && (
+              <el-dropdown-item command="interface-settings" onClick={() => { this.showInterfaceSettings = true }}>
+                界面设置
+              </el-dropdown-item>
+            )}
             {
               this.languageFlag && (
                 <el-popover
                   placement="left-start"
                   trigger="hover"
                   v-slots={{
-                    // 同上：reference 的根必须是元素，详见「换肤」那处注释
+                    // reference 使用原生元素，供 ElOnlyChild 正确获取 DOM。
                     reference: () => (<li class="el-dropdown-menu__item">{this.$t('language')}</li>)
                   }}>
                   <ul class="epx-app-nav__language-list">