Commit 9f17d3fa9f55e6e43e835ee03a2a4fa921a65d30
Committed by
xp.Huang
1 parent
3c8f52ec
perf(src/views): 优化第三方接口
Showing
16 changed files
with
159 additions
and
43 deletions
| 1 | <template> | 1 | <template> |
| 2 | - <div ref="el" class="go-editor-area" :style="{ width, height }"></div> | ||
| 3 | - <EditorWorker></EditorWorker> | 2 | + <div :style="cacheConfigStyle"> |
| 3 | + <div ref="el" class="go-editor-area" :style="{ width, height }"></div> | ||
| 4 | + <EditorWorker></EditorWorker> | ||
| 5 | + <div style="margin-left:10px;"> | ||
| 6 | + <n-gradient-text type="danger"> | ||
| 7 | + {{ errorText }} | ||
| 8 | + </n-gradient-text> | ||
| 9 | +</div> | ||
| 10 | + </div> | ||
| 4 | </template> | 11 | </template> |
| 5 | 12 | ||
| 6 | <script lang="ts" setup> | 13 | <script lang="ts" setup> |
| 7 | -import { onMounted, watch, PropType } from 'vue' | 14 | +import { onMounted, watch, PropType, ref, computed } from 'vue' |
| 8 | import { useMonacoEditor } from './index.hook' | 15 | import { useMonacoEditor } from './index.hook' |
| 9 | import { EditorWorker } from './index' | 16 | import { EditorWorker } from './index' |
| 10 | 17 | ||
| @@ -32,7 +39,11 @@ const props = defineProps({ | @@ -32,7 +39,11 @@ const props = defineProps({ | ||
| 32 | editorOptions: { | 39 | editorOptions: { |
| 33 | type: Object as PropType<object>, | 40 | type: Object as PropType<object>, |
| 34 | default: () => ({}) | 41 | default: () => ({}) |
| 35 | - } | 42 | + }, |
| 43 | + config: { | ||
| 44 | + type: Boolean as PropType<boolean>, | ||
| 45 | + default: false | ||
| 46 | + }, | ||
| 36 | }) | 47 | }) |
| 37 | 48 | ||
| 38 | const emits = defineEmits(['blur', 'update:modelValue']) | 49 | const emits = defineEmits(['blur', 'update:modelValue']) |
| @@ -56,14 +67,28 @@ onMounted(() => { | @@ -56,14 +67,28 @@ onMounted(() => { | ||
| 56 | updateMonacoVal() | 67 | updateMonacoVal() |
| 57 | }) | 68 | }) |
| 58 | 69 | ||
| 70 | +const errorText = ref('') | ||
| 71 | + | ||
| 72 | +const cacheConfigStyle = computed(() => { | ||
| 73 | + const configStyle = { | ||
| 74 | + display:'flex', | ||
| 75 | + justifyContent: 'space-between', | ||
| 76 | + alignItems: 'center' | ||
| 77 | + } | ||
| 78 | + return props.config ? configStyle : '' | ||
| 79 | +}) | ||
| 80 | + | ||
| 59 | watch( | 81 | watch( |
| 60 | () => props.modelValue, | 82 | () => props.modelValue, |
| 61 | (val: string) => { | 83 | (val: string) => { |
| 62 | if(props.language === 'json') { | 84 | if(props.language === 'json') { |
| 63 | try { | 85 | try { |
| 64 | - JSON.parse(val) | 86 | + const res = JSON.parse(val) |
| 87 | + if(res) { | ||
| 88 | + errorText.value = '' | ||
| 89 | + } | ||
| 65 | } catch (_) { | 90 | } catch (_) { |
| 66 | - window.$message.error('JSON格式有误,请仔细检查!') | 91 | + errorText.value = 'JSON格式有误,请仔细检查!' |
| 67 | } | 92 | } |
| 68 | } | 93 | } |
| 69 | val !== getEditor()?.getValue() && updateMonacoVal(val) | 94 | val !== getEditor()?.getValue() && updateMonacoVal(val) |
| @@ -10,7 +10,7 @@ import {useFilterFn} from './useFilterFn' | @@ -10,7 +10,7 @@ import {useFilterFn} from './useFilterFn' | ||
| 10 | import {RequestContentTypeEnum} from '@/enums/external/httpEnum' | 10 | import {RequestContentTypeEnum} from '@/enums/external/httpEnum' |
| 11 | import dayjs from 'dayjs' | 11 | import dayjs from 'dayjs' |
| 12 | import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d' | 12 | import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d' |
| 13 | -import { convertToCascadingData, findItemByLabel } from '@/utils/external/utils' | 13 | +import { JSONParse, convertToCascadingData, findItemByLabel } from '@/utils/external/utils' |
| 14 | import { CascaderOption } from 'naive-ui' | 14 | import { CascaderOption } from 'naive-ui' |
| 15 | 15 | ||
| 16 | 16 | ||
| @@ -42,7 +42,8 @@ export const useChartDataFetch = ( | @@ -42,7 +42,8 @@ export const useChartDataFetch = ( | ||
| 42 | } | 42 | } |
| 43 | } | 43 | } |
| 44 | } | 44 | } |
| 45 | - | 45 | + |
| 46 | + // 单个组件请求 | ||
| 46 | const requestIntervalFn = () => { | 47 | const requestIntervalFn = () => { |
| 47 | const chartEditStore = useChartEditStore() | 48 | const chartEditStore = useChartEditStore() |
| 48 | if ((targetComponent.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) return | 49 | if ((targetComponent.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) return |
| @@ -54,6 +55,12 @@ export const useChartDataFetch = ( | @@ -54,6 +55,12 @@ export const useChartDataFetch = ( | ||
| 54 | requestInterval: globalRequestInterval | 55 | requestInterval: globalRequestInterval |
| 55 | } = toRefs(chartEditStore.getRequestGlobalConfig) | 56 | } = toRefs(chartEditStore.getRequestGlobalConfig) |
| 56 | 57 | ||
| 58 | + // 公共配置 | ||
| 59 | + const { | ||
| 60 | + pondRequestGlobalInterval, | ||
| 61 | + pondRequestGlobalIntervalUnit | ||
| 62 | + } = toRefs(targetComponent.request) | ||
| 63 | + | ||
| 57 | // 目标组件 | 64 | // 目标组件 |
| 58 | const { | 65 | const { |
| 59 | requestUrl, | 66 | requestUrl, |
| @@ -131,6 +138,17 @@ export const useChartDataFetch = ( | @@ -131,6 +138,17 @@ export const useChartDataFetch = ( | ||
| 131 | try { | 138 | try { |
| 132 | const filter = targetComponent.filter | 139 | const filter = targetComponent.filter |
| 133 | const {value} = useFilterFn(filter, res) | 140 | const {value} = useFilterFn(filter, res) |
| 141 | + //分组更新下面子组件 | ||
| 142 | + if(targetComponent.isGroup) { | ||
| 143 | + const parseHistoryInput = JSONParse(targetComponent.saveHistoryInput!) | ||
| 144 | + parseHistoryInput?.forEach((historyItem:Recordable) => { | ||
| 145 | + const findCurrentItem = targetComponent.groupList?.find((groupItem:CreateComponentType | CreateComponentGroupType) => groupItem.id === historyItem.id) | ||
| 146 | + if(findCurrentItem) { | ||
| 147 | + findCurrentItem.option.dataset = value[historyItem.inputValue] | ||
| 148 | + } | ||
| 149 | + }) | ||
| 150 | + } | ||
| 151 | + // | ||
| 134 | echartsUpdateHandle(value) | 152 | echartsUpdateHandle(value) |
| 135 | // 更新回调函数 | 153 | // 更新回调函数 |
| 136 | if (updateCallback) { | 154 | if (updateCallback) { |
| @@ -153,13 +171,12 @@ export const useChartDataFetch = ( | @@ -153,13 +171,12 @@ export const useChartDataFetch = ( | ||
| 153 | deep: true | 171 | deep: true |
| 154 | } | 172 | } |
| 155 | ) | 173 | ) |
| 156 | - | ||
| 157 | // 定时时间 | 174 | // 定时时间 |
| 158 | - const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value | 175 | + const time = targetInterval && targetInterval.value ? targetInterval.value : pondRequestGlobalInterval?.value?pondRequestGlobalInterval?.value: globalRequestInterval.value |
| 159 | // 单位 | 176 | // 单位 |
| 160 | - const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value | 177 | + const unit = targetInterval && targetInterval.value ? targetUnit.value :pondRequestGlobalIntervalUnit?.value?pondRequestGlobalIntervalUnit?.value: globalUnit.value |
| 161 | // 开启轮询 | 178 | // 开启轮询 |
| 162 | - if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) | 179 | + if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, (unit as unknown as any))) |
| 163 | 180 | ||
| 164 | 181 | ||
| 165 | } | 182 | } |
| @@ -176,11 +193,12 @@ export const useChartDataFetch = ( | @@ -176,11 +193,12 @@ export const useChartDataFetch = ( | ||
| 176 | /** | 193 | /** |
| 177 | * 支持分组也可以接受ws | 194 | * 支持分组也可以接受ws |
| 178 | * 如果是分组并且绑定了ws | 195 | * 如果是分组并且绑定了ws |
| 196 | + * 也支持http轮询 | ||
| 179 | */ | 197 | */ |
| 180 | chartEditStore.getComponentList?.forEach((item: CreateComponentType | CreateComponentGroupType) => { | 198 | chartEditStore.getComponentList?.forEach((item: CreateComponentType | CreateComponentGroupType) => { |
| 181 | if (item.isGroup) { | 199 | if (item.isGroup) { |
| 182 | if (item.request.requestUrl?.includes('ws')) { | 200 | if (item.request.requestUrl?.includes('ws')) { |
| 183 | - initial(item, useChartEditStore, updateCallback) | 201 | + initial(item, useChartEditStore, updateCallback) // ws |
| 184 | } | 202 | } |
| 185 | } | 203 | } |
| 186 | }) | 204 | }) |
| @@ -12,17 +12,18 @@ export const useFetchTargetData = () => { | @@ -12,17 +12,18 @@ export const useFetchTargetData = () => { | ||
| 12 | const fetchTargetData = async () => { | 12 | const fetchTargetData = async () => { |
| 13 | const { targetData } = useTargetData() | 13 | const { targetData } = useTargetData() |
| 14 | if (unref(targetData).request.requestDataType === RequestDataTypeEnum.STATIC) return | 14 | if (unref(targetData).request.requestDataType === RequestDataTypeEnum.STATIC) return |
| 15 | + if (!unref(targetData).request.requestUrl) return | ||
| 15 | loading.value = true | 16 | loading.value = true |
| 16 | try { | 17 | try { |
| 17 | - const isSocketType = (targetData.value.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET | ||
| 18 | - const res = isSocketType | ||
| 19 | - ? await sendMessage(unref(targetData) as CreateComponentType) | ||
| 20 | - : await customRequest(toRaw(targetData.value.request)) | ||
| 21 | - | ||
| 22 | - if (res) { | ||
| 23 | - return res | ||
| 24 | - } | ||
| 25 | - window['$message'].warning('没有拿到返回值,请检查接口!') | 18 | + const isSocketType = (targetData.value.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET |
| 19 | + const res = isSocketType | ||
| 20 | + ? await sendMessage(unref(targetData) as CreateComponentType) | ||
| 21 | + : await customRequest(toRaw(targetData.value.request)) | ||
| 22 | + | ||
| 23 | + if (res) { | ||
| 24 | + return res | ||
| 25 | + } | ||
| 26 | + window['$message'].warning('没有拿到返回值,请检查接口!') | ||
| 26 | } catch (error) { | 27 | } catch (error) { |
| 27 | loading.value = false | 28 | loading.value = false |
| 28 | console.error(error); | 29 | console.error(error); |
| @@ -9,6 +9,7 @@ const getAllConfigFile = async () => { | @@ -9,6 +9,7 @@ const getAllConfigFile = async () => { | ||
| 9 | 9 | ||
| 10 | const getChartConfigFile = async (path: string) => { | 10 | const getChartConfigFile = async (path: string) => { |
| 11 | const fileList = await getAllConfigFile() | 11 | const fileList = await getAllConfigFile() |
| 12 | + if (path.includes('group')) return // 分组则终止 | ||
| 12 | return fileList[path]() as any | 13 | return fileList[path]() as any |
| 13 | } | 14 | } |
| 14 | 15 | ||
| @@ -41,6 +42,7 @@ export const createComponent = async (configType: ConfigType) => { | @@ -41,6 +42,7 @@ export const createComponent = async (configType: ConfigType) => { | ||
| 41 | // | 42 | // |
| 42 | const hasExternalPrefix = matchExternalPrefixReg.test(chartKey) | 43 | const hasExternalPrefix = matchExternalPrefixReg.test(chartKey) |
| 43 | const filePath = `../components${hasExternalPrefix ? '/external' : ''}/${packageName}/${category}/${key}/config.ts` | 44 | const filePath = `../components${hasExternalPrefix ? '/external' : ''}/${packageName}/${category}/${key}/config.ts` |
| 45 | + if (filePath.includes('group')) return // 分组则终止 | ||
| 44 | const chart = await getChartConfigFile(filePath) | 46 | const chart = await getChartConfigFile(filePath) |
| 45 | return new chart.default() | 47 | return new chart.default() |
| 46 | } | 48 | } |
| @@ -230,8 +230,8 @@ export interface RequestConfigType extends RequestPublicConfigType { | @@ -230,8 +230,8 @@ export interface RequestConfigType extends RequestPublicConfigType { | ||
| 230 | // 请求头里的Token前缀 | 230 | // 请求头里的Token前缀 |
| 231 | requestTokenSuffix?: string | 231 | requestTokenSuffix?: string |
| 232 | pondRequestOriginUrl?: string | 232 | pondRequestOriginUrl?: string |
| 233 | - pondRequestInterval?: number | ||
| 234 | - pondRequestIntervalUnit?: string | 233 | + pondRequestGlobalInterval?: number |
| 234 | + pondRequestGlobalIntervalUnit?: string | ||
| 235 | pondRequestGlobalTokenSuffix?: string | 235 | pondRequestGlobalTokenSuffix?: string |
| 236 | pondRequestGlobalTokenKey?: string | 236 | pondRequestGlobalTokenKey?: string |
| 237 | pondRequestGlobalCascaderOption?: Recordable | 237 | pondRequestGlobalCascaderOption?: Recordable |
| @@ -158,7 +158,7 @@ const { | @@ -158,7 +158,7 @@ const { | ||
| 158 | } = toRefs((props.targetData as RequestDataPondItemType).dataPondRequestConfig) | 158 | } = toRefs((props.targetData as RequestDataPondItemType).dataPondRequestConfig) |
| 159 | 159 | ||
| 160 | const tabs = [RequestParamsTypeEnum.HEADER] | 160 | const tabs = [RequestParamsTypeEnum.HEADER] |
| 161 | -const requestContentTypeObj = { | 161 | +const requestContentTypeObj: Recordable = { |
| 162 | [RequestContentTypeEnum.DEFAULT]: '普通请求', | 162 | [RequestContentTypeEnum.DEFAULT]: '普通请求', |
| 163 | [RequestContentTypeEnum.SQL]: 'SQL 请求' | 163 | [RequestContentTypeEnum.SQL]: 'SQL 请求' |
| 164 | } | 164 | } |
| @@ -47,7 +47,7 @@ const emit = defineEmits(['update:modelShow', 'sendHandle']) | @@ -47,7 +47,7 @@ const emit = defineEmits(['update:modelShow', 'sendHandle']) | ||
| 47 | const { chartConfig } = toRefs(props.targetData as CreateComponentType) | 47 | const { chartConfig } = toRefs(props.targetData as CreateComponentType) |
| 48 | const { requestContentType } = toRefs((props.targetData as CreateComponentType).request) | 48 | const { requestContentType } = toRefs((props.targetData as CreateComponentType).request) |
| 49 | const modelShowRef = ref(false) | 49 | const modelShowRef = ref(false) |
| 50 | -const requestContentTypeObj = { | 50 | +const requestContentTypeObj: Recordable = { |
| 51 | [RequestContentTypeEnum.DEFAULT]: '普通请求', | 51 | [RequestContentTypeEnum.DEFAULT]: '普通请求', |
| 52 | [RequestContentTypeEnum.SQL]: 'SQL 请求' | 52 | [RequestContentTypeEnum.SQL]: 'SQL 请求' |
| 53 | } | 53 | } |
| @@ -58,9 +58,21 @@ | @@ -58,9 +58,21 @@ | ||
| 58 | <NSpace :size="15" vertical> | 58 | <NSpace :size="15" vertical> |
| 59 | <div class="editor-data-show"> | 59 | <div class="editor-data-show"> |
| 60 | <NSpace> | 60 | <NSpace> |
| 61 | - <NText depth="3">接口返回数据(res):</NText> | 61 | + <NText depth="3">原始数据:</NText> |
| 62 | <n-collapse :default-expanded-names="['1']"> | 62 | <n-collapse :default-expanded-names="['1']"> |
| 63 | - <n-collapse-item title="res" name="1"> | 63 | + <n-collapse-item name="1"> |
| 64 | + <NScrollbar style="max-height: 300px;"> | ||
| 65 | + <NCode :code="toString(cacheConfig) || '暂无'" language="json" :word-wrap="true"></NCode> | ||
| 66 | + </NScrollbar> | ||
| 67 | + </n-collapse-item> | ||
| 68 | + </n-collapse> | ||
| 69 | + </NSpace> | ||
| 70 | + </div> | ||
| 71 | + <div class="editor-data-show"> | ||
| 72 | + <NSpace> | ||
| 73 | + <NText depth="3">接口返回数据(res):</NText> | ||
| 74 | + <n-collapse> | ||
| 75 | + <n-collapse-item name="2"> | ||
| 64 | <NScrollbar style="max-height: 300px;"> | 76 | <NScrollbar style="max-height: 300px;"> |
| 65 | <NCode :code="toString(isSocketRequest ? targetData.wsOriginalMessage : sourceData) || '暂无'" language="json" :word-wrap="true"></NCode> | 77 | <NCode :code="toString(isSocketRequest ? targetData.wsOriginalMessage : sourceData) || '暂无'" language="json" :word-wrap="true"></NCode> |
| 66 | </NScrollbar> | 78 | </NScrollbar> |
| @@ -72,7 +84,7 @@ | @@ -72,7 +84,7 @@ | ||
| 72 | <NSpace> | 84 | <NSpace> |
| 73 | <NText depth="3">过滤器结果:</NText> | 85 | <NText depth="3">过滤器结果:</NText> |
| 74 | <n-collapse> | 86 | <n-collapse> |
| 75 | - <n-collapse-item title="结果" name="2"> | 87 | + <n-collapse-item name="3"> |
| 76 | <NCode :code="filterRes || '暂无'" language="json" :word-wrap="true"></NCode> | 88 | <NCode :code="filterRes || '暂无'" language="json" :word-wrap="true"></NCode> |
| 77 | </n-collapse-item> | 89 | </n-collapse-item> |
| 78 | </n-collapse> | 90 | </n-collapse> |
| @@ -105,7 +117,7 @@ | @@ -105,7 +117,7 @@ | ||
| 105 | </template> | 117 | </template> |
| 106 | 118 | ||
| 107 | <script lang="ts" setup> | 119 | <script lang="ts" setup> |
| 108 | -import { ref, computed, watch, unref } from 'vue' | 120 | +import { ref, computed, watch, unref, onMounted } from 'vue' |
| 109 | import { MonacoEditor } from '@/components/Pages/MonacoEditor' | 121 | import { MonacoEditor } from '@/components/Pages/MonacoEditor' |
| 110 | import { icon } from '@/plugins' | 122 | import { icon } from '@/plugins' |
| 111 | import { goDialog, toString } from '@/utils' | 123 | import { goDialog, toString } from '@/utils' |
| @@ -114,6 +126,7 @@ import { NButton, NCard, NCode, NDivider, NIcon, NModal, NScrollbar, NSpace, NTa | @@ -114,6 +126,7 @@ import { NButton, NCard, NCode, NDivider, NIcon, NModal, NScrollbar, NSpace, NTa | ||
| 114 | import { useFilterFn } from '@/hooks/external/useFilterFn' | 126 | import { useFilterFn } from '@/hooks/external/useFilterFn' |
| 115 | import { useFetchTargetData } from '@/hooks/external/useFetchTargetData' | 127 | import { useFetchTargetData } from '@/hooks/external/useFetchTargetData' |
| 116 | import { RequestContentTypeEnum } from '@/enums/external/httpEnum' | 128 | import { RequestContentTypeEnum } from '@/enums/external/httpEnum' |
| 129 | +import { createComponent } from '@/packages/external/override' | ||
| 117 | 130 | ||
| 118 | const { DocumentTextIcon } = icon.ionicons5 | 131 | const { DocumentTextIcon } = icon.ionicons5 |
| 119 | const { FilterIcon, FilterEditIcon } = icon.carbon | 132 | const { FilterIcon, FilterEditIcon } = icon.carbon |
| @@ -208,6 +221,19 @@ watch( | @@ -208,6 +221,19 @@ watch( | ||
| 208 | } | 221 | } |
| 209 | } | 222 | } |
| 210 | ) | 223 | ) |
| 224 | + | ||
| 225 | +const cacheConfig = ref() | ||
| 226 | + | ||
| 227 | +const fetchComponentConfig = async () => { | ||
| 228 | + const config = await createComponent(targetData.value.chartConfig) | ||
| 229 | + return config | ||
| 230 | +} | ||
| 231 | + | ||
| 232 | + | ||
| 233 | +onMounted(async ()=> { | ||
| 234 | + const config = await fetchComponentConfig() | ||
| 235 | + cacheConfig.value = config?.option?.dataset | ||
| 236 | +}) | ||
| 211 | </script> | 237 | </script> |
| 212 | 238 | ||
| 213 | <style lang="scss" scoped> | 239 | <style lang="scss" scoped> |
| @@ -12,6 +12,9 @@ import { RequestModal } from '../RequestModal' | @@ -12,6 +12,9 @@ import { RequestModal } from '../RequestModal' | ||
| 12 | import { useFetchTargetData } from '@/hooks/external/useFetchTargetData' | 12 | import { useFetchTargetData } from '@/hooks/external/useFetchTargetData' |
| 13 | import { useFilterFn } from '@/hooks/external/useFilterFn' | 13 | import { useFilterFn } from '@/hooks/external/useFilterFn' |
| 14 | import { RequestDataTypeEnum } from '@/enums/external/httpEnum' | 14 | import { RequestDataTypeEnum } from '@/enums/external/httpEnum' |
| 15 | +import { JSONParse } from '@/utils/external/utils' | ||
| 16 | +import { CreateComponentGroupType, CreateComponentType } from '@/packages/index.d' | ||
| 17 | +import { isArray } from '@/utils/external/is' | ||
| 15 | 18 | ||
| 16 | const { HelpOutlineIcon, FlashIcon } = icon.ionicons5 | 19 | const { HelpOutlineIcon, FlashIcon } = icon.ionicons5 |
| 17 | const { targetData } = useTargetData() | 20 | const { targetData } = useTargetData() |
| @@ -54,6 +57,19 @@ const sendHandle = async () => { | @@ -54,6 +57,19 @@ const sendHandle = async () => { | ||
| 54 | const res = await fetchTargetData() | 57 | const res = await fetchTargetData() |
| 55 | if (res) { | 58 | if (res) { |
| 56 | const { value } = useFilterFn(targetData.value.filter, res) | 59 | const { value } = useFilterFn(targetData.value.filter, res) |
| 60 | + //分组更新下面子组件 | ||
| 61 | + if(targetData.value.isGroup) { | ||
| 62 | + if (isArray(targetData.value.saveHistoryInput!)) { | ||
| 63 | + const parseHistoryInput = JSONParse(targetData.value.saveHistoryInput!) | ||
| 64 | + parseHistoryInput?.forEach((historyItem:Recordable) => { | ||
| 65 | + const findCurrentItem = targetData.value.groupList?.find((groupItem:CreateComponentType | CreateComponentGroupType) => groupItem.id === historyItem.id) | ||
| 66 | + if(findCurrentItem) { | ||
| 67 | + findCurrentItem.option.dataset = value[historyItem.inputValue] | ||
| 68 | + } | ||
| 69 | + }) | ||
| 70 | + } | ||
| 71 | + } | ||
| 72 | + // | ||
| 57 | targetData.value.option.dataset = value | 73 | targetData.value.option.dataset = value |
| 58 | showMatching.value = true | 74 | showMatching.value = true |
| 59 | return | 75 | return |
| @@ -86,7 +102,7 @@ watchEffect(() => { | @@ -86,7 +102,7 @@ watchEffect(() => { | ||
| 86 | //ft | 102 | //ft |
| 87 | if (lastFilter !== filter && firstFocus) { | 103 | if (lastFilter !== filter && firstFocus) { |
| 88 | lastFilter = filter | 104 | lastFilter = filter |
| 89 | - sendHandle() | 105 | + // sendHandle() |
| 90 | } | 106 | } |
| 91 | firstFocus++ | 107 | firstFocus++ |
| 92 | }) | 108 | }) |
| @@ -145,6 +145,10 @@ onMounted(()=>{ | @@ -145,6 +145,10 @@ onMounted(()=>{ | ||
| 145 | targetData.value.request.pondRequestOriginUrl = findCurrentPond()?.dataPondRequestConfig?.pondRequestOriginUrl | 145 | targetData.value.request.pondRequestOriginUrl = findCurrentPond()?.dataPondRequestConfig?.pondRequestOriginUrl |
| 146 | targetData.value.request.pondRequestGlobalTokenKey = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalTokenKey | 146 | targetData.value.request.pondRequestGlobalTokenKey = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalTokenKey |
| 147 | targetData.value.request.pondRequestGlobalTokenSuffix = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalTokenSuffix | 147 | targetData.value.request.pondRequestGlobalTokenSuffix = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalTokenSuffix |
| 148 | + targetData.value.request.pondRequestInterval = findCurrentPond()?.dataPondRequestConfig?.pondRequestInterval | ||
| 149 | + targetData.value.request.pondRequestIntervalUnit = findCurrentPond()?.dataPondRequestConfig?.pondRequestIntervalUnit | ||
| 150 | + targetData.value.request.pondRequestGlobalInterval = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalInterval | ||
| 151 | + targetData.value.request.pondRequestGlobalIntervalUnit = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalIntervalUnit | ||
| 148 | handleExecuteRequest() | 152 | handleExecuteRequest() |
| 149 | }) | 153 | }) |
| 150 | </script> | 154 | </script> |
| @@ -38,7 +38,7 @@ const pondRequestOriginUrlRef= ref('') | @@ -38,7 +38,7 @@ const pondRequestOriginUrlRef= ref('') | ||
| 38 | 38 | ||
| 39 | const pondRequestIntervalRef = ref() | 39 | const pondRequestIntervalRef = ref() |
| 40 | 40 | ||
| 41 | -const pondRequestIntervalUnitRef = ref('') | 41 | +const pondRequestIntervalUnitRef = ref(RequestHttpIntervalEnum.SECOND) |
| 42 | 42 | ||
| 43 | const pondRequestGlobalTokenSuffixRef = ref('') | 43 | const pondRequestGlobalTokenSuffixRef = ref('') |
| 44 | 44 | ||
| @@ -62,8 +62,8 @@ const handleIsTokenSwitch = (value: boolean) => { | @@ -62,8 +62,8 @@ const handleIsTokenSwitch = (value: boolean) => { | ||
| 62 | const getConfigurationData = (): Partial<RequestConfigType> => { | 62 | const getConfigurationData = (): Partial<RequestConfigType> => { |
| 63 | return { | 63 | return { |
| 64 | pondRequestOriginUrl: unref(pondRequestOriginUrlRef), | 64 | pondRequestOriginUrl: unref(pondRequestOriginUrlRef), |
| 65 | - pondRequestInterval: unref(pondRequestIntervalRef), | ||
| 66 | - pondRequestIntervalUnit: unref(pondRequestIntervalUnitRef), | 65 | + pondRequestGlobalInterval: unref(pondRequestIntervalRef), |
| 66 | + pondRequestGlobalIntervalUnit: unref(pondRequestIntervalUnitRef), | ||
| 67 | pondRequestGlobalTokenSuffix: unref(pondRequestGlobalTokenSuffixRef), | 67 | pondRequestGlobalTokenSuffix: unref(pondRequestGlobalTokenSuffixRef), |
| 68 | pondRequestGlobalTokenKey: unref(pondRequestGlobalTokenKeyRef), | 68 | pondRequestGlobalTokenKey: unref(pondRequestGlobalTokenKeyRef), |
| 69 | pondRequestGlobalIsToken: unref(pondRequestGlobalIsTokenRef), | 69 | pondRequestGlobalIsToken: unref(pondRequestGlobalIsTokenRef), |
| @@ -71,10 +71,10 @@ const getConfigurationData = (): Partial<RequestConfigType> => { | @@ -71,10 +71,10 @@ const getConfigurationData = (): Partial<RequestConfigType> => { | ||
| 71 | } | 71 | } |
| 72 | 72 | ||
| 73 | const setConfigurationData = (request: Partial<RequestConfigType>) => { | 73 | const setConfigurationData = (request: Partial<RequestConfigType>) => { |
| 74 | - const { pondRequestOriginUrl, pondRequestInterval, pondRequestIntervalUnit, pondRequestGlobalTokenSuffix, pondRequestGlobalTokenKey, pondRequestGlobalIsToken } = request | 74 | + const { pondRequestOriginUrl, pondRequestGlobalInterval, pondRequestGlobalIntervalUnit, pondRequestGlobalTokenSuffix, pondRequestGlobalTokenKey, pondRequestGlobalIsToken } = request |
| 75 | pondRequestOriginUrlRef.value = pondRequestOriginUrl! | 75 | pondRequestOriginUrlRef.value = pondRequestOriginUrl! |
| 76 | - pondRequestIntervalRef.value = pondRequestInterval | ||
| 77 | - pondRequestIntervalUnitRef.value = pondRequestIntervalUnit! | 76 | + pondRequestIntervalRef.value = pondRequestGlobalInterval |
| 77 | + pondRequestIntervalUnitRef.value = pondRequestGlobalIntervalUnit! as RequestHttpIntervalEnum | ||
| 78 | pondRequestGlobalTokenSuffixRef.value = pondRequestGlobalTokenSuffix! | 78 | pondRequestGlobalTokenSuffixRef.value = pondRequestGlobalTokenSuffix! |
| 79 | pondRequestGlobalTokenKeyRef.value = pondRequestGlobalTokenKey! | 79 | pondRequestGlobalTokenKeyRef.value = pondRequestGlobalTokenKey! |
| 80 | pondRequestGlobalIsTokenRef.value = pondRequestGlobalIsToken! | 80 | pondRequestGlobalIsTokenRef.value = pondRequestGlobalIsToken! |
| @@ -41,7 +41,7 @@ const handleSyncRequestParamsBodyType = (value: RequestBodyEnum) => { | @@ -41,7 +41,7 @@ const handleSyncRequestParamsBodyType = (value: RequestBodyEnum) => { | ||
| 41 | v-model:value="value.Body[RequestBodyEnum.X_WWW_FORM_URLENCODED]" /> | 41 | v-model:value="value.Body[RequestBodyEnum.X_WWW_FORM_URLENCODED]" /> |
| 42 | 42 | ||
| 43 | <MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.JSON" | 43 | <MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.JSON" |
| 44 | - v-model:modelValue="value.Body[RequestBodyEnum.JSON]" width="600px" height="200px" language="json" /> | 44 | + v-model:modelValue="value.Body[RequestBodyEnum.JSON]" width="600px" height="200px" language="json" :config="true" /> |
| 45 | 45 | ||
| 46 | <MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.XML" | 46 | <MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.XML" |
| 47 | v-model:modelValue="value.Body[RequestBodyEnum.XML]" width="600px" height="200px" language="xml" /> | 47 | v-model:modelValue="value.Body[RequestBodyEnum.XML]" width="600px" height="200px" language="xml" /> |
| @@ -14,6 +14,8 @@ import { createRequestModalContext } from './useRequestModalContext' | @@ -14,6 +14,8 @@ import { createRequestModalContext } from './useRequestModalContext' | ||
| 14 | import { useTargetData } from '../../../../hooks/useTargetData.hook' | 14 | import { useTargetData } from '../../../../hooks/useTargetData.hook' |
| 15 | import { useFetchTargetData } from '@/hooks/external/useFetchTargetData' | 15 | import { useFetchTargetData } from '@/hooks/external/useFetchTargetData' |
| 16 | import { useFilterFn } from '@/hooks/external/useFilterFn' | 16 | import { useFilterFn } from '@/hooks/external/useFilterFn' |
| 17 | +import { JSONParse } from '@/utils/external/utils' | ||
| 18 | +import { isArray } from '@/utils/external/is' | ||
| 17 | 19 | ||
| 18 | const requestDataType = ref<RequestDataTypeEnum>(RequestDataTypeEnum.AJAX) | 20 | const requestDataType = ref<RequestDataTypeEnum>(RequestDataTypeEnum.AJAX) |
| 19 | 21 | ||
| @@ -79,6 +81,19 @@ const sendHandle = async () => { | @@ -79,6 +81,19 @@ const sendHandle = async () => { | ||
| 79 | const res = await fetchTargetData() | 81 | const res = await fetchTargetData() |
| 80 | if (res) { | 82 | if (res) { |
| 81 | const { value } = useFilterFn(targetData.value.filter, res) | 83 | const { value } = useFilterFn(targetData.value.filter, res) |
| 84 | + //分组更新下面子组件 | ||
| 85 | + if(targetData.value.isGroup) { | ||
| 86 | + if (isArray(targetData.value.saveHistoryInput!)) { | ||
| 87 | + const parseHistoryInput = JSONParse(targetData.value.saveHistoryInput!) | ||
| 88 | + parseHistoryInput?.forEach((historyItem:Recordable) => { | ||
| 89 | + const findCurrentItem = targetData.value.groupList?.find((groupItem:CreateComponentType | CreateComponentGroupType) => groupItem.id === historyItem.id) | ||
| 90 | + if(findCurrentItem) { | ||
| 91 | + findCurrentItem.option.dataset = value[historyItem.inputValue] | ||
| 92 | + } | ||
| 93 | + }) | ||
| 94 | + } | ||
| 95 | + } | ||
| 96 | + // | ||
| 82 | targetData.value.option.dataset = value | 97 | targetData.value.option.dataset = value |
| 83 | return | 98 | return |
| 84 | } | 99 | } |
| @@ -98,6 +113,8 @@ const handleSaveAction = async () => { | @@ -98,6 +113,8 @@ const handleSaveAction = async () => { | ||
| 98 | value.requestDataType = targetData.value.request.requestDataType | 113 | value.requestDataType = targetData.value.request.requestDataType |
| 99 | value.publicInterfaceSelectId = targetData.value.request.publicInterfaceSelectId | 114 | value.publicInterfaceSelectId = targetData.value.request.publicInterfaceSelectId |
| 100 | value.pondRequestGlobalIsToken = targetData.value.request.pondRequestGlobalIsToken | 115 | value.pondRequestGlobalIsToken = targetData.value.request.pondRequestGlobalIsToken |
| 116 | + value.pondRequestGlobalIntervalUnit = targetData.value.request.pondRequestGlobalIntervalUnit | ||
| 117 | + value.pondRequestGlobalInterval = targetData.value.request.pondRequestGlobalInterval | ||
| 101 | if (unref(selectTarget)) { | 118 | if (unref(selectTarget)) { |
| 102 | chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), { | 119 | chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), { |
| 103 | ...unref(selectTarget)!, | 120 | ...unref(selectTarget)!, |
| @@ -44,6 +44,7 @@ import { CreateComponentType, CreateComponentGroupType } from '@/packages/index. | @@ -44,6 +44,7 @@ import { CreateComponentType, CreateComponentGroupType } from '@/packages/index. | ||
| 44 | import { datasetType, saveHistoryInputValueListType, historyInputValue } from './index.d' | 44 | import { datasetType, saveHistoryInputValueListType, historyInputValue } from './index.d' |
| 45 | import { uniqBy } from 'lodash' | 45 | import { uniqBy } from 'lodash' |
| 46 | import { SelectOption } from 'naive-ui' | 46 | import { SelectOption } from 'naive-ui' |
| 47 | +import { isArray } from '@/utils/external/is' | ||
| 47 | 48 | ||
| 48 | const { targetData } = useTargetData() | 49 | const { targetData } = useTargetData() |
| 49 | 50 | ||
| @@ -107,8 +108,8 @@ watch( | @@ -107,8 +108,8 @@ watch( | ||
| 107 | (newValue: CreateComponentType | CreateComponentGroupType) => { | 108 | (newValue: CreateComponentType | CreateComponentGroupType) => { |
| 108 | try { | 109 | try { |
| 109 | const uniqHistoryInputValueList = uniqBy(saveHistoryInputValueList.value, 'id') | 110 | const uniqHistoryInputValueList = uniqBy(saveHistoryInputValueList.value, 'id') |
| 110 | - if (uniqHistoryInputValueList) { | ||
| 111 | - newValue.saveHistoryInput = JSON.stringify(uniqHistoryInputValueList) | 111 | + if (isArray(uniqHistoryInputValueList)) { |
| 112 | + targetData.value.saveHistoryInput = JSON.stringify(uniqHistoryInputValueList) | ||
| 112 | window.localStorage.setItem('CACHE_HISTORY_INPUT_VALUE', JSON.stringify(uniqHistoryInputValueList)) | 113 | window.localStorage.setItem('CACHE_HISTORY_INPUT_VALUE', JSON.stringify(uniqHistoryInputValueList)) |
| 113 | } | 114 | } |
| 114 | newValue?.groupList?.forEach((item: CreateComponentType) => { | 115 | newValue?.groupList?.forEach((item: CreateComponentType) => { |
| @@ -37,11 +37,12 @@ | @@ -37,11 +37,12 @@ | ||
| 37 | </template> | 37 | </template> |
| 38 | 38 | ||
| 39 | <script setup lang="ts"> | 39 | <script setup lang="ts"> |
| 40 | -import { PropType } from 'vue' | 40 | +import { PropType, onMounted } from 'vue' |
| 41 | import { CreateComponentGroupType } from '@/packages/index.d' | 41 | import { CreateComponentGroupType } from '@/packages/index.d' |
| 42 | import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils' | 42 | import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils' |
| 43 | import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils' | 43 | import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils' |
| 44 | -import { useLifeHandler } from '@/hooks' | 44 | +import { useChartDataFetch, useLifeHandler } from '@/hooks' |
| 45 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | ||
| 45 | 46 | ||
| 46 | const props = defineProps({ | 47 | const props = defineProps({ |
| 47 | groupData: { | 48 | groupData: { |
| @@ -61,6 +62,10 @@ const props = defineProps({ | @@ -61,6 +62,10 @@ const props = defineProps({ | ||
| 61 | required: true | 62 | required: true |
| 62 | } | 63 | } |
| 63 | }) | 64 | }) |
| 65 | + | ||
| 66 | +onMounted(()=>{ | ||
| 67 | + useChartDataFetch(props.groupData, useChartEditStore) | ||
| 68 | +}) | ||
| 64 | </script> | 69 | </script> |
| 65 | 70 | ||
| 66 | <style lang="scss" scoped> | 71 | <style lang="scss" scoped> |