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.customerServiceId" 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="小红书" />
							<el-option label="抖音" value="抖音" />
							<el-option label="快手" value="快手" />
						</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="customerServiceId" label="客服ID" show-overflow-tooltip></el-table-column>
				<el-table-column prop="status" label="客服状态" show-overflow-tooltip>
					<template #default="scope">
						<el-button
							size="small"
							:type="scope.row.status === 1 ? 'success' : 'info'"
							@click="handleStatusChange(scope.row)"
							:loading="scope.row.statusLoading"
						>
							{{ scope.row.status === 1 ? '启用' : '禁用' }}
						</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="platform" label="客服平台" show-overflow-tooltip></el-table-column>
				<el-table-column prop="creator" label="创建人" show-overflow-tooltip></el-table-column>
				<el-table-column prop="modifier" label="修改人" show-overflow-tooltip></el-table-column>
				<el-table-column prop="createdAtString" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="updatedAtString" label="修改时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="220">
					<template #default="scope">
						<el-button style="color: deepskyblue" size="small" text type="primary" @click="onOpenEditRole(scope.row)">
							<el-icon><ele-EditPen /></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="getList"
			/>
		</el-card>
		<EditRole ref="editRoleRef" @getRoleList="getList" />
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EditRole from '/@/views/customerService/account/component/editRole.vue';
import { getaccountAdd, getaccountList, updatestate } from '/@/api/customerService/account';
import { number } from 'echarts';

// 定义类型接口
interface TableDataItem {
	id: string;
	customerServiceId: string;
	status: number;
	platform: string;
	creator: string;
	modifier: string;
	createdAt: number;
	createdAtString: string;
	updatedAt: number;
	updatedAtString: string;
	statusLoading?: boolean;
}

interface TableParam {
	customerServiceId: string;
	platform: string;
	pageNum: number;
	pageSize: number;
	status: number;
}

interface TableState {
	data: TableDataItem[];
	total: number;
	loading: boolean;
	param: TableParam;
}

// 响应式数据
const tableData = reactive<TableState>({
	data: [],
	total: 0,
	loading: false,
	param: {
		customerServiceId: '',
		platform: '',
		pageNum: 1,
		pageSize: 10,
		status: 0,
	},
});

// 模板引用
const editRoleRef = ref<InstanceType<typeof EditRole>>();

/**
 * 获取客服账号列表
 */
const getList = async () => {
	try {
		tableData.loading = true;
		const res = await getaccountList(tableData.param);
		tableData.data = (res.data.list || []).map((item: TableDataItem) => ({
			...item,
			statusLoading: false,
		}));
		tableData.total = res.data.total || 0;
	} catch (error) {
		console.error('获取客服账号列表失败:', error);
		ElMessage.error('获取数据失败');
	} finally {
		tableData.loading = false;
	}
};

/**
 * 处理客服状态切换
 * @param row - 客服数据
 */
const handleStatusChange = async (row: TableDataItem) => {
	try {
		await ElMessageBox.confirm(`确定要${row.status === 1 ? '禁用' : '启用'}客服账号 "${row.customerServiceId}" 吗？`, '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		});

		row.statusLoading = true;
		const newStatus = row.status === 1 ? 0 : 1;
		// 调用状态更新接口
		await updatestate({
			id: row.id,
			status: newStatus,
		});

		ElMessage.success(`客服账号已${newStatus === 1 ? '启用' : '禁用'}`);

		// 重新获取数据确保数据同步
		await getList();
	} catch (error) {
		if (error === 'cancel') {
			console.log('用户取消状态切换');
			return;
		}
		console.error('状态切换失败:', error);
		ElMessage.error('状态切换失败');
	} finally {
		setTimeout(() => {
			row.statusLoading = false;
		}, 300);
	}
};

/**
 * 处理搜索
 */
const handleSearch = () => {
	tableData.param.pageNum = 1;
	getList();
};

/**
 * 处理分页变化
 * @param pagination - 分页参数 { page: number, limit: number }
 */
const handlePaginationChange = (pagination: { page: number; limit: number }) => {
	console.log('分页参数:', pagination.limit); // 调试用
	tableData.param.pageNum = pagination.page;
	tableData.param.pageSize = pagination.limit;
	getList();
};

/**
 * 打开新增客服对话框
 */
const onOpenAddRole = () => {
	editRoleRef.value?.openDialog();
};

/**
 * 打开编辑客服对话框
 */
const onOpenEditRole = (row: TableDataItem) => {
	editRoleRef.value?.openDialog(row);
};

// 生命周期
onMounted(() => {
	getList();
});
</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>