指定概念块，指定属性标签功能实现

src/VueApp.vue

@@ -13,7 +13,7 @@
     <el-form-item label="含有右侧标签的块">
       <SelectTagFormItem v-model="tag_concept" #default="{ item, index }">
         <selectTag
-          :item="item"
+          :item="(item as TagSelectedItem)"
           :index="index"
           @update="
             (item) => {
@@ -24,7 +24,10 @@
       </SelectTagFormItem>
     </el-form-item>
     <el-form-item label="右侧指定块">
-      <SelectTagFormItem v-model="blocks" #default="{ item, index }">
+      <SelectTagFormItem
+        v-model="(blocks as BlockAC[])"
+        #default="{ item, index }"
+      >
         <SelectBlock
           :item="item"
           :index="index"
@@ -42,10 +45,10 @@
     <el-form-item label="上一步选定标签的子标签">
       <el-switch v-model="isContainsTagChild" />
     </el-form-item>
-    <el-form-item label="含有右侧标签的块">
+    <el-form-item label="含有右侧标签及其子标签的块">
       <SelectTagFormItem v-model="tag_property" #default="{ item, index }">
         <selectTag
-          :item="item"
+          :item="(item as TagSelectedItem)"
           :index="index"
           @update="
             (item) => {
@@ -73,17 +76,24 @@
   <!--展示区域-->
   <el-row>
     <el-col :span="24">
-      <TableData :tags="tag_concept" ref="TableData_Tag_Ref" />
+      <TableData
+        ref="TableData_Tag_Ref"
+        :tag_concept="tag_concept"
+        :blocks="(blocks as BlockAC[])/** todo 提示类型不同，未知错误 */"
+        :tag_property="tag_property"
+        :isContainsTagChild="isContainsTagChild"
+        :splitFlag="splitFlag"
+      />
     </el-col>
   </el-row>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
 import SelectTagFormItem from "./components/SelectTagFormItem.vue";
-import selectTag from "./components/SelectTag.vue";
+import selectTag, { TagSelectedItem } from "./components/SelectTag.vue";
 import SelectBlock, { BlockAC } from "./components/SelectBlock.vue";
-import TableData, { TagSelectedItem } from "./components/TableData.vue";
+import TableData from "./components/TableData.vue";
 //*步骤条
 const step = ref(0);
 const nextText = ref("下一步");
@@ -102,6 +112,8 @@ const previoStep = () => {
     nextText.value = "下一步";
   }
 };
+
+//*提交
 const TableData_Tag_Ref = ref<InstanceType<typeof TableData>>();
 const submit = () => {
   TableData_Tag_Ref.value?.submit();

src/components/SelectTag.vue

@@ -11,22 +11,27 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { searchTag } from "../../lib/siyuanPlugin-common/siyuan-api/search";
 //import { Loading } from "@element-plus/icons-vue";
+export interface TagSelectedItem {
+  tag: AutocompleteItem;
+  children: AutocompleteItem[];
+}
 
 const state = ref("");
 const selected = ref(false);
 const emit = defineEmits<{
-  (e: "update", item: { tag: AutocompleteItem; children: AutocompleteItem[] });
+  (e: "update", item: TagSelectedItem);
 }>();
+const props = defineProps<{ item: TagSelectedItem }>();
 //const tagsRef = ref([]);
 let tags: AutocompleteItem[] = [];
 /**
  * @description 由于autocomplete组件的原因，返回值必须含有value字段
  */
 export interface AutocompleteItem {
-  value: string; 
+  value: string;
 }
 
 const querySearchAsync = async (
@@ -46,12 +51,18 @@ const querySearchAsync = async (
 const handleSelect = (item: AutocompleteItem) => {
   //disableInput.value = true;
   let children = tags.filter((tag) => {
-    return tag.value.indexOf(item.value) === 0 && tag.value !== item.value;
+    return tag.value.indexOf(item.value + "/") === 0;
   });
   emit("update", {
     tag: item,
     children: children,
   });
   selected.value = true;
 };
+onMounted(() => {
+  if (props.item?.tag?.value) {
+    state.value = props.item.tag.value;
+    selected.value = true;
+  }
+});
 </script>

src/components/SelectTagFormItem.vue

@@ -19,8 +19,10 @@
 </template>
 <script setup lang="ts">
 import { Delete, Plus } from "@element-plus/icons-vue";
+import { BlockAC } from "./SelectBlock.vue";
+import { TagSelectedItem } from "./SelectTag.vue";
 
-const domains = defineModel<any[]>();
+const domains = defineModel<(BlockAC | TagSelectedItem)[]>();
 
 const addTagDomain = () => {
   domains.value.push(null);

src/components/Table.vue

@@ -2,7 +2,6 @@
   <el-table
     v-loading="loading"
     :data="tableData"
-    style="width: 100%"
     border="true"
   >
     <el-table-column
@@ -28,10 +27,9 @@ export interface Data {
   children?: Data[];
   [prop: string]: string | Data[]; //prop表示标签名，值为id
 }
-
 export interface Head {
-  value: string;
-  label: string;
+  value: string; //用来跟body部分进行匹配
+  label: string; //显示的名称
   children: Head[];
   path: string[];
 }