update registration event editor
This commit is contained in:
Timi
@@ -1,66 +1,44 @@
|
||||
<template>
|
||||
<div v-can="{ value: [gaoPermissionCodes.registrationEvent.read, gaoPermissionCodes.user.read], mode: 'and' }" class="registration-event-list">
|
||||
<article
|
||||
class="item"
|
||||
v-for="item in registrationEventList"
|
||||
:key="item.id"
|
||||
>
|
||||
<div class="main">
|
||||
<span class="color" :style="{ background: item.color || defaultColor }" />
|
||||
<div class="content">
|
||||
<div class="title">
|
||||
<strong v-text="item.name || '未命名事件'" />
|
||||
<t-cell-group theme="card">
|
||||
<t-cell
|
||||
class="item"
|
||||
v-for="item in registrationEventList"
|
||||
:key="item.id"
|
||||
:arrow="canUpdateRegistrationEvent"
|
||||
:hover="canUpdateRegistrationEvent"
|
||||
@click="handleRegistrationEventClick(item)"
|
||||
>
|
||||
<template #title>
|
||||
<div class="header">
|
||||
<div class="color" :style="{ background: item.color || defaultColor }" />
|
||||
<div class="title" v-text="item.name || '未命名事件'" />
|
||||
<t-tag
|
||||
size="small"
|
||||
theme="primary"
|
||||
:variant="isRegistrationEventActive(item) ? 'light' : 'outline'"
|
||||
class="status"
|
||||
:theme="isRegistrationEventActive(item) ? 'primary' : 'default'"
|
||||
variant="outline"
|
||||
:content="getStatusText(item)"
|
||||
/>
|
||||
<t-tag v-if="item.requirePhoto" theme="warning" variant="outline">需拍照</t-tag>
|
||||
</div>
|
||||
<p v-if="item.description" v-text="item.description" />
|
||||
<div class="meta">
|
||||
<span v-text="getLimitText(item)" />
|
||||
<span v-if="item.requirePhoto">需拍照</span>
|
||||
<span v-text="`${item.roleCodeList?.length || 0} 个角色`" />
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="description">
|
||||
<div class="line">
|
||||
<span>可登记角色</span>
|
||||
<t-tag
|
||||
v-for="roleCode in item.roleCodeList"
|
||||
:key="roleCode"
|
||||
theme="primary"
|
||||
variant="light-outline"
|
||||
:content="getRoleName(roleCode)"
|
||||
/>
|
||||
</div>
|
||||
<div class="line" v-text="getLimitText(item)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="roles">
|
||||
<t-tag
|
||||
v-for="roleCode in item.roleCodeList"
|
||||
:key="roleCode"
|
||||
theme="primary"
|
||||
variant="light-outline"
|
||||
:content="getRoleName(roleCode)"
|
||||
/>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<t-button
|
||||
v-can="gaoPermissionCodes.registrationEvent.update"
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
size="small"
|
||||
@click="editRegistrationEvent(item)"
|
||||
content="编辑"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="edit-1" size="small" />
|
||||
</template>
|
||||
</t-button>
|
||||
<t-button
|
||||
v-can="gaoPermissionCodes.registrationEvent.delete"
|
||||
theme="danger"
|
||||
variant="outline"
|
||||
size="small"
|
||||
@click="removeRegistrationEvent(item)"
|
||||
content="删除"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="delete" size="small" />
|
||||
</template>
|
||||
</t-button>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-if="!registrationEventList.length" class="empty-block">暂无登记事件</div>
|
||||
<t-button v-can="gaoPermissionCodes.registrationEvent.create" class="create" theme="primary" @click="createRegistrationEvent">
|
||||
<template #icon>
|
||||
@@ -73,7 +51,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Toast } from "tdesign-mobile-vue";
|
||||
import type { Role } from "timi-web";
|
||||
import { useUserStore, type Role } from "timi-web";
|
||||
import RegistrationEventAPI from "@/api/RegistrationEventAPI";
|
||||
import GaoUserAPI from "@/api/GaoUserAPI";
|
||||
import type { RegistrationEvent, RegistrationLimitType } from "@/types/RegistrationEvent";
|
||||
@@ -84,9 +62,11 @@ defineOptions({
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const defaultColor = "#2f88ff";
|
||||
const registrationEventList = ref<RegistrationEvent[]>([]);
|
||||
const roleOptions = ref<Role[]>([]);
|
||||
const canUpdateRegistrationEvent = computed(() => userStore.hasPermissions(gaoPermissionCodes.registrationEvent.update));
|
||||
|
||||
function createRegistrationEvent(): void {
|
||||
router.push("/management/registration-events/create");
|
||||
@@ -100,26 +80,12 @@ function editRegistrationEvent(item: RegistrationEvent): void {
|
||||
router.push(`/management/registration-events/${item.id}/edit`);
|
||||
}
|
||||
|
||||
async function removeRegistrationEvent(item: RegistrationEvent): Promise<void> {
|
||||
if (!item.id) {
|
||||
function handleRegistrationEventClick(item: RegistrationEvent): void {
|
||||
if (!canUpdateRegistrationEvent.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await RegistrationEventAPI.remove(item.id);
|
||||
Toast({
|
||||
theme: "success",
|
||||
direction: "row",
|
||||
message: "登记事件已删除"
|
||||
});
|
||||
await loadData();
|
||||
} catch {
|
||||
Toast({
|
||||
theme: "error",
|
||||
direction: "row",
|
||||
message: "登记事件删除失败"
|
||||
});
|
||||
}
|
||||
editRegistrationEvent(item);
|
||||
}
|
||||
|
||||
function isRegistrationEventActive(item: RegistrationEvent): boolean {
|
||||
@@ -180,83 +146,31 @@ onMounted(async () => {
|
||||
|
||||
<style scoped lang="less">
|
||||
.registration-event-list {
|
||||
gap: .875rem;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 1rem 6rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
|
||||
|
||||
.item {
|
||||
gap: .75rem;
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
border: 1px solid rgba(148, 163, 184, .16);
|
||||
background: rgba(255, 255, 255, .96);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: .75rem;
|
||||
|
||||
.main {
|
||||
gap: .75rem;
|
||||
.header {
|
||||
gap: .5rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
margin-top: .25rem;
|
||||
|
||||
.color {
|
||||
width: .875rem;
|
||||
height: .875rem;
|
||||
flex: 0 0 auto;
|
||||
margin-top: .25rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.title {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
|
||||
strong {
|
||||
overflow: hidden;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: .375rem 0 0 0;
|
||||
color: #52607a;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
margin-top: .5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
span {
|
||||
color: #52607a;
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: .4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.roles {
|
||||
gap: .375rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.description {
|
||||
margin-top: .5rem;
|
||||
|
||||
.actions {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.line {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user