重构组合式api
This commit is contained in:
WUSIJIAN
@@ -5,9 +5,9 @@
|
||||
<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="''" />
|
||||
<el-option :label="'抖音'" :value="''" />
|
||||
<el-option :label="'快手'" :value="''" />
|
||||
<el-option label="小红书" value="xiaohongshu" />
|
||||
<el-option label="抖音" value="douyin" />
|
||||
<el-option label="快手" value="kuaishou" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
@@ -36,25 +36,30 @@
|
||||
</el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
<el-button size="default" type="info" class="ml10" @click="handleExport">
|
||||
<el-icon>
|
||||
<ele-Download />
|
||||
</el-icon>
|
||||
导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<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" :s0ow-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" :formatter="statusFormat" /> -->
|
||||
<el-table-column label="留资人数" align="center" prop="status" />
|
||||
<el-table-column label="接待人数" align="center" prop="msg" />
|
||||
<el-table-column label="30秒回复率" alian="center" prop="module" />
|
||||
<el-table-column label="60秒回复率" alian="center" prop="module" />
|
||||
<el-table-column label="3分钟回复率" alian="center" prop="module" />
|
||||
<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"
|
||||
@@ -67,13 +72,11 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance, unref } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
|
||||
import { logList, deleteLog, clearLog } from '/@/api/system/monitor/loginLog';
|
||||
import { log } from 'console';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
// 定义接口
|
||||
interface TableDataRow {
|
||||
infoId: number;
|
||||
loginName: string;
|
||||
@@ -85,272 +88,162 @@ interface TableDataRow {
|
||||
msg: string;
|
||||
loginTime: string;
|
||||
module: string;
|
||||
platform: string;
|
||||
}
|
||||
interface TableDataState {
|
||||
ids: number[];
|
||||
tableData: {
|
||||
data: Array<TableDataRow>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
dateRange: string[];
|
||||
status: string;
|
||||
ipaddr: string;
|
||||
loginLocation: any;
|
||||
userName: string;
|
||||
};
|
||||
};
|
||||
interface TableDataParam {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
dateRange: string[];
|
||||
status: string;
|
||||
ipaddr: string;
|
||||
loginLocation: any;
|
||||
userName: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemLoginLogList',
|
||||
setup() {
|
||||
//模拟数据
|
||||
const dateList = ref([
|
||||
{
|
||||
infoId: 434569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '抖音',
|
||||
},
|
||||
{
|
||||
infoId: 424569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '小红书',
|
||||
},
|
||||
{
|
||||
infoId: 414569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '快手',
|
||||
},
|
||||
{
|
||||
infoId: 404569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '小红书',
|
||||
},
|
||||
{
|
||||
infoId: 394569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '小红书',
|
||||
},
|
||||
{
|
||||
infoId: 384569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '快手',
|
||||
},
|
||||
{
|
||||
infoId: 374569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '小红书',
|
||||
},
|
||||
{
|
||||
infoId: 364569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '抖音',
|
||||
},
|
||||
{
|
||||
infoId: 354569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '小红书',
|
||||
},
|
||||
{
|
||||
infoId: 344569527,
|
||||
loginName: 'demo',
|
||||
ipaddr: '0',
|
||||
loginLocation: '0',
|
||||
browser: '0',
|
||||
os: '0',
|
||||
status: 0,
|
||||
msg: '0',
|
||||
loginTime: '2025-11-22',
|
||||
module: '0',
|
||||
platform: '小红书',
|
||||
},
|
||||
]);
|
||||
interface TableData {
|
||||
data: Array<TableDataRow>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: TableDataParam;
|
||||
}
|
||||
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const queryRef = ref();
|
||||
const { admin_login_status } = proxy.useDict('admin_login_status');
|
||||
const state = reactive<TableDataState>({
|
||||
ids: [],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dateRange: [],
|
||||
status: '',
|
||||
ipaddr: '',
|
||||
loginLocation: '',
|
||||
userName: '',
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
dataList();
|
||||
};
|
||||
// 模拟数据
|
||||
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 dataList = () => {
|
||||
// logList(state.tableData.param).then((res: any) => {
|
||||
// state.tableData.data = res.data.list;
|
||||
// console.log(state.tableData.data, '11111');
|
||||
// state.tableData.total = res.data.total;
|
||||
|
||||
// });
|
||||
|
||||
state.tableData.data = dateList.value;
|
||||
console.log(state.tableData.data, '11111');
|
||||
state.tableData.total = dateList.value.length;
|
||||
};
|
||||
// 删除日志
|
||||
const onRowDel = (row: TableDataRow) => {
|
||||
let msg = '你确定要删除所选数据？';
|
||||
let ids: number[] = [];
|
||||
if (row) {
|
||||
msg = `此操作将永久删除：“${row.loginName}”，是否继续?`;
|
||||
ids = [row.infoId];
|
||||
4569527;
|
||||
} else {
|
||||
ids = state.ids;
|
||||
}
|
||||
if (ids.length === 0) {
|
||||
ElMessage.error('请选择要删除的数据。');
|
||||
return;
|
||||
}
|
||||
ElMessageBox.confirm(msg, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deleteLog(ids).then(() => {
|
||||
ElMessage.success('删除成功');
|
||||
dataList();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 清空日志
|
||||
const onRowClear = () => {
|
||||
ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
clearLog().then(() => {
|
||||
ElMessage.success('清除成功');
|
||||
dataList();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
dataList();
|
||||
};
|
||||
// 多选框选中数据
|
||||
const handleSelectionChange = (selection: TableDataRow[]) => {
|
||||
state.ids = selection.map((item) => item.infoId);
|
||||
4569527;
|
||||
};
|
||||
// 登录状态字典翻译
|
||||
const statusFormat = (row: TableDataRow) => {
|
||||
return proxy.selectDictLabel(unref(admin_login_status), row.status);
|
||||
};
|
||||
return {
|
||||
queryRef,
|
||||
onRowDel,
|
||||
dataList,
|
||||
resetQuery,
|
||||
handleSelectionChange,
|
||||
statusFormat,
|
||||
onRowClear,
|
||||
admin_login_status,
|
||||
...toRefs(state),
|
||||
};
|
||||
// 响应式数据
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user