183 lines
3.7 KiB
Vue
183 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import type { UserStatus, UserTableRow } from '../types'
|
|
|
|
defineProps<{
|
|
rows: UserTableRow[]
|
|
roleColors: Record<string, string>
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
edit: [row: UserTableRow]
|
|
resetPassword: [row: UserTableRow]
|
|
}>()
|
|
|
|
const statusLabels: Record<UserStatus, string> = {
|
|
enabled: '启用',
|
|
disabled: '停用',
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="table-scroll">
|
|
<table class="user-table">
|
|
<thead>
|
|
<tr>
|
|
<th>用户</th>
|
|
<th>工号</th>
|
|
<th>院区</th>
|
|
<th>科室</th>
|
|
<th>角色</th>
|
|
<th>数据范围</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="row in rows" :key="row.id">
|
|
<td>
|
|
<div class="user-cell">
|
|
<span
|
|
class="user-avatar"
|
|
:style="{ backgroundColor: roleColors[row.role] ?? '#8a9aa3' }"
|
|
aria-hidden="true"
|
|
>
|
|
{{ row.name.slice(0, 1) }}
|
|
</span>
|
|
<strong>{{ row.name }}</strong>
|
|
</div>
|
|
</td>
|
|
<td>{{ row.employeeNo }}</td>
|
|
<td>{{ row.campus }}</td>
|
|
<td>{{ row.department }}</td>
|
|
<td>
|
|
<span
|
|
class="role-tag"
|
|
:style="{
|
|
color: roleColors[row.role] ?? '#8a9aa3',
|
|
backgroundColor: `${roleColors[row.role] ?? '#8a9aa3'}22`,
|
|
}"
|
|
>
|
|
{{ row.role }}
|
|
</span>
|
|
</td>
|
|
<td>{{ row.dataScope }}</td>
|
|
<td>
|
|
<span class="status-tag" :class="'status-' + row.status">
|
|
{{ statusLabels[row.status] }}
|
|
</span>
|
|
</td>
|
|
<td class="actions-cell">
|
|
<button type="button" class="table-button" @click="emit('edit', row)">编辑</button>
|
|
<button type="button" class="table-button" @click="emit('resetPassword', row)">
|
|
重置密码
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr v-if="!rows.length">
|
|
<td colspan="8" class="empty-cell">没有找到匹配的用户</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.table-scroll {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.user-table {
|
|
width: 100%;
|
|
min-width: 1040px;
|
|
font-size: 13px;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.user-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);
|
|
}
|
|
|
|
.user-table td {
|
|
padding: 9px 12px;
|
|
vertical-align: middle;
|
|
border-bottom: 1px solid #eef4f6;
|
|
}
|
|
|
|
.user-table tbody tr:hover td {
|
|
background: #f7fbfc;
|
|
}
|
|
|
|
.user-cell {
|
|
display: flex;
|
|
gap: 9px;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-avatar {
|
|
display: grid;
|
|
flex-shrink: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.role-tag,
|
|
.status-tag {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
font-size: 11.5px;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.status-enabled {
|
|
color: var(--ok);
|
|
background: var(--ok-l);
|
|
}
|
|
|
|
.status-disabled {
|
|
color: #8a9aa3;
|
|
background: #eceef0;
|
|
}
|
|
|
|
.actions-cell {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table-button {
|
|
padding: 4px 10px;
|
|
color: var(--brand);
|
|
font-size: 12px;
|
|
background: #fff;
|
|
border: 1px solid var(--brand);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.table-button + .table-button {
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.table-button:hover {
|
|
background: var(--brand-l);
|
|
}
|
|
|
|
.empty-cell {
|
|
padding: 40px 12px !important;
|
|
color: var(--mut);
|
|
text-align: center;
|
|
}
|
|
</style>
|