feat(document-permissions): 重构权限页面按模板接入真实接口

clinical-web/src/views/management/document-permissions/components/DepartmentPermissionTable.vue

@@ -1,59 +1,109 @@
 <script setup lang="ts">
-import type { DepartmentDocumentAccess, DepartmentPermissionRow } from '../types'
+import type {
+  PermissionCellState,
+  PermissionColumn,
+  PermissionKey,
+  DepartmentPermissionRow,
+} from '../types'
 
-defineProps<{
+const props = defineProps<{
   rows: DepartmentPermissionRow[]
+  columns: PermissionColumn[]
+  saving?: boolean
 }>()
 
 const emit = defineEmits<{
-  adjust: [row: DepartmentPermissionRow]
+  toggle: [departmentId: string, permission: PermissionKey]
 }>()
 
-const accessLabels: Record<DepartmentDocumentAccess, string> = {
-  available: '可用',
-  invisible: '不可见',
+function getState(row: DepartmentPermissionRow, permission: PermissionKey): PermissionCellState {
+  return (
+    row.permissionStates?.[permission] ?? (row.permissions[permission] ? 'direct-allow' : 'none')
+  )
+}
+
+function stateLabel(state: PermissionCellState) {
+  const labels: Record<PermissionCellState, string> = {
+    none: '未授权',
+    'direct-allow': '直接允许',
+    'direct-deny': '直接拒绝',
+    'inherited-allow': '继承允许',
+    'inherited-deny': '继承拒绝',
+  }
+  return labels[state]
+}
+
+function isDisabled(row: DepartmentPermissionRow, permission: PermissionKey) {
+  return props.saving || getState(row, permission) === 'inherited-deny'
 }
 </script>
 
 <template>
-  <div class="table-scroll">
-    <table class="permission-table">
-      <thead>
-        <tr>
-          <th>科室</th>
-          <th>本科室文档</th>
-          <th>全院通用文档</th>
-          <th>其他科室文档</th>
-          <th>操作</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="row in rows" :key="row.id">
-          <td>
-            <strong>{{ row.department }}</strong>
-          </td>
-          <td>
-            <span class="access-tag" :class="'is-' + row.ownDocuments">
-              {{ accessLabels[row.ownDocuments] }}
-            </span>
-          </td>
-          <td>
-            <span class="access-tag" :class="'is-' + row.commonDocuments">
-              {{ accessLabels[row.commonDocuments] }}
-            </span>
-          </td>
-          <td>
-            <span class="access-tag" :class="'is-' + row.otherDocuments">
-              {{ accessLabels[row.otherDocuments] }}
-            </span>
-          </td>
-          <td>
-            <button type="button" class="adjust-button" @click="emit('adjust', row)">调整</button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+  <div v-if="!rows.length" class="empty-state">暂无科室数据</div>
+  <template v-else>
+    <div class="table-scroll">
+      <table class="permission-table" aria-label="按科室授权矩阵">
+        <thead>
+          <tr>
+            <th>科室</th>
+            <th
+              v-for="column in columns"
+              :key="column.key"
+              class="permission-heading"
+              :title="column.description"
+            >
+              {{ column.label }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in rows" :key="row.id">
+            <td>
+              <div class="department-name">
+                <strong>{{ row.department }}</strong>
+                <small v-if="row.campus">{{ row.campus }}</small>
+              </div>
+            </td>
+            <td v-for="column in columns" :key="column.key" class="permission-cell">
+              <button
+                type="button"
+                class="permission-toggle"
+                :class="{
+                  active: row.permissions[column.key],
+                  inherited: getState(row, column.key).startsWith('inherited'),
+                  denied: getState(row, column.key).endsWith('deny'),
+                }"
+                :disabled="isDisabled(row, column.key)"
+                :aria-pressed="row.permissions[column.key]"
+                :aria-label="
+                  row.department +
+                  '：' +
+                  column.label +
+                  '，' +
+                  stateLabel(getState(row, column.key))
+                "
+                :title="
+                  column.label +
+                  '：' +
+                  column.description +
+                  '（' +
+                  stateLabel(getState(row, column.key)) +
+                  '）'
+                "
+                @click="emit('toggle', row.id, column.key)"
+              >
+                <span class="switch-track" aria-hidden="true" />
+              </button>
+              <span class="state-label">{{ stateLabel(getState(row, column.key)) }}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <p class="legend">
+      继承允许可通过开关新增直接拒绝；继承拒绝由上级规则控制，当前接口不支持直接覆盖。
+    </p>
+  </template>
 </template>
 
 <style scoped>
@@ -64,15 +114,15 @@ const accessLabels: Record<DepartmentDocumentAccess, string> = {
 
 .permission-table {
   width: 100%;
-  min-width: 640px;
-  font-size: 13px;
+  min-width: 680px;
+  font-size: 12.5px;
   border-collapse: collapse;
 }
 
 .permission-table th {
   padding: 9px 12px;
   color: var(--mut);
-  font-size: 12.5px;
+  font-size: 12px;
   font-weight: 700;
   text-align: left;
   white-space: nowrap;
@@ -80,6 +130,10 @@ const accessLabels: Record<DepartmentDocumentAccess, string> = {
   border-bottom: 1px solid var(--line);
 }
 
+.permission-table th.permission-heading {
+  text-align: center;
+}
+
 .permission-table td {
   padding: 9px 12px;
   vertical-align: middle;
@@ -90,34 +144,106 @@ const accessLabels: Record<DepartmentDocumentAccess, string> = {
   background: #f7fbfc;
 }
 
-.access-tag {
-  display: inline-block;
-  padding: 2px 10px;
-  font-size: 11.5px;
-  font-weight: 700;
+.department-name {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  color: var(--ink);
+}
+
+.department-name small {
+  color: var(--mut);
+  font-size: 11px;
+}
+
+.permission-cell {
+  width: 23%;
+  text-align: center;
+}
+
+.permission-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 28px;
+  padding: 0;
+  vertical-align: middle;
+  background: transparent;
+  border-radius: 16px;
+}
+
+.permission-toggle:focus-visible {
+  outline: 2px solid var(--brand);
+  outline-offset: 2px;
+}
+
+.switch-track {
+  position: relative;
+  display: block;
+  width: 36px;
+  height: 20px;
+  background: #cbd8de;
   border-radius: 20px;
+  transition: background-color 0.2s ease;
 }
 
-.access-tag.is-available {
-  color: var(--ok);
-  background: var(--ok-l);
-}
-
-.access-tag.is-invisible {
-  color: #8a9aa3;
-  background: #eceef0;
-}
-
-.adjust-button {
-  padding: 4px 10px;
-  color: var(--brand);
-  font-size: 12px;
+.switch-track::after {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  content: '';
   background: #fff;
-  border: 1px solid var(--brand);
-  border-radius: 5px;
+  border-radius: 50%;
+  transition: left 0.2s ease;
 }
 
-.adjust-button:hover {
-  background: var(--brand-l);
+.permission-toggle.active .switch-track {
+  background: var(--ok);
+}
+
+.permission-toggle.inherited.active .switch-track {
+  background: #4eaa8a;
+  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 45%);
+}
+
+.permission-toggle.denied .switch-track {
+  background: #cbd8de;
+}
+
+.permission-toggle.active .switch-track::after {
+  left: 18px;
+}
+
+.permission-toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.state-label {
+  display: inline-block;
+  min-width: 52px;
+  margin-left: 3px;
+  color: var(--mut);
+  font-size: 10.5px;
+  text-align: left;
+}
+
+.legend {
+  margin: 10px 0 0;
+  color: var(--mut);
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+.empty-state {
+  padding: 28px 12px;
+  color: var(--mut);
+  font-size: 12.5px;
+  text-align: center;
+  background: #f8fbfc;
+  border-radius: 6px;
 }
 </style>