github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 08:12:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 处理编辑和预览不一致的问题

Browse Source
This commit is contained in:
奔跑的面条 2023-04-23 20:33:46 +08:00
parent a6194b8fa9
commit 2a8d0717f8
2 changed files with 216 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
View File

@ -132,7 +132,7 @@ const sendHandle = async () => {
if (res) { if (res) {
const { data } = res const { data } = res
if (!data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！') 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 showMatching.value = true
return return
} }

430
src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue
View File

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