审批流组件 init

src/views/approve_manage/components/flowEdiotr.vue

@@ -1,31 +1,39 @@
 <template>
     <!-- 审批流内容 -->
     <div class="flow-editor">
-        <div class="node">发起人</div>
-        <div class="node">发起人</div>
-        <div class="node">发起人</div>
-        <div class="node">发起人</div>
-        <div class="node">发起人</div>
-        <div class="node">发起人</div>
-        <div class="node">发起人</div>
-        <div class="node">发起人</div>
+        <StartNode :flowNode="mockFlow"></StartNode>
     </div>
 </template>
 
 <script>
+import StartNode from './flowNode/startNode.vue';
+
 export default {
     data() {
         return {
-
+            mockFlow: {
+                nodeType: 1,
+                nodeName: 'StartNode',
+                initiator: '发起人张三',
+                childrenNode: {
+                    nodeType: 2,
+                    nodeName: 'ApproveNode',
+                    approvers: ['审批人1', '审批人2'],
+                    childrenNode: {
+                        nodeType:3,
+                        nodeName:'EndNode',
+                    }
+                }
+            }
         };
     },
-    methods: {
-
-    },
+    methods: {},
+    components: { StartNode }
 };
 </script>
 
 <style scoped lang="scss">
+@import url('../css/nodeStyle.scss');
 .flow-editor{
     width:100%;
     height: 100%;

src/views/approve_manage/components/flowNode/addNode.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="add-node-wrap node-wrap">
+        <div class="node-content">
+            <div class="line"></div>
+            <span class="line-arrow"></span>
+            <span class="add-btn el-icon-circle-plus">
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        };
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.add-node-wrap{
+    position:relative;
+    .node-content{
+        background-color: transparent;
+    }
+    .line,.line-arrow,.add-btn{
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+    }
+    .line{
+        width:2px;
+        height:calc(100px - 10px);
+        background-color: green;
+    }
+    .line-arrow{
+        height: 0;
+        width:0;
+        border-style: solid;
+        border-width: 10px 6px 4px;
+        border-color: #cacaca transparent transparent;
+        bottom:-2px;
+    }
+    .add-btn{
+        border-radius: 50%;
+        color:blue;
+        font-size: 28px;
+        top:50%;
+        transform: translate(-50%,-50%);
+        width:28px;
+        height:28px;
+        &::before{
+            position: absolute;
+            z-index: 3;
+            top:0;
+            left:0;
+        }
+        &::after{
+            z-index: 1;
+            content:'';
+            position:absolute;
+            width:14px;
+            height:14px;
+            top:5px;
+            left:5px;
+            background-color: #fff;
+        }
+    }
+}
+</style>

src/views/approve_manage/components/flowNode/approveNode.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="approve-node-wrap">
+        <p>审批人节点</p>
+        <AddNode />
+        <component 
+            :is="flowNode.childrenNode.nodeName"
+            :flowNode="flowNode.childrenNode"
+            v-if="flowNode.childrenNode"
+        />
+    </div>
+</template>
+
+<script>
+import mixin from './nodeMixin'
+export default {
+    mixins:[mixin],
+    data() {
+        return {};
+    },
+    methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.approve-node-wrap{
+    background-color: brown;
+}
+</style>

src/views/approve_manage/components/flowNode/endNode.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="end-node-wrap">
+        结束节点
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        };
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.end-node-wrap{
+    background-color: blueviolet;
+}
+</style>

src/views/approve_manage/components/flowNode/nodeMixin.js

@@ -0,0 +1,12 @@
+import AddNode from './addNode.vue';
+import ApproveNode from './approveNode.vue';
+import EndNode from './endNode.vue';
+export default{
+    components: { AddNode,ApproveNode,EndNode },
+    props:{
+        flowNode:{
+            type:Object,
+            default:{}
+        }
+    },
+}

src/views/approve_manage/components/flowNode/startNode.vue

@@ -1,25 +1,36 @@
 <template>
-    <div class="start-node-wrap">
-        开始节点
+    <div class="start-node-wrap node-wrap">
+        <div class="node-content">
+            <div class="head">开始节点</div>
+        </div>
+        <AddNode />
+        <component 
+            :is="flowNode.childrenNode.nodeName"
+            :flowNode="flowNode.childrenNode"
+            v-if="flowNode.childrenNode"
+        />
+        
     </div>
 </template>
 
 <script>
+//ApproveNode会调用自身,在开始节点引入一次防止渲染报错
+import ApproveNode from './approveNode.vue';
+import mixin from './nodeMixin'
 export default {
+    components: {ApproveNode},
+    mixins:[mixin],
     data() {
-        return {
-
-        };
-    },
-    methods: {
-
+        return {};
     },
+    methods: {},
 };
 </script>
 
 <style scoped lang="scss">
 .start-node-wrap{
-    color:#fff;
-    background-color:#02BBD1;
+    .head{
+        background-color: #02BBD1;
+    }
 }
 </style>

src/views/approve_manage/css/nodeStyle.scss

@@ -0,0 +1,21 @@
+.node-wrap{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .node-content{
+        border-radius: 4px;
+        width:300px;
+        min-height: 100px;
+        background-color: #fff;
+        .head{
+            color:#fff;
+            height:35px;
+            display: flex;
+            align-items: center;
+            padding: 5px;
+        }
+    }
+}
+* {
+    box-sizing: border-box;
+}