9/30
1. 设备管理界面完成 2. 用户管理界面完成 3. 会话列表完成
This commit is contained in:
Zy
229
src/views/system/conversation/index.vue
Normal file
229
src/views/system/conversation/index.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="p-2 app-container monitor-online-page">
|
||||
<Pagecrumb></Pagecrumb>
|
||||
<div class="search-wrap">
|
||||
<el-card class="search-panel" shadow="hover">
|
||||
<el-form ref="queryFormRef" :inline="true" :model="queryParams" class="query-form" label-position="top">
|
||||
<el-form-item label="会话ID" prop="sessionNo">
|
||||
<el-input v-model="queryParams.sessionNo" clearable placeholder="请输入会话编号" size="large"
|
||||
style="width: 150px" @keyup.enter="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户手机号" prop="ipaddr">
|
||||
<el-input v-model="queryParams.ipaddr" clearable placeholder="请输入用户手机号" size="large"
|
||||
style="width: 150px" @keyup.enter="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="会话状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
:empty-values="[null, undefined]"
|
||||
:value-on-clear="null"
|
||||
clearable
|
||||
placeholder="请选择会话状态"
|
||||
size="large"
|
||||
style="width: 150px"
|
||||
>
|
||||
<el-option label="机器人" value="0"></el-option>
|
||||
<el-option label="排队" value="1"></el-option>
|
||||
<el-option label="人工" value="2"></el-option>
|
||||
<el-option label="已结束" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="问题类型" prop="problemType">
|
||||
<el-select
|
||||
v-model="queryParams.problemType"
|
||||
:empty-values="[null, undefined]"
|
||||
:value-on-clear="null"
|
||||
clearable
|
||||
placeholder="请选择问题类型"
|
||||
size="large"
|
||||
style="width: 150px"
|
||||
>
|
||||
<el-option label="在线" value="0"></el-option>
|
||||
<el-option label="离线" value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关联设备" prop="deviceId">
|
||||
<el-input v-model="queryParams.deviceId" clearable placeholder="请输入MAC/设备名称" size="large"
|
||||
style="width: 150px" @keyup.enter="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="会话创建时间" prop="startTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.startTime"
|
||||
end-placeholder="结束日期"
|
||||
range-separator="-"
|
||||
single-panel
|
||||
size="large"
|
||||
start-placeholder="开始日期"
|
||||
style="width: 220px"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="接待客服" prop="agentId">
|
||||
<el-select
|
||||
v-model="queryParams.agentId"
|
||||
:empty-values="[null, undefined]"
|
||||
:value-on-clear="null"
|
||||
clearable
|
||||
size="large"
|
||||
style="width: 150px"
|
||||
>
|
||||
<el-option label="在线" value="0"></el-option>
|
||||
<el-option label="离线" value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="large" type="primary" @click="handleQuery">搜索</el-button>
|
||||
<el-button size="large" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card class="table-panel" shadow="hover">
|
||||
<template #header>
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<el-button type="primary">
|
||||
<span style="margin:0 8px;color: #fff;">全部</span>
|
||||
<span style="color: #fff;font-weight: bold">1286</span>
|
||||
</el-button>
|
||||
<tableTag circle-color="#7c3aed" num="862" title="机器人接待"></tableTag>
|
||||
<tableTag circle-color="#ea580c" num="7" title="排队等待"></tableTag>
|
||||
<tableTag num="12" title="人工接待"></tableTag>
|
||||
<tableTag circle-color="#94a3b8" num="405" title="已结束"></tableTag>
|
||||
</div>
|
||||
<div>
|
||||
<el-button plain type="info">批量导出</el-button>
|
||||
<el-button plain type="info">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="onlineList"
|
||||
border
|
||||
class="data-table"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column align="center" type="selection"></el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" label="会话ID" prop="tokenId"/>
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" label="用户信息" prop="userName"/>
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" label="关联设备" prop="clientKey"/>
|
||||
<el-table-column align="center" label="会话状态">
|
||||
<template #default="scope">
|
||||
<el-tag type="primary">在线</el-tag>
|
||||
<el-tag type="danger">离线</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" label="当前接待人" prop="deptName"/>
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" label="用户问题摘要" prop="ipaddr"/>
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" label="排队序号" prop="loginLocation"/>
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" label="等待时长" prop="os"/>
|
||||
<el-table-column :show-overflow-tooltip="true" align="center" label="最后消息时间" prop="browser"/>
|
||||
<el-table-column align="center" class-name="small-padding fixed-width" label="操作" min-width="200">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<el-button
|
||||
v-hasPermi="['monitor:online:forceLogout']"
|
||||
type="primary"
|
||||
@click="handleMain(scope.row)"
|
||||
>进入会话
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['monitor:online:forceLogout']"
|
||||
plain
|
||||
type="info"
|
||||
@click="handleMain(scope.row)"
|
||||
>用户档案
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['monitor:online:forceLogout']"
|
||||
plain
|
||||
type="danger"
|
||||
@click="handleMain(scope.row)"
|
||||
>关闭会话
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNum"
|
||||
:total="total"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="Online" setup>
|
||||
import {to} from 'await-to-js';
|
||||
import {listCsSession as initData} from '@/api/system/conversation/index';
|
||||
import {CsSessionQuery, CsSessionVO} from '@/api/system/conversation/types';
|
||||
import modal from '@/plugins/modal';
|
||||
import {useDict} from '@/utils/dict';
|
||||
import {parseTime} from '@/utils/ruoyi';
|
||||
|
||||
const {sys_device_type} = toRefs<any>(useDict('sys_device_type'));
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const onlineList = ref<CsSessionVO[]>([]);
|
||||
const loading = ref(true);
|
||||
const total = ref(0);
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
|
||||
const queryParams = ref<CsSessionQuery>({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
ipaddr: '',
|
||||
userName: ''
|
||||
});
|
||||
|
||||
/** 查询登录日志列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await initData(queryParams.value);
|
||||
onlineList.value = res.data?.rows;
|
||||
total.value = res.data?.total;
|
||||
loading.value = false;
|
||||
};
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
function handleMain(row) {
|
||||
console.log(row);
|
||||
router.push({
|
||||
path: '/conversation/conversationMain'
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
@include pageShell.table-crud-page;
|
||||
|
||||
|
||||
.circle {
|
||||
width: 7px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(124, 58, 237, 1)
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user