init commi

YunWisdom · Nov 21, 2017 · a3cd269 · a3cd269
commit a3cd269
Show file tree

Hide file tree

Showing 16 changed files with 5,005 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-3"
+  ]
+}
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,12 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
diff --git a/.postcssrc.js b/.postcssrc.js
@@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    // to edit target browsers: use "browserlist" field in package.json
+    "autoprefixer": {}
+  }
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,18 @@
+# vue-org-tree
+
+> A simple organization tree chart based on Vue2.x
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+```
+
+For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>vue-org-tree</title>
+    <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/dist/build.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "vue-org-tree",
+  "description": "A simple organization tree chart based on Vue2.x",
+  "version": "1.0.0",
+  "author": "steven <[email protected]>",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "dependencies": {
+    "vue": "^2.4.4"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.6",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-stage-3": "^6.24.1",
+    "cross-env": "^5.0.5",
+    "css-loader": "^0.28.7",
+    "file-loader": "^1.1.4",
+    "less": "^2.7.3",
+    "less-loader": "^4.0.5",
+    "vue-loader": "^13.0.5",
+    "vue-template-compiler": "^2.4.4",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.9.1"
+  },
+  "browserslist": [
+    "> 5%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,61 @@
+<template>
+  <div id="app" style="padding:100px;text-align:center;">
+    <org-tree :data="orgData" :vertical="true" @on-node-click="onNodeClick">
+      <!-- <org-tree-node :data="orgData" @on-node-click="onNodeClick">
+        <org-tree-node v-if="orgData.children" v-for="child in orgData.children" :data="child" @on-node-click="onNodeClick" :key="child.id"></org-tree-node>
+      </org-tree-node> -->
+    </org-tree>
+  </div>
+</template>
+
+<script>
+import {OrgTree, OrgTreeNode} from './components/org-tree'
+
+export default {
+  name: 'app',
+  components: {
+    OrgTree,
+    OrgTreeNode
+  },
+  data () {
+    return {
+      orgData: {
+        id: 1,
+        label: '企易购科技有限公司',
+        children: [{
+          id: 2,
+          label: '研发部',
+          children: [{
+            id: 5,
+            label: '研发-前端'
+          }, {
+            id: 6,
+            label: '研发-后端'
+          }]
+        }, {
+          id: 3,
+          label: '销售部',
+          children: [{
+            id: 7,
+            label: '销售一部'
+          }, {
+            id: 8,
+            label: '销售二部'
+          }]
+        }, {
+          id: 4,
+          label: '财务部'
+        }, {
+          id: 9,
+          label: 'HR人事'
+        }]
+      }
+    }
+  },
+  methods: {
+    onNodeClick (node) {
+      console.log(node)
+    }
+  }
+}
+</script>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/org-tree/index.js b/src/components/org-tree/index.js
@@ -0,0 +1,24 @@
+import OrgTree from './org-tree'
+import OrgTreeNode from './org-tree-node'
+
+const install = (Vue) => {
+  if (install.installed) {
+    return
+  }
+
+  install.installed = true
+
+  Vue.component(OrgTree.name, OrgTree)
+  Vue.component(OrgTreeNode.name, OrgTreeNode)
+}
+
+export {
+  OrgTree,
+  OrgTreeNode
+}
+
+export default {
+  OrgTree,
+  OrgTreeNode,
+  install
+}
diff --git a/src/components/org-tree/org-tree-node.vue b/src/components/org-tree/org-tree-node.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="org-tree-node">
+    <div class="org-tree-node-label" @click="$emit('on-node-click', data)">
+      <slot name="label" :data="data">{{data[props.label]}}</slot>
+    </div>
+    <div v-if="children && children.length" class="org-tree-node-children">
+      <slot :data="data">
+        <org-tree-node
+          v-if="children && children.length"
+          v-for="child in children"
+          :data="child"
+          :props="props"
+          :key="child.id"
+          @on-node-click="$emit('on-node-click', $event)"
+        ></org-tree-node>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrgTreeNode',
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    props: {
+      type: Object,
+      default: () => ({
+        id: 'id',
+        label: 'label',
+        children: 'children'
+      })
+    }
+  },
+  computed: {
+    children () {
+      return this.data[this.props.children] || []
+    }
+  }
+}
+</script>
diff --git a/src/components/org-tree/org-tree.vue b/src/components/org-tree/org-tree.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="org-tree-container" :class="{vertical}">
+    <slot :data="data">
+      <org-tree-node :data="data" :props="props" @on-node-click="$emit('on-node-click', $event)"></org-tree-node>
+    </slot>
+  </div>
+</template>
+
+<script>
+import OrgTreeNode from './org-tree-node'
+
+export default {
+  name: 'OrgTree',
+  components: {
+    OrgTreeNode
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    props: {
+      type: Object,
+      default: () => ({
+        id: 'id',
+        label: 'label',
+        children: 'children'
+      })
+    },
+    vertical: Boolean
+  }
+}
+</script>
+
+<style lang="less">
+@import '../../styles/org-tree';
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})