新增组织结构树页面

Author: lison16

.eslintrc.js

@@ -9,7 +9,9 @@ module.exports = {
     'generator-star-spacing': 'off',
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
+    'vue/no-parsing-error': [2, {
+      'x-invalid-end-tag': false
+    }],
     'no-undef': 'off',
     'camelcase': 'off'
   },

package-lock.json

@@ -25,6 +25,7 @@
     "simplemde": "^1.11.2",
     "sortablejs": "^1.7.0",
     "tree-table-vue": "^1.1.0",
+    "v-org-tree": "^1.0.6",
     "vue": "^2.5.10",
     "vue-i18n": "^7.8.0",
     "vue-router": "^3.0.1",

package.json

@@ -35,3 +35,10 @@ export const uploadImg = formData => {
     data: formData
   })
 }
+
+export const getOrgData = () => {
+  return axios.request({
+    url: 'get_org_data',
+    method: 'get'
+  })
+}

src/api/data.js

@@ -38,5 +38,6 @@ export default {
   params: 'Params',
   cropper_page: 'Cropper',
   message_page: 'Message Center',
-  tree_table_page: 'Tree Table'
+  tree_table_page: 'Tree Table',
+  org_tree_page: 'Org Tree'
 }

src/locale/lang/en-US.js

@@ -38,5 +38,6 @@ export default {
   params: '动态路由',
   cropper_page: '图片裁剪',
   message_page: '消息中心',
-  tree_table_page: '树状表格'
+  tree_table_page: '树状表格',
+  org_tree_page: '组织结构树'
 }

src/locale/lang/zh-CN.js

@@ -38,5 +38,6 @@ export default {
   params: '動態路由',
   cropper_page: '圖片裁剪',
   message_page: '消息中心',
-  tree_table_page: '樹狀表格'
+  tree_table_page: '樹狀表格',
+  org_tree_page: '組織結構樹'
 }

src/locale/lang/zh-TW.js

@@ -8,10 +8,13 @@ import iView from 'iview'
 import i18n from '@/locale'
 import config from '@/config'
 import importDirective from '@/directive'
+import { directive as clickOutside } from 'v-click-outside-x'
 import installPlugin from '@/plugin'
 import './index.less'
 import '@/assets/icons/iconfont.css'
 import TreeTable from 'tree-table-vue'
+import VOrgTree from 'v-org-tree'
+import 'v-org-tree/dist/v-org-tree.css'
 // 实际打包时应该不引入mock
 /* eslint-disable */
 if (process.env.NODE_ENV !== 'production') require('@/mock')
@@ -20,6 +23,7 @@ Vue.use(iView, {
   i18n: (key, value) => i18n.t(key, value)
 })
 Vue.use(TreeTable)
+Vue.use(VOrgTree)
 /**
  * @description 注册admin内置插件
  */
@@ -36,6 +40,7 @@ Vue.prototype.$config = config
  * 注册指令
  */
 importDirective(Vue)
+Vue.directive('clickOutside', clickOutside)
 
 /* eslint-disable no-new */
 new Vue({

src/main.js

@@ -1,5 +1,6 @@
 import Mock from 'mockjs'
 import { doCustomTimes } from '@/libs/util'
+import orgData from './data/org-data'
 const Random = Mock.Random
 
 export const getTableData = req => {
@@ -28,3 +29,7 @@ export const getDragList = req => {
 export const uploadImage = req => {
   return Promise.resolve()
 }
+
+export const getOrgData = req => {
+  return orgData
+}

src/mock/data.js

@@ -0,0 +1,45 @@
+export default {
+  id: 0,
+  label: 'XXX科技有限公司',
+  children: [
+    {
+      id: 2,
+      label: '产品研发部',
+      children: [
+        {
+          id: 5,
+          label: '研发-前端'
+        }, {
+          id: 6,
+          label: '研发-后端'
+        }, {
+          id: 9,
+          label: 'UI设计'
+        }, {
+          id: 10,
+          label: '产品经理'
+        }
+      ]
+    },
+    {
+      id: 3,
+      label: '销售部',
+      children: [
+        {
+          id: 7,
+          label: '销售一部'
+        }, {
+          id: 8,
+          label: '销售二部'
+        }
+      ]
+    },
+    {
+      id: 4,
+      label: '财务部'
+    }, {
+      id: 11,
+      label: 'HR人事'
+    }
+  ]
+}