获取要素接口更换v2

src/ajax/api.js

@@ -7,7 +7,8 @@ switch (process.env.NODE_ENV) {
 
 export default {
   BASE_URL,
-  GET_SUBJECTS: '/subjects',
+  GET_SUBJECTS: '/subjects/v2',
+  PUT_SUBJECT: '/subject/{id}',
   GET_RELATIONS: '/relations',
   POST_SUBJECT: '/subject',
   POST_NODE: '/node/relation',
@@ -16,4 +17,5 @@ export default {
   DELETE_NODE: '/node/{id}',
   GET_SYSTEMS: '/systems',
   POST_LINK_SUBJECTS: '/node/relations',
+  GET_TAGS: '/label/classification',
 }

src/components/main.vue

@@ -174,59 +174,66 @@
   </n-drawer>
 </template>
 
-<script>
+<script setup>
 import D3 from './d3.vue'
 import Nav from './nav.vue'
 import Side from './side.vue'
 import Footer from './footer.vue'
-import mockData from '@/util/mock.js'
 import { ref, watch } from 'vue'
 import { ajax, api } from '@/ajax'
 import { useMessage, useDialog } from 'naive-ui'
-export default {
-  name: 'Main',
-  components: { D3, Nav, Side, Footer },
-  setup() {
-    const message = useMessage()
-    const dialog = useDialog()
-    const curSubject = ref(null)
-    const formRef = ref(null)
-    const formData = ref([
+
+const message = useMessage()
+const dialog = useDialog()
+const curSubject = ref(null)
+const formRef = ref(null)
+const formData = ref([
   {
     propertyName: null,
     relationId: null,
     systemIds: null,
   },
-    ])
-    const showDrawer = ref(false)
-    const isLoading = ref(false)
-    const d3Ref = ref(null)
-    const relationOptions = ref([])
-    const systemOptions = ref([])
-    const graphData = ref({ nodes: [], links: [] })
-    const subjectOptions = ref([])
+])
+const showDrawer = ref(false)
+const isLoading = ref(false)
+const d3Ref = ref(null)
+const relationOptions = ref([])
+const systemOptions = ref([])
+const graphData = ref({ nodes: [], links: [] })
+const subjectOptions = ref([])
 
-    function fetchSubjects() {
+function fetchSubjects() {
   ajax
     .get({
       url: api.GET_SUBJECTS,
     })
     .then((res) => {
       console.log('subject', res.data.content)
-          const data = res.data.content
-          subjectOptions.value = data.map((item) => ({
+      const [{ links, nodes }] = res.data.content
+      subjectOptions.value = nodes.map((item) => ({
         label: item.subjectName,
         value: item.nodeId,
       }))
       graphData.value = {
-            nodes: [...data],
-            links: [],
+        nodes: [...nodes],
+        links: [...links],
       }
     })
-    }
-    fetchSubjects()
+}
+fetchSubjects()
+
+function fetchTags() {
+  ajax
+    .get({
+      url: api.GET_TAGS,
+    })
+    .then((res) => {
+      console.log('tags', res.data.content)
+    })
+}
+fetchTags()
 
-    function getSelectOptions() {
+function getSelectOptions() {
   ajax
     .get({
       url: api.GET_RELATIONS,
@@ -249,10 +256,10 @@ export default {
         value: item.nodeId + '',
       }))
     })
-    }
-    getSelectOptions()
+}
+getSelectOptions()
 
-    function fetchSubordinates(params = null) {
+function fetchSubordinates(params = null) {
   ajax
     .get({
       url: api.GET_NODES,
@@ -280,9 +287,9 @@ export default {
         ],
       }
     })
-    }
+}
 
-    function openAddDrawer(node) {
+function openAddDrawer(node) {
   formData.value = [
     {
       propertyName: null,
@@ -292,13 +299,13 @@ export default {
   ]
   curSubject.value = node
   showDrawer.value = true
-    }
+}
 
-    function setLabelKey(key) {
+function setLabelKey(key) {
   d3Ref.value.setKey(key)
-    }
+}
 
-    function submitNewNode(e) {
+function submitNewNode(e) {
   e.preventDefault()
   formRef.value.validate((errors) => {
     if (!errors) {
@@ -325,11 +332,11 @@ export default {
         })
     }
   })
-    }
+}
 
-    const curNode = ref(null)
+const curNode = ref(null)
 
-    function deleteNode(data) {
+function deleteNode(data) {
   dialog.error({
     title: '删除节点',
     content: `确定是否删除 '${
@@ -348,12 +355,9 @@ export default {
             fetchSubjects()
           } else {
             graphData.value = {
-                  nodes: graphData.value.nodes.filter(
-                    (node) => node.id != data.id
-                  ),
+              nodes: graphData.value.nodes.filter((node) => node.id != data.id),
               links: graphData.value.links.filter(
-                    (link) =>
-                      link.source.id != data.id && link.target.id != data.id
+                (link) => link.source.id != data.id && link.target.id != data.id
               ),
             }
           }
@@ -361,9 +365,9 @@ export default {
         })
     },
   })
-    }
+}
 
-    function deleteLink(data) {
+function deleteLink(data) {
   const { source, target } = data
   dialog.error({
     title: '删除关联',
@@ -379,25 +383,23 @@ export default {
         .then(() => {
           graphData.value = {
             nodes: graphData.value.nodes,
-                links: graphData.value.links.filter(
-                  (link) => link.id != data.id
-                ),
+            links: graphData.value.links.filter((link) => link.id != data.id),
           }
           message.success('删除成功！')
         })
     },
   })
-    }
+}
 
-    const subjectFormRef = ref(null)
-    const showSubjectDrawer = ref(false)
-    const subjectData = ref({
+const subjectFormRef = ref(null)
+const showSubjectDrawer = ref(false)
+const subjectData = ref({
   subjectName: null,
   subjectType: null,
   targetSubjectId: null,
   sourceSubjectId: null,
-    })
-    const addSubject = (e) => {
+})
+const addSubject = (e) => {
   e.preventDefault()
   subjectFormRef.value.validate((errors) => {
     if (!errors) {
@@ -415,9 +417,9 @@ export default {
         })
     }
   })
-    }
+}
 
-    const searchNodes = (type, key) => {
+const searchNodes = (type, key) => {
   if (!key) {
     fetchSubjects()
     return
@@ -430,14 +432,14 @@ export default {
     .then((res) => {
       graphData.value = res.data.content
     })
-    }
+}
 
-    const showLinkDrawer = ref(false)
-    const linkData = ref({
+const showLinkDrawer = ref(false)
+const linkData = ref({
   sourceNodeId: null,
   targetNodeId: null,
-    })
-    watch(
+})
+watch(
   () => curNode.value,
   (cur) => {
     linkData.value = {
@@ -445,9 +447,9 @@ export default {
       targetNodeId: null,
     }
   }
-    )
-    const linkFormRef = ref(null)
-    const linkSubject = (e) => {
+)
+const linkFormRef = ref(null)
+const linkSubject = (e) => {
   e.preventDefault()
   linkFormRef.value.validate((errors) => {
     if (!errors) {
@@ -468,8 +470,8 @@ export default {
         })
     }
   })
-    }
-    const rules = {
+}
+const rules = {
   subjectName: [
     {
       required: true,
@@ -537,8 +539,8 @@ export default {
       message: '源要素不能与目标要素相同',
     },
   ],
-    }
-    function openSubjectDrawer() {
+}
+function openSubjectDrawer() {
   showSubjectDrawer.value = true
   subjectData.value = {
     subjectName: null,
@@ -546,58 +548,23 @@ export default {
     targetSubjectId: null,
     sourceSubjectId: null,
   }
-    }
-    function openLinkDrawer() {
+}
+function openLinkDrawer() {
   showLinkDrawer.value = true
   linkData.value = {
     sourceNodeId: null,
     targetNodeId: null,
   }
-    }
-    function addNewItem() {
+}
+function addNewItem() {
   formData.value.push({
     propertyName: null,
     relationId: null,
     systemIds: null,
   })
-    }
-    function deleteItem(i) {
+}
+function deleteItem(i) {
   formData.value.splice(i, 1)
-    }
-    return {
-      formRef,
-      formData,
-      showDrawer,
-      submitNewNode,
-      isLoading,
-      relationOptions,
-      systemOptions,
-      graphData,
-      mockData,
-      fetchSubordinates,
-      openAddDrawer,
-      d3Ref,
-      setLabelKey,
-      rules,
-      curNode,
-      deleteNode,
-      deleteLink,
-      showSubjectDrawer,
-      subjectFormRef,
-      subjectData,
-      addSubject,
-      searchNodes,
-      showLinkDrawer,
-      linkFormRef,
-      linkData,
-      linkSubject,
-      subjectOptions,
-      openSubjectDrawer,
-      openLinkDrawer,
-      addNewItem,
-      deleteItem,
-    }
-  },
 }
 </script>