| | |
| | | import AddSublevelForm from "./components/AddSublevelForm.vue"; |
| | | import AddSublevelPlan from "./components/AddSublevelPlan.vue"; |
| | | import ConfirmStorageDialog from "@/components/confirm-storage-dialog"; |
| | | import { add } from './service' |
| | | import { add } from "./service"; |
| | | export default { |
| | | name: "AddPedigree", |
| | | components: { |
| | |
| | | handleSubmit() { |
| | | this.$refs.pedigreeForm.validate((valid) => { |
| | | if (valid) { |
| | | if (this.treeData.length == 0) { |
| | | if (this.treeData.length === 0) { |
| | | this.$message.warning("请新增节点"); |
| | | return; |
| | | } |
| | | |
| | | // 处理节点数据,将data字段中的数据提升到根级别 |
| | | const processNodeData = (node) => { |
| | | const processNodeData = (node, level = 0) => { |
| | | const processedNode = { |
| | | ...node, |
| | | ...node.data, |
| | | children: [], |
| | | level, |
| | | type: [1, 3, 5].includes(level + 1) ? 1 : 2, |
| | | }; |
| | | delete processedNode.data; |
| | | return processedNode; |
| | | }; |
| | | |
| | | // 将扁平结构转换为嵌套结构 |
| | | const buildNestedStructure = (nodes) => { |
| | | const levelMap = { |
| | | 0: 'one', |
| | | 1: 'two', |
| | | 2: 'three', |
| | | 3: 'four', |
| | | 4: 'five' |
| | | }; |
| | | // 构建 children 树结构 |
| | | const buildTree = (nodes, edges) => { |
| | | // 创建节点映射,提升性能 |
| | | const nodeMap = new Map( |
| | | nodes.map((node) => [node.nodeId, processNodeData(node)]) |
| | | ); |
| | | |
| | | // 处理每个节点 |
| | | const processedNodes = nodes.map(node => { |
| | | const processedNode = processNodeData(node); |
| | | // 设置 type 字段 |
| | | if (node.level % 2 === 0) { // 0, 2, 4 对应 one, three, five |
| | | processedNode.type = 1; |
| | | } else { // 1, 3 对应 two, four |
| | | processedNode.type = 2; |
| | | } |
| | | return processedNode; |
| | | }); |
| | | // 创建子节点ID集合,用于快速查找根节点 |
| | | const childNodeIds = new Set(edges.map((edge) => edge.target)); |
| | | |
| | | // 构建嵌套结构 |
| | | const result = {}; |
| | | const nodeMap = new Map(); |
| | | |
| | | // 首先创建所有节点的映射 |
| | | processedNodes.forEach(node => { |
| | | nodeMap.set(node.nodeId, { ...node }); |
| | | }); |
| | | |
| | | // 处理边关系,构建嵌套结构 |
| | | this.graphData.edges.forEach(edge => { |
| | | // 构建父子关系 |
| | | edges.forEach((edge) => { |
| | | const parent = nodeMap.get(edge.source); |
| | | const child = nodeMap.get(edge.target); |
| | | if (parent && child) { |
| | | const parentLevel = parent.level; |
| | | const childLevel = child.level; |
| | | const parentKey = levelMap[parentLevel]; |
| | | const childKey = levelMap[childLevel]; |
| | | |
| | | // 确保父节点存在 |
| | | if (!result[parentKey]) { |
| | | result[parentKey] = { ...parent }; |
| | | } |
| | | |
| | | // 根据层级关系设置子节点 |
| | | if (parentLevel === 0) { // one 包含 two |
| | | if (!result[parentKey].two) { |
| | | result[parentKey].two = []; |
| | | } |
| | | result[parentKey].two.push(child); |
| | | } else if (parentLevel === 1) { // two 包含 three |
| | | if (!result.one.two) { |
| | | result.one.two = []; |
| | | } |
| | | const twoNode = result.one.two.find(n => n.nodeId === parent.nodeId); |
| | | if (twoNode) { |
| | | if (!twoNode.three) { |
| | | twoNode.three = []; |
| | | } |
| | | twoNode.three.push(child); |
| | | } |
| | | } else if (parentLevel === 2) { // three 包含 four |
| | | result.one.two.forEach(twoNode => { |
| | | if (twoNode.three) { |
| | | const threeNode = twoNode.three.find(n => n.nodeId === parent.nodeId); |
| | | if (threeNode) { |
| | | if (!threeNode.four) { |
| | | threeNode.four = []; |
| | | } |
| | | threeNode.four.push(child); |
| | | } |
| | | } |
| | | }); |
| | | } else if (parentLevel === 3) { // four 包含 five |
| | | result.one.two.forEach(twoNode => { |
| | | if (twoNode.three) { |
| | | twoNode.three.forEach(threeNode => { |
| | | if (threeNode.four) { |
| | | const fourNode = threeNode.four.find(n => n.nodeId === parent.nodeId); |
| | | if (fourNode) { |
| | | if (!fourNode.five) { |
| | | fourNode.five = []; |
| | | } |
| | | fourNode.five.push(child); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | child.level = parent.level + 1; |
| | | child.type = [1, 3, 5].includes(child.level + 1) ? 1 : 2; |
| | | parent.children.push(child); |
| | | } |
| | | }); |
| | | |
| | | // 如果没有边关系,至少保留第一层节点 |
| | | if (Object.keys(result).length === 0 && processedNodes.length > 0) { |
| | | const rootNode = processedNodes.find(node => node.level === 0); |
| | | if (rootNode) { |
| | | result.one = { ...rootNode }; |
| | | } |
| | | } |
| | | |
| | | return result; |
| | | // 返回根节点数组 |
| | | return nodes |
| | | .filter((node) => !childNodeIds.has(node.nodeId)) |
| | | .map((node) => nodeMap.get(node.nodeId)); |
| | | }; |
| | | |
| | | // 获取基础表单数据 |
| | |
| | | strainCode: this.form.strainCode, |
| | | strainName: this.form.strainName, |
| | | }, |
| | | ...(this.treeData.length > 0 ? buildNestedStructure(this.treeData) : {}) |
| | | one: buildTree(this.graphData.nodes, this.graphData.edges), |
| | | }; |
| | | |
| | | console.log("提交的数据:", baseData); |
| | | return |
| | | console.log("提交的数据:", baseData, this.graphData); |
| | | add(baseData).then((res) => { |
| | | if (res.code == 200) { |
| | | this.$message.success("保存成功"); |
| | |
| | | nodeMap.set(node.nodeId, { |
| | | ...node, |
| | | id: node.nodeId, |
| | | level: 0 // 添加层级标记 |
| | | level: 0, // 添加层级标记 |
| | | }); |
| | | }); |
| | | |
| | |
| | | } |
| | | }); |
| | | |
| | | // 将所有节点按层级排序 |
| | | // 将所有节点按层级排序并设置type字段 |
| | | const allNodes = Array.from(nodeMap.values()); |
| | | allNodes.sort((a, b) => a.level - b.level); |
| | | |
| | | return allNodes; |
| | | // 设置type字段:第1,3,5层为1,其他层级为2 |
| | | allNodes.forEach((node) => { |
| | | node.type = [1, 3, 5].includes(node.level + 1) ? 1 : 2; |
| | | }); |
| | | |
| | | return allNodes; // 返回所有节点,包含type字段 |
| | | }; |
| | | |
| | | const treeData = buildTree(this.graphData.nodes, this.graphData.edges); |
| | |
| | | } |
| | | }, |
| | | handleAddParent(value) { |
| | | console.log(value); |
| | | |
| | | const parentId = `parent-${++this.nodeCount}`; |
| | | this.graphData.nodes.push({ |
| | | nodeId: parentId, |