虚拟维度组织架构图

package.json

@@ -12,8 +12,10 @@
     "axios": "^1.6.4",
     "dom-to-image": "^2.6.0",
     "element-plus": "^2.4.4",
+    "html2canvas": "^1.4.1",
     "html2pdf.js": "^0.10.1",
     "js-cookie": "^3.0.5",
+    "jspdf": "^2.5.1",
     "vue": "^3.3.11",
     "vue-router": "^4.2.5",
     "vue3-tree-org": "^4.2.2"

src/api/chart.js

@@ -13,4 +13,20 @@ export function selectPerson(params){
     })
 }
 
-//机能组织
+//机能组织(虚拟组织)
+export function selectOrganizationChart(params){
+    return request.get('/sship/organization/chart/organization-tree',{
+        params
+    })
+}
+
+//虚拟维度 人员信息
+export function selectVirtualPerson(params){
+    return request.get('/sship/organization/chart/virtual-person',{
+        params
+    })
+}
+
+export function selectVirtualTop(){
+    return request.get('/sship/organization/chart/virtual-top')
+}

src/axios.js

@@ -8,7 +8,7 @@ const TokenKey = 'ecology_JSessionid=aaaTjPF0rg2oWfJEKdiZy; JSESSIONID=aaaTjPF0r
 const service = axios.create({
   baseURL: '/api',
   // 超时
-  timeout: 10000
+  timeout: 100000
 })
 
 // request拦截器

src/components/ViewDialog.vue

@@ -24,7 +24,7 @@
   
   <script>
     import { ElDialog,ElButton,ElTable,ElMessage } from 'element-plus'
-    import {selectPerson} from '@/api/chart'
+    import {selectPerson,selectVirtualPerson} from '@/api/chart'
   
   export default {
     name: 'ViewDialog',
@@ -40,19 +40,27 @@
         params:{
             pid:'',
             id:''
-        }
+        },
+        virtual:1
       };
     },
     created() {
        
     },
     methods: {
-        openDialog(data){
+        openDialog(data,virtual){
             this.params.id = data.id;
+            this.virtual = virtual;
             this.tableList(); 
         },
         tableList() {
-            selectPerson(this.params).then(res=>{
+          this.virtual == 1 ? selectPerson(this.params).then(res=>{
+                this.tableData = res.data.data;
+                this.centerDialogVisible = true;
+                })
+            .catch(err=>{
+                ElMessage.error(err.msg);
+            }) : selectVirtualPerson(this.params).then(res=>{
                 this.tableData = res.data.data;
                 this.centerDialogVisible = true;
                 })
@@ -60,6 +68,7 @@
                 ElMessage.error(err.msg);
             })
         },
+
     }
   }
   </script>

src/views/organization-chart.vue

@@ -1,76 +1,78 @@
 <template>
   <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"
+              :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>
-    <div id="tree-container" style="height: 800px;">
+  <div id="tree-container" style="height: 600px;">
         <vue3-tree-org
           ref="treeChart"
           :data="treeData"
           center
           :props="{children: 'childrens'}"
+          :define-menus="defineMenus"
           :horizontal="horizontal"
           :collapsable="collapsable"
           :label-style="style"
           @on-expand="onExpand"
+          @on-node-click="onNodeClick"
         />
     </div>
-  </template>
-  <script>
 
+    <view-dialog ref="viewDialog"/>
+</template>
+<script>
 
-  import { ElSwitch, ElColorPicker, ElMessage } from 'element-plus'
-  import html2pdf from 'html2pdf.js'
-  import { ref } from 'vue'
-  import domToImage from 'dom-to-image';
 
+import { ElSwitch, ElButton, ElMessage,ElSelect } from 'element-plus'
+import html2pdf from 'html2pdf.js'
+import domToImage from 'dom-to-image';
+import {selectOrganizationChart,selectVirtualTop} from '@/api/chart'
+import ViewDialog from '@/components/ViewDialog.vue'
 
