add tag
This commit is contained in:
Timi
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div v-can="corePermissionCodes.tag.read" class="tag-list">
|
||||
<t-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="refresh"
|
||||
>
|
||||
<div class="tag-panel">
|
||||
<div
|
||||
v-for="item in tagList"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
@click="openEditDialog(item)"
|
||||
>
|
||||
<span class="name" v-text="getTagName(item)" />
|
||||
<button
|
||||
v-if="canDeleteTag"
|
||||
type="button"
|
||||
class="close"
|
||||
@click="confirmRemoveTag(item, $event)"
|
||||
>
|
||||
<t-icon name="close" size="1rem" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!tagList.length" class="empty" v-text="isLoading ? '正在加载标签' : '暂无标签'" />
|
||||
</t-pull-down-refresh>
|
||||
<t-button v-can="corePermissionCodes.tag.create" class="create" theme="primary" @click="openCreateDialog">
|
||||
<template #icon>
|
||||
<t-icon name="add" />
|
||||
</template>
|
||||
新增标签
|
||||
</t-button>
|
||||
</div>
|
||||
<t-dialog
|
||||
v-model:visible="editDialogVisible"
|
||||
:title="isCreateMode ? '新增标签' : '编辑标签'"
|
||||
cancel-btn="取消"
|
||||
confirm-btn="保存"
|
||||
@cancel="closeEditDialog"
|
||||
@confirm="saveTag"
|
||||
>
|
||||
<div class="edit-dialog">
|
||||
<t-input
|
||||
v-model.trim="formModel.name"
|
||||
class="name-input"
|
||||
borderless
|
||||
clearable
|
||||
placeholder="标签名称"
|
||||
/>
|
||||
</div>
|
||||
</t-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DialogPlugin, Toast } from "tdesign-mobile-vue";
|
||||
import { useUserStore } from "timi-web";
|
||||
import TagAPI from "@/api/TagAPI";
|
||||
import type { Tag } from "@/types/Tag";
|
||||
import { corePermissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({
|
||||
name: "TagList"
|
||||
});
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const pageSize = 100;
|
||||
const tagList = ref<Tag[]>([]);
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const isRefreshing = ref(false);
|
||||
const editDialogVisible = ref(false);
|
||||
const formModel = reactive({
|
||||
id: "",
|
||||
name: ""
|
||||
});
|
||||
|
||||
const canUpdateTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.update));
|
||||
const canDeleteTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.delete));
|
||||
const isCreateMode = computed(() => !formModel.id);
|
||||
|
||||
function getTagName(tag: Tag): string {
|
||||
return tag.name || tag.zhCN || "未命名标签";
|
||||
}
|
||||
|
||||
async function loadTags(): Promise<void> {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const result = await TagAPI.list({
|
||||
index: 0,
|
||||
size: pageSize
|
||||
});
|
||||
tagList.value = result.list || [];
|
||||
} catch {
|
||||
Toast.error("标签加载失败");
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh(): Promise<void> {
|
||||
isRefreshing.value = true;
|
||||
try {
|
||||
await loadTags();
|
||||
} finally {
|
||||
isRefreshing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openCreateDialog(): void {
|
||||
formModel.id = "";
|
||||
formModel.name = "";
|
||||
editDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function openEditDialog(tag: Tag): void {
|
||||
if (!canUpdateTag.value) {
|
||||
return;
|
||||
}
|
||||
formModel.id = tag.id || "";
|
||||
formModel.name = getTagName(tag);
|
||||
editDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function closeEditDialog(): void {
|
||||
editDialogVisible.value = false;
|
||||
}
|
||||
|
||||
function validateForm(): boolean {
|
||||
if (!formModel.name.trim()) {
|
||||
Toast.warning("请输入标签名称");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
async function saveTag(): Promise<void> {
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
isSaving.value = true;
|
||||
try {
|
||||
const payload: Tag = {
|
||||
id: formModel.id || undefined,
|
||||
name: formModel.name.trim(),
|
||||
zhCN: formModel.name.trim()
|
||||
};
|
||||
if (isCreateMode.value) {
|
||||
await TagAPI.create(payload);
|
||||
} else {
|
||||
await TagAPI.update(payload);
|
||||
}
|
||||
editDialogVisible.value = false;
|
||||
await loadTags();
|
||||
Toast.success("标签已保存");
|
||||
} catch {
|
||||
Toast.error("标签保存失败");
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function confirmRemoveTag(tag: Tag, event?: MouseEvent): void {
|
||||
event?.preventDefault();
|
||||
event?.stopPropagation();
|
||||
if (!tag.id) {
|
||||
return;
|
||||
}
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "删除标签",
|
||||
content: `确定删除标签 ${getTagName(tag)} 吗？`,
|
||||
cancelBtn: "取消",
|
||||
confirmBtn: "删除",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
await removeTag(tag.id || "");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function removeTag(id: string): Promise<void> {
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await TagAPI.remove(id);
|
||||
tagList.value = tagList.value.filter(item => item.id !== id);
|
||||
Toast.success("标签已删除");
|
||||
} catch {
|
||||
Toast.error("标签删除失败");
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadTags);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.tag-list {
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
|
||||
|
||||
.tag-panel {
|
||||
gap: .75rem;
|
||||
display: flex;
|
||||
padding: 0 1rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
|
||||
.item {
|
||||
flex: 1 1 auto;
|
||||
color: var(--td-brand-color);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
min-width: 5rem;
|
||||
max-width: 100%;
|
||||
padding: .5rem .75rem;
|
||||
font-size: .875rem;
|
||||
min-height: 2rem;
|
||||
border: 1px solid var(--td-brand-color);
|
||||
align-items: center;
|
||||
border-radius: .75rem;
|
||||
justify-content: center;
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-align: center;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: inherit;
|
||||
flex: 0 0 auto;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
background: transparent;
|
||||
margin-left: .5rem;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: #52607a;
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.create {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-dialog {
|
||||
padding: 1rem 0;
|
||||
|
||||
.name-input {
|
||||
--td-input-vertical-padding: 10px;
|
||||
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.tag-list {
|
||||
|
||||
.empty {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user