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

<template>
	<div class="system-dic-container">
		<el-card shadow="hover">
			<div class="system-user-search mb15">
				<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
					<el-form-item label="客服平台" prop="status" style="width: 200px">
						<el-select v-model="tableData.param.status" 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 label="" prop="dateRange">
						<el-date-picker
							v-model="tableData.param.dateRange"
							size="default"
							style="width: 240px"
							value-format="YYYY-MM-DD"
							type="daterange"
							range-separator="-"
							start-placeholder="请选择开始日期"
							end-placeholder="请选择结束日期"
						></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button size="default" type="primary" class="ml10" @click="dataList">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
						<el-button size="default" @click="resetQuery(queryRef)">
							<el-icon>
								<ele-Refresh />
							</el-icon>
							重置
						</el-button>
						<el-button size="default" type="info" class="ml10" @click="handleExport" style="background-color: deeppink; border: 0">
							<el-icon>
								<ele-Download />
							</el-icon>
							导出
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="tableData.data" style="width: 100%">
				<!-- <el-table-column type="selection" width="55" align="center" /> -->
				<el-table-column label="日期" align="center" prop="loginTime" width="180" />
				<el-table-column label="客服平台" align="center" prop="platform" />
				<el-table-column label="客服ID" align="center" prop="infoId" />
				<el-table-column label="客服姓名" align="center" prop="loginName" />
				<el-table-column label="进线人数" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
				<el-table-column label="开口人数" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
				<el-table-column label="留资卡发送数量" align="center" prop="browser" />
				<el-table-column label="名片发送数" align="center" prop="os" />
				<el-table-column label="留资人数" align="center" prop="status" />
				<el-table-column label="接待人数" align="center" prop="msg" />
				<el-table-column label="30秒回复率" align="center" prop="module" />
				<el-table-column label="60秒回复率" align="center" prop="module" />
				<el-table-column label="3分钟回复率" align="center" prop="module" />
			</el-table>
			<pagination
				v-show="tableData.total > 0"
				:total="tableData.total"
				v-model:page="tableData.param.pageNum"
				v-model:limit="tableData.param.pageSize"
				@pagination="dataList"
			/>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';

// 定义接口
interface TableDataRow {
	infoId: number;
	loginName: string;
	ipaddr: string;
	loginLocation: string;
	browser: string;
	os: string;
	status: number;
	msg: string;
	loginTime: string;
	module: string;
	platform: string;
}
interface TableDataParam {
	pageNum: number;
	pageSize: number;
	dateRange: string[];
	status: string;
	ipaddr: string;
	loginLocation: any;
	userName: string;
}

interface TableData {
	data: Array<TableDataRow>;
	total: number;
	loading: boolean;
	param: TableDataParam;
}

// 模拟数据
const dateList: TableDataRow[] = [
	{
		infoId: 434569527,
		loginName: 'demo',
		ipaddr: '10',
		loginLocation: '8',
		browser: '5',
		os: '3',
		status: 2,
		msg: '15',
		loginTime: '2025-11-22',
		module: '95%',
		platform: '抖音',
	},
	{
		infoId: 424569527,
		loginName: 'demo',
		ipaddr: '12',
		loginLocation: '9',
		browser: '6',
		os: '4',
		status: 3,
		msg: '18',
		loginTime: '2025-11-22',
		module: '92%',
		platform: '小红书',
	},
	{
		infoId: 414569527,
		loginName: 'demo',
		ipaddr: '8',
		loginLocation: '6',
		browser: '4',
		os: '2',
		status: 1,
		msg: '12',
		loginTime: '2025-11-22',
		module: '98%',
		platform: '快手',
	},
];

// 响应式数据
const queryRef = ref<FormInstance>();
const ids = ref<number[]>([]);
const tableData = reactive<TableData>({
	data: [],
	total: 0,
	loading: false,
	param: {
		pageNum: 1,
		pageSize: 10,
		dateRange: [],
		status: '',
		ipaddr: '',
		loginLocation: '',
		userName: '',
	},
});

// 方法定义
// 获取数据列表
const dataList = async () => {
	try {
		tableData.loading = true;

		// 实际API调用
		// const res = await logList(tableData.param);
		// tableData.data = res.data.list;
		// tableData.total = res.data.total;

		// 模拟数据 - 添加延迟避免DOM操作错误
		await new Promise((resolve) => setTimeout(resolve, 100));
		tableData.data = dateList;
		tableData.total = dateList.length;
	} catch (error) {
		console.error('获取数据失败:', error);
		ElMessage.error('获取数据失败');
	} finally {
		tableData.loading = false;
	}
};

// 重置查询
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;

	formEl.resetFields();
	tableData.param = {
		pageNum: 1,
		pageSize: 10,
		dateRange: [],
		status: '',
		ipaddr: '',
		loginLocation: '',
		userName: '',
	};

	nextTick(() => {
		dataList();
	});
};

// 导出数据
const handleExport = () => {
	ElMessage.info('导出功能开发中');
};

// 初始化表格数据
const initTableData = () => {
	dataList();
};

// 生命周期
onMounted(() => {
	// 使用 nextTick 确保DOM已渲染完成
	nextTick(() => {
		initTableData();
	});
});
</script>

<style scoped>
.system-dic-container {
	padding: 20px;
}

.system-user-search {
	margin-bottom: 15px;
}

.mb15 {
	margin-bottom: 15px;
}

.ml10 {
	margin-left: 10px;
}
</style>