feat(knowledge): 题词结果预览增加编辑和保存功能

- 在 ExtractPreview 组件中添加编辑和保存功能
- 实现 extractUpdate API 用于保存题词结果
- 优化题词结果的展示，使用 r-table组件
- 添加直接上传至知识库的按钮

src/api/generatedApi/index.js

@@ -208,6 +208,16 @@ export function saveContentToDocument(data) {
     data
   })
 }
+
+// 题词-保存
+export function extractUpdate(data) {
+  return request({
+    url: getUrl(`/datasetDocumentEx/extract/update`),
+    method: 'post',
+    data
+  })
+}
+
 //知识库文件上传-自定义
 // export function uploadFileByCustom(data) {
 //   return request({

src/views/knowledge/detail/components/words/ExtractPreview.vue

@@ -1,31 +1,52 @@
 <!-- src/views/knowledge/detail/components/words/ExtractPreview.vue -->
 <template>
   <div class="extract-preview">
-    <r-dialog title="题词结果预览" :visible.sync="visible" width="700px" :close-on-click-modal="false">
+    <r-dialog
+      title="题词结果预览"
+      :visible.sync="visible"
+      width="700px"
+      :close-on-click-modal="false"
+    >
       <div class="preview-content">
         <template v-if="extractResults && extractResults.length > 0">
-          <el-table :data="extractResults" border style="width: 100%">
-            <el-table-column prop="attribute" label="属性" align="center" width="180"></el-table-column>
-            <el-table-column prop="attributeContent" label="题词内容" align="center">
-              <template slot-scope="scope">
-                <el-input v-model="scope.row.attributeContent"></el-input>
-              </template>
-            </el-table-column>
-          </el-table>
+          <r-table
+            :columns="columns"
+            :data="extractResults"
+            :deletion="false"
+          ></r-table>
         </template>
-        <el-empty v-else-if="!extractResults || extractResults.length === 0" description="暂无题词结果"></el-empty>
+        <el-empty
+          v-else-if="!extractResults || extractResults.length === 0"
+          description="暂无题词结果"
+        ></el-empty>
       </div>
 
       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="handleConfirm" size="medium">完成</el-button>
+        <el-button type="primary" @click="editTable" size="medium">{{
+          isEdit ? '保存' : '编辑'
+        }}</el-button>
+        <el-button
+          class="line-button"
+          type="primary"
+          @click="handleConfirm"
+          size="medium"
+          >直接上传至知识库</el-button
+        >
       </span>
     </r-dialog>
   </div>
 </template>
 
 <script>
+import { extractUpdate, saveContentToDocument } from '@/api/generatedApi'
+
 export default {
   name: 'ExtractPreview',
+  data() {
+    return {
+      isEdit: false
+    }
+  },
   props: {
     visible: {
       type: Boolean,
@@ -40,7 +61,61 @@ export default {
       default: false
     }
   },
+  computed: {
+    columns: vm => {
+      return [
+        {
+          prop: 'attribute',
+          label: '属性',
+          width: 90
+        },
+        {
+          prop: 'attributeContent',
+          label: '题词内容',
+          render: (h, p) => {
+            return h('el-input', {
+              props: {
+                value: p.row.attributeContent,
+                size: 'medium',
+                disabled: !vm.isEdit
+              },
+              on: {
+                input: value => {
+                  p.row.attributeContent = value
+                }
+              }
+            })
+          }
+        }
+      ]
+    }
+  },
   methods: {
+    editTable() {
+      if (!this.isEdit) {
+        this.isEdit = true
+      } else {
+        let params = {
+          documentId: this.$route.query.documentId,
+          resultDTOList: this.extractResults.map(item => ({
+            id: item.id,
+            attribute: item.attribute,
+            attributeContent: item.attributeContent
+          }))
+        }
+        extractUpdate(params).then(res => {
+          if (res) {
+            this.$message.success('保存成功')
+            // 使用 push 的方式返回，防止出现页面异常跳转的问题
+            // this.$router.go(-1)
+            // this.$router.replace({
+            //   path: '/knowledge/detail',
+            //   query: { ...this.$route.query }
+            // })
+          }
+        })
+      }
+    },
     handleClose() {
       this.$emit('update:visible', false)
     },