start bug；重复导入文件bug

wujingjing

2025-02-24 a61bd8abfb6bedacccbc1f1cdb01e4f433e58fd7

 src/views/project/yw/systemManage/flowApp/components/Header.vue

@@ -1,18 +1,26 @@
<template>
   <div class="h-14 flex justify-between px-2 border border-solid border-x-0 border-t-0 border-gray-300">
      <div class="flex-items-center">
         <span class="ywifont ywicon-pre p-1 bg-white rounded-lg mr-2"></span>
         <span class="ywifont ywicon-pre p-1.5 bg-white rounded-lg mr-4 shadow cursor-pointer" @click="backMgr"> </span>

         <!-- <img src="@/assets/logo.png" alt="logo" class="h-8 w-8"/> -->
         <div>
            <span class="font-bold">测试</span>
            <span class="font-bold text-medium">{{ flowAgent?.title }}</span>
         </div>
      </div>
      <div class="flex-items-center">
         <!-- <el-button>运行</el-button>
         <el-button>保存</el-button>
         <el-button type="primary">运行</el-button> -->
         <el-dropdown @command="handleCommand">
         <el-button @click="handleCommand('export')">导出工作流</el-button>

         <template v-if="!isViewMode">
            <el-button @click="handleCommand('import')">导入工作流</el-button>
            <el-button type="danger" @click="clearGraph">清空画布</el-button>
            <el-button type="primary" @click="saveFlow">保存</el-button>
         </template>

         <!-- <el-dropdown @command="handleCommand">
            <el-button style="margin-left: 8px; width: 34px">
               <el-icon class="el-icon--center">
                  <more-filled />
@@ -24,26 +32,88 @@
                  <el-dropdown-item command="import">导入</el-dropdown-item>
               </el-dropdown-menu>
            </template>
         </el-dropdown>
         </el-dropdown> -->
      </div>
   </div>
</template>

<script setup lang="ts">
import { useVueFlow } from '@vue-flow/core';
import { useFileDialog } from '@vueuse/core';
import { ElMessage } from 'element-plus';
import JSONFormat from 'json-format';
import { downloadJSON } from '/@/utils/util';
import { update_workflow_json_flow } from '/@/api/workflow';
import router from '/@/router';
import { downloadJSON, elConfirm } from '/@/utils/util';
const props = defineProps({
   queryId: String,
   flowAgent: Object,
   isViewMode: {
      type: Boolean,
      default: false,
   },
});
const emit = defineEmits(['export', 'saveClick']);
const { toObject, fromObject, nodes, edges, removeEdges, removeNodes } = useVueFlow();
const { files, open, reset, onCancel, onChange } = useFileDialog({
   //   accept: 'image/*', // Set to accept only image files
   // 选择 json文件
   accept: 'application/json',
   directory: false, // Select directories instead of files if set true
});

const emit = defineEmits(['export']);
const { toObject } = useVueFlow();
const backMgr = () => {
   router.push({
      name: 'WorkFlowIndex',
   });
};

const applyClearGraph = async () => {
   removeEdges(edges.value);
   removeNodes(nodes.value);
};
const clearGraph = async () => {
   const yes = await elConfirm('确定要清空画布吗？');
   if (!yes) {
      return;
   }
   applyClearGraph();
};
const saveFlow = async () => {
   const obj = toObject();
   const jsonStr = obj ? JSONFormat(obj) : '';

   emit('saveClick', jsonStr);
};

onChange((file) => {
   if (!file) return;
   // 获取json 中的内容
   const reader = new FileReader();
   reader.readAsText(file[0]);

   reader.onload = (e) => {
      const jsonStr = e.target?.result as string;
      applyClearGraph();
      setTimeout(() => {
         const json = JSON.parse(jsonStr);
         fromObject(json)
            .then((val) => {})
            .catch((err) => {
               ElMessage.error('导入失败' + err);
            });
      }, 30);
   };
});
const handleCommand = (command: string | number | object) => {
   const obj = toObject();

   if (command === 'export') {
      const jsonStr = obj ? JSONFormat(obj) : '';
        downloadJSON(jsonStr, 'flow');
   } else {
      downloadJSON(jsonStr, 'flow');
   } else if (command === 'import') {
      reset();
      open();
   }
};
</script>