准备修改需求详情对话框的布局。
This commit is contained in:
@@ -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 = {};
|
||||
}
|
||||
|
||||
|
||||
@@ -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">
|
||||
<p>hello world</p>
|
||||
<p><span style="font-size: 24px;">ejfalsjfoewafsdjfdsfewo;sd;fk</span></p>
|
||||
<ol>
|
||||
<li><span style="color: rgb(225, 60, 57); font-size: 24px;">12344</span></li>
|
||||
<li><span style="font-size: 24px;">33445</span></li>
|
||||
</ol>
|
||||
<p><br></p>
|
||||
</el-scrollbar>
|
||||
<div style="border: 1px solid #eee; height: 400px;">
|
||||
<Toolbar style="border-bottom: 1px solid #eee" :editor="commentEditorRef"
|
||||
:defaultConfig="commentToolbarConfig" :mode="mode" />
|
||||
<Editor readonly style="height: 300px; overflow-y: hidden;" v-model="valueHtml"
|
||||
:defaultConfig="commentEditorConfig" :mode="mode" @onCreated="handleCommentEditorCreated" />
|
||||
</div>
|
||||
</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,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user