show

案例展示: https://slailcp.github.io/approval-flow/index.html

install

npm i -S approval-flow

use

import { OfficeFlow} from "approval-flow";

<OfficeFlow :add-nodes="adddata" :node="cnode" @on-add="onAdd" @on-choose="onChoose" />

source-code

案例源码

approval-flow插件源码

效果图

<script setup>
import { ref } from "vue";
import { OfficeFlow, FlowValidate, Alert } from "approval-flow";

const adddata = ref([
  { key: "approver", value: "审批人", icon: "Stamp", color: "#3d91eb" },
  {
    key: "notifier",
    value: "抄送人",
    icon: "Promotion",
    color: "orange",
  },
  { key: "hehe", value: "呵呵", icon: "UserFilled", color: "blue" },
  { key: "lala", value: "拉拉", icon: "StarFilled", color: "green" },
  { key: "condition", value: "条件分支", icon: "Branch", color: "#333" },
]);
const cnode = ref({
  name: "提交人",
  type: "start",
  nodeName: "",
  properties: {
    // 数据可以存放到properties对象里面
  },
});
const onAdd = (e) => {
  console.log(e);
  
};
const onChoose = (e) => {
   e.node.nodeName = "随机"+Math.floor(Math.random()*1000);
};
const onSubmit = () => {
  FlowValidate(cnode.value)
    .then((ret) => {
      console.log("validate success!");
      console.log(cnode.value);
    })
    .catch((err) => {
      console.log(err);
      Alert({
        title: "提示",
        message: `${!err.ValidateNodeNames ? "存在空节点,请补充/" : ""} ${
          !err.flows ? "存在没有审批人的流程!" : ""
        }`,
        confirmButtonText: "我知道了",
      }).then(() => {
        console.log("用户点击了确定");
      });
    });
};
</script>

<template>
  <div>
    <OfficeFlow
      :add-nodes="adddata"
      :node="cnode"
      @on-add="onAdd"
      @on-choose="onChoose"
    />
  </div>
  <button @click="onSubmit">onSubmit</button>
</template>