接口对接

src/api/chart.js

@@ -27,6 +27,21 @@ export function selectVirtualPerson(params){
     })
 }
 
+//维度
 export function selectVirtualTop(){
     return request.get('/sship/organization/chart/virtual-top')
+}
+
+//根节点
+export function selectRootTop(params){
+    return request.get('/sship/organization/chart/virtual-top-two',{
+        params
+    })
+}
+
+//层级
+export function selectLevelTop(params){
+    return request.get('/sship/organization/chart/virtual-top-three',{
+        params
+    })
 }

src/axios.js

@@ -2,7 +2,7 @@ import axios from 'axios'
 import Cookies from 'js-cookie'
 import { tansParams } from "@/utils/custom"
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
-const TokenKey = 'ecology_JSessionid=aaaTjPF0rg2oWfJEKdiZy; JSESSIONID=aaaTjPF0rg2oWfJEKdiZy; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin;'
+//const TokenKey = 'ecology_JSessionid=aaa8knWaB557Ld1qX352y; JSESSIONID=aaa8knWaB557Ld1qX352y; Systemlanguid=7; languageidweaver=7; loginidweaver=sysadmin; loginuuids=1;'
 
 // 创建axios实例
 const service = axios.create({

src/style.css

@@ -78,3 +78,4 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+

src/views/organization-chart.vue

@@ -2,6 +2,7 @@
   <div style="display: flex; padding: 10px;">
       <div style="margin-right: 10px"><el-switch v-model="horizontal"></el-switch> 横向</div>
       <div style="margin-right: 10px">
+        维度:
         <el-select v-model="params.virtualType" class="m-2" placeholder="Select"  @change="handleSelectChange">
             <el-option
               v-for="item in options"
@@ -11,6 +12,28 @@
             />
         </el-select>
       </div>
+      <div style="margin-right: 10px">
+        根节点:
+        <el-tree-select
+          v-model="params.root"
+          :data="rootData"
+          check-strictly
+          :render-after-expand="false"
+          style="width: 240px"
+          @change="handleRootChange"
+        />
+      </div>
+      <div style="margin-right: 10px">
+        层级: 
+        <el-select v-model="params.level" class="m-2" placeholder="Select"  @change="handleLevelChange">
+            <el-option
+              v-for="item in levelOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+        </el-select>
+      </div>
       <div style="margin-right: 10px"><el-button @click="exportToPDF" type="primary">导出PDF</el-button></div>
       <div style="margin-right: 10px"><el-button @click="exportImage" type="primary">导出图片</el-button></div>
     </div>
@@ -22,6 +45,8 @@
           :props="{children: 'childrens'}"
           :define-menus="defineMenus"
           :horizontal="horizontal"
+          :clone-node-drag="cloneNodeDrag"
+          :node-draggable="nodeDraggable"
           :collapsable="collapsable"
           :label-style="style"
           @on-expand="onExpand"
@@ -34,11 +59,12 @@
 <script>
 
 
-import { ElSwitch, ElButton, ElMessage,ElSelect } from 'element-plus'
+import { ElSwitch, ElButton, ElMessage,ElSelect,ElTreeSelect } from 'element-plus'
 import html2pdf from 'html2pdf.js'
 import domToImage from 'dom-to-image';
-import {selectOrganizationChart,selectVirtualTop} from '@/api/chart'
+import {selectOrganizationChart,selectVirtualTop,selectRootTop,selectLevelTop} from '@/api/chart'
 import ViewDialog from '@/components/ViewDialog.vue'
+import { ref } from 'vue'
 
 export default {
   name: "organization-chart",
@@ -46,10 +72,15 @@ export default {
     ElSwitch,
     ViewDialog,
     ElButton,
-    ElSelect
+    ElSelect,
+    ElTreeSelect
   },
   setup() {
-
+    const cloneNodeDrag = ref(true);
+   
+    return {
+      cloneNodeDrag
+    }
   },
   data() {
     return {
@@ -57,22 +88,29 @@ export default {
       horizontal: false,
       collapsable: true,
       onlyOneNode: false,
+      nodeDraggable:false,
       expandAll: true,
       disaled: false,
       defineMenus:[],
       params:{
-        virtualType:''
+        virtualType:'',
+        level:'',
+        root:''
       },
       style: {
         background: "#fff",
         color: "#5e6d82",
+        fontWeight: "500"
       },
-      options: []
+      options: [],
+      levelOptions:[],
+      rootData: []
     };
   },
   async created() {
     await this.virtualTop();
     this.organizationChart();
+    this.handleRootTop(this.params.virtualType);
   },
   methods: {
     exportImage() {
@@ -108,7 +146,6 @@ export default {
             ElMessage.error(err.msg);
         })
       });
-      
     },
     organizationChart() {
       selectOrganizationChart(this.params).then(res=>{
@@ -119,8 +156,44 @@ export default {
         ElMessage.error(err.msg);
       })
     },
+    handleRootTop(value) {
+      const params = {
+        "virtualType":value
+      }
+      selectRootTop(params).then(res=>{
+        this.rootData = res.data.data;
+      })
+      .catch(err=>{
+        ElMessage.error(err.msg);
+      });
+    },
+    handleLevelTop(value) {
+      const params = {
+        "virtualType":this.params.virtualType,
+        "id":value 
+      }
+      selectLevelTop(params).then(res=>{
+        this.levelOptions = res.data.data;
+      })
+      .catch(err=>{
+        ElMessage.error(err.msg);
+      });
+    },
     handleSelectChange(value) {
       this.params.virtualType = value;
+      this.params.root = '';
+      this.params.level = '';
+      this.handleRootTop(value);
+      this.organizationChart();
+    },
+    handleLevelChange(value) {
+      this.params.level = value;
+      this.organizationChart();
+    },
+    handleRootChange(value) {
+      this.params.root = value;
+      this.params.level = '';
+      this.handleLevelTop(value);
       this.organizationChart();
     },
     onExpand(e, data) {

src/views/resource-chart.vue

@@ -13,6 +13,8 @@
             :define-menus="defineMenus"
             :horizontal="horizontal"
             :collapsable="collapsable"
+            :clone-node-drag="cloneNodeDrag"
+            :node-draggable="nodeDraggable"
             :label-style="style"
             @on-expand="onExpand"
             @on-node-click="onNodeClick"
@@ -39,7 +41,10 @@
       ElButton
     },
     setup() {
-
+      const cloneNodeDrag = ref(true)
+      return {
+        cloneNodeDrag
+      }
     },
     data() {
       return {
@@ -47,12 +52,14 @@
         horizontal: false,
         collapsable: true,
         onlyOneNode: false,
+        nodeDraggable:false,
         expandAll: true,
         disaled: false,
         defineMenus:[],
         style: {
           background: "#fff",
           color: "#5e6d82",
+          fontWeight: "500"
         },
       };
     },

vite.config.js

@@ -4,6 +4,7 @@ import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: './', //设置打包相对路径
   plugins: [vue()],
   resolve: {
     alias: {