From 28dbf76ae5bedc2a7252ac5a509fe5afd2d97955 Mon Sep 17 00:00:00 2001
From: dualwind <dualwind@qq.com>
Date: Wed, 31 Jan 2024 23:49:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8C=87=E5=AE=9A=E6=A6=82=E5=BF=B5=E5=9D=97?=
 =?UTF-8?q?=EF=BC=8C=E6=8C=87=E5=AE=9A=E5=B1=9E=E6=80=A7=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/VueApp.vue                       |  26 +++-
 src/components/SelectTag.vue         |  19 ++-
 src/components/SelectTagFormItem.vue |   4 +-
 src/components/Table.vue             |   6 +-
 src/components/TableData.vue         | 213 +++++++++++++++++----------
 5 files changed, 174 insertions(+), 94 deletions(-)

diff --git a/src/VueApp.vue b/src/VueApp.vue
index 9127a93..0db759c 100644
--- a/src/VueApp.vue
+++ b/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,7 +76,14 @@
   <!--展示区域-->
   <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>
@@ -81,9 +91,9 @@
 <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();
diff --git a/src/components/SelectTag.vue b/src/components/SelectTag.vue
index 2a10676..10896b5 100644
--- a/src/components/SelectTag.vue
+++ b/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,7 +51,7 @@ 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,
@@ -54,4 +59,10 @@ const handleSelect = (item: AutocompleteItem) => {
   });
   selected.value = true;
 };
+onMounted(() => {
+  if (props.item?.tag?.value) {
+    state.value = props.item.tag.value;
+    selected.value = true;
+  }
+});
 </script>
diff --git a/src/components/SelectTagFormItem.vue b/src/components/SelectTagFormItem.vue
index e13d3c2..24f6d7d 100644
--- a/src/components/SelectTagFormItem.vue
+++ b/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);
diff --git a/src/components/Table.vue b/src/components/Table.vue
index c65433c..c7b0f8f 100644
--- a/src/components/Table.vue
+++ b/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[];
 }
diff --git a/src/components/TableData.vue b/src/components/TableData.vue
index 9cc5707..1fa35b2 100644
--- a/src/components/TableData.vue
+++ b/src/components/TableData.vue
@@ -9,6 +9,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import {
+  queryBlockById,
   queryBlocksByTag,
   queryDescendantBlocks,
 } from "../../lib/siyuanPlugin-common/siyuan-api/query";
