<template>
<div class="app
-c
ontainer">
<
el-form
:mod
el="queryParams"
ref="queryForm"
size="small"
:inline="true"
v
-show="showSearch"
lab
el-width="68px"
>
<
el-form
-item>
<
el-butt
on
type="primary"
ic
on="
el-ic
on-search"
size="mini"
@click="handleQuery"
>搜索</
el-butt
on
>
<
el-butt
on ic
on="
el-ic
on-refresh" size="mini" @click="resetQuery"
>重置</
el-butt
on
>
</
el-form
-item>
</
el-form>
<
el-row :gutter="10" class="mb8">
<
el-col :span="1
.5">
<
el-butt
on
type="primary"
plain
ic
on="
el-ic
on-plus"
size="mini"
@click="handleAdd"
v
-hasPermi="['speechAnalysis:keywords:add']"
>新增关键词</
el-butt
on
>
</
el-col>
<
el-col :span="1
.5">
<
el-butt
on
type="
success"
plain
ic
on="
el-ic
on-upload"
size="mini"
@click="importDialogVisible = true"
>批量导入</
el-butt
on
>
</
el-col>
<
el-col :span="1
.5">
<
el-butt
on
type="danger"
plain
ic
on="
el-ic
on-d
elete"
size="mini"
:disabled="!s
electedKeywords
.length"
@click="batchRemoveKeywords"
>批量删除</
el-butt
on
>
</
el-col>
</
el-row>
<!
-- 关键词表格展示
-->
<
el-table
v
-loading="loading"
:data="keywordsData"
@s
electi
on-change="handleS
electi
onChange"
>
<
el-table
-column
type="s
electi
on"
width="55"
align="center"
></
el-table
-column>
<
el-table
-column
lab
el="序号"
type="index"
width="60"
align="center"
:index="indexMethod"
></
el-table
-column>
<
el-table
-column lab
el="关键词内容" prop="c
ontent" align="center">
<template slot
-scope="{ row, $index }">
<
el-input
v
-mod
el="row
.c
ontent"
size="mini"
@blur="handleKeywordEdit($index)"
clearable
/>
</template>
</
el-table
-column>
<
el-table
-column
lab
el="操作"
width="150"
align="center"
class
-name="small
-padding fixed
-width"
>
<template slot
-scope="{ row }">
<!
-- 只解构 row
-->
<
el-butt
on
size="mini"
type="text"
ic
on="
el-ic
on-d
elete"
@click="removeKeyword(row)"
>删除</
el-butt
on
>
</template>
</
el-table
-column>
</
el-table>
<!
-- 分页控件
-->
<
el-paginati
on
@size
-change="handleSizeChange"
@current
-change="handleCurrentChange"
:current
-page="queryParams
.pageNum"
:page
-sizes="[10, 20, 50, 100]"
:page
-size="queryParams
.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="allKeywords
.length"
class="paginati
on-c
ontainer"
>
</
el-paginati
on>
<!
-- 批量导入对话框
-->
<
el-dialog
title="批量导入关键词"
:visible
.sync="importDialogVisible"
width="50%"
>
<
el-alert
title="支持以下格式导入："
type="info"
style="margin
-bottom: 15px"
>
<div>1
. 每行一个关键词</div>
<div>2
. 用 | 竖线分隔的关键词</div>
</
el-alert>
<
el-input
type="textarea"
:rows="8"
placeholder="请输入关键词，每行一个或用|分隔"
v
-mod
el="importKeywordsText"
/>
<div slot="footer" class="dialog
-footer">
<
el-butt
on @click="importDialogVisible = false">取 消</
el-butt
on>
<
el-butt
on type="primary" @click="handleImportKeywords"
>确 定</
el-butt
on
>
</div>
</
el-dialog>
<!
-- 添加关键词对话框
-->
<
el-dialog :title="dialogTitle" :visible
.sync="dialogVisible" width="30%">
<
el-form ref="keywordForm" :mod
el="keywordForm" :rules="keywordRules">
<
el-form
-item lab
el="关键词内容" prop="c
ontent">
<
el-input v
-mod
el="keywordForm
.c
ontent" placeholder="请输入关键词" />
</
el-form
-item>
</
el-form>
<div slot="footer" class="dialog
-footer">
<
el-butt
on @click="dialogVisible = false">取 消</
el-butt
on>
<
el-butt
on type="primary" @click="submitKeywordForm">确 定</
el-butt
on>
</div>
</
el-dialog>
</div>
</template>
<script>
import {
listKeywords,
updateKeywords,
addKeywords,
} from "@/api/speechAnalysis/keywords";
export default {
name: "KeywordsManager",
data() {
return {
// 加载状态
loading: true,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
},
// 显示搜索条件
showSearch: true,
// 当前页关键词数据
keywordsData: [],
// 所有关键词数据
allKeywords: [],
// 原始数据
originalKeywords: null,
// 选中的关键词索引
s
electedKeywords: [],
// 导入对话框
importDialogVisible: false,
importKeywordsText: "",
// 添加/编辑对话框
dialogVisible: false,
dialogTitle: "",
keywordForm: {
c
ontent: "",
},
keywordRules: {
c
ontent: [
{ required: true, message: "关键词
不能为空", trigger: "blur" },
{ max: 50, message: "长度
不能超过50个字符", trigger: "blur" },
],
},
// 操作类型: add/edit
operateType: "",
};
},
created() {
this
.getKeywordsList();
},
methods: {
// 获取关键词列表
getKeywordsList() {
this
.loading = true;
listKeywords(this
.queryParams)
.then((resp
onse) => {
if (resp
onse
.rows && resp
onse
.rows
.length > 0) {
this
.originalKeywords = resp
onse
.rows[0];
// 处理关键词数据
this
.allKeywords = this
.originalKeywords
.keywordsC
ontent
? this
.originalKeywords
.keywordsC
ontent
.split("|")
.filter((item) => item
.trim())
.map((item) => ({ c
ontent: item
.trim() }))
: [];
this
.updateDisplayData();
}
else {
// 如果没有数据，初始化一个空对象
this
.originalKeywords = {
guid: null,
keywordsC
ontent: "",
};
this
.allKeywords = [];
this
.keywordsData = [];
}
this
.loading = false;
});
},
// 更新显示数据
updateDisplayData() {
c
onst start = (this
.queryParams
.pageNum
- 1) * this
.queryParams
.pageSize;
c
onst end = start + this
.queryParams
.pageSize;
this
.keywordsData = this
.allKeywords
.slice(start, end);
},
// 保存关键词到后端
saveKeywords() {
// 合并关键词数组为字符串
c
onst keywordsStr = this
.allKeywords
.map((item) => item
.c
ontent)
.join("|");
this
.originalKeywords
.keywordsC
ontent = keywordsStr;
c
onst request = this
.originalKeywords
.guid
? updateKeywords(this
.originalKeywords)
: addKeywords(this
.originalKeywords);
return request
.then(() => {
this
.$message
.success("保存成功");
this
.getKeywordsList();
});
},
// 添加关键词
handleAdd() {
this
.dialogTitle = "添加关键词";
this
.operateType = "add";
this
.keywordForm
.c
ontent = "";
this
.dialogVisible = true;
this
.$nextTick(() => {
this
.$refs
.keywordForm?
.clearValidate();
});
},
// 提交关键词表单
submitKeywordForm() {
this
.$refs
.keywordForm
.validate((valid) => {
if (valid) {
// 去掉首尾空格
c
onst trimmedC
ontent = this
.keywordForm
.c
ontent
.trim();
if (this
.operateType === "add") {
// 检查是否已存在相同关键词
if (
this
.allKeywords
.some((item) => item
.c
ontent === trimmedC
ontent)
) {
this
.$message
.warning("该关键词已存在");
return;
}
this
.allKeywords
.push({ c
ontent: trimmedC
ontent });
}
this
.saveKeywords()
.then(() => {
this
.dialogVisible = false;
this
.updateDisplayData();
});
}
});
},
// 编辑关键词
handleKeywordEdit(index) {
c
onst row = this
.keywordsData[index];
if (!row || !row
.c
ontent) {
this
.$message
.warning("关键词
不能为空");
// 如果内容为空，恢复原值或删除该行
if (row) {
row
.c
ontent = "";
}
return;
}
// 去掉首尾空格
row
.c
ontent = row
.c
ontent
.trim();
if (row
.c
ontent === "") {
this
.$message
.warning("关键词
不能为空");
return;
}
// 计算在全量数据中的实际索引
c
onst globalIndex = (this
.queryParams
.pageNum
- 1) * this
.queryParams
.pageSize + index;
// 检查是否已存在相同关键词
c
onst exists = this
.allKeywords
.some(
(item, i) => item
.c
ontent === row
.c
ontent && i !== globalIndex
);
if (exists) {
this
.$message
.warning("该关键词已存在");
return;
}
// 更新全量数据
this
.allKeywords[globalIndex]
.c
ontent = row
.c
ontent;
this
.saveKeywords();
},
// 删除关键词
removeKeyword(index) {
this
.$c
onfirm("确认删除该关键词吗?", "提示", {
c
onfirmButt
onText: "确定",
canc
elButt
onText: "取消",
type: "warning",
})
.then(() => {
// 计算在全量数据中的实际索引
c
onst globalIndex = (this
.queryParams
.pageNum
- 1) * this
.queryParams
.pageSize + index;
this
.allKeywords
.splice(globalIndex, 1);
this
.saveKeywords()
.then(() => {
this
.updateDisplayData();
});
});
},
// 批量删除关键词
batchRemoveKeywords() {
if (this
.s
electedKeywords
.length === 0) {
this
.$message
.warning("请选择要删除的关键词");
return;
}
this
.$c
onfirm(
`确认删除选中的 ${this
.s
electedKeywords
.length} 个关键词吗?`,
"提示",
{
c
onfirmButt
onText: "确定",
canc
elButt
onText: "取消",
type: "warning",
}
)
.then(() => {
// 从大到小排序索引，避免删除时索引变化
c
onst sortedIndexes = [
...this
.s
electedKeywords]
.sort((a, b) => b
- a);
// 计算在全量数据中的实际索引并删除
c
onst pageStart = (this
.queryParams
.pageNum
- 1) * this
.queryParams
.pageSize;
sortedIndexes
.forEach(index => {
c
onst globalIndex = pageStart + index;
this
.allKeywords
.splice(globalIndex, 1);
});
this
.s
electedKeywords = [];
this
.saveKeywords()
.then(() => {
this
.updateDisplayData();
});
});
},
// 导入关键词
handleImportKeywords() {
if (!this
.importKeywordsText
.trim()) {
this
.$message
.warning("请输入要导入的关键词");
return;
}
// 处理导入文本：支持换行和竖线分隔，并去掉首尾空格
c
onst newKeywords = this
.importKeywordsText
.split(/[\n|]/)
.map((item) => item
.trim()) // 去掉每个关键词的首尾空格
.filter((item) => item); // 过滤掉空字符串
if (newKeywords
.length === 0) {
this
.$message
.warning("没有检测到有效的关键词");
return;
}
// 添加到现有关键词中，并去重
c
onst existingKeywords = this
.allKeywords
.map((item) => item
.c
ontent);
c
onst uniqueNewKeywords = [
...new Set(newKeywords)]
.filter((item) => !existingKeywords
.includes(item))
.map((item) => ({ c
ontent: item }));
this
.allKeywords = [
...this
.allKeywords,
...uniqueNewKeywords];
this
.importKeywordsText = "";
this
.importDialogVisible = false;
this
.saveKeywords()
.then(() => {
this
.$message
.success(`成功导入 ${uniqueNewKeywords
.length} 个关键词`);
this
.updateDisplayData();
});
},
// 选择变化
handleS
electi
onChange(s
electi
on) {
this
.s
electedKeywords = s
electi
on.map((item) =>
this
.keywordsData
.indexOf(item)
);
},
// 分页大小改变
handleSizeChange(val) {
this
.queryParams
.pageSize = val;
this
.updateDisplayData();
},
// 当前页改变
handleCurrentChange(val) {
this
.queryParams
.pageNum = val;
this
.updateDisplayData();
},
// 自定义序号
indexMethod(index) {
return (this
.queryParams
.pageNum
- 1) * this
.queryParams
.pageSize + index + 1;
},
// 搜索
handleQuery() {
this
.queryParams
.pageNum = 1;
this
.getKeywordsList();
},
// 重置
resetQuery() {
this
.queryParams = {
pageNum: 1,
pageSize: 10,
};
this
.handleQuery();
},
},
};
</script>
<style scoped>
.app
-c
ontainer {
padding: 20px;
height: 100%;
display: flex;
flex
-directi
on: column;
}
.paginati
on-c
ontainer {
margin: 15px 0;
text
-align: right;
}
.el-table
.c
ell {
padding: 0 5px;
}
.el-table
.el-input__inner {
border: n
one;
background: transparent;
}
.el-table
.el-input__inner:focus {
background: #fff;
border: 1px solid #dcdfe6;
}
</style>这个
前端代码有什么需要优化的地方吗 优化后的代码是什么样的
本文记录了一位开发者在JSX中遇到on-success事件处理不触发的问题及解决方案。关键在于，on-success应该作为组件的属性在render方法中指定，而非通过on绑定的事件。这一常见错误可能导致前端上传功能失效，正确理解并应用props中的on-success属性是确保功能正常的关键。
扫一扫
1642
到【灌水乐园】发言
