feat(knowledge): 更新知识库模块

- 添加知识库图标上传功能
- 优化知识库列表和详情页面的展示
- 新增智能体编辑功能
- 重构知识库表单组件

src/api/intelligent-agent/list.js

@@ -77,5 +77,23 @@ const agentEdit = data => {
     data
   })
 }
+/**
+ * 编辑智能体
+ * @param {Object} data - 请求参数, 默认为空对象
+ * @returns {Promise} - 返回 Promise 对象
+ */
+const getAccessToken = data => {
+  return request({
+    url: getUrl('/third/access_token'),
+    method: 'get'
+  })
+}
 
-export { agentList, agentEdit, agentDelete, agentAdd, agentDetail }
+export {
+  agentList,
+  agentEdit,
+  agentDelete,
+  agentAdd,
+  agentDetail,
+  getAccessToken
+}

src/components/RenderCropper/index.vue

@@ -24,6 +24,7 @@
       :visible.sync="visible"
       @confirm="confirm"
       width="600px"
+      append-to-body
     >
       <div class="flex">
         <cropper-canvas style="width: 100%;flex:1" cover image>
@@ -94,8 +95,30 @@ export default {
       }
     }
   },
-  props: {},
-  watch: {},
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    url: {
+      handler(val) {
+        this.fileList = []
+        if (val) {
+          this.fileList.push({
+            url: val
+          })
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   components: {},
   filters: {},
   methods: {
@@ -118,8 +141,9 @@ export default {
           // 文件生成 bolburl
           const blobUrl = URL.createObjectURL(res)
           res.url = blobUrl
+          this.fileList = []
           this.fileList.push(res)
-          this.$emit('getFiles', this.fileList)
+          this.$emit('getFiles', [res])
           this.visible = false
         })
         //   根据canvas 生成一个图片

src/router/generatedRouter/index.js

@@ -251,7 +251,9 @@ export default [
         component: () => import('@/views/intelligent-agent/index.vue'),
         meta: {
           title: 'AI智能体',
-          icon: 'icon-notebook'
+          icon: 'icon-notebook',
+          accessToken: '',
+          refreshToken: ''
         }
       }
     ]

src/views/intelligent-agent/index.vue

@@ -2,7 +2,8 @@
 import {
   agentList,
   agentDelete,
-  agentDetail
+  agentDetail,
+  getAccessToken
 } from '@/api/intelligent-agent/list'
 import Info from '@/views/intelligent-agent/components/info'
 import agent from '@/views/agent'
@@ -69,7 +70,7 @@ export default {
       this.page += 1
       this.fetchAgentList({
         page: this.page,
-        pageSize: 3
+        pageSize: this.pageSize
       })
     },
     /**
@@ -136,10 +137,17 @@ export default {
     },
     async handleClickAgent(item) {
       const { content } = await agentDetail(item.id)
+
+      const thirdContent = await getAccessToken()
       let agent = content.content
       this.agentConfig.title = agent.appName + ' -  智能体详情'
       this.agentConfig.agent = agent
+      // 传递新的token
+      this.$route.meta.refreshToken = thirdContent.content.content.refreshToken
+      this.$route.meta.accessToken = thirdContent.content.content.accessToken
+      setTimeout(() => {
         this.agentConfig.visible = true
+      })
     },
 
     //   创建智能体弹窗确认

src/views/knowledge/detail/components/knowledgeForm.vue

@@ -39,39 +39,8 @@
             </el-radio-group>
           </el-form-item>
 
-          <el-form-item label="图标" prop="segmentedMode">
-            <el-upload
-              action="#"
-              list-type="picture-card"
-              :file-list="uploadList"
-              :auto-upload="false"
-              :limit="1"
-            >
-              <i slot="default" class="el-icon-plus"></i>
-              <div slot="file" slot-scope="{ file }">
-                <img
-                  class="el-upload-list__item-thumbnail"
-                  :src="file.url"
-                  alt=""
-                />
-                <span class="el-upload-list__item-actions">
-                  <span
-                    v-if="!disabled"
-                    class="el-upload-list__item-delete"
-                    @click="handleDownload(file)"
-                  >
-                    <i class="el-icon-download"></i>
-                  </span>
-                  <span
-                    v-if="!disabled"
-                    class="el-upload-list__item-delete"
-                    @click="handleRemove(file)"
-                  >
-                    <i class="el-icon-delete"></i>
-                  </span>
-                </span>
-              </div>
-            </el-upload>
+          <el-form-item label="图标" prop="image" required>
+            <r-cropper @getFiles="getFiles" :url="model.image"></r-cropper>
           </el-form-item>
         </el-form>
       </el-col>
@@ -80,7 +49,7 @@
       <el-button
         size="medium"
         v-if="!infoDialogVisible"
-        @click="$emit('update:visible', false)"
+        @click="resetForm(), $emit('update:visible', false)"
         >取消</el-button
       >
       <el-button
@@ -114,7 +83,8 @@ import 'nprogress/nprogress.css' // progress bar style
 import {
   datasetCreate,
   datasetUpdate,
-  getDatasetById
+  getDatasetById,
+  uploadImage
 } from '@/api/generatedApi'
 
 export default {
@@ -122,6 +92,7 @@ export default {
   data() {
     return {
       uploadList: [],
+      imageList: [],
       dialogImageUrl: '',
       dialogVisible: false,
       disabled: false,
@@ -132,12 +103,15 @@ export default {
         description: '',
         name: '',
         segmentedMode: 0,
-        id: null
+        id: null,
+        imageType: 'upload-img',
+        image: null
       },
       rules: {
         name: [
           { required: true, message: '请输入知识库名称', trigger: 'blur' }
         ],
+        image: [{ required: true, message: '请上传知识库图标' }],
         segmentedMode: [{ required: true, message: '请选择分段模式' }]
       }
     }
@@ -157,23 +131,42 @@ export default {
       handler(val) {
         this.$nextTick(() => {
           this.$emit('update:visible', val)
-        })
-      },
-      immediate: true
-    },
 
-    datasetId(val) {
-      if (val) {
+          if (this.datasetId) {
             this.getDetail()
           } else {
             this.model = {
               description: '',
               name: '',
               segmentedMode: 0,
+              visibleRange: 0,
+              userIds: [],
+              image: null,
+              imageType: 'upload-img',
               id: null
             }
           }
+        })
+      },
+      immediate: true
     }
+
+    // datasetId(val) {
+    //   if (val) {
+    //     this.getDetail()
+    //   } else {
+    //     this.model = {
+    //       description: '',
+    //       name: '',
+    //       segmentedMode: 0,
+    //       visibleRange: 0,
+    //       userIds: [],
+    //       image: null,
+    //       imageType: 'upload-img',
+    //       id: null
+    //     }
+    //   }
+    // }
   },
   components: {},
   filters: {
@@ -189,17 +182,17 @@ export default {
     }
   },
   methods: {
-    handleRemove(file) {
-      console.log(file)
-    },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
-    },
-    handleDownload(file) {
-      console.log(file)
+    getFiles(file) {
+      let formData = new FormData()
+      formData.append('file', file[0])
+      uploadImage(formData).then(res => {
+        if (res) {
+          this.$set(this.model, 'image', res.content.content.imageUrl)
+        }
+      })
     },
 
+    handleRemove(file) {},
     jumpKnowledgeList() {
       this.$router.push({
         path: '/knowledge/list'
@@ -222,19 +215,37 @@ export default {
         }
       })
     },
+    resetForm() {
+      this.model = {
+        description: '',
+        name: '',
+        segmentedMode: 0,
+        visibleRange: 0,
+        userIds: [],
+        image: null,
+        imageType: 'upload-img',
+        id: null
+      }
+    },
+
     save() {
       this.$refs.model.validate(valid => {
         if (!valid) {
           return false
         }
+
+        this.model.visibleRange = 0
         ;(!this.datasetId ? datasetCreate : datasetUpdate)(this.model).then(
           res => {
             if (res) {
               // 添加保存成功的提示
               this.$message.success('保存成功')
-              this.model.id = res.content.content.id
+              // this.model.id = res.content.content.id
               // this.infoDialogVisible = true
               this.$emit('update:visible', false)
+
+              this.resetForm()
+
               // this.$router.go(-1)
             }
           }

src/views/knowledge/detail/index.vue

@@ -1,11 +1,14 @@
 <template>
   <div class=" render-container">
     <div class="clearfix flex align-items-c justify-content-b ">
-      <img :src="knowledgePng_1" class="header-icon" />
+      <img
+        :src="knowledgeImage ? knowledgeImage : knowledgePng_1"
+        class="header-icon"
+      />
       <div class="ml20" style="flex:1">
         <div class="flex align-items-c">
           <div class="mr20 header" v-if="!editKnowledge">
-            {{ knowledgeName }}
+            {{ knowledgeName ? knowledgeName : '' }}
           </div>
           <el-input
             class="mr20 w400"
@@ -272,13 +275,14 @@ export default {
       copyKnowledgeName: '监管',
       knowledgeDesc: '监管',
       segmentedMode: '分段模式',
+      knowledgeImage: '',
       list: [],
       page: 1,
       pageSize: 10,
       total: 0,
       hasList: false,
       documentSourceOptions,
-      descriptions: { data: [{ content: '' }] },
+      descriptions: { data: [{ content: '' }], dataset: { knowledgeName: '' } },
       activeSegmentTab: 'content',
       activeSegments: [0],
       activeSegment: 0,
@@ -367,6 +371,7 @@ export default {
         this.knowledgeName = res.content.content.name
         this.knowledgeDesc = res.content.content.description
         this.segmentedMode = res.content.content.segmentedMode
+        this.knowledgeImage = res.content.content.image
       })
     },
 

src/views/knowledge/index.vue

@@ -59,7 +59,11 @@
         >
           <div class="dataset-header">
             <div class="folder-content">
-              <img :src="getKnowledgeImage(index)" alt="" class="folder" />
+              <img
+                :src="item.image ? item.image : getKnowledgeImage(index)"
+                alt=""
+                class="folder"
+              />
             </div>
             <div class="dataset-body" style="flex:1">
               <h4 class="dataset-title">{{ item.name }}</h4>