From 667585f10cc4d03d5eb8d6c335ad4222df30bc82 Mon Sep 17 00:00:00 2001
From: yupi <592789970@qq.com>
Date: Sat, 14 May 2022 14:35:44 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=BC=98=E5=8C=96=E8=B0=83=E7=94=A8?=
 =?UTF-8?q?=E6=A0=91=E7=94=9F=E6=88=90=E8=BF=87=E7=A8=8B=20add=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=9F=A5=E7=9C=8B=E8=B0=83=E7=94=A8=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                         |  6 ++--
 src/App.vue                       |  5 ++--
 src/components/SearchableTree.vue | 38 +++++++++++++++++++-----
 src/generator/index.ts            | 49 +++++++++++++++++--------------
 src/generator/type.d.ts           |  1 +
 5 files changed, 66 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index ac2dabf..b11e7ca 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,9 @@
 1. 将 SQL 的编写逻辑 `结构化` ，像写文章大纲一样编写和阅读 SQL
 2. 重复的 SQL 只需编写一次 ，SQL 变动时修改一处即可
 3. 可以针对某部分 SQL 进行传参和调试
-4. 查看 SQL 语句的引用树
+4. 查看 SQL 语句的引用树和替换过程，便于分析理解 SQL
+
+![查看调用树和替换过程](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/1/image-20220514143425002.png)
 
 ## 应用场景
 
