@epxing/business 5.3.0-beta.2 → 5.3.0-beta.4

package/src/base/RoleBindTrace.vue

@@ -0,0 +1,364 @@
+<template>
+  <div class="rbt-page">
+    <!-- 筛选 -->
+    <div class="v9-card">
+      <div class="v9-block-title">筛选</div>
+      <div class="v9-filter-bar">
+        <select v-model="filter.userId" class="v9-select trace-user-sel" @change="renderTrace">
+          <option value="">全部用户</option>
+          <option v-for="u in userOptions" :key="u.ID" :value="u.ID">{{ u.NAME }}（{{ u.USER_NO }} · {{ u.DEPT_NAME }}）</option>
+        </select>
+        <select v-model="filter.systemId" class="v9-select trace-sys-sel" @change="renderTrace">
+          <option value="">全部系统</option>
+          <option v-for="s in systemOptions" :key="s.ID" :value="s.ID">{{ s.NAME }}</option>
+        </select>
+        <select v-model="filter.sourceType" class="v9-select trace-src-sel" @change="renderTrace">
+          <option value="">全部来源</option>
+          <option value="group">组来源</option>
+          <option value="manual">手工来源</option>
+          <option value="dead">死标记</option>
+        </select>
+        <button class="v9-btn v9-btn--text" title="重置" @click="resetFilter"><i class="el-icon-refresh-left"></i></button>
+      </div>
+    </div>
+
+    <!-- 绑定来源统计 -->
+    <div class="v9-figure-grid">
+      <div class="v9-figure">
+        <div class="v9-figure__label">绑定总数</div>
+        <div class="v9-figure__value">{{ stats.total }}</div>
+      </div>
+      <div class="v9-figure">
+        <div class="v9-figure__label">含组来源</div>
+        <div class="v9-figure__value">{{ stats.groupCount }}</div>
+      </div>
+      <div class="v9-figure">
+        <div class="v9-figure__label">含手工来源</div>
+        <div class="v9-figure__value">{{ stats.manualCount }}</div>
+      </div>
+      <div class="v9-figure">
+        <div class="v9-figure__label">死标记</div>
+        <div class="v9-figure__value">{{ stats.deadCount }}</div>
+      </div>
+    </div>
+
+    <!-- 角色绑定明细 -->
+    <div class="v9-card">
+      <div class="v9-block-title">角色绑定明细</div>
+      <div v-if="!rows.length" class="v9-empty">
+        <i class="el-icon-box v9-empty__icon"></i>
+        <div>没有符合条件的绑定</div>
+      </div>
+      <table v-else class="v9-table">
+        <thead>
+          <tr>
+            <th style="width:60px">序号</th>
+            <th>用户</th>
+            <th>角色</th>
+            <th>所属系统</th>
+            <th>来源</th>
+            <th>该去哪改</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(b, i) in rows" :key="b.ID">
+            <td>{{ i + 1 }}</td>
+            <td>{{ b.USER_NAME }} <span class="v9-form-item__tip trace-inline-tip">{{ b.DEPT_NAME }}</span></td>
+            <td>{{ b.ROLE_NAME }}</td>
+            <td><i :class="b.systemIcon" class="trace-sys-icon"></i>{{ b.SYSTEM_NAME }}</td>
+            <td>
+              <!-- 死标记：组位存在但角色已不在组内 -->
+              <template v-if="b.dead">
+                <span class="v9-tag v9-tag--warning">来自组 {{ b.GROUP_NAME || '已删除组' }} · 角色已不在该组</span>
+                <div class="src-note">死标记：该角色曾被组授予，后已移出组；可在授权页手工删除该绑定</div>
+                <span v-if="b.manual" class="v9-tag v9-tag--info trace-ml4">另有手工授予</span>
+              </template>
+              <template v-else-if="b.GROUP_NAME">
+                <span class="v9-tag v9-tag--primary">来自组 {{ b.GROUP_NAME }}</span>
+                <span v-if="b.manual" class="v9-tag v9-tag--info trace-ml4">另有手工授予</span>
+              </template>
+              <template v-else-if="b.manual">
+                <span class="v9-tag v9-tag--info">手工授予</span>
+              </template>
+            </td>
+            <td>
+              <button v-if="b.GROUP_NAME && !b.dead" class="v9-btn v9-btn--text" @click="gotoGroupManage(b.GROUP)">角色组管理 → {{ b.GROUP_NAME }}</button>
+              <button v-else-if="b.dead" class="v9-btn v9-btn--text" @click="gotoGroupManage('')">角色组管理（处理死标记）</button>
+              <span v-else class="v9-btn v9-btn--text trace-no-link">角色授权（现有功能）</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 轻提示 -->
+    <div class="toast-box">
+      <div v-if="toast.show" class="v9-message v9-message--error">
+        <i class="el-icon-error v9-message__icon"></i>
+        <span>{{ toast.text }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component.js'
+
+export default {
+  name: 'epx-role-bind-trace',
+  mixins: [component],
+  data () {
+    return {
+      filter: { userId: '', systemId: '', sourceType: '' },
+      userOptions: [], // 用户下拉
+      systemOptions: [], // 系统下拉
+      stats: { total: 0, groupCount: 0, manualCount: 0, deadCount: 0 },
+      rows: [], // 绑定明细
+      toast: { show: false, text: '' },
+      toastTimer: null
+    }
+  },
+  created () {
+    this.renderTrace()
+  },
+  methods: {
+    msg (text) {
+      this.toast = { show: true, text }
+      clearTimeout(this.toastTimer)
+      this.toastTimer = setTimeout(() => { this.toast.show = false }, 6000)
+    },
+    renderTrace () {
+      this.$http.$request({
+        action: 'getBindTrace',
+        entityId: 'FM_ROLE_GROUP',
+        userId: this.filter.userId,
+        systemId: this.filter.systemId,
+        sourceType: this.filter.sourceType
+      })
+        .then(data => {
+          this.userOptions = data.users || []
+          this.systemOptions = data.systems || []
+          this.stats = data.stats || { total: 0, groupCount: 0, manualCount: 0, deadCount: 0 }
+          this.rows = data.rows || []
+        })
+        .catch(err => this.msg(err.message || '获取绑定数据失败'))
+    },
+    resetFilter () {
+      this.filter = { userId: '', systemId: '', sourceType: '' }
+      this.renderTrace()
+    },
+    // 跳转角色组管理页（带组 ID 定位）
+    gotoGroupManage (groupId) {
+      this.$createPage({
+        component: 'role-group-manage',
+        groupId: groupId || ''
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/* ===== 以下样式值均取自原型 V9 设计系统，保持逐项一致 ===== */
+.rbt-page {
+  min-height: 100%;
+  padding: 24px;
+  background: var(--epx-bg-card, #f2f3f7);
+  font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--epx-text, #444);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.v9-card {
+  background: var(--epx-bg-card, #fff);
+  border-radius: 4px;
+  padding: 24px;
+}
+.v9-block-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--epx-text, #222);
+  margin-bottom: 16px;
+  &::before {
+    content: '';
+    width: 4px;
+    height: 16px;
+    border-radius: 2px;
+    background: #0874e7;
+  }
+}
+
+/* 筛选条 */
+.v9-filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+.v9-select {
+  height: 32px;
+  padding: 0 28px 0 12px;
+  font-size: 14px;
+  color: var(--epx-text, #444);
+  background: var(--epx-bg-card, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888'%3E%3Cpath d='M6 8L2 4h8z'/%3E%3C/svg%3E") no-repeat right 10px center;
+  border: 1px solid var(--epx-border, #dcdfe6);
+  border-radius: 4px;
+  outline: none;
+  font-family: inherit;
+  appearance: none;
+  transition: border-color 0.15s;
+  &:hover { border-color: var(--epx-border, #c0c4cc); }
+  &:focus { border-color: var(--epx-border, #0874e7); }
+}
+.trace-user-sel { width: 220px; }
+.trace-sys-sel { width: 200px; }
+.trace-src-sel { width: 200px; }
+
+.v9-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 16px;
+  font-size: 14px;
+  line-height: 1;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  background: var(--epx-bg-card, #fff);
+  color: var(--epx-text, #444);
+  outline: none;
+  font-family: inherit;
+  &--text {
+    background: transparent;
+    border-color: transparent;
+    color: var(--el-color-primary, #0874e7);
+    padding: 0 4px;
+    height: auto;
+    &:hover { color: var(--epx-text-secondary, #2f95f5); background: transparent; }
+  }
+}
+.trace-no-link { color: var(--el-color-primary, #0874e7); cursor: default; }
+
+/* 数字统计卡 */
+.v9-figure-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+.v9-figure {
+  background: var(--epx-bg-card, #f5f7fa);
+  border-radius: 4px;
+  padding: 16px;
+  min-width: 0;
+  transition: box-shadow 0.15s;
+  &:hover { box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 6px -2px rgba(17, 24, 39, 0.05); }
+}
+.v9-figure__label {
+  font-size: 12px;
+  color: var(--epx-text-secondary, #888);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.v9-figure__value {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--epx-text, #222);
+  line-height: 28px;
+}
+@media (max-width: 1100px) {
+  .v9-figure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+/* 表格 */
+.v9-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--epx-bg-card, #fff);
+  font-size: 14px;
+  th, td {
+    padding: 0 16px;
+    height: 48px;
+    text-align: left;
+    border-bottom: 1px solid var(--epx-border, #e4e7ed);
+  }
+  thead th {
+    background: var(--epx-bg-card, #f2f3f7);
+    color: var(--epx-text, #444);
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  tbody td { color: var(--epx-text, #444); }
+  tbody tr:hover > td { background: var(--epx-bg, #e6f6ff); }
+}
+
+/* 标签 */
+.v9-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  font-size: 12px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  line-height: 1;
+  &--primary { background: var(--epx-bg, #e6f6ff); color: var(--el-color-primary, #0874e7); border-color: var(--epx-border, #82cbff); }
+  &--success { background: var(--epx-bg-card, #f0f9eb); color: var(--epx-text-secondary, #67c23a); border-color: var(--epx-border, #c2e7b0); }
+  &--warning { background: var(--epx-bg-card, #fdf6ec); color: var(--epx-text-secondary, #e6a23a); border-color: var(--epx-border, #f5dab1); }
+  &--info { background: var(--epx-bg-card, #f4f4f5); color: var(--epx-text-secondary, #888); border-color: var(--epx-border, #e9e9eb); }
+}
+.trace-ml4 { margin-left: 4px; }
+.src-note { font-size: 12px; color: var(--epx-text-secondary, #888); margin-top: 2px; }
+
+/* 空状态 */
+.v9-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+  color: var(--epx-text-secondary, #888);
+  gap: 12px;
+}
+.v9-empty__icon { font-size: 64px; color: var(--epx-text-secondary, #c0c4cc); }
+
+.v9-form-item__tip { margin-top: 4px; font-size: 12px; color: var(--epx-text-secondary, #888); }
+.trace-inline-tip { display: inline; margin-top: 0; }
+.trace-sys-icon { margin-right: 4px; }
+
+/* 轻提示 */
+.toast-box {
+  position: fixed;
+  top: 76px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 3000;
+  max-width: 640px;
+}
+.v9-message {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 640px;
+  padding: 10px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 6px -2px rgba(17, 24, 39, 0.05);
+  background: var(--epx-bg-card, #fef0f0);
+  color: var(--epx-text, #444);
+  .v9-message__icon { color: var(--el-color-danger, #f56c6c); }
+}
+</style>