Merge branch 'master' of http://47.103.154.90:83/r/WI/Web.Admin.V1.0

wujingjing

2024-09-05 bd7247878bf5258bf5c1f9deefbfa6c9ade066e3

 src/views/project/yw/dataManage/knowledge/AddKnowledge.vue

@@ -8,12 +8,18 @@
         </el-button>
         <span class="text-[24px] text-[#26244c] font-[700]">{{ state.detailTitle }}</span>
      </div>
      <div class="set-form-height">
         <el-form :model="state.categoryForm" label-width="120px" label-position="left">
      <div class="set-form-height" v-show="!state.showKnowledgeForm">
         <el-form
            :model="state.knowledgeForm"
            label-width="120px"
            label-position="left"
            ref="knowledgeFormRef"
            :rules="knowledgeFormRules"
         >
            <el-divider content-position="left"><span class="text-[18px] font-[500]">知识库基础信息</span></el-divider>
            <el-form-item label="知识库名称:">
            <el-form-item label="知识库名称:" prop="title">
               <el-input
                  v-model="state.categoryForm.ImportCategory"
                  v-model="state.knowledgeForm.title"
                  style="width: 532px"
                  maxlength="20"
                  placeholder="请输入知识库名称"
@@ -21,9 +27,9 @@
                  type="text"
               />
            </el-form-item>
            <el-form-item label="知识库描述:">
            <el-form-item label="知识库描述:" prop="prompt">
               <el-input
                  v-model="state.categoryForm.CategoryType"
                  v-model="state.knowledgeForm.prompt"
                  maxlength="1000"
                  style="width: 532px"
                  placeholder="请输入知识库描述。对知识库包含的内容和数据的用途进行描述。"
@@ -36,7 +42,7 @@
               <div v-for="(item, index) in state.dataTypeList" :key="index">
                  <div
                     class="bg-[#fff] border-[1px] border-solid border-[#d8d9e6] py-[12px] w-[215px] mr-[10px] px-[16px] rounded-lg cursor-pointer"
                     :class="{ activeColor: state.categoryForm.dataType === item.ID }"
                     :class="{ activeColor: state.knowledgeForm.dataType === item.ID }"
                     @click="activeDataType(item.ID)"
                  >
                     <div class="flex items-center">
@@ -44,7 +50,7 @@
                           <img :src="item.ImageURL" class="w-[40px] h-[40px] mr-[10px]" />
                        </div>
                        <div class="data_right">
                           <el-radio v-model="state.categoryForm.dataType" size="large" :label="item.ID">
                           <el-radio v-model="state.knowledgeForm.dataType" size="large" :label="item.ID">
                              <span class="font-[500] text[16px]">{{ item.Name }}</span>
                           </el-radio>

@@ -65,7 +71,7 @@
                     <div v-for="(item, index) in state.configurationList" :key="index">
                        <div
                           class="bg-[#fff] border-[1px] border-solid border-[#d8d9e6] py-[12px] w-[215px] mr-[10px] px-[16px] rounded-lg cursor-pointer"
                           :class="{ activeColor: state.categoryForm.configurationMode === item.ID }"
                           :class="{ activeColor: state.knowledgeForm.configurationMode === item.ID }"
                           @click="activeConfigurationType(item.ID)"
                        >
                           <div class="flex items-center">
@@ -73,7 +79,7 @@
                                 <img :src="item.ImageURL" class="w-[40px] h-[40px] mr-[10px]" />
                              </div>
                              <div class="data_right">
                                 <el-radio v-model="state.categoryForm.configurationMode" size="large" :label="item.ID">
                                 <el-radio v-model="state.knowledgeForm.configurationMode" size="large" :label="item.ID">
                                    <span class="font-[500] text[16px]">{{ item.Name }}</span>
                                 </el-radio>

@@ -87,7 +93,7 @@
                        </div>
                     </div>
                  </div>
                  <div class="set_model_desc">
                  <!-- <div class="set_model_desc">
                     <div v-for="(item, index) in state.modeList" :key="index">
                        <div class="flex items-center mb-[16px]">
                           <div class="relative w-[148px] text-[14px] text-[#26244c]">{{ item.Name }}</div>
