feat: 接入用户与文档权限管理

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

@@ -1,109 +1,71 @@
 <script setup lang="ts">
-import type {
-  PermissionCellState,
-  PermissionColumn,
-  PermissionKey,
-  DepartmentPermissionRow,
-} from '../types'
+import type { DepartmentPermissionRow } from '../types'
 
 const props = defineProps<{
   rows: DepartmentPermissionRow[]
-  columns: PermissionColumn[]
-  saving?: boolean
+  canEdit?: boolean
 }>()
 
 const emit = defineEmits<{
-  toggle: [departmentId: string, permission: PermissionKey]
+  adjust: [row: DepartmentPermissionRow]
 }>()
 
-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'
+function policyLabel(enabled: boolean) {
+  return enabled ? '可用' : '不可见'
 }
 </script>
 
 <template>
-  <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"
+  <div v-if="!props.rows.length" class="empty-state">暂无科室默认策略</div>
+  <div v-else class="table-scroll">
+    <table class="permission-table" aria-label="按科室授权">
+      <thead>
+        <tr>
+          <th>科室</th>
+          <th>本科室文档</th>
+          <th>全院通用文档</th>
+          <th>其他科室文档</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in props.rows" :key="row.id">
+          <td>
+            <div class="department-name">
+              <strong>{{ row.department }}</strong>
+              <small v-if="row.campus">{{ row.campus }}</small>
+            </div>
+          </td>
+          <td>
+            <span class="policy-tag" :class="row.own ? 'is-enabled' : 'is-disabled'">
+              {{ policyLabel(row.own) }}
+            </span>
+          </td>
+          <td>
+            <span class="policy-tag" :class="row.common ? 'is-enabled' : 'is-disabled'">
+              {{ policyLabel(row.common) }}
+            </span>
+          </td>
+          <td>
+            <span class="policy-tag" :class="row.other ? 'is-enabled' : 'is-disabled'">
+              {{ policyLabel(row.other) }}
+            </span>
+          </td>
+          <td class="operation-cell">
+            <button
+              v-if="props.canEdit"
+              type="button"
+              class="adjust-button"
+              @click="emit('adjust', row)"
             >
-              {{ 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>
+              调整
+            </button>
+            <span v-else class="readonly-label">无调整权限</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <style scoped>
@@ -114,15 +76,15 @@ function isDisabled(row: DepartmentPermissionRow, permission: PermissionKey) {
 
 .permission-table {
   width: 100%;
-  min-width: 680px;
-  font-size: 12.5px;
+  min-width: 760px;
+  font-size: 13px;
   border-collapse: collapse;
 }
 
 .permission-table th {
   padding: 9px 12px;
   color: var(--mut);
-  font-size: 12px;
+  font-size: 12.5px;
   font-weight: 700;
   text-align: left;
   white-space: nowrap;
@@ -130,10 +92,6 @@ function isDisabled(row: DepartmentPermissionRow, permission: PermissionKey) {
   border-bottom: 1px solid var(--line);
 }
 
-.permission-table th.permission-heading {
-  text-align: center;
-}
-
 .permission-table td {
   padding: 9px 12px;
   vertical-align: middle;
@@ -156,86 +114,46 @@ function isDisabled(row: DepartmentPermissionRow, permission: PermissionKey) {
   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;
-}
-
-.switch-track::after {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  content: '';
-  background: #fff;
-  border-radius: 50%;
-  transition: left 0.2s ease;
-}
-
-.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 {
+.policy-tag {
   display: inline-block;
-  min-width: 52px;
-  margin-left: 3px;
-  color: var(--mut);
-  font-size: 10.5px;
-  text-align: left;
+  min-width: 48px;
+  padding: 2px 9px;
+  font-size: 11.5px;
+  font-weight: 700;
+  text-align: center;
+  border-radius: 20px;
 }
 
-.legend {
-  margin: 10px 0 0;
+.policy-tag.is-enabled {
+  color: var(--ok);
+  background: var(--ok-l);
+}
+
+.policy-tag.is-disabled {
+  color: #8a9aa3;
+  background: #eceef0;
+}
+
+.operation-cell {
+  white-space: nowrap;
+}
+
+.adjust-button {
+  padding: 4px 10px;
+  color: var(--brand);
+  font-size: 12px;
+  background: #fff;
+  border: 1px solid var(--brand);
+  border-radius: 5px;
+}
+
+.adjust-button:hover {
+  background: var(--brand-l);
+}
+
+.readonly-label {
   color: var(--mut);
-  font-size: 11px;
-  line-height: 1.6;
+  font-size: 11.5px;
 }
 
 .empty-state {