From 6b5f0408ab95f5ea135f97924c6e414042cd2a88 Mon Sep 17 00:00:00 2001
From: yinbangzhong <zhongbangyin@126.com>
Date: 星期四, 05 九月 2024 11:27:41 +0800
Subject: [PATCH] 单文档
---
src/views/sessionManager/components/historySession.vue | 499 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 320 insertions(+), 179 deletions(-)
diff --git a/src/views/sessionManager/components/historySession.vue b/src/views/sessionManager/components/historySession.vue
index c355dce..243d7dc 100644
--- a/src/views/sessionManager/components/historySession.vue
+++ b/src/views/sessionManager/components/historySession.vue
@@ -1,191 +1,336 @@
<template>
<div class="layoutHisCenter">
- <a-button
- type="primary"
- status="danger"
- style="
- position: absolute;
- top: 10px;
- left: -40px;
- font-size: 30px;
- z-index: 9999;
- cursor: pointer"
- @click="emit('changeAgentType','1')"
- >
- <template #icon>
- <icon-close style="font-size: 20px" />
- </template>
- </a-button>
+ <a-button
+ type="primary"
+ status="danger"
+ style="
+ position: absolute;
+ top: 10px;
+ left: -40px;
+ font-size: 30px;
+ z-index: 99;
+ cursor: pointer;
+ "
+ @click="emit('changeAgentType', '1')"
+ >
+ <template #icon>
+ <icon-close style="font-size: 20px" />
+ </template>
+ </a-button>
- <a-scrollbar
- class="left-list"
- style="
- height: calc(100vh - 100px);
- overflow-y: auto;
- overflow-x: hidden;
- "
- >
- <div class="historyTitle___F_iam">鍘嗗彶浼氳瘽</div>
+ <a-scrollbar
+ ref="scrollRef"
+ class="left-list"
+ style="
+ height: calc(100vh - 160px);
+ overflow-y: scroll;
+ overflow-x: hidden;
+ "
+ v-if="isReached"
+ @scroll="handleScroll"
+ >
+ <div class="historyTitle___F_iam">鍘嗗彶浼氳瘽</div>
+ <div class="search">
+ <!-- 鏌ヨ妗�-->
+ <div class="search-box">
+ <icon-search />
+ <a-input
+ placeholder="鎼滅储鍘嗗彶浼氳瘽"
+ v-model="searchValue"
+ style="width: 90%"
+ />
+ </div>
+ </div>
- <div class="search">
-<!-- 鏌ヨ妗�-->
- <div class="search-box">
- <icon-search />
- <a-input
- placeholder="鎼滅储鍘嗗彶浼氳瘽"
- v-model="searchValue"
- style="width: 90%;"
- />
- </div>
-
- </div>
-
-
- <div class="historyCenter">
- <div
- class="item historyCenter-box"
- v-for="session in sessionList"
- @click="querySessionDetail(session)"
- >
- <div class="text" >
- <img
- :style="{ width: '16px' }"
- alt="dessert"
- :src="session.avatar || imgSrc"
- />
- {{ session.name }}
- </div>
- <div class="time"
- >{{
- moment(new Date(session.create_time)).format(
- 'YYYY-MM-DD HH:mm:ss'
- )
- }}
- </div>
- </div>
- </div>
- </a-scrollbar>
+ <div class="historyCenter">
+ <div
+ class="item historyCenter-box"
+ v-for="session in sessionList"
+ @click="querySessionDetail(session)"
+ @mouseenter="handleMouseEnter(session)"
+ @mouseleave="handleMouseLeave(session)"
+ >
+ <div class="text">
+ <img
+ :style="{ width: '16px' }"
+ alt="dessert"
+ :src="session.icon ? httpUrl + session.icon : imgSrc"
+ />
+ {{ session.name }}
+ </div>
+ <div class="time">
+ <span v-show="session.showtype == 1" style="font-size: 14px">
+ {{
+ moment(new Date(session.create_time)).format(
+ 'YYYY-MM-DD HH:mm:ss'
+ )
+ }}
+ </span>
+ </div>
+ <a-button
+ type="text"
+ @click.stop="deleteSession(session)"
+ style="color: red; position: absolute; right: 10px; top: 10px"
+ v-show="session.showtype == 2"
+ >
+ <icon-delete style="font-size: 14px" />
+ </a-button>
+ </div>
+ </div>
+ </a-scrollbar>
</div>
</template>
<script setup lang="ts">
-import {
- IconClose,
- IconSearch,
- IconTiktokColor
-} from "@arco-design/web-vue/es/icon";
-import { useAppStore, useUserStore } from "@/store";
-import { computed, nextTick, onMounted, watch, reactive, ref, onBeforeMount, onBeforeUnmount } from "vue";
+ import {
+ IconClose,
+ IconSearch,
+ IconTiktokColor,
+ } from '@arco-design/web-vue/es/icon';
+ import { useAppStore, useUserStore } from '@/store';
+ import {
+ computed,
+ nextTick,
+ onMounted,
+ watch,
+ reactive,
+ ref,
+ onBeforeMount,
+ onBeforeUnmount,
+ } from 'vue';
-import { Message } from "@arco-design/web-vue";
-import EventBus from '@/utils/EventBus';
-import moment from "moment";
-import {
- addSessionApi,
- chatApi,
- getDialogListApi,
- getSessionDetailsApi,
- sessionListApi
-} from "@/api/session";
-import { queryCanvasList } from "@/api/Agent";
-const emit = defineEmits(["querySessionDetail","changeAgentType"]);
-import logo from "@/assets/images/model.png";
-const sessionList = ref([]); //浼氳瘽鍒楄〃
-const activeSessionId = ref("");
-const fieldNames = { value: "id", label: "name" };
-const dialogs = ref([]);
-const dialogObj = reactive({});
-const agentObj = reactive({});
-const agentList = ref([]);
-const searchValue = ref("");
-const selectValue = ref("");
-const sectionList = ref({});
-const imgSrc = ref(logo);
-const DialogList = async () => {
- const { code, data } = await getDialogListApi();
- if (code === 200) {
- if (data) {
- selectValue.value = data[0].id;
- dialogs.value = data.map((item) => {
+ import { Message, Modal } from '@arco-design/web-vue';
+ import EventBus from '@/utils/EventBus';
+ import moment from 'moment';
+ import {
+ addSessionApi,
+ chatApi,
+ getDialogListApi,
+ getSessionDetailsApi,
+ deleteSessionApi,
+ sessionListApiPage,
+ } from '@/api/session';
+
+ import { queryCanvasList } from '@/api/Agent';
+ const emit = defineEmits(['querySessionDetail', 'changeAgentType']);
+ import logo from '@/assets/images/model.png';
+ import { deleteKnow } from '@/api/kbList';
+ import { getAgentSessionDetailsApi } from '@/api/agentSession';
+ const sessionList = ref([]); //浼氳瘽鍒楄〃
+ const activeSessionId = ref('');
+ const fieldNames = { value: 'id', label: 'name' };
+ const dialogs = ref([]);
+ const dialogObj = reactive({});
+ const agentObj = reactive({});
+ const agentList = ref([]);
+ const searchValue = ref('');
+ const selectValue = ref('');
+ const sectionList = ref({});
+ const scrollRef = ref(null);
+ const httpUrl = localStorage.getItem('httpUrl');
+ const imgSrc = ref(logo);
+ let scrollTopVal = ref(0);
+ let queryPage = reactive({
+ page: 1,
+ page_size: 50,
+ });
+ let total = ref(0);
+ let sessionScrollList = ref([]);
+ let isReached = ref(true);
+
+ const DialogList = async () => {
+ const { code, data } = await getDialogListApi();
+ if (code === 200) {
+ if (data) {
+ selectValue.value = data[0].id;
+ dialogs.value = data.map((item) => {
+ return {
+ ...item,
+ type: 1, //鏅鸿兘浣�
+ };
+ });
+ // console.log(data, "dialogs");
+ queryCanvas();
+ }
+ }
+ };
+
+ const queryCanvas = async (params = {}) => {
+ try {
+ const { data } = await queryCanvasList(params);
+ console.log(data, 'agent');
+ agentList.value = data.map((item) => {
return {
...item,
- type: 1 //鏅鸿兘浣�
+ name: item.title,
+ type: 2, //agent
};
});
- // console.log(data, "dialogs");
- queryCanvas();
+ // 鍚堝苟鏁扮粍
+ dialogs.value = dialogs.value.concat(agentList.value);
+
+ // 鍒ゆ柇褰撳墠鏄櫤鑳戒綋鎴朼gent
+ // console.log(val, 'val');
+ // if (dialogs.value.length > 0) {
+ // dialogChange(dialogs.value[0].id);
+ // }
+ //鏂板缓浼氳瘽
+ querySessionList(dialogs.value[0].id);
+ } catch (err) {
+ // you can report use errorHandler or other
+ } finally {
}
- }
-};
+ };
-const queryCanvas = async (params = {}) => {
- try {
- const { data } = await queryCanvasList(params);
- console.log(data, "agent");
- agentList.value = data.map((item) => {
- return {
- ...item,
- name: item.title,
- type: 2 //agent
- };
+ // 鏌ヨ浼氳瘽鍒楄〃
+ const querySessionList = async (id) => {
+ const { code, data } = await sessionListApiPage({
+ dialog_id: id,
+ ...queryPage,
});
- // 鍚堝苟鏁扮粍
- dialogs.value = dialogs.value.concat(agentList.value);
+ if (code === 200) {
+ sessionList.value = data.map((item) => {
+ return {
+ ...item,
+ showtype: 1,
+ };
+ });
+ isReached.value = false;
+ setTimeout(() => {
+ isReached.value = true;
+ }, 100);
+ // total.value = sessionList.value.length;
+ } else {
+ Message.warning('鏌ヨ澶辫触');
+ }
+ };
- // 鍒ゆ柇褰撳墠鏄櫤鑳戒綋鎴朼gent
- // console.log(val, 'val');
- // if (dialogs.value.length > 0) {
- // dialogChange(dialogs.value[0].id);
- // }
- //鏂板缓浼氳瘽
- querySessionList(dialogs.value[0].id);
+ //鏍规嵁浼氳瘽id鍒犻櫎浼氳瘽
+ const deleteSession = async (session) => {
+ Modal.confirm({
+ title: '鎻愮ず淇℃伅',
+ content: '纭鍒犻櫎鍚�',
+ okText: '纭畾',
+ cancelText: '鍙栨秷',
+ hideTitle: true,
+ onOk: async () => {
+ const { code } = await deleteSessionApi([session.id]);
+ if (code === 200) {
+ Message.success('鍒犻櫎鎴愬姛');
+ querySessionList('');
+ }
+ },
+ onCancel: () => {},
+ });
+ };
+ const querySessionDetail = async (session) => {
+ console.log(session, 'session');
+ // 鏌ヨ鍘嗗彶璁板綍 app_type 1:鏅鸿兘浣� 2:agent
+ if (!session.base) {
+ // 鐢熸垚鏅鸿兘浣撴柊鐨勫璇�
+ emit('changeAgentType', '1');
+ emit('querySessionDetail', session);
+ } else if (session.base == 'agent') {
+ // agent瀵硅薄鏁版嵁灏佽
+ // const { code, data } = await getAgentSessionDetailsApi(session.dialog_id);
+ // if (code == 0) {
+ // console.log(data,'浼氳瘽璇︽儏');
+ // // let sessionObj = {
+ // // id: session.app_id,
+ // // dsl: data.dsl,
+ // // title: session.name,
+ // // }
+ // }
+ EventBus.emit('queryAgentSessionDetail', session);
+ emit('changeAgentType', '2');
+ } else if (session.base == 'advanced-agent') {
+ EventBus.emit('queryAgentSessionDetails', session);
+ emit('changeAgentType', '5');
+ }
+ };
- } catch (err) {
- // you can report use errorHandler or other
- } finally {
- }
-};
+ const handleMouseEnter = (session) => {
+ session.showtype = 2;
+ };
+ const handleMouseLeave = (session) => {
+ session.showtype = 1;
+ };
-// 鏌ヨ浼氳瘽鍒楄〃
-const querySessionList = async (id) => {
- const { code, data } = await sessionListApi(id);
- if (code === 200) {
- sessionList.value = data;
+ const handleScroll = async (e: any) => {
+ scrollTopVal.value = e.target.scrollTop;
+ let offsetHeight = e.target.offsetHeight;
+ let scrollHeight = e.target.scrollHeight;
+ if (scrollTopVal.value + offsetHeight >= scrollHeight - 1) {
+ console.log(scrollTopVal.value);
+ // console.log(offsetHeight);
+ // console.log(scrollHeight);
+ //婊氬姩鏉″埌杈惧簳閮�
+ // if (sessionList.value.length < total.value) {
+ // //鏁版嵁涓哄姞杞藉畬锛岀户缁祴鍊�
+ // // queryPage.page++
+ //
+ //
+ //
+ // }
+ queryPage.page++;
+ const { code, data } = await sessionListApiPage({
+ dialog_id: '',
+ ...queryPage,
+ });
+ if (code === 200) {
+ sessionScrollList.value = data.map((item) => {
+ return {
+ ...item,
+ showtype: 1,
+ };
+ });
+ // total.value = sessionList.value.length;
+ sessionList.value = [...sessionList.value, ...sessionScrollList.value];
+ isReached.value = false;
+ setTimeout(() => {
+ isReached.value = true;
+ nextTick(() => {
+ scrollRef.value.scrollTop(scrollTopVal.value);
+ // console.log(scrollRef.value.$el.scrollTop,'scrollTopVal');
+ // console.log(scrollTopVal.value,'scrollTopVal');
+ });
+ }, 100);
+ } else {
+ Message.warning('鏌ヨ澶辫触');
+ }
+ }
+ };
-
- } else {
- Message.warning("鏌ヨ澶辫触");
- }
-};
-
-
-const querySessionDetail = async (session) => {
- console.log(session, 'session');
- emit('changeAgentType','1');
- emit('querySessionDetail',session);
-}
-onBeforeMount(()=>{
- DialogList()
-})
-
-onMounted(() => {
- EventBus.on("history", () => {
- emit('changeAgentType','3');
- DialogList()
-
+ onBeforeMount(() => {
+ // DialogList()
+ querySessionList('');
});
-})
-onBeforeUnmount(() => {
- EventBus.off("history");
-});
+ onMounted(() => {
+ console.log(httpUrl, '褰撳墠鍦板潃');
+ EventBus.on('history', () => {
+ emit('changeAgentType', '3');
+ // DialogList()
+ queryPage.page = 1;
+ querySessionList('');
+ });
+ // 娣诲姞婊氬姩浜嬩欢鐩戝惉鍣�
+ scrollRef.value.$el.addEventListener('scroll', handleScroll);
+ // 娓呯悊鍑芥暟
+ return () => {
+ scrollRef.value.$el.removeEventListener('scroll', handleScroll);
+ };
+ });
+ onBeforeUnmount(() => {
+ EventBus.off('history');
+ });
</script>
<style scoped lang="less">
- .layoutHisCenter{
+ .layoutHisCenter {
width: 100%;
//background: #999999;
position: absolute;
@@ -197,9 +342,9 @@
font-weight: 700;
text-align: center;
}
- .search{
+ .search {
width: 100%;
- .search-box{
+ .search-box {
width: 70%;
margin-left: 15%;
border: 1px solid var(--color-text-4);
@@ -208,41 +353,37 @@
background: var(--color-bg-2);
margin-top: 20px;
margin-bottom: 20px;
- :deep(.arco-input-wrapper){
+ :deep(.arco-input-wrapper) {
border: none;
background: var(--color-bg-2);
}
}
}
- .historyCenter{
+ .historyCenter {
width: 100%;
margin-top: 30px;
- .historyCenter-box{
+ .historyCenter-box {
+ position: relative;
display: flex;
width: 70%;
margin-left: 15%;
- //border: 1px solid var(--color-text-4);
+ //border: 1px solid var(--color-neutral-3);
padding: 16px;
border-radius: 12px;
- background: var(--color-bg-2);
+ background: var(--color-bg-1);
margin-top: 10px;
cursor: pointer;
justify-content: space-between;
align-items: center;
+ color: var(--color-text-2);
}
- .historyCenter-box:hover{
- color: #2a2a2b;
- border: 1px solid var(--color-neutral-3);
- //background: #e8e8ea;
- box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+ .historyCenter-box:hover {
+ color: var(--color-text-2);
+ //border: 1px solid var(--color-neutral-3);
+ background: var(--color-bg-3);
+ box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
+ 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
}
}
-
-
-
-
}
-
-
-
</style>
--
Gitblit v1.8.0