init project
This commit is contained in:
Timi
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div v-can="gaoPermissionCodes.user.read" class="user-edit">
|
||||
<t-cell-group v-if="currentUser" theme="card">
|
||||
<t-cell
|
||||
:title="currentUser.name"
|
||||
:description="currentUser.role"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<t-image
|
||||
class="avatar"
|
||||
:src="currentUser.avatar || buildFallbackAvatar(currentUser.name)"
|
||||
:alt="currentUser.name"
|
||||
fit="cover"
|
||||
/>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
|
||||
<t-cell-group v-if="currentUser" theme="card">
|
||||
<t-cell title="手机号" :description="currentUser.mobile || '未填写'" />
|
||||
<t-cell title="上次登录时间" :description="currentUser.lastLoginAt || '暂无记录'" />
|
||||
</t-cell-group>
|
||||
|
||||
<t-cell-group v-if="currentUser" theme="card">
|
||||
<t-cell
|
||||
v-can="gaoPermissionCodes.user.update"
|
||||
title="配置角色"
|
||||
note="为用户授权业务角色"
|
||||
arrow
|
||||
hover
|
||||
@click="goRoleAssign"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<t-icon name="usergroup" size="1.75rem" />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
|
||||
<section v-if="currentUser" class="registration-actions bg-white">
|
||||
<header>
|
||||
<h4 class="title">可登记事件</h4>
|
||||
</header>
|
||||
<div class="actions">
|
||||
<t-tag
|
||||
v-for="item in scopeList"
|
||||
:key="item"
|
||||
variant="light-outline"
|
||||
theme="success"
|
||||
:content="item"
|
||||
/>
|
||||
<div v-if="!scopeList.length" class="empty-card">未配置</div>
|
||||
</div>
|
||||
</section>
|
||||
<t-button v-can="gaoPermissionCodes.user.update" class="edit" theme="primary" @click="goEdit">编辑用户</t-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Toast } from "tdesign-mobile-vue";
|
||||
import { UserAPI, type User } from "timi-web";
|
||||
import RegistrationEventAPI from "@/api/RegistrationEventAPI";
|
||||
import GaoUserAPI from "@/api/GaoUserAPI";
|
||||
import type { GaoUser } from "@/types/GaoUser";
|
||||
import type { RegistrationEvent } from "@/types/RegistrationEvent";
|
||||
import { usePermissionSettingsStore } from "@/store/permissionSettingsStore";
|
||||
import { buildEffectiveRoleCodeSet, getGaoRoleName } from "@/utils/gaoRole";
|
||||
import { gaoPermissionCodes } from "@/utils/gaoPermission";
|
||||
|
||||
defineOptions({
|
||||
name: "UserDetail"
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const permissionStore = usePermissionSettingsStore();
|
||||
const gaoUser = ref<GaoUser>();
|
||||
const registrationEventList = ref<RegistrationEvent[]>([]);
|
||||
|
||||
const currentUser = computed(() => {
|
||||
const item = gaoUser.value;
|
||||
if (!item) {
|
||||
return null;
|
||||
}
|
||||
const user = item.user;
|
||||
return {
|
||||
id: item.id || "",
|
||||
name: user?.nick || user?.name || "未命名用户",
|
||||
role: getGaoRoleName(item.roleList?.[0], permissionStore.roleList),
|
||||
avatar: buildUserAvatar(user),
|
||||
mobile: user?.phoneNo || "",
|
||||
lastLoginAt: user?.lastLoginAt ? new Date(user.lastLoginAt).toLocaleString() : ""
|
||||
};
|
||||
});
|
||||
const scopeList = computed(() => {
|
||||
const item = gaoUser.value;
|
||||
if (!item) {
|
||||
return [];
|
||||
}
|
||||
return registrationEventList.value
|
||||
.filter(action => canRegistrationEvent(action, item))
|
||||
.map(item => item.name);
|
||||
});
|
||||
|
||||
async function goEdit(): Promise<void> {
|
||||
if (!currentUser.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
await router.push(`/management/users/${currentUser.value.id}/edit`);
|
||||
}
|
||||
|
||||
async function goRoleAssign(): Promise<void> {
|
||||
if (!currentUser.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
await router.push({
|
||||
path: `/management/users/${currentUser.value.id}/roles`
|
||||
});
|
||||
}
|
||||
|
||||
function buildFallbackAvatar(name: string): string {
|
||||
const text = encodeURIComponent((name.trim() || "用户").slice(0, 2));
|
||||
return [
|
||||
"data:image/svg+xml;charset=UTF-8,",
|
||||
"%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E",
|
||||
"%3Crect width='120' height='120' rx='24' fill='%232563eb'/%3E",
|
||||
"%3Ctext x='50%25' y='54%25' fill='white' font-size='36' font-family='Arial,sans-serif' text-anchor='middle' dominant-baseline='middle'%3E",
|
||||
text,
|
||||
"%3C/text%3E%3C/svg%3E"
|
||||
].join("");
|
||||
}
|
||||
|
||||
function buildUserAvatar(user?: Partial<User>): string {
|
||||
const name = user?.nick || user?.name || "用户";
|
||||
return isUser(user) ? UserAPI.getAvatarURL(user) || buildFallbackAvatar(name) : buildFallbackAvatar(name);
|
||||
}
|
||||
|
||||
function isUser(user?: Partial<User>): user is User {
|
||||
return typeof user?.name === "string";
|
||||
}
|
||||
|
||||
function canRegistrationEvent(action: RegistrationEvent, item: GaoUser): boolean {
|
||||
const userRoleCodeSet = buildEffectiveRoleCodeSet(item, permissionStore.roleList);
|
||||
const roleCodeList = action.roleCodeList || [];
|
||||
if (!roleCodeList.length) {
|
||||
return true;
|
||||
}
|
||||
return roleCodeList.some(code => userRoleCodeSet.has(code));
|
||||
}
|
||||
|
||||
async function loadData(): Promise<void> {
|
||||
const routeId = String(route.params.id || "");
|
||||
const [detail, actions] = await Promise.all([
|
||||
GaoUserAPI.detail(routeId),
|
||||
RegistrationEventAPI.enabledList(),
|
||||
permissionStore.loadAll()
|
||||
]);
|
||||
gaoUser.value = detail;
|
||||
registrationEventList.value = actions || [];
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await loadData();
|
||||
} catch {
|
||||
Toast({
|
||||
theme: "error",
|
||||
direction: "row",
|
||||
message: "用户详情加载失败"
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.user-edit {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 4rem 0;
|
||||
flex-direction: column;
|
||||
|
||||
.avatar {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: .875rem;
|
||||
}
|
||||
|
||||
.registration-actions {
|
||||
gap: .5rem;
|
||||
margin: 0 1rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
border-radius: 1rem;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
|
||||
.empty-card {
|
||||
color: #52607a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.user-edit {
|
||||
.panel,
|
||||
.bottom-bar {
|
||||
background: rgba(15, 23, 42, .92);
|
||||
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
||||
}
|
||||
|
||||
p,
|
||||
.info-list li span,
|
||||
.empty-card {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.action {
|
||||
color: #e2e8f0;
|
||||
background: rgba(15, 23, 42, .72);
|
||||
border-color: rgba(148, 163, 184, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user