From ffdde4d7d6a1bfc071816e358942370bdfafbb9a Mon Sep 17 00:00:00 2001 From: liudong <liudong> Date: 星期二, 13 八月 2024 14:56:17 +0800 Subject: [PATCH] 智能体列表查询 --- src/views/dmx/knowledgeLib/index.vue | 1367 ++++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 920 insertions(+), 447 deletions(-) diff --git a/src/views/dmx/knowledgeLib/index.vue b/src/views/dmx/knowledgeLib/index.vue index 7531a6f..2e20544 100644 --- a/src/views/dmx/knowledgeLib/index.vue +++ b/src/views/dmx/knowledgeLib/index.vue @@ -8,27 +8,37 @@ :placeholder="$t('cardList.searchInput.placeholder')" style="width: 130px;" /> - <addKnow></addKnow> + <addKnow @getknowledge="getknowledge" @getKbdetail="getKbdetail"></addKnow> </div> - <div class="lf-container-down"> - <div class="tabs"> + <a-spin :loading="listloading" class="lf-container-down"> + <a-scrollbar style="height: calc(100vh - 300px); overflow: auto"> <div class="tab" v-for="(tab, index) in tabs" :key="index" - @click="selectTab(index)" + @click="selectTab(index,tab)" :class="{ 'active': selectedTab === index }" > - {{ tab }} + {{ tab.name }} + <a-popover position="bl"> + <icon-more :style="{position: 'absolute',top:'10px',right:'10px'}" /> + <template #content> + <!-- <a-popconfirm content="纭畾鍒犻櫎鍚�?" @ok="deleteKnowledge(tab.id)" type="warning">--> + <!-- <span style="cursor: pointer;color: #4977ba;font-size: 12px"><icon-delete style="font-size: 14px"/>鍒犻櫎</span>--> + <!-- </a-popconfirm>--> + <span style="cursor: pointer;color: #4977ba;font-size: 12px" @click="deleteKnowledge(tab.id)"><icon-delete + style="font-size: 14px" />鍒犻櫎</span> + </template> + </a-popover> </div> - </div> - </div> + </a-scrollbar> + </a-spin> </div> - <div class="rt-container"> - <a-tabs default-active-key="1"> - <a-tab-pane key="1" :title= "t('dmx.list.DataSet')"> - <div class="rt-container-main"> - <a-card ref="account" class="general-card" :title="$t('')" style="padding-top: 20px"> + <div class="rt-container" v-if="tabs.length > 0"> + <a-tabs :active-key="activeKey" @change="handleTabChange"> + <a-tab-pane key="1" :title="t('dmx.list.DataSet')"> + <a-scrollbar class="rt-container-main" :style="{height: documentHeight + 70 + 'px'}" style="overflow: auto"> + <a-card ref="account" class="general-card" title="" style="padding-top: 20px"> <a-row> <a-col :flex="1" :span="12"> <a-form @@ -38,13 +48,71 @@ label-align="left" > <a-row :gutter="16"> - <a-col :span="24" style="margin-bottom: 10px;display: flex;justify-content: right"> - <a-input-search - :placeholder="$t('cardList.searchInput.placeholder')" - style="width: 200px;margin-right: 10px" - /> - <!-- 鏂板缓--> - <add /> + <a-col :span="24" style="margin-bottom: 10px;display: flex;justify-content: space-between"> + <a-popover + position="bottom" + v-model="checkedArr.length" + trigger="click" + > + <a-button + :disabled="checkedArr.length == 0" + border + >鎵归噺 + <icon-down style="margin-left: 4px" /> + </a-button> + <template #content> + <p> + <a-button + type="text" + class="button" + style="color: #2a2a2b" + @click="addBlock(1)" + > + <template #icon> + <icon-check-circle /> + </template> + 鍚姩 + </a-button> + </p> + <p> + <a-button + type="text" + class="button" + style="color: #2a2a2b" + @click="addBlock(2)" + > + <template #icon> + <icon-close-circle /> + </template> + 鍙栨秷 + </a-button> + </p> + <a-divider style="margin: 10px 0" /> + <p> + <a-button + type="text" + class="button" + style="color: #2a2a2b" + @click="addBlock(3)" + > + <template #icon> + <icon-delete /> + </template> + 鍒犻櫎 + </a-button> + </p> + </template> + </a-popover> + <span> + <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> </a-col> </a-row> </a-form> @@ -80,13 +148,17 @@ <!-- {{ $t('searchTable.operation.download') }}--> <!-- </a-button>--> <a-tooltip :content="$t('searchTable.actions.refresh')"> - <div class="action-icon" @click="search" - ><icon-refresh size="18" - /></div> + <div class="action-icon" + > + <icon-refresh size="18" + /> + </div> </a-tooltip> <a-dropdown @select="handleSelectDensity"> <a-tooltip :content="$t('searchTable.actions.density')"> - <div class="action-icon"><icon-line-height size="18" /></div> + <div class="action-icon"> + <icon-line-height size="18" /> + </div> </a-tooltip> <template #content> <a-doption @@ -144,511 +216,912 @@ :bordered="false" :size="size" @page-change="onPageChange" - :scroll="{ y: 580 }" + :max-height='documentHeight' + :scroll="{x: 1000}" + :row-selection="{ + type: 'checkbox', + showCheckedAll: true, + onlyCurrent: false, + }" + @select-all="selectTabAll" + @selection-change="selectTabChange" > <template #name="{ record }"> -<!-- <icon-file style="color: #0960bd;margin-right: 4px;" />--> + <!-- <icon-file style="color: #0960bd;margin-right: 4px;" />--> <icon-file style="margin-right: 4px;" /> -<!-- <span style="color: #0960bd;cursor: pointer" @click="fileClick">--> -<!-- {{record.name}}--> -<!-- </span>--> - {{record.name}} + <!-- <span style="color: #0960bd;cursor: pointer" @click="fileClick">--> + <!-- {{record.name}}--> + <!-- </span>--> + {{ record.name }} </template> - <template #staue="{ record }"> - <a-switch :model-value="record.staue"/> + <template #create_time="{ record }"> + <span>{{ parseTime(record.create_time) }}</span> </template> + <!-- <template #parser_id="{ record }">--> + <!-- <span>{{ parser_ids[record.parser_id]}}</span>--> + <!-- </template>--> <template #status="{ record }"> + <a-switch v-model="record.status" size="small" checked-value="1" unchecked-value="0" + @change="handleChangeStatus(record)" /> + </template> + <template #run="{ record }"> <div style="display: flex;align-items: center;"> <div style="width: 100px"> - <a-popover title="Title"> - <a-tag :color="'blue'" border>{{$t('dmx.list.complete')}}</a-tag> + <a-popover title="" v-if="record.run == '4'"> + <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"> - <a-tag :color="'gold'" border>{{$t('dmx.list.cancel')}}</a-tag> + <a-popover 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"> - <a-tag :color="'green'" border>{{$t('dmx.list.NotStarted')}}</a-tag> + <a-popover title="" v-if="record.run == '1'"> + <a-tag :loading="record.loading" :color="'blue'" border>瑙f瀽涓�...</a-tag> <template #content> - <p>Here is the text content</p> + <p></p> + </template> + </a-popover> + <a-popover title="" v-if="record.run == '2'"> + <a-tag :loading="record.loading" :color="'gold'" border>{{ $t("dmx.list.cancel") }}</a-tag> + <template #content> + <p></p> + </template> + </a-popover> + <a-popover title="" v-if="record.run == '0'"> + <a-tag :loading="record.loading" :color="'green'" border>{{ $t("dmx.list.NotStarted") }} + </a-tag> + <template #content> + <p></p> </template> </a-popover> </div> <div> - <a-button type="text" size="large"> + <a-button type="text" size="large" @click="run(record)" :loading="record.loading"> <template #icon> - <icon-sync /> - </template> - </a-button> - <a-button type="text" size="large"> - <template #icon> - <icon-sync style="color: green" /> - </template> - </a-button> - <a-button type="text" size="large"> - <template #icon> - <icon-play-circle style="color: green" /> + <icon-sync v-if="record.run == '4'" /> + <icon-sync v-if="record.run == '3'" /> + <icon-sync style="color: green" v-if="record.run == '2'" /> + <a-button status="warning" shape="circle" v-if="record.run == '1'" size="small"> + <icon-close /> + </a-button> + <icon-play-circle style="color: green" v-if="record.run == '0'" /> </template> </a-button> </div> </div> </template> - <template #operations="{ record }" > - <tool/> - <edit/> - <a-popconfirm :content="t('dmx.list.EnsureDelete')" type="warning" @ok="deleteItem(record)"> - <a-button v-permission="['admin']" type="text" size="small"> + <template #action="{ record }"> + <tool :kbtenantInfo="kbtenantInfo" :item="record" :kbdetail="kbdetail" /> + <edit :item="record" @upTabdateItem="upTabdateItem" /> + <a-popconfirm :content="'纭畾鍒犻櫎鍚�'" type="warning" @ok="deleteItem(record)"> + <a-button type="text" size="small" :disabled="record.run == '1'"> <template #icon> <icon-delete /> </template> </a-button> </a-popconfirm> - <a-button type="text" size="small"> + <a-button type="text" size="small" :disabled="record.run == '1'" + @click="onDownloadDocument(record)"> <template #icon> <icon-download /> </template> </a-button> + + <a-button type="text" size="small" :disabled="record.run == '1'" @click="previewArea(record)"> + <template #icon> + <icon-eye /> + </template> + </a-button> + </template> </a-table> </a-card> - </div> + </a-scrollbar> </a-tab-pane> <a-tab-pane key="2" :title="t('dmx.list.test')"> - <div class="rt-container-main"> - <test ></test> - </div> + <a-scrollbar class="rt-container-main" :style="{height: documentHeight + 70 + 'px'}" style="overflow: auto"> + <test ref="testForm"></test> + </a-scrollbar> </a-tab-pane> <a-tab-pane key="3" :title="t('dmx.list.disposition')"> - <div class="rt-container-main"> - <config ></config> - </div> + <a-scrollbar class="rt-container-main" :style="{height: documentHeight + 70 + 'px'}" style="overflow: auto"> + <config ref="configForm" :kbtenantInfo="kbtenantInfo" @cancleConfig="cancleConfig" + @saveConfig="saveConfig"></config> + </a-scrollbar> </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 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> <script lang="ts" setup> - import { computed, ref, reactive, watch, nextTick } from 'vue'; - import { useI18n } from 'vue-i18n'; - import useLoading from '@/hooks/loading'; - import { queryPolicyList, PolicyRecord, PolicyParams } from '@/api/list'; - import { Pagination } from '@/types/global'; - import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface'; - import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'; - import cloneDeep from 'lodash/cloneDeep'; - import Sortable from 'sortablejs'; - import add from '@/views/dmx/knowledgeLib/add.vue' - import edit from '@/views/dmx/knowledgeLib/edit.vue' - import addKnow from '@/views/dmx/knowledgeLib/addKnow.vue' - 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 { deleteAccount } from "@/api/account"; - type SizeProps = 'mini' | 'small' | 'medium' | 'large'; - type Column = TableColumnData & { checked?: true }; - const account = ref(null) - const generateFormModel = () => { - return { - number: '', - name: '', - contentType: '', - filterType: '', - createdTime: [], - status: '', - }; +import { computed, ref, reactive, watch, nextTick, onBeforeMount, onMounted } from "vue"; +import { useI18n } from "vue-i18n"; +import useLoading from "@/hooks/loading"; +import { + queryKbList, + PolicyRecord, + PolicyParams, + queryKbDocumentList, + deleteKnow, + queryKbdetail, + queryKbtenantInfo, + kbdocumentrm, + kbdocumentchangeparser, + kbdocumentrun, + kbdocumentchangeStatus, + downloadFile, + chunkSwitch +} from "@/api/kbList"; +import { Pagination } from "@/types/global"; +import type { SelectOptionData } from "@arco-design/web-vue/es/select/interface"; +import type { TableColumnData } from "@arco-design/web-vue/es/table/interface"; +import cloneDeep from "lodash/cloneDeep"; +import Sortable from "sortablejs"; +import add from "@/views/dmx/knowledgeLib/add.vue"; +import edit from "@/views/dmx/knowledgeLib/edit.vue"; +import addKnow from "@/views/dmx/knowledgeLib/addKnow.vue"; +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 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, Modal } from "@arco-design/web-vue"; +import { documentHeight, parseTime } from "@/utils"; +import { deleteLlm } from "@/api/model"; +import { userModelState } from "@/store"; + +let modelStore = userModelState(); +const httpUrl = modelStore.hrefUrl; +type SizeProps = "mini" | "small" | "medium" | "large"; +type Column = TableColumnData & { checked?: true }; +const account = ref(null); +const generateFormModel = () => { + return { + number: "", + name: "", + contentType: "", + filterType: "", + createdTime: [], + status: "" }; - const { loading, setLoading } = useLoading(true); - const { t } = useI18n(); - const renderData = ref<PolicyRecord[]>([]); - const formModel = ref(generateFormModel()); - const cloneColumns = ref<Column[]>([]); - const showColumns = ref<Column[]>([]); +}; +const { loading, setLoading } = useLoading(true); +const { t } = useI18n(); +const renderData = ref([]); +const formModel = ref(generateFormModel()); +const cloneColumns = ref([]); +const showColumns = ref<Column[]>([]); - const size = ref<SizeProps>('medium'); - let visible = ref(false) - let detailsShow = ref(false) - let selectedTab = ref(0) - let tabs = reactive(['娉曞緥鐭ヨ瘑搴�', '鏀垮姟鐭ヨ瘑搴�', '鍖诲鐭ヨ瘑搴�', '鍏朵粬鐭ヨ瘑搴�']) +const size = ref<SizeProps>("medium"); +let visible = ref(false); +let listloading = ref(false); +let keywords = ref(""); +let activeKey = ref("1"); +let detailsShow = ref(false); +let checkedAll = ref(false); +let checkedArr = ref([]); +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", + img2txt_id: "qwen-vl-max", + llm_id: "qwen-plus", + name: "wanghao鈥榮 Kingdom", + parser_ids: "naive:General,qa:Q&A,resume:Resume,manual:Manual,table:Table,paper:Paper,book:Book,laws:Laws,presentation:Presentation,picture:Picture,one:One", + rerank_id: "BAAI/bge-reranker-v2-m3", + role: "owner", + tenant_id: "948fc6fa41ab11ef8fb80242ac120004", + parser_idObj: {} +}); +let tabs = ref([]); - const selectTab = (index) => { - selectedTab.value= index; - } - - const basePagination: Pagination = { - current: 1, - pageSize: 20, - }; - const pagination = reactive({ - ...basePagination, +const selectTab = (index, item) => { + selectedTab.value = index; + // console.log(item.id); + kbobj = item; + kbId = kbobj.id; + fetchData({ + kb_id: kbobj.id, + page: 1, + page_size: 20 }); - const densityList = computed(() => [ - { - name: t('searchTable.size.mini'), - value: 'mini', - }, - { - name: t('searchTable.size.small'), - value: 'small', - }, - { - name: t('searchTable.size.medium'), - value: 'medium', - }, - { - name: t('searchTable.size.large'), - value: 'large', - }, - ]); - const columns = computed<TableColumnData[]>(() => [ - { - title: t('dmx.column.name'), - dataIndex: 'name', - slotName: 'name', - }, - { - title: t('鍒嗗揩鏁�'), - dataIndex: 'contentType', - }, - { - title: t('dmx.column.UploadTime'), - dataIndex: 'filterType', - }, - { - title: t('dmx.column.Founder'), - dataIndex: 'count', - }, - { - title: t('dmx.column.Status'), - dataIndex: 'createdTime', - }, - { - title: t('dmx.column.Enable'), - dataIndex: 'staue', - slotName: 'staue', - }, - { - title: t('dmx.column.ParseState'), - dataIndex: 'status', - slotName: 'status', - }, - { - title: t('dmx.column.Operate'), - dataIndex: 'operations', - slotName: 'operations', - width: 150, - minWidth: 100, - }, - ]); - const contentTypeOptions = computed<SelectOptionData[]>(() => [ - { - label: t('searchTable.form.contentType.img'), - value: 'img', - }, - { - label: t('searchTable.form.contentType.horizontalVideo'), - value: 'horizontalVideo', - }, - { - label: t('searchTable.form.contentType.verticalVideo'), - value: 'verticalVideo', - }, - ]); - const filterTypeOptions = computed<SelectOptionData[]>(() => [ - { - label: t('searchTable.form.filterType.artificial'), - value: 'artificial', - }, - { - label: t('searchTable.form.filterType.rules'), - value: 'rules', - }, - ]); - const statusOptions = computed<SelectOptionData[]>(() => [ - { - label: t('searchTable.form.status.online'), - value: 'online', - }, - { - label: t('searchTable.form.status.offline'), - value: 'offline', - }, - ]); - const fetchData = async ( - params: PolicyParams = { current: 1, pageSize: 20 } - ) => { - setLoading(true); - try { - const { data } = await queryPolicyList(params); - renderData.value = data.list; - console.log(renderData, 'renderData'); - pagination.current = params.current; - pagination.total = data.total; - } catch (err) { - // you can report use errorHandler or other - } finally { - setLoading(false); - } - }; + getKbdetail(kbobj.id); +}; - const search = () => { - fetchData({ - ...basePagination, - ...formModel.value, - } as unknown as PolicyParams); - }; - - const handleClick = ()=>{ - visible.value = true; +const basePagination: Pagination = { + current: 1, + pageSize: 20 +}; +const pagination = reactive({ + ...basePagination +}); +const densityList = computed(() => [ + { + name: t("searchTable.size.mini"), + value: "mini" + }, + { + name: t("searchTable.size.small"), + value: "small" + }, + { + name: t("searchTable.size.medium"), + value: "medium" + }, + { + name: t("searchTable.size.large"), + value: "large" } +]); +const columns = computed<TableColumnData[]>(() => [ + { + title: t("dmx.column.name"), + dataIndex: "name", + slotName: "name" + }, + { + title: t("鍒嗗揩鏁�"), + dataIndex: "chunk_num" + }, + { + title: t("dmx.column.UploadTime"), + dataIndex: "create_time", + slotName: "create_time", + width: 200 + }, + { + title: t("瑙f瀽鏂规硶"), + dataIndex: "parser_id", + slotName: "parser_id" + }, + { + title: t("鍚敤"), + dataIndex: "status", + slotName: "status" + }, + { + title: t("瑙f瀽鐘舵��"), + dataIndex: "run", + slotName: "run" + }, + { + title: t("dmx.column.Operate"), + dataIndex: "action", + slotName: "action", + width: 200, + minWidth: 200 + } +]); +const contentTypeOptions = computed<SelectOptionData[]>(() => [ + { + label: t("searchTable.form.contentType.img"), + value: "img" + }, + { + label: t("searchTable.form.contentType.horizontalVideo"), + value: "horizontalVideo" + }, + { + label: t("searchTable.form.contentType.verticalVideo"), + value: "verticalVideo" + } +]); +const filterTypeOptions = computed<SelectOptionData[]>(() => [ + { + label: t("searchTable.form.filterType.artificial"), + value: "artificial" + }, + { + label: t("searchTable.form.filterType.rules"), + value: "rules" + } +]); +const statusOptions = computed<SelectOptionData[]>(() => [ + { + label: t("searchTable.form.status.online"), + value: "online" + }, + { + label: t("searchTable.form.status.offline"), + value: "offline" + } +]); +const fetchData = async (params) => { + setLoading(true); + try { + const data = await queryKbDocumentList(params); + if (data.code == "0") { + parser_ids = kbtenantInfo.parser_ids.split(",").reduce((acc, pair) => { + const [key, value] = pair.split(":"); + acc[key] = value; + return acc; + }, {}); + // console.log(parser_ids, 'parser_ids'); + kbtenantInfo.parser_idObj = parser_ids; + renderData.value = data.data.docs || []; + renderData.value = renderData.value.map((item) => { + return { + ...item, + loading: false, + parser_id: parser_ids[item.parser_id] + }; + }); + // console.log(renderData.value, 'renderData'); - const onPageChange = (current: number) => { - fetchData({ ...basePagination, current }); - }; + pagination.current = params.page; + pagination.total = data.data.total; - fetchData(); - const reset = () => { - formModel.value = generateFormModel(); - }; + } + } catch (err) { + // you can report use errorHandler or other + } finally { + setLoading(false); + } +}; - const handleSelectDensity = ( - val: string | number | Record<string, any> | undefined, - e: Event - ) => { - size.value = val as SizeProps; - }; +const search = () => { + fetchData({ + kb_id: kbobj.id, + page: 1, + page_size: 20, + keywords: keywords.value + }); +}; - const handleChange = ( - checked: boolean | (string | boolean | number)[], - column: Column, - index: number - ) => { - if (!checked) { - cloneColumns.value = showColumns.value.filter( - (item) => item.dataIndex !== column.dataIndex - ); +const handleClick = () => { + visible.value = true; +}; + +const onPageChange = (current: number) => { + fetchData({ ...basePagination, current }); +}; + +const selectTabAll = (val) => { + console.log(val,'鍏ㄩ��'); + checkedAll.value = val; +}; +const selectTabChange = (val) => { + console.log(val,'鍗曢��'); + checkedArr.value = val; +}; + +const knowledgeData = async ( + params = { page: 1, page_size: 20 } +) => { + listloading.value = true; + try { + const { data } = await queryKbList(params); + // console.log(data, 'data'); + tabs.value = data; + // console.log(tabs.value, 'tabs'); + if (tabs.value.length > 0 && tabs.value[0]) { + kbobj = tabs.value[0]; + kbId = kbobj.id; + activeKey.value = "1"; + fetchData({ + kb_id: kbobj.id, + page: 1, + page_size: 20 + }); + getKbdetail(kbobj.id); } else { - cloneColumns.value.splice(index, 0, column); - } - }; - const exchangeArray = <T extends Array<any>>( - array: T, - beforeIdx: number, - newIdx: number, - isDeep = false - ): T => { - const newArray = isDeep ? cloneDeep(array) : array; - if (beforeIdx > -1 && newIdx > -1) { - // 鍏堟浛鎹㈠悗闈㈢殑锛岀劧鍚庢嬁鍒版浛鎹㈢殑缁撴灉鏇挎崲鍓嶉潰鐨� - newArray.splice( - beforeIdx, - 1, - newArray.splice(newIdx, 1, newArray[beforeIdx]).pop() - ); } - return newArray; - }; + // renderData.value = data.list; + // console.log(renderData, 'renderData'); + // pagination.current = params.current; + // pagination.total = data.total; + } catch (err) { + // you can report use errorHandler or other + } finally { + listloading.value = false; + } +}; - const popupVisibleChange = (val: boolean) => { - if (val) { - nextTick(() => { - const el = document.getElementById('tableSetting') as HTMLElement; - const sortable = new Sortable(el, { - onEnd(e: any) { - const { oldIndex, newIndex } = e; - exchangeArray(cloneColumns.value, oldIndex, newIndex); - exchangeArray(showColumns.value, oldIndex, newIndex); - }, - }); + +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 = (id) => { + Modal.confirm({ + title: "鎻愮ず淇℃伅", + content: "纭鍒犻櫎鍚�", + okText: "纭畾", + cancelText: "鍙栨秷", + hideTitle: true, + onOk: async () => { + let data = await deleteKnow({ + kb_id: id }); - } - }; - - const fileClick = ()=>{ - detailsShow.value = true - - } - - const goBackClick = ()=>{ - detailsShow.value = false - - } - - const deleteItem = async (row)=>{ - console.log(row); - // let data = await deleteAccount({id: row.number}) - account.value.$messageSuccess('鍒犻櫎鎴愬姛') - // - // if(data.code == 200){ - // this.$messageSuccess('鍒犻櫎鎴愬姛') - // } - } - - watch( - () => columns.value, - (val) => { - // alert(columns.value) - cloneColumns.value = cloneDeep(val); - cloneColumns.value.forEach((item, index) => { - item.checked = true; - }); - showColumns.value = cloneDeep(cloneColumns.value); + if (data.code == 0) { + Message.success("鍒犻櫎鎴愬姛"); + knowledgeData(); + } }, - { deep: true, immediate: true } - ); -</script> - -<script lang="ts"> - export default { - name: 'SearchTable', - methods: { - + onCancel: () => { } - }; + }); +}; +const reset = () => { + formModel.value = generateFormModel(); +}; + +function handleTabChange(key) { + // 澶勭悊鏍囩鏀瑰彉浜嬩欢 + console.log("Changed to tab:", key); + activeKey.value = key; +} + +const handleSelectDensity = ( + val: string | number | Record<string, any> | undefined, + e: Event +) => { + size.value = val as SizeProps; +}; + +const cancleConfig = () => { + activeKey.value = "1"; + let id = tabs.value[selectedTab.value].id; + fetchData({ + kb_id: id, + page: 1, + page_size: 20 + }); +}; + +const saveConfig = async () => { + activeKey.value = "1"; + let id = tabs.value[selectedTab.value].id; + const { data } = await queryKbList({ page: 1, page_size: 20 }); + tabs.value = data; + fetchData({ + kb_id: id, + page: 1, + page_size: 20 + }); + getKbdetail(id); // 鑾峰彇璇︽儏 +}; + + +//鎵归噺鍚敤鍒犻櫎绂佺敤 +const addBlock = async (type) => { + if (type != 3) { + //鍚姩鍜屽彇娑� + let data = await kbdocumentrun({ + doc_ids: checkedArr.value, + run: type + }); + if (data.code == 0) { + checkedArr.value.forEach(async (item) => { + tabs.value.forEach(async (items) => { + if(items.id == item){ + items.loading = true; + } + }) + }) + fetchData({ + kb_id: tabs.value[selectedTab.value].id, + page: 1, + page_size: 20 + }); + } else { + // Message.error('瑙f瀽澶辫触'); + // row.run = '1'; + } + + + + } else { + //鎵归噺鍒犻櫎 + Modal.confirm({ + title: "鎻愮ず淇℃伅", + content: "纭鍒犻櫎鍚�", + okText: "纭畾", + cancelText: "鍙栨秷", + hideTitle: true, + onOk: async () => { + let data = await kbdocumentrm({ doc_id: checkedArr.value }); + if (data.code == 0) { + Message.success("鍒犻櫎鎴愬姛"); + fetchData({ + kb_id: tabs.value[selectedTab.value].id, + page: 1, + page_size: 20 + }); + } + }, + onCancel: () => { + } + }); + + + + } +}; + +const exchangeArray = <T extends Array<any>>( + array: T, + beforeIdx: number, + newIdx: number, + isDeep = false +): T => { + const newArray = isDeep ? cloneDeep(array) : array; + if (beforeIdx > -1 && newIdx > -1) { + // 鍏堟浛鎹㈠悗闈㈢殑锛岀劧鍚庢嬁鍒版浛鎹㈢殑缁撴灉鏇挎崲鍓嶉潰鐨� + newArray.splice( + beforeIdx, + 1, + newArray.splice(newIdx, 1, newArray[beforeIdx]).pop() + ); + } + return newArray; +}; + +const popupVisibleChange = (val: boolean) => { + if (val) { + nextTick(() => { + const el = document.getElementById("tableSetting") as HTMLElement; + const sortable = new Sortable(el, { + onEnd(e: any) { + const { oldIndex, newIndex } = e; + exchangeArray(cloneColumns.value, oldIndex, newIndex); + exchangeArray(showColumns.value, oldIndex, newIndex); + } + }); + }); + } +}; + +const fileClick = () => { + detailsShow.value = true; + +}; + +const goBackClick = () => { + detailsShow.value = false; + +}; + +function upTabdateItem(id, newName) { + console.log(id, newName); + const itemToUpdate = renderData.value.find(item => item.id === id); + if (itemToUpdate) { + itemToUpdate.name = newName; + } +} + +const deleteItem = async (row) => { + console.log(row); + let data = await kbdocumentrm({ doc_id: row.id }); + if (data.code == 0) { + Message.success("鍒犻櫎鎴愬姛"); + // console.log(kbobj, 'kbobj'); + fetchData({ + kb_id: kbobj.id, + page: 1, + page_size: 20 + }); + } +}; +const onDownloadDocument = async (record) => { + console.log(record); + downloadFile({ + url: `/api/v1/document/get/${record.id}`, + filename: record.name + }); +}; +const previewArea = 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}`; + // previewSrc.value = `${ httpUrl }/v1/document/get/${row.id}` + visible.value = true; + +}; + +const handleChangeStatus = async (row) => { + console.log(row); + let data = await kbdocumentchangeStatus({ + doc_id: row.id, + status: row.status + }); + if (data.code == 0) { + Message.success("鎿嶄綔鎴愬姛"); + } +}; + + +const run = async (row) => { + row.loading = true; + let run; + if (row.run == "0") { + run = "1"; + } else if (row.run == "1") { + run = "2"; + } else if (row.run == "2") { + run = "1"; + } else { + run = "1"; + } + let data = await kbdocumentrun({ + doc_ids: [row.id], + run: run + }); + if (data.code == 0) { + fetchData({ + kb_id: tabs.value[selectedTab.value].id, + page: 1, + page_size: 20 + }); + } else { + // Message.error('瑙f瀽澶辫触'); + // row.run = '1'; + } + + row.loading = false; +}; + +const changeFetchData = async (row) => { + fetchData({ + kb_id: kbobj.id, + page: 1, + page_size: 20 + }); +}; +watch( + () => columns.value, + (val) => { + // alert(columns.value) + cloneColumns.value = cloneDeep(val); + cloneColumns.value.forEach((item, index) => { + item.checked = true; + }); + showColumns.value = cloneDeep(cloneColumns.value); + }, + { deep: true, immediate: true } +); + +onBeforeMount(async () => { + // const {data} = await queryKbtenantInfo(); + // Object.assign(kbtenantInfo,data); + // console.log(kbtenantInfo,'kbtenantInfo鐨勬暟鎹�'); + +}); +onMounted(() => { + knowledgeData(); +}); + </script> <style scoped lang="less"> - .container { - padding: 0 20px 20px 20px; - .main-container{ +.container { + padding: 0 20px 20px 20px; + + .main-container { + display: flex; + width: 100%; + + .lf-container { display: flex; - .lf-container{ + flex-direction: column; + align-items: center; + //justify-content: space-evenly; + border-radius: 8px; + background: var(--color-bg-2); + width: 200px; + + .lf-container-top { + display: flex; + margin: 10px 0; + } + + .lf-container-down { display: flex; flex-direction: column; - align-items: center; - justify-content: space-evenly; + box-sizing: border-box; + width: 90%; + height: calc(100% - 80px); + border: 1px solid var(--color-fill-3); + border-radius: 8px; + //padding: 10px; + margin-bottom: 10px; + //.tabs{ + // width: 100%; + // height: 100%; + // overflow: auto; + //} + .tab { + cursor: pointer; + box-sizing: border-box; + margin: 10px 10px; + padding: 0 10px; + padding-right: 20%; + font-size: 14px; + height: 40px; + line-height: 40px; + list-style: none; + position: relative; + color: var(--color-text-1); + border: 1px solid var(--color-neutral-3); + background: var(--color-bg-2); + border-radius: 8px; + overflow: hidden; /* 纭繚瓒呭嚭瀹瑰櫒鐨勬枃鏈闅愯棌 */ + white-space: nowrap; /* 闃叉鏂囨湰鎹㈣ */ + text-overflow: ellipsis; /* 瓒呭嚭閮ㄥ垎鏄剧ず鐪佺暐鍙� */ + } + + .tab: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); + } + + .tab.active { + color: #2a2a2b; + border: 1px solid var(--color-neutral-1); + background: #e8e8ea; + cursor: pointer; + } + } + } + + .rt-container { + position: relative; + //background: #626aea; + margin-left: 20px; + width: calc(100% - 200px); + overflow: hidden; + + .rt-container-main { + overflow: auto; + } + + .details { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; background: #ffffff; - width: 200px; - .lf-container-top{ + + .details-header { display: flex; - } - .lf-container-down{ - display: flex; - flex-direction: column; - width: 90%; - height: calc(100% - 5rem); - border: 1px solid #eeeeee; - overflow: auto; - padding: 10px; - .tabs .tab { - cursor: pointer; - box-sizing: border-box; - margin: 10px 0; - padding:0 10px; - color: rgba(0, 0, 0, 0.88); - font-size: 14px; - height: 40px; - line-height: 40px; - list-style: none; - position: relative; - background: #ffffff; - border: 1px solid #f0f0f0; - border-radius: 8px; - } - .tabs .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 { - border: 1px solid #e8e8ea; - background: #e8e8ea; - cursor: pointer; - } - } - } - .rt-container{ - position: relative; - //background: #626aea; - margin-left: 20px; - width: calc(100% - 200px); - height: calc(100% - 5rem); - .rt-container-main{ - height: 76vh; - } - .details{ - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #ffffff; - .details-header{ - display: flex; - justify-content: space-between; - margin-top: 10px; - padding-right: 20px; - } + justify-content: space-between; + margin-top: 10px; + padding-right: 20px; } } } } - :deep(.arco-table-th) { - &:last-child { - .arco-table-th-item-title { - margin-left: 16px; - } +} + +:deep(.arco-table-th) { + &:last-child { + .arco-table-th-item-title { + margin-left: 16px; } } - .action-icon { +} + +.action-icon { + margin-left: 12px; + cursor: pointer; +} + +.active { + color: #0960bd; + background-color: #e3f4fc; +} + +.setting { + display: flex; + align-items: center; + width: 200px; + + .title { margin-left: 12px; cursor: pointer; } - .active { - color: #0960bd; - background-color: #e3f4fc; - } - .setting { - display: flex; - align-items: center; - width: 200px; - .title { - margin-left: 12px; - cursor: pointer; - } - } +} </style> -- Gitblit v1.8.0