准备修改需求详情对话框的布局。

code/web/IT工具综合平台/src/utils/api/LocalStorage.js

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-02-06 14:12:11
  * @LastEditors: Kane
- * @LastEditTime: 2023-02-06 15:52:55
+ * @LastEditTime: 2023-02-08 10:46:41
  * @FilePath: /IT工具综合平台/src/utils/api/LocalStorage.js
  * @Description: 初始化localStorage中保存的值。
  * 
@@ -10,7 +10,7 @@
  */
 
 //常量
-const REQUIREMRNT_UI = "requirement_ui";
+const REQUIREMRNT_UI = `requirement_ui`;
 
 //需求管理模块
 function loadRequirementUI()
@@ -25,7 +25,7 @@ function loadRequirementUI()
     }
     catch (error)
     {
-        console.log("转换requirement-ui失败：", error);
+        console.log(`转换requirement-ui失败：${error}。`);
         requirementUI = {};
     }
 

code/web/IT工具综合平台/src/views/requirement/RequirementManager.vue

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-02-02 22:19:12
  * @LastEditors: Kane
- * @LastEditTime: 2023-02-07 10:48:53
+ * @LastEditTime: 2023-02-08 16:45:11
  * @FilePath: /IT工具综合平台/src/views/requirement/RequirementManager.vue
  * @Description: 
  * 
@@ -191,6 +191,17 @@
                                     <el-input readonly v-model="query_param.select_status"></el-input>
                                 </el-col>
                             </el-row>
+                            <el-row>
+                                <el-col :span="24">
+                                    <div style="border: 1px solid #eee">
+                                        <Toolbar style="border-bottom: 1px solid #eee" :editor="detailEditorRef"
+                                            :defaultConfig="detailToolbarConfig" :mode="mode" />
+                                        <Editor readonly style="height: 200px; overflow-y: hidden;" v-model="valueHtml"
+                                            :defaultConfig="detailEditorConfig" :mode="mode"
+                                            @onCreated="handleDetailEditorCreated" />
+                                    </div>
+                                </el-col>
+                            </el-row>
                         </div>
                     </el-scrollbar>
                 </el-tab-pane>
@@ -208,15 +219,12 @@
                     </el-scrollbar>
                 </el-tab-pane>
                 <el-tab-pane name="comment" label="备注">
-                    <el-scrollbar height="400px">
+                    <div style="border: 1px solid #eee; height: 400px;">
-                        <p>hello world</p>
+                        <Toolbar style="border-bottom: 1px solid #eee" :editor="commentEditorRef"
-                        <p><span style="font-size: 24px;">ejfalsjfoewafsdjfdsfewo;sd;fk</span></p>
+                            :defaultConfig="commentToolbarConfig" :mode="mode" />
-                        <ol>
+                        <Editor readonly style="height: 300px; overflow-y: hidden;" v-model="valueHtml"
-                            <li><span style="color: rgb(225, 60, 57); font-size: 24px;">12344</span></li>
+                            :defaultConfig="commentEditorConfig" :mode="mode" @onCreated="handleCommentEditorCreated" />
-                            <li><span style="font-size: 24px;">33445</span></li>
+                    </div>
-                        </ol>
-                        <p><br></p>
-                    </el-scrollbar>
                 </el-tab-pane>
             </el-tabs>
             <!-- <template #footer>
@@ -229,7 +237,9 @@
 </template>
 
 <script>
-import { reactive, computed, onBeforeMount, onBeforeUnmount } from "vue";
+import '@wangeditor/editor/dist/css/style.css';
+
+import { reactive, computed, shallowRef, onBeforeMount, onBeforeUnmount } from "vue";
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
 import { requirementTestData } from '@/test/data/TestData';
 import { useRouter } from "vue-router";
@@ -239,6 +249,7 @@ import { loadRequirementUI } from "@/utils/api/LocalStorage.js";
 
 export default {
     name: "requirement-manager",
+    components: { Editor, Toolbar, },
     setup()
     {
         const router = useRouter();
@@ -255,6 +266,25 @@ export default {
             });
         //从localStorage加载
         const query_param = reactive(loadRequirementUI());
+        const valueHtml = reactive(`<p>hello</p>`);
+
+        //#region 初始化需求详情页面的editor
+        const detailEditorRef = shallowRef();
+        const detailToolbarConfig = {};
+        const detailEditorConfig = {
+            placeholder: "请输入内容……",
+            readOnly: true,
+        };
+        //#endregion
+
+        //#region 初始化需求详情页面的editor
+        const commentEditorRef = shallowRef();
+        const commentToolbarConfig = {};
+        const commentEditorConfig = {
+            placeholder: "请输入内容……",
+            readOnly: true,
+        };
+        //#endregion
 
         /*计算变量 *****************/
         const tableHeight = computed(() =>
@@ -308,6 +338,16 @@ export default {
             });
         };
 
+        const handleDetailEditorCreated = (editor) =>
+        {
+            detailEditorRef.value = editor;
+        };
+
+        const handleCommentEditorCreated = (editor) =>
+        {
+            commentEditorRef.value = editor;
+        };
+
 
         /*****************************************************
          * 响应显示需求详情的点击事件
@@ -372,6 +412,15 @@ export default {
         onBeforeUnmount(() =>
         {
             onUIChange();
+
+            const detailEditor = detailEditorRef.value;
+
+            if (detailEditor !== null) 
+            {
+                detailEditor.destroy();
+            }
+
+
         });
         //#endregion
 
@@ -381,6 +430,8 @@ export default {
         query_requirement_ui(store.state.requirement, "ErrorPage");
         //#endregion
 
+
+
         //输出控制台
         console.log(store.state.app);
         console.log(store.state.requirement);
@@ -391,10 +442,18 @@ export default {
             requirement_data,
             ui,
             query_param,
+            //组件
+            detailEditorRef,
+            commentEditorRef,
             //计算属性
             tableHeight,
             tableData,
             statusData,
+            detailToolbarConfig,
+            detailEditorConfig,
+            commentToolbarConfig,
+            commentEditorConfig,
+            valueHtml,
             //方法
             editRequirement,
             addNewRequirement,
@@ -403,6 +462,8 @@ export default {
             showRequirementDetail,
             closeRequirementDetail,
             onUIChange,
+            handleDetailEditorCreated,
+            handleCommentEditorCreated,
             //生命周期
             onBeforeMount,
         };