@@ -95,8 +101,99 @@
                           <div v-show="item.ID == 3">
                              <div class="min-w-[148px] text-[14px] text-[#26244c]">{{ item.NameOrder }}</div>
                           </div>
                           <div style="width: 200px" class="custom-style min-w-[148px] text-[14px] text-[#26244c]" v-if="item.ID == 4">
                              <el-slider v-model="item.NameOrder" :max="1" />
                        </div>
                     </div>
                  </div> -->
               </div>
            </el-form-item>
         </el-form>
      </div>
      <div class="set-form-height" v-show="state.showKnowledgeForm">
         <el-form
            :model="state.knowledgeFile"
            label-width="120px"
            label-position="left"
            class="h100"
            ref="knowledgeFileRef"
            :rules="knowledgeFormRules"
         >
            <el-divider content-position="left"><span class="text-[18px] font-[500]">选择文件</span></el-divider>
            <div class="flex items-start gap-[16px] max-h-[686px] min-h-[360px] set-file-height">
               <div class="min-h-[360px] h100 set_file_left">
                  <div class="font-[500] mb-2">请选择文档</div>
                  <div class="left_content">
                     <div class="file_menu">
                        <LeftTreeByMgr
                           title-name="类目"
                           ref="leftTreeRef"
                           :treedata="state.knowledgeBaseData"
                           :current-node-key="currentListID"
                           :defaultProps="{
                              children: 'Children',
                              label: 'title',
                              id: 'id',
                           }"
                           @click="handleClickNode"
                        >
                        </LeftTreeByMgr>
                     </div>
                     <div class="file_table">
                        <el-table
                           :data="state.fileData"
                           border
                           @select="handleSelectItem"
                           highlight-current-row
                           ref="multipleTableRef"
                           :class="{ 'hidden-checkbox-all': state.isRadio }"
                           @select-all="
                              (selection) => {
                                 handleSelectAll(selection, state.fileData);
                              }
                           "
                        >
                           <el-table-column type="selection" width="55" />
                           <el-table-column prop="name" label="文件名称" />
                        </el-table>
                     </div>
                  </div>
               </div>
               <div class="set_file_right">
                  <div class="h100">
                     <div class="font-[500] mb-[12px]">已选文档{{ multipleSelection.length }}/50个</div>
                     <div class="selected_file">
                        <div v-for="(item, index) in multipleSelection" :key="index" class="set_file_item">
                           <span class="set_file_name">{{ item.name }}</span>
                           <span class="ywifont ywicon-guanbi set_file_close" @click="handleRemoveItem(item)"></span>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <el-divider content-position="left"><span class="text-[18px]">数据处理</span></el-divider>
            <el-form-item label="文档切分chunk:">
               <div class="flex-auto flex flex-col">
                  <div class="flex">
                     <div v-for="(item, index) in state.segmentationList" :key="index">
                        <div
                           class="bg-[#fff] border-[1px] border-solid border-[#d8d9e6] py-[12px] w-[215px] mr-[10px] px-[16px] rounded-lg cursor-pointer"
                           :class="{ activeColor: state.knowledgeForm.segmentationMode === item.ID }"
                           @click="activeConfigurationType(item.ID)"
                        >
                           <div class="flex items-center">
                              <div class="data_left">
                                 <img :src="item.ImageURL" class="w-[40px] h-[40px] mr-[10px]" />
                              </div>
                              <div class="data_right">
                                 <el-radio v-model="state.knowledgeForm.segmentationMode" size="large" :label="item.ID">
                                    <span class="font-[500] text[16px]">{{ item.Name }}</span>
                                 </el-radio>

                                 <el-tooltip :content="item.DemoDesc" placement="top" effect="light" popper-class="set_tooltip_demo">
                                    <div class="text-[#878aab] text-[12px] mx-0 mt-[2px] mb-0 set-desc">
                                       {{ item.DemoDesc }}
                                    </div>
                                 </el-tooltip>
                              </div>
                           </div>
                        </div>
                     </div>
@@ -105,28 +202,42 @@
            </el-form-item>
         </el-form>
      </div>

      <div class="set-form-footer">
         <el-button type="primary" @click="onSubmit">下一步</el-button>
         <el-button>取消</el-button>
         <div v-show="!state.showKnowledgeForm">
            <el-button type="primary" @click="nextKnowledge">下一步</el-button>
            <el-button @click="emptyKnowledgeBase">创建空知识库</el-button>
         </div>
         <div v-show="state.showKnowledgeForm">
            <el-button @click="importCompleted" type="primary">导入完成</el-button>
            <el-button @click="backKnowledge" v-show="state.showKnowledgeForm">上一步</el-button>
         </div>
         <el-button @click="handleExitFlow">取消</el-button>
      </div>
   </div>
</template>

