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

This commit is contained in:
tnt group 2022-10-12 16:41:49 +08:00
parent c84f6d9c33
commit a6f4267915
4 changed files with 29 additions and 33 deletions

View File

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

View File

@ -22,7 +22,7 @@ export const isDev = () => {
* @param { Number } randomLength * @param { Number } randomLength
*/ */
export const getUUID = (randomLength = 10) => { 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) }) 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 * * 404
* @param path
* @param name
* @returns url * @returns url
*/ */
export const requireErrorImg = () => { export const requireErrorImg = () => {
@ -193,14 +180,16 @@ export const canvasCut = (html: HTMLElement | null, callback?: Function) => {
/** /**
* * * *
* @param data * @param data
* @param res
* @param funcStr * @param funcStr
* @param toString * @param isToString
* @param errorCallBack * @param errorCallBack
* @param successCallBack * @param successCallBack
* @returns * @returns
*/ */
export const newFunctionHandle = ( export const newFunctionHandle = (
data: any, data: any,
res: any,
funcStr?: string, funcStr?: string,
isToString?: boolean, isToString?: boolean,
errorCallBack?: Function, errorCallBack?: Function,
@ -208,8 +197,8 @@ export const newFunctionHandle = (
) => { ) => {
try { try {
if (!funcStr) return data if (!funcStr) return data
const fn = new Function('data', funcStr) const fn = new Function('data', 'res', funcStr)
const fnRes = fn(cloneDeep(data)) const fnRes = fn(cloneDeep(data), cloneDeep(res))
const resHandle = isToString ? toString(fnRes) : fnRes const resHandle = isToString ? toString(fnRes) : fnRes
// 成功回调 // 成功回调
successCallBack && successCallBack(resHandle) successCallBack && successCallBack(resHandle)
@ -258,5 +247,5 @@ export const objToCookie = (obj: RequestParamsObjType) => {
for (const key in obj) { for (const key in obj) {
str += key + '=' + obj[key] + ';' str += key + '=' + obj[key] + ';'
} }
return str.substr(0, str.length - 1) return str.substring(0, str.length - 1)
} }

View File

@ -127,15 +127,15 @@ const sendHandle = async () => {
try { try {
const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig)) const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig))
loading.value = false loading.value = false
if (res && res.data) { if (res) {
targetData.value.option.dataset = newFunctionHandle(res.data, targetData.value.filter) targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter)
showMatching.value = true showMatching.value = true
return return
} }
window['$message'].warning('数据异常,请检查参数!') window['$message'].warning('数据异常,请检查参数!@@@@')
} catch (error) { } catch (error) {
loading.value = false loading.value = false
window['$message'].warning('数据异常,请检查参数!') window['$message'].warning('数据异常,请检查参数!@@@@')
} }
} }

View File

@ -1,7 +1,7 @@
<template> <template>
<template v-if="targetData.filter"> <template v-if="targetData.filter">
<n-card> <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"> <div class="go-ml-4">
<n-code :code="targetData.filter" language="typescript"></n-code> <n-code :code="targetData.filter" language="typescript"></n-code>
@ -47,7 +47,7 @@
<div> <div>
<n-space vertical> <n-space vertical>
<n-tag type="info"> <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> </n-tag>
<monaco-editor v-model:modelValue="filter" width="460px" height="380px" language="javascript" /> <monaco-editor v-model:modelValue="filter" width="460px" height="380px" language="javascript" />
<n-tag type="info">}</n-tag> <n-tag type="info">}</n-tag>
@ -58,7 +58,13 @@
<n-space :size="15" vertical> <n-space :size="15" vertical>
<div class="editor-data-show"> <div class="editor-data-show">
<n-space> <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-code :code="toString(sourceData)" language="json" :word-wrap="true"></n-code>
</n-space> </n-space>
</div> </div>
@ -123,8 +129,8 @@ const sourceData = ref<any>('')
const fetchTargetData = async () => { const fetchTargetData = async () => {
try { try {
const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig)) const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig))
if (res && res.data) { if (res) {
sourceData.value = res.data sourceData.value = res
return return
} }
window['$message'].warning('数据异常,请检查参数!') window['$message'].warning('数据异常,请检查参数!')
@ -136,8 +142,9 @@ const fetchTargetData = async () => {
// //
const filterRes = computed(() => { const filterRes = computed(() => {
try { try {
const fn = new Function('data', filter.value) const fn = new Function('data', 'res', filter.value)
const res = fn(cloneDeep(sourceData.value)) const response = cloneDeep(sourceData.value)
const res = fn(response?.data, response)
// eslint-disable-next-line vue/no-side-effects-in-computed-properties // eslint-disable-next-line vue/no-side-effects-in-computed-properties
errorFlag.value = false errorFlag.value = false
return toString(res) return toString(res)