组件传值改为vuex

src/components/FlowChart.vue

@@ -16,8 +16,6 @@
       </div>
       <div class="graph-container">
         <Graph
-          :nodes="nodes"
-          :edges="edges"
           :state="state"
           @activeSelectBtn="activeSelectBtn"
         ></Graph>
@@ -28,6 +26,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 import Tools from './Tools'
 import LeftToolBtn from './LeftToolBtn'
 import Graph from './Graph'
@@ -35,38 +35,22 @@ import GraphProp from './GraphProp'
 
 import UUID from '@/utils/createUniqueString'
 
-var testNodes = [
-  {id: 1, name: '普通活动', type: 'activity', x: 200, y: 200, selected: false, r: 34},
-  {id: 2, name: '普通活动', type: 'activity', x: 300, y: 300, selected: false, r: 34}
-]
-var testEdges = [
-  {id: 1, source: testNodes[0], target: testNodes[1], selected: false}
-]
-
 export default {
   data () {
     return {
-      btns: [
-        {name: '选择', value: 'select', type: null, draggable: false, active: true},
-        {name: '自动插入', value: 'addStartEnd', type: null, draggable: false, active: false},
-        {name: '开始', value: 'start', type: 'start', draggable: true, active: false},
-        {name: '结束', value: 'end', type: 'end', draggable: true, active: false},
-        {name: '普通活动', value: 'ordinary', type: 'activity', draggable: true, active: false},
-        {name: '块活动', value: 'block', type: 'activity', draggable: true, active: false},
-        {name: '子活动', value: 'subFlow', type: 'activity', draggable: true, active: false},
-        {name: '转移', value: 'line', type: null, draggable: false, active: false},
-        {name: '自转移', value: 'polyline', type: null, draggable: false, active: false}
-      ],
-      nodes: testNodes,
-      edges: testEdges,
       state: {
-        selectedNode: null,
-        selectedEdge: null,
         isDragging: false,
         toLink: false
       }
     }
   },
+  computed: {
+    ...mapState({
+      nodes: state => state.flowchart.nodes,
+      edges: state => state.flowchart.edges,
+      btns: state => state.flowchart.btns
+    })
+  },
   components: {
     Tools,
     LeftToolBtn,
@@ -98,7 +82,7 @@ export default {
     },
     addStartAndEnd: function () {
       this.nodesNoOutput().forEach(node => {
-        var endNode = {
+        const endNode = {
           id: UUID(),
           name: '结束',
           type: 'end',
@@ -107,15 +91,16 @@ export default {
           selected: false,
           r: 34
         }
-        this.nodes.push(endNode)
-        this.edges.push({
+        this.$store.commit('ADD_NODE', endNode)
+        this.$store.commit('ADD_EDGE', {
           id: UUID(),
           source: node,
           target: endNode,
-          selected: false})
+          selected: false
+        })
       })
       this.nodesNoInput().forEach(node => {
-        var startNode = {
+        const startNode = {
           id: UUID(),
           name: '开始',
           type: 'start',
@@ -124,8 +109,8 @@ export default {
           selected: false,
           r: 34
         }
-        this.nodes.push(startNode)
-        this.edges.push({
+        this.$store.commit('ADD_NODE', startNode)
+        this.$store.commit('ADD_EDGE', {
           id: UUID(),
           source: startNode,
           target: node,

src/components/Graph.vue

@@ -1,14 +1,17 @@
 <template>
   <div class="container">
-    <div :class="['graph', {active: state.isDragging}]"
+    <div
       @drop="addNode"
       @dragover.prevent
+      :class="['graph', {active: state.isDragging}]"
     >
-      <svg width="100%" height="418"
+      <svg
         @mousemove="svgMousemove($event)"
         @contextmenu="rightMenu($event)"
         @mousedown.right="svgMouseRightDown"
         @mouseup="svgMouseUp"
+        width="100%"
+        height="418"
       >
         <defs>
           <marker id="mark-arrow" viewBox="0 0 14 14" refX="8" refY="6" markerWidth="12" markerHeight="12" orient="auto">
@@ -21,21 +24,23 @@
         <g class="graph">
           <path v-show="isLinking" class="link dragline" :d="dragData" marker-end="url(#mark-arrow)"></path>
           <g>
-            <path v-for="edge in edges"
-                  :key="edge.id"
-                  :class="['link', {selected: edge.selected}]"
-                  :d="edgeData(edge)"
-                  marker-end="url(#arrow)"
-                  @click="clickEdge(edge)"
+            <path
+              v-for="edge in edges"
+              :key="edge.id"
+              :class="['link', {selected: edge.selected}]"
+              :d="edgeData(edge)"
+              marker-end="url(#arrow)"
+              @click="clickEdge(edge)"
             ></path>
           </g>
           <g>
-            <g v-for="node in nodes"
-               :key="node.id"
-               :class="['conceptG', {selected: node.selected, toLink: state.toLink}]"
-               :transform="'translate('+node.x+','+node.y+')'"
-               @mousedown="nodeMousedown(node)"
-               @mouseup="nodeMouseup(node)"
+            <g
+              v-for="node in nodes"
+              :key="node.id"
+              :class="['conceptG', {selected: node.selected, toLink: state.toLink}]"
+              :transform="'translate('+node.x+','+node.y+')'"
+              @mousedown="nodeMousedown(node)"
+              @mouseup="nodeMouseup(node)"
             >
               <circle :r="node.r"></circle>
               <text text-anchor="middle">
@@ -51,6 +56,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 import RightMenu from './RightMenu'
 
 var nodeId = 3
@@ -67,16 +74,13 @@ export default {
       dragData: ''
     }
   },
-  computed: {},
+  computed: {
+    ...mapState({
+      nodes: state => state.flowchart.nodes,
+      edges: state => state.flowchart.edges
+    })
+  },
   props: {
-    nodes: {
-      type: Array,
-      require: true
-    },
-    edges: {
-      type: Array,
-      require: true
-    },
     state: {
       type: Object,
       require: true
@@ -87,13 +91,14 @@ export default {
   },
   methods: {
     edgeData: function (edge) {
-      return 'M' + edge.source.x + ',' + edge.source.y +
-             ' L' + edge.target.x + ',' + edge.target.y
+      const source = edge.source
+      const target = edge.target
+      return `M${source.x},${source.y}L${target.x},${target.y}`
     },
     addNode: function (e) {
       var jsonStr = e.dataTransfer.getData('item')
       var jsonObj = JSON.parse(jsonStr)
-      this.nodes.push({
+      this.$store.commit('ADD_NODE', {
         id: nodeId++,
         name: jsonObj.name,
         type: jsonObj.type,
@@ -104,16 +109,16 @@ export default {
       })
     },
     unSelectedNodes: function () {
-      this.nodes.map(function (node) {
+      this.nodes.forEach(node => {
         node.selected = false
       })
-      this.state.selectedNode = null
+      this.$store.commit('SET_SELECTED_NODE', null)
     },
     unSelectedEdges: function () {
-      this.edges.map(function (edge) {
+      this.edges.forEach(edge => {
         edge.selected = false
       })
-      this.state.selectedEdge = null
+      this.$store.commit('SET_SELECTED_EDGE', null)
     },
     unSelectedAll: function () {
       this.unSelectedNodes()
@@ -123,7 +128,7 @@ export default {
       var state = this.state
       this.unSelectedAll()
       node.selected = true
-      state.selectedNode = node
+      this.$store.commit('SET_SELECTED_NODE', node)
       this.mousedownNode = node
       if (state.toLink) {
         this.isLinking = true
@@ -138,7 +143,7 @@ export default {
           target: node,
           selected: false
         }
-        this.edges.push(edge)
+        this.$store.commit('ADD_EDGE', edge)
       }
     },
     linkNodes: function () {
@@ -183,7 +188,7 @@ export default {
     clickEdge: function (edge) {
       this.unSelectedAll()
       edge.selected = true
-      this.state.selectedEdge = edge
+      this.$store.commit('SET_SELECTED_EDGE', edge)
     }
   }
 }

src/components/GraphProp.vue

@@ -13,6 +13,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   props: {
     state: {
@@ -28,6 +30,12 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapState({
+      selectedNode: state => state.flowchart.selectedNode,
+      selectedEdge: state => state.flowchart.selectedEdge
+    })
+  },
   methods: {
     showSelectedProp: function (type, data) {
       var prop = {}
@@ -40,13 +48,13 @@ export default {
     }
   },
   watch: {
-    'state.selectedNode': function (curr, old) {
+    'selectedNode': function (curr, old) {
       if (!curr) {
         return false
       }
       this.showSelectedProp('node', curr)
     },
-    'state.selectedEdge': function (curr, old) {
+    'selectedEdge': function (curr, old) {
       if (!curr) {
         return false
       }

src/store/getters.js

@@ -1,4 +1,4 @@
 const getters = {
-  token: state => state.user.token
+  // token: state => state.user.token
 }
 export default getters

src/store/modules/flowchart.js

@@ -1,13 +1,50 @@
 import { queryBills } from '@/api/flowchart'
 
+// 测试数据
+const testNodes = [
+  {id: 1, name: '普通活动', type: 'activity', x: 200, y: 200, selected: false, r: 34},
+  {id: 2, name: '普通活动', type: 'activity', x: 300, y: 300, selected: false, r: 34}
+]
+const testEdges = [
+  {id: 1, source: testNodes[0], target: testNodes[1], selected: false}
+]
+
 const flowchart = {
   state: {
-    customer: [],
-    claims: []
+    nodes: testNodes,
+    edges: testEdges,
+    selectedNode: null,
+    selectedEdge: null,
+    btns: [
+      {name: '选择', value: 'select', type: null, draggable: false, active: true},
+      {name: '自动插入', value: 'addStartEnd', type: null, draggable: false, active: false},
+      {name: '开始', value: 'start', type: 'start', draggable: true, active: false},
+      {name: '结束', value: 'end', type: 'end', draggable: true, active: false},
+      {name: '普通活动', value: 'ordinary', type: 'activity', draggable: true, active: false},
+      {name: '块活动', value: 'block', type: 'activity', draggable: true, active: false},
+      {name: '子活动', value: 'subFlow', type: 'activity', draggable: true, active: false},
+      {name: '转移', value: 'line', type: null, draggable: false, active: false},
+      {name: '自转移', value: 'polyline', type: null, draggable: false, active: false}
+    ]
   },
   mutations: {
-    SET_CUSTOMER: (state, customer) => {
-      state.customer = customer
+    SET_NODES: (state, nodes) => {
+      state.nodes = nodes
+    },
+    SET_EDGES: (state, edges) => {
+      state.edges = edges
+    },
+    ADD_NODE: (state, node) => {
+      state.nodes.push(node)
+    },
+    ADD_EDGE: (state, edge) => {
+      state.edges.push(edge)
+    },
+    SET_SELECTED_NODE: (state, node) => {
+      state.selectedNode = node
+    },
+    SET_SELECTED_EDGE: (state, edge) => {
+      state.selectedEdge = edge
     }
   },
   actions: {
@@ -15,7 +52,7 @@ const flowchart = {
     getBillList({ commit }, payload = {}) {
       return new Promise((resolve, reject) => {
         queryBills(payload).then(res => {
-          commit('SET_CUSTOMER', res.data)
+          commit('SET_NODES', res.data)
           resolve(res)
         }).catch(error => {
           reject(error)