<script setup lang="ts">
import type { UploadUserFile } from 'element-plus';
import { reactive, ref } from 'vue';
import { ElMessage, type FormRules } from 'element-plus';
import moment from 'moment';
import { computed, nextTick, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { add_docvector_name } from '/@/api/knowledge/docvector';
import { get_knowledge_group_list, list_knowledge_file } from '/@/api/knowledge/group';
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
import mittBus from '/@/utils/mitt';
import { convertListToTree } from '/@/utils/util';
// 定义变量内容
const state = reactive({
   soliderValue: 0,
   detailTitle: '创建知识库',
   categoryForm: {
      ImportCategory: '',
      CategoryType: '本地类目',
   knowledgeForm: {
      title: '',
      prompt: '',
      dataType: 1,
      configurationMode: 1,
      segmentationMode: 1,
   },
   knowledgeFile: {},
   dataTypeList: [
      {
         ID: 1,
@@ -140,7 +251,7 @@
         ImageURL: 'static/images/knowledge/data_type_2.png',
         DemoDesc: '选择数据管理功能中已创建的数据表',
      },
   ],
   ], //数据类型
   configurationList: [
      {
         ID: 1,
@@ -153,6 +264,20 @@
         Name: '自定义',
         ImageURL: 'static/images/knowledge/data_type_4.png',
         DemoDesc: '完全开放的离线知识库配置，按照检索需求自由配置，获得推理效果和时延方面的不同体验',
      },
   ], //配置模式
   segmentationList: [
      {
         ID: 1,
         Name: '智能切分',
         ImageURL: 'static/images/knowledge/data_type_3.png',
         DemoDesc: '在通用文档上的最优chunk切分方法，经过评测可在多数文档上获得最佳的检索效果',
      },
      {
         ID: 3,
         Name: '自定义切分',
         ImageURL: 'static/images/knowledge/data_type_4.png',
         DemoDesc: '完全开放的chunk切分配置，按照实际文档情况自由配置，通过调试获得更好的检索效果',
      },
   ],
   modeList: [
@@ -181,28 +306,169 @@
         ID: 4,
         Name: '',
         NameFn: '相似度阈值',
         NameOrder: 0.01,
         NameOrder: null,
         NameFnWidthStyle: '148px',
      },
   ],
   showKnowledgeForm: false,
   knowledgeBaseData: [], //知识库类目
   fileData: [], //文件数据源
   isRadio: false, //是否单选
});
const fileList = ref<UploadUserFile[]>([]);
const knowledgeFormRules = reactive<FormRules>({
   title: [
      {
         required: true,
         message: '必填项',
         trigger: 'blur',
      },
   ],
   prompt: [
      {
         required: true,
         message: '必填项',
         trigger: 'blur',
      },
   ],
});
const knowledgeFormRef = ref();
const router = useRouter();

//#region ====================== 知识库表单操作 ======================
//返回
const handleExitFlow = () => {
   //是否显示返回
   router.back();
   //清空表单
   knowledgeFormRef.value.resetFields();
   state.showKnowledgeForm = false;
};
//选择数据类型
const activeDataType = (id: number) => {
   state.categoryForm.dataType = id;
   state.knowledgeForm.dataType = id;
};
//选择配置模式
const activeConfigurationType = (id: number) => {
   state.categoryForm.configurationMode = id;
   state.knowledgeForm.configurationMode = id;
};
//确认
const onSubmit = () => {};
//下一步
const nextKnowledge = async () => {
   const valid = await knowledgeFormRef.value.validate().catch(() => {});
   if (!valid) return;
   state.showKnowledgeForm = true;
   getFileTreeData(true);
};
const backKnowledge = () => {
   state.showKnowledgeForm = false;
};
//#endregion
//#region ====================== 空知识库的创建 ======================

