实现话术功能

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-icon>
-								<ele-FolderAdd />
-							</el-icon>
+						<el-button size="default" type="success" @click="handleAdd">
+							<el-icon><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-column prop="creator" label="创建人" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="creator" label="修改人" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="createdAt" label="修改时间" show-overflow-tooltip></el-table-column>
-				<el-table-column label="操作" width="220">
-					<template #default="scope">
-						<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)"
-							><el-icon><ele-EditPen /></el-icon>修改</el-button
-						>
-						<el-button size="small" text type="primary" @click="onRowDel(scope.row)"
-							><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
-						>
+
+			<!-- 数据表格 -->
+			<el-table :data="tableData.data" v-loading="tableData.loading" style="width: 100%">
+				<el-table-column type="index" label="序号" width="60" align="center" />
+				<el-table-column prop="tag" label="标签" show-overflow-tooltip min-width="120" />
+				<el-table-column prop="creator" label="创建人" show-overflow-tooltip min-width="100" />
+				<el-table-column prop="modifier" label="修改人" show-overflow-tooltip min-width="100" />
+				<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip min-width="140" />
+				<el-table-column prop="updatedAt" label="修改时间" show-overflow-tooltip min-width="140" />
+				<el-table-column label="操作" width="200" align="center" fixed="right">
+					<template #default="{ row }">
+						<el-button size="small" text type="primary" @click="handleEdit(row)">
+							<el-icon><EditPen /></el-icon>修改
+						</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>
-import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
+<script setup lang="ts">
+import { reactive, ref, onMounted, nextTick } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import EditRole from '/@/views/customerService/script/component/editRole.vue';
-import { deleteRole, getRoleList } from '/@/api/customerService/script';
-// 定义接口来定义对象的类型
-interface TableData {
-	id: number;
-	status: number;
-	listOrder: number;
-	name: string;
-	remark: string;
-	dataScope: number;
+import { FolderAdd, EditPen, DeleteFilled } from '@element-plus/icons-vue';
+import EditRole from './component/editRole.vue';
+import Pagination from '/@/components/pagination/index.vue';
+import { getscriptList, deletescript } from '/@/api/customerService/script';
+
+// ==================== 类型定义 ====================
+interface ScriptItem {
+	id: string;
+	tag: string;
+	creator: string;
+	modifier: string;
 	createdAt: string;
+	updatedAt: string;
+	content?: string;
 }
-interface TableDataState {
-	data: Array<TableData>;
+
+interface TableParams {
+	pageNum: number;
+	pageSize: number;
+}
+
+interface TableState {
+	data: ScriptItem[];
 	total: number;
 	loading: boolean;
-	param: {
-		roleName: string;
-		roleStatus: string;
-		pageNum: number;
-		pageSize: number;
-	};
+	param: TableParams;
 }
-//模拟数据
-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;
-const addRoleRef = ref();
-const editRoleRef = ref();
-const dataScopeRef = ref();
-const tableData = reactive<TableDataState>({
+// ==================== 响应式数据 ====================
+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 list = res.data.list ?? [];
-		list.map((item: TableData) => {
-			data.push({
-				id: item.id,
-				status: item.status,
-				listOrder: item.listOrder,
-				name: item.name,
-				remark: item.remark,
-				dataScope: item.dataScope,
-				createdAt: item.createdAt,
-			});
-		});
-		tableData.data = dateList.value;
-		tableData.total = dateList.value.length;
-	});
-};
-// 打开新增角色弹窗
-const onOpenAddRole = () => {
-	editRoleRef.value.openDialog();
-};
-// 打开修改角色弹窗
-const onOpenEditRole = (row: Object) => {
-	editRoleRef.value.openDialog(toRaw(row));
+
+// ==================== 方法定义 ====================
+
+/**
+ * 加载表格数据
+ */
+const loadTableData = async () => {
+	try {
+		tableData.loading = true;
+
+		const response = await getscriptList(tableData.param);
+		const { list = [], total = 0 } = response.data || {};
+
+		tableData.data = list;
+		tableData.total = total;
+	} catch (error) {
+		console.error('加载数据失败:', error);
+		ElMessage.error('数据加载失败');
+		tableData.data = [];
+		tableData.total = 0;
+	} finally {
+		tableData.loading = false;
+	}
 };
 
-// 删除角色
-const onRowDel = (row: any) => {
-	ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
-		confirmButtonText: '确认',
-		cancelButtonText: '取消',
-		type: 'warning',
-	})
-		.then(() => {
-			deleteRole(row.id).then(() => {
-				ElMessage.success('删除成功');
-				proxy.$refs['editRoleRef'].resetMenuSession();
-				roleList();
-			});
-		})
-		.catch(() => {});
+/**
+ * 新增话术
+ */
+const handleAdd = () => {
+	editRoleRef.value?.openDialog();
 };
-// 分页改变
-const onHandleSizeChange = (val: number) => {
-	tableData.param.pageSize = val;
+
+/**
+ * 编辑话术
+ */
+const handleEdit = (row: ScriptItem) => {
+	editRoleRef.value?.openDialog(row);
 };
-// 分页改变
-const onHandleCurrentChange = (val: number) => {
-	tableData.param.pageNum = val;
+
+/**
+ * 删除话术
+ */
+const handleDelete = async (row: ScriptItem) => {
+	try {
+		await ElMessageBox.confirm(`确定要删除话术「${row.tag}」吗？此操作不可恢复。`, '提示', {
+			confirmButtonText: '确定',
+			cancelButtonText: '取消',
+			type: 'warning',
+		});
+		console.log(row, 'row');
+		await deletescript({ id: row.id }).then((res) => {});
+		ElMessage.success('删除成功');
+
+		// 重新加载数据
+		await loadTableData();
+	} catch (error) {
+		if (error !== 'cancel') {
+			console.error('删除失败:', error);
+			ElMessage.error('删除失败');
+		}
+	}
 };
-// 页面加载时
+
+/**
+ * 操作成功回调
+ */
+const handleSuccess = () => {
+	loadTableData();
+};
+
+/**
+ * 处理分页变化
+ */
+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>