From bb521d9a7815288e0e667f9f1df62f93b02018dc Mon Sep 17 00:00:00 2001
From: Chengliang <1546584672@qq.com>
Date: Mon, 8 Jan 2024 18:04:33 +0800
Subject: [PATCH] =?UTF-8?q?=E8=99=9A=E6=8B=9F=E7=BB=B4=E5=BA=A6=E7=BB=84?=
 =?UTF-8?q?=E7=BB=87=E6=9E=B6=E6=9E=84=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |   2 +
 src/api/chart.js                 |  18 ++-
 src/axios.js                     |   2 +-
 src/components/ViewDialog.vue    |  17 +-
 src/views/organization-chart.vue | 257 +++++++++++++++++--------------
 src/views/resource-chart.vue     |   4 +-
 yarn.lock                        |   4 +-
 7 files changed, 179 insertions(+), 125 deletions(-)

diff --git a/package.json b/package.json
index e07bef9..c673826 100644
--- a/package.json
+++ b/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"
diff --git a/src/api/chart.js b/src/api/chart.js
index 8678ef9..23eac60 100644
--- a/src/api/chart.js
+++ b/src/api/chart.js
@@ -13,4 +13,20 @@ export function selectPerson(params){
     })
 }
 
-//机能组织
\ No newline at end of file
+//机能组织(虚拟组织)
+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')
+}
\ No newline at end of file
diff --git a/src/axios.js b/src/axios.js
index 76c89fd..eb33b3c 100644
--- a/src/axios.js
+++ b/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拦截器
diff --git a/src/components/ViewDialog.vue b/src/components/ViewDialog.vue
index 6576461..03918f7 100644
--- a/src/components/ViewDialog.vue
+++ b/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>
diff --git a/src/views/organization-chart.vue b/src/views/organization-chart.vue
index a973b42..57c36d9 100644
--- a/src/views/organization-chart.vue
+++ b/src/views/organization-chart.vue
@@ -1,128 +1,155 @@
 <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-button @click="exportToPDF" type="primary">导出PDF</el-button></div>
-        <div style="margin-right: 10px"><el-button @click="exportImage" type="primary">导出图片</el-button></div>
+  <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 id="tree-container" style="height: 800px;">
-          <vue3-tree-org
-            ref="treeChart"
-            :data="treeData"
-            center
-            :props="{children: 'childrens'}"
-            :horizontal="horizontal"
-            :collapsable="collapsable"
-            :label-style="style"
-            @on-expand="onExpand"
-          />
-        </div>
-  </template>
-  <script>
+      <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: 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>
 
+    <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 {
-    name: "organization-chart",
-    components: {
-      ElSwitch,
-      ElColorPicker
-    },
-    setup() {
+export default {
+  name: "organization-chart",
+  components: {
+    ElSwitch,
+    ViewDialog,
+    ElButton,
+    ElSelect
+  },
+  setup() {
 
+  },
+  data() {
+    return {
+      treeData:{},
+      horizontal: false,
+      collapsable: true,
+      onlyOneNode: false,
+      expandAll: true,
+      disaled: false,
+      defineMenus:[],
+      params:{
+        virtualType:''
+      },
+      style: {
+        background: "#fff",
+        color: "#5e6d82",
+      },
+      options: []
+    };
+  },
+  async created() {
+    await this.virtualTop();
+    this.organizationChart();
+  },
+  methods: {
+    exportImage() {
+      const treeOrgEl = this.$refs.treeChart.$el;
+      domToImage.toPng(treeOrgEl) // 转换为 PNG 格式
+        .then(function (dataURL) {
+          const link = document.createElement('a');
+          link.href = dataURL;
+          link.download = 'tree_image.png';
+          link.click();
+          link.remove();
+        })
+        .catch(function (error) {
+          console.error('导出图片出错:', error);
+        });
     },
-    data() {
-      return {
-        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,
-        style: {
-          background: "#fff",
-          color: "#5e6d82",
-        },
-      };
+    exportToPDF() {
+      const element = document.getElementById('tree-container') // 获取 TreeOrg 组件的容器元素
+      const options = {
+        filename: 'tree-structure.pdf', // 导出的文件名，可以根据实际需求更改
+        jsPDF: { format: 'a4',orientation: 'landscape',unit: 'pt', }
+      }
+      html2pdf().set(options).from(element).save();
     },
-    created() {
-       this.toggleExpand(this.treeData, this.expandAll);
+    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);
+        })
+      });
+      
     },
-    methods: {
-      exportImage() {
-        const treeOrgEl = this.$refs.treeChart.$el;
-        domToImage.toPng(treeOrgEl) // 转换为 PNG 格式
-          .then(function (dataURL) {
-            const link = document.createElement('a');
-            link.href = dataURL;
-            link.download = 'tree_image.png';
-            link.click();
-            link.remove();
-          })
-          .catch(function (error) {
-            console.error('导出图片出错:', error);
-          });
-      },
-      exportToPDF() {
-        debugger
-        const element = document.getElementById('tree-container') // 获取 TreeOrg 组件的容器元素
-        const options = {
-          filename: 'tree-structure.pdf', // 导出的文件名，可以根据实际需求更改
-          jsPDF: { format: 'letter' }
-        }
-
-        html2pdf().set(options).from(element).save();
-      },
-      onExpand(e, data) {
-        console.log(e, data);
-      },
-      onExpandAll(b) {
-        console.log(b)
-      },
-
-      expandChange() {
-        // this.toggleExpand(this.data, this.expandAll);
-      },
-      toggleExpand(data, val) {
-        if (Array.isArray(data)) {
-          data.forEach((item) => {
-            item.expand = val
-            if (item.childrens) {
-              this.toggleExpand(item.childrens, val);
-            }
-          });
-        } else {
-          data.expand = val
-          if (data.childrens) {
-            this.toggleExpand(data.childrens, val);
+    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);
+    },
+    onExpandAll(b) {
+      //console.log(b)
+    },
+    onNodeClick(e, data) {
+      this.$refs.viewDialog.openDialog(data,2);
+    },
+    expandChange() {
+      // this.toggleExpand(this.data, this.expandAll);
+    },
+    toggleExpand(data, val) {
+      if (Array.isArray(data)) {
+        data.forEach((item) => {
+          item.expand = val
+          if (item.childrens) {
+            this.toggleExpand(item.childrens, val);
           }
+        });
+      } else {
+        data.expand = val
+        if (data.childrens) {
+          this.toggleExpand(data.childrens, val);
         }
-      },
+      }
     },
-  };
-  </script>
-  
\ No newline at end of file
+  },
+};
+</script>
diff --git a/src/views/resource-chart.vue b/src/views/resource-chart.vue
index e95fe02..57103c4 100644
--- a/src/views/resource-chart.vue
+++ b/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);
diff --git a/yarn.lock b/yarn.lock
index ff3b8f2..024d538 100644
--- a/yarn.lock
+++ b/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==