标注

src/api/system.js

@@ -167,3 +167,7 @@ export function getOrganizationAtlas () {
 export function getOrganizationAtlasEmployee (params) {
   return http.post('/organization/employee/atlas', params)
 }
+// 组织结构 保存标签
+export function saveLabel (params) {
+  return http.post('/label/save', params)
+}

src/components/AutoComponents/MForm/index.vue

@@ -1,4 +1,4 @@
-<template>
+s<template>
   <el-form
     :label-position="labelPosition ?? 'right'"
     :label-width="labelWidth ?? '120px'"
@@ -94,6 +94,9 @@
         <template v-if="item.type === 'datePicker'">
           <el-date-picker v-bind="item.options" v-on="item.handles" v-model="query[item.prop]"></el-date-picker>
         </template>
+        <template v-if="item.slotAfter">
+          <slot :name="`${item.prop}.after`"></slot>
+        </template>
       </el-form-item>
     </template>
     <slot></slot>

src/utils/antvG6.js

@@ -49,7 +49,7 @@ export class CollapseExpandTree extends BaseBehavior {
 
 export class MindMapNode extends Circle {
   static defaultStyleProps = {
-    showIcon: true
+    showBtn: true
   };
 
   constructor (options) {
@@ -107,6 +107,25 @@ export class MindMapNode extends Circle {
     })
   }
 
+  // 绘制标签形状
+  drawTapShape (attributes, container) {
+    const nodes = this.context.graph.getNodeData(this.id)
+    const btn = this.upsert('status', Badge, {
+      text: `${nodes.tag} [标注]`,
+      fontSize: 14,
+      textAlign: 'left',
+      transform: [['translate', 90, 30]],
+      padding: [10],
+      fill: '#409EFF',
+      zIndex: 5
+    }, container)
+
+    this.forwardEvent(btn, CommonEvent.CLICK, async (event) => {
+      event.stopPropagation()
+      nodes.editTag && nodes.editTag(nodes)
+    })
+  }
+
   async addChildrenData (parent) {
     this.status = false
     const { graph } = this.context
@@ -137,5 +156,6 @@ export class MindMapNode extends Circle {
     super.render(attributes, container)
 
     this.drawCollapseShape(attributes, container)
+    this.drawTapShape(attributes, container)
   }
 }

src/views/humanResources/organizationStructure/index.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="fullBox white pa-3">
     <div ref="graphRef" v-loading="loading" class="fullBox"></div>
-    <!-- <RelationGraph ref="graphRef" :options="graphOptions" :on-node-expand="onNodeExpand" :on-node-collapse="onNodeCollapse" v-loading="loading"></RelationGraph> -->
+    <OrganizationEdit ref="organizationEditRefs" @success="onRefresh"></OrganizationEdit>
   </div>
 </template>
 
 <script>
-// import RelationGraph from 'relation-graph'
-
+import OrganizationEdit from './organizationEdit.vue'
 import {
   CollapseExpandTree,
   MindMapNode
@@ -31,7 +30,7 @@ const NODE_TYPE = {
       labelFontSize: 24,
       labelLineHeight: 48,
       labelPlacement: 'right',
-      labelPadding: [0, 20],
+      labelPadding: [0, 20, 36, 20],
       labelText: d.name,
       labelOffsetX: d.depth === 3 ? 40 : 80,
       labelBackground: true,
@@ -39,18 +38,19 @@ const NODE_TYPE = {
       labelBackgroundRadius: 8,
       port: true,
       ports: [{ placement: 'right' }, { placement: 'left' }]
-      // badges: [
-      //   { text: d.tag || '', placement: 'right-bottom', fontSize: 16 }
-      // ]
     }
   }
 }
 
 export default {
   name: 'organization-structure',
+  components: {
+    OrganizationEdit
+  },
   data () {
     return {
-      loading: false
+      loading: false,
+      graph: null
     }
   },
   computed: {
@@ -113,7 +113,7 @@ export default {
         enable: false,
         plugins: [
           'minimap',
-          'contextmenu',
+          // 'contextmenu',
           {
             className: 'toolbar',
             position: 'right-top',
@@ -128,7 +128,6 @@ export default {
             ],
             onClick: (value) => {
               const zoom = graph.getZoom()
-              console.log(zoom)
               // 处理按钮点击事件
               if (value === 'zoom-in') {
                 if (zoom > 2) {
@@ -164,7 +163,7 @@ export default {
             return 32
           },
           getVGap: function getVGap () {
-            return 10
+            return 30
           },
           getHGap: function getHGap () {
             return 200
@@ -192,9 +191,11 @@ export default {
           }
         }
       })
-
-      console.log(graph)
       graph.render()
+      this.graph = graph
+    },
+    editTag (nodes) {
+      this.$refs.organizationEditRefs.open(nodes)
     },
     async onInit () {
       try {
@@ -204,7 +205,8 @@ export default {
           nodes: nodes.map(e => {
             return {
               ...e,
-              getChildren: this.getChildren
+              getChildren: this.getChildren,
+              editTag: this.editTag
             }
           }),
           edges
@@ -212,6 +214,9 @@ export default {
       } catch (error) {
         this.$message.error(error)
       }
+    },
+    onRefresh () {
+      this.graph.render()
     }
   }
 }

src/views/humanResources/organizationStructure/organizationEdit.vue

@@ -0,0 +1,73 @@
+<template>
+  <m-dialog ref="dialog" :title="`${item.name} 标注编辑`" v-bind="$attrs" v-on="$listeners" @sure="onSure">
+    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+      <el-form-item
+        v-for="(tag, index) in formValues.tags"
+        :label="'标注' + index"
+        :key="tag.key"
+        :prop="'tags.' + index + '.value'"
+      >
+        <div class="d-flex">
+          <el-input v-model="tag.value" placeholder="请输入标注"></el-input>
+          <el-button class="ml-3" @click.prevent="onRemove(index)">删除</el-button>
+        </div>
+
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onAdd">新增标注</el-button>
+      </el-form-item>
+    </el-form>
+  </m-dialog>
+</template>
+
+<script>
+import {
+  saveLabel
+} from '@/api/system'
+export default {
+  name: 'organizationEdit',
+  data () {
+    return {
+      formValues: {
+        tags: [
+          { value: null, key: Date.now() }
+        ]
+      },
+      item: {}
+    }
+  },
+  methods: {
+    open (nodes) {
+      this.formValues.tags = [{ value: null, key: Date.now() }]
+      this.item = nodes
+      this.$refs.dialog.open()
+    },
+    onRemove (index) {
+      this.formValues.tags.splice(index, 1)
+    },
+    onAdd () {
+      this.formValues.tags.push({
+        value: '',
+        key: Date.now()
+      })
+    },
+    async onSure () {
+      try {
+        await saveLabel({
+          labelEntityId: this.item.id,
+          labelType: 0,
+          labelTitle: this.formValues.tags.map(e => e.value)
+        })
+        this.$emit('success')
+        this.$refs.dialog.close()
+      } catch (error) {
+        this.$message.error(error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>