feat: 添加思维导图新增功能，修复问题

src/components/mindmap/Mindmap.vue

@@ -44,7 +44,7 @@ const props = withDefaults(
   }
 );
 
-const emit = defineEmits(["update:data", "nodeDblClick"]);
+const emit = defineEmits(["update:data", "nodeDblClick", "dataChange"]);
 
 const mindmapRef = ref<HTMLDivElement | null>(null);
 const mindmap = ref<MindMap | null>(null);
@@ -148,7 +148,7 @@ onMounted(() => {
   } as any);
 
   // @ts-ignore TODO 临时隐藏Tab新增功能
-  instance.keyCommand.removeShortcut("Tab");
+  // instance.keyCommand.removeShortcut("Tab");
 
   // 事件监听
   // 自适应
@@ -180,6 +180,12 @@ onMounted(() => {
   //   console.log("view_data_change", data);
   // });
 
+  // 数据变化
+  instance.on("data_change_detail", (data: any) => {
+    console.log("data_change", data);
+    emit("dataChange", data);
+  });
+
   mindmap.value = instance;
 });
 

src/pages/excel/ConfigDrawer.vue

@@ -246,55 +246,55 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineExpose, defineEmits } from "vue";
-import type { FormInstance } from "element-plus";
+import { ref, defineExpose, defineEmits } from 'vue';
+import type { FormInstance } from 'element-plus';
 
 const keyMap = {
-  type: "类型",
-  bom_code: "BOM编号",
-  qty: "数量",
-  appreance_treat: "表面处理",
-  color: "颜色",
-  color_config: "颜色配置",
-  customer_part_code: "客户零件号",
-  customer_part_vesion: "客户版本号",
-  erp_code: "ERP号",
-  height: "高",
-  internal_part_number: "内部零件号",
-  length: "长",
-  material_grade: "材料牌号",
-  material_name: "材料名称",
-  net_weight: "每件净重",
-  note: "备注",
-  part_name: "零件名/描述",
-  part_type: "零件类型",
-  process: "生产工艺",
-  rate: "利用率",
-  spec_standards: "规格及标准",
-  supplier: "供应商",
-  technology_consume: "工艺消耗定额",
-  unit: "单位",
-  width: "宽",
+  type: '类型',
+  bom_code: 'BOM编号',
+  qty: '数量',
+  appreance_treat: '表面处理',
+  color: '颜色',
+  color_config: '颜色配置',
+  customer_part_code: '客户零件号',
+  customer_part_vesion: '客户版本号',
+  erp_code: 'ERP号',
+  height: '高',
+  internal_part_number: '内部零件号',
+  length: '长',
+  material_grade: '材料牌号',
+  material_name: '材料名称',
+  net_weight: '每件净重',
+  note: '备注',
+  part_name: '零件名/描述',
+  part_type: '零件类型',
+  process: '生产工艺',
+  rate: '利用率',
+  spec_standards: '规格及标准',
+  supplier: '供应商',
+  technology_consume: '工艺消耗定额',
+  unit: '单位',
+  width: '宽',
 };
 
 const options = [
-  { label: "自制", value: "M" },
-  { label: "外购", value: "P" },
-  { label: "标准件", value: "S" },
-  { label: "领用件", value: "CSMT" },
-  { label: "DB", value: "DB" },
-  { label: "CCC", value: "CCC" },
-  { label: "NA", value: "NA" },
+  { label: '自制', value: 'M' },
+  { label: '外购', value: 'P' },
+  { label: '标准件', value: 'S' },
+  { label: '领用件', value: 'CSMT' },
+  { label: 'DB', value: 'DB' },
+  { label: 'CCC', value: 'CCC' },
+  { label: 'NA', value: 'NA' },
 ];
 
 const visible = ref(false);
 const formData = ref<Record<string, any>>({
-  name: "",
-  type: "",
-  bom_code: "",
+  name: '',
+  type: '',
+  bom_code: '',
   qty: undefined,
   is_change: false,
-  change_content: "",
+  change_content: '',
   is_disable: false,
   bom_det: undefined,
 });
@@ -303,13 +303,16 @@ const loading = ref(false);
 
 // 表单数据
 let originFormData: any = null;
-const emit = defineEmits(["ok"]);
+const emit = defineEmits(['ok']);
 // 节点数据
 const nodeData = ref<any>(null);
