From ae69b91e45992be0e38c7b1c205c83f83243bbb7 Mon Sep 17 00:00:00 2001 From: liudong <liudong> Date: 星期三, 07 八月 2024 14:20:55 +0800 Subject: [PATCH] 知识库页面修改 --- src/views/dmx/knowledgeLib/index.vue | 273 +++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 186 insertions(+), 87 deletions(-) diff --git a/src/views/dmx/knowledgeLib/index.vue b/src/views/dmx/knowledgeLib/index.vue index 4a274b3..a85dd5e 100644 --- a/src/views/dmx/knowledgeLib/index.vue +++ b/src/views/dmx/knowledgeLib/index.vue @@ -8,10 +8,10 @@ :placeholder="$t('cardList.searchInput.placeholder')" style="width: 130px;" /> - <addKnow @knowledgeData="knowledgeData"></addKnow> + <addKnow @getknowledge="getknowledge" @getKbdetail="getKbdetail"></addKnow> </div> <div class="lf-container-down"> - <div class="tabs"> + <a-scrollbar style="height:56rem;overflow: auto;"> <div class="tab" v-for="(tab, index) in tabs" @@ -29,11 +29,11 @@ </template> </a-popover> </div> + </a-scrollbar> </div> - </div> </div> - <div class="rt-container"> - <a-tabs default-active-key="1"> + <div class="rt-container" v-if="tabs.length > 0"> + <a-tabs :activeKey="activeKey" @change="handleTabChange"> <a-tab-pane key="1" :title= "t('dmx.list.DataSet')"> <div class="rt-container-main"> <a-card ref="account" class="general-card" title="" style="padding-top: 20px"> @@ -50,9 +50,13 @@ <a-input-search :placeholder="$t('cardList.searchInput.placeholder')" style="width: 200px;margin-right: 10px" + v-model="keywords" + @change="search" /> - <!-- 鏂板缓--> - <add :kbobj="kbobj" @changeFetchData="changeFetchData"/> + <!--鏂板缓--> + <span> + <add :kbobj="kbobj" @changeFetchData="changeFetchData"/> + </span> </a-col> </a-row> </a-form> @@ -88,7 +92,7 @@ <!-- {{ $t('searchTable.operation.download') }}--> <!-- </a-button>--> <a-tooltip :content="$t('searchTable.actions.refresh')"> - <div class="action-icon" @click="search" + <div class="action-icon" ><icon-refresh size="18" /></div> </a-tooltip> @@ -174,34 +178,41 @@ <template #run="{ record }"> <div style="display: flex;align-items: center;"> <div style="width: 100px"> + <a-popover title="Title" v-if="record.run == '4'"> + <a-tag :loading="record.loading" :color="'blue'" border>{{$t('dmx.list.complete')}}</a-tag> + <template #content> + <p></p> + </template> + </a-popover> <a-popover title="Title" v-if="record.run == '3'"> <a-tag :loading="record.loading" :color="'blue'" border>{{$t('dmx.list.complete')}}</a-tag> <template #content> - <p>Here is the text content</p> + <p></p> </template> </a-popover> <a-popover title="Title" v-if="record.run == '1'"> <a-tag :loading="record.loading" :color="'blue'" border>{{$t('dmx.list.complete')}}</a-tag> <template #content> - <p>Here is the text content</p> + <p></p> </template> </a-popover> <a-popover title="Title" v-if="record.run == '2'"> <a-tag :loading="record.loading" :color="'gold'" border>{{$t('dmx.list.cancel')}}</a-tag> <template #content> - <p>Here is the text content</p> + <p></p> </template> </a-popover> <a-popover title="Title" v-if="record.run == '0'"> <a-tag :loading="record.loading" :color="'green'" border>{{$t('dmx.list.NotStarted')}}</a-tag> <template #content> - <p>Here is the text content</p> + <p></p> </template> </a-popover> </div> <div > <a-button type="text" size="large" @click="run(record)" :loading="record.loading"> <template #icon> + <icon-sync v-if="record.run == '4'"/> <icon-sync v-if="record.run == '3'"/> <icon-sync v-if="record.run == '2'"/> <icon-sync style="color: green" v-if="record.run == '1'"/> @@ -221,11 +232,18 @@ </template> </a-button> </a-popconfirm> - <a-button type="text" size="small"> + <a-button type="text" size="small" @click="onDownloadDocument(record)"> <template #icon> <icon-download /> </template> </a-button> + + <a-button type="text" size="small" @click="seeload(record)"> + <template #icon> + <icon-eye /> + </template> + </a-button> + </template> </a-table> </a-card> @@ -242,44 +260,50 @@ </div> </a-tab-pane> </a-tabs> - <div v-if="detailsShow" class="details"> - <div class="details-header"> - <div style="display: flex;align-items: center"> - <span><icon-arrow-left size="20px" style="cursor: pointer;color: #0960bd;margin: 10px" @click="goBackClick" /></span> - <icon-file style="color: #0960bd;margin-right: 4px;" /> - <span style="">123.docx</span> - </div> - <div style="display: flex; align-items: center;"> - <a-radio-group v-model="position" type="button" style="margin-right: 10px"> - <a-radio value="top">{{'dmx.list.EntireArticle'}}</a-radio> - <a-radio value="right">{{'dmx.list.omit'}}</a-radio> - </a-radio-group> - <a-popover position="bottom"> - <a-button type="outline" class="button" style="margin-right: 10px">{{'dmx.list.batch'}} <icon-down style="margin-left: 4px" /></a-button> - <template #content> - <p>Here is the text content</p> - <p>Here is the text content</p> - </template> - </a-popover> - <a-button type="outline" class="button" style="margin-right: 10px"> - <template #icon> - <icon-search /> - </template> - </a-button> - <a-popover position="bottom"> - <a-button type="outline" class="button" style="margin-right: 10px"><icon-sort /></a-button> - <template #content> - <p>Here is the text content</p> - <p>Here is the text content</p> - </template> - </a-popover> - <addDetails></addDetails> - </div> - </div> - <a-divider style="margin-top: 10px" /> - </div> +<!-- <div v-if="detailsShow" class="details">--> +<!-- <div class="details-header">--> +<!-- <div style="display: flex;align-items: center">--> +<!-- <span><icon-arrow-left size="20px" style="cursor: pointer;color: #0960bd;margin: 10px" @click="goBackClick" /></span>--> +<!-- <icon-file style="color: #0960bd;margin-right: 4px;" />--> +<!-- <span style="">123.docx</span>--> +<!-- </div>--> +<!-- <div style="display: flex; align-items: center;">--> +<!-- <a-radio-group v-model="position" type="button" style="margin-right: 10px">--> +<!-- <a-radio value="top">{{'dmx.list.EntireArticle'}}</a-radio>--> +<!-- <a-radio value="right">{{'dmx.list.omit'}}</a-radio>--> +<!-- </a-radio-group>--> +<!-- <a-popover position="bottom">--> +<!-- <a-button type="outline" class="button" style="margin-right: 10px">{{'dmx.list.batch'}} <icon-down style="margin-left: 4px" /></a-button>--> +<!-- <template #content>--> +<!-- <p>Here is the text content</p>--> +<!-- <p>Here is the text content</p>--> +<!-- </template>--> +<!-- </a-popover>--> +<!-- <a-button type="outline" class="button" style="margin-right: 10px">--> +<!-- <template #icon>--> +<!-- <icon-search />--> +<!-- </template>--> +<!-- </a-button>--> +<!-- <a-popover position="bottom">--> +<!-- <a-button type="outline" class="button" style="margin-right: 10px"><icon-sort /></a-button>--> +<!-- <template #content>--> +<!-- <p>Here is the text content</p>--> +<!-- <p>Here is the text content</p>--> +<!-- </template>--> +<!-- </a-popover>--> +<!-- <addDetails></addDetails>--> +<!-- </div>--> +<!-- </div>--> +<!-- <a-divider style="margin-top: 10px" />--> +<!-- </div>--> </div> </div> + <a-modal title=" " v-model:visible="visible" :footer="false" fullscreen> +<!-- <docx v-if="documenttype=='docx'" previewSrc="http://192.168.20.116:1080/v1/document/get/405c3efa4d8c11ef97560242ac120006"></docx>--> + <docx v-if="documenttype=='docx'" :previewSrc="previewSrc"></docx> + <excel v-if="documenttype=='excel'" :previewSrc="previewSrc"></excel> + <txtPdf v-if="documenttype=='txtPdf'" :previewSrc="previewSrc"></txtPdf> + </a-modal> </div> </template> @@ -294,7 +318,7 @@ queryKbDocumentList, deleteKnow, queryKbdetail, - queryKbtenantInfo, kbdocumentrm, kbdocumentchangeparser, kbdocumentrun, kbdocumentchangeStatus + queryKbtenantInfo, kbdocumentrm, kbdocumentchangeparser, kbdocumentrun, kbdocumentchangeStatus,downloadFile } from "@/api/kbList"; import { Pagination } from '@/types/global'; import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface'; @@ -307,11 +331,11 @@ import config from '@/views/dmx/knowledgeLib/config.vue' import test from '@/views/dmx/knowledgeLib/test.vue' import tool from '@/views/dmx/knowledgeLib/tool.vue' - import addDetails from '@/views/dmx/knowledgeLib/addDetails.vue' + import docx from '@/views/dmx/knowledgeLib/components/docx.vue' + import excel from '@/views/dmx/knowledgeLib/components/excel.vue' + import txtPdf from '@/views/dmx/knowledgeLib/components/txtPdf.vue' import { Message } from "@arco-design/web-vue"; import { parseTime } from "@/utils"; - import { usePinia } from "@/store"; - const store = usePinia(); type SizeProps = 'mini' | 'small' | 'medium' | 'large'; type Column = TableColumnData & { checked?: true }; const account = ref(null) @@ -334,14 +358,19 @@ const size = ref<SizeProps>('medium'); let visible = ref(false) + let keywords = ref('') + let activeKey = ref('1') let detailsShow = ref(false) let selectedTab = ref(0) let testForm = ref(null) let configForm = ref(null) + let documenttype = ref('docx') + let previewSrc = ref('') let kbId = ref('') let kbobj = reactive({}) let kbdetail = reactive({}) let parser_ids = reactive({}) + let seeObj = reactive({}) let kbtenantInfo = reactive({ "asr_id": "paraformer-realtime-8k-v1", "embd_id": "BAAI/bge-large-zh-v1.5", @@ -361,13 +390,12 @@ // console.log(item.id); kbobj= item; kbId = kbobj.id; - testForm.value.changekbid(kbId); - configForm.value.changekbObj(kbobj); fetchData({ kb_id: kbobj.id, page: 1, page_size: 20 }) + getKbdetail(kbobj.id) } const basePagination: Pagination = { @@ -430,8 +458,8 @@ title: t('dmx.column.Operate'), dataIndex: 'action', slotName: 'action', - width: 150, - minWidth: 150, + width: 200, + minWidth: 200, }, ]); const contentTypeOptions = computed<SelectOptionData[]>(() => [ @@ -495,13 +523,6 @@ pagination.current = params.page; pagination.total = data.data.total; - // 鏌ヨ鐭ヨ瘑搴撹鎯� - kbdetail = await queryKbdetail({ - kb_id:params.kb_id, - }); - - - } } catch (err) { @@ -512,11 +533,12 @@ }; const search = () => { - alert(1) - // fetchData({ - // ...basePagination, - // ...formModel.value, - // }); + fetchData({ + kb_id: kbobj.id, + page: 1, + page_size: 20, + keywords:keywords.value + }) }; const handleClick = ()=>{ @@ -539,13 +561,15 @@ if(tabs.value.length>0 && tabs.value[0]){ kbobj = tabs.value[0] kbId = kbobj.id; - testForm.value.changekbid(kbId); - configForm.value.changekbObj(kbobj); + activeKey.value = '1'; fetchData({ kb_id: kbobj.id, page: 1, page_size: 20 }) + getKbdetail(kbobj.id) + }else{ + } // renderData.value = data.list; // console.log(renderData, 'renderData'); @@ -557,6 +581,45 @@ setLoading(false); } }; + + + const getKbdetail = async (kb_id) => { + // 鏌ヨ鐭ヨ瘑搴撹鎯� + const data = await queryKbdetail({ + kb_id:kb_id, + }); + kbdetail = data.data; + testForm.value.changekbid(kbdetail.id); + configForm.value.changekbObj(kbdetail); + }; + + + + +const getknowledge = async (id) => { + setLoading(true); + try { + const { data } = await queryKbList({ page: 1, page_size: 20 }); + console.log(data, '鏌ヨ鐭ヨ瘑搴撳垪琛�'); + tabs.value = data; + if(tabs.value.length>0){ + // 瀹氫綅鍒版柊澧炵殑鐭ヨ瘑搴撳崟鍏� + selectedTab.value = tabs.value.findIndex(item=>item.id==id); + getKbdetail(id) // 鑾峰彇璇︽儏 + activeKey.value = '3'; + } + + + + + + + } catch (err) { + // you can report use errorHandler or other + } finally { + setLoading(false); + } +}; const deleteKnowledge = async (id) => { let data = await deleteKnow({ @@ -570,7 +633,11 @@ const reset = () => { formModel.value = generateFormModel(); }; - + function handleTabChange(key: string) { + // 澶勭悊鏍囩鏀瑰彉浜嬩欢 + console.log('Changed to tab:', key); + activeKey.value=key; + } const handleSelectDensity = ( val: string | number | Record<string, any> | undefined, e: Event @@ -655,6 +722,33 @@ }) } } + const onDownloadDocument = async (record)=>{ + console.log(record); + downloadFile({ + url: `/api/v1/document/get/${record.id}`, + filename: record.name, + }); + } +const seeload = async (row)=>{ + Object.assign(seeObj, row) + // console.log(seeObj.name, 'seeObj'); + let type = row.name.split('.')[1]; + console.log(type); + if(type=='pdf'){ + documenttype.value = 'txtPdf' + }else if(type=='docx'){ + documenttype.value = 'docx' + }else if(type=='xlsx'){ + documenttype.value = 'excel' + }else if(type=='txt'){ + documenttype.value = 'txtPdf' + }else { + return false + } + previewSrc.value = `${import.meta.env.VITE_API_BASE_URL}/v1/document/get/${row.id}` + visible.value = true; + +} const handleChangeStatus = async (row)=>{ console.log(row); @@ -681,11 +775,6 @@ doc_ids: [row.id], run: run }) - // let data = await kbdocumentchangeparser({ - // parser_id: row.parser_id, - // doc_id: row.id, - // parser_config: row.parser_config, - // }) if(data.code == 0){ Message.success('瑙f瀽鎴愬姛'); row.run = '3'; @@ -739,28 +828,38 @@ padding: 0 20px 20px 20px; .main-container{ display: flex; + width: 100%; + height: 100%; .lf-container{ display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; - background: #ffffff; + //background: #ffffff; + background: var(--color-bg-2); width: 200px; .lf-container-top{ display: flex; + margin: 10px 0; } .lf-container-down{ display: flex; flex-direction: column; + box-sizing: border-box; width: 90%; - height: calc(100% - 5rem); - border: 1px solid #eeeeee; - overflow: auto; - padding: 10px; - .tabs .tab { + //height: 56rem; + border: 1px solid var(--color-fill-3); + //padding: 10px; + margin-bottom: 10px; + //.tabs{ + // width: 100%; + // height: 100%; + // overflow: auto; + //} + .tab { cursor: pointer; box-sizing: border-box; - margin: 10px 0; + margin: 10px 10px; padding:0 10px; color: rgba(0, 0, 0, 0.88); font-size: 14px; @@ -772,12 +871,12 @@ border: 1px solid #f0f0f0; border-radius: 8px; } - .tabs .tab:hover { + .tab:hover { border: 1px solid #ffffff; 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); } - .tabs .tab.active { + .tab.active { border: 1px solid #e8e8ea; background: #e8e8ea; cursor: pointer; @@ -789,7 +888,7 @@ //background: #626aea; margin-left: 20px; width: calc(100% - 200px); - height: calc(100% - 5rem); + height: 56rem; .rt-container-main{ height: 76vh; } -- Gitblit v1.8.0