节点添加及删除操作

src/ajax/api.js

@@ -7,6 +7,7 @@ switch (process.env.NODE_ENV) {
 
 export default {
   BASE_URL,
+  GET_SUBJECTS: '/subjects',
   GET_RELATIONS: '/relations',
   POST_SUBJECT: '/subject',
   POST_NODE: '/node/relation',

src/components/d3.vue

@@ -100,6 +100,18 @@ export default {
         colorList,
         setCurNode
       )
+      // if (instance) {
+      //   instance.update(props.data)
+      // } else {
+      //   instance = new RelationGraph(
+      //     container.value,
+      //     props.data,
+      //     props.config,
+      //     menuData,
+      //     colorList,
+      //     setCurNode
+      //   )
+      // }
       setLegend()
     }
     function setKey(key) {

src/components/footer.vue

 <template>
   <div class="footer">
+    <n-button type="primary" ghost @click="addSubject">Add Subject</n-button>
     <n-space>
       <n-tag v-show="nodeVal" size="small" round :color="color">
         {{ nodeVal && nodeVal.nodeLabel }}
@@ -31,7 +32,7 @@ export default defineComponent({
       }),
     },
   },
-  emits: ['set'],
+  emits: ['set', 'add'],
   setup(props, ctx) {
     const colorList = {
       default: 'skyblue',
@@ -65,12 +66,16 @@ export default defineComponent({
       'nodeId',
       'nodeLabel',
     ])
+    const addSubject = () => {
+      ctx.emit('add')
+    }
     return {
       curKey,
       setKey,
       list,
       color,
       nodeVal,
+      addSubject,
     }
   },
 })
