From ba8beeea65bbd7fd8668371af8e3f104d2907f96 Mon Sep 17 00:00:00 2001
From: lizz <374494848@qq.com>
Date: Fri, 31 Jul 2020 13:57:35 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20direction=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |   50 +-
 src/App.vue                                   |  122 +-
 src/components/OrganizationChartContainer.vue | 1236 +++++++++--------
 src/components/OrganizationChartNode.vue      |  107 +-
 4 files changed, 797 insertions(+), 718 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f116746..1a7e97a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
-  "name": "vue-orgchart",
-  "version": "0.1.0",
+  "name": "vue-organization-chart",
+  "version": "1.1.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -5026,7 +5026,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5047,12 +5048,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5067,17 +5070,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5194,7 +5200,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5206,6 +5213,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5220,6 +5228,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5227,12 +5236,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5251,6 +5262,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5331,7 +5343,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5343,6 +5356,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5428,7 +5442,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5464,6 +5479,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5483,6 +5499,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5526,12 +5543,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -6925,6 +6944,11 @@
         "topo": "3.x.x"
       }
     },
+    "jquery": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
+      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
+    },
     "js-message": {
       "version": "1.0.5",
       "resolved": "http://registry.npm.taobao.org/js-message/download/js-message-1.0.5.tgz",
diff --git a/src/App.vue b/src/App.vue
index d8f82dd..3568638 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,60 +1,80 @@
 <template>
-  <div id="app">
-    <org-chart :datasource="ds" @node-click="selectNode">
-<!--       <template slot-scope="{ nodeData }">
-        <b @click="selectNode(nodeData)">{{ nodeData.name }}</b>
-      </template> -->
-    </org-chart>
-  </div>
+    <div id="app">
+        <org-chart :datasource="ds"
+            @node-click="selectNode"
+            direction='r2l'>
+            <!-- <template slot-scope="{ nodeData }">
+                <b @click="selectNode(nodeData)">{{ nodeData.name }}</b>
+            </template> -->
+        </org-chart>
+    </div>
 </template>
 
 <script>
-import OrgChart from './components/OrganizationChartContainer.vue'
+    import OrgChart from './components/OrganizationChartContainer.vue';
 
-export default {
-  name: 'app',
-  components: {
-    OrgChart
-  },
-  data () {
-    return {
-      ds: {
-        'id': '1',
-        'name': 'Lao Lao',
-        'title': 'general manager',
-        'children': [
-          { 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
-          { 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
-            'children': [
-              { 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
-              { 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
-                'children': [
-                  { 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
-                  { 'id': '7', 'name': 'Xiang Xiang', 'title': 'UE engineer' }
-                ]
-               }
-             ]
-           },
-          { 'id': '8', 'name': 'Hong Miao', 'title': 'department manager' },
-          { 'id': '9', 'name': 'Chun Miao', 'title': 'department manager' }
-        ]
-      }
-    }
-  },
-  methods: {
-    selectNode (nodeData) {
-      alert('node ' + nodeData.name + ' is selected')
-    }
-  }
-}
+    export default {
+        name: 'app',
+        components: {
+            OrgChart
+        },
+        data() {
+            return {
+                ds: {
+                    id: '1',
+                    name: 'Lao Lao',
+                    title: 'general manager',
+                    children: [
+                        { id: '2', name: 'Bo Miao', title: 'department manager' },
+                        {
+                            id: '3',
+                            name: 'Su Miao',
+                            title: 'department manager',
+                            children: [
+                                {
+                                    id: '4',
+                                    name: 'Tie Hua',
+                                    title: 'senior engineer'
+                                },
+                                {
+                                    id: '5',
+                                    name: 'Hei Hei',
+                                    title: 'senior engineer',
+                                    children: [
+                                        {
+                                            id: '6',
+                                            name: 'Pang Pang',
+                                            title: 'engineer'
+                                        },
+                                        {
+                                            id: '7',
+                                            name: 'Xiang Xiang',
+                                            title: 'UE engineer'
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        { id: '8', name: 'Hong Miao', title: 'department manager' },
+                        { id: '9', name: 'Chun Miao', title: 'department manager' }
+                    ]
+                }
+            };
+        },
+        methods: {
+            selectNode(nodeData) {
+                alert('node ' + nodeData.name + ' is selected');
+            }
+        }
+    };
 </script>
 
 <style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
+    #app {
+        font-family: 'Avenir', Helvetica, Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-align: center;
+        color: #2c3e50;
+    }
 </style>
diff --git a/src/components/OrganizationChartContainer.vue b/src/components/OrganizationChartContainer.vue
index fb7fce1..f6c5087 100644
--- a/src/components/OrganizationChartContainer.vue
+++ b/src/components/OrganizationChartContainer.vue
@@ -1,614 +1,642 @@
 <template>
-  <div v-bind="{ scopedSlots: $scopedSlots }"
-    class="orgchart-container"
-    @wheel="zoom && zoomHandler($event)"
-    @mouseup="pan && panning && panEndHandler($event)"
-  >
-    <div
-      class="orgchart"
-      :style="{ transform: transformVal, cursor: cursorVal }"
-      @mousedown="pan && panStartHandler($event)"
-      @mousemove="pan && panning && panHandler($event)"
-    >
-      <organization-chart-node :datasource="datasource" :handle-click="handleClick">
-        <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
-          <slot :name="slot" v-bind="scope"/>
-        </template>
-      </organization-chart-node>
+    <div v-bind="{ scopedSlots: $scopedSlots }"
+        class="orgchart-container"
+        @wheel="zoom && zoomHandler($event)"
+        @mouseup="pan && panning && panEndHandler($event)">
+        <div class="orgchart"
+            :class="direction"
+            :style="{ transform: transformVal, cursor: cursorVal }"
+            @mousedown="pan && panStartHandler($event)"
+            @mousemove="pan && panning && panHandler($event)">
+            <organization-chart-node :datasource="datasource"
+                :handle-click="handleClick">
+                <template v-for="slot in Object.keys($scopedSlots)"
+                    :slot="slot"
+                    slot-scope="scope">
+                    <slot :name="slot"
+                        v-bind="scope" />
+                </template>
+            </organization-chart-node>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import $ from 'jquery'
-import OrganizationChartNode from './OrganizationChartNode.vue'
-
-export default {
-  name: 'Container',
-  props: {
-    datasource: {
-      type: Object,
-      required: true
-    },
-    pan: {
-      type: Boolean,
-      required: false
-    },
-    zoom: {
-      type: Boolean,
-      required: false
-    },
-    zoomoutLimit: {
-      type: Number,
-      required: false,
-      default: 0.5
-    },
-    zoominLimit: {
-      type: Number,
-      required: false,
-      default: 7
-    }
-  },
-  data () {
-    return {
-      cursorVal: 'default',
-      panning: false,
-      startX: 0,
-      startY: 0,
-      transformVal: ''
-    }
-  },
-  components: {
-    OrganizationChartNode
-  },
-  methods: {
-    handleClick (nodeData) {
-      this.$emit('node-click', nodeData);
-    },
-    panEndHandler () {
-      this.panning = false
-      this.cursorVal = 'default'
-    },
-    panHandler (e) {
-        let newX = 0
-        let newY = 0
-        if (!e.targetTouches) { // pand on desktop
-          newX = e.pageX - this.startX
-          newY = e.pageY - this.startY
-        } else if (e.targetTouches.length === 1) { // pan on mobile device
-          newX = e.targetTouches[0].pageX - this.startX
-          newY = e.targetTouches[0].pageY - this.startY
-        } else if (e.targetTouches.length > 1) {
-          return;
+    import $ from 'jquery';
+    import OrganizationChartNode from './OrganizationChartNode.vue';
+
+    export default {
+        name: 'Container',
+        props: {
+            datasource: {
+                type: Object,
+                required: true
+            },
+            pan: {
+                type: Boolean,
+                required: false
+            },
+            zoom: {
+                type: Boolean,
+                required: false
+            },
+            zoomoutLimit: {
+                type: Number,
+                required: false,
+                default: 0.5
+            },
+            zoominLimit: {
+                type: Number,
+                required: false,
+                default: 7
+            },
+            direction: {
+                type: String,
+                required: false,
+                default: 't2b'
+            }
+        },
+        data() {
+            return {
+                cursorVal: 'default',
+                panning: false,
+                startX: 0,
+                startY: 0,
+                transformVal: ''
+            };
+        },
+        components: {
+            OrganizationChartNode
+        },
+        methods: {
+            handleClick(nodeData) {
+                this.$emit('node-click', nodeData);
+            },
+            panEndHandler() {
+                this.panning = false;
+                this.cursorVal = 'default';
+            },
+            panHandler(e) {
+                let newX = 0;
+                let newY = 0;
+                if (!e.targetTouches) {
+                    // pand on desktop
+                    newX = e.pageX - this.startX;
+                    newY = e.pageY - this.startY;
+                } else if (e.targetTouches.length === 1) {
+                    // pan on mobile device
+                    newX = e.targetTouches[0].pageX - this.startX;
+                    newY = e.targetTouches[0].pageY - this.startY;
+                } else if (e.targetTouches.length > 1) {
+                    return;
+                }
+                if (this.transformVal === '') {
+                    if (this.transformVal.indexOf('3d') === -1) {
+                        this.transformVal =
+                            'matrix(1,0,0,1,' + newX + ',' + newY + ')';
+                    } else {
+                        this.transformVal =
+                            'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,' +
+                            newX +
+                            ', ' +
+                            newY +
+                            ',0,1)';
+                    }
+                } else {
+                    let matrix = this.transformVal.split(',');
+                    if (this.transformVal.indexOf('3d') === -1) {
+                        matrix[4] = newX;
+                        matrix[5] = newY + ')';
+                    } else {
+                        matrix[12] = newX;
+                        matrix[13] = newY;
+                    }
+                    this.transformVal = matrix.join(',');
+                }
+            },
+            panStartHandler(e) {
+                if ($(e.target).closest('.node').length) {
+                    this.panning = false;
+                    return;
+                } else {
+                    this.cursorVal = 'move';
+                    this.panning = true;
+                }
+                let lastX = 0;
+                let lastY = 0;
+                if (this.transformVal !== '') {
+                    let matrix = this.transformVal.split(',');
+                    if (this.transformVal.indexOf('3d') === -1) {
+                        lastX = parseInt(matrix[4]);
+                        lastY = parseInt(matrix[5]);
+                    } else {
+                        lastX = parseInt(matrix[12]);
+                        lastY = parseInt(matrix[13]);
+                    }
+                }
+                if (!e.targetTouches) {
+                    // pand on desktop
+                    this.startX = e.pageX - lastX;
+                    this.startY = e.pageY - lastY;
+                } else if (e.targetTouches.length === 1) {
+                    // pan on mobile device
+                    this.startX = e.targetTouches[0].pageX - lastX;
+                    this.startY = e.targetTouches[0].pageY - lastY;
+                } else if (e.targetTouches.length > 1) {
+                    return;
+                }
+            },
+            setChartScale(newScale) {
+                let matrix = '';
+                let targetScale = 1;
+                if (this.transformVal === '') {
+                    this.transformVal =
+                        'matrix(' + newScale + ', 0, 0, ' + newScale + ', 0, 0)';
+                } else {
+                    matrix = this.transformVal.split(',');
+                    if (this.transformVal.indexOf('3d') === -1) {
+                        targetScale = Math.abs(
+                            window.parseFloat(matrix[3]) * newScale
+                        );
+                        if (
+                            targetScale > this.zoomoutLimit &&
+                            targetScale < this.zoominLimit
+                        ) {
+                            matrix[0] = 'matrix(' + targetScale;
+                            matrix[3] = targetScale;
+                            this.transformVal = matrix.join(',');
+                        }
+                    } else {
+                        targetScale = Math.abs(
+                            window.parseFloat(matrix[5]) * newScale
+                        );
+                        if (
+                            targetScale > this.zoomoutLimit &&
+                            targetScale < this.zoominLimit
+                        ) {
+                            matrix[0] = 'matrix3d(' + targetScale;
+                            matrix[5] = targetScale;
+                            this.transformVal = matrix.join(',');
+                        }
+                    }
+                }
+            },
+            zoomHandler(e) {
+                let newScale = 1 + (e.deltaY > 0 ? -0.2 : 0.2);
+                this.setChartScale(newScale);
+            }
         }
-        if (this.transformVal === '') {
-          if (this.transformVal.indexOf('3d') === -1) {
-            this.transformVal = 'matrix(1,0,0,1,' + newX + ',' + newY + ')'
-          } else {
-            this.transformVal = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,' + newX + ', ' + newY + ',0,1)'
-          }
-        } else {
-          let matrix = this.transformVal.split(',')
-          if (this.transformVal.indexOf('3d') === -1) {
-            matrix[4] = newX
-            matrix[5] = newY + ')'
-          } else {
-            matrix[12] = newX
-            matrix[13] = newY
-          }
-          this.transformVal = matrix.join(',')
-        }
-    },
-    panStartHandler (e) {
-      if ($(e.target).closest('.node').length) {
-        this.panning = false
-        return
-      } else {
-        this.cursorVal = 'move'
-        this.panning = true
-      }
-      let lastX = 0
-      let lastY = 0
-      if (this.transformVal !== '') {
-        let matrix = this.transformVal.split(',')
-        if (this.transformVal.indexOf('3d') === -1) {
-          lastX = parseInt(matrix[4])
-          lastY = parseInt(matrix[5])
-        } else {
-          lastX = parseInt(matrix[12])
-          lastY = parseInt(matrix[13])
-        }
-      }
-      if (!e.targetTouches) { // pand on desktop
-        this.startX = e.pageX - lastX
-        this.startY = e.pageY - lastY
-      } else if (e.targetTouches.length === 1) { // pan on mobile device
-        this.startX = e.targetTouches[0].pageX - lastX
-        this.startY = e.targetTouches[0].pageY - lastY
-      } else if (e.targetTouches.length > 1) {
-        return
-      }
-    },
-    setChartScale (newScale) {
-      let matrix = ''
-      let targetScale = 1
-      if (this.transformVal === '') {
-        this.transformVal = 'matrix(' + newScale + ', 0, 0, ' + newScale + ', 0, 0)'
-      } else {
-        matrix = this.transformVal.split(',')
-        if (this.transformVal.indexOf('3d') === -1) {
-          targetScale = Math.abs(window.parseFloat(matrix[3]) * newScale)
-          if (targetScale > this.zoomoutLimit && targetScale < this.zoominLimit) {
-            matrix[0] = 'matrix(' + targetScale
-            matrix[3] = targetScale
-            this.transformVal = matrix.join(',')
-          }
-        } else {
-          targetScale = Math.abs(window.parseFloat(matrix[5]) * newScale)
-          if (targetScale > this.zoomoutLimit && targetScale < this.zoominLimit) {
-            matrix[0] = 'matrix3d(' + targetScale
-            matrix[5] = targetScale
-            this.transformVal = matrix.join(',')
-          }
-        }
-      }
-    },
-    zoomHandler (e) {
-      let newScale  = 1 + (e.deltaY > 0 ? -0.2 : 0.2)
-      this.setChartScale(newScale)
-    }
-  }
-};
+    };
 </script>
 
 <style>
-.orgchart-container {
-  position: relative;
-  display: inline-block;
-  height: 420px;
-  width: calc(100% - 24px);
-  border: 2px dashed #aaa;
-  border-radius: 5px;
-  overflow: auto;
-  text-align: center;
-}
-.orgchart {
-  box-sizing: border-box;
-  display: inline-block;
-  min-height: 202px;
-  min-width: 202px;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-image: linear-gradient(
-      90deg,
-      rgba(200, 0, 0, 0.15) 10%,
-      rgba(0, 0, 0, 0) 10%
-    ),
-    linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
-  background-size: 10px 10px;
-  border: 1px dashed rgba(0, 0, 0, 0);
-  padding: 20px;
-}
-
-.orgchart .hidden,
-.orgchart ~ .hidden {
-  display: none;
-}
-
-.orgchart.b2t {
-  transform: rotate(180deg);
-}
-
-.orgchart.l2r {
-  position: absolute;
-  transform: rotate(-90deg) rotateY(180deg);
-  transform-origin: left top;
-}
-
-.orgchart .verticalNodes ul {
-  list-style: none;
-  margin: 0;
-  padding-left: 18px;
-  text-align: left;
-}
-.orgchart .verticalNodes ul:first-child {
-  margin-top: 2px;
-}
-.orgchart .verticalNodes > td::before {
-  content: "";
-  border: 1px solid rgba(217, 83, 79, 0.8);
-}
-.orgchart .verticalNodes > td > ul > li:first-child::before {
-  box-sizing: border-box;
-  top: -4px;
-  height: 30px;
-  width: calc(50% - 2px);
-  border-width: 2px 0 0 2px;
-}
-.orgchart .verticalNodes ul > li {
-  position: relative;
-}
-.orgchart .verticalNodes ul > li::before,
-.orgchart .verticalNodes ul > li::after {
-  box-sizing: border-box;
-  content: "";
-  position: absolute;
-  left: -6px;
-  border-color: rgba(217, 83, 79, 0.8);
-  border-style: solid;
-  border-width: 0 0 2px 2px;
-}
-.orgchart .verticalNodes ul > li::before {
-  top: -4px;
-  height: 30px;
-  width: 11px;
-}
-.orgchart .verticalNodes ul > li::after {
-  top: 1px;
-  height: 100%;
-}
-.orgchart .verticalNodes ul > li:first-child::after {
-  box-sizing: border-box;
-  top: 24px;
-  width: 11px;
-  border-width: 2px 0 0 2px;
-}
-.orgchart .verticalNodes ul > li:last-child::after {
-  box-sizing: border-box;
-  border-width: 2px 0 0;
-}
-
-.orgchart.r2l {
-  position: absolute;
-  transform: rotate(90deg);
-  transform-origin: left top;
-}
-
-.orgchart > .spinner {
-  font-size: 100px;
-  margin-top: 30px;
-  color: rgba(68, 157, 68, 0.8);
-}
-
-.orgchart table {
-  border-spacing: 0;
-  border-collapse: separate;
-}
-
-.orgchart > table:first-child {
-  margin: 20px auto;
-}
-
-.orgchart td {
-  text-align: center;
-  vertical-align: top;
-  padding: 0;
-}
-
-.orgchart .lines:nth-child(3) td {
-  box-sizing: border-box;
-  height: 20px;
-}
-
-.orgchart .lines .topLine {
-  border-top: 2px solid rgba(217, 83, 79, 0.8);
-}
-
-.orgchart .lines .rightLine {
-  border-right: 1px solid rgba(217, 83, 79, 0.8);
-  float: none;
-  border-radius: 0;
-}
-
-.orgchart .lines .leftLine {
-  border-left: 1px solid rgba(217, 83, 79, 0.8);
-  float: none;
-  border-radius: 0;
-}
-
-.orgchart .lines .downLine {
-  background-color: rgba(217, 83, 79, 0.8);
-  margin: 0 auto;
-  height: 20px;
-  width: 2px;
-  float: none;
-}
-
-/* node styling */
-.orgchart .node {
-  box-sizing: border-box;
-  display: inline-block;
-  position: relative;
-  margin: 0;
-  padding: 3px;
-  border: 2px dashed transparent;
-  text-align: center;
-  width: 130px;
-}
-
-.orgchart.l2r .node,
-.orgchart.r2l .node {
-  width: 50px;
-  height: 130px;
-}
-
-.orgchart .node > .spinner {
-  position: absolute;
-  top: calc(50% - 15px);
-  left: calc(50% - 15px);
-  vertical-align: middle;
-  font-size: 30px;
-  color: rgba(68, 157, 68, 0.8);
-}
-
-.orgchart .node:hover {
-  background-color: rgba(238, 217, 54, 0.5);
-  transition: 0.5s;
-  cursor: default;
-  z-index: 20;
-}
-
-.orgchart .node.focused {
-  background-color: rgba(238, 217, 54, 0.5);
-}
-
-.orgchart .ghost-node {
-  position: fixed;
-  left: -10000px;
-  top: -10000px;
-}
-
-.orgchart .ghost-node rect {
-  fill: #ffffff;
-  stroke: #bf0000;
-}
-
-.orgchart .node.allowedDrop {
-  border-color: rgba(68, 157, 68, 0.9);
-}
-
-.orgchart .node .title {
-  text-align: center;
-  font-size: 12px;
-  font-weight: bold;
-  height: 20px;
-  line-height: 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background-color: rgba(217, 83, 79, 0.8);
-  color: #fff;
-  border-radius: 4px 4px 0 0;
-}
-
-.orgchart.b2t .node .title {
-  transform: rotate(-180deg);
-  transform-origin: center bottom;
-}
-
-.orgchart.l2r .node .title {
-  transform: rotate(-90deg) translate(-40px, -40px) rotateY(180deg);
-  transform-origin: bottom center;
-  width: 120px;
-}
-
-.orgchart.r2l .node .title {
-  transform: rotate(-90deg) translate(-40px, -40px);
-  transform-origin: bottom center;
-  width: 120px;
-}
-
-.orgchart .node .title .symbol {
-  float: left;
-  margin-top: 4px;
-  margin-left: 2px;
-}
-
-.orgchart .node .content {
-  box-sizing: border-box;
-  width: 100%;
-  height: 20px;
-  font-size: 11px;
-  line-height: 18px;
-  border: 1px solid rgba(217, 83, 79, 0.8);
-  border-radius: 0 0 4px 4px;
-  text-align: center;
-  background-color: #fff;
-  color: #333;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.orgchart.b2t .node .content {
-  transform: rotate(180deg);
-  transform-origin: center top;
-}
-
-.orgchart.l2r .node .content {
-  transform: rotate(-90deg) translate(-40px, -40px) rotateY(180deg);
-  transform-origin: top center;
-  width: 120px;
-}
-
-.orgchart.r2l .node .content {
-  transform: rotate(-90deg) translate(-40px, -40px);
-  transform-origin: top center;
-  width: 120px;
-}
-
-.orgchart .node .edge {
-  font-size: 15px;
-  position: absolute;
-  color: rgba(68, 157, 68, 0.5);
-  cursor: default;
-  transition: 0.2s;
-}
-
-.orgchart.noncollapsable .node .edge {
-  display: none;
-}
-
-.orgchart .edge:hover {
-  color: #449d44;
-  cursor: pointer;
-}
-
-.orgchart .node .verticalEdge {
-  width: calc(100% - 10px);
-  width: -webkit-calc(100% - 10px);
-  width: -moz-calc(100% - 10px);
-  left: 5px;
-}
-
-.orgchart .node .topEdge {
-  top: -4px;
-}
-
-.orgchart .node .bottomEdge {
-  bottom: -4px;
-}
-
-.orgchart .node .horizontalEdge {
-  width: 15px;
-  height: calc(100% - 10px);
-  height: -webkit-calc(100% - 10px);
-  height: -moz-calc(100% - 10px);
-  top: 5px;
-}
-
-.orgchart .node .rightEdge {
-  right: -4px;
-}
-
-.orgchart .node .leftEdge {
-  left: -4px;
-}
-
-.orgchart .node .horizontalEdge::before {
-  position: absolute;
-  top: calc(50% - 7px);
-}
-
-.orgchart .node .rightEdge::before {
-  right: 3px;
-}
-
-.orgchart .node .leftEdge::before {
-  left: 3px;
-}
-
-.orgchart .node .toggleBtn {
-  position: absolute;
-  left: 5px;
-  bottom: -2px;
-  color: rgba(68, 157, 68, 0.6);
-}
-
-.orgchart .node .toggleBtn:hover {
-  color: rgba(68, 157, 68, 0.8);
-}
-
-.oc-export-btn {
-  display: inline-block;
-  position: absolute;
-  right: 5px;
-  top: 5px;
-  padding: 6px 12px;
-  margin-bottom: 0;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.42857143;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  user-select: none;
-  color: #fff;
-  background-color: #5cb85c;
-  border: 1px solid transparent;
-  border-color: #4cae4c;
-  border-radius: 4px;
-}
-
-.oc-export-btn[disabled] {
-  cursor: not-allowed;
-  box-shadow: none;
-  opacity: 0.3;
-}
-
-.oc-export-btn:hover,
-.oc-export-btn:focus,
-.oc-export-btn:active {
-  background-color: #449d44;
-  border-color: #347a34;
-}
-
-.orgchart ~ .mask {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 999;
-  text-align: center;
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-.orgchart ~ .mask .spinner {
-  position: absolute;
-  top: calc(50% - 54px);
-  left: calc(50% - 54px);
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 108px;
-}
-
-.orgchart .node {
-  transition: transform 0.3s, opacity 0.3s;
-}
-
-.orgchart .slide-down {
-  opacity: 0;
-  transform: translateY(40px);
-}
-
-.orgchart.l2r .node.slide-down,
-.orgchart.r2l .node.slide-down {
-  transform: translateY(130px);
-}
-
-.orgchart .slide-up {
-  opacity: 0;
-  transform: translateY(-40px);
-}
-
-.orgchart.l2r .node.slide-up,
-.orgchart.r2l .node.slide-up {
-  transform: translateY(-130px);
-}
-
-.orgchart .slide-right {
-  opacity: 0;
-  transform: translateX(130px);
-}
-
-.orgchart.l2r .node.slide-right,
-.orgchart.r2l .node.slide-right {
-  transform: translateX(40px);
-}
-
-.orgchart .slide-left {
-  opacity: 0;
-  transform: translateX(-130px);
-}
-
-.orgchart.l2r .node.slide-left,
-.orgchart.r2l .node.slide-left {
-  transform: translateX(-40px);
-}
+    .orgchart-container {
+        position: relative;
+        display: inline-block;
+        height: 420px;
+        width: calc(100% - 24px);
+        border: 2px dashed #aaa;
+        border-radius: 5px;
+        overflow: auto;
+        text-align: center;
+    }
+    .orgchart {
+        box-sizing: border-box;
+        display: inline-block;
+        min-height: 202px;
+        min-width: 202px;
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        background-image: linear-gradient(
+                90deg,
+                rgba(200, 0, 0, 0.15) 10%,
+                rgba(0, 0, 0, 0) 10%
+            ),
+            linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
+        background-size: 10px 10px;
+        border: 1px dashed rgba(0, 0, 0, 0);
+        padding: 20px;
+    }
+
+    .orgchart .hidden,
+    .orgchart ~ .hidden {
+        display: none;
+    }
+
+    .orgchart.b2t {
+        transform: rotate(180deg);
+    }
+
+    .orgchart.l2r {
+        position: absolute;
+        transform: rotate(-90deg) rotateY(180deg);
+        transform-origin: left top;
+    }
+
+    .orgchart .verticalNodes ul {
+        list-style: none;
+        margin: 0;
+        padding-left: 18px;
+        text-align: left;
+    }
+    .orgchart .verticalNodes ul:first-child {
+        margin-top: 2px;
+    }
+    .orgchart .verticalNodes > td::before {
+        content: '';
+        border: 1px solid rgba(217, 83, 79, 0.8);
+    }
+    .orgchart .verticalNodes > td > ul > li:first-child::before {
+        box-sizing: border-box;
+        top: -4px;
+        height: 30px;
+        width: calc(50% - 2px);
+        border-width: 2px 0 0 2px;
+    }
+    .orgchart .verticalNodes ul > li {
+        position: relative;
+    }
+    .orgchart .verticalNodes ul > li::before,
+    .orgchart .verticalNodes ul > li::after {
+        box-sizing: border-box;
+        content: '';
+        position: absolute;
+        left: -6px;
+        border-color: rgba(217, 83, 79, 0.8);
+        border-style: solid;
+        border-width: 0 0 2px 2px;
+    }
+    .orgchart .verticalNodes ul > li::before {
+        top: -4px;
+        height: 30px;
+        width: 11px;
+    }
+    .orgchart .verticalNodes ul > li::after {
+        top: 1px;
+        height: 100%;
+    }
+    .orgchart .verticalNodes ul > li:first-child::after {
+        box-sizing: border-box;
+        top: 24px;
+        width: 11px;
+        border-width: 2px 0 0 2px;
+    }
+    .orgchart .verticalNodes ul > li:last-child::after {
+        box-sizing: border-box;
+        border-width: 2px 0 0;
+    }
+
+    .orgchart.r2l {
+        position: absolute;
+        transform: rotate(90deg);
+        transform-origin: left top;
+    }
+
+    .orgchart > .spinner {
+        font-size: 100px;
+        margin-top: 30px;
+        color: rgba(68, 157, 68, 0.8);
+    }
+
+    .orgchart table {
+        border-spacing: 0;
+        border-collapse: separate;
+    }
+
+    .orgchart > table:first-child {
+        margin: 20px auto;
+    }
+
+    .orgchart td {
+        text-align: center;
+        vertical-align: top;
+        padding: 0;
+    }
+
+    .orgchart .lines:nth-child(3) td {
+        box-sizing: border-box;
+        height: 20px;
+    }
+
+    .orgchart .lines .topLine {
+        border-top: 2px solid rgba(217, 83, 79, 0.8);
+    }
+
+    .orgchart .lines .rightLine {
+        border-right: 1px solid rgba(217, 83, 79, 0.8);
+        float: none;
+        border-radius: 0;
+    }
+
+    .orgchart .lines .leftLine {
+        border-left: 1px solid rgba(217, 83, 79, 0.8);
+        float: none;
+        border-radius: 0;
+    }
+
+    .orgchart .lines .downLine {
+        background-color: rgba(217, 83, 79, 0.8);
+        margin: 0 auto;
+        height: 20px;
+        width: 2px;
+        float: none;
+    }
+
+    /* node styling */
+    .orgchart .node {
+        box-sizing: border-box;
+        display: inline-block;
+        position: relative;
+        margin: 0;
+        padding: 3px;
+        border: 2px dashed transparent;
+        text-align: center;
+        width: 130px;
+    }
+
+    .orgchart.l2r .node,
+    .orgchart.r2l .node {
+        width: 50px;
+        height: 130px;
+    }
+
+    .orgchart .node > .spinner {
+        position: absolute;
+        top: calc(50% - 15px);
+        left: calc(50% - 15px);
+        vertical-align: middle;
+        font-size: 30px;
+        color: rgba(68, 157, 68, 0.8);
+    }
+
+    .orgchart .node:hover {
+        background-color: rgba(238, 217, 54, 0.5);
+        transition: 0.5s;
+        cursor: default;
+        z-index: 20;
+    }
+
+    .orgchart .node.focused {
+        background-color: rgba(238, 217, 54, 0.5);
+    }
+
+    .orgchart .ghost-node {
+        position: fixed;
+        left: -10000px;
+        top: -10000px;
+    }
+
+    .orgchart .ghost-node rect {
+        fill: #ffffff;
+        stroke: #bf0000;
+    }
+
+    .orgchart .node.allowedDrop {
+        border-color: rgba(68, 157, 68, 0.9);
+    }
+
+    .orgchart .node .title {
+        text-align: center;
+        font-size: 12px;
+        font-weight: bold;
+        height: 20px;
+        line-height: 20px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        background-color: rgba(217, 83, 79, 0.8);
+        color: #fff;
+        border-radius: 4px 4px 0 0;
+    }
+
+    .orgchart.b2t .node .title {
+        transform: rotate(-180deg);
+        transform-origin: center bottom;
+    }
+
+    .orgchart.l2r .node .title {
+        transform: rotate(-90deg) translate(-40px, -40px) rotateY(180deg);
+        transform-origin: bottom center;
+        width: 120px;
+    }
+
+    .orgchart.r2l .node .title {
+        transform: rotate(-90deg) translate(-40px, -40px);
+        transform-origin: bottom center;
+        width: 120px;
+    }
+
+    .orgchart .node .title .symbol {
+        float: left;
+        margin-top: 4px;
+        margin-left: 2px;
+    }
+
+    .orgchart .node .content {
+        box-sizing: border-box;
+        width: 100%;
+        height: 20px;
+        font-size: 11px;
+        line-height: 18px;
+        border: 1px solid rgba(217, 83, 79, 0.8);
+        border-radius: 0 0 4px 4px;
+        text-align: center;
+        background-color: #fff;
+        color: #333;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .orgchart.b2t .node .content {
+        transform: rotate(180deg);
+        transform-origin: center top;
+    }
+
+    .orgchart.l2r .node .content {
+        transform: rotate(-90deg) translate(-40px, -40px) rotateY(180deg);
+        transform-origin: top center;
+        width: 120px;
+    }
+
+    .orgchart.r2l .node .content {
+        transform: rotate(-90deg) translate(-40px, -40px);
+        transform-origin: top center;
+        width: 120px;
+    }
+
+    .orgchart .node .edge {
+        font-size: 15px;
+        position: absolute;
+        color: rgba(68, 157, 68, 0.5);
+        cursor: default;
+        transition: 0.2s;
+    }
+
+    .orgchart.noncollapsable .node .edge {
+        display: none;
+    }
+
+    .orgchart .edge:hover {
+        color: #449d44;
+        cursor: pointer;
+    }
+
+    .orgchart .node .verticalEdge {
+        width: calc(100% - 10px);
+        width: -webkit-calc(100% - 10px);
+        width: -moz-calc(100% - 10px);
+        left: 5px;
+    }
+
+    .orgchart .node .topEdge {
+        top: -4px;
+    }
+
+    .orgchart .node .bottomEdge {
+        bottom: -4px;
+    }
+
+    .orgchart .node .horizontalEdge {
+        width: 15px;
+        height: calc(100% - 10px);
+        height: -webkit-calc(100% - 10px);
+        height: -moz-calc(100% - 10px);
+        top: 5px;
+    }
+
+    .orgchart .node .rightEdge {
+        right: -4px;
+    }
+
+    .orgchart .node .leftEdge {
+        left: -4px;
+    }
+
+    .orgchart .node .horizontalEdge::before {
+        position: absolute;
+        top: calc(50% - 7px);
+    }
+
+    .orgchart .node .rightEdge::before {
+        right: 3px;
+    }
+
+    .orgchart .node .leftEdge::before {
+        left: 3px;
+    }
+
+    .orgchart .node .toggleBtn {
+        position: absolute;
+        left: 5px;
+        bottom: -2px;
+        color: rgba(68, 157, 68, 0.6);
+    }
+
+    .orgchart .node .toggleBtn:hover {
+        color: rgba(68, 157, 68, 0.8);
+    }
+
+    .oc-export-btn {
+        display: inline-block;
+        position: absolute;
+        right: 5px;
+        top: 5px;
+        padding: 6px 12px;
+        margin-bottom: 0;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 1.42857143;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: middle;
+        touch-action: manipulation;
+        cursor: pointer;
+        user-select: none;
+        color: #fff;
+        background-color: #5cb85c;
+        border: 1px solid transparent;
+        border-color: #4cae4c;
+        border-radius: 4px;
+    }
+
+    .oc-export-btn[disabled] {
+        cursor: not-allowed;
+        box-shadow: none;
+        opacity: 0.3;
+    }
+
+    .oc-export-btn:hover,
+    .oc-export-btn:focus,
+    .oc-export-btn:active {
+        background-color: #449d44;
+        border-color: #347a34;
+    }
+
+    .orgchart ~ .mask {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 999;
+        text-align: center;
+        background-color: rgba(0, 0, 0, 0.3);
+    }
+
+    .orgchart ~ .mask .spinner {
+        position: absolute;
+        top: calc(50% - 54px);
+        left: calc(50% - 54px);
+        color: rgba(255, 255, 255, 0.8);
+        font-size: 108px;
+    }
+
+    .orgchart .node {
+        transition: transform 0.3s, opacity 0.3s;
+    }
+
+    .orgchart .slide-down {
+        opacity: 0;
+        transform: translateY(40px);
+    }
+
+    .orgchart.l2r .node.slide-down,
+    .orgchart.r2l .node.slide-down {
+        transform: translateY(130px);
+    }
+
+    .orgchart .slide-up {
+        opacity: 0;
+        transform: translateY(-40px);
+    }
+
+    .orgchart.l2r .node.slide-up,
+    .orgchart.r2l .node.slide-up {
+        transform: translateY(-130px);
+    }
+
+    .orgchart .slide-right {
+        opacity: 0;
+        transform: translateX(130px);
+    }
+
+    .orgchart.l2r .node.slide-right,
+    .orgchart.r2l .node.slide-right {
+        transform: translateX(40px);
+    }
+
+    .orgchart .slide-left {
+        opacity: 0;
+        transform: translateX(-130px);
+    }
+
+    .orgchart.l2r .node.slide-left,
+    .orgchart.r2l .node.slide-left {
+        transform: translateX(-40px);
+    }
 </style>
diff --git a/src/components/OrganizationChartNode.vue b/src/components/OrganizationChartNode.vue
index 80cfc1b..3834bf1 100644
--- a/src/components/OrganizationChartNode.vue
+++ b/src/components/OrganizationChartNode.vue
@@ -1,57 +1,64 @@
 <template>
-  <table>
-    <tbody>
-      <tr>
-       <td :colspan="datasource.children && datasource.children.length ? datasource.children.length*2 : null">
-        <div class="node" :id="datasource.id" @click.stop="handleClick(datasource)">
-          <slot :node-data="datasource">
-            <div class="title">
-              <i class="fa fa-users symbol"></i>
-              {{ datasource.name }}
-            </div>
-            <div class="content">{{ datasource.title }}</div>
-          </slot>
-        </div>
-       </td>
-      </tr>
-      <template v-if="datasource.children && datasource.children.length">
-        <tr class="lines">
-          <td :colspan="datasource.children.length*2">
-            <div class="downLine"></div>
-          </td>
-        </tr>
-        <tr class="lines">
-          <td class="rightLine"></td>
-         <template v-for="n in (datasource.children.length-1)">
-            <td class="leftLine topLine"></td>
-            <td class="rightLine topLine"></td>
-         </template>
-          <td class="leftLine"></td>
-        </tr>
-        <tr class="nodes">
-          <td colspan="2" v-for="child in datasource.children" :key="child.id">
-            <node :datasource="child" :handle-click="handleClick">
-              <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
-                <slot :name="slot" v-bind="scope"/>
-              </template>
-            </node>
-          </td>
-        </tr>
-      </template>
-    </tbody>
-  </table>
+    <table>
+        <tbody>
+            <tr>
+                <td :colspan="datasource.children && datasource.children.length ? datasource.children.length*2 : null">
+                    <div class="node"
+                        :id="datasource.id"
+                        @click.stop="handleClick(datasource)">
+                        <slot :node-data="datasource">
+                            <div class="title">
+                                <i class="fa fa-users symbol"></i>
+                                {{ datasource.name }}
+                            </div>
+                            <div class="content">{{ datasource.title }}</div>
+                        </slot>
+                    </div>
+                </td>
+            </tr>
+            <template v-if="datasource.children && datasource.children.length">
+                <tr class="lines">
+                    <td :colspan="datasource.children.length*2">
+                        <div class="downLine"></div>
+                    </td>
+                </tr>
+                <tr class="lines">
+                    <td class="rightLine"></td>
+                    <template v-for="n in (datasource.children.length-1)">
+                        <td class="leftLine topLine"></td>
+                        <td class="rightLine topLine"></td>
+                    </template>
+                    <td class="leftLine"></td>
+                </tr>
+                <tr class="nodes">
+                    <td colspan="2"
+                        v-for="child in datasource.children"
+                        :key="child.id">
+                        <node :datasource="child"
+                            :handle-click="handleClick">
+                            <template v-for="slot in Object.keys($scopedSlots)"
+                                :slot="slot"
+                                slot-scope="scope">
+                                <slot :name="slot"
+                                    v-bind="scope" />
+                            </template>
+                        </node>
+                    </td>
+                </tr>
+            </template>
+        </tbody>
+    </table>
 </template>
 
 <script>
-export default {
-  name: 'node',
-  props: {
-    datasource: Object,
-    handleClick: Function
-  },
-  methods: {
-  }
-};
+    export default {
+        name: 'node',
+        props: {
+            datasource: Object,
+            handleClick: Function
+        },
+        methods: {}
+    };
 </script>
 
 <style>

From e6f2b0530e7743ff993d59576a9bb3a19611fa04 Mon Sep 17 00:00:00 2001
From: lizz <374494848@qq.com>
Date: Fri, 31 Jul 2020 14:01:15 +0800
Subject: [PATCH 2/3] fix eslint error

---
 src/components/OrganizationChartNode.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/OrganizationChartNode.vue b/src/components/OrganizationChartNode.vue
index 3834bf1..87948ec 100644
--- a/src/components/OrganizationChartNode.vue
+++ b/src/components/OrganizationChartNode.vue
@@ -25,8 +25,10 @@
                 <tr class="lines">
                     <td class="rightLine"></td>
                     <template v-for="n in (datasource.children.length-1)">
-                        <td class="leftLine topLine"></td>
-                        <td class="rightLine topLine"></td>
+                        <td class="leftLine topLine"
+                            :key="n"></td>
+                        <td class="rightLine topLine"
+                            :key="n"></td>
                     </template>
                     <td class="leftLine"></td>
                 </tr>

From 0955e92d68b907fdf034a7f45ca968367e2236a7 Mon Sep 17 00:00:00 2001
From: lizz <374494848@qq.com>
Date: Fri, 31 Jul 2020 14:07:01 +0800
Subject: [PATCH 3/3] fix duplicated key

---
 src/components/OrganizationChartNode.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/OrganizationChartNode.vue b/src/components/OrganizationChartNode.vue
index 87948ec..c04259f 100644
--- a/src/components/OrganizationChartNode.vue
+++ b/src/components/OrganizationChartNode.vue
@@ -28,7 +28,7 @@
                         <td class="leftLine topLine"
                             :key="n"></td>
                         <td class="rightLine topLine"
-                            :key="n"></td>
+                            :key="n+datasource.children.length*1"></td>
                     </template>
                     <td class="leftLine"></td>
                 </tr>