From bdba8fa1c5b2d8223e5ad26ebc9dbe6b9a5579b2 Mon Sep 17 00:00:00 2001 From: yangyin <1850366751@qq.com> Date: 星期二, 12 十一月 2024 10:08:10 +0800 Subject: [PATCH] 修改知识库编辑 --- src/views/project/yw/dataManage/knowledge/Knowledge.vue | 312 +++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 263 insertions(+), 49 deletions(-) diff --git a/src/views/project/yw/dataManage/knowledge/Knowledge.vue b/src/views/project/yw/dataManage/knowledge/Knowledge.vue index 9432e7a..8a16c61 100644 --- a/src/views/project/yw/dataManage/knowledge/Knowledge.vue +++ b/src/views/project/yw/dataManage/knowledge/Knowledge.vue @@ -1,67 +1,187 @@ <template> - <div class="h100 overflow-y-auto p-[16px]"> + <div class="h100 overflow-y-auto"> <div class="flex flex-col h100"> - <div class="text-[16px] font-[500] h-[22px]">鐭ヨ瘑搴撶鐞�</div> - <div class="mx-0 mt-[12px] mb-[16px] flex justify-between items-center"> - <el-input - v-model="state.knowledgeBaseForm.Name" - style="width: 230px; margin-right: 10px; background: #ffffff; border-radius: 6px; transition: all 0.2s" - placeholder="鎼滅储鐭ヨ瘑搴撳悕绉�" - clearable - :suffix-icon="Search" - ></el-input> - <el-button icon="ele-Plus" @click="createKnowledgeBase()" type="primary"> 鍒涘缓鐭ヨ瘑搴� </el-button> - </div> - <div class="flex flex-wrap gap-[12px]"> - <div class="flex flex-wrap gap-3 overflow-x-auto set_item_jel" v-for="item in state.knowledgeBaseList" :key="item.id"> - <img :src="knowledgeLeft" class="set_item_img" /> - <div class="set_item_content"> - <div class="flex items-center"> - <div class="mr-[10px] text-[14px] font-[500] h-[22px]">{{ item.title }}</div> - <span class="set_desc_text"> - <span class="set_desc_icon ywifont ywicon-wendang"> </span> - 1涓煡璇� - </span> - <span class="set_desc_text"> - <span class="set_desc_icon ywifont ywicon-wendang"> </span> - {{ item.create_time }}鏇存柊 - </span> + <el-row class="h100"> + <el-col :span="4" class="h100 px-[10px]"> + <LeftTreeByMgr + v-loading="treeLoading" + class="h100 p-[20px]" + ref="leftTreeRef" + :defaultProps="{ + id: 'group_id', + label: 'group_name', + children: 'children', + }" + :treedata="listTreeData" + title-name="鍒嗙粍鍒楄〃" + :show-more-operate="false" + :show-add="false" + defaultExpandAll + :current-node-key="currentListID" + :node-icon="() => 'ele-Document'" + @click="handleClickNode" + > + </LeftTreeByMgr> + </el-col> + <el-col :span="20" class="h100 p-[10px]"> + <div class="text-[16px] font-[500] h-[22px]">鐭ヨ瘑搴撶鐞�</div> + <div class="mx-0 mt-[12px] mb-[16px] flex justify-between items-center"> + <div class="flex-col"> + <el-input + v-model="knowledgeBaseForm.title" + style="width: 230px; margin-right: 10px; background: #ffffff; border-radius: 6px; transition: all 0.2s" + placeholder="鎼滅储鐭ヨ瘑搴撳悕绉�" + clearable + ></el-input> + <el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 鏌ヨ </el-button> + <el-button icon="ele-Refresh" @click="resetQuery">閲嶇疆 </el-button> + </div> + <el-button icon="ele-Plus" @click="createKnowledgeBase()" type="primary"> 鍒涘缓鐭ヨ瘑搴� </el-button> + </div> + <div class="flex flex-wrap gap-[12px]"> + <div class="flex flex-wrap gap-3 overflow-x-auto set_item_jel" v-for="item in displayTableData" :key="item.id"> + <img :src="knowledgeLeft" class="set_item_img" /> + <div class="set_item_content"> + <div class="flex items-center"> + <div class="mr-[10px] text-[14px] font-[500] w-[100px]">{{ item.title }}</div> + <div class="flex flex-wrap gap-1"> + <span class="set_desc_text"> + <span class="set_desc_icon ywifont ywicon-wendang"> </span> + 1涓煡璇� + </span> + <span class="set_desc_text"> + <span class="set_desc_icon ywifont ywicon-fenshu_an"> </span> + {{ item.scope }} + </span> + <span class="set_desc_text"> + <span class="set_desc_icon ywifont ywicon-cshy-shizhong"> </span> + {{ item.create_time }}鏇存柊 + </span> + <span + :class="{ + 'text-orange-500': item.publish === SupervisorPublished.N, + 'text-green-500': item.publish === SupervisorPublished.Y, + }" + class="text-[12px]" + > + {{ supervisorPublishedMap[item.publish] }} + </span> + </div> + </div> + </div> + <div class="set_btn_group"> + <el-button + link + class="text-[12px]" + @click="publishKnowledgeBase(item)" + :style="{ color: item.publish === SupervisorPublished.Y ? '#f97316' : '#22c55e' }" + >{{ item.publish === SupervisorPublished.Y ? '涓嬫灦' : '鍙戝竷' }} + </el-button> + <el-divider direction="vertical" /> + <el-button link class="text-[12px] text-[#686682]" @click="viewKnowledgeBase(item)">鏌ョ湅 </el-button> + <el-divider direction="vertical" /> + <el-button link class="text-[12px] text-[#686682]" @click="openChatTest(item)">瀵硅瘽娴嬭瘯 </el-button> + <el-divider direction="vertical" /> + <el-button link class="text-[12px] text-[#686682]" @click="editKnowledgeBase(item)">缂栬緫 </el-button> + <el-divider direction="vertical" /> + <el-button link class="text-[12px]" @click="deleteKnowledgeBase(item)" style="color: #f00">鍒犻櫎 </el-button> + </div> </div> </div> - <div class="set_btn_group"> - <el-button link class="text-[12px] text-[#686682]">鏌ョ湅 </el-button> - <el-divider direction="vertical" /> - <el-button link class="text-[12px] text-[#686682]">鍛戒腑娴嬭瘯 </el-button> - <el-divider direction="vertical" /> - <el-button link class="text-[12px] text-[#686682]">缂栬緫 </el-button> - <el-divider direction="vertical" /> - <el-button link class="text-[12px] text-[#686682]" @click="deleteKnowledgeBase(item)">鍒犻櫎 </el-button> + </el-col> + </el-row> + </div> + <div + v-if="chatTestIsShow" + ref="draggableChatRef" + :style="style" + class="fixed z-50 w-[700px] h-[800px] flex flex-col bg-[rgb(239,244,253)] right-0 bottom-0 rounded-lg" + > + <div ref="chatDragHandlerRef" class="flex-0"> + <div class="flex items-center justify-between py-2 px-4"> + <div class="font-bold cursor-move"> + WI姘村姟鏅鸿兘绠″鈥斺�斻�恵{ chatTestMapRow?.title }}銆戞祴璇� + <!-- <img src="/static/images/logo/logo-mini.svg" width="10" height="10" /> --> </div> + <i class="ywifont ywicon-guanbi font-[10px] font-bold cursor-pointer" @click="closeChatTest"></i> </div> </div> + <Chat ref="chatRef" class="flex-auto px-2" :questionApi="questionAi"> </Chat> </div> </div> </template> - <script setup lang="ts"> -import { Search } from '@element-plus/icons-vue'; +import { useDraggable } from '@vueuse/core'; +import axios, { CancelTokenSource } from 'axios'; import { ElMessage, ElMessageBox } from 'element-plus'; -import { onMounted, reactive } from 'vue'; +import { computed, nextTick, onMounted, ref } from 'vue'; import { useRouter } from 'vue-router'; -import { delete_docvector_name, get_docvector_list } from '/@/api/knowledge/docvector'; +import * as agentGroupApi from '/@/api/ai/agentGroup'; +import { + check_docvector_validate, + delete_docvector_name, + get_docvector_list, + publish_docvector_name, +} from '/@/api/knowledge/docvector'; +import Chat from '/@/components/chat/Chat.vue'; +import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue'; +import { useQueryTable } from '/@/hooks/useQueryTable'; import mittBus from '/@/utils/mitt'; +import { useCompRef } from '/@/utils/types'; +import { convertListToTree } from '/@/utils/util'; +import { SupervisorPublished, supervisorPublishedMap } from '/@/views/project/yw/lowCode/sqlAmis/types'; +import { OptClassificationMap, classificationEnum } from '/@/views/types/metrics'; import knowledgeLeft from '/static/images/knowledge/data_type_1.png'; const router = useRouter(); -const state = reactive({ - knowledgeBaseForm: { - Name: '', - }, - knowledgeBaseList: [], +//#region ====================== 宸︿晶鏍戞暟鎹紝tree init ====================== +const leftTreeRef = useCompRef(LeftTreeByMgr); +const treeLoading = ref(false); +const listData = ref([]); +const currentListID = computed(() => currentNode.value?.group_id); +const currentNode = ref(null); +const listTreeData = computed(() => { + const byParentData = convertListToTree(listData.value, { + ID: 'group_id', + ParentID: 'p_group_id', + Children: 'children', + }); + const result = []; + byParentData.forEach((item) => { + if (item.group_type == OptClassificationMap[classificationEnum.Knowledge]) { + result.push(item); + } + }); + return result; }); +const handleClickNode = (data) => { + nextTick(() => { + leftTreeRef.value?.treeRef.setCurrentKey(data.group_id); + }); + currentNode.value = data; + docvectorList(); +}; + +const getListTreeData = async () => { + const res = await agentGroupApi.getSceneGroupTreeByPost(); + listData.value = res.groups || []; + const firstListTreeNode = listTreeData.value[0]; + if (firstListTreeNode) { + handleClickNode(firstListTreeNode); + } else { + knowledgeBaseList.value = []; + currentNode.value = null; + } +}; +//#endregion +//#region ====================== 鑾峰彇鐭ヨ瘑搴搒heet鍒楄〃 ====================== +const knowledgeBaseList = ref([]); //鍒涘缓鐭ヨ瘑搴� const createKnowledgeBase = () => { router.push({ name: 'AddKnowledge', + query: { + group_id: currentListID.value, + }, }); }; //鑾峰彇鐭ヨ瘑搴撳垪琛� @@ -71,12 +191,12 @@ res.values.forEach((item) => { item.create_time = new Date(item.create_time).toLocaleString(); }); - state.knowledgeBaseList = res.values; + const filterDocData = res.values.filter((item) => item.group_id === currentListID.value); + knowledgeBaseList.value = filterDocData; } else { return ElMessage.error('鑾峰彇鍒楄〃绱㈠紩澶辫触' + (res?.json_msg ? `锛�${JSON.stringify(res.json_msg)}` : '')); } }; -//鍒犻櫎鐭ヨ瘑搴� const deleteKnowledgeBase = async (row) => { ElMessageBox.confirm(`纭畾鍒犻櫎褰撳墠鐨勭煡璇嗗簱锛氥��${row.title}銆�?`, '鎻愮ず', { confirmButtonText: '纭畾', @@ -88,15 +208,109 @@ }); if (res.json_ok) { ElMessage.success('鍒犻櫎鐭ヨ瘑搴撴垚鍔�'); - const index = state.knowledgeBaseList.findIndex((d) => d.id === row.id); - state.knowledgeBaseList.splice(index, 1); + const index = knowledgeBaseList.value.findIndex((d) => d.id === row.id); + knowledgeBaseList.value.splice(index, 1); } }); }; +//#endregion +//#region ====================== 瀵圭煡璇嗗簱杩涜缂栬緫鏌ョ湅鎿嶄綔 ====================== +const editKnowledgeBase = (row) => { + router.push({ + name: 'EditKnowledge', + query: { + knowledge_id: row.id, + knowledge_title: row.title, + knowledge_desc: row.desc, + knowledge_prompt: row.prompt, + knowledge_scope: row.scope, + }, + }); +}; +const viewKnowledgeBase = (row) => { + router.push({ + name: 'ViewKnowledge', + query: { + knowledge_id: row.id, + knowledge_title: row.title, + }, + }); +}; +//鍙戝竷 +const publishKnowledgeBase = async (row) => { + const res = await publish_docvector_name({ + knowlg_id: row.id, + publish: row.publish === SupervisorPublished.Y ? SupervisorPublished.N : SupervisorPublished.Y, + }); + if (res.json_ok) { + row.publish = row.publish === SupervisorPublished.Y ? SupervisorPublished.N : SupervisorPublished.Y; + ElMessage.success('鍚屾鎴愬姛'); + } +}; +//#endregion + +//#region ====================== 鎼滅储琛ㄦ牸锛屽琛ㄦ牸鎺掑簭 ====================== +const knowledgeBaseForm = ref({ + title: '', +}); +const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(knowledgeBaseList, knowledgeBaseForm, () => { + displayTableData.value = knowledgeBaseList.value; +}); +//#endregion +//#region ====================== Chat 娴嬭瘯 ====================== +const chatRef = useCompRef(Chat); +const chatTestMapRow = ref(null); +const chatTestIsShow = ref(false); +const openChatTest = (row) => { + chatTestMapRow.value = row; + chatTestIsShow.value = true; + nextTick(() => { + chatRef.value.clear(); + }); +}; +const closeChatTest = () => { + chatTestMapRow.value = null; + chatTestIsShow.value = false; +}; +const draggableChatRef = ref<HTMLElement | null>(null); +const chatDragHandlerRef = ref<HTMLDivElement>(null); +const chatDragContainerRef = ref<HTMLDivElement>(null); +const { x, y, style } = useDraggable(draggableChatRef, { + handle: chatDragHandlerRef, + initialValue: { + x: document.body.clientWidth / 2 - 350, + y: document.body.clientHeight / 2 - 400, + }, +}); +const questionAi = async (text, sourceObj: { source: CancelTokenSource }) => { + const currentSource = axios.CancelToken.source(); + sourceObj.source = currentSource; + const res = await check_docvector_validate( + { + knowlg_id: chatTestMapRow.value.id, + question: text, + }, + { + loading: false, + cancelToken: currentSource.token, + } + ); + return res; +}; +//#endregion onMounted(() => { - docvectorList(); + getListTreeData(); mittBus.on('addKnowledgeBaseObj', (obj) => { - state.knowledgeBaseList.push(obj); + knowledgeBaseList.value.push(obj); + }); + mittBus.on('updateKnowledgeBaseObj', (formValue) => { + const foundIndex = knowledgeBaseList.value.findIndex((item) => item.id === formValue.id); + if (foundIndex > -1) { + knowledgeBaseList.value[foundIndex] = { + ...knowledgeBaseList.value[foundIndex], + ...formValue, + }; + } }); }); </script> -- Gitblit v1.9.3