知识索引新增查看

yangyin

2024-09-06 b920b63dd91ac5e084c3b6d3b9e726ef3c5de123

 src/views/project/yw/dataManage/knowledge/viewKnowBase/ViewFile.vue

@@ -2,100 +2,116 @@
   <div class="flex flex-col h100">
      <div class="h100" v-show="!state.showKnowledgeForm">
         <div class="mb-[10px] flex flex-shrink-0 items-center">
            <el-button style="margin-left: 8px; width: 40px" link @click="handleExitFlow">
            <el-button style="margin-left: 8px; width: 40px" link @click="handleShowKnowledge">
               <el-icon style="font-size: 24px !important">
                  <ArrowLeft />
               </el-icon>
            </el-button>
            <span class="text-[24px] text-[#26244c] font-[700]">{{ state.knowledgeInfo.knowledge_title }}</span>
         </div>
         <div class="set-table-height"></div>
         <div class="set-table-height">
            <div class="mx-0 mt-[12px] mb-[16px] flex justify-between items-center">
               <div class="flex-col">
                  <el-input
                     v-model="knowledgeFileForm.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>
            </div>
            <div class="relative transition-[opacity 0.3s]">
               <div class="flex flex-wrap gap-[12px] mt-4 box-border">
                  <div
                     v-for="(item, index) in displayTableData"
                     class="set_slice"
                     :key="index"
                     @mouseover="mouseOver(index)"
                     @mouseleave="mouseLeave()"
                  >
                     <!-- <div class="flex justify-between">
                        <div class="items-center font-[500] flex">{{ item.title }}</div>
                        <el-switch v-model="state.isSliceValueTime" class="ml-2" size="small" />
                     </div> -->
                     <div class="set_content" :class="state.selectSliceID == index ? 'h-[48px]' : 'h-[88px]'">{{ item }}</div>
                     <div :class="{ viewFileClassHover: state.selectSliceID == index }">
                        <el-button type="primary" link style="color: #0062be" @click="viewSliceFile(item)">{{
                           state.selectSliceID == index ? '查看详情' : ''
                        }}</el-button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>

      <div class="set-form-footer" v-show="state.showKnowledgeForm">
         <el-button @click="importCompleted" type="primary">导入完成</el-button>
         <el-button @click="handleShowKnowledge">取消</el-button>
      </div>
      <el-dialog v-model="state.isShowSliceDetail" title="切片内容" width="50%" :before-close="handleClose">
         <el-form v-model="state.knowLedgeDetailForm" label-position="right">
            <el-form-item>
               <el-input v-model="state.knowLedgeDetailForm" readonly type="textarea" :rows="10"></el-input>
            </el-form-item>
         </el-form>
      </el-dialog>
   </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { add_docvector_file } from '/@/api/knowledge/docvector';
const viewKnowledgeTableRef = ref();
import { list_knowledge_file_vector } from '/@/api/knowledge/group';
import { useQueryTable } from '/@/hooks/useQueryTable';
const router = useRouter();
const route = useRoute();
const knowledgeTableData = ref([]);
const knowledgeFileRef = ref();
// 定义变量内容
const state = reactive({
   knowledgeInfo: {
      knowledge_title: '查看文件',
      knowledge_id: '',
      knowledge_import_data: '导入数据',
   } as any,
   knowledgeForm: {
      segmentationMode: 1,
   },
   knowLedgeDetailForm: '',
   showKnowledgeForm: false,
   knowledgeFile: {},
   isSliceValueTime: true,
   selectSliceID: null,
   isShowSliceDetail: false,
});
//返回到知识库列表
const handleExitFlow = () => {
   //是否显示返回
   router.back();
};
//返回到知识库查看页面
const handleShowKnowledge = () => {
   state.showKnowledgeForm = false;
   router.back();
};
//#region ====================== 搜索表格，对表格排序 ======================
const graphQueryParams = ref({
   title: '',
});
// const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(getSliceFile, graphQueryParams, () => {
//    displayTableData.value = knowledgeTableData.value;
// });
//#endregion
const handleClose = () => {
   state.isShowSliceDetail = false;
};
//#region ====================== 获取切换的数据 ======================
const mouseOver = (index) => {
   state.selectSliceID = index;
};
const mouseLeave = () => {
   state.selectSliceID = null;
};
const getSliceFile = async () => {
   const res = 0;
};
//#endregion
//#region ====================== 导入知识库数据 ======================
const importKnowledgeData = () => {
   state.showKnowledgeForm = true;
   getImportantFileTreeData(true);
};
//导入完成
const importCompleted = async () => {
   // 上传文件
   if (multipleSelection.value.length == 0) return ElMessage.warning('请先选择文件');
   let isCreateIndex = false;
   const file_id = multipleSelection.value.map((v) => v.id).join(',');
   knowledgeTableData.value.forEach((element) => {
      if (element.id == file_id) {
         ElMessage.warning('文件已存在，请选择其他文件');
         isCreateIndex = true;
      }
   });
   if (isCreateIndex) return;
   const res = await add_docvector_file({
      knowlg_id: state.knowledgeInfo.knowledge_id,
      file_id: file_id,
   const res = await list_knowledge_file_vector({
      file_id: state.knowledgeInfo.knowledge_id,
   });
   if (res.json_ok) {
      ElMessage.success('导入数据成功');
      state.showKnowledgeForm = false;
      getKnowledgeFileData();
      //清空表单
      knowledgeFileRef.value.resetFields();
      sliceFileData.value = res.values;
   }
};
const viewSliceFile = (row) => {
   state.isShowSliceDetail = true;
   state.knowLedgeDetailForm = row;
};
//#endregion

//#region ====================== 搜索表格，对表格排序 ======================
const sliceFileData = ref([]);
const knowledgeFileForm = ref({
   title: '',
});
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(sliceFileData, knowledgeFileForm, () => {
   displayTableData.value = sliceFileData.value;
});
//#endregion
onMounted(() => {
   const { id } = route.query;
   state.knowledgeInfo.knowledge_id = id;
@@ -111,6 +127,35 @@
   overflow-y: auto;
   padding: 20px 24px;
   box-sizing: border-box;
   .set_slice {
      border: 1px solid rgba(135, 138, 171, 0.15);
      border-radius: 16px;
      padding: 12px 20px;
      width: calc(33.33333% - 8px);
      &:hover {
         border-color: #0062be;
      }
      .viewFileClassHover {
         border-top: 1px solid hsla(0, 0%, 94%, 0.5);
         display: flex;
         justify-content: space-between;
         margin-top: 6px;
         height: 44px;
         padding-top: 4px;
         background-color: #fff;
         -webkit-line-clamp: 2;
      }
   }
   .set_content {
      color: rgba(38, 36, 76, 0.8);
      font-size: 12px;
      line-height: 22px;
      margin: 6px 0 0;
      -webkit-line-clamp: 4;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
   }
}
.set-file-height {
   height: calc(100% - 48px);