新增页面

package.json

@@ -19,6 +19,7 @@
     "js-md5": "^0.7.3",
     "lockr": "^0.8.5",
     "quasar": "^1.0.0",
+    "relation-graph": "^1.0.8",
     "vue-easytable": "^1.7.2",
     "vue-i18n": "^8.0.0",
     "xlsx": "^0.16.8",

src/api/system/dept.js

@@ -33,6 +33,17 @@ export function getDeptTree(data) {
   });
 }
 
+/**
+ * 获取组织机构图
+ */
+export function getOrganizationChart(data) {
+  return request({
+    url: '/User/GetOrganizationChart',
+    method: 'post',
+    data
+  });
+}
+
 /**
  * 新增修改部门信息
  */
@@ -47,8 +58,7 @@ export function saveDeptInfo(data) {
 /**
  * 获取部门信息
  */
-export function getDeptInfo(data)
-{
+export function getDeptInfo(data) {
   return request({
     url: '/User/GetDept',
     method: 'post',
@@ -59,8 +69,7 @@ export function getDeptInfo(data)
 /**
  * 设置部门状态
  */
-export function setDeptStatusInfo(data)
-{
+export function setDeptStatusInfo(data) {
   return request({
     url: '/User/RemoveDept',
     method: 'post',

src/pages/school/sysuser.vue

@@ -317,7 +317,6 @@
         queryManagerPage(this.msg).then(res => {
           this.loading = false;
           this.data = res.Data.PageData;
-          console.log("data", this.data);
           this.pageCount = res.Data.PageCount;
         }).catch(() => {
           this.loading = false

src/pages/system/dept.vue

@@ -13,6 +13,7 @@
       </div>
       <div class="page-option">
         <q-btn color="accent" class="q-mr-md" icon="add" label="新增部门" @click="EditDept(null)" />
+        <q-btn color="accent" class="q-mr-md" icon="add" label="组织机构图" @click="gotoRelation()" />
       </div>
     </div>
     <div class="page-content">
@@ -139,6 +140,12 @@
       this.queryDeptPage();
     },
     methods: {
+      gotoRelation() {
+        var tempStr = '/system/deptrelation';
+        this.$router.push({
+          path: tempStr
+        });
+      },
       //重新查询
       resetSearch() {
         this.msg.pageIndex = 1;

src/pages/system/deptrelation.vue

+<template>
+  <div>
+    <div style="height:calc(100vh - 50px);">
+      <RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick"
+        :on-line-click="onLineClick" />
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    getOrganizationChart,
+  } from '../../api/system/dept'
+  import RelationGraph from 'relation-graph'
+  export default {
+    name: 'Demo',
+    components: {
+      RelationGraph
+    },
+    data() {
+      return {
+        graphOptions: {
+          'backgrounImageNoRepeat': true,
+          'layouts': [{
+            'label': '中心',
+            'layoutName': 'tree',
+            'layoutClassName': 'seeks-layout-center',
+            'defaultJunctionPoint': 'border',
+            'defaultNodeShape': 0,
+            'defaultLineShape': 1,
+            'min_per_width': 50,
+            'max_per_width': 70,
+            'min_per_height': 200
+          }],
+          'defaultLineMarker': {
+            'markerWidth': 12,
+            'markerHeight': 12,
+            'refX': 6,
+            'refY': 6,
+            'data': 'M2,2 L10,6 L2,10 L6,6 L2,2'
+          },
+          'defaultNodeShape': 1,
+          'defaultNodeWidth': '30',
+          'defaultLineShape': 2,
+          'defaultJunctionPoint': 'tb',
+          'defaultNodeBorderWidth': 0,
+          'defaultLineColor': 'rgba(0, 186, 189, 1)',
+          'defaultNodeColor': 'rgba(0, 206, 209, 1)',
+          'defaultNodeHeight': '100'
+        }
+      }
+    },
+    mounted() {
+      this.queryDeptTree();
+    },
+    methods: {
+      //获取部门结构树
+      queryDeptTree() {
+        getOrganizationChart({}).then(res => {
+          if (res.Code == 1) {
+            this.DeptList = res.Data;
+            this.$refs.seeksRelationGraph.setJsonData(this.DeptList, (seeksRGGraph) => {
+            })
+          }
+        })
+      },
+      onNodeClick(nodeObject, $event) {
+
+      },
+      onLineClick(lineObject, $event) {
+
+      }
+    }
+  }
+</script>
\ No newline at end of file

src/router/routes.js

@@ -57,6 +57,11 @@ const routes = [{
         component: () =>
           import("pages/system/dept.vue")
       },
+      {
+        path: "/system/deptrelation", //部门关系图
+        component: () =>
+          import("pages/system/deptrelation.vue")
+      },
       {
         path: "/system/post", //岗位管理
         component: () =>