编辑标签

src/components/d3.vue

@@ -9,7 +9,8 @@
           class="tag"
           :class="{
             on: curTagKey === n.key,
-            'click-able': n.key.indexOf('Property') >= 0,
+            'click-able':
+              n.key.indexOf('Property') >= 0 || n.key === 'SubjectLabel',
           }"
           size="small"
           round
@@ -67,6 +68,7 @@ export default {
       Property_manage: '#abd1c6',
       Property_service: '#f9bc60',
       Property_use: '#d9d4e7',
+      SubjectLabel: '#dda52d',
     }
     let instance = null
     const container = ref(null)
@@ -202,6 +204,8 @@ export default {
           return '服务行为'
         case 'Property_use':
           return '使用行为'
+        case 'SubjectLabel':
+          return '标签'
         default:
           return '未知'
       }
@@ -273,7 +277,7 @@ export default {
       linkList.value = linkResult
     }
     function onTagClick({ key }) {
-      if (key.indexOf('Property') < 0) return
+      if (key.indexOf('Property') < 0 && key !== 'SubjectLabel') return
       if (curTagKey.value === key) {
         curTagKey.value = null
       } else {

src/components/main.vue

@@ -58,9 +58,9 @@
             />
           </n-form-item>
           <template v-if="getTagName(data.relationId) === '标签'">
-            <n-form-item label="标签名称" path="tag">
+            <n-form-item label="标签名称" path="labelName">
               <n-select
-                v-model:value="data.tag"
+                v-model:value="data.labelName"
                 placeholder="请选择"
                 filterable
                 tag
@@ -232,6 +232,29 @@
             />
           </n-form-item>
         </template>
+        <template v-else-if="curNode.nodeLabel === 'SubjectLabel'">
+          <n-form-item label="标签名称" path="labelName">
+            <n-select
+              v-model:value="editData.labelName"
+              placeholder="请选择"
+              filterable
+              tag
+              :options="tagOptions"
+            />
+          </n-form-item>
+          <n-form-item label="标签分类" path="classification">
+            <n-select
+              v-model:value="editData.classification"
+              placeholder="请选择"
+              :options="tagClassOptions"
+            />
+          </n-form-item>
+          <n-form-item path="isPositive" :show-label="false">
+            <n-checkbox v-model:checked="editData.isPositive"
+              >是否为积极的标签</n-checkbox
+            >
+          </n-form-item>
+        </template>
         <n-space justify="end">
           <n-button
             :loading="isLoading"
@@ -316,7 +339,7 @@ function fetchTags() {
       tagOptions.value = data.map((e) => ({
         // TODO
         label: e.labelName,
-        value: e.id,
+        value: e.id + '',
       }))
     })
 }
@@ -402,6 +425,7 @@ function getTagName(relationId) {
 
 function submitNewNode(e) {
   e.preventDefault()
+  console.log(formData.value)
   formRef.value.validate(async (errors) => {
     if (!errors) {
       isLoading.value = true
@@ -442,13 +466,14 @@ function submitNewNode(e) {
             relationId: tagData[0].relationId,
             labelList: tagData.map((item) => {
               let obj = {
-                id: null,
-                labelName: item.tag,
+                labelName: item.labelName,
               }
-              if (tagOptions.value.findIndex((e) => e.value == item.tag) >= 0) {
+              const curTag = tagOptions.value.find(
+                (e) => e.value == item.labelName
+              )
+              if (curTag) {
                 obj = {
-                  id: item.tag,
-                  labelName: null,
+                  id: curTag.id,
                 }
               }
               return {
@@ -652,7 +677,7 @@ const rules = {
       trigger: ['change', 'blur'],
     },
   ],
-  tag: [
+  labelName: [
     {
       required: true,
       message: '请选择标签名称',
@@ -749,6 +774,22 @@ function editNode(e) {
         params = {
           propertyName: editData.value.propertyName,
         }
+      } else if (nodeLabel === 'SubjectLabel') {
+        const { labelName } = editData.value
+        let obj = {
+          labelName,
+        }
+        const curTag = tagOptions.value.find((e) => e.value == labelName)
+        if (curTag) {
+          obj = {
+            id: curTag.id,
+          }
+        }
+        params = {
+          classification: editData.value.classification,
+          isPositive: editData.value.isPositive,
+          ...obj,
+        }
       }
       ajax
         .put({

src/util/useD3.js

@@ -245,7 +245,12 @@ export default class RelationGraph {
       .attr('fill', '#000')
       .style('font-size', 12)
       .style('font-weight', 'normal')
-      .text((d) => d[d.nodeLabel.toLowerCase() + 'Name'])
+      .text((d) => {
+        if (d.nodeLabel === 'SubjectLabel') {
+          return d.labelName
+        }
+        return d[d.nodeLabel.toLowerCase() + 'Name']
+      })
   }
 
   initLinks() {