运维平台工作流--简单示例

标签：smooth   npm   size   end   height   false   str   turn   data   

介绍

基于 https://github.com/guozhaolong/wfd-vue

前端为 vue ，后端为python 或者go 。以下主要为前端例子。

前端

git clone https://github.com/guozhaolong/wfd-vue

npm run serve

• example/App.vue

<template>
  <div id="app">
    <el-button size="small" style="float:right;margin-top:6px;margin-right:6px;" @click="add">导出json</el-button>
    <wfd-vue ref="wfd" :data="demoData" :height="600" :users="candidateUsers" :groups="candidateGroups" :categorys="categorys" :lang="lang" />
  </div>
</template>

<script>
import WfdVue from ‘../src/components/Wfd‘
export default {
  name: ‘app‘,
  components:{
    WfdVue
  },
  data () {
    return {
      modalVisible:false,
      lang: "zh",
      demoData: {
        nodes: [{ id: ‘startNode1‘, x: 50, y: 200, label: ‘‘, clazz: ‘start‘, },
          { id: ‘taskNode1‘, x: 200, y: 200, label: ‘主任审批‘, clazz: ‘userTask‘,  },
          { id: ‘taskNode2‘, x: 400, y: 200, label: ‘经理审批‘, clazz: ‘userTask‘,  },
          { id: ‘endNode‘, x: 600, y: 200, label: ‘结束‘, clazz: ‘end‘, }],
        edges: [{ source: ‘startNode1‘, target: ‘taskNode1‘, sourceAnchor:1, targetAnchor:3, clazz: ‘flow‘,label:"发起" },
          { source: ‘taskNode1‘, target: ‘startNode1‘, sourceAnchor:0, targetAnchor:0, clazz: ‘flow‘,label:"拒绝"  },
          { source: ‘taskNode1‘, target: ‘taskNode2‘, sourceAnchor:1, targetAnchor:3, clazz: ‘flow‘ ,label:"同意" },
          { source: ‘taskNode2‘, target: ‘startNode1‘, sourceAnchor:2, targetAnchor:2, clazz: ‘flow‘,label:"拒绝"  },
          { source: ‘taskNode2‘, target: ‘endNode‘, sourceAnchor:1, targetAnchor:3, clazz: ‘flow‘ ,label:"结束" }]
      },
      candidateUsers: [{id:‘1‘,name:‘审批人1‘},{id:‘2‘,name:‘审批人2‘},{id:‘3‘,name:‘审批人3‘}],
      candidateGroups: [{id:‘1‘,name:‘组1‘},{id:‘2‘,name:‘组2‘},{id:‘3‘,name:‘组3‘}],
      categorys: [{id:‘1‘,name:‘分类1‘},{id:‘2‘,name:‘分类2‘},{id:‘3‘,name:‘分类3‘}],
    }
  },
  mounted() {
  },
  methods:{
     add (){
       console.log(JSON.stringify(this.$refs[‘wfd‘].graph.save()))
     }
  }
}
</script>

<style>
#app {
  font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

导出json

下面为 导出json 的数据，可把此数据传递到后端保存。

{"nodes":[{"shape":"start-node","id":"startNode1","x":50,"y":200,"label":"","clazz":"start","style":{},"size":[30,30]},{"shape":"user-task-node","id":"taskNode1","x":200,"y":200,"label":"主任审批","clazz":"userTask","style":{},"size":[80,44]},{"shape":"user-task-node","id":"taskNode2","x":400,"y":200,"label":"经理审批","clazz":"userTask","style":{},"size":[80,44]},{"shape":"end-node","id":"endNode","x":600,"y":200,"label":"结束","clazz":"end","style":{},"size":[30,30]}],"edges":[{"source":"startNode1","target":"taskNode1","sourceAnchor":1,"targetAnchor":3,"clazz":"flow","label":"发起","shape":"flow-polyline-round","id":"edge1","style":{},"startPoint":{"x":65.5,"y":200,"index":1},"endPoint":{"x":159.5,"y":200,"index":3}},{"source":"taskNode1","target":"startNode1","sourceAnchor":0,"targetAnchor":0,"clazz":"flow","label":"拒绝","shape":"flow-polyline-round","id":"edge2","style":{},"startPoint":{"x":200,"y":177.5,"index":0},"endPoint":{"x":50,"y":184.5,"index":0}},{"source":"taskNode1","target":"taskNode2","sourceAnchor":1,"targetAnchor":3,"clazz":"flow","label":"同意","shape":"flow-polyline-round","id":"edge3","style":{},"startPoint":{"x":240.5,"y":200,"index":1},"endPoint":{"x":359.5,"y":200,"index":3}},{"source":"taskNode2","target":"startNode1","sourceAnchor":2,"targetAnchor":2,"clazz":"flow","label":"拒绝","shape":"flow-polyline-round","id":"edge4","style":{},"startPoint":{"x":400,"y":222.5,"index":2},"endPoint":{"x":50,"y":215.5,"index":2}},{"source":"taskNode2","target":"endNode","sourceAnchor":1,"targetAnchor":3,"clazz":"flow","label":"结束","shape":"flow-polyline-round","id":"edge5","style":{},"startPoint":{"x":440.5,"y":200,"index":1},"endPoint":{"x":584.5,"y":200,"index":2,"anchorIndex":2}}],"combos":[],"groups":[]}

工单流程

创建一个基本工单。可以利用工单生成器 直接生成。

然后把工单和上面的工作流进行绑定，发起工单之后 状态就到了 taskNode1，也就是主任审批。 到此步骤之后，检查 source 为 taskNode1 的，共2个。 一个是同意，一个是拒绝。 然后交给审批人进行选择。

审批人选择后，更新工单状态，依次类推。

后端

• 待补充

运维平台工作流--简单示例

标签：smooth   npm   size   end   height   false   str   turn   data   

原文地址：https://blog.51cto.com/hequan/2536208