update:仿真执行参数导入导出功能实现

src/components/flow/flowNodeParamTable.vue

@@ -20,7 +20,9 @@
         <template #leftOptions v-if="!hideButtons">
           <el-button
             type="primary"
-            v-if="flowNodeParamData.nodeTypeValue === '1'"
+            v-if="
+              flowNodeParamData.nodeTypeValue === '1' || flowNodeParamData.nodeTypeValue === '8'
+            "
             @click="flowClickFun('justStartLocalAppFun')"
             >启动</el-button
           >
@@ -60,7 +62,20 @@
               <el-dropdown-menu>
                 <el-dropdown-item @click="referenceParamFun">参数引用</el-dropdown-item>
                 <el-dropdown-item @click="paramToLibFun">参数入库</el-dropdown-item>
-                <el-dropdown-item @click="inputParamFun">参数导入</el-dropdown-item>
+
+                <el-upload
+                  :show-file-list="false"
+                  accept=".json"
+                  :auto-upload="false"
+                  :limit="1"
+                  :on-change="inputParamFun"
+                >
+                  <el-dropdown-item>参数导入</el-dropdown-item>
+
+                  <!-- <el-button type="primary">参数导入</el-button> -->
+                </el-upload>
+
+                <!-- <el-dropdown-item @click="inputParamFun">参数导入</el-dropdown-item> -->
                 <el-dropdown-item @click="exportParamFun">参数导出</el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -629,11 +644,11 @@ const handleCloseFun = () => {
   showRunLog.value = false;
 };
 
-const inputParamFun = () => {};
-
 const exportParamFun = () => {
-  const jsonData = tableData.value;
-  const fileName = props.flowNodeData?.nodeName + '参数.json';
+  const jsonData: any = cloneDeep(tableData.value);
+
+  formmatJsonFun(jsonData);
+  const fileName = props.flowNodeData?.nodeName + '.json';
   // 将JSON对象转换为字符串
   const jsonString = JSON.stringify(jsonData, null, 2); // 第二个参数是replacer，第三个参数是空格，用于美化输出
   // 创建一个blob对象，指定文本类型
@@ -650,6 +665,66 @@ const exportParamFun = () => {
   URL.revokeObjectURL(url); // 释放URL对象
 };
 
+const keys = ref(['label', 'englishLabel', 'options', 'defaultValue', 'children']);
+const formmatJsonFun = (list: any) => {
+  for (let i = 0; i < list.length; i++) {
+    for (const key in list[i]) {
+      if (!keys.value.includes(key)) {
+        delete list[i][key];
+      }
+    }
+
+    if (list[i]?.children?.length) {
+      formmatJsonFun(list[i]?.children);
+    }
+  }
+};
+
+// 上传文件解析赋值
+const inputParamFun = (uploadFile: any) => {
+  const file = uploadFile.raw; // 获取文件信息
+
+  const fileReader = new FileReader();
+  fileReader.readAsText(file!); // 开始读取文件的内容为二进制
+
+  fileReader.onload = (ev) => {
+    // 读取完成,对数据进行自己的操作
+
+    const data = ev.target?.result; // 获取内容
+    const treeData = JSON.parse(data as string);
+    const list: any = [];
+
+    getTreeListData(treeData, list);
+    setValueToData(tableData.value, list);
+  };
+};
+
+// 递归赋值
+const setValueToData = (data: any, list: any) => {
+  for (let i = 0; i < data.length; i++) {
+    for (let j = 0; j < list.length; j++) {
+      if (data[i].englishLabel === list[j].englishLabel) {
+        data[i].defaultValue = list[j].defaultValue;
+      }
+    }
+
+    if (data[i]?.children?.length) {
+      setValueToData(data[i]?.children, list);
+    }
+  }
+};
+
+// 获取树状图所有参数列表
+const getTreeListData = (tree: any, list: any = []) => {
+  for (let i = 0; i < tree.length; i++) {
+    list.push(tree[i]);
+
+    if (tree[i]?.children?.length) {
+      getTreeListData(tree[i]?.children, list);
+    }
+  }
+};
+
 defineExpose({
   saveNodeParamFun,
   paramToLibFun,