From 2a8d0717f80f43c11cadd5a515cbf6c494360238 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sun, 23 Apr 2023 20:33:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=92=8C=E9=A2=84=E8=A7=88=E4=B8=8D=E4=B8=80=E8=87=B4=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ChartDataAjax/index.vue        |   2 +-
 .../ChartDataMonacoEditor/index.vue           | 430 +++++++++---------
 2 files changed, 216 insertions(+), 216 deletions(-)

diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
index 203bb0e6..1e4cce55 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
@@ -132,7 +132,7 @@ const sendHandle = async () => {
     if (res) {
       const { data } = res
       if (!data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')
-      targetData.value.option.dataset = newFunctionHandle(data, res, targetData.value.filter)
+      targetData.value.option.dataset = newFunctionHandle(data.data, data, targetData.value.filter)
       showMatching.value = true
       return
     }
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue
index 129b50c1..529fb248 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue
@@ -1,215 +1,215 @@
-<template>
-  <template v-if="targetData.filter">
-    <n-card>
-      <p><span class="func-keyword">function</span>&nbsp;&nbsp;filter(data, res)&nbsp;&nbsp;{</p>
-      <!-- 函数体 -->
-      <div class="go-ml-4">
-        <n-code :code="targetData.filter" language="typescript"></n-code>
-      </div>
-      <p>}</p>
-      <template #footer>
-        <n-space justify="end">
-          <n-button type="primary" tertiary size="small" @click="addFilter">
-            <template #icon>
-              <n-icon>
-                <filter-edit-icon />
-              </n-icon>
-            </template>
-            编辑
-          </n-button>
-          <n-button tertiary size="small" @click="delFilter"> 删除 </n-button>
-        </n-space>
-      </template>
-    </n-card>
-  </template>
-  <template v-else>
-    <n-button class="go-ml-3" @click="addFilter">
-      <template #icon>
-        <n-icon>
-          <filter-icon />
-        </n-icon>
-      </template>
-      新增过滤器
-    </n-button>
-  </template>
-
-  <!-- 弹窗 -->
-  <n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false" :closeOnEsc="false">
-    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 600px">
-      <template #header>
-        <n-space>
-          <n-text>过滤器函数编辑器</n-text>
-        </n-space>
-      </template>
-      <template #header-extra> </template>
-      <n-space size="small" vertical>
-        <n-space justify="space-between">
-          <div>
-            <n-space vertical>
-              <n-tag type="info">
-                <span class="func-keyword">function</span>&nbsp;&nbsp;filter(data, res)&nbsp;&nbsp;{
-              </n-tag>
-              <monaco-editor v-model:modelValue="filter" width="460px" height="380px" language="javascript" />
-              <n-tag type="info">}</n-tag>
-            </n-space>
-          </div>
-          <n-divider vertical style="height: 480px" />
-          <n-scrollbar style="max-height: 480px">
-            <n-space :size="15" vertical>
-              <div class="editor-data-show">
-                <n-space>
-                  <n-text depth="3">默认过滤数据(data)：</n-text>
-                  <n-code :code="toString(sourceData?.data) || '暂无'" language="json" :word-wrap="true"></n-code>
-                </n-space>
-              </div>
-              <div class="editor-data-show">
-                <n-space>
-                  <n-text depth="3">接口返回数据(res)：</n-text>
-                  <n-code :code="toString(sourceData) || '暂无'" language="json" :word-wrap="true"></n-code>
-                </n-space>
-              </div>
-              <div class="editor-data-show">
-                <n-space>
-                  <n-text depth="3">过滤器结果：</n-text>
-                  <n-code :code="filterRes || '暂无'" language="json" :word-wrap="true"></n-code>
-                </n-space>
-              </div>
-            </n-space>
-          </n-scrollbar>
-        </n-space>
-      </n-space>
-      <template #action>
-        <n-space justify="space-between">
-          <div class="go-flex-items-center">
-            <n-tag :bordered="false" type="primary">
-              <template #icon>
-                <n-icon :component="DocumentTextIcon" />
-              </template>
-              规则
-            </n-tag>
-            <n-text class="go-ml-2" depth="2">过滤器默认处理接口返回值的「data」字段</n-text>
-          </div>
-
-          <n-space>
-            <n-button size="medium" @click="closeFilter">取消</n-button>
-            <n-button size="medium" type="primary" @click="saveFilter">保存</n-button>
-          </n-space>
-        </n-space>
-      </template>
-    </n-card>
-  </n-modal>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, watch, toRef, toRefs, toRaw, reactive } from 'vue'
-import { useTargetData } from '../../../hooks/useTargetData.hook'
-import { MonacoEditor } from '@/components/Pages/MonacoEditor'
-import { icon } from '@/plugins'
-import { goDialog, toString } from '@/utils'
-import { customizeHttp } from '@/api/http'
-import cloneDeep from 'lodash/cloneDeep'
-
-const { DocumentTextIcon } = icon.ionicons5
-const { FilterIcon, FilterEditIcon } = icon.carbon
-const { targetData, chartEditStore } = useTargetData()
-const { requestDataType } = toRefs(targetData.value.request)
-const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
-
-// 受控弹窗
-const showModal = ref(false)
-// filter 函数模板
-const filter = ref(targetData.value.filter || `return data`)
-// 过滤错误标识
-const errorFlag = ref(false)
-// 目标静态/接口数据
-const sourceData = ref<any>('')
-
-// 动态获取数据
-const fetchTargetData = async () => {
-  try {
-    const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
-    if (res) {
-      sourceData.value = res
-      return
-    }
-    window['$message'].warning('没有拿到返回值，请检查接口！')
-  } catch (error) {
-    console.error(error);
-    window['$message'].warning('数据异常，请检查参数！')
-  }
-}
-
-// 过滤结果
-const filterRes = computed(() => {
-  try {
-    const fn = new Function('data', 'res', filter.value)
-    const response = cloneDeep(sourceData.value)
-    const res = fn(response?.data, response)
-    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    errorFlag.value = false
-    return toString(res)
-  } catch (error) {
-    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    errorFlag.value = true
-    return `过滤函数错误，日志：${error}`
-  }
-})
-
-// 新增过滤器
-const addFilter = () => {
-  showModal.value = true
-}
-
-// 删除过滤器
-const delFilter = () => {
-  goDialog({
-    message: '是否删除过滤器',
-    onPositiveCallback: () => {
-      targetData.value.filter = undefined
-    }
-  })
-}
-
-// 关闭过滤器
-const closeFilter = () => {
-  showModal.value = false
-}
-
-// 新增过滤器
-const saveFilter = () => {
-  if (errorFlag.value) {
-    window['$message'].error('过滤函数错误，无法进行保存')
-    return
-  }
-  targetData.value.filter = filter.value
-  closeFilter()
-}
-
-watch(
-  () => showModal.value,
-  (newData: boolean) => {
-    if (newData) {
-      fetchTargetData()
-      filter.value = targetData.value.filter || `return data`
-    }
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-.func-keyword {
-  color: #b478cf;
-}
-@include go('chart-data-monaco-editor') {
-  &.n-card.n-modal,
-  .n-card {
-    @extend .go-background-filter;
-  }
-  .editor-data-show {
-    @include fetch-bg-color('filter-color');
-    width: 420px;
-    padding: 20px;
-    border-radius: 5px;
-  }
-}
-</style>
+<template>
+  <template v-if="targetData.filter">
+    <n-card>
+      <p><span class="func-keyword">function</span>&nbsp;&nbsp;filter(data, res)&nbsp;&nbsp;{</p>
+      <!-- 函数体 -->
+      <div class="go-ml-4">
+        <n-code :code="targetData.filter" language="typescript"></n-code>
+      </div>
+      <p>}</p>
+      <template #footer>
+        <n-space justify="end">
+          <n-button type="primary" tertiary size="small" @click="addFilter">
+            <template #icon>
+              <n-icon>
+                <filter-edit-icon />
+              </n-icon>
+            </template>
+            编辑
+          </n-button>
+          <n-button tertiary size="small" @click="delFilter"> 删除 </n-button>
+        </n-space>
+      </template>
+    </n-card>
+  </template>
+  <template v-else>
+    <n-button class="go-ml-3" @click="addFilter">
+      <template #icon>
+        <n-icon>
+          <filter-icon />
+        </n-icon>
+      </template>
+      新增过滤器
+    </n-button>
+  </template>
+
+  <!-- 弹窗 -->
+  <n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false" :closeOnEsc="false">
+    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 600px">
+      <template #header>
+        <n-space>
+          <n-text>过滤器函数编辑器</n-text>
+        </n-space>
+      </template>
+      <template #header-extra> </template>
+      <n-space size="small" vertical>
+        <n-space justify="space-between">
+          <div>
+            <n-space vertical>
+              <n-tag type="info">
+                <span class="func-keyword">function</span>&nbsp;&nbsp;filter(data, res)&nbsp;&nbsp;{
+              </n-tag>
+              <monaco-editor v-model:modelValue="filter" width="460px" height="380px" language="javascript" />
+              <n-tag type="info">}</n-tag>
+            </n-space>
+          </div>
+          <n-divider vertical style="height: 480px" />
+          <n-scrollbar style="max-height: 480px">
+            <n-space :size="15" vertical>
+              <div class="editor-data-show">
+                <n-space>
+                  <n-text depth="3">默认过滤数据(data)：</n-text>
+                  <n-code :code="toString(sourceData?.data) || '暂无'" language="json" :word-wrap="true"></n-code>
+                </n-space>
+              </div>
+              <div class="editor-data-show">
+                <n-space>
+                  <n-text depth="3">接口返回数据(res)：</n-text>
+                  <n-code :code="toString(sourceData) || '暂无'" language="json" :word-wrap="true"></n-code>
+                </n-space>
+              </div>
+              <div class="editor-data-show">
+                <n-space>
+                  <n-text depth="3">过滤器结果：</n-text>
+                  <n-code :code="filterRes || '暂无'" language="json" :word-wrap="true"></n-code>
+                </n-space>
+              </div>
+            </n-space>
+          </n-scrollbar>
+        </n-space>
+      </n-space>
+      <template #action>
+        <n-space justify="space-between">
+          <div class="go-flex-items-center">
+            <n-tag :bordered="false" type="primary">
+              <template #icon>
+                <n-icon :component="DocumentTextIcon" />
+              </template>
+              规则
+            </n-tag>
+            <n-text class="go-ml-2" depth="2">过滤器默认处理接口返回值的「data」字段</n-text>
+          </div>
+
+          <n-space>
+            <n-button size="medium" @click="closeFilter">取消</n-button>
+            <n-button size="medium" type="primary" @click="saveFilter">保存</n-button>
+          </n-space>
+        </n-space>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, toRef, toRefs, toRaw, reactive } from 'vue'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
+import { icon } from '@/plugins'
+import { goDialog, toString } from '@/utils'
+import { customizeHttp } from '@/api/http'
+import cloneDeep from 'lodash/cloneDeep'
+
+const { DocumentTextIcon } = icon.ionicons5
+const { FilterIcon, FilterEditIcon } = icon.carbon
+const { targetData, chartEditStore } = useTargetData()
+const { requestDataType } = toRefs(targetData.value.request)
+const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
+
+// 受控弹窗
+const showModal = ref(false)
+// filter 函数模板
+const filter = ref(targetData.value.filter || `return data`)
+// 过滤错误标识
+const errorFlag = ref(false)
+// 目标静态/接口数据
+const sourceData = ref<any>('')
+
+// 动态获取数据
+const fetchTargetData = async () => {
+  try {
+    const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
+    if (res) {
+      sourceData.value = res.data
+      return
+    }
+    window['$message'].warning('没有拿到返回值，请检查接口！')
+  } catch (error) {
+    console.error(error);
+    window['$message'].warning('数据异常，请检查参数！')
+  }
+}
+
+// 过滤结果
+const filterRes = computed(() => {
+  try {
+    const fn = new Function('data', 'res', filter.value)
+    const response = cloneDeep(sourceData.value)
+    const res = fn(response?.data, response)
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    errorFlag.value = false
+    return toString(res)
+  } catch (error) {
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    errorFlag.value = true
+    return `过滤函数错误，日志：${error}`
+  }
+})
+
+// 新增过滤器
+const addFilter = () => {
+  showModal.value = true
+}
+
+// 删除过滤器
+const delFilter = () => {
+  goDialog({
+    message: '是否删除过滤器',
+    onPositiveCallback: () => {
+      targetData.value.filter = undefined
+    }
+  })
+}
+
+// 关闭过滤器
+const closeFilter = () => {
+  showModal.value = false
+}
+
+// 新增过滤器
+const saveFilter = () => {
+  if (errorFlag.value) {
+    window['$message'].error('过滤函数错误，无法进行保存')
+    return
+  }
+  targetData.value.filter = filter.value
+  closeFilter()
+}
+
+watch(
+  () => showModal.value,
+  (newData: boolean) => {
+    if (newData) {
+      fetchTargetData()
+      filter.value = targetData.value.filter || `return data`
+    }
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.func-keyword {
+  color: #b478cf;
+}
+@include go('chart-data-monaco-editor') {
+  &.n-card.n-modal,
+  .n-card {
+    @extend .go-background-filter;
+  }
+  .editor-data-show {
+    @include fetch-bg-color('filter-color');
+    width: 420px;
+    padding: 20px;
+    border-radius: 5px;
+  }
+}
+</style>