From 4da72f1b5239a204bac9901eb70218d48fad5301 Mon Sep 17 00:00:00 2001
From: dabeng <dabeng413@gmail.com>
Date: Sun, 21 Oct 2018 10:55:29 +0800
Subject: [PATCH] first patch

---
 src/App.vue                              |  45 ++-
 src/components/HelloWorld.vue            |  58 ---
 src/components/OrganizationChart.vue     | 460 +++++++++++++++++++++++
 src/components/OrganizationChartTree.vue |  48 +++
 4 files changed, 548 insertions(+), 63 deletions(-)
 delete mode 100644 src/components/HelloWorld.vue
 create mode 100644 src/components/OrganizationChart.vue
 create mode 100644 src/components/OrganizationChartTree.vue

diff --git a/src/App.vue b/src/App.vue
index fcc5662..8a7158c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,43 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div id="chart-container">
+      <organization-chart :datasource="datasource"></organization-chart>
+    </div>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import OrganizationChart from './components/OrganizationChart.vue'
 
 export default {
   name: 'app',
   components: {
-    HelloWorld
+    OrganizationChart
+  },
+  data: function () {
+    return {
+      datasource: {
+        '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' }
+        ]
+      }
+    }
   }
 }
 </script>
@@ -23,6 +49,15 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+}
+#chart-container {
+  position: relative;
+  display: inline-block;
+  height: 420px;
+  width: calc(100% - 24px);
+  border: 2px dashed #aaa;
+  border-radius: 5px;
+  overflow: auto;
+  text-align: center;
 }
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index d0cb611..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h2>{{ msg }}</h2>
-    <p>
-      For guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/OrganizationChart.vue b/src/components/OrganizationChart.vue
new file mode 100644
index 0000000..93c000f
--- /dev/null
+++ b/src/components/OrganizationChart.vue
@@ -0,0 +1,460 @@
+<template>
+  <div class="orgchart">
+      <organization-chart-tree :datasource="datasource"></organization-chart-tree>
+  </div>
+</template>
+
+<script>
+import OrganizationChartTree from "./OrganizationChartTree";
+
+export default {
+  props: {
+    datasource: Object
+  },
+  components: {
+    OrganizationChartTree
+  }
+};
+</script>
+
+<style>
+.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/OrganizationChartTree.vue b/src/components/OrganizationChartTree.vue
new file mode 100644
index 0000000..1355ae6
--- /dev/null
+++ b/src/components/OrganizationChartTree.vue
@@ -0,0 +1,48 @@
+<template>
+  <table>
+    <tr>
+     <td :colspan="datasource.children && datasource.children.length ? datasource.children.length*2 : null">
+       <div class="node">
+        <div class="title">
+          <i class="fa fa-users symbol"></i>
+          {{ datasource.name }}
+        </div>
+        <div class="content">{{ datasource.title }}</div>
+        <i class="edge verticalEdge bottomEdge fa"></i>
+        </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="i 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"></node>
+        </td>
+      </tr>
+    </template>
+  </table>
+</template>
+
+<script>
+export default {
+  name: "node",
+  props: {
+    datasource: Object
+  }
+};
+</script>
+
+<style>
+</style>