重构组合式api

src/views/customerService/account/index.vue

@@ -7,14 +7,14 @@
 						<el-input size="default" v-model="tableData.param.roleName" placeholder="请输入客服ID" class="w-50 m-2" clearable />
 					</el-form-item>
 					<el-form-item label="客服平台" prop="status" style="width: 200px">
-						<el-select placeholder="小红书" clearable size="default" style="width: 240px">
-							<el-option :label="'小红书'" :value="''" />
-							<el-option :label="'抖音'" :value="''" />
-							<el-option :label="'快手'" :value="''" />
+						<el-select v-model="tableData.param.platform" placeholder="请选择客服平台" clearable size="default" style="width: 240px">
+							<el-option label="小红书" value="xiaohongshu" />
+							<el-option label="抖音" value="douyin" />
+							<el-option label="快手" value="kuaishou" />
 						</el-select>
 					</el-form-item>
 					<el-form-item>
-						<el-button size="default" type="primary" class="ml10" @click="roleList">
+						<el-button size="default" type="primary" class="ml10" @click="handleSearch">
 							<el-icon>
 								<ele-Search />
 							</el-icon>
@@ -29,9 +29,9 @@
 					</el-form-item>
 				</el-form>
 			</div>
-			<el-table :data="tableData.data" style="width: 100%">
+			<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
 				<el-table-column type="index" label="序号" width="60" />
-				<el-table-column prop="name" label="客服id" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="name" label="客服ID" show-overflow-tooltip></el-table-column>
 				<el-table-column prop="status" label="客服状态" show-overflow-tooltip>
 					<template #default="scope">
 						<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
@@ -39,18 +39,18 @@
 					</template>
 				</el-table-column>
 				<el-table-column prop="remark" label="客服平台" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="key" label="创建人" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="key" label="修改人" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="creator" label="创建人" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="updater" 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 prop="updatedAt" 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-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>
 					</template>
 				</el-table-column>
 			</el-table>
@@ -59,20 +59,21 @@
 				:total="tableData.total"
 				v-model:page="tableData.param.pageNum"
 				v-model:limit="tableData.param.pageSize"
-				@pagination="roleList"
+				@pagination="handlePaginationChange"
 			/>
 		</el-card>
 		<EditRole ref="editRoleRef" @getRoleList="roleList" />
 	</div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
