From 72b025d6b43271ae88541ea23c92070b3b2acc96 Mon Sep 17 00:00:00 2001
From: sd <shidong@jhsoft.cc>
Date: 星期二, 05 八月 2025 16:15:44 +0800
Subject: [PATCH] 模型训练-批量批注、批量删除以及批量导入功能实现
---
src/pages/modelTuning/components/leftSelect.vue | 173 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 157 insertions(+), 16 deletions(-)
diff --git a/src/pages/modelTuning/components/leftSelect.vue b/src/pages/modelTuning/components/leftSelect.vue
index cfa265a..68bc54c 100644
--- a/src/pages/modelTuning/components/leftSelect.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.8.0