谱系图增加移动端触摸节点选中事件

hejianhao

3 天以前 75f58cde0e7baaa2cfb61d8a509ad61ff7f498fb

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

@@ -47,31 +47,33 @@
        <el-button @click="handleDraft">存草稿</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>

      <!-- 签字确认组件 -->
      <SignatureCanvas :visible.sync="signatureVisible" @confirm="handleSignatureConfirm" />
    </el-form>

    <AddAncestor ref="addAncestor" @addNodeSign="addNodeSign" />
    <PlanForm ref="planForm" @addNodeSign="addNodeSign" />
    <AddSublevelForm ref="addSublevelForm" @addNodeSign="addNodeSign" />
    <ConfirmStorageDialog name="接种操作人签字" :visible.sync="confirmStorageDialogVisible"
      @confirm="handleSignatureConfirm" />
    <!-- 菌种工程师 -->
    <ConfirmStorageDialog name="菌种保藏人签字" text="是否确认该项菌种信息入库" :visible.sync="storageVisible"
      @confirm="handleSignatureConfirm" />
  </div>
</template>

<script>
import SignatureCanvas from "@/components/SignatureCanvas.vue";
import G6 from '@antv/g6';
import PlanForm from "./progenitorComponents/PlanForm.vue";
import AddAncestor from "./progenitorComponents/AddAncestor.vue";
import AddSublevelForm from "./progenitorComponents/AddSublevelForm.vue";
import ConfirmStorageDialog from "@/components/confirm-storage-dialog";

export default {
  name: "AddPedigree",
  components: {
    SignatureCanvas,
    PlanForm,
    AddAncestor,
    AddSublevelForm
    AddSublevelForm,
    ConfirmStorageDialog
  },
  data() {
    return {
@@ -111,6 +113,9 @@
      isAddingNode: false,
      nodeData: {},
      nodeType: '',//1祖代 2计划数 3母代
      tableData: [],
      confirmStorageDialogVisible: false,
      storageVisible: false
    };
  },
  computed: {
@@ -138,12 +143,12 @@
    addNodeSign(value, type) {
      this.nodeData = value
      this.nodeType = type
      this.signatureVisible = true;
      this.confirmStorageDialogVisible = true;
    },
    handleSubmit() {
      this.$refs.pedigreeForm.validate((valid) => {
        if (valid) {
          this.signatureVisible = true;
          this.confirmStorageDialogVisible = true;
        }
      });
    },
@@ -155,7 +160,7 @@
      this.$router.back();
    },
    handleSignatureConfirm(signatureImage) {
      this.signatureVisible = false;
      this.confirmStorageDialogVisible = false;
      console.log("submit form with signature:", signatureImage);
      if (this.nodeType === 1) {
        this.handleAddParent(this.nodeData)
@@ -173,7 +178,7 @@
          strainName: this.form.strainName,
          strainNo: this.form.strainNo,
          status: 'add',
          activeType: null,
          activeType: 1,
          isDiscarded: true,
        });
        return
@@ -204,9 +209,8 @@
        this.$refs.addSublevelForm.openInitData({
          title: '新增菌种传代项',
          form: {
            strainName: this.form.strainName,
            strainNo: this.form.strainNo,
            isDiscarded: true
            isDiscarded: true,
            ...nodeModel.data
          }
        })
      } else {
@@ -640,35 +644,37 @@
      // 监听窗口大小变化
      window.addEventListener('resize', this.handleResize);

      // 节点点击事件
      this.graph.on('node:click', (evt) => {
      const handleNodeClick = (evt) => {
        evt.preventDefault(); // 阻止默认触摸行为
        const node = evt.item;
        const nodeModel = node.getModel();

        // 如果节点已废弃，不允许任何操作
        if (!nodeModel.isDiscarded) {
          this.$message.warning('该节点已废弃，不能进行操作');
          return;
        }

        // 更新选中节点
        this.selectedNode = nodeModel;

        // 更新节点选中状态
        this.graphData.nodes.forEach(n => {
          n.selected = n.id === nodeModel.id;
        });
        this.graph.changeData(this.graphData);
      });
      };
      this.graph.on('node:click', handleNodeClick);
      this.graph.on('node:touchstart', handleNodeClick);

      // 画布点击事件，取消选中节点
      this.graph.on('canvas:click', () => {
      // 画布点击事件，取消选中节点（添加触摸支持）
      const handleCanvasClick = (evt) => {
        evt.preventDefault();
        this.selectedNode = null;
        this.graphData.nodes.forEach(n => {
          n.selected = false;
        });
        this.graph.changeData(this.graphData);
      });
      };
      this.graph.on('canvas:click', handleCanvasClick);
      this.graph.on('canvas:touchstart', handleCanvasClick);
    },
    handleResize() {
      if (this.graph) {