增加导入导出模块

This commit is contained in:
WUSIJIAN
2025-11-24 16:55:18 +08:00
parent 88703864a2
commit 428989c993
13 changed files with 1894 additions and 1251 deletions

View File

@@ -1,68 +1,70 @@
<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">
<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="''" />
<el-option :label="'抖音'" :value="''" />
<el-option :label="'快手'" :value="''" />
</el-select>
</el-form-item>
<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="'小红书'" />
<el-option :label="'抖音'" />
<el-option :label="'快手'" />
</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-form-item>
</el-form>
</div>
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
<!-- <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="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>
<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>
<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-form-item>
</el-form>
</div>
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
<!-- <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="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>
<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">
@@ -73,288 +75,282 @@ import { log } from 'console';
// 定义接口来定义对象的类型
interface TableDataRow {
infoId: number;
loginName: string;
ipaddr: string;
loginLocation: string;
browser: string;
os: string;
status: number;
msg: string;
loginTime: string;
module: string;
infoId: number;
loginName: string;
ipaddr: string;
loginLocation: string;
browser: string;
os: string;
status: number;
msg: string;
loginTime: string;
module: 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;
};
};
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;
};
};
}
export default defineComponent({
name: 'apiV1SystemLoginLogList',
setup() {
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: '小红书',
},
]);
//模拟数据
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": '小红书'
}
])
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 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;
// });
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 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),
};
},
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),
};
},
});
</script>