模型训练-批量批注、批量删除以及批量导入功能实现

sd

2025-08-05 72b025d6b43271ae88541ea23c92070b3b2acc96

 src/pages/modelTuning/components/leftSelect.vue

@@ -1,24 +1,27 @@
<template>
    <div class="tag-manager">

        <!-- 搜索框 -->
        <el-input v-model="searchQuery" placeholder="搜索" class="search-input" :prefix-icon="SearchIcon" clearable />
        <el-input v-model="searchQuery" @change="handleSearch" placeholder="搜索" class="search-input" :prefix-icon="SearchIcon" clearable />

        <!-- 标签区域 -->
        <div class="tags-section">
            <div class="header">
                <div class="title">全部标签</div>
                <img src="@/assets/img/添加标签.png" class="btn-icon" />
                <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.name }}
                        {{ 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-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)" /> -->
@@ -30,34 +33,164 @@
</template>

<script>
import { getTrainTags, saveTrainTags, updateTrainTags, deleteTrainTags } from "@/api/modelTuning";
export default {
    name: 'TagManager',
    data() {
        return {
            addProm: false,
            searchQuery: '',
            tags: [
                { id: 1, name: '打电话', active: true },
                { id: 2, name: '吸烟', active: false },
                { id: 3, name: '佩戴安全帽', active: false },
                { id: 4, name: '未佩戴安全帽', active: false }
                { 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: {
        // 处理搜索
        handleSearch() {
            console.log('执行搜索:', this.searchQuery);
            this.fetchSelectData({
                searchName:this.searchQuery
            })
        },
        async fetchSelectData(res) {
            this.tags = []
            let rspc = await getTrainTags(res);
            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);
            // console.log('删除标签:', tag);
            // 这里添加删除标签的实际逻辑
            this.tags = this.tags.filter(t => t.id !== tag.id);
            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("取消")
                
            });
        }
    }
}
@@ -124,12 +257,14 @@
    color: #606266;
    border: none;
}

/* 新增：标签容器 */
.tag-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 10px; /* 与图片右侧间距一致 */
    margin-right: 10px;
    /* 与图片右侧间距一致 */
}

/* 修改：标签项宽度自适应 */
@@ -138,7 +273,8 @@
    font-size: 16px;
    color: #909399;
    cursor: pointer;
    padding: 8px 12px; /* 增加点击区域 */
    padding: 8px 12px;
    /* 增加点击区域 */
}

/* 新增：操作按钮区域样式 */
@@ -146,7 +282,8 @@
    /* margin-left: 10px; */
    display: flex;
    gap: 5px;
    background-color: #ecf5ff; /* 添加浅蓝色背景高亮 */
    background-color: #ecf5ff;
    /* 添加浅蓝色背景高亮 */
    height: 39.31px;
    align-items: center;
}
@@ -154,10 +291,12 @@
/* 新增：编辑按钮样式 */
.edit-btn {
    margin-right: 10px;
    color: #409EFF; /* 蓝色编辑图标 */
    color: #409EFF;
    /* 蓝色编辑图标 */
    border-color: #409EFF;
    font-size: 20px;
}

.delete-btn {
    color: #F17777;
    border-color: #F17777;
@@ -168,10 +307,12 @@
.tag-item.active {
    font-weight: bold;
    color: #303133;
    background-color: #ecf5ff; /* 添加浅蓝色背景高亮 */
    background-color: #ecf5ff;
    /* 添加浅蓝色背景高亮 */
    /* border-radius: 4px; */
}
.btn-icon{

.btn-icon {
    width: 20px;
}
</style>