获取要素接口更换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,430 +174,397 @@
   </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([
-      {
-        propertyName: null,
-        relationId: null,
-        systemIds: null,
+
+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([])
+
+function fetchSubjects() {
+  ajax
+    .get({
+      url: api.GET_SUBJECTS,
+    })
+    .then((res) => {
+      console.log('subject', res.data.content)
+      const [{ links, nodes }] = res.data.content
+      subjectOptions.value = nodes.map((item) => ({
+        label: item.subjectName,
+        value: item.nodeId,
+      }))
+      graphData.value = {
+        nodes: [...nodes],
+        links: [...links],
+      }
+    })
+}
+fetchSubjects()
+
+function fetchTags() {
+  ajax
+    .get({
+      url: api.GET_TAGS,
+    })
+    .then((res) => {
+      console.log('tags', res.data.content)
+    })
+}
+fetchTags()
+
+function getSelectOptions() {
+  ajax
+    .get({
+      url: api.GET_RELATIONS,
+    })
+    .then((res) => {
+      if (!res.data || !res.data.content) return
+      relationOptions.value = res.data.content.map((item) => ({
+        label: item.relationName,
+        value: item.id + '',
+      }))
+    })
+  ajax
+    .get({
+      url: api.GET_SYSTEMS,
+    })
+    .then((res) => {
+      if (!res.data || !res.data.content) return
+      systemOptions.value = res.data.content.map((item) => ({
+        label: item.systemName,
+        value: item.nodeId + '',
+      }))
+    })
+}
+getSelectOptions()
+
+function fetchSubordinates(params = null) {
+  ajax
+    .get({
+      url: api.GET_NODES,
+      params: {
+        type: params.nodeLabel,
+        nodeId: params.nodeId,
       },
-    ])
-    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([])
+    })
+    .then((res) => {
+      const { links, nodes } = res.data.content
+      graphData.value = {
+        nodes: [
+          ...graphData.value.nodes,
+          ...nodes.filter(
+            (node) =>
+              graphData.value.nodes.findIndex((e) => e.id == node.id) < 0
+          ),
+        ],
+        links: [
+          ...graphData.value.links,
+          ...links.filter(
+            (link) =>
+              graphData.value.links.findIndex((e) => e.id == link.id) < 0
+          ),
+        ],
+      }
+    })
+}
+
+function openAddDrawer(node) {
+  formData.value = [
+    {
+      propertyName: null,
+      relationId: null,
+      systemIds: null,
+    },
+  ]
+  curSubject.value = node
+  showDrawer.value = true
+}
+
+function setLabelKey(key) {
+  d3Ref.value.setKey(key)
+}
 
-    function fetchSubjects() {
+function submitNewNode(e) {
+  e.preventDefault()
+  formRef.value.validate((errors) => {
+    if (!errors) {
+      isLoading.value = true
+      const { nodeId, subjectName, subjectType } = curSubject.value
       ajax
-        .get({
-          url: api.GET_SUBJECTS,
+        .post({
+          url: api.POST_NODE,
+          params: {
+            subjectId: nodeId,
+            subjectName,
+            subjectType,
+            propertyList: formData.value,
+          },
         })
-        .then((res) => {
-          console.log('subject', res.data.content)
-          const data = res.data.content
-          subjectOptions.value = data.map((item) => ({
-            label: item.subjectName,
-            value: item.nodeId,
-          }))
-          graphData.value = {
-            nodes: [...data],
-            links: [],
-          }
+        .then(() => {
+          fetchSubordinates({
+            nodeId: nodeId,
+            nodeLabel: 'Subject',
+          })
+          isLoading.value = false
+          showDrawer.value = false
+          message.success('提交成功')
         })
     }
-    fetchSubjects()
+  })
+}
 
-    function getSelectOptions() {
-      ajax
-        .get({
-          url: api.GET_RELATIONS,
-        })
-        .then((res) => {
-          if (!res.data || !res.data.content) return
-          relationOptions.value = res.data.content.map((item) => ({
-            label: item.relationName,
-            value: item.id + '',
-          }))
-        })
+const curNode = ref(null)
+
+function deleteNode(data) {
+  dialog.error({
+    title: '删除节点',
+    content: `确定是否删除 '${
+      data[data.nodeLabel.toLowerCase() + 'Name']
+    }' 节点？`,
+    positiveText: '确定',
+    negativeText: '取消',
+    maskClosable: false,
+    onPositiveClick: () => {
       ajax
-        .get({
-          url: api.GET_SYSTEMS,
+        .delete({
+          url: api.DELETE_NODE.replace('{id}', data.id),
         })
-        .then((res) => {
-          if (!res.data || !res.data.content) return
-          systemOptions.value = res.data.content.map((item) => ({
-            label: item.systemName,
-            value: item.nodeId + '',
-          }))
+        .then(() => {
+          if (data.nodeLabel === 'Subject') {
+            fetchSubjects()
+          } else {
+            graphData.value = {
+              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
+              ),
+            }
+          }
+          message.success('删除成功！')
         })
-    }
-    getSelectOptions()
+    },
+  })
+}
 
-    function fetchSubordinates(params = null) {
+function deleteLink(data) {
+  const { source, target } = data
+  dialog.error({
+    title: '删除关联',
+    content: `确定是否删除 '${source.propertyName}_${target.systemName}' 关联关系？`,
+    positiveText: '确定',
+    negativeText: '取消',
+    maskClosable: false,
+    onPositiveClick: () => {
       ajax
-        .get({
-          url: api.GET_NODES,
-          params: {
-            type: params.nodeLabel,
-            nodeId: params.nodeId,
-          },
+        .delete({
+          url: api.DELETE_RELATION.replace('{id}', data.id),
         })
-        .then((res) => {
-          const { links, nodes } = res.data.content
+        .then(() => {
           graphData.value = {
-            nodes: [
-              ...graphData.value.nodes,
-              ...nodes.filter(
-                (node) =>
-                  graphData.value.nodes.findIndex((e) => e.id == node.id) < 0
-              ),
-            ],
-            links: [
-              ...graphData.value.links,
-              ...links.filter(
-                (link) =>
-                  graphData.value.links.findIndex((e) => e.id == link.id) < 0
-              ),
-            ],
+            nodes: graphData.value.nodes,
+            links: graphData.value.links.filter((link) => link.id != data.id),
           }
+          message.success('删除成功！')
         })
-    }
-
-    function openAddDrawer(node) {
-      formData.value = [
-        {
-          propertyName: null,
-          relationId: null,
-          systemIds: null,
-        },
-      ]
-      curSubject.value = node
-      showDrawer.value = true
-    }
-
-    function setLabelKey(key) {
-      d3Ref.value.setKey(key)
-    }
-
-    function submitNewNode(e) {
-      e.preventDefault()
-      formRef.value.validate((errors) => {
-        if (!errors) {
-          isLoading.value = true
-          const { nodeId, subjectName, subjectType } = curSubject.value
-          ajax
-            .post({
-              url: api.POST_NODE,
-              params: {
-                subjectId: nodeId,
-                subjectName,
-                subjectType,
-                propertyList: formData.value,
-              },
-            })
-            .then(() => {
-              fetchSubordinates({
-                nodeId: nodeId,
-                nodeLabel: 'Subject',
-              })
-              isLoading.value = false
-              showDrawer.value = false
-              message.success('提交成功')
-            })
-        }
-      })
-    }
-
-    const curNode = ref(null)
-
-    function deleteNode(data) {
-      dialog.error({
-        title: '删除节点',
-        content: `确定是否删除 '${
-          data[data.nodeLabel.toLowerCase() + 'Name']
-        }' 节点？`,
-        positiveText: '确定',
-        negativeText: '取消',
-        maskClosable: false,
-        onPositiveClick: () => {
-          ajax
-            .delete({
-              url: api.DELETE_NODE.replace('{id}', data.id),
-            })
-            .then(() => {
-              if (data.nodeLabel === 'Subject') {
-                fetchSubjects()
-              } else {
-                graphData.value = {
-                  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
-                  ),
-                }
-              }
-              message.success('删除成功！')
-            })
-        },
-      })
-    }
-
-    function deleteLink(data) {
-      const { source, target } = data
-      dialog.error({
-        title: '删除关联',
-        content: `确定是否删除 '${source.propertyName}_${target.systemName}' 关联关系？`,
-        positiveText: '确定',
-        negativeText: '取消',
-        maskClosable: false,
-        onPositiveClick: () => {
-          ajax
-            .delete({
-              url: api.DELETE_RELATION.replace('{id}', data.id),
-            })
-            .then(() => {
-              graphData.value = {
-                nodes: graphData.value.nodes,
-                links: graphData.value.links.filter(
-                  (link) => link.id != data.id
-                ),
-              }
-              message.success('删除成功！')
-            })
-        },
-      })
-    }
-
-    const subjectFormRef = ref(null)
-    const showSubjectDrawer = ref(false)
-    const subjectData = ref({
-      subjectName: null,
-      subjectType: null,
-      targetSubjectId: null,
-      sourceSubjectId: 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 searchNodes = (type, key) => {
-      if (!key) {
-        fetchSubjects()
-        return
-      }
+const subjectFormRef = ref(null)
+const showSubjectDrawer = ref(false)
+const subjectData = ref({
+  subjectName: null,
+  subjectType: null,
+  targetSubjectId: null,
+  sourceSubjectId: null,
+})
+const addSubject = (e) => {
+  e.preventDefault()
+  subjectFormRef.value.validate((errors) => {
+    if (!errors) {
+      isLoading.value = true
       ajax
-        .get({
-          url: api.GET_NODES,
-          params: { type, nodeName: key },
+        .post({
+          url: api.POST_SUBJECT,
+          params: subjectData.value,
         })
-        .then((res) => {
-          graphData.value = res.data.content
+        .then(() => {
+          fetchSubjects()
+          isLoading.value = false
+          showSubjectDrawer.value = false
+          message.success('提交成功')
         })
     }
+  })
+}
 
-    const showLinkDrawer = ref(false)
-    const linkData = ref({
-      sourceNodeId: null,
-      targetNodeId: null,
+const searchNodes = (type, key) => {
+  if (!key) {
+    fetchSubjects()
+    return
+  }
+  ajax
+    .get({
+      url: api.GET_NODES,
+      params: { type, nodeName: key },
     })
-    watch(
-      () => curNode.value,
-      (cur) => {
-        linkData.value = {
-          sourceNodeId: cur && cur.nodeId,
-          targetNodeId: null,
-        }
-      }
-    )
-    const linkFormRef = ref(null)
-    const linkSubject = (e) => {
-      e.preventDefault()
-      linkFormRef.value.validate((errors) => {
-        if (!errors) {
-          isLoading.value = true
-          ajax
-            .post({
-              url: api.POST_LINK_SUBJECTS,
-              params: linkData.value,
-            })
-            .then(() => {
-              fetchSubordinates({
-                nodeId: linkData.value.sourceNodeId,
-                nodeLabel: 'Subject',
-              })
-              isLoading.value = false
-              showLinkDrawer.value = false
-              message.success('提交成功')
-            })
-        }
-      })
-    }
-    const rules = {
-      subjectName: [
-        {
-          required: true,
-          message: '请输入名称',
-          trigger: ['input', 'blur'],
-        },
-      ],
-      subjectType: [
-        {
-          required: true,
-          message: '请选择要素类型',
-          trigger: ['change', 'blur'],
-        },
-      ],
-      propertyName: [
-        {
-          required: true,
-          message: '请输入节点名称',
-          trigger: ['input', 'blur'],
-        },
-      ],
-      relationId: [
-        {
-          required: true,
-          message: '请选择从属类型',
-          trigger: ['change', 'blur'],
-        },
-      ],
-      sourceNodeId: [
-        {
-          required: true,
-          message: '请选择源要素',
-          trigger: ['change', 'blur'],
-        },
-      ],
-      targetNodeId: [
-        {
-          required: true,
-          message: '请选择目标要素',
-          trigger: ['change', 'blur'],
-        },
-        {
-          validator(_, value) {
-            return value !== linkData.value.sourceNodeId
-          },
-          trigger: ['blur', 'change'],
-          message: '目标要素不能与源要素相同',
-        },
-      ],
-      targetSubjectId: [
-        {
-          validator(_, value) {
-            return value !== subjectData.value.sourceSubjectId
-          },
-          trigger: ['blur', 'change'],
-          message: '目标要素不能与源要素相同',
-        },
-      ],
-      sourceSubjectId: [
-        {
-          validator(_, value) {
-            return value !== subjectData.value.targetSubjectId
-          },
-          trigger: ['blur', 'change'],
-          message: '源要素不能与目标要素相同',
-        },
-      ],
-    }
-    function openSubjectDrawer() {
-      showSubjectDrawer.value = true
-      subjectData.value = {
-        subjectName: null,
-        subjectType: null,
-        targetSubjectId: null,
-        sourceSubjectId: null,
-      }
-    }
-    function openLinkDrawer() {
-      showLinkDrawer.value = true
-      linkData.value = {
-        sourceNodeId: null,
-        targetNodeId: null,
-      }
-    }
-    function addNewItem() {
-      formData.value.push({
-        propertyName: null,
-        relationId: null,
-        systemIds: null,
-      })
-    }
-    function deleteItem(i) {
-      formData.value.splice(i, 1)
+    .then((res) => {
+      graphData.value = res.data.content
+    })
+}
+
+const showLinkDrawer = ref(false)
+const linkData = ref({
+  sourceNodeId: null,
+  targetNodeId: null,
+})
+watch(
+  () => curNode.value,
+  (cur) => {
+    linkData.value = {
+      sourceNodeId: cur && cur.nodeId,
+      targetNodeId: null,
     }
-    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,
+  }
+)
+const linkFormRef = ref(null)
+const linkSubject = (e) => {
+  e.preventDefault()
+  linkFormRef.value.validate((errors) => {
+    if (!errors) {
+      isLoading.value = true
+      ajax
+        .post({
+          url: api.POST_LINK_SUBJECTS,
+          params: linkData.value,
+        })
+        .then(() => {
+          fetchSubordinates({
+            nodeId: linkData.value.sourceNodeId,
+            nodeLabel: 'Subject',
+          })
+          isLoading.value = false
+          showLinkDrawer.value = false
+          message.success('提交成功')
+        })
     }
-  },
+  })
+}
+const rules = {
+  subjectName: [
+    {
+      required: true,
+      message: '请输入名称',
+      trigger: ['input', 'blur'],
+    },
+  ],
+  subjectType: [
+    {
+      required: true,
+      message: '请选择要素类型',
+      trigger: ['change', 'blur'],
+    },
+  ],
+  propertyName: [
+    {
+      required: true,
+      message: '请输入节点名称',
+      trigger: ['input', 'blur'],
+    },
+  ],
+  relationId: [
+    {
+      required: true,
+      message: '请选择从属类型',
+      trigger: ['change', 'blur'],
+    },
+  ],
+  sourceNodeId: [
+    {
+      required: true,
+      message: '请选择源要素',
+      trigger: ['change', 'blur'],
+    },
+  ],
+  targetNodeId: [
+    {
+      required: true,
+      message: '请选择目标要素',
+      trigger: ['change', 'blur'],
+    },
+    {
+      validator(_, value) {
+        return value !== linkData.value.sourceNodeId
+      },
+      trigger: ['blur', 'change'],
+      message: '目标要素不能与源要素相同',
+    },
+  ],
+  targetSubjectId: [
+    {
+      validator(_, value) {
+        return value !== subjectData.value.sourceSubjectId
+      },
+      trigger: ['blur', 'change'],
+      message: '目标要素不能与源要素相同',
+    },
+  ],
+  sourceSubjectId: [
+    {
+      validator(_, value) {
+        return value !== subjectData.value.targetSubjectId
+      },
+      trigger: ['blur', 'change'],
+      message: '源要素不能与目标要素相同',
+    },
+  ],
+}
+function openSubjectDrawer() {
+  showSubjectDrawer.value = true
+  subjectData.value = {
+    subjectName: null,
+    subjectType: null,
+    targetSubjectId: null,
+    sourceSubjectId: null,
+  }
+}
+function openLinkDrawer() {
+  showLinkDrawer.value = true
+  linkData.value = {
+    sourceNodeId: null,
+    targetNodeId: null,
+  }
+}
+function addNewItem() {
+  formData.value.push({
+    propertyName: null,
+    relationId: null,
+    systemIds: null,
+  })
+}
+function deleteItem(i) {
+  formData.value.splice(i, 1)
 }
 </script>