Prechádzať zdrojové kódy

perf: 优化删除节点功能,修复节点编辑

liaojiaxing 1 týždeň pred
rodič
commit
461096a313

Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 1 - 0
src/assets/delete.svg


+ 9 - 1
src/components/mindmap/Mindmap.vue

@@ -23,6 +23,7 @@ import SearchPlugin from "simple-mind-map/src/plugins/Search";
 import Watermark from "simple-mind-map/src/plugins/Watermark";
 
 import changIco from "@/assets/warning.svg";
+import deleteIcon from "@/assets/delete.svg";
 import { ElTooltip } from "element-plus";
 
 MindMap.usePlugin(Drag);
@@ -135,6 +136,11 @@ onMounted(() => {
               {!id && (
                 <span class="bg-green leading-14px text-12px px-4px py-2px text-#fff rounded-4px">new</span>
               )}
+              {data?.is_delete && (
+                <ElTooltip content='删除标记' placement="top">
+                  <img src={deleteIcon} class="w-20px h-20px inline-block" />
+                </ElTooltip>
+              )}
             </div>
           );
         },
@@ -152,7 +158,9 @@ onMounted(() => {
   } as any);
 
   // @ts-ignore TODO 临时隐藏Tab新增功能
-  // instance.keyCommand.removeShortcut("Tab");
+  //instance.keyCommand.removeShortcut("Tab");
+  // @ts-ignore TODO 临时隐藏Del删除功能
+  instance.keyCommand.removeShortcut("Del");
 
   // 事件监听
   // 自适应

+ 1 - 0
src/main.ts

@@ -4,6 +4,7 @@ import App from './App.vue'
 import router from './router';
 import 'virtual:uno.css'
 import 'element-plus/theme-chalk/el-message.css'
+import 'element-plus/theme-chalk/el-message-box.css'
 import { createPinia} from 'pinia'
 
 const app = createApp(App)

+ 12 - 33
src/pages/excel/ConfigDrawer.vue

@@ -18,7 +18,7 @@
             <el-input
               placeholder="请输入"
               v-model="formData.bom_code"
-              disabled
+              :disabled="editType === 'add'"
             />
           </el-form-item>
         </el-col>
@@ -248,6 +248,7 @@
 <script setup lang="ts">
 import { ref, defineExpose, defineEmits } from 'vue';
 import type { FormInstance } from 'element-plus';
