168 lines
3.4 KiB
Vue
168 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import type { DepartmentPermissionRow } from '../types'
|
|
|
|
const props = defineProps<{
|
|
rows: DepartmentPermissionRow[]
|
|
canEdit?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
adjust: [row: DepartmentPermissionRow]
|
|
}>()
|
|
|
|
function policyLabel(enabled: boolean) {
|
|
return enabled ? '可用' : '不可见'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<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)"
|
|
>
|
|
调整
|
|
</button>
|
|
<span v-else class="readonly-label">无调整权限</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.table-scroll {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.permission-table {
|
|
width: 100%;
|
|
min-width: 760px;
|
|
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;
|
|
}
|
|
|
|
.department-name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.department-name small {
|
|
color: var(--mut);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.policy-tag {
|
|
display: inline-block;
|
|
min-width: 48px;
|
|
padding: 2px 9px;
|
|
font-size: 11.5px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.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: 11.5px;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 28px 12px;
|
|
color: var(--mut);
|
|
font-size: 12.5px;
|
|
text-align: center;
|
|
background: #f8fbfc;
|
|
border-radius: 6px;
|
|
}
|
|
</style>
|