✨ feat: 优化关键词管理用户体验

src/views/keyword/keywordManage/components/keyword-manage-table.vue

@@ -23,6 +23,8 @@ interface DataItem {
   add_date: string;
   creator: number;
   isEditing: boolean; // 添加isEditing字段
+  popConfirmVisible: boolean; // 添加popConfirmVisible字段
+  tempSearchTermType: string;
 }
 
 const SUCCESS_CODE = 2000;
@@ -108,7 +110,8 @@ async function fetchSearchTermList() {
     const response = await api.getSearchTermList(query);
     total.value = response.total;
     const responseData: DataItem[] = response.data;
-    tableData.value = responseData.map((item) => ({ ...item, isEditing: false }));
+    tableData.value = responseData.map((item) => ({ ...item, isEditing: false, popConfirmVisible: false, tempSearchTermType: item.searchTerm_type }));
+    console.log('tableData.value ', tableData.value );
   } catch (error) {
     console.log('error:', error);
   } finally {
@@ -139,10 +142,10 @@ async function updateSearchTerm(row: any) {
   }
 }
 
-async function updateSearchTermType(row: any, newValue: string) {
+async function updateSearchTermType(row: any) {
   const data = {
     searchTerm: row.searchTerm,
-    searchTerm_type: newValue,
+    searchTerm_type: row.searchTerm_type,
   };
   try {
     const response = await api.postUpdateSearchTerm({ data, id: row.id });
@@ -154,9 +157,21 @@ async function updateSearchTermType(row: any, newValue: string) {
     }
   } catch (error) {
     console.log('error:', error);
+  } finally {
+    row.popConfirmVisible = false;
   }
 }
 
+function showPopConfirm(row: any) {
+  row.popConfirmVisible = true;
+}
+
+function cancelUpdate(row: any) {
+  row.popConfirmVisible = false;
+  row.searchTerm_type = row.tempSearchTermType; // 恢复原值
+  ElMessage.warning('已取消修改')
+}
+
 /**
  * 切换编辑状态, 并自动获取焦点
  * @param row 行数据
@@ -263,27 +278,39 @@ function handleResponse(response: any) {
         </el-icon>
         添加关键词
       </el-button>
-      <el-table :data="tableData" stripe height="530" style="width: 100%">
-        <el-table-column fixed="left" prop="add_date" label="添加日期" width="180" />
-        <el-table-column prop="searchTerm" label="关键词">
+      <el-table :data="tableData" stripe max-height="530" style="width: 100%">
+        <el-table-column fixed="left" prop="add_date" label="添加日期" width="180" sortable />
+        <el-table-column prop="searchTerm" label="关键词" sortable>
           <template #default="{ row }">
             <el-input ref="searchTermInpRef" v-if="row.isEditing" v-model="row.searchTerm" @change="updateSearchTerm(row)" />
             <span class="font-bold" v-else>{{ row.searchTerm }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="searchTerm_type" label="关键词类型">
+        <el-table-column prop="searchTerm_type" label="关键词类型" sortable>
           <template #default="{ row }">
-            <el-select v-model="row.searchTerm_type" @change="(value) => updateSearchTermType(row, value)">
-              <el-option label="positive" value="positive" />
-              <el-option label="negative" value="negative" />
-            </el-select>
+            <el-popconfirm
+                title="确定修改吗?"
+                @confirm="updateSearchTermType(row)"
+                @cancel="cancelUpdate(row)"
+                :visible="row.popConfirmVisible">
+              <template #reference>
+                <el-select v-model="row.searchTerm_type" @change="showPopConfirm(row)">
+                  <el-option label="positive" value="positive" />
+                  <el-option label="negative" value="negative" />
+                </el-select>
+              </template>
+            </el-popconfirm>
           </template>
         </el-table-column>
         <el-table-column fixed="right" label="操作" width="120">
           <template #default="{ row }">
             <el-button link type="primary" size="small" @click="handleClick(row)" v-if="!row.isEditing"> 编辑</el-button>
             <el-button link type="primary" size="small" @click="handleClick(row)" v-else> 取消</el-button>
-            <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+            <el-popconfirm title="确定删除吗?" @confirm="handleDelete(row)">
+              <template #reference>
+                <el-button link type="danger" size="small">删除</el-button>
+              </template>
+            </el-popconfirm>
           </template>
         </el-table-column>
       </el-table>
@@ -299,7 +326,7 @@ function handleResponse(response: any) {
       </div>
     </el-card>
   </div>
-
+  <!-- 添加关键词弹窗 -->
   <el-dialog v-model="dialogVisible" title="添加关键词" width="500" :before-close="handleClose">
     <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules" label-width="auto">
       <el-form-item label="关键词" prop="searchTerm">
@@ -311,10 +338,6 @@ function handleResponse(response: any) {
           <el-option label="negative" value="negative" />
         </el-select>
       </el-form-item>
-      <!--<el-form-item>-->
-      <!--  <el-button type="primary" @click="submitForm(ruleFormRef)"> Submit</el-button>-->
-      <!--  <el-button @click="resetForm(ruleFormRef)">Reset</el-button>-->
-      <!--</el-form-item>-->
     </el-form>
     <template #footer>
       <div class="dialog-footer">