瀏覽代碼

fix: 修改新增参数等

liaojiaxing 1 周之前
父節點
當前提交
f8146f5e72
共有 4 個文件被更改,包括 88 次插入65 次删除
  1. 10 5
      src/components/mindmap/Mindmap.vue
  2. 2 2
      src/pages/excel/ConfigDrawer.vue
  3. 75 57
      src/pages/excel/MindmapModal.vue
  4. 1 1
      src/pages/mindmap/index.vue

+ 10 - 5
src/components/mindmap/Mindmap.vue

@@ -104,6 +104,7 @@ onMounted(() => {
     customCreateNodeContent: (node: any) => {
       const sourceData = node.nodeData;
       const data = sourceData.data;
+      const id = sourceData.id;
 
       const App = defineComponent({
         render() {
@@ -131,6 +132,9 @@ onMounted(() => {
                   <img src={changIco} class="w-20px h-20px inline-block" />
                 </ElTooltip>
               )}
+              {!id && (
+                <span class="bg-green leading-14px text-12px px-4px py-2px text-#fff rounded-4px">new</span>
+              )}
             </div>
           );
         },
@@ -166,13 +170,15 @@ onMounted(() => {
 
   // 数据改变
   instance.on("data_change", (data: any) => {
-    console.log("data_change", data);
     emit("update:data", data);
   });
 
   // 节点双击
-  instance.on("node_dblclick", () => {
-    emit("nodeDblClick", activeNodeList.value[0]);
+  instance.on("node_dblclick", (...args: any) => {
+    // 新增也会触发该事件,所以需要判断一下
+    if (args?.[1]) {
+      emit("nodeDblClick", args[0]);
+    } 
   });
 
   // 视图数据改变
@@ -180,9 +186,8 @@ onMounted(() => {
   //   console.log("view_data_change", data);
   // });
 
-  // 数据变化
+  // 数据变化详情 delete create update
   instance.on("data_change_detail", (data: any) => {
-    console.log("data_change", data);
     emit("dataChange", data);
   });
 

+ 2 - 2
src/pages/excel/ConfigDrawer.vue

@@ -313,6 +313,7 @@ const open = (node: any, type?: 'add' | 'edit') => {
   nodeData.value = node;
   nodeData.value = node.data;
   editType.value = type || 'edit';
+  form.value?.resetFields();
   try {
     loading.value = true;
     // 测试接口
@@ -339,7 +340,7 @@ const open = (node: any, type?: 'add' | 'edit') => {
     //     loading.value = false;
     //   });
 
-    if (type === 'add') {
+    if (type === 'add' || !node.id) {
       // 新增
       originFormData = node.data;
       formData.value = {
@@ -382,7 +383,6 @@ const handleSubmit = async () => {
   if (!valid) return;
   // 获取变更之前的数据
   if (!originFormData) return;
-  console.log(originFormData, formData.value);
 
   let str = '';
   Object.entries(formData.value).forEach(([key, value]) => {

+ 75 - 57
src/pages/excel/MindmapModal.vue

@@ -44,14 +44,14 @@
         <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
             type="default"
             circle
             :icon="CirclePlusFilled"
             @click="addNode"
           />
-        </el-tooltip> -->
+        </el-tooltip>
         <el-tooltip content="详情">
           <el-button
             type="default"
@@ -98,31 +98,31 @@
     </div> -->
   </div>
 
-  <ConfigDrawer ref="configDrawerRef" @ok="handleConfigOk"/>
+  <ConfigDrawer ref="configDrawerRef" @ok="handleConfigOk" />
 </template>
 
 <script setup lang="ts">
-import { ref, defineExpose, reactive, defineProps, watch } from "vue";
+import { ref, defineExpose, reactive, defineProps, watch } from 'vue';
 import {
   Aim,
-  // CirclePlusFilled,
+  CirclePlusFilled,
   // Close,
   InfoFilled,
   Search,
   ZoomIn,
   ZoomOut,
-} from "@element-plus/icons-vue";
-import type { MindMapInstance } from "@/components/mindmap/Mindmap.vue";
-import type { FormInstance } from "element-plus";
-import { ElMessage } from "element-plus";
-import { bfsWalk, walk } from "simple-mind-map/src/utils";
+} from '@element-plus/icons-vue';
+import type { MindMapInstance } from '@/components/mindmap/Mindmap.vue';
+import type { FormInstance } from 'element-plus';
+import { ElMessage } from 'element-plus';
+import { bfsWalk, walk } from 'simple-mind-map/src/utils';
 // import { useEditBomStore } from "@/store/editbom";
 
-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";
+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;
@@ -134,33 +134,36 @@ const visible = ref(!!props.defaultOpen);
 const mindmapRef = ref<MindMapInstance>();
 const configDrawerRef = ref();
 const formRef = ref<FormInstance>();
+const delIds = ref<string[]>([]); // 记录删除的节点id
 // const editBomStore = useEditBomStore();
 const data = ref(
   props?.defaultData || {
-    id: "root",
+    id: 'root',
     data: {
-      name: "根节点",
+      name: '根节点',
     },
     children: [],
   }
 );
 
 // 1、初次读取本地缓存配置
-const defaultConfig = JSON.parse(localStorage.getItem("mindmap-config") || "{}");
+const defaultConfig = JSON.parse(
+  localStorage.getItem('mindmap-config') || '{}'
+);
 const formData = reactive({
   level: defaultConfig?.level,
-  layout: defaultConfig?.layout ?? "logicalStructure",
-  search: defaultConfig?.search || "",
+  layout: defaultConfig?.layout ?? 'logicalStructure',
+  search: defaultConfig?.search || '',
 });
 
 // 2、监听配置项变化,保存到本地缓存
 watch(
   () => formData,
   (val) => {
-    localStorage.setItem("mindmap-config", JSON.stringify(val));
+    localStorage.setItem('mindmap-config', JSON.stringify(val));
   },
   {
-    deep: true
+    deep: true,
   }
 );
 
@@ -179,7 +182,7 @@ const changeLayout = (value: string) => {
   const mindmap = mindmapRef.value?.getInstance();
   mindmap?.setLayout(value);
   let fited = false;
-  mindmap?.on("node_tree_render_end", () => {
+  mindmap?.on('node_tree_render_end', () => {
     // @ts-ignore
     !fited && mindmap?.view?.fit();
     fited = true;
@@ -189,7 +192,7 @@ const changeLayout = (value: string) => {
 // 切换层级
 const changeLevel = (level: number) => {
   const mindmap = mindmapRef.value?.getInstance();
-  mindmap?.execCommand("UNEXPAND_TO_LEVEL", level);
+  mindmap?.execCommand('UNEXPAND_TO_LEVEL', level);
 };
 
 const autoFit = () => {
@@ -202,7 +205,7 @@ const autoFit = () => {
 const openNodeDetail = () => {
   const activeList = mindmapRef.value?.getActiveNodeList();
   if (!activeList?.length) {
-    ElMessage.warning("请选择查看节点");
+    ElMessage.warning('请选择查看节点');
     return;
   }
   configDrawerRef.value.open(activeList[0].nodeData);
@@ -221,23 +224,23 @@ const handleZoom = (num: number) => {
 };
 
 // 添加节点
-// const addNode = () => {
-//   const mindmap = mindmapRef.value?.getInstance();
-//   const activeList = mindmapRef.value?.getActiveNodeList();
-//   if (!activeList?.length) {
-//     ElMessage.warning("请选择父节点");
-//     return;
-//   }
+const addNode = () => {
+  const mindmap = mindmapRef.value?.getInstance();
+  const activeList = mindmapRef.value?.getActiveNodeList();
+  if (!activeList?.length) {
+    ElMessage.warning('请选择父节点');
+    return;
+  }
 
-//   mindmap?.execCommand("INSERT_CHILD_NODE");
-// };
+  mindmap?.execCommand('INSERT_CHILD_NODE');
+};
 
 // 搜索
 const handleSearch = () => {
   const result: any[] = [];
   const mindmap = mindmapRef.value?.getInstance();
   const data = mindmap?.getData(false);
-  mindmap?.execCommand("CLEAR_ACTIVE_NODE");
+  mindmap?.execCommand('CLEAR_ACTIVE_NODE');
   bfsWalk(data, (node: any) => {
     if (node.data?.name?.includes(formData.search)) {
       result.push(node);
@@ -249,18 +252,20 @@ const handleSearch = () => {
     result.forEach((node) => {
       mindmap?.renderer?.expandToNodeUid(node.data?.uid);
     });
-    
+
     setTimeout(() => {
-      const list = result.map((node) => mindmap?.renderer.findNodeByUid(node.data?.uid));
+      const list = result.map((node) =>
+        mindmap?.renderer.findNodeByUid(node.data?.uid)
+      );
       mindmap?.renderer?.activeMultiNode(list);
     }, 300);
   } else {
-    ElMessage.warning("未找到节点");
+    ElMessage.warning('未找到节点');
   }
 };
 
 const handleNodeDbClick = (node: any) => {
-  console.log("handleNodeDbClick", node);
+  console.log('handleNodeDbClick', node);
   if (node.isRoot) return;
   configDrawerRef.value.open(node.nodeData);
 };
@@ -275,7 +280,7 @@ const handleConfigOk = (updateNodeData: any) => {
     }
   });
   mindmap?.updateData(allData);
-}
+};
 // 保存
 const handleSave = () => {
   const mindmap = mindmapRef.value?.getInstance();
@@ -289,6 +294,7 @@ const handleSave = () => {
     delete node.data.isActive;
     delete node.data.richText;
     delete node.data.text;
+    delete node.data.id;
     // TODO: 业务校验
     if (!node.data.name?.trim()) {
       valid = false;
@@ -296,56 +302,68 @@ const handleSave = () => {
   });
 
   if (!valid) {
-    ElMessage.error("请检查数据是否填写完整!");
+    ElMessage.error('请检查数据是否填写完整!');
     return;
   }
 
-  console.log("保存数据:", data);
   try {
     window.parent?.BpmTools?.program(
       {
-        interfaceCode: "Common.doSaveBOMAiImageData",
-        model: data,
+        interfaceCode: 'Common.doSaveBOMAiImageData',
+        model: {
+          data,
+          del_ids: delIds.value, // 传递删除的节点id
+        },
       },
       (res: any) => {
-        console.log("保存结果:", res);
-        ElMessage.success("保存成功!");
+        console.log('保存结果:', res);
+        ElMessage.success('保存成功!');
       }
     );
   } catch (error) {
     console.log(error);
-    ElMessage.error("保存失败!");
+    ElMessage.error('保存失败!');
   }
 };
 
 // 数据变化 处理新增数据
 const handleDataChange = (newData: any) => {
+  // 新增数据
   const addItem = newData?.find((item: any) => item.action === 'create');
-  if (addItem) {
+  if (addItem && !addItem.data.data?.name) {
     const newItemData = new BOMItem();
-    console.log("新增数据:", addItem);
     delete addItem.data.data.text;
     const newNodeData = {
       ...(addItem?.data || {}),
       data: {
         ...newItemData,
-        ...addItem?.data?.data
-      }
+        ...addItem?.data?.data,
+      },
     };
-    handleConfigOk(newNodeData);
+    handleConfigOk(newNodeData.data);
     configDrawerRef.value.open(newNodeData, 'add');
   }
+  // 处理删除数据
+  const delItems = newData?.filter((item: any) => item.action === 'delete');
+  delItems?.forEach((item: any) => {
+    const id = item?.data?.data?.id;
+    if (id) {
+      delIds.value.push(id);
+    }
+  });
 };
 
 watch(
   () => props?.defaultData,
   (val) => {
     // 设置初始化加载层级
-    walk(val, null,  (node: any, _p: any, _isRoot: any, layerIndex: number) => {
-    if (formData.level && (layerIndex >= formData.level)) {
-      node.data.expand = false;
-    }
-  });
+    walk(val, null, (node: any, _p: any, _isRoot: any, layerIndex: number) => {
+      node.data.id = node?.id;
+      if (formData.level && layerIndex >= formData.level) {
+        node.data.expand = false;
+      }
+      delIds.value = [];
+    });
     data.value = val;
   }
 );

+ 1 - 1
src/pages/mindmap/index.vue

@@ -21,7 +21,7 @@ onMounted(() => {
   // fetch(`https://sl-yf-bommgr-admin-dev.shalu.com/api/module/Invoke`, {
   //   method: "POST",
   //   headers: {
-  //     'Authorization': "bpm_client_1417910630077173760",
+  //     'Authorization': "bpm_client_1419451885567348736",
   //     "content-type": "application/json;charset=UTF-8",
   //   },
   //   body: JSON.stringify({