文档 2-6

董国庆

2026-01-22 9292d289519b889aae0de3fc2827f74cbeeb9321

文档 2-6

 culture/src/views/pedigree-chart/add.vue

@@ -35,7 +35,7 @@
        <div class="title" style="padding: 25px 0">待确认传代计划数</div>
        <Table :height="null" :total="newTotal" :data="newTableData" :queryForm="newQueryForm"
          @handleCurrentChange="handleNewCurrentChange" @handleSizeChange="handleNewSizeChange">
          <el-table-column label="菌种实验员" prop="createBy" />
          <el-table-column label="菌种工程师" prop="createBy" />
          <el-table-column label="菌种编号" prop="strainCode" />
          <el-table-column label="菌种名称" prop="strainName" />
          <el-table-column label="传代计划数量" prop="generationCount" />
@@ -48,7 +48,7 @@
        <div class="title" style="padding: 25px 0">待确认入库菌种列表</div>
        <Table :height="null" :total="total" :data="tableData" :queryForm="queryForm"
          @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
          <el-table-column label="菌种实验员" prop="experimenter" />
          <el-table-column label="菌种工程师" prop="experimenter" />
          <el-table-column label="菌种编号" prop="strainCode" />
          <el-table-column label="菌种名称" prop="strainName" />
          <el-table-column label="保存/废弃">
