<template>
|
<div class="tag-manager">
|
|
<!-- 搜索框 -->
|
<el-input v-model="searchQuery" placeholder="搜索" class="search-input" :prefix-icon="SearchIcon" clearable />
|
|
<!-- 标签区域 -->
|
<div class="tags-section">
|
<div class="header">
|
<div class="title">全部标签</div>
|
<img v-if="!addProm" src="@/assets/img/添加标签.png" class="btn-icon" @click.stop="addTag()" />
|
<!-- <img v-else src="@/assets/img/编辑标签.png" class="btn-icon" @click.stop="addTag()" /> -->
|
</div>
|
|
<div class="tags-list">
|
<el-input v-if="addProm" v-model="input" placeholder=""></el-input>
|
<!-- 修改：为每个标签项添加操作按钮区域 -->
|
<div v-for="tag in tags" :key="tag.id" class="tag-container">
|
<div :class="['tag-item', { active: tag.active }]" @click="selectTag(tag)">
|
{{ tag.tagName }}
|
</div>
|
<!-- 编辑和删除按钮（高亮时显示） -->
|
<div v-show="tag.active" class="tag-actions">
|
<i style="cursor: pointer" class="el-icon-edit edit-btn" @click.stop="editTag(tag)"></i>
|
<i style="cursor: pointer" class="el-icon-delete delete-btn" @click.stop="deleteTag(tag)"></i>
|
<!-- <el-button icon="el-icon-edit" circle class="edit-btn" @click.stop="editTag(tag)" />
|
<el-button icon="el-icon-delete" circle type="danger" @click.stop="deleteTag(tag)" /> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getTrainTags, saveTrainTags, updateTrainTags, deleteTrainTags } from "@/api/modelTuning";
|
export default {
|
name: 'TagManager',
|
data() {
|
return {
|
addProm: false,
|
searchQuery: '',
|
tags: [
|
{ id: 1, tagName: '打电话', active: true },
|
{ id: 2, tagName: '吸烟', active: false },
|
{ id: 3, tagName: '佩戴安全帽', active: false },
|
{ id: 4, tagName: '未佩戴安全帽', active: false }
|
],
|
SearchIcon: 'el-icon-search'
|
}
|
},
|
mounted() {
|
this.fetchSelectData()
|
},
|
methods: {
|
async fetchSelectData() {
|
this.tags = []
|
let rspc = await getTrainTags();
|
if (rspc && rspc.status === 200) {
|
let list = rspc.data.list;
|
for (let i = 0; i < list.length; i++) {
|
let item = {}
|
if (i == 0) {
|
item = {
|
active: true,
|
id: list[i].id,
|
tagName: list[i].tagName
|
}
|
} else {
|
item = {
|
active: false,
|
id: list[i].id,
|
tagName: list[i].tagName
|
|
}
|
}
|
this.tags.push(item)
|
this.$emit('change-trainId', this.tags[0].id);
|
}
|
}
|
},
|
selectTag(selectedTag) {
|
this.tags.forEach(tag => {
|
tag.active = tag.id === selectedTag.id;
|
});
|
this.$emit('change-trainId', selectedTag.id);
|
},
|
addTag() {
|
console.log('添加标签:');
|
// this.addProm = true
|
// 这里添加编辑标签的实际逻辑
|
this.$prompt('请输入标签名称', '', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
inputValidator: (value) => {
|
// 验证输入值：去除首尾空格后不能为空
|
if (!value || value.trim() === '') {
|
return '输入内容不能为空'; // 返回错误提示
|
}
|
return true; // 验证通过
|
}
|
}).then(async ({ value }) => {
|
let rspc = await saveTrainTags({
|
tagName: value
|
});
|
if (rspc && rspc.status === 200) {
|
this.$message({
|
type: 'success',
|
message: '成功'
|
});
|
this.fetchSelectData()
|
} else {
|
this.$message({
|
type: 'error',
|
message: rspc.msg
|
});
|
|
}
|
}).catch(() => {
|
console.info("取消")
|
});
|
},
|
editTag(tag) {
|
console.log('编辑标签:', tag);
|
// 这里添加编辑标签的实际逻辑
|
this.$prompt('请输入标签名称', '', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
inputValue: tag.tagName, // 设置默认值
|
inputValidator: (value) => {
|
// 验证输入值：去除首尾空格后不能为空
|
if (!value || value.trim() === '') {
|
return '输入内容不能为空'; // 返回错误提示
|
}
|
return true; // 验证通过
|
}
|
}).then(async ({ value }) => {
|
let rspc = await updateTrainTags({
|
id: tag.id,
|
tagName: value
|
});
|
if (rspc && rspc.status === 200) {
|
this.$message({
|
type: 'success',
|
message: '成功'
|
});
|
this.fetchSelectData()
|
} else {
|
this.$message({
|
type: 'error',
|
message: rspc.msg
|
});
|
|
}
|
}).catch(() => {
|
console.info("取消")
|
});
|
},
|
deleteTag(tag) {
|
// console.log('删除标签:', tag);
|
// 这里添加删除标签的实际逻辑
|
this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
let rspc = await deleteTrainTags({
|
id: tag.id,
|
});
|
if (rspc && rspc.status === 200) {
|
this.$message({
|
type: 'success',
|
message: '成功'
|
});
|
this.fetchSelectData()
|
} else {
|
this.$message({
|
type: 'error',
|
message: rspc.msg
|
});
|
|
}
|
}).catch(() => {
|
console.info("取消")
|
|
});
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.tag-manager {
|
background-color: #FFFFFF;
|
/* padding: 5px; */
|
/* max-width: 400px; */
|
margin: 0 auto;
|
}
|
|
.search-input {
|
margin-bottom: 20px;
|
width: 100%;
|
}
|
|
.search-input ::v-deep .el-input__inner {
|
border: 1px solid #DCDFE6;
|
}
|
|
.tags-section .header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
margin-right: 10px;
|
}
|
|
.tags-section .title {
|
font-weight: bold;
|
font-size: 18px;
|
}
|
|
|
.tags-list {
|
margin-left: 10px;
|
text-align: left;
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
}
|
|
.tag-item {
|
font-size: 16px;
|
color: #909399;
|
cursor: pointer;
|
}
|
|
.tag-item.active {
|
font-weight: bold;
|
color: #303133;
|
}
|
|
.screenshot-btn-wrapper {
|
display: flex;
|
justify-content: center;
|
margin-top: 30px;
|
}
|
|
.screenshot-btn {
|
background-color: #F5F7FA;
|
color: #606266;
|
border: none;
|
}
|
|
/* 新增：标签容器 */
|
.tag-container {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-right: 10px;
|
/* 与图片右侧间距一致 */
|
}
|
|
/* 修改：标签项宽度自适应 */
|
.tag-item {
|
flex-grow: 1;
|
font-size: 16px;
|
color: #909399;
|
cursor: pointer;
|
padding: 8px 12px;
|
/* 增加点击区域 */
|
}
|
|
/* 新增：操作按钮区域样式 */
|
.tag-actions {
|
/* margin-left: 10px; */
|
display: flex;
|
gap: 5px;
|
background-color: #ecf5ff;
|
/* 添加浅蓝色背景高亮 */
|
height: 39.31px;
|
align-items: center;
|
}
|
|
/* 新增：编辑按钮样式 */
|
.edit-btn {
|
margin-right: 10px;
|
color: #409EFF;
|
/* 蓝色编辑图标 */
|
border-color: #409EFF;
|
font-size: 20px;
|
}
|
|
.delete-btn {
|
color: #F17777;
|
border-color: #F17777;
|
font-size: 20px;
|
}
|
|
/* 修改：激活状态标签样式 */
|
.tag-item.active {
|
font-weight: bold;
|
color: #303133;
|
background-color: #ecf5ff;
|
/* 添加浅蓝色背景高亮 */
|
/* border-radius: 4px; */
|
}
|
|
.btn-icon {
|
width: 20px;
|
}
|
</style>
|