-const open = (node: any) => {
+
+const editType = ref<'add' | 'edit'>('edit');
+const open = (node: any, type?: 'add' | 'edit') => {
   visible.value = true;
   nodeData.value = node;
   nodeData.value = node.data;
+  editType.value = type || 'edit';
   try {
     loading.value = true;
     // 测试接口
@@ -336,22 +339,32 @@ const open = (node: any) => {
     //     loading.value = false;
     //   });
 
-    window.parent?.BpmTools?.program(
-      {
-        interfaceCode: "Common.getBOMInfo",
-        bom_id: node.id,
-      },
-      (res: any) => {
-        originFormData = res;
-        formData.value = {
-          ...node.data,
-          ...(res || {}),
-          ...(node.data?.bom_det || {}),
-          bom_det: {},
-        };
-        loading.value = false;
-      }
-    );
+    if (type === 'add') {
+      // 新增
+      originFormData = node.data;
+      formData.value = {
+        ...node.data,
+        bom_det: {},
+      };
+    } else {
+      // 编辑
+      window.parent?.BpmTools?.program(
+        {
+          interfaceCode: 'Common.getBOMInfo',
+          bom_id: node.id,
+        },
+        (res: any) => {
+          originFormData = res;
+          formData.value = {
+            ...node.data,
+            ...(res || {}),
+            ...(node.data?.bom_det || {}),
+            bom_det: {},
+          };
+          loading.value = false;
+        }
+      );
+    }
   } finally {
     loading.value = false;
   }
@@ -371,30 +384,30 @@ const handleSubmit = async () => {
   if (!originFormData) return;
   console.log(originFormData, formData.value);
 
-  let str = "";
+  let str = '';
   Object.entries(formData.value).forEach(([key, value]) => {
     if (
       [
-        "is_change",
-        "change_content",
-        "changecontent",
-        "bom_det",
-        "isActive",
-        "is_disable",
-        "expand",
-        "uid",
-        "name",
-        "type",
+        'is_change',
+        'change_content',
+        'changecontent',
+        'bom_det',
+        'isActive',
+        'is_disable',
+        'expand',
+        'uid',
+        'name',
+        'type',
       ].includes(key)
     ) {
       return;
     }
     // 值发生变化
-    if (value !== originFormData[key]) {
+    if (value !== originFormData[key] && editType.value === 'edit') {
       if (key in keyMap)
-        str += `${str ? "," : ""}${keyMap[key as keyof typeof keyMap]}: ${
-          originFormData[key] ?? "空"
-        }->${value ?? ""}`;
+        str += `${str ? ',' : ''}${keyMap[key as keyof typeof keyMap]}: ${
+          originFormData[key] ?? '空'
+        }->${value ?? ''}`;
       // 更新内部数据
       if (Object.hasOwnProperty.call(nodeData.value || {}, key)) {
         nodeData.value[key] = value;
@@ -411,7 +424,7 @@ const handleSubmit = async () => {
     formData.value.is_change = true;
   }
 
-  emit("ok", {
+  emit('ok', {
     ...(nodeData.value || {}),
     type: formData.value.part_type,
     name: formData.value.part_name,

src/pages/excel/MindmapModal.vue

@@ -91,6 +91,7 @@
         v-model:data="data"
         ref="mindmapRef"
         @node-dbl-click="handleNodeDbClick"
+        @data-change="handleDataChange"
       />
     </div>
     <!-- <div class="mindmap-modal_footer">
@@ -121,6 +122,7 @@ import Mindmap from "@/components/mindmap/Mindmap.vue";
 import ConfigDrawer from "./ConfigDrawer.vue";
 import AutoIcon from "@/assets/auto.svg";
 import saveImg from "@/assets/save.svg";
+import { BOMItem } from "./data";
 
 const props = defineProps<{
   defaultOpen?: boolean;
@@ -278,14 +280,26 @@ const handleConfigOk = (updateNodeData: any) => {
 const handleSave = () => {
   const mindmap = mindmapRef.value?.getInstance();
   const data = mindmap?.getData(false);
-  
+  let valid = true;
+
   bfsWalk(data, (node: any) => {
     delete node.smmVersion;
     delete node.data.uid;
     delete node.data.expand;
     delete node.data.isActive;
+    delete node.data.richText;
+    delete node.data.text;
+    // TODO: 业务校验
+    if (!node.data.name?.trim()) {
+      valid = false;
+    }
   });
 
+  if (!valid) {
+    ElMessage.error("请检查数据是否填写完整！");
+    return;
+  }
+
   console.log("保存数据：", data);
   try {
     window.parent?.BpmTools?.program(
@@ -304,6 +318,25 @@ const handleSave = () => {
   }
 };
 
+// 数据变化 处理新增数据
+const handleDataChange = (newData: any) => {
+  const addItem = newData?.find((item: any) => item.action === 'create');
+  if (addItem) {
+    const newItemData = new BOMItem();
+    console.log("新增数据:", addItem);
+    delete addItem.data.data.text;
+    const newNodeData = {
+      ...(addItem?.data || {}),
+      data: {
+        ...newItemData,
+        ...addItem?.data?.data
+      }
+    };
+    handleConfigOk(newNodeData);
+    configDrawerRef.value.open(newNodeData, 'add');
+  }
+};
+
 watch(
   () => props?.defaultData,
   (val) => {

src/pages/excel/data.ts

@@ -0,0 +1,59 @@
+export class BOMItem {
+  type?: string;                // 类型
+  bom_code?: string;            // BOM编号
+  qty?: number;                 // 数量
+  appreance_treat?: string;     // 表面处理
+  color?: string;               // 颜色
+  color_config?: string;        // 颜色配置
+  customer_part_code?: string;  // 客户零件号
+  customer_part_vesion?: string;// 客户版本号
+  erp_code?: string;           // ERP号
+  height?: number;              // 高
+  internal_part_number?: string;// 内部零件号
+  length?: number;              // 长
+  material_grade?: string;      // 材料牌号
+  material_name?: string;       // 材料名称
+  net_weight?: number;          // 每件净重
+  note?: string;                // 备注
+  part_name?: string;           // 零件名/描述
+  part_type?: string;           // 零件类型
+  process?: string;             // 生产工艺
+  rate?: number;                // 利用率
+  spec_standards?: string;      // 规格及标准
+  supplier?: string;            // 供应商
+  technology_consume?: number;  // 工艺消耗定额
+  unit?: string;                // 单位
+  width?: number;               // 宽
+
+  constructor(init?: Partial<BOMItem>) {
+    this.type = undefined;                // 类型
+    this.bom_code = undefined;            // BOM编号
+    this.qty = undefined;                  // 数量
+    this.appreance_treat = undefined;     // 表面处理
+    this.color = undefined;               // 颜色
+    this.color_config = undefined;        // 颜色配置
+    this.customer_part_code = undefined;  // 客户零件号
+    this.customer_part_vesion = undefined;// 客户版本号
+    this.erp_code = undefined;           // ERP号
+    this.height = undefined;              // 高
+    this.internal_part_number = undefined;// 内部零件号
+    this.length = undefined;              // 长
+    this.material_grade = undefined;      // 材料牌号
+    this.material_name = undefined;       // 材料名称
+    this.net_weight = undefined;          // 每件净重
+    this.note = undefined;                // 备注
+    this.part_name = undefined;           // 零件名/描述
+    this.part_type = undefined;           // 零件类型
+    this.process = undefined;             // 生产工艺
+    this.rate = undefined;                // 利用率
+    this.spec_standards = undefined;      // 规格及标准
+    this.supplier = undefined;            // 供应商
+    this.technology_consume = undefined;  // 工艺消耗定额
+    this.unit = undefined;                // 单位
+    this.width = undefined;               // 宽
+
+    if (init) {
+      Object.assign(this, init);
+    }
+  }
+}

src/pages/mindmap/index.vue

@@ -18,22 +18,22 @@ const mindmapData = ref<any>();
 
 onMounted(() => {
   // 测试接口
-  fetch(`https://sl-yf-bommgr-admin-dev.shalu.com/api/module/Invoke`, {
-    method: "POST",
-    headers: {
-      'Authorization': "bpm_client_1414420693713424384",
-      "content-type": "application/json;charset=UTF-8",
-    },
-    body: JSON.stringify({
-      interfaceCode: "Common.getBOMAiImageData",
-      bom_id: "b9be149a-ea42-4f0c-985e-77bd9adbc8f3",
-    }),
-  })
-    .then((res) => res.json())
-    .then((res) => {
-      console.log("res", res);
-      mindmapData.value = res.result.data;
-    });
+  // fetch(`https://sl-yf-bommgr-admin-dev.shalu.com/api/module/Invoke`, {
+  //   method: "POST",
+  //   headers: {
+  //     'Authorization': "bpm_client_1417910630077173760",
+  //     "content-type": "application/json;charset=UTF-8",
+  //   },
+  //   body: JSON.stringify({
+  //     interfaceCode: "Common.getBOMAiImageData",
+  //     bom_id: "7f492047-5127-45fc-9398-b5effd640f79",
+  //   }),
+  // })
+  //   .then((res) => res.json())
+  //   .then((res) => {
+  //     console.log("res", res);
+  //     mindmapData.value = res.result.data;
+  //   });
 
   if (!route.query?.id) return;
   window.parent?.BpmTools?.program(