-  export default {
+export default {
   name: "organization-chart",
   components: {
     ElSwitch,
-      ElColorPicker
+    ViewDialog,
+    ElButton,
+    ElSelect
   },
   setup() {
 
   },
   data() {
     return {
-        treeData: {
+      treeData:{},
-            "id":1,"label":"xxx科技有限公司",
-            "childrens":[
-                {
-                    "id":2,"pid":1,"label":"产品研发部",
-                    "childrens":[
-                        {"id":6,"pid":2,"label":"禁止编辑节点"},
-                        {"id":8,"pid":2,"label":"禁止拖拽节点"},
-                        {"id":10,"pid":2,"label":"测试"}
-                    ]
-                },
-                {
-                    "id":3,"pid":1,"label":"客服部",
-                    "childrens":[
-                        {"id":11,"pid":3,"label":"客服一部"},
-                        {"id":12,"pid":3,"label":"客服二部"}
-                    ]
-                },
-                {"id":4,"pid":1,"label":"业务部"}
-            ]
-        },
       horizontal: false,
       collapsable: true,
       onlyOneNode: false,
       expandAll: true,
       disaled: false,
+      defineMenus:[],
+      params:{
+        virtualType:''
+      },
       style: {
         background: "#fff",
         color: "#5e6d82",
       },
+      options: []
     };
   },
-    created() {
+  async created() {
-       this.toggleExpand(this.treeData, this.expandAll);
+    await this.virtualTop();
+    this.organizationChart();
   },
   methods: {
     exportImage() {
@@ -88,22 +90,48 @@
         });
     },
     exportToPDF() {
-        debugger
       const element = document.getElementById('tree-container') // 获取 TreeOrg 组件的容器元素
       const options = {
         filename: 'tree-structure.pdf', // 导出的文件名，可以根据实际需求更改
-          jsPDF: { format: 'letter' }
+        jsPDF: { format: 'a4',orientation: 'landscape',unit: 'pt', }
       }
-
       html2pdf().set(options).from(element).save();
     },
+    virtualTop() {
+      return new Promise(resolve => {
+        selectVirtualTop(this.params).then(res=>{
+          this.options = res.data.data;
+          this.options.length > 0 ? this.params.virtualType = this.options[0].value : '';
+          resolve();
+        })
+        .catch(err=>{
+            ElMessage.error(err.msg);
+        })
+      });
+      
+    },
+    organizationChart() {
+      selectOrganizationChart(this.params).then(res=>{
+        this.treeData = res.data.data;
+        this.toggleExpand(res.data.data, this.expandAll);
+      })
+      .catch(err=>{
+        ElMessage.error(err.msg);
+      })
+    },
+    handleSelectChange(value) {
+      this.params.virtualType = value;
+      this.organizationChart();
+    },
     onExpand(e, data) {
-        console.log(e, data);
+      //console.log(e, data);
     },
     onExpandAll(b) {
-        console.log(b)
+      //console.log(b)
+    },
+    onNodeClick(e, data) {
+      this.$refs.viewDialog.openDialog(data,2);
     },
-
     expandChange() {
       // this.toggleExpand(this.data, this.expandAll);
     },
@@ -123,6 +151,5 @@
       }
     },
   },
-  };
+};
-  </script>
+</script>
-  

src/views/resource-chart.vue

@@ -84,7 +84,7 @@
         const element = document.getElementById('tree-container') // 获取 TreeOrg 组件的容器元素
         const options = {
           filename: 'tree-structure.pdf', // 导出的文件名，可以根据实际需求更改
-          jsPDF: { format: 'letter' }
+          jsPDF: { format: 'a4',orientation: 'landscape',unit: 'pt', }
         }
 
         html2pdf().set(options).from(element).save();
@@ -96,7 +96,7 @@
         console.log(b)
       },
       onNodeClick(e, data) {
-        this.$refs.viewDialog.openDialog(data);
+        this.$refs.viewDialog.openDialog(data,1);
       },
       expandChange() {
         // this.toggleExpand(this.data, this.expandAll);

yarn.lock

@@ -553,7 +553,7 @@ fsevents@~2.3.2, fsevents@~2.3.3:
   resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
-html2canvas@^1.0.0, html2canvas@^1.0.0-rc.5:
+html2canvas@^1.0.0, html2canvas@^1.0.0-rc.5, html2canvas@^1.4.1:
   version "1.4.1"
   resolved "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
   integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
@@ -575,7 +575,7 @@ js-cookie@^3.0.5:
   resolved "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
   integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
 
-jspdf@^2.3.1:
+jspdf@^2.3.1, jspdf@^2.5.1:
   version "2.5.1"
   resolved "https://registry.npmmirror.com/jspdf/-/jspdf-2.5.1.tgz#00c85250abf5447a05f3b32ab9935ab4a56592cc"
   integrity sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==