组织机构

src/api/system.js

@@ -189,9 +189,9 @@ export function downloadOrganization (params) {
   return http.download('/organization/download/template', params)
 }
 
-// 组织结构 下载模板
+// 组织结构 删除机构
 export function deleteOrganization (params) {
-  return http.download('/organization/del', params)
+  return http.post('/organization/del', params)
 }
 
 // 组织结构 保存标签

src/store/modules/system.js

@@ -41,6 +41,7 @@ const actions = {
 
     function removeEmptyArray (arr) {
       return arr.map(e => {
+        e.organizationCategory = e.organization.organizationCategory
         if (e.child && e.child.length) {
           e.child = removeEmptyArray(e.child)
         } else {

src/utils/antvG6.js

@@ -67,7 +67,6 @@ export class MindMapNode extends Circle {
   status = true
 
   drawCollapseShape (attributes, container) {
-    // const iconStyle = this.getCollapseStyle(attributes)
     const nodes = this.context.graph.getNodeData(this.id)
     if (!nodes.children && !nodes.hasChildren) {
       return
@@ -108,32 +107,6 @@ export class MindMapNode extends Circle {
     })
   }
 
-  // 绘制标签形状
-  // drawTapShape (attributes, container) {
-  //   const nodes = this.context.graph.getNodeData(this.id)
-  //   if (nodes.depth > 2) {
-  //     return
-  //   }
-  //   const btn = this.upsert('status', Badge, {
-  //     text: '[ 点击编辑 ]',
-  //     fontSize: 14,
-  //     textAlign: 'left',
-  //     transform: [['translate', 50, 30]],
-  //     padding: [10],
-  //     fill: '#ff650e',
-  //     cursor: 'pointer',
-  //     zIndex: 5
-  //   }, container)
-
-  //   this.forwardEvent(btn, CommonEvent.CLICK, async (event) => {
-  //     event.stopPropagation()
-  //     if (event.button !== 0) {
-  //       return
-  //     }
-  //     nodes.editTag && nodes.editTag(nodes)
-  //   })
-  // }
-
   async addChildrenData (parent) {
     this.status = false
     const { graph } = this.context
@@ -160,11 +133,8 @@ export class MindMapNode extends Circle {
     }
   }
 
-  render (attributes = this.parsedAttributes, container = this) {
+  render (attributes = { collapsed: true }, container = this) {
     super.render(attributes, container)
-
     this.drawCollapseShape(attributes, container)
-    // this.drawTapShape(attributes, container)
-    // this.drawLabelShape(attributes, container)
   }
 }

src/views/humanResources/organizationStructure/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="fullBox white pa-3 relative" ref="boxRef">
     <div ref="graphRef" v-loading="loading" class="fullBox"></div>
-    <div class="btnBox">
+    <div class="btnBox pa-1">
       <el-upload class="el-button pa-0" action="#" :show-file-list="false" :http-request="onImport">
         <m-button type="orange" icon="el-icon-upload2" size="small" :loading="importLoading">导入</m-button>
       </el-upload>
@@ -21,8 +21,8 @@
         </div>
       </el-card>
     </div>
-    <OrganizationEdit ref="organizationEditRefs" @success="onRefresh"></OrganizationEdit>
-    <OrganizationAdd ref="organizationAddRefs" @success="onRefresh"></OrganizationAdd>
+    <OrganizationEdit ref="organizationEditRefs" @refresh="onRefresh"></OrganizationEdit>
+    <OrganizationAdd ref="organizationAddRefs" @refresh="onRefresh"></OrganizationAdd>
   </div>
 </template>
 
@@ -100,11 +100,12 @@ export default {
   computed: {
     ...mapGetters(['organizationTree'])
   },
-  mounted () {
+  async mounted () {
     register(ExtensionCategory.BEHAVIOR, 'collapse-expand-tree', CollapseExpandTree)
     register(ExtensionCategory.NODE, 'MindMapNode', MindMapNode)
-    this.onInit()
+    const graphData = await this.onInit()
     this.$nextTick(() => {
+      this.initGraph(graphData)
       document.addEventListener('click', this.onClick)
       this.$refs.boxRef.addEventListener('contextmenu', (e) => {
         e.preventDefault()
@@ -124,51 +125,47 @@ export default {
     onClick () {
       this.$refs.contextMenuRefs.style.display = 'none'
     },
-    async getChildren (organizationNo) {
+    async initData () {
+      await this.$store.dispatch('system/getOrganizationTree')
+      const data = await this.onInit()
+      return data
+    },
+    async onRefresh () {
+      const data = await this.initData()
+      this.renderGraph(data)
+    },
+    drawGraph (data) {
+      this.graph.setData(data)
+      this.graph.draw()
+    },
+    async renderGraph (data) {
+      this.graph.setData(data)
+      this.graph.render()
+    },
+    async onInit () {
+      this.loading = true
       try {
-        const { data } = await getOrganizationAtlasEmployee({ organizationNo })
-        return {
-          nodes: data.nodes.map(e => {
-            const { labelOffsetX, ...obj } = NODE_TYPE
+        const { data } = await getOrganizationAtlas()
+        const { nodes, edges } = data
+        const graphData = {
+          nodes: nodes.map(e => {
             return {
-              id: e.id,
-              name: e.text,
-              hasChildren: false,
-              depth: 3,
-              ...obj
+              ...e,
+              getChildren: this.getChildren
             }
           }),
-          edges: data.lines.map(e => {
-            return {
-              source: e.from,
-              target: e.to
-            }
-          })
+          edges
         }
+        return graphData
       } catch (error) {
         this.$message.error(error)
+        return { nodes: [], edges: [] }
+      } finally {
+        this.loading = false
       }
     },
-    assignTree (tree) {
-      return tree.map(e => {
-        const { child, organizationNo, organizationName, ...rest } = e
-        if (e.child && e.child.length) {
-          rest.children = this.assignTree(e.child)
-        }
-        return {
-          id: organizationNo,
-          name: organizationName,
-          getChildren: this.getChildren,
-          ...rest
-        }
-      })
-    },
-    async renderGraph (data) {
-      if (this.graph) {
-        this.graph.updateData(data)
-        return
-      }
-      const graph = new Graph({
+    async initGraph (data) {
+      this.graph = new Graph({
         container: this.$refs.graphRef,
         width: this.$refs.graphRef.clientWidth,
         height: this.$refs.graphRef.clientHeight,
@@ -189,20 +186,20 @@ export default {
               { id: 'auto-fit', value: 'auto-fit' }
             ],
             onClick: (value) => {
-              const zoom = graph.getZoom()
+              const zoom = this.graph.getZoom()
               // 处理按钮点击事件
               if (value === 'zoom-in') {
                 if (zoom > 2) {
                   return
                 }
-                graph.zoomTo(zoom + 0.1)
+                this.graph.zoomTo(zoom + 0.1)
               } else if (value === 'zoom-out') {
                 if (zoom < 0.5) {
                   return
                 }
-                graph.zoomTo(zoom - 0.1)
+                this.graph.zoomTo(zoom - 0.1)
               } else if (value === 'auto-fit') {
-                graph.fitView()
+                this.graph.fitView()
               }
             }
           }
@@ -226,8 +223,9 @@ export default {
             return 8
           },
           getHGap: function getHGap (e) {
-            const { depth } = graph.getNodeData(e.id)
-            return depth < 2 ? 100 : 140
+            // const { depth } = this.graph.getNodeData(e.id)
+            // return depth < 2 ? 100 : 140
+            return 100
           },
           radial: false
         },
@@ -243,9 +241,17 @@ export default {
           }
         }
       })
-      // graph.zoomTo(0.7)
-      graph.render()
-      this.graph = graph
+      await this.graph.render()
+      this.onGraphHandles(this.graph)
+      data.nodes.forEach(e => {
+        if (e.depth === 1) {
+          this.graph.collapseElement(e.id)
+        }
+      })
+      // 关闭之后重新排版计算
+      this.graph.render()
+    },
+    onGraphHandles (graph) {
       const contextMenu = this.$refs.contextMenuRefs
       const { width, height } = this.$refs.boxRef.getBoundingClientRect()
       const { left, top } = this.$refs.boxRef.getBoundingClientRect()
@@ -271,52 +277,6 @@ export default {
         contextMenu.style.display = 'none'
       })
     },
-    async editTag (nodes) {
-      this.loading = true
-      await this.$refs.organizationEditRefs.open(nodes)
-      this.loading = false
-    },
-    async onInit () {
-      this.loading = true
-      try {
-        const { data } = await getOrganizationAtlas()
-        const { nodes, edges } = data
-        this.renderGraph({
-          nodes: nodes.map(e => {
-            return {
-              ...e,
-              getChildren: this.getChildren
-            }
-          }),
-          edges
-        })
-      } catch (error) {
-        this.$message.error(error)
-      } finally {
-        this.loading = false
-      }
-    },
-    onRefresh () {
-      this.graph.render()
-    },
-    async onImport (response) {
-      this.importLoading = true
-      await upload(importOrganization, response.file, this.onInit)
-      this.importLoading = false
-    },
-    async onExport () {
-      this.exportLoading = true
-      await download(exportOrganization)
-      this.exportLoading = false
-    },
-    async onDownload () {
-      this.downloadLoading = true
-      await download(downloadOrganization)
-      this.downloadLoading = false
-    },
-    onAdd () {
-      this.$refs.organizationAddRefs.open()
-    },
     async onDelete (nodes) {
       this.$confirm('是否删除该项', '提示', {
         confirmButtonText: '确定',
@@ -329,11 +289,38 @@ export default {
             organizationNo: nodes.id
           })
           this.$message.success('删除成功')
+          const data = await this.initData()
+          this.drawGraph(data)
         } catch (error) {
           this.$message.error(error)
         }
       }).catch(_ => {})
     },
+    async getChildren (organizationNo) {
+      try {
+        const { data } = await getOrganizationAtlasEmployee({ organizationNo })
+        return {
+          nodes: data.nodes.map(e => {
+            const { labelOffsetX, ...obj } = NODE_TYPE
+            return {
+              id: e.id,
+              name: e.text,
+              hasChildren: false,
+              depth: 3,
+              ...obj
+            }
+          }),
+          edges: data.lines.map(e => {
+            return {
+              source: e.from,
+              target: e.to
+            }
+          })
+        }
+      } catch (error) {
+        this.$message.error(error)
+      }
+    },
     onMenuClick (prop) {
       if (prop === 'edit') {
         this.editTag(this.nodes)
@@ -341,6 +328,29 @@ export default {
       if (prop === 'delete') {
         this.onDelete(this.nodes)
       }
+    },
+    async onImport (response) {
+      this.importLoading = true
+      await upload(importOrganization, response.file, this.onInit)
+      this.importLoading = false
+    },
+    async editTag (nodes) {
+      this.loading = true
+      await this.$refs.organizationEditRefs.open(nodes)
+      this.loading = false
+    },
+    onAdd () {
+      this.$refs.organizationAddRefs.open()
+    },
+    async onExport () {
+      this.exportLoading = true
+      await download(exportOrganization)
+      this.exportLoading = false
+    },
+    async onDownload () {
+      this.downloadLoading = true
+      await download(downloadOrganization)
+      this.downloadLoading = false
     }
   }
 }

src/views/humanResources/organizationStructure/organizationEdit.vue

@@ -11,7 +11,7 @@
         :key="tab.name"
         :label="tab.label"
         :name="tab.name">
-        <component :is="tab.path" :item="item" :key="key"></component>
+        <component :is="tab.path" :item="item" :key="key" @success="onSuccess"></component>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -20,7 +20,6 @@
 
 <script>
 import {
-  saveLabel,
   getOrganizationDetails
 } from '@/api/system'
 import organizationEditInfo from './organizationEditInfo.vue'
@@ -60,17 +59,8 @@ export default {
         this.$message.error(error)
       }
     },
-    async onSure () {
-      try {
-        await saveLabel({
-          labelEntityId: this.item.id,
-          labelType: 0,
-          labelTitle: this.formValues.tags.map(e => e.value)
-        })
-        this.$emit('success')
-      } catch (error) {
-        this.$message.error(error)
-      }
+    onSuccess () {
+      this.$emit('refresh')
     }
   }
 }

src/views/humanResources/organizationStructure/organizationEditInfo.vue

@@ -128,9 +128,8 @@ export default {
             parentOrganizationName,
             parentOrganizationCategory
           })
-          this.$message.success('新增成功')
-          this.$refs.dialog.close()
-          this.$emit('refresh')
+          this.$message.success('保存成功')
+          this.$emit('success')
         } catch (error) {
           this.$message.error(error)
         }

src/views/system/workFlow/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WorkFlow'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>