Selaa lähdekoodia

fix: 修改调整mindmap

liaojiaxing 3 viikkoa sitten
vanhempi
commit
dd55b730ef

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 1 - 1
src/assets/save.svg


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 1 - 1
src/assets/warning.svg


+ 4 - 0
src/components/mindmap/Mindmap.vue

@@ -80,6 +80,8 @@ watch(
 );
 
 onMounted(() => {
+  // 默认配置
+  const config = JSON.parse(localStorage.getItem("mindmap-config") || "{}");
   const instance = new MindMap({
     el: mindmapRef.value!,
     data: props.data,
@@ -87,6 +89,8 @@ onMounted(() => {
       ...defaultTheme,
       backgroundColor: "#eee",
     },
+    // 布局
+    layout: config?.layout || 'logicalStructure',
     // 拖拽限制
     beforeDragStart: ([node]: any[]) => {
       console.log("dran start", node.nodeData);

+ 15 - 14
src/pages/excel/ConfigDrawer.vue

@@ -42,17 +42,12 @@
         </el-col>
 
         <el-col :span="12">
-          <el-form-item
-            label="零件名/描述"
-            prop="part_name"
-            :rules="[
-              { required: true, message: '零件名不能为空', trigger: 'blur' },
-            ]"
-          >
-            <el-input placeholder="请输入" v-model="formData.part_name" />
+          <el-form-item label="ERP号" name="erp_code">
+            <el-input placeholder="请输入" v-model="formData.erp_code" />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+
+        <!-- <el-col :span="12">
           <el-form-item
             label="内部零件号"
             name="internal_part_number"
@@ -69,7 +64,7 @@
               v-model="formData.internal_part_number"
             />
           </el-form-item>
-        </el-col>
+        </el-col> -->
 
         <el-col :span="12">
           <el-form-item
@@ -99,8 +94,14 @@
         </el-col>
 
         <el-col :span="12">
-          <el-form-item label="ERP号" name="erp_code">
-            <el-input placeholder="请输入" v-model="formData.erp_code" />
+          <el-form-item
+            label="零件名/描述"
+            prop="part_name"
+            :rules="[
+              { required: true, message: '零件名不能为空', trigger: 'blur' },
+            ]"
+          >
+            <el-input placeholder="请输入" v-model="formData.part_name" />
           </el-form-item>
         </el-col>
 
@@ -136,11 +137,11 @@
             <el-input placeholder="请输入" v-model="formData.color" />
           </el-form-item>
         </el-col>
-        <el-col :span="24">
+        <!-- <el-col :span="24">
           <el-form-item label="颜色配置" name="color_config">
             <el-input placeholder="请输入" v-model="formData.color_config" />
           </el-form-item>
-        </el-col>
+        </el-col> -->
       </el-row>
 
       <el-row :gutter="8">

+ 25 - 22
src/pages/excel/MindmapModal.vue

@@ -1,20 +1,5 @@
 <template>
   <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">
       <el-form ref="formRef" :model="formData" class="flex items-center" inline>
         <el-form-item label="收缩至" prop="level" class="mr-12px">
@@ -56,6 +41,9 @@
         </el-form-item>
       </el-form>
       <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-button
             type="default"
@@ -98,7 +86,6 @@
         </el-tooltip>
       </div>
     </div>
-
     <div class="mindmap-modal_body">
       <Mindmap
         v-model:data="data"
@@ -106,6 +93,8 @@
         @node-dbl-click="handleNodeDbClick"
       />
     </div>
+    <!-- <div class="mindmap-modal_footer">
+    </div> -->
   </div>
 
   <ConfigDrawer ref="configDrawerRef" @ok="handleConfigOk"/>
@@ -116,7 +105,7 @@ import { ref, defineExpose, reactive, defineProps, watch } from "vue";
 import {
   Aim,
   // CirclePlusFilled,
-  Close,
+  // Close,
   InfoFilled,
   Search,
   ZoomIn,
@@ -153,12 +142,26 @@ const data = ref(
     children: [],
   }
 );
+
+// 1、初次读取本地缓存配置
+const defaultConfig = JSON.parse(localStorage.getItem("mindmap-config") || "{}");
 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 mindmap = mindmapRef.value?.getInstance();
@@ -327,13 +330,13 @@ defineExpose({
   display: flex;
   flex-direction: column;
   align-items: center;
-  &_header {
+  &_footer {
     height: 40px;
     width: 100%;
     box-sizing: border-box;
     background: #fff;
     display: flex;
-    justify-content: space-between;
+    // justify-content: end;
     align-items: center;
     padding: 0 20px;
     line-height: 40px;