feat: 【应用】对话日志保存到文档下拉选项支持搜索 (#123)

* feat: 【应用】对话日志保存至文档选项支持搜索(#123)

* feat: 【应用】对话日志保存到文档下拉选项支持搜索 (#123)

Author: wangdan-fit2cloud

ui/src/views/log/component/EditContentDialog.vue

@@ -26,35 +26,53 @@
         <el-input v-model="form.title" placeholder="请给当前内容设置一个标题，以便管理查看">
         </el-input>
       </el-form-item>
-      <el-form-item label="保存至文档" prop="document">
-        <el-cascader
-          v-model="form.document"
-          :props="LoadDocument"
-          placeholder="请选择文档"
-          class="w-full"
+      <el-form-item label="选择知识库" prop="dataset_id">
+        <el-select
+          v-model="form.dataset_id"
+          filterable
+          placeholder="请选择知识库"
+          :loading="optionLoading"
+          @change="changeDataset"
         >
-          <template #default="{ node, data }">
+          <el-option v-for="item in datasetList" :key="item.id" :label="item.name" :value="item.id">
             <span class="flex align-center">
               <AppAvatar
-                v-if="!data.dataset_id && data.type === '1'"
+                v-if="!item.dataset_id && item.type === '1'"
                 class="mr-12 avatar-purple"
                 shape="square"
                 :size="24"
               >
                 <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
               </AppAvatar>
               <AppAvatar
-                v-else-if="!data.dataset_id && data.type === '0'"
+                v-else-if="!item.dataset_id && item.type === '0'"
                 class="mr-12"
                 shape="square"
                 :size="24"
               >
                 <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
               </AppAvatar>
-              <span class="ellipsis"> {{ data.name }}</span>
+              {{ item.name }}
             </span>
-          </template>
-        </el-cascader>
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="保存至文档" prop="document_id">
+        <el-select
+          v-model="form.document_id"
+          filterable
+          placeholder="请选择文档"
+          :loading="optionLoading"
+        >
+          <el-option
+            v-for="item in documentList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+            {{ item.name }}
+          </el-option>
+        </el-select>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -70,7 +88,6 @@ import { ref, watch, reactive } from 'vue'
 import { useRoute } from 'vue-router'
 import type { FormInstance, FormRules } from 'element-plus'
 import logApi from '@/api/log'
-import type { CascaderProps } from 'element-plus'
 import useStore from '@/stores'
 
 const { application, document } = useStore()
@@ -99,15 +116,19 @@ const form = ref<any>({
   problem_text: '',
   title: '',
   content: '',
-  document: []
+  dataset_id: '',
+  document_id: ''
 })
 
 const rules = reactive<FormRules>({
   content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
-  document: [{ type: 'array', required: true, message: '请选择文档', trigger: 'change' }]
+  dataset_id: [{ required: true, message: '请选择知识库', trigger: 'change' }],
+  document_id: [{ required: true, message: '请选择文档', trigger: 'change' }]
 })
 
-const datasetList = ref([])
+const datasetList = ref<any[]>([])
+const documentList = ref<any[]>([])
+const optionLoading = ref(false)
 
 watch(dialogVisible, (bool) => {
   if (!bool) {
@@ -117,45 +138,40 @@ watch(dialogVisible, (bool) => {
       problem_text: '',
       title: '',
       content: '',
-      document: []
+      dataset_id: '',
+      document_id: ''
     }
+    datasetList.value = []
+    documentList.value = []
+    formRef.value?.clearValidate()
   }
 })
 
-const LoadDocument: CascaderProps = {
-  lazy: true,
-  value: 'id',
-  label: 'name',
-  leaf: 'dataset_id',
-  lazyLoad(node, resolve: any) {
-    const { level, data } = node
-    if (data?.id) {
-      getDocument(data?.id as string, resolve)
-    } else {
-      getDataset(resolve)
-    }
-  }
+
+function changeDataset(id: string) {
+  form.value.document_id = ''
+  getDocument(id)
 }
 
-function getDocument(id: string, resolve: any) {
+function getDocument(id: string) {
   document.asyncGetAllDocument(id, loading).then((res: any) => {
-    datasetList.value = res.data
-    resolve(datasetList.value)
+    documentList.value = res.data
   })
 }
 
-function getDataset(resolve: any) {
+function getDataset() {
   application.asyncGetApplicationDataset(id, loading).then((res: any) => {
     datasetList.value = res.data
-    resolve(datasetList.value)
   })
 }
 
 const open = (data: any) => {
+  getDataset()
   form.value.chat_id = data.chat_id
   form.value.record_id = data.id
   form.value.problem_text = data.problem_text
   form.value.content = data.answer_text
+  formRef.value?.clearValidate()
   dialogVisible.value = true
 }
 const submitForm = async (formEl: FormInstance | undefined) => {
@@ -171,8 +187,8 @@ const submitForm = async (formEl: FormInstance | undefined) => {
           id,
           form.value.chat_id,
           form.value.record_id,
-          form.value.document[0],
-          form.value.document[1],
+          form.value.dataset_id,
+          form.value.document_id,
           obj,
           loading
         )