@@ -80,7 +85,7 @@ export default defineComponent({
 .footer
   display flex
   align-items center
-  justify-content flex-end
+  justify-content space-between
   padding 0 15px 8px
   background #f8f9fb
   box-shadow 10px 6px 10px 0 #000

src/components/main.vue

 <template>
   <div class="main">
-    <Nav style="grid-area: nav" />
+    <Nav style="grid-area: nav" @search="handleSearch" />
     <D3
       ref="d3Ref"
       style="grid-area: content"
       class="graph"
       :data="data"
-      @branch="handleBranch"
+      @branch="fetchSubordinates"
       @add="handleAdd"
       @curNode="curNode = $event"
       @del="handleDelete"
     />
     <Side style="grid-area: side" />
-    <Footer style="grid-area: footer" :node="curNode" @set="setKey" />
+    <Footer
+      style="grid-area: footer"
+      :node="curNode"
+      @add="showSubjectDrawer = true"
+      @set="setKey"
+    />
   </div>
   <n-drawer v-model:show="showDrawer" :width="400" placement="left">
     <n-drawer-content title="新增节点">
@@ -46,6 +51,24 @@
       </n-form>
     </n-drawer-content>
   </n-drawer>
+  <n-drawer v-model:show="showSubjectDrawer" :width="400" placement="left">
+    <n-drawer-content title="新增Suject">
+      <n-form ref="subjectFormRef" :model="subjectData" :rules="rules">
+        <n-form-item path="subjectName" label="名称">
+          <n-input
+            v-model:value="subjectData.subjectName"
+            placeholder="请输入"
+            @keydown.enter.prevent
+          />
+        </n-form-item>
+        <n-space justify="end">
+          <n-button :loading="isLoading" type="primary" @click="addSubject">
+            提交
+          </n-button>
+        </n-space>
+      </n-form>
+    </n-drawer-content>
+  </n-drawer>
 </template>
 
 <script>
@@ -69,6 +92,7 @@ export default {
     const formData = ref({
       propertyName: null,
       relationId: null,
+      systemId: null,
     })
     const showDrawer = ref(false)
     const isLoading = ref(false)
@@ -76,20 +100,32 @@ export default {
     const relationOptions = ref([])
     const systemOptions = ref([])
     const data = ref([])
-    function getData() {
+    const subjectNodes = ref([])
+    function fetchSubjects() {
+      // ajax
+      //   .get({
+      //     url: api.GET_NODES,
+      //     params: { nodeId: '572563400077869056' },
+      //   })
+      //   .then((res) => {
+      //     console.log('nodes:', res)
+      //     data.value = res.data.content
+      //     systemOptions.value = data.value.nodes
+      //       .filter((node) => node.nodeLabel === 'System')
+      //       .map((node) => ({ label: node.systemName, value: node.nodeId }))
+      //   })
+
       ajax
         .get({
-          url: api.GET_NODES,
+          url: api.GET_SUBJECTS,
         })
         .then((res) => {
-          console.log('nodes:', res)
-          data.value = res.data.content
-          systemOptions.value = data.value.nodes
-            .filter((node) => node.nodeLabel === 'System')
-            .map((node) => ({ label: node.systemName, value: node.nodeId }))
+          console.log('subject', res.data.content)
+          subjectNodes.value = res.data.content
+          data.value = { nodes: subjectNodes.value, links: [] }
         })
     }
-    getData()
+    fetchSubjects()
     ajax
       .get({
         url: api.GET_RELATIONS,
@@ -101,18 +137,32 @@ export default {
           value: item.id,
         }))
       })
-    function handleBranch({ nodeId }) {
+    function fetchSubordinates(params = null) {
       ajax
         .get({
           url: api.GET_NODES,
-          params: { nodeId },
+          params,
         })
         .then((res) => {
-          console.log('nodes:', res)
-          // data.value = res.data.content
+          const { links, nodes } = res.data.content
+          data.value = {
+            nodes: [
+              ...data.value.nodes,
+              ...nodes.filter((node) => node.nodeLabel !== 'Subject'),
+            ],
+            links: [...data.value.links, ...links],
+          }
+          systemOptions.value = data.value.nodes
+            .filter((node) => node.nodeLabel === 'System')
+            .map((node) => ({ label: node.systemName, value: node.nodeId }))
         })
     }
     function handleAdd({ nodeId }) {
+      formData.value = {
+        propertyName: null,
+        relationId: null,
+        systemId: null,
+      }
       subjectId.value = nodeId
       showDrawer.value = true
     }
@@ -133,7 +183,8 @@ export default {
               },
             })
             .then(() => {
-              getData()
+              // fetchSubjects()
+              fetchSubordinates({ nodeId: subjectId.value })
               isLoading.value = false
               showDrawer.value = false
               message.success('提交成功')
@@ -152,11 +203,61 @@ export default {
         negativeText: '取消',
         maskClosable: false,
         onPositiveClick: () => {
-          console.log('delete', data)
+          ajax
+            .delete({
+              url: api.DELETE_NODE.replace('{id}', data.id),
+            })
+            .then(() => {
+              if (data.nodeLabel === 'Subject') {
+                fetchSubjects()
+              } else {
+                fetchSubordinates({ nodeId: null })
+              }
               message.success('删除成功！')
+            })
         },
       })
     }
+
+    const subjectFormRef = ref(null)
+    const showSubjectDrawer = ref(false)
+    const subjectData = ref({ subjectName: null })
+    const addSubject = (e) => {
+      e.preventDefault()
+      subjectFormRef.value.validate((errors) => {
+        if (!errors) {
+          isLoading.value = true
+          ajax
+            .post({
+              url: api.POST_SUBJECT,
+              params: subjectData.value,
+            })
+            .then(() => {
+              fetchSubjects()
+              isLoading.value = false
+              showSubjectDrawer.value = false
+              message.success('提交成功')
+            })
+        }
+      })
+    }
+    const handleSearch = (key) => {
+      if (!key) {
+        fetchSubjects()
+        return
+      }
+      ajax
+        .get({
+          url: api.GET_NODES,
+          params: { nodeName: key },
+        })
+        .then((res) => {
+          data.value = res.data.content
+          systemOptions.value = data.value.nodes
+            .filter((node) => node.nodeLabel === 'System')
+            .map((node) => ({ label: node.systemName, value: node.nodeId }))
+        })
+    }
     return {
       formRef,
       formData,
@@ -167,35 +268,47 @@ export default {
       systemOptions,
       data,
       mockData,
-      handleBranch,
+      fetchSubordinates,
       handleAdd,
       d3Ref,
       setKey,
       rules: {
-        propertyName: [
+        subjectName: [
           {
             required: true,
-            message: '请输入节点名称',
+            message: '请输入名称',
             trigger: ['input', 'blur'],
           },
         ],
-        relationId: [
+        propertyName: [
           {
             required: true,
-            message: '请选择从属类型',
+            message: '请输入节点名称',
             trigger: ['input', 'blur'],
           },
         ],
-        systemId: [
+        relationId: [
           {
             required: true,
-            message: '请选择所属系统',
+            message: '请选择从属类型',
             trigger: ['input', 'blur'],
           },
         ],
+        // systemId: [
+        //   {
+        //     required: true,
+        //     message: '请选择所属系统',
+        //     trigger: ['input', 'blur'],
+        //   },
+        // ],
       },
       curNode,
       handleDelete,
+      showSubjectDrawer,
+      subjectFormRef,
+      subjectData,
+      addSubject,
+      handleSearch,
     }
   },
 }
@@ -209,7 +322,7 @@ export default {
   overflow hidden
   grid-template-areas 'nav nav' 'side content' 'side footer'
   grid-template-columns 0px 1fr
-  grid-template-rows 0px 1fr 70px
+  grid-template-rows 40px 1fr 70px
   padding 4px
   font-weight bold !important
 </style>

src/components/nav.vue

 <template>
-  <div class="nav"></div>
+  <div class="nav">
+    <n-input
+      v-model:value="searchKey"
+      type="text"
+      placeholder="搜索Subject"
+      clearable
+      @keypress.enter="search"
+    />
+  </div>
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   name: 'Nav',
-  setup() {},
+  emits: ['search'],
+  setup(_, ctx) {
+    const searchKey = ref(null)
+    return {
+      searchKey,
+      search: () => ctx.emit('search', searchKey.value),
+    }
+  },
 })
 </script>
 
@@ -15,4 +30,5 @@ export default defineComponent({
 .nav
   background #f9fbfd
   border-bottom 4px solid #fff
+  padding 0 10px
 </style>