@@ -308,19 +308,76 @@
        this.$message.warning("谱系图已提交，不能删除");
        return
      }
      
      this.$confirm("确定删除该节点吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteNode({ id: this.selectedNode.id }).then((res) => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.reloadData();
          }
        });
        // 判断是新增模式还是编辑模式
        if (!this.$route.query.id) {
          // 新增模式：前端直接删除节点
          this.deleteNodeFromGraph(this.selectedNode.nodeId);
          this.$message.success("删除成功");
        } else {
          // 编辑模式：调用后端删除接口
          deleteNode({ id: this.selectedNode.id }).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.reloadData();
            }
          });
        }
      });
    },
    
    // 前端删除节点方法
    deleteNodeFromGraph(nodeId) {
      // 找到要删除的节点
      const nodeIndex = this.graphData.nodes.findIndex(n => n.nodeId === nodeId);
      if (nodeIndex === -1) {
        return;
      }

      // 递归收集所有需要删除的节点ID（包括子节点）
      const collectNodeIds = (currentNodeId) => {
        const nodeIds = [currentNodeId];
        const childEdges = this.graphData.edges.filter(e => e.source === currentNodeId);
        childEdges.forEach(edge => {
          nodeIds.push(...collectNodeIds(edge.target));
        });
        return nodeIds;
      };

      const nodeIdsToDelete = collectNodeIds(nodeId);

      // 删除所有相关的边
      this.graphData.edges = this.graphData.edges.filter(edge => {
        return !nodeIdsToDelete.includes(edge.source) && !nodeIdsToDelete.includes(edge.target);
      });

      // 删除所有相关的节点
      this.graphData.nodes = this.graphData.nodes.filter(node => {
        return !nodeIdsToDelete.includes(node.nodeId);
      });

      // 如果删除的节点的父节点是传代计划数，需要更新其当前数量
      const parentEdge = this.graphData.edges.find(e => e.target === nodeId);
      if (parentEdge) {
        const parentNode = this.graphData.nodes.find(n => n.nodeId === parentEdge.source);
        if (parentNode && parentNode.label === '传代计划数') {
          // 重新计算当前数量
          const childCount = this.graphData.edges.filter(e => e.source === parentNode.nodeId).length;
          parentNode.currentCount = childCount;
        }
      }

      // 清空选中节点
      this.selectedNode = null;

      // 更新图表显示
      this.updateGraphData();
    },
    handleConfirm(row) {
      this.comfirmId = row.id;
      this.storageVisible = true;

 culture/src/views/pedigree-chart/addProgenitor.vue

@@ -17,7 +17,7 @@
        <div class="title" style="padding: 25px 0">待确认传代计划数</div>
        <Table :height="null" :total="newTotal" :data="newTableData" :queryForm="newQueryForm"
          @handleCurrentChange="handleNewCurrentChange" @handleSizeChange="handleNewSizeChange">
          <el-table-column label="菌种实验员" prop="createBy" />
          <el-table-column label="菌种工程师" prop="createBy" />
          <el-table-column label="菌种编号" prop="strainCode" />
          <el-table-column label="菌种名称" prop="strainName" />
          <el-table-column label="传代计划数量" prop="generationCount" />
@@ -30,7 +30,7 @@
        <div class="title" style="padding: 25px 0">待确认入库菌种列表</div>
        <Table :height="null" :total="total" :data="tableData" :queryForm="queryForm"
          @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
          <el-table-column label="菌种实验员" prop="experimenter" />
          <el-table-column label="菌种工程师" prop="experimenter" />
          <el-table-column label="菌种编号" prop="strainCode" />
          <el-table-column label="菌种名称" prop="strainName" />
          <el-table-column label="保存/废弃">
@@ -215,19 +215,104 @@
        this.$message.warning("谱系图已提交，不能删除");
        return;
      }
      
      this.$confirm("确定删除该节点吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteNode({ id: this.selectedNode.id }).then((res) => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.reloadData();
          }
        });
        // 判断是新增模式还是编辑模式
        if (!this.$route.query.id) {
          // 新增模式：前端直接删除节点
          this.deleteNodeFromGraph(this.selectedNode.id);
          this.$message.success("删除成功");
        } else {
          // 编辑模式：调用后端删除接口
          deleteNode({ id: this.selectedNode.id }).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.reloadData();
            }
          });
        }
      });
    },
    
    // 前端删除节点方法
    deleteNodeFromGraph(nodeId) {
      // 递归删除节点
      const deleteNodeRecursive = (nodes, targetId) => {
        for (let i = 0; i < nodes.length; i++) {
          if (nodes[i].id === targetId) {
            // 找到目标节点，直接删除
            nodes.splice(i, 1);
            return true;
          }
          // 在子节点中查找
          if (nodes[i].children && nodes[i].children.length > 0) {
            if (deleteNodeRecursive(nodes[i].children, targetId)) {
              // 如果删除的是传代计划数的子节点（母代），需要更新计划数的当前数量
              if (nodes[i].label === '传代计划数') {
                nodes[i].currentCount = nodes[i].children.length;
              }
              return true;
            }
          }
        }
        return false;
      };

      // 执行删除
      const deleted = deleteNodeRecursive(this.graphData.nodes, nodeId);
      
      if (deleted) {
        // 清空选中节点
        this.selectedNode = null;
        
        // 转换树形数据为G6可用的格式
        const convertToG6Data = (nodes) => {
          const g6Nodes = [];
          const g6Edges = [];

          const processNode = (node, parentId = null) => {
            g6Nodes.push({
              id: node.id,
              label: node.label,
              number: node.number,
              data: node.data,
              isDiscarded: node.isDiscarded,
              style: node.style,
              planCount: node.planCount,
              currentCount: node.currentCount,
            });

            if (parentId) {
              g6Edges.push({
                source: parentId,
                target: node.id,
                style: {
                  stroke: "rgba(4, 156, 154, 1)",
                  lineWidth: 1,
                },
              });
            }

            if (node.children && node.children.length > 0) {
              node.children.forEach((child) => processNode(child, node.id));
            }
          };

          nodes.forEach((node) => processNode(node));
          return { nodes: g6Nodes, edges: g6Edges };
        };

        // 更新图表
        const g6Data = convertToG6Data(this.graphData.nodes);
        this.graph.changeData(g6Data);
        this.graph.render();
        this.graph.fitView();
      }
    },
    handleEdit() {
      console.log('handleEdit selectedNode', this.selectedNode)
      if (!this.selectedNode) {