+import { cloneDeep } from 'lodash-es';
 
 const keyMap = {
   type: '类型',
@@ -310,45 +311,22 @@ const nodeData = ref<any>(null);
 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';
+  nodeData.value = cloneDeep(node.data);
+  editType.value = type || node?.id ? 'add' : 'edit';
   form.value?.resetFields();
   try {
-    loading.value = true;
-    // 测试接口
-    // fetch(`https://sl-yf-bommgr-admin-dev.shalu.com/api/module/Invoke`, {
-    //   method: "POST",
-    //   headers: {
-    //     Authorization: "bpm_client_1410638690438352896",
-    //     "content-type": "application/json;charset=UTF-8",
-    //   },
-    //   body: JSON.stringify({
-    //     interfaceCode: "Common.getBOMInfo",
-    //     bom_id: node.id,
-    //   }),
-    // })
-    //   .then((res) => res.json())
-    //   .then((res) => {
-    //     console.log("res", res);
-    //     originFormData = res.result;
-    //     formData.value = {
-    //       ...node.data,
-    //       ...(res?.result || {}),
-    //       bom_det: {},
-    //     };
-    //     loading.value = false;
-    //   });
-
-    if (type === 'add' || !node.id) {
-      // 新增
-      originFormData = node.data;
+    // 新增
+    if (type === 'add' || !node?.id) {
+      originFormData = cloneDeep(node.data);
       formData.value = {
         ...node.data,
+        part_name: node.data?.name,
+        part_type: node.data?.type,
         bom_det: {},
       };
     } else {
-      // 编辑
+      // 编辑 通过接口获取详情
+      loading.value = true;
       window.parent?.BpmTools?.program(
         {
           interfaceCode: 'Common.getBOMInfo',
@@ -426,6 +404,7 @@ const handleSubmit = async () => {
 
   emit('ok', {
     ...(nodeData.value || {}),
+    ...formData.value,
     type: formData.value.part_type,
     name: formData.value.part_name,
     qty: formData.value.qty,

+ 65 - 18
src/pages/excel/MindmapModal.vue

@@ -52,6 +52,14 @@
             @click="addNode"
           />
         </el-tooltip>
+        <el-tooltip content="删除">
+          <el-button
+            type="default"
+            circle
+            :icon="DeleteFilled"
+            @click="removeNode"
+          />
+        </el-tooltip>
         <el-tooltip content="详情">
           <el-button
             type="default"
@@ -102,11 +110,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineExpose, reactive, defineProps, watch } from 'vue';
+import { ref, defineExpose, reactive, defineProps, watch, onMounted, onBeforeUnmount } from 'vue';
 import {
   Aim,
   CirclePlusFilled,
-  // Close,
+  DeleteFilled,
   InfoFilled,
   Search,
   ZoomIn,
@@ -114,9 +122,8 @@ import {
 } 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 { ElMessage, ElMessageBox } 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';
@@ -134,7 +141,6 @@ 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 || {
@@ -235,6 +241,42 @@ const addNode = () => {
   mindmap?.execCommand('INSERT_CHILD_NODE');
 };
 
+// 删除节点
+const removeNode = () => {
+  const mindmap = mindmapRef.value?.getInstance();
+  const activeList = mindmapRef.value?.getActiveNodeList()?.filter(node => !node?.isRoot);
+  if (!activeList?.length) {
+    ElMessage.warning('请选择删除节点');
+    return;
+  }
+
+  // 原有数据将is_delete设置为true 新增数据直接删除
+  const updateNodes: any[] = [];
+  const deleteNodes: any[] = [];
+  activeList.forEach((node) => {
+    bfsWalk(node, (child: any) => {
+      if (child.nodeData?.id) {
+        updateNodes.push(child);
+      } else {
+        deleteNodes.push(child);
+      }
+    });
+  });
+
+  ElMessageBox.alert('确认删除节点?(已提交数据进入删除流程)', '提示', {
+    confirmButtonText: '确认',
+    callback: (action: string) => {
+      // 执行删除
+      if (action === 'confirm') {
+        deleteNodes.length && mindmap?.execCommand('REMOVE_NODE', deleteNodes);
+        updateNodes.forEach((node) => {
+          handleConfigOk({ ...node?.nodeData.data, is_delete: true });
+        });
+      }
+    },
+  });
+};
+
 // 搜索
 const handleSearch = () => {
   const result: any[] = [];
@@ -272,6 +314,7 @@ const handleNodeDbClick = (node: any) => {
 
 // 节点配置结束
 const handleConfigOk = (updateNodeData: any) => {
+  console.log('handleConfigOk', updateNodeData);
   const mindmap = mindmapRef.value?.getInstance();
   const allData = mindmap?.getData(false);
   bfsWalk(allData, (node: any) => {
@@ -310,10 +353,7 @@ const handleSave = () => {
     window.parent?.BpmTools?.program(
       {
         interfaceCode: 'Common.doSaveBOMAiImageData',
-        model: {
-          data,
-          del_ids: delIds.value, // 传递删除的节点id
-        },
+        model: data,
       },
       (res: any) => {
         console.log('保存结果:', res);
@@ -343,14 +383,6 @@ const handleDataChange = (newData: any) => {
     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(
@@ -362,7 +394,6 @@ watch(
       if (formData.level && layerIndex >= formData.level) {
         node.data.expand = false;
       }
-      delIds.value = [];
     });
     data.value = val;
   }
@@ -383,6 +414,22 @@ defineExpose({
   open,
   close,
 });
+
+const handlePressDel = (e: KeyboardEvent) => {
+  // 删除节点
+  if ((e.key === 'Delete' || e.key === 'Backspace') && visible.value) {
+    e.preventDefault();
+    removeNode();
+  }
+};
+
+onMounted(() => { 
+  addEventListener('keydown', handlePressDel);
+});
+
+onBeforeUnmount(() => { 
+  removeEventListener('keydown', handlePressDel);
+});
 </script>
 
 <style lang="less" scoped>

+ 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_1419451885567348736",
+  //     'Authorization': "bpm_client_1419718313868529664",
   //     "content-type": "application/json;charset=UTF-8",
   //   },
   //   body: JSON.stringify({