//创建一个空知识库
const emptyKnowledgeBase = async () => {
   var currentTime = moment().format('YYYY-MM-DD HH:mm:ss');
   const valid = await knowledgeFormRef.value.validate().catch(() => {});
   if (!valid) return;
   const res = await add_docvector_name({ title: state.knowledgeForm.title, prompt: state.knowledgeForm.prompt });
   if (res.json_ok) {
      ElMessage.success('创建成功');
      let obj = {
         id: res.knowlg_id,
         title: state.knowledgeForm.title,
         prompt: state.knowledgeForm.prompt,
         publish: '',
         create_time: currentTime,
         user_name: '',
      };
      mittBus.emit('addKnowledgeBaseObj', obj);
      router.push({ name: 'Knowledge' });
   }
};
//导入完成
const importCompleted = () => {
   return;
   ElMessage.success('导入完成');
   router.push({ name: 'Knowledge' });
};
//#endregion
//#region ====================== 知识库文件上传 ==========
const treeLoading = ref(false);
const currentTreeNode = ref(null);
const leftTreeRef = ref(null);
const currentListID = computed(() => currentTreeNode.value?.id);
//获取文件列表
const getFileTreeData = async (selectFirst = false) => {
   treeLoading.value = true;
   const res = await get_knowledge_group_list().finally(() => {
      treeLoading.value = false;
   });
   if (res?.json_ok) {
      const resData = (res.values || []) as [];
      state.knowledgeBaseData = convertListToTree(resData, {
         ID: 'id',
         Children: 'Children',
         ParentID: 'parent',
      });
      if (selectFirst) {
         const firstListTreeNode = state.knowledgeBaseData[0];
         if (firstListTreeNode) {
            handleClickNode(firstListTreeNode);
         } else {
            state.fileData = [];
            multipleSelection.value = [];
         }
      } else {
         currentTreeNode.value && handleClickNode(currentTreeNode.value);
      }
   }
};
const handleClickNode = (data: any) => {
   multipleSelection.value = [];
   nextTick(() => {
      leftTreeRef.value?.treeRef.setCurrentKey(data.id);
   });
   currentTreeNode.value = data;
   getFileTableData();
};
//获取文件表格列表
const getFileTableData = async () => {
   const res = await list_knowledge_file({
      group_id: currentListID.value,
   }).finally(() => {});
   if (res?.json_ok) {
      const resData = (res.values || []) as [];
      state.fileData = resData;
   } else {
      ElMessage.error('获取文档列表失败' + (res?.json_msg ? `，${JSON.stringify(res.json_msg)}` : ''));
   }
};
let multipleSelection = ref([]);
const multipleTableRef = ref(null);
//表格单选和多选
const handleSelectAll = (selection: any[], pageSelectionData: any[]) => {
   let checked = selection.length ? true : false; // selection为空数组时代表取消全选
   if (checked) {
      let mIds = multipleSelection.value.map((v) => v.id);
      let filterData = pageSelectionData.filter((v) => {
         // 筛选出非重复项
         return !mIds.includes(v.id);
      });
      multipleSelection.value = multipleSelection.value.concat(filterData);
   } else {
      let pIds = pageSelectionData.map((v) => v.id);
      multipleSelection.value = multipleSelection.value.filter((v) => !pIds.includes(v.id));
   }
};

const handleSelectItem = (selection: any[], row) => {
   multipleSelection.value = selection;
};
// 移除已选文件
const handleRemoveItem = (item) => {
   multipleSelection.value = multipleSelection.value.filter((v) => v.id !== item.id);
   multipleTableRef.value.toggleRowSelection(item, false);
};
//#endregion
</script>
<style scoped lang="scss">
.set-form-height {
@@ -249,10 +515,80 @@
   margin-top: 12px;
   padding: 16px 24px;
}
.slider-demo-block {
   max-width: 600px;
   display: flex;
   align-items: center;
.set-file-height {
   height: calc(100% - 48px);
}
.set_file_left {
   border: 1px solid #e7e8ee;
   border-radius: 12px;
   flex: 1;
   padding: 12px 16px 16px;
   box-sizing: border-box;
   .left_content {
      align-items: flex-start;
      display: flex;
      gap: 12px;
      height: calc(100% - 29px);
      .file_menu {
         flex-shrink: 0;
         height: 100%;
         overflow-y: auto;
         border: 1px solid #e7e8ee;
         border-radius: 6px;
         max-height: 627px;
         padding: 20px;
         width: 280px;
      }
      .file_table {
         flex-shrink: 0;
         height: 100%;
         overflow-y: auto;
         border-radius: 8px 8px 0 0;
         flex: 1;
      }
   }
}
.set_file_right {
   border: 1px solid #e7e8ee;
   border-radius: 6px;
   flex-shrink: 0;
   height: 100%;
   padding: 12px 16px 16px;
   width: 417px;
   min-height: 360px;
}
.selected_file {
   max-height: calc(100% - 36px);
   overflow-y: auto;
   box-sizing: border-box;
   .set_file_item {
      align-items: center;
      background: linear-gradient(0deg, #f7f8fe, #f7f8fe), #fff;
      border-radius: 8px;
      display: flex;
      font-size: 12px;
      gap: 8px;
      height: 40px;
      justify-content: space-between;
      padding: 0 16px;
      margin-bottom: 9px;
      .set_file_name {
         max-width: calc(100% - 22px);
      }
      .set_file_close {
         color: #878aab;
         cursor: pointer;
         flex-shrink: 0;
         font-size: 14px;
         align-items: center;
         display: inline-flex;
         justify-content: center;
      }
   }
}
.hidden-checkbox-all :deep(.el-table__header .el-table-column--selection .el-checkbox) {
   // 隐藏全选checkbox
   display: none;
}
</style>
<style>