方法

不只是码农大约 3 分钟

导出流程图片

方法名称：downloadImageClick
作用：下载图片
类型：Function
默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="downloadImage">下载图片</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const downloadImage = () => {
  dawnFlowRef.value.downloadImageClick();
};
</script>

获取流程数据

方法名称：getFlowJson
作用：获取流程数据，可用于获取当前流程图的 JSON 数据
类型：Function
默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="getFlowData">获取流程数据</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const getFlowData = () => {
  dawnFlowRef.value.getFlowJson();
};
</script>

设置流程数据

方法名称：setFlowJson
作用：设置流程数据，可用于初始化流程图
类型：Function
默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="setFlowData">设置流程数据</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const setFlowData = () => {
  dawnFlowRef.value.setFlowJson();
};
</script>

删除流程

方法名称：delFlowClick
作用：删除当前流程图，清空当前流程图数据
类型：Function
默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="delFlowData">删除流程</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const delFlowData = () => {
  dawnFlowRef.value.delFlowClick();
};
</script>

删除选中节点

方法名称：delSelectNodeClick
作用：删除当前选中节点，按住 ctrl 可以多选节点
类型：Function
默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="delSelectNodeData">删除选中节点</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const delSelectNodeData = () => {
  dawnFlowRef.value.delSelectNodeClick();
};
</script>

根据 id 删除节点

方法名称：delNodelIdClick
作用：根据节点 id 删除节点
类型：Function
默认值：(nodeId: string[]) => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="delNodeData">根据id删除选中节点</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const delNodeData = () => {
  const nodeId = ["id1", "id2"];
  dawnFlowRef.value.delNodelIdClick(nodeId);
};
</script>

更新节点数据

方法名称：updateFlowNode
作用：更新节点数据
类型：Function
默认值：(nodeData: {}) => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="updateFlowNodeClick">更新节点数据</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const updateFlowNodeClick = () => {
  const nodeData = {};
  dawnFlowRef.value.updateFlowNode(nodeData);
};
</script>

更新节点审核状态

方法名称：updateNodeAuditState
作用：更新节点状态
类型：Function
默认值：(nodeId: string, auditState: number) => {}
说明: 根据节点 id 更新节点状态，auditState 为节点状态，0：未开始，1：待审核，2：已通过，3：已拒绝，4：驳回，5：归档。
注意：更新节点状态后，节点会根据状态自动改变颜色

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="updateNodeAuditStateClick">更新节点状态</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

// 更新节点状态为待审核
const updateNodeAuditStateClick = () => {
  dawnFlowRef.value.updateNodeAuditState("nodeId", 1);
};
</script>

更新连线数据

方法名称：updateFlowEdge
作用：更新连线数据
类型：Function
默认值：(edgeData: {}) => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="updateFlowEdgeClick">更新连线数据</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const updateFlowEdgeClick = () => {
  const edgeData = {};
  dawnFlowRef.value.updateFlowEdge(edgeData);
};
</script>

删除选中连线

方法名称：delSelectEdgesClick
作用：删除当前选中连线，按住 ctrl 可以多选连线
类型：Function
默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="delSelectEdgesData">删除选中连线</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const delSelectEdgesData = () => {
  dawnFlowRef.value.delSelectEdgesClick();
};
</script>

返回画布中心位置

方法名称：backCenterClick
作用：返回画布中心位置
类型：Function
默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="backCenter">返回画布中心位置</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const backCenter = () => {
  dawnFlowRef.value.backCenterClick();
};
</script>

撤销上一步操作

方法名称：revokeClick
作用：撤销上一步操作
类型：Function
默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="revoke">撤销上一步操作</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const revoke = () => {
  dawnFlowRef.value.revokeClick();
};
</script>

模式切换

方法名称：setPreviewState
作用：切换模式，可切换为编辑模式和预览模式
类型：Function
默认值：(boolean) => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="switchPreviewState">切换模式</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const switchPreviewState = (isPreview) => {
  dawnFlowRef.value.setPreviewState(isPreview);
};
</script>