Skip to content

R
relation-graph
Commit bcfd01c7 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

节点添加及删除操作

parent 57460837
Expand all Show whitespace changes
Inline Side-by-side
Showing with 385 additions and 47 deletions
src/ajax/api.js
View file @ bcfd01c7
......@@ -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
View file @ bcfd01c7
......@@ -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
View file @ bcfd01c7
<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
View file @ bcfd01c7
<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
View file @ bcfd01c7
<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>
src/util/useD3.js
View file @ bcfd01c7
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment