|
@@ -1,20 +1,5 @@
|
|
<template>
|
|
<template>
|
|
<div v-if="visible" class="mindmap-modal" style="user-select: none">
|
|
<div v-if="visible" class="mindmap-modal" style="user-select: none">
|
|
- <div class="mindmap-modal_header">
|
|
|
|
- <div class="text-xl font-semibold">查看“BOM物料名称”</div>
|
|
|
|
- <div>
|
|
|
|
- <el-button link @click="handleSave" class="mr-8px"
|
|
|
|
- ><img class="w-1em mr-4px" :src="saveImg" />保存</el-button
|
|
|
|
- >
|
|
|
|
- <el-button
|
|
|
|
- v-if="!hideClose"
|
|
|
|
- link
|
|
|
|
- @click="close"
|
|
|
|
- :icon="Close"
|
|
|
|
- style="font-size: 1.2em"
|
|
|
|
- ></el-button>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
<div class="mindmap-modal_tool">
|
|
<div class="mindmap-modal_tool">
|
|
<el-form ref="formRef" :model="formData" class="flex items-center" inline>
|
|
<el-form ref="formRef" :model="formData" class="flex items-center" inline>
|
|
<el-form-item label="收缩至" prop="level" class="mr-12px">
|
|
<el-form-item label="收缩至" prop="level" class="mr-12px">
|
|
@@ -56,6 +41,9 @@
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
<div class="flex gap-4px">
|
|
<div class="flex gap-4px">
|
|
|
|
+ <el-button type="primary" link @click="handleSave" class="mr-8px"
|
|
|
|
+ ><img class="w-1em mr-4px" :src="saveImg" />保存</el-button
|
|
|
|
+ >
|
|
<!-- <el-tooltip content="添加">
|
|
<!-- <el-tooltip content="添加">
|
|
<el-button
|
|
<el-button
|
|
type="default"
|
|
type="default"
|
|
@@ -98,7 +86,6 @@
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
<div class="mindmap-modal_body">
|
|
<div class="mindmap-modal_body">
|
|
<Mindmap
|
|
<Mindmap
|
|
v-model:data="data"
|
|
v-model:data="data"
|
|
@@ -106,6 +93,8 @@
|
|
@node-dbl-click="handleNodeDbClick"
|
|
@node-dbl-click="handleNodeDbClick"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
+ <!-- <div class="mindmap-modal_footer">
|
|
|
|
+ </div> -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<ConfigDrawer ref="configDrawerRef" @ok="handleConfigOk"/>
|
|
<ConfigDrawer ref="configDrawerRef" @ok="handleConfigOk"/>
|
|
@@ -116,7 +105,7 @@ import { ref, defineExpose, reactive, defineProps, watch } from "vue";
|
|
import {
|
|
import {
|
|
Aim,
|
|
Aim,
|
|
// CirclePlusFilled,
|
|
// CirclePlusFilled,
|
|
- Close,
|
|
|
|
|
|
+ // Close,
|
|
InfoFilled,
|
|
InfoFilled,
|
|
Search,
|
|
Search,
|
|
ZoomIn,
|
|
ZoomIn,
|
|
@@ -153,12 +142,26 @@ const data = ref(
|
|
children: [],
|
|
children: [],
|
|
}
|
|
}
|
|
);
|
|
);
|
|
|
|
+
|
|
|
|
+// 1、初次读取本地缓存配置
|
|
|
|
+const defaultConfig = JSON.parse(localStorage.getItem("mindmap-config") || "{}");
|
|
const formData = reactive({
|
|
const formData = reactive({
|
|
- level: undefined,
|
|
|
|
- layout: "logicalStructure",
|
|
|
|
- search: "",
|
|
|
|
|
|
+ level: defaultConfig?.level,
|
|
|
|
+ layout: defaultConfig?.layout ?? "logicalStructure",
|
|
|
|
+ search: defaultConfig?.search || "",
|
|
});
|
|
});
|
|
|
|
|
|
|
|
+// 2、监听配置项变化,保存到本地缓存
|
|
|
|
+watch(
|
|
|
|
+ () => formData,
|
|
|
|
+ (val) => {
|
|
|
|
+ localStorage.setItem("mindmap-config", JSON.stringify(val));
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ deep: true
|
|
|
|
+ }
|
|
|
|
+);
|
|
|
|
+
|
|
// 定位到根节点
|
|
// 定位到根节点
|
|
const zoomToRoot = () => {
|
|
const zoomToRoot = () => {
|
|
const mindmap = mindmapRef.value?.getInstance();
|
|
const mindmap = mindmapRef.value?.getInstance();
|
|
@@ -327,13 +330,13 @@ defineExpose({
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
align-items: center;
|
|
- &_header {
|
|
|
|
|
|
+ &_footer {
|
|
height: 40px;
|
|
height: 40px;
|
|
width: 100%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
background: #fff;
|
|
display: flex;
|
|
display: flex;
|
|
- justify-content: space-between;
|
|
|
|
|
|
+ // justify-content: end;
|
|
align-items: center;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
padding: 0 20px;
|
|
line-height: 40px;
|
|
line-height: 40px;
|