@@ -16,15 +17,19 @@ import {
 import { Block } from "../../lib/siyuanPlugin-common/types/siyuan-api";
 import { Data, Head } from "./Table.vue";
 import Table from "./Table.vue";
-import { AutocompleteItem } from "./SelectTag.vue";
+import { BlockAC } from "./SelectBlock.vue";
+import { AutocompleteItem, TagSelectedItem } from "./SelectTag.vue";
+
+const props = defineProps<{
+  tag_concept: TagSelectedItem[];
+  blocks: BlockAC[];
+  tag_property: TagSelectedItem[];
+  isContainsTagChild: boolean;
+  splitFlag: string;
+}>();
 
-const props = defineProps<{ tags: TagSelectedItem[] }>();
-export interface TagSelectedItem {
-  tag: AutocompleteItem;
-  children: AutocompleteItem[];
-}
 //let tableDate = [];
-const tableDataRef = ref([]);
+const tableDataRef = ref<Data[]>([]);
 const loading = ref(false);
 const tableHeadRef = ref<Head>({
   value: "",
@@ -34,53 +39,115 @@ const tableHeadRef = ref<Head>({
 });
 
 const recurList2Tree = (parent: Head, list: { value: string }[]) => {
-  let children: Head[] = [];
   for (let item of list) {
     let itemPath = item.value.split("/");
+    if (!isChild(itemPath, parent.path)) {
+      continue;
+    }
+    if (
+      parent.children.find((e) => {
+        return e.value === item.value;
+      })
+    ) {
+      continue;
+    }
+    parent.children.push({
+      value: item.value,
+      label: itemPath[itemPath.length - 1],
+      children: [],
+      path: itemPath,
+    });
+  }
+  for (let child of parent.children) {
+    recurList2Tree(child, list);
+  }
+  function isChild(itemPath: string[], parentPath: string[]) {
     let isChild = true;
-    if (itemPath.length !== parent.path.length + 1) {
+    if (itemPath.length !== parentPath.length + 1) {
       isChild = false;
     } else {
-      for (let i = 0; i < parent.path.length; i++) {
-        if (itemPath[i] !== parent.path[i]) {
+      for (let i = 0; i < parentPath.length; i++) {
+        if (itemPath[i] !== parentPath[i]) {
           isChild = false;
           break;
         }
       }
     }
-
-    if (isChild) {
-      children.push({
-        value: item.value,
-        label: itemPath[itemPath.length - 1],
-        children: [],
-        path: itemPath,
-      });
-    }
-  }
-  parent.children = parent.children.concat(children);
-  for (let child of parent.children) {
-    recurList2Tree(child, list);
+    return isChild;
   }
 };
+/**
+ * @description 构建表头
+ * @returns columnProps="tableHeadRef.children"
+ */
 const buildHead = (props: TagSelectedItem[]) => {
-  /*构建表头*/
-  tableHeadRef.value.children = [];
-  tableHeadRef.value.label = "";
   for (const item of props) {
-    tableHeadRef.value.value = item.tag.value;
-    tableHeadRef.value.path = item.tag.value.split("/");
-    recurList2Tree(tableHeadRef.value, item.children);
+    let head: Head = {
+      children: [],
+      value: item.tag.value,
+      label: item.tag.value,
+      path: item.tag.value.split("/"),
+    };
+    recurList2Tree(head, item.children);
+    tableHeadRef.value.children.push(head);
   }
 };
+/**
+ * @param props.tag_concept
+ * @param props.blocks
+ */
+const getblocks = async () => {
+  const blocksGroup = await Promise.all([
+    await Promise.all(
+      props.tag_concept.map(async (item) => {
+        const tag = item.tag.value;
+        return await queryBlocksByTag(tag);
+      })
+    ),
+    await Promise.all(
+      props.blocks.map(async (item) => {
+        return await queryBlockById(item.id);
+      })
+    ),
+  ]);
+  return flatten(blocksGroup) as Block[];
+};
+function flatten(arr: any[]): any[] {
+  return arr.reduce((pre, cur) => {
+    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
+  }, []);
+}
+
+const getDescendantBlocks = async (blocks: Block[]) => {
+  return await Promise.all(
+    blocks.map(async (block: Block) => {
+      const childBlocks = await queryDescendantBlocks(block);
+      return {
+        childBlocks: childBlocks,
+        nameBlock: block,
+      };
+    })
+  );
+};
 //主程序入口
 const submit = async () => {
-  //console.log(props.tags);
   loading.value = true;
+  //清空
+  tableHeadRef.value = {
+    value: "",
+    label: "",
+    children: [],
+    path: [],
+  };
+  tableDataRef.value = [];
+
+  console.log(props);
+  //构建表头
+  /*
   //去重
   let tags: string[] = [];
   let propDeduplication: TagSelectedItem[] = [];
-  for (let item of props.tags) {
+  for (let item of props.tag_concept) {
     if (item.tag.value === "") {
       continue;
     }
@@ -89,62 +156,52 @@ const submit = async () => {
     }
     tags.push(item.tag.value);
     propDeduplication.push(item);
+  }*/
+  let propList: AutocompleteItem[] = [];
+  if (props.isContainsTagChild) {
+    buildHead(props.tag_concept);
+    for (let tag of props.tag_concept) {
+      propList = propList.concat(tag.children);
+    }
   }
-  buildHead(propDeduplication);
-  //console.log(tableHeadRef.value);
+  buildHead(props.tag_property);
+  for (let tag of props.tag_property) {
+    propList.push(tag.tag);
+    propList = propList.concat(tag.children);
+  }
+  console.log("propList", propList);
   //构建表格主体
-  //查找后代块
-  const dataSourceGroup = await Promise.all(
-    propDeduplication.map(async (item) => {
-      const tag = item.tag.value;
-      const nameBlocks = await queryBlocksByTag(tag);
-      let children = await Promise.all(
-        nameBlocks.map(async (block: Block) => {
-          const childBlocks = await queryDescendantBlocks(block);
-          return {
-            tag: tag,
-            columnProps: item.children,
-            childBlocks: childBlocks,
-            nameBlock: block,
-          };
-        })
-      );
-      return children;
-    })
-  );
+  const nameBlocks = await getblocks();
+  const childBlocks = await getDescendantBlocks(nameBlocks);
   /*
   第一列为名称，值为tag所在block的content
   其余列根据tag表示的属性，分别从后代block中查找*/
-  tableDataRef.value = [];
-  for (const itemGroup of dataSourceGroup) {
-    for (const item of itemGroup) {
-      let data: Data = {
-        //todo 简单去除方法，未考虑行内代码等包含标签关键字情况
-        name: item.nameBlock.content.replace("#" + item.tag + "#", ""),
-      };
-      //const childBlocksReverse = childBlocks.toReversed();
-      for (let prop of item.columnProps) {
-        /*查找到的block需满足以下条件
-       - 如果不是段落，直接满足
-       - 如果是段落，则必须是父级的第一个子块，并且父级content是含有标签的块
+  for (const block of childBlocks) {
+    let data: Data = {
+      name: block.nameBlock.content,
+    };
+    for (let prop of propList) {
+      /*查找到的block需满足以下条件
+        - 自上向下查询，排除列表块
+        - 容器块优先：第一个子块包含属性标签
+        - 未找到符合条件容器块，使用段落块
        */
-        let propBlock = item.childBlocks.find((e) => {
-          return e.fcontent.indexOf(prop.value) > -1 && e.type !== "l";
+      let propBlock = block.childBlocks.find((e) => {
+        return e.fcontent.indexOf(prop.value) > -1 && e.type !== "l";
+      });
+      if (!propBlock) {
+        propBlock = block.childBlocks.find((e) => {
+          return e.content.indexOf(prop.value) > -1 && e.type == "p";
         });
-        if (!propBlock) {
-          propBlock = item.childBlocks.find((e) => {
-            return e.content.indexOf(prop.value) > -1 && e.type == "p";
-          });
-        }
-        if (propBlock) {
-          data[prop.value] = propBlock.id;
-        }
       }
-
-      tableDataRef.value.push(data);
+      if (propBlock) {
+        data[prop.value] = propBlock.id;
+      }
     }
+    tableDataRef.value.push(data);
   }
-  //console.log(tableDataRef.value);
+
+  console.log(tableDataRef.value);
   loading.value = false;
 };
 defineExpose({