From 8b23ce18d004548a2e1a00158f81b8ecb3d0c8f0 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 15 Nov 2023 14:27:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=AE=B5=E8=90=BD=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/env.d.ts                                   |   4 +-
 ui/src/api/dataset.ts                         |  52 ++++++-
 .../paragraph/component/ParagraphDialog.vue   |  92 +++++------
 .../paragraph/component/ParagraphForm.vue     |   8 +-
 .../paragraph/component/ProblemComponent.vue  | 145 ++++++++++++++++++
 ui/src/views/paragraph/index.vue              |   4 +-
 6 files changed, 252 insertions(+), 53 deletions(-)
 create mode 100644 ui/src/views/paragraph/component/ProblemComponent.vue

diff --git a/ui/env.d.ts b/ui/env.d.ts
index eafd0b249..b60e90374 100644
--- a/ui/env.d.ts
+++ b/ui/env.d.ts
@@ -1,4 +1,4 @@
 /// <reference types="vite/client" />
 interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}
+  readonly env: ImportMetaEnv
+}
\ No newline at end of file
diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index 10a19fbbc..845ddf6e6 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -186,7 +186,7 @@ const getParagraph: (dataset_id: string, document_id: string) => Promise<Result<
 
 /**
  * 删除段落
- * @param 参数 dataset_id, document_id, document_id
+ * @param 参数 dataset_id, document_id, paragraph_id
  */
 const delParagraph: (
   dataset_id: string,
@@ -245,6 +245,51 @@ const putParagraph: (
   return put(`${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}`, data)
 }
 
+/**
+ * 问题列表
+ * @param 参数 dataset_id，document_id，paragraph_id
+ */
+const getProblem: (dataset_id: string, document_id: string, paragraph_id: string) => Promise<Result<any>> = (
+  dataset_id,
+  document_id,
+  paragraph_id: string,
+) => {
+  return get(`${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}/problem`)
+}
+
+/**
+ * 创建问题
+ * @param 参数 
+ * dataset_id, document_id, paragraph_id
+ * {
+      "id": "string",
+      content": "string"
+    }
+ */
+const postProblem: (
+  dataset_id: string,
+  document_id: string,
+  paragraph_id: string,
+  data: any
+) => Promise<Result<any>> = (dataset_id, document_id, paragraph_id, data: any) => {
+  return post(
+    `${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}/problem`,
+    data
+  )
+}
+/**
+ * 删除问题
+ * @param 参数 dataset_id, document_id, paragraph_id,problem_id
+ */
+const delProblem: (
+  dataset_id: string,
+  document_id: string,
+  paragraph_id: string,
+  problem_id: string,
+) => Promise<Result<boolean>> = (dataset_id, document_id, paragraph_id,problem_id) => {
+  return del(`${prefix}/${dataset_id}/document/${document_id}/paragraph/${paragraph_id}/problem/${problem_id}`)
+}
+
 export default {
   getDateset,
   getAllDateset,
@@ -261,5 +306,8 @@ export default {
   getParagraph,
   delParagraph,
   putParagraph,
-  postParagraph
+  postParagraph,
+  getProblem,
+  postProblem,
+  delProblem
 }
diff --git a/ui/src/views/paragraph/component/ParagraphDialog.vue b/ui/src/views/paragraph/component/ParagraphDialog.vue
index f25f98bec..4f7bc34b4 100644
--- a/ui/src/views/paragraph/component/ParagraphDialog.vue
+++ b/ui/src/views/paragraph/component/ParagraphDialog.vue
@@ -6,48 +6,45 @@
     class="paragraph-dialog"
     destroy-on-close
   >
-    <el-row>
+    <el-row v-loading="loading">
       <el-col :span="16" class="p-24">
-        <div class="flex-between mb-16">
-          <div class="bold title align-center">分段内容</div>
-          <el-button text v-if="pId">
-            <el-icon><EditPen /></el-icon>
-          </el-button>
-        </div>
+        <el-scrollbar>
+          <div style="height: 350px">
+            <div class="flex-between mb-16">
+              <div class="bold title align-center">分段内容</div>
+              <el-button text @click="isEdit = true" v-if="problemId && !isEdit">
+                <el-icon><EditPen /></el-icon>
+              </el-button>
+            </div>
 
-        <ParagraphForm ref="paragraphFormRef" :data="detail" />
-        <div class="text-right">
-          <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
-          <el-button type="primary" :disabled="loading" @click="submitHandle"> 保存 </el-button>
-        </div>
+            <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="isEdit" />
+          </div>
+
+          <div class="text-right" v-if="problemId && isEdit">
+            <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+            <el-button type="primary" :disabled="loading" @click="submitHandle"> 保存 </el-button>
+          </div>
+        </el-scrollbar>
       </el-col>
       <el-col :span="8" class="border-l p-24">
-        <p class="bold title mb-16">
-          关联问题 <el-divider direction="vertical" />
-          <el-button text>
-            <el-icon><Plus /></el-icon>
-          </el-button>
-        </p>
-        <el-input
-          v-model="questionValue"
-          @change="addQuestion"
-          placeholder="请输入问题，回车保存"
-          class="mb-8"
-        />
-        <template v-for="(item, index) in questionList" :key="index">
-          <TagEllipsis class="question-tag" type="info" effect="plain" closable>
-            {{ item.content }}
-          </TagEllipsis>
-        </template>
+        <!-- 关联问题 -->
+        <ProblemComponent :problemId="problemId" ref="ProblemRef" />
       </el-col>
     </el-row>
+    <template #footer v-if="!problemId">
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submitHandle"> 提交 </el-button>
+      </span>
+    </template>
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, nextTick } from 'vue'
 import { useRoute } from 'vue-router'
 import type { FormInstance, FormRules } from 'element-plus'
 import ParagraphForm from '@/views/paragraph/component/ParagraphForm.vue'
+import ProblemComponent from '@/views/paragraph/component/ProblemComponent.vue'
 import datasetApi from '@/api/dataset'
 import useStore from '@/stores'
 
@@ -64,33 +61,30 @@ const {
 
 const emit = defineEmits(['refresh'])
 
+const ProblemRef = ref()
 const paragraphFormRef = ref<FormInstance>()
 
 const dialogVisible = ref<boolean>(false)
 
 const loading = ref(false)
-const pId = ref('')
+const problemId = ref('')
 const detail = ref<any>({})
 const isEdit = ref(false)
 
-const questionValue = ref('')
-const questionList = ref<any[]>([])
-
 watch(dialogVisible, (bool) => {
   if (!bool) {
-    pId.value = ''
+    problemId.value = ''
     detail.value = {}
     isEdit.value = false
   }
 })
 
-function addQuestion() {}
-
 const open = (data: any) => {
   if (data) {
     detail.value.title = data.title
     detail.value.content = data.content
-    pId.value = data.id
+    problemId.value = data.id
+  } else {
     isEdit.value = true
   }
   dialogVisible.value = true
@@ -98,10 +92,10 @@ const open = (data: any) => {
 const submitHandle = async () => {
   if (await paragraphFormRef.value?.validate()) {
     loading.value = true
-    if (id) {
+    if (problemId.value) {
       paragraph
-        .asyncPutParagraph(datasetId, documentId, pId, paragraphFormRef.value?.form)
-        .then((res) => {
+        .asyncPutParagraph(datasetId, documentId, problemId.value, paragraphFormRef.value?.form)
+        .then(() => {
           emit('refresh')
           loading.value = false
           dialogVisible.value = false
@@ -110,8 +104,15 @@ const submitHandle = async () => {
           loading.value = false
         })
     } else {
+      const obj =
+        ProblemRef.value.problemList.length > 0
+          ? {
+              problem_list: ProblemRef.value.problemList,
+              ...paragraphFormRef.value?.form
+            }
+          : paragraphFormRef.value?.form
       datasetApi
-        .postParagraph(datasetId, documentId, paragraphFormRef.value?.form)
+        .postParagraph(datasetId, documentId, obj)
         .then((res) => {
           emit('refresh')
           loading.value = false
@@ -135,11 +136,12 @@ defineExpose({ open })
     border-top: 1px solid var(--el-border-color);
     padding: 0 !important;
   }
+  .el-dialog__footer {
+    padding-top: 16px;
+    border-top: 1px solid var(--el-border-color);
+  }
   .title {
     color: var(--app-text-color);
   }
-  .question-tag {
-    width: 217px;
-  }
 }
 </style>
diff --git a/ui/src/views/paragraph/component/ParagraphForm.vue b/ui/src/views/paragraph/component/ParagraphForm.vue
index e940b4b82..6b3b96fd5 100644
--- a/ui/src/views/paragraph/component/ParagraphForm.vue
+++ b/ui/src/views/paragraph/component/ParagraphForm.vue
@@ -1,10 +1,12 @@
 <template>
   <el-form ref="paragraphFormRef" :model="form" label-position="top" :rules="rules" @submit.prevent>
     <el-form-item label="分段标题">
-      <el-input v-model="form.title" placeholder="请输入分段标题"> </el-input>
+      <el-input v-if="isEdit" v-model="form.title" placeholder="请输入分段标题"> </el-input>
+      <span v-else>{{ form.title }}</span>
     </el-form-item>
     <el-form-item label="分段内容" prop="content">
       <el-input
+        v-if="isEdit"
         v-model="form.content"
         placeholder="请输入分段内容"
         maxlength="1024"
@@ -13,6 +15,7 @@
         type="textarea"
       >
       </el-input>
+      <span v-else>{{ form.content }}</span>
     </el-form-item>
   </el-form>
 </template>
@@ -24,7 +27,8 @@ const props = defineProps({
   data: {
     type: Object,
     default: () => {}
-  }
+  },
+  isEdit: Boolean
 })
 
 const form = ref<any>({
diff --git a/ui/src/views/paragraph/component/ProblemComponent.vue b/ui/src/views/paragraph/component/ProblemComponent.vue
new file mode 100644
index 000000000..76ec50262
--- /dev/null
+++ b/ui/src/views/paragraph/component/ProblemComponent.vue
@@ -0,0 +1,145 @@
+<template>
+  <p class="bold title mb-16">
+    关联问题 <el-divider direction="vertical" />
+    <el-button text @click="addProblem">
+      <el-icon><Plus /></el-icon>
+    </el-button>
+  </p>
+  <div v-loading="loading" style="height: 350px">
+    <el-scrollbar>
+      <el-input
+        ref="inputRef"
+        v-if="isAddProblem"
+        v-model="problemValue"
+        @change="addProblemHandle"
+        placeholder="请输入问题，回车保存"
+        class="mb-8"
+        autofocus
+      />
+
+      <template v-for="(item, index) in problemList" :key="index">
+        <TagEllipsis
+          @close="delProblemHandle(item, index)"
+          class="question-tag"
+          type="info"
+          effect="plain"
+          closable
+        >
+          {{ item.content }}
+        </TagEllipsis>
+      </template>
+    </el-scrollbar>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, nextTick, onMounted, onUnmounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import datasetApi from '@/api/dataset'
+
+const props = defineProps({
+  problemId: String
+})
+
+const route = useRoute()
+const {
+  params: { datasetId, documentId }
+} = route as any
+
+const inputRef = ref()
+const loading = ref(false)
+const isAddProblem = ref(false)
+
+const problemValue = ref('')
+const problemList = ref<any[]>([])
+
+watch(
+  () => props.problemId,
+  (value) => {
+    if (value) {
+      getProblemList()
+    }
+  },
+  {
+    // 初始化立即执行
+    immediate: true
+  }
+)
+
+function delProblemHandle(item: any, index: number) {
+  loading.value = true
+  if (item.id) {
+    datasetApi
+      .delProblem(datasetId, documentId, props.problemId || '', item.id)
+      .then((res) => {
+        getProblemList()
+      })
+      .catch(() => {
+        loading.value = false
+      })
+  } else {
+    problemList.value.splice(index, 1)
+    loading.value = false
+  }
+}
+
+function getProblemList() {
+  loading.value = true
+  datasetApi
+    .getProblem(datasetId, documentId, props.problemId || '')
+    .then((res) => {
+      problemList.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function addProblem() {
+  isAddProblem.value = true
+  nextTick(() => {
+    inputRef.value?.focus()
+  })
+}
+function addProblemHandle(val: string) {
+  if (val) {
+    const obj = {
+      content: val
+    }
+    loading.value = true
+    if (props.problemId) {
+      datasetApi
+        .postProblem(datasetId, documentId, props.problemId, obj)
+        .then((res) => {
+          getProblemList()
+          problemValue.value = ''
+          isAddProblem.value = false
+        })
+        .catch(() => {
+          loading.value = false
+        })
+    } else {
+      problemList.value.unshift(obj)
+      problemValue.value = ''
+      isAddProblem.value = false
+      loading.value = false
+    }
+  }
+}
+
+onMounted(() => {})
+onUnmounted(() => {
+  problemList.value = []
+  problemValue.value = ''
+  isAddProblem.value = false
+})
+
+defineExpose({
+  problemList
+})
+</script>
+<style scoped lang="scss">
+.question-tag {
+  width: 217px;
+}
+</style>
diff --git a/ui/src/views/paragraph/index.vue b/ui/src/views/paragraph/index.vue
index 39dfeb4d1..699970e3c 100644
--- a/ui/src/views/paragraph/index.vue
+++ b/ui/src/views/paragraph/index.vue
@@ -5,7 +5,7 @@
         <el-button @click="addParagraph" type="primary" :disabled="loading"> 添加分段 </el-button>
       </div>
     </template>
-    <div class="document-detail__main p-16">
+    <div class="document-detail__main p-16" v-loading="loading">
       <div class="flex-between p-8">
         <span>{{ paragraphDetail.length }} 段落</span>
         <el-input
@@ -23,7 +23,7 @@
         </el-input>
       </div>
       <el-scrollbar>
-        <div class="document-detail-height" v-loading="loading">
+        <div class="document-detail-height">
           <el-row>
             <el-col
               :xs="24"