admin-ui/src/views/customerService/account/index.vue

<template>
	<div class="system-role-container">
		<el-card shadow="hover">
			<div class="system-user-search mb15">
				<el-form :inline="true">
					<el-form-item label="客服ID">
						<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 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="handleSearch">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
						<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
							<el-icon>
								<ele-FolderAdd />
							</el-icon>
							新增客服
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<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="status" label="客服状态" show-overflow-tooltip>
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
						<el-tag type="info" v-else>禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="remark" 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="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>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-show="tableData.total > 0"
				:total="tableData.total"
				v-model:page="tableData.param.pageNum"
				v-model:limit="tableData.param.pageSize"
				@pagination="handlePaginationChange"
			/>
		</el-card>
		<EditRole ref="editRoleRef" @getRoleList="roleList" />
	</div>
</template>

<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/customerService/account';

// 定义类型接口
interface TableDataItem {
	id: number;
	status: number;
	listOrder: number;
	name: string;
	remark: string;
	dataScope: number;
	createdAt: string;
	updatedAt: string;
	key: string;
	creator?: string;
	updater?: string;
}

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,
		listOrder: 0,
		name: '987698789',
		remark: '小红书',
		dataScope: 3,
		createdAt: '2022-04-01 11:38:39',
		updatedAt: '2022-04-28 10:00:15',
		key: 'list',
		creator: '张三',
		updater: '李四',
	},
	{
		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',
		key: 'list',
		creator: '王五',
		updater: '赵六',
	},
	{
		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',
		key: '李四',
		creator: '孙七',
		updater: '周八',
	},
	{
		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',
		key: '张三',
		creator: '吴九',
		updater: '郑十',
	},
	{
		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',
		key: 'zhang',
		creator: '钱一',
		updater: '孙二',
	},
	{
		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',
		key: 'list',
		creator: '李三',
		updater: '王四',
	},
];

// 响应式数据
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>