创新实训-对知识库的管理搭建

概述：本篇主要实现对知识库的相关内容，包括对知识库的创建，详情界面的查看，导入文件等操作。

首先在聊天界面添加知识库的跳转按钮，点击可跳转到知识库管理界面

<!-- 知识库管理界面 -->
          <button @click="goToMyAppBox"
            class="bg-grey-500 text-white px-4 py-2 rounded-md font-semibold hover:bg-gray-500/10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            我的应用
          </button>

创建显示知识库内容

created() {
    console.log('created')
    this.KBId = this.$route.query.kbId
    console.log(this.KBId)
    getChunks(this.KBId).then((res) => {
      console.log(res)
      this.lists = res.data
    }).catch((err) => {
      console.log(err)
    });
  }

添加一个文件选择器，点击可选择文件导入

openFileSelector() {
      //创建input元素
      const input = document.createElement('input');
      input.type = 'file';
      input.click();

      //监听文件选择事件
      input.onchange = (event) => {
        const file = event.target.files[0];
        //处理选中的文件
        console.log(file);
      }
    },

用于处理确认操作的功能，在用户确认操作后，根据当前是否处于编辑模式来执行不同的操作

confirm() {
      if (this.isEdit) {
        let myObj = this.lists.find(box => box.chunkId == this.currentIndex)
        console.log(myObj)
        myObj = this.tempInfo
        this.dialogVisible = false
        this.isEdit = false
      }
      else {
        this.tempInfo.chunkId = this.lists[this.lists.length - 1].chunkId + 1
        this.lists.push(this.tempInfo)
        this.dialogVisible = false
        this.isEdit = false
      }
    }