feat: 导入时支持设置分段标题为关联问题(#177) (#392)

Author: shaohuzhang1

ui/src/views/dataset/CreateDataset.vue

@@ -98,6 +98,11 @@ function submit() {
   loading.value = true
   const documents = [] as any
   StepSecondRef.value?.paragraphList.map((item: any) => {
+    if (!StepSecondRef.value?.checkedConnect) {
+      item.content.map((v: any) => {
+        delete v['problem_list']
+      })
+    }
     documents.push({
       name: item.name,
       paragraphs: item.content

ui/src/views/dataset/component/EditParagraphDialog.vue

@@ -1,6 +1,55 @@
 <template>
-  <el-dialog title="编辑分段" v-model="dialogVisible" width="80%" destroy-on-close>
-    <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="true" />
+  <el-dialog
+    title="编辑分段"
+    v-model="dialogVisible"
+    width="80%"
+    destroy-on-close
+    class="paragraph-dialog"
+  >
+    <el-row v-if="isConnect">
+      <el-col :span="18" class="p-24">
+        <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="true" />
+      </el-col>
+      <el-col :span="6" class="border-l" style="width: 300px">
+        <p class="bold title p-24" style="padding-bottom: 0">
+          <span class="flex align-center">
+            <span>关联问题</span>
+            <el-divider direction="vertical" class="mr-4" />
+            <el-button text @click="addProblem">
+              <el-icon><Plus /></el-icon>
+            </el-button>
+          </span>
+        </p>
+        <el-scrollbar height="345px">
+          <div class="p-24" style="padding-top: 16px">
+            <el-input
+              v-if="isAddProblem"
+              v-model="problemValue"
+              placeholder="请选择问题"
+              @change="addProblemHandle"
+              @blur="isAddProblem = false"
+              ref="inputRef"
+            />
+
+            <template v-for="(item, index) in detail.problem_list" :key="index">
+              <TagEllipsis
+                @close="delProblemHandle(item, index)"
+                class="question-tag"
+                type="info"
+                effect="plain"
+                closable
+              >
+                {{ item.content }}
+              </TagEllipsis>
+            </template>
+          </div>
+        </el-scrollbar>
+      </el-col>
+    </el-row>
+    <div v-else class="p-24">
+      <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="true" />
+    </div>
+
     <template #footer>
       <span class="dialog-footer">
         <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
@@ -10,17 +59,26 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, nextTick } from 'vue'
 import { cloneDeep } from 'lodash'
 import ParagraphForm from '@/views/paragraph/component/ParagraphForm.vue'
 
+const props = defineProps({
+  isConnect: Boolean
+})
+
 const emit = defineEmits(['updateContent'])
 
 const dialogVisible = ref<boolean>(false)
 
-const detail = ref({})
+const detail = ref<any>({})
 
 const paragraphFormRef = ref()
+const inputRef = ref()
+
+const isAddProblem = ref(false)
+
+const problemValue = ref('')
 
 watch(dialogVisible, (bool) => {
   if (!bool) {
@@ -32,9 +90,32 @@ const open = (data: any) => {
   detail.value = cloneDeep(data)
   dialogVisible.value = true
 }
+
+function delProblemHandle(item: any, index: number) {
+  detail.value.problem_list.splice(index, 1)
+}
+function addProblemHandle() {
+  if (problemValue.value) {
+    detail.value?.problem_list?.push({
+      content: problemValue.value
+    })
+    problemValue.value = ''
+    isAddProblem.value = false
+  }
+}
+function addProblem() {
+  isAddProblem.value = true
+  nextTick(() => {
+    inputRef.value?.focus()
+  })
+}
+
 const submitHandle = async () => {
   if (await paragraphFormRef.value?.validate()) {
-    emit('updateContent', paragraphFormRef.value?.form)
+    emit('updateContent', {
+      problem_list: detail.value.problem_list,
+      ...paragraphFormRef.value?.form
+    })
     dialogVisible.value = false
   }
 }

ui/src/views/dataset/component/ParagraphPreview.vue

@@ -45,7 +45,11 @@
       </el-tab-pane>
     </template>
   </el-tabs>
-  <EditParagraphDialog ref="EditParagraphDialogRef" @updateContent="updateContent" />
+  <EditParagraphDialog
+    ref="EditParagraphDialogRef"
+    @updateContent="updateContent"
+    :isConnect="isConnect"
+  />
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from 'vue'
@@ -59,7 +63,8 @@ const props = defineProps({
   data: {
     type: Array<any>,
     default: () => []
-  }
+  },
+  isConnect: Boolean
 })
 
 const emit = defineEmits(['update:data'])

ui/src/views/dataset/step/StepSecond.vue

@@ -81,7 +81,12 @@
               </el-radio-group>
             </div>
           </el-scrollbar>
-          <div class="text-right">
+          <div>
+            <el-checkbox v-model="checkedConnect" @change="changeHandle">
+              导入时添加分段标题为关联问题（适用于标题为问题的问答对）
+            </el-checkbox>
+          </div>
+          <div class="text-right mt-8">
             <el-button @click="splitDocument">生成预览</el-button>
           </div>
         </div>
@@ -90,7 +95,7 @@
       <el-col :span="14" class="p-24 border-l">
         <div v-loading="loading">
           <h4 class="title-decoration-1 mb-8">分段预览</h4>
-          <ParagraphPreview v-model:data="paragraphList" />
+          <ParagraphPreview v-model:data="paragraphList" :isConnect="checkedConnect" />
         </div>
       </el-col>
     </el-row>
@@ -110,6 +115,9 @@ const radio = ref('1')
 const loading = ref(false)
 const paragraphList = ref<any[]>([])
 const patternLoading = ref<boolean>(false)
+const checkedConnect = ref<boolean>(false)
+
+const firstChecked = ref(true)
 
 const form = reactive<{
   patterns: Array<string>
@@ -122,6 +130,24 @@ const form = reactive<{
   with_filter: true
 })
 
+function changeHandle(val: boolean) {
+  if (val && firstChecked.value) {
+    const list = paragraphList.value
+    list.map((item: any) => {
+      item.content.map((v: any) => {
+        v['problem_list'] = v.title
+          ? [
+              {
+                content: v.title
+              }
+            ]
+          : []
+      })
+    })
+    paragraphList.value = list
+    firstChecked.value = false
+  }
+}
 function splitDocument() {
   loading.value = true
   let fd = new FormData()
@@ -142,6 +168,20 @@ function splitDocument() {
   documentApi
     .postSplitDocument(fd)
     .then((res: any) => {
+      const list = res.data
+      if (checkedConnect.value) {
+        list.map((item: any) => {
+          item.content.map((v: any) => {
+            v['problem_list'] = v.title
+              ? [
+                  {
+                    content: v.title
+                  }
+                ]
+              : []
+          })
+        })
+      }
       paragraphList.value = res.data
       loading.value = false
     })
@@ -167,7 +207,8 @@ onMounted(() => {
 })
 
 defineExpose({
-  paragraphList
+  paragraphList,
+  checkedConnect
 })
 </script>
 <style scoped lang="scss">