@@ -63,7 +65,7 @@ from
 3. 支持参数透传，比如 @a(xx = #{yy})，yy 变量可传递给 @a 公式
 4. 支持嵌套传参（将子查询作为参数），比如 @a(xx = @b(yy = 1))
 5. 不限制用户在 JSON 中编写的内容，因此该工具也可以作为重复代码生成器来使用
-6. 支持查看 SQL 语句的调用树，便于分析引用关系
+6. 支持查看 SQL 语句的调用树和替换详情，便于分析引用关系
 
 ## 文档
 
diff --git a/src/App.vue b/src/App.vue
index 0a77373..4e226d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { doGenerateSQL } from "./generator";
 import { importExample } from "./examples";
-import { onMounted, ref, toRaw, watch } from "vue";
+import { onMounted, ref, toRaw } from "vue";
 import * as monaco from "monaco-editor";
 import { format } from "sql-formatter";
 import { GithubOutlined } from "@ant-design/icons-vue";
@@ -56,6 +56,7 @@ const getSQL = () => {
   toRaw(outputEditor.value).setValue(result);
   // 获取调用树
   invokeTree.value = [generateResult.invokeTree];
+  console.log(invokeTree.value);
 };
 
 const showInvokeTree = () => {
@@ -120,7 +121,7 @@ onMounted(() => {
         <a-button size="large" type="primary" ghost @click="showInvokeTree">
           查看调用树
         </a-button>
-        <a-button size="large" type="default" @click="importExample">
+        <a-button size="large" type="default" @click="importExample('init')">
           导入例子
         </a-button>
       </a-space>
diff --git a/src/components/SearchableTree.vue b/src/components/SearchableTree.vue
index 27e4e4f..db0fdfe 100644
--- a/src/components/SearchableTree.vue
+++ b/src/components/SearchableTree.vue
@@ -13,13 +13,37 @@
       :tree-data="tree"
       @expand="onExpand"
     >
-      <template #title="{ title }">
-        <span v-if="title.indexOf(searchValue) > -1">
-          {{ title.substr(0, title.indexOf(searchValue)) }}
-          <span style="color: #f50">{{ searchValue }}</span>
-          {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
-        </span>
-        <span v-else>{{ title }}</span>
+      <template #title="{ title, sql, params, resultSQL }">
+        <a-popover title="详情" placement="top">
+          <template #content>
+            <div style="max-width: 600px">
+              <p>
+                <b>替换前语句：</b>
+                <a-typography-paragraph copyable>
+                  {{ sql }}
+                </a-typography-paragraph>
+              </p>
+              <p>
+                <b>替换参数：</b>
+                <a-typography-paragraph copyable>
+                  {{ params ?? "无" }}
+                </a-typography-paragraph>
+              </p>
+              <p>
+                <b>替换后语句：</b>
+                <a-typography-paragraph copyable>
+                  {{ resultSQL }}
+                </a-typography-paragraph>
+              </p>
+            </div>
+          </template>
+          <span v-if="title.indexOf(searchValue) > -1">
+            {{ title.substr(0, title.indexOf(searchValue)) }}
+            <span style="color: #f50">{{ searchValue }}</span>
+            {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
+          </span>
+          <span v-else>{{ title }}</span>
+        </a-popover>
       </template>
     </a-tree>
   </div>
diff --git a/src/generator/index.ts b/src/generator/index.ts
index 08ff8ec..5f88c38 100644
--- a/src/generator/index.ts
+++ b/src/generator/index.ts
@@ -19,35 +19,55 @@ export function doGenerateSQL(json: InputJSON) {
   const rootInvokeTreeNode = { ...initTreeNode };
   const context = json;
   const resultSQL = generateSQL(
-    context.main,
+    "main",
     context,
     context.main?.params,
     rootInvokeTreeNode
   );
   return {
     resultSQL,
-    invokeTree: rootInvokeTreeNode,
+    invokeTree: rootInvokeTreeNode.children[0], // 取第一个作为根节点
   };
 }
 
 /**
  * 递归生成 SQL
- * @param currentNode
+ * @param key
  * @param context
  * @param params
  * @param invokeTreeNode
  */
 function generateSQL(
-  currentNode: InputJSONValue,
+  key: string,
   context: InputJSON,
   params?: Record<string, string>,
   invokeTreeNode?: InvokeTreeNode
 ): string {
+  const currentNode = context[key];
   if (!currentNode) {
     return "";
   }
-  const result = replaceParams(currentNode, context, params, invokeTreeNode);
-  return replaceSubSql(result, context, invokeTreeNode);
+  let childInvokeTreeNode: InvokeTreeNode | undefined;
+  if (invokeTreeNode) {
+    childInvokeTreeNode = {
+      title: key,
+      sql: currentNode.sql ?? currentNode,
+      params,
+      children: [],
+    };
+    invokeTreeNode.children?.push(childInvokeTreeNode);
+  }
+  const result = replaceParams(
+    currentNode,
+    context,
+    params,
+    childInvokeTreeNode
+  );
+  const resultSQL = replaceSubSql(result, context, childInvokeTreeNode);
+  if (childInvokeTreeNode) {
+    childInvokeTreeNode.resultSQL = resultSQL;
+  }
+  return resultSQL;
 }
 
 /**
@@ -140,23 +160,8 @@ function replaceSubSql(
       const key = keyValueArray[0].trim();
       params[key] = keyValueArray[1].trim();
     }
-    let childInvokeTreeNode;
-    if (invokeTreeNode) {
-      childInvokeTreeNode = {
-        title: subKey,
-        sql,
-        params,
-        children: [],
-      };
-      invokeTreeNode.children?.push(childInvokeTreeNode);
-    }
     // 递归解析被替换节点
-    const replacement = generateSQL(
-      replacementNode,
-      context,
-      params,
-      childInvokeTreeNode
-    );
+    const replacement = generateSQL(subKey, context, params, invokeTreeNode);
     result = result.replace(regExpMatchArray[0], replacement);
     regExpMatchArray = matchSubQuery(result);
   }
diff --git a/src/generator/type.d.ts b/src/generator/type.d.ts
index 6fd20bb..53b37a9 100644
--- a/src/generator/type.d.ts
+++ b/src/generator/type.d.ts
@@ -16,6 +16,7 @@ interface InvokeTreeNode {
   sql: string;
   key?: string;
   params?: Record<string, string>;
+  resultSQL?: string;
   children?: InvokeTreeNode[];
 }