red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加防抖指令和任务管理功能

Browse Source 
feat(anchor): 新增主播管理模块

feat(account): 完善客服账号管理功能

feat(knowledge): 添加任务列表查看和重新执行功能

feat(router): 增强路由组件动态导入逻辑

refactor: 优化多个视图的按钮防抖处理

style: 统一代码格式和样式

fix: 修复客服账号状态切换逻辑
This commit is contained in:
吴思建
2026-04-20 10:20:45 +08:00
parent 4f547b5bff
commit c4bdfe2bb3
15 changed files with 1035 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/views/customerService/account/component/editAccount.vue
View File

@@ -3,14 +3,18 @@
<el-dialog :title="(formData.id ? '修改' : '添加') + '客服账号'" v-model="isShowDialog" width="769px">
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
<el-row :gutter="35">
<!-- 客服账号输入框 -->
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="客服账号" prop="accountName">
<el-input v-model="formData.accountName" placeholder="请输入客服账号，如：cs_xhs_qixue" clearable />
<el-form-item label="账号编码" prop="accountCode">
<el-input v-model="formData.accountCode" placeholder="请输入账号编码" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="客服账号" prop="accountName">
<el-input v-model="formData.accountName" placeholder="请输入客服账号名称" clearable />
</el-form-item>
</el-col>
<!-- 客服平台选择 -->
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="客服平台" prop="platform">
<el-select v-model="formData.platform" placeholder="请选择客服平台" clearable style="width: 100%">
@@ -22,37 +26,35 @@
</el-col>
</el-row>
<!-- 高级配置（可选） -->
<el-collapse v-model="activeNames" class="mt20">
<el-collapse-item title="高级配置（可选）" name="advanced">
<el-form-item label="自定义提示词" prop="prompt">
<el-input
type="textarea"
v-model="formData.prompt"
:rows="8"
placeholder="留空则使用系统默认提示词模板，如：你是专业的客服顾问，请用温暖关心的语气回答用户问题..."
/>
<div style="color: #909399; font-size: 12px; margin-top: 5px;">
提示：系统会自动引用知识库内容，您只需专注于业务话术即可。留空将使用默认模板，创建后也可在此修改
</div>
<el-form-item label="AI身份" prop="selfIdentity">
<el-input type="textarea" v-model="formData.selfIdentity" :rows="4" placeholder="AI客服身份描述，如：你是专业的小红书客服顾问..." />
</el-form-item>
<el-form-item label="开场白" prop="greeting">
<el-input
type="textarea"
v-model="formData.greeting"
:rows="6"
:rows="4"
placeholder="WebSocket连接时发送的开场白，如：你好，有什么可以帮你的吗？"
/>
<div class="form-tip">留空则不发送开场白</div>
</el-form-item>
<el-form-item label="关键词" prop="keywordOption">
<el-select v-model="formData.keywordOption" multiple placeholder="选择关键词选项" style="width: 100%">
<el-option label="推荐回复" value="recommend" />
<el-option label="智能问答" value="qa" />
<el-option label="人工转接" value="transfer" />
</el-select>
</el-form-item>
</el-collapse-item>
</el-collapse>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" size="default" :loading="loading">
<el-button v-debounce @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" v-debounce @click="onSubmit" size="default" :loading="loading">
{{ formData.id ? '修 改' : '新 增' }}
</el-button>
</span>
@@ -64,17 +66,19 @@
<script lang="ts" setup>
import { ref, reactive, toRefs, nextTick } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { addAccount, updateAccount } from '/@/api/customerService/account';
import { addAccount, updateAccount, getAccountOne } from '/@/api/customerService/account';
interface DialogFormData {
id?: string;
id?: number;
datasetIds: number[];
documentIds: number[];
accountCode: string;
accountName: string;
platform: string;
prompt?: string;
status?: number;
greeting?: string;
status: number;
creator: '';
modifier: '';
keywordOption?: string[];
selfIdentity?: string;
}
const emit = defineEmits<{
@@ -86,22 +90,21 @@ const state = reactive({
isShowDialog: false,
activeNames: [] as string[],
formData: {
id: '',
id: 0,
datasetIds: [] as number[],
documentIds: [] as number[],
accountCode: '',
accountName: '',
platform: '',
prompt: '',
greeting: '',
status: 1,
creator: '',
modifier: '',
greeting: '',
keywordOption: [] as string[],
selfIdentity: '',
} as DialogFormData,
});
const rules: FormRules = {
accountName: [
{ required: true, message: '客服账号不能为空', trigger: 'blur' },
{ min: 2, max: 50, message: '客服账号长度在 2 到 50 个字符', trigger: 'blur' },
],
accountCode: [{ required: true, message: '账号编码不能为空', trigger: 'blur' }],
platform: [{ required: true, message: '请选择客服平台', trigger: 'change' }],
};
@@ -111,21 +114,38 @@ const { loading, isShowDialog, formData, activeNames } = toRefs(state);
/**
* 打开对话框
*/
const openDialog = (row?: DialogFormData) => {
const openDialog = async (row?: DialogFormData) => {
resetForm();
if (row && row.id) {
// 编辑模式：填充数据
state.formData = { ...row };
} else {
// 新增模式：重置ID和状态
state.formData.id = '';
state.formData.status = 1;
try {
state.loading = true;
const res = await getAccountOne({ id: row.id });
if (res.data) {
state.formData = {
...res.data,
id: res.data.id,
datasetIds: res.data.datasetIds || [],
documentIds: res.data.documentIds || [],
accountCode: res.data.accountCode || '',
accountName: res.data.accountName || '',
platform: res.data.platform || '',
status: res.data.status ?? 1,
greeting: res.data.greeting || '',
keywordOption: res.data.keywordOption || [],
selfIdentity: res.data.selfIdentity || '',
};
}
} catch (error) {
console.error('获取账号详情失败:', error);
ElMessage.error('获取账号详情失败');
} finally {
state.loading = false;
}
}
state.isShowDialog = true;
// 下次DOM更新后清除验证
nextTick(() => {
formRef.value?.clearValidate();
});
@@ -158,12 +178,10 @@ const onSubmit = async () => {
state.loading = true;
if (state.formData.id) {
// 修改操作
await updateAccount(state.formData);
await updateAccount(state.formData as any);
ElMessage.success('修改成功');
} else {
// 新增操作
await addAccount(state.formData);
await addAccount(state.formData as any);
ElMessage.success('添加成功');
}
@@ -171,9 +189,6 @@ const onSubmit = async () => {
emit('refresh');
} catch (error) {
console.error('操作失败:', error);
// 错误已由请求拦截器统一处理
} finally {
state.loading = false;
}
};
@@ -182,14 +197,16 @@ const onSubmit = async () => {
*/
const resetForm = () => {
state.formData = {
id: '',
id: 0,
datasetIds: [],
documentIds: [],
accountCode: '',
accountName: '',
platform: '',
prompt: '',
greeting: '',
status: 1,
creator: '',
modifier: '',
greeting: '',
keywordOption: [],
selfIdentity: '',
};
};

43
src/views/customerService/account/index.vue
View File

@@ -21,19 +21,19 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button size="default" type="primary" class="ml10" @click="handleSearch" :loading="tableData.loading">
<el-button size="default" type="primary" class="ml10" v-debounce @click="handleSearch" :loading="tableData.loading">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10 " @click="onOpenAddRole">
<el-button size="default" type="success" class="ml10" v-debounce @click="onOpenAddRole">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增客服
</el-button>
<el-button size="default" class="ml10" @click="handleReset" :disabled="tableData.loading">
<el-button size="default" class="ml10" v-debounce @click="handleReset" :disabled="tableData.loading">
<el-icon>
<ele-Refresh />
</el-icon>
@@ -50,6 +50,7 @@
<el-button
size="small"
:type="!scope.row.isDisabled ? 'success' : 'info'"
v-debounce
@click="handleStatusChange(scope.row)"
:loading="scope.row.statusLoading"
>
@@ -72,7 +73,7 @@
</el-table-column>
<el-table-column label="操作" width="150">
<template #default="scope">
<el-button style="color: deepskyblue" size="small" text type="primary" @click="onOpenEditRole(scope.row)">
<el-button style="color: deepskyblue" size="small" text type="primary" v-debounce @click="onOpenEditRole(scope.row)">
<el-icon><ele-EditPen /></el-icon>修改
</el-button>
</template>
@@ -94,19 +95,26 @@
import { ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EditAccount from './component/editAccount.vue';
import { addAccount, getaccountList, updatestate } from '/@/api/customerService/account';
import { getAccountList, updateAccount } from '/@/api/customerService/account';
// 定义类型接口
interface TableDataItem {
id: string;
id: number;
accountName: string;
isDisabled: boolean; // 布尔值：false=启用，true=禁用
isDisabled: boolean;
platform: string;
creator: string;
modifier: string;
createdAt: number;
updatedAt: number;
statusLoading?: boolean;
datasetIds?: number[];
documentIds?: number[];
accountCode?: string;
status?: number;
greeting?: string;
keywordOption?: string[];
selfIdentity?: string;
}
interface TableParam {
@@ -158,7 +166,7 @@ const getList = async () => {
platform: tableData.param.platform || undefined,
};
const res = await getaccountList(queryParams);
const res = await getAccountList(queryParams);
if (res && res.data) {
tableData.data = (res.data.list || []).map((item: TableDataItem) => ({
@@ -172,7 +180,6 @@ const getList = async () => {
ElMessage.warning('暂无数据');
}
} catch (error) {
console.error('获取客服账号列表失败:', error);
// 错误已由请求拦截器统一处理
tableData.data = [];
tableData.total = 0;
@@ -236,7 +243,6 @@ const formatTime = (time: string | number | Date): string => {
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} catch (error) {
console.error('时间格式化错误:', error);
return String(time);
}
};
@@ -253,21 +259,23 @@ const handleStatusChange = async (row: TableDataItem) => {
});
row.statusLoading = true;
const newStatus = !row.isDisabled; // 切换布尔值
const newStatus = row.isDisabled ? 1 : 0;
await updatestate({
await updateAccount({
id: row.id,
isDisabled: newStatus,
datasetIds: [],
documentIds: [],
accountCode: '',
platform: '',
status: newStatus,
});
ElMessage.success(`客服账号已${newStatus ? '禁用' : '启用'}`);
await getList(); // 重新获取数据
ElMessage.success(`客服账号已${!row.isDisabled ? '禁用' : '启用'}`);
await getList();
} catch (error) {
if (error == 'cancel') {
return;
}
console.error('状态切换失败:', error);
// 错误已由请求拦截器统一处理
} finally {
setTimeout(() => {
row.statusLoading = false;
@@ -289,7 +297,6 @@ const onOpenEditRole = (row: any) => {
editRoleRef.value?.openDialog(row);
};
// 生命周期
onMounted(() => {
getList();

10
src/views/customerService/script/index.vue
View File

@@ -8,19 +8,19 @@
<el-input size="default" v-model="tableData.param.tag" placeholder="请输入标签" class="w-50 m-2" clearable @keyup.enter="handleSearch" />
</el-form-item>
<el-form-item>
<el-button size="default" type="primary" class="ml10" @click="handleSearch" :loading="tableData.loading">
<el-button size="default" type="primary" class="ml10" v-debounce @click="handleSearch" :loading="tableData.loading">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button size="default" class="ml10" @click="handleReset" :disabled="tableData.loading">
<el-button size="default" class="ml10" v-debounce @click="handleReset" :disabled="tableData.loading">
<el-icon>
<ele-Refresh />
</el-icon>
重置
</el-button>
<el-button size="default" type="success" @click="handleAdd">
<el-button size="default" type="success" v-debounce @click="handleAdd">
<el-icon><FolderAdd /></el-icon>
新增话术
</el-button>
@@ -47,10 +47,10 @@
</el-table-column>
<el-table-column label="操作" width="200" align="center" fixed="right">
<template #default="{ row }">
<el-button size="small" text type="primary" class="op-btn-edit" @click="handleEdit(row)">
<el-button size="small" text type="primary" class="op-btn-edit" v-debounce @click="handleEdit(row)">
<el-icon><EditPen /></el-icon>修改
</el-button>
<el-button size="small" text type="danger" class="op-btn-del" @click="handleDelete(row)">
<el-button size="small" text type="danger" class="op-btn-del" v-debounce @click="handleDelete(row)">
<el-icon><DeleteFilled /></el-icon>删除
</el-button>
</template>