feat: 详情工作底稿添加接口并回显数据

src/components/task/components/workDraft.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="work-draft-container">
-    <ht-editor
-      v-model="workingPaperContent"
-      class="working-paper-editor"
-      height="500px"
-      width="100%"
-      :config="editorConfig"
-      :disabled="disabled"
-      @ready="onEditorReady"
-    />
+    <div class="editor-header">
+      <span class="editor-title">工作底稿在线编辑：</span>
+    </div>
+    <div class="editor-wrapper">
+      <ht-editor
+        v-model="workingPaperContent"
+        class="working-paper-editor"
+        height="500px"
+        width="100%"
+        :config="editorConfig"
+        :disabled="disabled"
+        @ready="onEditorReady"
+      />
+    </div>
     <!-- 工作底稿列表 -->
     <!-- <div>
       <el-button
@@ -188,6 +193,7 @@
     getTaskDraftList,
     addTaskDraft,
     deleteTaskDraft,
+    getTaskDraftOnlineEdit,
   } from '@/api/audit/taskDraft'
   import { uploadFile } from '@/api/file'
   export default {
@@ -212,7 +218,7 @@
           excludeMenus: ['image', 'video'],
         },
         // 工作底稿数据
-        workingPaperContent: '工作底稿内容将在这里展示。',
+        workingPaperContent: '',
         // 工作底稿记录列表
         workingPaperRecords: [],
         // 工作底稿弹窗
@@ -244,8 +250,22 @@
         },
       }
     },
+    watch: {
+      id: {
+        handler(newVal) {
+          if (newVal) {
+            this.getWorkingPaperRecords()
+            this.getWorkingPaperContent()
+          }
+        },
+        immediate: true,
+      },
+    },
     mounted() {
-      this.getWorkingPaperRecords()
+      if (this.id) {
+        this.getWorkingPaperRecords()
+        this.getWorkingPaperContent()
+      }
     },
     methods: {
       // 获取工作底稿列表
@@ -299,6 +319,25 @@
         console.log('编辑器已就绪', editor)
         // 可以在这里获取编辑器实例，进行更多操作
       },
+      // 获取工作底稿在线编辑内容
+      async getWorkingPaperContent() {
+        if (!this.id) {
+          return
+        }
+        try {
+          const res = await getTaskDraftOnlineEdit({ taskId: this.id })
+          if (res && res.code === 200 && res.value) {
+            // 回显内容到编辑器
+            this.workingPaperContent = res.value.content || ''
+          } else {
+            // 如果没有数据，初始化为空
+            this.workingPaperContent = ''
+          }
+        } catch (error) {
+          console.error('获取工作底稿在线编辑内容失败:', error)
+          this.workingPaperContent = ''
+        }
+      },
       // 工作底稿操作
       handleAddWorkingPaper() {
         this.isEditWorkingPaper = false
@@ -684,12 +723,41 @@
   }
 </script>
 
-<style scoped>
-  /* .work-draft-container {
-    padding: 20px;
-  } */
+<style scoped lang="scss">
+  .work-draft-container {
+    width: 100%;
+  }
 
-  .working-paper-editor {
+  .editor-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .editor-title {
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .editor-wrapper {
+    width: 100%;
     margin-bottom: 20px;
   }
+
+  .working-paper-editor {
+    width: 100% !important;
+  }
+
+  :deep(.inputs.ht-form-inputs__inline) {
+    width: 100%;
+  }
+
+  :deep(.ht-editor) {
+    width: 100% !important;
+  }
+
+  :deep(.ht-container) {
+    width: 100% !important;
+  }
 </style>