From 659347e492d9d4c84e869e0cbbb1281063dd9307 Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期一, 19 八月 2024 15:40:31 +0800
Subject: [PATCH] 文档上传修改
---
src/views/sessionManager/index.vue | 219 ++++++++++++++++++++++++++++++++++++------------------
1 files changed, 145 insertions(+), 74 deletions(-)
diff --git a/src/views/sessionManager/index.vue b/src/views/sessionManager/index.vue
index 767e528..3c71541 100644
--- a/src/views/sessionManager/index.vue
+++ b/src/views/sessionManager/index.vue
@@ -80,7 +80,7 @@
<span class="action" v-if="index != 0" @click="copy(sessionDetail.content)">
<icon-copy /> 澶嶅埗
</span>
- <span class="action" v-if="index != 0 && index == sessionDetailList.length - 1" @click="reGenerate()">
+ <span class="action" v-if="index != 0 && index == sessionDetailList.length - 1" @click="reGenerate()">
<icon-refresh /> 閲嶆柊鐢熸垚
</span>
</template>
@@ -107,8 +107,9 @@
<template #actions>
<div class="action"
@click="stopChat"
- style="background: var(--color-bg-2);color: var(--color-primary-light-4);" v-if="displayedText != ''">
- <icon-record-stop />
+ style="background: var(--color-bg-2);color: var(--color-primary-light-4);"
+ v-if="displayedText != ''">
+ <icon-record-stop />
鍋滄鐢熸垚
</div>
</template>
@@ -120,7 +121,7 @@
<div class="chartStart v-else" @click="stopChat">閲嶆柊鐢熸垚</div> -->
</a-scrollbar>
- <div class="chat_bottom" >
+ <div class="chat_bottom">
<div class="center-bottom">
<!-- <a-textarea
v-model="inputMsg"
@@ -148,19 +149,6 @@
maxRows: 5,
}"
/>
- <div style="margin-left: 20px">
- <a-upload
- ref="uploadRef"
- :file-list="uploadList"
- :disabled="loading1"
- multiple
- :custom-request="customRequest"
- style="font-size: 24px;">
- <template #upload-button>
- <icon-attachment style="color: #0960bd"/>
- </template>
- </a-upload>
- </div>
<div class="btn-send">
<a-button
@@ -169,8 +157,51 @@
type="text"
style="border-radius: 24px"
:loading="loading"
- ><icon-send size="32" style="color: #0960bd"/>
+ >
+ <icon-send size="32" style="color: #0960bd" />
</a-button>
+ </div>
+ </div>
+ <!-- <div style="margin-top: 0px">-->
+ <!-- <a-upload-->
+ <!-- ref="uploadRef"-->
+ <!-- :file-list="uploadList"-->
+ <!-- :limit="1"-->
+ <!-- multiple-->
+ <!-- :custom-request="customRequest"-->
+ <!-- style="font-size: 24px;margin-bottom: 10px;position: relative;width: 200px">-->
+ <!-- <template #upload-button>-->
+ <!-- <icon-attachment style="color: #0960bd;position: absolute;top:-50px;left: 20px;z-index: 10000"/>-->
+ <!-- </template>-->
+ <!-- </a-upload>-->
+ <!-- </div>-->
+ <spa style="position: absolute;top:96px;left: 10px;z-index: 10000;cursor: pointer">
+ <icon-attachment size="28" @click="selectFile" style="color: #0960bd;" />
+ <input
+ ref="fileInput"
+ type="file"
+ style="display: none;"
+ @change="onFileSelected"
+ />
+ </spa>
+ <div class="uploadFileList">
+ <div class="files" v-for="(item,index) in uploaditemList" :key="index"
+ style="position: relative;width: 200px;margin-top: 10px;">
+ <a-comment
+ :author="item.name"
+ :content="item.size +''"
+ style="background: var(--color-bg-2);padding:10px;border-radius: 10px"
+ >
+ <template #avatar>
+ <a-button type="text" :loading="onFileSelectedLoading" v-if="onFileSelectedLoading"></a-button>
+ <a-avatar v-if="!onFileSelectedLoading">
+ <icon-file style="color: #0960bd" />
+ </a-avatar>
+ </template>
+ </a-comment>
+ <icon-close-circle-fill size="18px"
+ @click="deleteFile(item)"
+ style="position: absolute;right: -4px;top: -4px;color: red;cursor: pointer"/>
</div>
</div>
</div>
@@ -239,17 +270,17 @@
import { queryCanvasList } from "@/api/Agent";
import { getAgentSessionDetailsApi } from "@/api/agentSession";
import useClipboard from "vue-clipboard3";
+
const sessionDetailList = ref([]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯�
const sessionList = ref([]); //浼氳瘽鍒楄〃
const modalObj = reactive({ add: false });
const dialogId = ref("");
const chatDis = ref(false);
const loading = ref(false);
-const loading1= ref(false);
const agentType = ref("1");
const agentTitle = ref("鏈懡鍚嶄細璇�");
let chatObj = reactive({});
-const isStopChat = ref(false)
+const isStopChat = ref(false);
const currIndex = ref(0);
const displayedText = ref(""); // 姝ｅ湪鏄剧ず鐨勬枃瀛�
let timer: number | null = null;
@@ -264,48 +295,81 @@
const selectValue = ref("");
const sectionList = ref({});
const uploadList = ref([]);
+const uploaditemList = ref([]);
const uploadRef = ref();
const files = ref([]);
+const file = ref('');
+const fileInput = ref(null);
+
+const selectFile = () => {
+ fileInput.value.click();
+};
+
+
+let onFileSelectedLoading = ref(false);
+const onFileSelected = (event) => {
+ const file = event.target.files[0];
+ uploaditemList.value = [{
+ name: file.name,
+ size: file.size,
+ }];
+ if (file) {
+ onFileSelectedLoading.value = true;
+ const formData = new FormData();
+ formData.append("file", file);
+ formData.append("conversation_id", activeSessionId.value);
+ uploadWithoutKb(formData).then((res) => {
+ // console.log(res);
+ if (res.code == 200) {
+ console.log(res);
+ console.log(uploaditemList.value);
+ onFileSelectedLoading.value = false;
+ fileInput.value.value = "";
+ uploaditemList.value = [];
+ Message.success("涓婁紶鎴愬姛");
+ } else {
+ Message.error("涓婁紶澶辫触");
+ }
+ });
+ }
+};
+
+const deleteFile = (item) => {
+ console.log(uploaditemList.value);
+ uploaditemList.value = [];
+};
const { toClipboard } = useClipboard();
const copy = async (text) => {
await toClipboard(text); //鍙傛暟涓鸿澶嶅埗鐨勬枃鏈�
-}
+};
const onChange = (fileList) => {
// files.value = fileList;
};
-const submitOne = (e) => {
- e.stopPropagation();
- console.log(files.value);
- uploadRef.value.submit(files.value.find((x) => x.status === 'init'));
-};
// 涓婁紶鏂囦欢
-const customRequest = async(option) => {
- loading1.value=true;
- const {onProgress, onError, onSuccess, fileItem, name} = option
-
- const { code, data } = await getSessionDetailsApi(activeSessionId.value);
- if (code === 200) {
- console.log(data, "璇︽儏");
- if (fileItem.file) {
- const formData = new FormData();
- formData.append('file', fileItem.file);
- formData.append('conversation_id', data.id);
- uploadWithoutKb(formData).then((res) => {
+const customRequest = async (option) => {
+ const { onProgress, onError, onSuccess, fileItem, name } = option;
+ fileItem.status = "ready";
+ if (fileItem.file) {
+ const formData = new FormData();
+ formData.append("file", fileItem.file);
+ formData.append("conversation_id", activeSessionId.value);
+ uploadWithoutKb(formData).then((res) => {
+ // console.log(res);
+ if (res.code == 200) {
console.log(res);
- uploadList.value = [];
- if (res.code == 200) {
- console.log(res);
- loading1.value=false;
- }
- });
- }
+ console.log(uploadList.value);
+ fileItem.status = "done";
+ // uploadList.value = [];
+ } else {
+ fileItem.status = "error";
+ }
+ });
}
-}
-
+};
const DialogList = async () => {
@@ -385,10 +449,10 @@
});
console.log(dialogObj.type, "dialogObj");
if (dialogObj.type == 1) {
- agentType.value = '1';
+ agentType.value = "1";
querySessionList();
} else {
- agentType.value = '2';
+ agentType.value = "2";
queryAgentSessionList();
}
@@ -401,8 +465,8 @@
};
// 閲嶆柊鐢熸垚
const reGenerate = () => {
- let inputContent = sessionDetailList.value[sessionDetailList.value.length-2].content
- startChat(inputContent)
+ let inputContent = sessionDetailList.value[sessionDetailList.value.length - 2].content;
+ startChat(inputContent);
};
const sendMessage = async (event) => {
@@ -427,7 +491,7 @@
if (inputMsg.value) {
- startChat(inputMsg.value)
+ startChat(inputMsg.value);
inputMsg.value = "";
} else {
@@ -437,7 +501,7 @@
}
};
-const startChat = async(valMsg)=>{
+const startChat = async (valMsg) => {
chatDis.value = true;
loading.value = true;
sessionDetailList.value.push({
@@ -497,33 +561,33 @@
// querySessionList();
chatDis.value = false;
loading.value = false;
-}
+};
-const stopChat=async()=>{
+const stopChat = async () => {
// const { code, data } = await stopChatApi(activeSessionId.value);
// if (code === 200) {
// Message.success("宸插仠姝�");
// queryNewSessionDetail(activeSessionId.value);
// }
isStopChat.value = true;
- console.log('stopChat');
- console.log(displayedText.value, 'displayedText');
- console.log(sessionDetailList.value, 'sessionDetailList');
- let inputText = sessionDetailList.value[sessionDetailList.value.length-2].content
+ console.log("stopChat");
+ console.log(displayedText.value, "displayedText");
+ console.log(sessionDetailList.value, "sessionDetailList");
+ let inputText = sessionDetailList.value[sessionDetailList.value.length - 2].content;
// 鏁扮粍鍚堝苟
let lastArr = [{
content: inputText,
role: "user"
- },{
+ }, {
content: displayedText.value,
role: "assistant"
- }]
- sessionDetailList.value = sessionDetailList.value.splice(0, sessionDetailList.value.length-2).concat(lastArr);
- console.log(sessionDetailList.value, 'sessionDetailList2');
- console.log(chatObj, 'chatObj瀵硅薄');
+ }];
+ sessionDetailList.value = sessionDetailList.value.splice(0, sessionDetailList.value.length - 2).concat(lastArr);
+ console.log(sessionDetailList.value, "sessionDetailList2");
+ console.log(chatObj, "chatObj瀵硅薄");
chatObj.message = chatObj.message.concat(lastArr);
- // clearTimeout(timer!);
- // timer = null;
+ // clearTimeout(timer!);
+ // timer = null;
// const { code, data } = await addSessionApi(chatObj);
// if (data) {
// //鍋滄瀹氭椂鍣�
@@ -534,7 +598,7 @@
// }
-}
+};
const queryNewSessionDetail = async (id) => {
activeSessionId.value = id;
@@ -798,15 +862,17 @@
}
.chat_bottom {
- display: flex;
- align-items: center;
+ //display: flex;
+ //align-items: center;
width: 78%;
margin: 0 auto;
+ position: relative;
+
.center-bottom {
- // position: absolute;
- // width: 90%;
- // bottom: 20px;
- // left: 5%;
+ //position: absolute;
+ //width: 100%;
+ //bottom: 20px;
+ //left: 5%;
background: #fff;
border: 1px solid #00000014;
border-radius: 24px;
@@ -823,7 +889,7 @@
.btn-send {
position: absolute !important;
right: 10px;
- top: 110px;
+ top: 90px;
z-index: 10;
}
@@ -948,7 +1014,12 @@
transition: all 0.1s ease;
font-size: 12px;
}
+
.action:hover {
background: var(--color-fill-3);
}
+
+:deep(.arco-upload-list-item-operation) {
+ //display: none;
+}
</style>
--
Gitblit v1.8.0