feat(permissions): implement document permission matrix

2026-08-27 16:47:55 +08:00
parent e7aa4843b7
commit 94a0d88f8b
5 changed files with 578 additions and 17 deletions
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { DepartmentDocumentAccess, DepartmentPermissionRow } from '../types'
+
+defineProps<{
+  rows: DepartmentPermissionRow[]
+}>()
+
+const emit = defineEmits<{
+  adjust: [row: DepartmentPermissionRow]
+}>()
+
+const accessLabels: Record<DepartmentDocumentAccess, string> = {
+  available: '可用',
+  invisible: '不可见',
+}
+</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>
+</template>
+
+<style scoped>
+.table-scroll {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.permission-table {
+  width: 100%;
+  min-width: 640px;
+  font-size: 13px;
+  border-collapse: collapse;
+}
+
+.permission-table th {
+  padding: 9px 12px;
+  color: var(--mut);
+  font-size: 12.5px;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  background: #f5f9fa;
+  border-bottom: 1px solid var(--line);
+}
+
+.permission-table td {
+  padding: 9px 12px;
+  vertical-align: middle;
+  border-bottom: 1px solid #eef4f6;
+}
+
+.permission-table tbody tr:hover td {
+  background: #f7fbfc;
+}
+
+.access-tag {
+  display: inline-block;
+  padding: 2px 10px;
+  font-size: 11.5px;
+  font-weight: 700;
+  border-radius: 20px;
+}
+
+.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;
+  background: #fff;
+  border: 1px solid var(--brand);
+  border-radius: 5px;
+}
+
+.adjust-button:hover {
+  background: var(--brand-l);
+}
+</style>