+<script lang="ts" setup>
+import { ref, reactive, onMounted, nextTick } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import EditRole from '/@/views/customerService/account/component/editRole.vue';
-import { deleteRole, getRoleList } from '/@/api/system/role';
-// 定义接口来定义对象的类型
-interface TableData {
+import { deleteRole, getRoleList } from '/@/api/customerService/account';
+
+// 定义类型接口
+interface TableDataItem {
 	id: number;
 	status: number;
 	listOrder: number;
@@ -80,22 +81,29 @@ interface TableData {
 	remark: string;
 	dataScope: number;
 	createdAt: string;
-}
-interface TableDataState {
-	tableData: {
-		data: Array<TableData>;
-		total: number;
-		loading: boolean;
-		param: {
-			roleName: string;
-			roleStatus: string;
-			pageNum: number;
-			pageSize: number;
-		};
-	};
+	updatedAt: string;
+	key: string;
+	creator?: string;
+	updater?: string;
 }
 
-const dateList = ref([
+interface TableParam {
+	roleName: string;
+	platform: string;
+	roleStatus: string;
+	pageNum: number;
+	pageSize: number;
+}
+
+interface TableState {
+	data: TableDataItem[];
+	total: number;
+	loading: boolean;
+	param: TableParam;
+}
+
+// 模拟数据
+const mockData: TableDataItem[] = [
 	{
 		id: 1,
 		status: 1,
@@ -106,6 +114,8 @@ const dateList = ref([
 		createdAt: '2022-04-01 11:38:39',
 		updatedAt: '2022-04-28 10:00:15',
 		key: 'list',
+		creator: '张三',
+		updater: '李四',
 	},
 	{
 		id: 2,
@@ -117,6 +127,8 @@ const dateList = ref([
 		createdAt: '2022-04-01 11:38:39',
 		updatedAt: '2022-04-28 10:01:34',
 		key: 'list',
+		creator: '王五',
+		updater: '赵六',
 	},
 	{
 		id: 3,
@@ -128,6 +140,8 @@ const dateList = ref([
 		createdAt: '2022-04-01 11:38:39',
 		updatedAt: '2022-04-01 11:38:39',
 		key: '李四',
+		creator: '孙七',
+		updater: '周八',
 	},
 	{
 		id: 4,
@@ -139,6 +153,8 @@ const dateList = ref([
 		createdAt: '2022-04-01 11:38:39',
 		updatedAt: '2022-04-01 11:38:39',
 		key: '张三',
+		creator: '吴九',
+		updater: '郑十',
 	},
 	{
 		id: 5,
@@ -150,6 +166,8 @@ const dateList = ref([
 		createdAt: '2022-04-01 11:38:39',
 		updatedAt: '2022-04-01 11:38:39',
 		key: 'zhang',
+		creator: '钱一',
+		updater: '孙二',
 	},
 	{
 		id: 8,
@@ -161,102 +179,150 @@ const dateList = ref([
 		createdAt: '2022-04-01 11:38:39',
 		updatedAt: '2022-04-06 09:53:40',
 		key: 'list',
+		creator: '李三',
+		updater: '王四',
 	},
-]);
+];
 
-export default defineComponent({
-	name: 'apiV1SystemRoleList',
-	components: { EditRole },
-	setup() {
-		const { proxy } = getCurrentInstance() as any;
-		const addRoleRef = ref();
-		const editRoleRef = ref();
-		const dataScopeRef = ref();
-		const state = reactive<TableDataState>({
-			tableData: {
-				data: [],
-				total: 0,
-				loading: false,
-				param: {
-					roleName: '',
-					roleStatus: '',
-					pageNum: 1,
-					pageSize: 10,
-				},
-			},
-		});
-		// 初始化表格数据
-		const initTableData = () => {
-			roleList();
-		};
-		const roleList = () => {
-			const data: Array<TableData> = [];
-			getRoleList(state.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,
-					});
-				});
-				state.tableData.data = dateList.value;
-				state.tableData.total = dateList.value.length;
-			});
-		};
-		// 打开新增角色弹窗
-		const onOpenAddRole = () => {
-			editRoleRef.value.openDialog();
-		};
-		// 打开修改角色弹窗
-		const onOpenEditRole = (row: Object) => {
-			editRoleRef.value.openDialog(toRaw(row));
-		};
-
-		// 删除角色
-		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 onHandleSizeChange = (val: number) => {
-			state.tableData.param.pageSize = val;
-		};
-		// 分页改变
-		const onHandleCurrentChange = (val: number) => {
-			state.tableData.param.pageNum = val;
-		};
-		// 页面加载时
-		onMounted(() => {
-			initTableData();
-		});
-		return {
-			addRoleRef,
-			editRoleRef,
-			dataScopeRef,
-			onOpenAddRole,
-			onOpenEditRole,
-			onRowDel,
-			onHandleSizeChange,
-			onHandleCurrentChange,
-			roleList,
-			...toRefs(state),
-		};
+// 响应式数据
+const tableData = reactive<TableState>({
+	data: [],
+	total: 0,
+	loading: false,
+	param: {
+		roleName: '',
+		platform: '',
+		roleStatus: '',
+		pageNum: 1,
+		pageSize: 10,
 	},
 });
+
+// 模板引用
+const editRoleRef = ref<InstanceType<typeof EditRole>>();
+
+/**
+ * 获取角色列表
+ */
+const roleList = async () => {
+	try {
+		tableData.loading = true;
+
+		// 实际API调用
+		// const res = await getRoleList(tableData.param);
+		// tableData.data = res.data.list || [];
+		// tableData.total = res.data.total || 0;
+
+		// 模拟数据
+		await new Promise((resolve) => setTimeout(resolve, 500)); // 模拟网络延迟
+		tableData.data = mockData;
+		tableData.total = mockData.length;
+	} catch (error) {
+		console.error('获取角色列表失败:', error);
+		ElMessage.error('获取数据失败');
+	} finally {
+		tableData.loading = false;
+	}
+};
+
+/**
+ * 处理搜索
+ */
+const handleSearch = () => {
+	tableData.param.pageNum = 1; // 重置到第一页
+	roleList();
+};
+
+/**
+ * 处理分页变化
+ * @param pagination - 分页参数
+ */
+const handlePaginationChange = (pagination: { page: number; limit: number }) => {
+	tableData.param.pageNum = pagination.page;
+	tableData.param.pageSize = pagination.limit;
+	roleList();
+};
+
+/**
+ * 打开新增角色对话框
+ */
+const onOpenAddRole = () => {
+	if (editRoleRef.value) {
+		editRoleRef.value.openDialog();
+	}
+};
+
+/**
+ * 打开编辑角色对话框
+ * @param row - 角色数据
+ */
+const onOpenEditRole = (row: TableDataItem) => {
+	if (editRoleRef.value) {
+		editRoleRef.value.openDialog(row);
+	}
+};
+
+/**
+ * 删除角色
+ * @param row - 角色数据
+ */
+const onRowDel = async (row: TableDataItem) => {
+	try {
+		await ElMessageBox.confirm(`此操作将永久删除客服账号："${row.name}"，是否继续?`, '提示', {
+			confirmButtonText: '确认',
+			cancelButtonText: '取消',
+			type: 'warning',
+		});
+
+		// 实际删除操作
+		// await deleteRole(row.id);
+
+		// 模拟删除成功
+		ElMessage.success('删除成功');
+
+		// 刷新列表
+		await roleList();
+	} catch (error) {
+		// 用户取消操作，不处理
+		console.log('用户取消删除操作');
+	}
+};
+
+/**
+ * 初始化表格数据
+ */
+const initTableData = () => {
+	roleList();
+};
+
+// 生命周期
+onMounted(() => {
+	initTableData();
+});
 </script>
+
+<style scoped>
+.system-user-search {
+	margin-bottom: 15px;
+}
+
+.mb15 {
+	margin-bottom: 15px;
+}
+
+.ml10 {
+	margin-left: 10px;
+}
+
+.w-50 {
+	width: 240px;
+}
+
+.system-role-container {
+	padding: 20px;
+}
+
+:deep(.el-table) {
+	margin-top: 10px;
+}
+</style>