|
|
@@ -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({ message: '已取消修改', plain: true})
|
|
|
+}
|
|
|
+
|
|
|
/**
|
|
|
* 切换编辑状态, 并自动获取焦点
|
|
|
* @param row 行数据
|
|
|
@@ -247,9 +262,9 @@ function resetForm(formEl: FormInstance | undefined) {
|
|
|
*/
|
|
|
function handleResponse(response: any) {
|
|
|
if (response.code === SUCCESS_CODE) {
|
|
|
- ElMessage.success(response.msg);
|
|
|
+ ElMessage.success({ message: response.msg, plain: true });
|
|
|
} else {
|
|
|
- ElMessage.error(response.msg || '请联系管理员');
|
|
|
+ ElMessage.error({ message: response.msg || '请联系管理员', plain: true });
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -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)" style="width: 150px">
|
|
|
+ <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">
|
