实现话术功能

package.json

@@ -33,7 +33,7 @@
     "pinia": "^2.1.7",
     "print-js": "^1.6.0",
     "qrcodejs2-fixes": "^0.0.2",
-    "qs": "^6.12.0",
+    "qs": "^6.14.0",
     "screenfull": "^6.0.2",
     "sortablejs": "^1.15.2",
     "spark-md5": "^3.0.2",
@@ -51,6 +51,7 @@
   "devDependencies": {
     "@types/node": "^20.11.28",
     "@types/nprogress": "^0.2.3",
+    "@types/qs": "^6.14.0",
     "@types/sortablejs": "^1.15.8",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",

src/api/customerService/script/index.ts

@@ -1,65 +1,37 @@
-import request from '/@/utils/request';
+import request, { newService } from '/@/utils/request';
 
-export function getRoleList(query: Object) {
+//获取话术列表
-	return request({
+export function getscriptList(data: object) {
-		url: '/api/v1/system/role/list',
+	return newService({
-		method: 'get',
+		url: '/customerService/speechcraft/list',
-		params: query,
-	});
-}
-
-export function getRoleParams() {
-	return request({
-		url: '/api/v1/system/role/getParams',
-		method: 'get',
-	});
-}
-
-export function addRole(data: object) {
-	return request({
-		url: '/api/v1/system/role/add',
 		method: 'post',
 		data: data,
 	});
 }
 
-export function getRole(id: number) {
+//获取话术列表
-	return request({
+export function getscriptAdd(data: object) {
-		url: '/api/v1/system/role/get',
+	return newService({
-		method: 'get',
+		url: '/customerService/speechcraft/add',
-		params: { id },
+		method: 'post',
-	});
-}
-
-export function editRole(data: object) {
-	return request({
-		url: '/api/v1/system/role/edit',
-		method: 'put',
 		data: data,
 	});
 }
 
-export function deleteRole(id: number) {
+//删除话术列表
-	return request({
+export function deletescript(data: object) {
-		url: '/api/v1/system/role/delete',
+	return newService({
-		method: 'delete',
+		url: '/customerService/speechcraft/delete',
-		data: { ids: [id] },
+		method: 'post',
-	});
-}
-
-export function dataScope(data: any) {
-	return request({
-		url: '/api/v1/system/role/dataScope',
-		method: 'put',
 		data: data,
 	});
 }
 
-// 根据角色ID查询部门树结构
+//更新话术列表
-export function roleDeptTreeSelect(roleId: number) {
+export function updatescript(data: object) {
-	return request({
+	return newService({
-		url: '/api/v1/system/role/deptTreeSelect',
+		url: '/customerService/speechcraft/update',
-		method: 'get',
+		method: 'post',
-		params: { roleId },
+		data: data,
 	});
 }

src/utils/request.ts

@@ -3,40 +3,54 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 import { Session } from '/@/utils/storage';
 import qs from 'qs';
 
-// 配置新建一个 axios 实例
+// 配置新建第一个 axios 实例（原来的主服务）
 const service: AxiosInstance = axios.create({
-	baseURL: import.meta.env.VITE_API_URL,
+	baseURL: import.meta.env.VITE_API_URL, // 从环境变量获取基础URL http://192.168.3.49:8808/
-	timeout: 50000,
+	timeout: 50000, // 50秒超时
-	headers: { 'Content-Type': 'application/json' },
+	headers: { 'Content-Type': 'application/json' }, // 默认JSON格式
 	paramsSerializer: {
+		// 参数序列化配置
 		serialize(params) {
 			return qs.stringify(params, { allowDots: true, arrayFormat: 'brackets' });
 		},
 	},
 });
 
-// 添加请求拦截器
+// 配置新建第二个 axios 实例（新功能服务）
-service.interceptors.request.use(
+const newService: AxiosInstance = axios.create({
-	(config) => {
+	baseURL: 'http://192.168.3.49:8000/', // 新后端地址
+	timeout: 50000, // 50秒超时
+	headers: { 'Content-Type': 'application/json' }, // 默认JSON格式
+	paramsSerializer: {
+		// 参数序列化配置
+		serialize(params) {
+			return qs.stringify(params, { allowDots: true, arrayFormat: 'brackets' });
+		},
+	},
+});
+
+// 通用的请求拦截器函数
+const requestInterceptor = (config: any) => {
 	// 在发送请求之前做些什么 token
 	if (Session.get('token')) {
 		config.headers!['Authorization'] = `Bearer ${Session.get('token')}`;
 	}
 	return config;
-	},
+};
-	(error) => {
+
+// 通用的请求错误处理函数
+const requestErrorHandler = (error: any) => {
 	// 对请求错误做些什么
 	return Promise.reject(error);
-	}
+};
-);
 
-// 添加响应拦截器
+// 通用的响应拦截器函数
-service.interceptors.response.use(
+const responseInterceptor = (response: any) => {
-	(response) => {
 	// 对响应数据做点什么
 	const res = response.data;
 	const code = response.data.code;
 	if (code === 401) {
+		// 401未授权：token过期，跳转登录页
 		ElMessageBox.alert('登录状态已过期，请重新登录', '提示', { confirmButtonText: '确定' })
 			.then(() => {
 				Session.clear(); // 清除浏览器全部临时缓存
@@ -44,25 +58,36 @@ service.interceptors.response.use(
 			})
 			.catch(() => {});
 	} else if (code !== 0) {
+		// 业务逻辑错误：显示错误消息
 		ElMessage.error(res.message);
 		return Promise.reject(new Error(res.message));
 	} else {
 		return res;
 	}
-	},
+};
-	(error) => {
+
+// 通用的响应错误处理函数
+const responseErrorHandler = (error: any) => {
 	// 对响应错误做点什么
 	if (error.message.indexOf('timeout') != -1) {
 		ElMessage.error('网络超时');
 	} else if (error.message == 'Network Error') {
 		ElMessage.error('网络连接错误');
 	} else {
-			if (error.response.data) ElMessage.error(error.response.statusText);
+		if (error.response?.data) ElMessage.error(error.response.statusText);
 		else ElMessage.error('接口路径找不到');
 	}
 	return Promise.reject(error);
-	}
+};
-);
 
-// 导出 axios 实例
+// 为第一个实例添加拦截器
-export default service;
+service.interceptors.request.use(requestInterceptor, requestErrorHandler);
+service.interceptors.response.use(responseInterceptor, responseErrorHandler);
+
+// 为第二个实例添加拦截器
+newService.interceptors.request.use(requestInterceptor, requestErrorHandler);
+newService.interceptors.response.use(responseInterceptor, responseErrorHandler);
+
+// 导出两个 axios 实例
+export default service; // 原来的主服务
+export { newService }; // 新功能服务

src/views/customerService/account/index.vue

@@ -258,7 +258,7 @@ const onOpenAddRole = () => {
  */
 const onOpenEditRole = (row: TableDataItem) => {
 	if (editRoleRef.value) {
-		editRoleRef.value.openDialog(row);
+		editRoleRef.value.openDialog();
 	}
 };
 

src/views/customerService/product/index.vue

@@ -27,7 +27,7 @@
 							</el-icon>
 							导入
 						</el-button>
-						<el-button size="default" type="info" class="ml10" @click="onOpenExport">
+						<el-button size="default" type="info" class="ml10" @click="onOpenExport" style="background-color: deeppink; border: 0">
 							<el-icon>
 								<ele-Download />
 							</el-icon>

src/views/customerService/report/index.vue

@@ -36,7 +36,7 @@
 							</el-icon>
 							重置
 						</el-button>
-						<el-button size="default" type="info" class="ml10" @click="handleExport">
+						<el-button size="default" type="info" class="ml10" @click="handleExport" style="background-color: deeppink; border: 0">
 							<el-icon>
 								<ele-Download />
 							</el-icon>

src/views/customerService/script/component/editRole.vue

@@ -1,17 +1,17 @@
 <template>
 	<div class="system-edit-role-container">
 		<el-dialog title="" v-model="isShowDialog" width="769px">
-			<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
+			<el-form ref="formRef" :model="state.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="name">
-							<el-input v-model="formData.name" placeholder="请输入标签名称" clearable />
+							<el-input v-model="formData.tag" :placeholder="formData.tag" clearable />
 						</el-form-item>
 					</el-col>
 					<!-- 富文本编辑器 -->
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="产品详情" prop="content">
-							<Editor v-model="formData.content" height="400px" placeholder="请输入产品详细描述..." />
+							<Editor v-model="formData.content" height="400px" :placeholder="formData.content" />
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -31,8 +31,10 @@
 <script lang="ts" setup>
 import { ref, reactive, toRefs, nextTick } from 'vue';
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
-import { addRole, editRole, getRole } from '/@/api/customerService/script';
 import Editor from '/@/components/editor/index.vue';
+import { getscriptAdd, updatescript } from '/@/api/customerService/script';
+import { Session } from '/@/utils/storage';
+// console.log(Session.get('userInfo').userNickname, 'user');
 
 // 定义类型接口
 interface MenuDataTree {
@@ -44,17 +46,14 @@ interface MenuDataTree {
 
 interface DialogRow {
 	id: number;
-	name: string;
+	tag: string;
-	status: number;
+	creator: string;
-	listOrder: number;
+	content: string;
-	remark: string;
-	menuIds: number[];
-	content?: string;
 }
 
 // 定义事件
 const emit = defineEmits<{
-	(e: 'getRoleList'): void;
+	(e: 'success'): void;
 }>();
 
 // 响应式数据
@@ -63,13 +62,10 @@ const state = reactive({
 	isShowDialog: false,
 	formData: {
 		id: 0,
-		name: '',
+		tag: '',
-		status: 1,
-		listOrder: 0,
-		remark: '',
-		menuIds: [],
 		content: '',
-	} as DialogRow,
+		creator: '',
+	},
 	menuData: [] as MenuDataTree[],
 	menuExpand: false,
 	menuNodeAll: false,
@@ -78,7 +74,7 @@ const state = reactive({
 
 // 表单验证规则
 const rules: FormRules = {
-	name: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }],
+	tag: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }],
 	content: [{ required: true, message: '产品详情不能为空', trigger: 'blur' }],
 };
 
@@ -101,23 +97,9 @@ const menuProps = {
  */
 const openDialog = (row?: DialogRow) => {
 	resetForm();
-
+	console.log(row, 'row');
 	if (row) {
-		// 编辑模式：获取角色详情
+		state.formData = row;
-		getRole(row.id)
-			.then((res: any) => {
-				if (res.data?.role) {
-					state.formData = {
-						...res.data.role,
-						content: res.data.role.content || '',
-						menuIds: res.data.menuIds ?? [],
-					};
-				}
-			})
-			.catch((error) => {
-				console.error('获取角色详情失败:', error);
-				ElMessage.error('获取角色详情失败');
-			});
 	}
 
 	state.isShowDialog = true;
@@ -151,18 +133,22 @@ const onSubmit = async () => {
 		state.loading = true;
 
 		if (state.formData.id === 0) {
+			state.formData.creator = Session.get('userInfo').userNickname;
+
 			// 新增模式
-			await addRole(state.formData);
+			await getscriptAdd(state.formData);
+			console.log(state.formData);
 			ElMessage.success('添加成功');
 		} else {
+			state.formData.modifier = Session.get('userInfo').userNickname;
 			// 编辑模式
-			await editRole(state.formData);
+			await updatescript(state.formData);
 			ElMessage.success('修改成功');
 		}
 
 		// 关闭对话框并刷新列表
 		closeDialog();
-		emit('getRoleList');
+		emit('success');
 	} catch (error) {
 		console.error('提交失败:', error);
 		ElMessage.error('操作失败');
@@ -180,12 +166,9 @@ const resetForm = () => {
 	state.menuNodeAll = false;
 	state.formData = {
 		id: 0,
-		name: '',
+		tag: '',
-		status: 1,
-		listOrder: 0,
-		remark: '',
-		menuIds: [],
 		content: '',
+		creator: '',
 	};
 
 	// 重置表单验证状态

src/views/customerService/script/index.vue

@@ -1,223 +1,212 @@
 <template>
 	<div class="system-role-container">
 		<el-card shadow="hover">
+			<!-- 搜索和操作区域 -->
 			<div class="system-user-search mb15">
 				<el-form :inline="true">
 					<el-form-item>
-						<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
+						<el-button size="default" type="success" @click="handleAdd">
-							<el-icon>
+							<el-icon><FolderAdd /></el-icon>
-								<ele-FolderAdd />
-							</el-icon>
 							新增话术
 						</el-button>
 					</el-form-item>
 				</el-form>
 			</div>
-			<el-table :data="tableData.data" style="width: 100%">
+
-				<el-table-column type="index" label="序号" width="60" />
+			<!-- 数据表格 -->
-				<el-table-column prop="label" label="标签" show-overflow-tooltip></el-table-column>
+			<el-table :data="tableData.data" v-loading="tableData.loading" style="width: 100%">
-				<el-table-column prop="creator" label="创建人" show-overflow-tooltip></el-table-column>
+				<el-table-column type="index" label="序号" width="60" align="center" />
-				<el-table-column prop="creator" label="修改人" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="tag" label="标签" show-overflow-tooltip min-width="120" />
-				<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="creator" label="创建人" show-overflow-tooltip min-width="100" />
-				<el-table-column prop="createdAt" label="修改时间" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="modifier" label="修改人" show-overflow-tooltip min-width="100" />
-				<el-table-column label="操作" width="220">
+				<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip min-width="140" />
-					<template #default="scope">
+				<el-table-column prop="updatedAt" label="修改时间" show-overflow-tooltip min-width="140" />
-						<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)"
+				<el-table-column label="操作" width="200" align="center" fixed="right">
-							><el-icon><ele-EditPen /></el-icon>修改</el-button
+					<template #default="{ row }">
-						>
+						<el-button size="small" text type="primary" @click="handleEdit(row)">
-						<el-button size="small" text type="primary" @click="onRowDel(scope.row)"
+							<el-icon><EditPen /></el-icon>修改
-							><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
+						</el-button>
-						>
+						<el-button size="small" text type="danger" @click="handleDelete(row)">
+							<el-icon><DeleteFilled /></el-icon>删除
+						</el-button>
 					</template>
 				</el-table-column>
 			</el-table>
+
+			<!-- 分页组件 -->
 			<pagination
-				v-show="tableData.total > 0"
+				v-if="tableData.total > 0"
 				:total="tableData.total"
 				v-model:page="tableData.param.pageNum"
 				v-model:limit="tableData.param.pageSize"
-				@pagination="roleList"
+				@pagination="loadTableData"
 			/>
 		</el-card>
-		<EditRole ref="editRoleRef" @getRoleList="roleList" />
+
+		<!-- 编辑组件 -->
+		<EditRole ref="editRoleRef" @success="handleSuccess" />
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
+import { reactive, ref, onMounted, nextTick } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import EditRole from '/@/views/customerService/script/component/editRole.vue';
+import { FolderAdd, EditPen, DeleteFilled } from '@element-plus/icons-vue';
-import { deleteRole, getRoleList } from '/@/api/customerService/script';
+import EditRole from './component/editRole.vue';
-// 定义接口来定义对象的类型
+import Pagination from '/@/components/pagination/index.vue';
-interface TableData {
+import { getscriptList, deletescript } from '/@/api/customerService/script';
-	id: number;
+
-	status: number;
+// ==================== 类型定义 ====================
-	listOrder: number;
+interface ScriptItem {
-	name: string;
+	id: string;
-	remark: string;
+	tag: string;
-	dataScope: number;
+	creator: string;
+	modifier: string;
 	createdAt: string;
+	updatedAt: string;
+	content?: string;
 }
-interface TableDataState {
+
-	data: Array<TableData>;
+interface TableParams {
-	total: number;
-	loading: boolean;
-	param: {
-		roleName: string;
-		roleStatus: string;
 	pageNum: number;
 	pageSize: number;
-	};
 }
-//模拟数据
-const dateList = ref([
-	{
-		id: 1,
-		status: 1,
-		listOrder: 0,
-		name: '987698789',
-		remark: '小红书',
-		dataScope: 3,
-		createdAt: '2022-04-01 11:38:39',
-		updatedAt: '2022-04-28 10:00:15',
-		label: '产品介绍',
-		creator: '张三',
-	},
-	{
-		id: 2,
-		status: 1,
-		listOrder: 0,
-		name: '987698789',
-		remark: '抖音',
-		dataScope: 3,
-		createdAt: '2022-04-01 11:38:39',
-		updatedAt: '2022-04-28 10:01:34',
-		label: '公司介绍',
-		creator: '张三',
-	},
-	{
-		id: 3,
-		status: 1,
-		listOrder: 0,
-		name: '987698789',
-		remark: '快手',
-		dataScope: 3,
-		createdAt: '2022-04-01 11:38:39',
-		updatedAt: '2022-04-01 11:38:39',
-		label: '病症询问',
-		creator: '王五',
-	},
-	{
-		id: 4,
-		status: 1,
-		listOrder: 0,
-		name: '987698789',
-		remark: '抖音',
-		dataScope: 3,
-		createdAt: '2022-04-01 11:38:39',
-		updatedAt: '2022-04-01 11:38:39',
-		label: '资质问题',
-		creator: '李四',
-	},
-	{
-		id: 5,
-		status: 1,
-		listOrder: 0,
-		name: '987698789',
-		remark: '抖音',
-		dataScope: 2,
-		createdAt: '2022-04-01 11:38:39',
-		updatedAt: '2022-04-01 11:38:39',
-		label: '常用沟通',
-		creator: '张三',
-	},
-	{
-		id: 8,
-		status: 1,
-		listOrder: 0,
-		name: '987698789',
-		remark: '快手',
-		dataScope: 2,
-		createdAt: '2022-04-01 11:38:39',
-		updatedAt: '2022-04-06 09:53:40',
-		label: '公司介绍',
-		creator: '张三',
-	},
-]);
 
-const { proxy } = getCurrentInstance() as any;
+interface TableState {
-const addRoleRef = ref();
+	data: ScriptItem[];
-const editRoleRef = ref();
+	total: number;
-const dataScopeRef = ref();
+	loading: boolean;
-const tableData = reactive<TableDataState>({
+	param: TableParams;
+}
+
+// ==================== 响应式数据 ====================
+const editRoleRef = ref<InstanceType<typeof EditRole>>();
+const tableData = reactive<TableState>({
 	data: [],
 	total: 0,
 	loading: false,
 	param: {
-		roleName: '',
-		roleStatus: '',
 		pageNum: 1,
 		pageSize: 10,
 	},
 });
-// 初始化表格数据
+
-const initTableData = () => {
+// ==================== 方法定义 ====================
-	roleList();
+
-};
+/**
-const roleList = () => {
+ * 加载表格数据
-	const data: Array<TableData> = [];
+ */
-	getRoleList(tableData.param).then((res) => {
+const loadTableData = async () => {
-		const list = res.data.list ?? [];
+	try {
-		list.map((item: TableData) => {
+		tableData.loading = true;
-			data.push({
+
-				id: item.id,
+		const response = await getscriptList(tableData.param);
-				status: item.status,
+		const { list = [], total = 0 } = response.data || {};
-				listOrder: item.listOrder,
+
-				name: item.name,
+		tableData.data = list;
-				remark: item.remark,
+		tableData.total = total;
-				dataScope: item.dataScope,
+	} catch (error) {
-				createdAt: item.createdAt,
+		console.error('加载数据失败:', error);
-			});
+		ElMessage.error('数据加载失败');
-		});
+		tableData.data = [];
-		tableData.data = dateList.value;
+		tableData.total = 0;
-		tableData.total = dateList.value.length;
+	} finally {
-	});
+		tableData.loading = false;
-};
+	}
-// 打开新增角色弹窗
-const onOpenAddRole = () => {
-	editRoleRef.value.openDialog();
-};
-// 打开修改角色弹窗
-const onOpenEditRole = (row: Object) => {
-	editRoleRef.value.openDialog(toRaw(row));
 };
 
-// 删除角色
+/**
-const onRowDel = (row: any) => {
+ * 新增话术
-	ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
+ */
-		confirmButtonText: '确认',
+const handleAdd = () => {
+	editRoleRef.value?.openDialog();
+};
+
+/**
+ * 编辑话术
+ */
+const handleEdit = (row: ScriptItem) => {
+	editRoleRef.value?.openDialog(row);
+};
+
+/**
+ * 删除话术
+ */
+const handleDelete = async (row: ScriptItem) => {
+	try {
+		await ElMessageBox.confirm(`确定要删除话术「${row.tag}」吗？此操作不可恢复。`, '提示', {
+			confirmButtonText: '确定',
 			cancelButtonText: '取消',
 			type: 'warning',
-	})
-		.then(() => {
-			deleteRole(row.id).then(() => {
-				ElMessage.success('删除成功');
-				proxy.$refs['editRoleRef'].resetMenuSession();
-				roleList();
 		});
-		})
+		console.log(row, 'row');
-		.catch(() => {});
+		await deletescript({ id: row.id }).then((res) => {});
+		ElMessage.success('删除成功');
+
+		// 重新加载数据
+		await loadTableData();
+	} catch (error) {
+		if (error !== 'cancel') {
+			console.error('删除失败:', error);
+			ElMessage.error('删除失败');
+		}
+	}
 };
-// 分页改变
+
-const onHandleSizeChange = (val: number) => {
+/**
-	tableData.param.pageSize = val;
+ * 操作成功回调
+ */
+const handleSuccess = () => {
+	loadTableData();
 };
-// 分页改变
+
-const onHandleCurrentChange = (val: number) => {
+/**
-	tableData.param.pageNum = val;
+ * 处理分页变化
+ */
+const handleSizeChange = (size: number) => {
+	tableData.param.pageSize = size;
+	tableData.param.pageNum = 1; // 重置到第一页
+	loadTableData();
 };
-// 页面加载时
+
+const handleCurrentChange = (current: number) => {
+	tableData.param.pageNum = current;
+	loadTableData();
+};
+
+// ==================== 生命周期 ====================
 onMounted(() => {
-	initTableData();
+	loadTableData();
+});
+
+// ==================== 暴露方法（可选） ====================
+defineExpose({
+	reload: loadTableData,
 });
 </script>
+
+<style scoped lang="scss">
+.system-role-container {
+	.system-user-search {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.mb15 {
+		margin-bottom: 15px;
+	}
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+	.system-user-search {
+		flex-direction: column;
+		align-items: flex-start;
+
+		.el-form-item {
+			margin-bottom: 10px;
+		}
+	}
+}
+</style>

src/views/system/role/index.vue

@@ -122,6 +122,7 @@ export default defineComponent({
 			getRoleList(state.tableData.param).then((res) => {
 				const list = res.data.list ?? [];
 				list.map((item: TableData) => {
+					console.log(item.createdAt, '修改时间');
 					data.push({
 						id: item.id,
 						status: item.status,