!78 feat: 过滤方法增加api返回顶级对象作为参数，增强过滤器兼容性

Merge pull request !78 from dodu/dev-api-filter

src/hooks/useChartDataFetch.hook.ts

@@ -59,18 +59,18 @@ export const useChartDataFetch = (
 
         const fetchFn = async () => {
           const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.requestGlobalConfig))
-          if (res && res.data) {
+          if (res) {
             try {
               const filter = targetComponent.filter
               // eCharts 组件配合 vChart 库更新方式
               if (chartFrame === ChartFrameEnum.ECHARTS) {
                 if (vChartRef.value) {
-                  vChartRef.value.setOption({ dataset: newFunctionHandle(res.data, filter) })
+                  vChartRef.value.setOption({ dataset: newFunctionHandle(res?.data, res, filter) })
                 }
               }
               // 更新回调函数
               if (updateCallback) {
-                updateCallback(newFunctionHandle(res.data, filter))
+                updateCallback(newFunctionHandle(res?.data, res, filter))
               }
             } catch (error) {
               console.error(error)
@@ -90,7 +90,7 @@ export const useChartDataFetch = (
       }
       // eslint-disable-next-line no-empty
     } catch (error) {
-      console.log(error);
+      console.log(error)
     }
   }
 

src/utils/utils.ts

@@ -22,7 +22,7 @@ export const isDev = () => {
  * @param { Number } randomLength
  */
 export const getUUID = (randomLength = 10) => {
-  return Number(Math.random().toString().substr(2, randomLength) + Date.now()).toString(36)
+  return Number(Math.random().toString().substring(2, randomLength) + Date.now()).toString(36)
 }
 
 /**
@@ -43,21 +43,8 @@ export const renderLang = (lang: string, set = {}, tag = 'span') => {
   return () => h(tag, set, { default: () => window['$t'](lang) })
 }
 
-/**
- * ! 编译会报错，暂不使用
- * * 处理 vite 中无法使用 require 的问题，utils 文件为根路径
- * @param path
- * @param name
- * @returns url
- */
-// export const requireUrl = (path: string, name: string) => {
-//   return new URL(`${path}/${name}`, import.meta.url).href
-// }
-
 /**
  * * 获取错误处理图片，默认 404 图
- * @param path
- * @param name
  * @returns url
  */
 export const requireErrorImg = () => {
@@ -193,14 +180,16 @@ export const canvasCut = (html: HTMLElement | null, callback?: Function) => {
 /**
  * * 函数过滤器
  * @param data 数据值
+ * @param res 返回顶级对象
  * @param funcStr 函数字符串
- * @param toString 转为字符串
+ * @param isToString 是否转为字符串
  * @param errorCallBack 错误回调函数
  * @param successCallBack 成功回调函数
  * @returns
  */
 export const newFunctionHandle = (
   data: any,
+  res: any,
   funcStr?: string,
   isToString?: boolean,
   errorCallBack?: Function,
@@ -208,8 +197,8 @@ export const newFunctionHandle = (
 ) => {
   try {
     if (!funcStr) return data
-    const fn = new Function('data', funcStr)
-    const fnRes = fn(cloneDeep(data))
+    const fn = new Function('data', 'res', funcStr)
+    const fnRes = fn(cloneDeep(data), cloneDeep(res))
     const resHandle = isToString ? toString(fnRes) : fnRes
     // 成功回调
     successCallBack && successCallBack(resHandle)
@@ -258,5 +247,5 @@ export const objToCookie = (obj: RequestParamsObjType) => {
   for (const key in obj) {
     str += key + '=' + obj[key] + ';'
   }
-  return str.substr(0, str.length - 1)
+  return str.substring(0, str.length - 1)
 }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -127,8 +127,8 @@ const sendHandle = async () => {
   try {
     const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig))
     loading.value = false
-    if (res && res.data) {
-      targetData.value.option.dataset = newFunctionHandle(res.data, targetData.value.filter)
+    if (res) {
+      targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter)
       showMatching.value = true
       return
     }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue

@@ -1,7 +1,7 @@
 <template>
   <template v-if="targetData.filter">
     <n-card>
-      <p><span class="func-keyword">function</span>&nbsp;&nbsp;filter(data)&nbsp;&nbsp;{</p>
+      <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>
@@ -47,7 +47,7 @@
           <div>
             <n-space vertical>
               <n-tag type="info">
-                <span class="func-keyword">function</span>&nbsp;&nbsp;filter(data)&nbsp;&nbsp;{
+                <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>
@@ -58,7 +58,13 @@
             <n-space :size="15" vertical>
               <div class="editor-data-show">
                 <n-space>
-                  <n-text depth="3">目标数据：</n-text>
+                  <n-text depth="3">目标数据(data)：</n-text>
+                  <n-code :code="toString(sourceData?.data) || 'undefined'" 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>
@@ -123,8 +129,8 @@ const sourceData = ref<any>('')
 const fetchTargetData = async () => {
   try {
     const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig))
-    if (res && res.data) {
-      sourceData.value = res.data
+    if (res) {
+      sourceData.value = res
       return
     }
     window['$message'].warning('数据异常，请检查参数！')
@@ -136,8 +142,9 @@ const fetchTargetData = async () => {
 // 过滤结果
 const filterRes = computed(() => {
   try {
-    const fn = new Function('data', filter.value)
-    const res = fn(cloneDeep(sourceData.value))
+    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)