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
							@keyup.enter="handleSearch"
						/>
					</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" :loading="tableData.loading">
							<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-button size="default" class="ml10" @click="handleReset" :disabled="tableData.loading">
							<el-icon>
								<ele-Refresh />
							</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="isDisabled" label="客服状态" show-overflow-tooltip>
					<template #default="scope">
						<el-button
							size="small"
							:type="scope.row.isDisabled == 1 ? 'success' : 'info'"
							@click="handleStatusChange(scope.row)"
							:loading="scope.row.statusLoading"
						>
							{{ scope.row.isDisabled == 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="updater" label="修改人" show-overflow-tooltip></el-table-column>
				<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip>
					<template #default="{ row }">
						{{ formatTime(row.createdAt) }}
					</template>
				</el-table-column>
				<el-table-column prop="updatedAt" label="修改时间" show-overflow-tooltip>
					<template #default="{ row }">
						{{ formatTime(row.updatedAt) }}
					</template>
				</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>
		<EditAccount ref="editRoleRef" @refresh="getList" />
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EditAccount from './component/editAccount.vue';
import { addAccount, getaccountList, updatestate } from '/@/api/customerService/account';

// 定义类型接口
interface TableDataItem {
	id: string;
	customerServiceId: string;
	isDisabled: number; // 修正：应该是isDisabled而不是status
	platform: string;
	creator: string;
	modifier: string;
	createdAt: number;
	updatedAt: number;
	statusLoading?: boolean;
}

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

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

// 初始参数（用于重置）
const initialParam: TableParam = {
	customerServiceId: '',
	platform: '',
	pageNum: 1,
	pageSize: 10,
	isDisabled: 0,
};

// 响应式数据
const tableData = reactive<TableState>({
	data: [],
	total: 0,
	loading: false,
	param: { ...initialParam },
});

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

/**
 * 获取客服账号列表
 */
const getList = async () => {
	try {
		tableData.loading = true;

		// 构建查询参数，过滤空值
		const queryParams: any = {
			pageNum: tableData.param.pageNum,
			pageSize: tableData.param.pageSize,
			customerServiceId: tableData.param.customerServiceId || undefined,
			platform: tableData.param.platform || undefined,
		};

		const res = await getaccountList(queryParams);

		if (res && res.data) {
			tableData.data = (res.data.list || []).map((item: TableDataItem) => ({
				...item,
				statusLoading: false,
			}));
			tableData.total = res.data.total || 0;
		} else {
			tableData.data = [];
			tableData.total = 0;
			ElMessage.warning('暂无数据');
		}
	} catch (error) {
		console.error('获取客服账号列表失败:', error);
		ElMessage.error('获取数据失败');
		tableData.data = [];
		tableData.total = 0;
	} finally {
		tableData.loading = false;
	}
};

/**
 * 处理搜索
 */
const handleSearch = () => {
	tableData.param.pageNum = 1; // 搜索时重置到第一页
	getList();
};

/**
 * 重置查询条件
 */
const handleReset = () => {
	// 重新获取数据
	tableData.param = { ...initialParam };
	getList();
};

// ==================== 时间处理函数 ====================
/**
 * 格式化时间显示
 */
const formatTime = (time: string | number | Date): string => {
	if (!time) return '-';

	try {
		let date: Date;

		if (time instanceof Date) {
			date = time;
		} else if (typeof time === 'string') {
			date = new Date(time);
		} else {
			let timestamp = time;
			if (timestamp > 1000000000000) {
				// 已经是毫秒时间戳
			} else if (timestamp > 1000000000) {
				// 秒时间戳，转换为毫秒
				timestamp = timestamp * 1000;
			}
			date = new Date(timestamp);
		}

		if (isNaN(date.getTime())) {
			return String(time);
		}

		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		const hours = String(date.getHours()).padStart(2, '0');
		const minutes = String(date.getMinutes()).padStart(2, '0');
		const seconds = String(date.getSeconds()).padStart(2, '0');

		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	} catch (error) {
		console.error('时间格式化错误:', error);
		return String(time);
	}
};

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

		row.statusLoading = true;
		const newStatus = row.isDisabled == 1 ? 0 : 1; // 修正：使用isDisabled字段

		await updatestate({
			id: row.id,
			isDisabled: newStatus, // 接口可能需要status字段
		});

		ElMessage.success(`客服账号已${newStatus == 0 ? '禁用' : '启用'}`);
		await getList(); // 重新获取数据
	} catch (error) {
		if (error == 'cancel') {
			return;
		}
		console.error('状态切换失败:', error);
		ElMessage.error('状态切换失败');
	} finally {
		setTimeout(() => {
			row.statusLoading = false;
		}, 300);
	}
};

/**
 * 打开新增客服对话框
 */
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>