Commit c835e78b915f6eb590bd5af483e16f638e59cd1d
Merge branch 'revert-76a4385f' into 'main_dev'
perf(src/views): 优化调用第三方api接口 See merge request yunteng/thingskit-view!263
Showing
24 changed files
with
140 additions
and
1674 deletions
| @@ -143,10 +143,8 @@ export const customRequest = async (request: RequestConfigType) => { | @@ -143,10 +143,8 @@ export const customRequest = async (request: RequestConfigType) => { | ||
| 143 | requestParamsBodyType, | 143 | requestParamsBodyType, |
| 144 | requestOriginUrl, | 144 | requestOriginUrl, |
| 145 | requestVerificationToken, | 145 | requestVerificationToken, |
| 146 | - pondRequestOriginUrl, | ||
| 147 | - pondRequestGlobalTokenKey, | ||
| 148 | - pondRequestGlobalTokenSuffix, | ||
| 149 | - | 146 | + requestTokenKey, |
| 147 | + requestTokenSuffix | ||
| 150 | } = request as ExtraRequestConfigType | 148 | } = request as ExtraRequestConfigType |
| 151 | let { requestUrl } = request as ExtraRequestConfigType | 149 | let { requestUrl } = request as ExtraRequestConfigType |
| 152 | const { Header, Body } = requestParams | 150 | const { Header, Body } = requestParams |
| @@ -171,7 +169,7 @@ export const customRequest = async (request: RequestConfigType) => { | @@ -171,7 +169,7 @@ export const customRequest = async (request: RequestConfigType) => { | ||
| 171 | { | 169 | { |
| 172 | url: | 170 | url: |
| 173 | requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl : `${requestUrl}?${objConvertQuery(Params)}`, | 171 | requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl : `${requestUrl}?${objConvertQuery(Params)}`, |
| 174 | - baseURL: requestVerificationToken ? pondRequestOriginUrl : getOriginUrl(requestOriginUrl!), | 172 | + baseURL: requestVerificationToken ? '' : getOriginUrl(requestOriginUrl!), // 如果是第三方接口,则无需添加baseURL |
| 175 | method: requestHttpType, | 173 | method: requestHttpType, |
| 176 | params: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? Params : null, | 174 | params: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? Params : null, |
| 177 | data: body, | 175 | data: body, |
| @@ -182,8 +180,8 @@ export const customRequest = async (request: RequestConfigType) => { | @@ -182,8 +180,8 @@ export const customRequest = async (request: RequestConfigType) => { | ||
| 182 | apiUrl: '', | 180 | apiUrl: '', |
| 183 | withShareToken: isShareMode(), | 181 | withShareToken: isShareMode(), |
| 184 | withThirdTokenString: requestVerificationToken, | 182 | withThirdTokenString: requestVerificationToken, |
| 185 | - withThirdTokenKey: pondRequestGlobalTokenKey, | ||
| 186 | - withThirdTokenPrefix: pondRequestGlobalTokenSuffix | 183 | + withThirdTokenKey: requestTokenKey, |
| 184 | + withThirdTokenPrefix: requestTokenSuffix | ||
| 187 | } | 185 | } |
| 188 | ) | 186 | ) |
| 189 | //ft | 187 | //ft |
| 1 | import {ref, toRefs, toRaw, watch} from 'vue' | 1 | import {ref, toRefs, toRaw, watch} from 'vue' |
| 2 | import type VChart from 'vue-echarts' | 2 | import type VChart from 'vue-echarts' |
| 3 | +import {useChartDataPondFetch} from '@/hooks/' | ||
| 3 | import {CreateComponentType, ChartFrameEnum, CreateComponentGroupType} from '@/packages/index.d' | 4 | import {CreateComponentType, ChartFrameEnum, CreateComponentGroupType} from '@/packages/index.d' |
| 4 | import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore' | 5 | import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore' |
| 5 | import {isPreview, intervalUnitHandle} from '@/utils' | 6 | import {isPreview, intervalUnitHandle} from '@/utils' |
| 6 | import {setOption} from '@/packages/public/chart' | 7 | import {setOption} from '@/packages/public/chart' |
| 7 | import {useChartDataSocket} from './useChartDataSocket' | 8 | import {useChartDataSocket} from './useChartDataSocket' |
| 8 | -import {customRequest, customThirdInterfaceRequest, thirdInterfaceRequest} from '@/api/external/customRequest' | 9 | +import {customRequest} from '@/api/external/customRequest' |
| 9 | import {useFilterFn} from './useFilterFn' | 10 | import {useFilterFn} from './useFilterFn' |
| 10 | import {RequestContentTypeEnum} from '@/enums/external/httpEnum' | 11 | import {RequestContentTypeEnum} from '@/enums/external/httpEnum' |
| 11 | import dayjs from 'dayjs' | 12 | import dayjs from 'dayjs' |
| 12 | -import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d' | ||
| 13 | -import { convertToCascadingData, findItemByLabel } from '@/utils/external/utils' | ||
| 14 | -import { CascaderOption } from 'naive-ui' | ||
| 15 | 13 | ||
| 16 | 14 | ||
| 17 | // 获取类型 | 15 | // 获取类型 |
| @@ -94,38 +92,6 @@ export const useChartDataFetch = ( | @@ -94,38 +92,6 @@ export const useChartDataFetch = ( | ||
| 94 | (toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTs as unknown as number | 92 | (toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTs as unknown as number |
| 95 | (toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTs as unknown as number | 93 | (toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTs as unknown as number |
| 96 | } | 94 | } |
| 97 | - //处理过期 | ||
| 98 | - const findCurrentPond = () => { | ||
| 99 | - return chartEditStore.getRequestGlobalConfig.requestDataPond.find((pondItem: RequestDataPondItemType) => | ||
| 100 | - pondItem.dataPondId === targetComponent?.request?.requestDataPondId && targetComponent.request.thirdTokenIsExp) | ||
| 101 | - } | ||
| 102 | - const handleExecuteRequest = async () => { | ||
| 103 | - try { | ||
| 104 | - if(findCurrentPond()?.dataPondRequestConfig?.pondRequestOriginUrl){ | ||
| 105 | - const originUrlString = findCurrentPond()?.dataPondRequestConfig?.pondRequestOriginUrl | ||
| 106 | - const requestUrlString = findCurrentPond()?.dataPondRequestConfig?.pondRequestUrl | ||
| 107 | - const body = findCurrentPond()?.dataPondRequestConfig?.pondRequestParams!['Body']['json'] | ||
| 108 | - const request = { | ||
| 109 | - requestOriginUrl: `${originUrlString}${requestUrlString}`, | ||
| 110 | - body | ||
| 111 | - } | ||
| 112 | - const res = await customThirdInterfaceRequest(request as unknown as thirdInterfaceRequest) | ||
| 113 | - const resOptions = convertToCascadingData(res) as unknown as CascaderOption[] | ||
| 114 | - const findLabel = findItemByLabel(resOptions, targetComponent.request.thirdSelectCascaderLabel as string) | ||
| 115 | - if(findLabel) { | ||
| 116 | - targetComponent.request.requestVerificationToken = findLabel?.value | ||
| 117 | - } | ||
| 118 | - } | ||
| 119 | - } catch (e) { | ||
| 120 | - console.error(e) | ||
| 121 | - } | ||
| 122 | - } | ||
| 123 | - // 定时时间 | ||
| 124 | - const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value | ||
| 125 | - // 单位 | ||
| 126 | - const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value | ||
| 127 | - setInterval(handleExecuteRequest, intervalUnitHandle(time, unit)) | ||
| 128 | - // | ||
| 129 | const res = await customRequest(toRaw(targetComponent.request)) | 95 | const res = await customRequest(toRaw(targetComponent.request)) |
| 130 | if (res) { | 96 | if (res) { |
| 131 | try { | 97 | try { |
| @@ -160,8 +126,6 @@ export const useChartDataFetch = ( | @@ -160,8 +126,6 @@ export const useChartDataFetch = ( | ||
| 160 | const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value | 126 | const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value |
| 161 | // 开启轮询 | 127 | // 开启轮询 |
| 162 | if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) | 128 | if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) |
| 163 | - | ||
| 164 | - | ||
| 165 | } | 129 | } |
| 166 | // eslint-disable-next-line no-empty | 130 | // eslint-disable-next-line no-empty |
| 167 | } catch (error) { | 131 | } catch (error) { |
| @@ -41,29 +41,7 @@ export const requestConfig: RequestConfigType = { | @@ -41,29 +41,7 @@ export const requestConfig: RequestConfigType = { | ||
| 41 | }, | 41 | }, |
| 42 | Header: {}, | 42 | Header: {}, |
| 43 | Params: {} | 43 | Params: {} |
| 44 | - }, | ||
| 45 | - pondRequestOriginUrl: '', | ||
| 46 | - pondRequestInterval: 0, | ||
| 47 | - pondRequestIntervalUnit: '', | ||
| 48 | - pondRequestGlobalTokenSuffix: '', | ||
| 49 | - pondRequestGlobalTokenKey: '', | ||
| 50 | - pondRequestHttpType: RequestHttpEnum.GET, | ||
| 51 | - pondRequestContentType: RequestContentTypeEnum.DEFAULT, | ||
| 52 | - pondRequestUrl:'', | ||
| 53 | - pondRequestSQLContent: { | ||
| 54 | - sql: '' | ||
| 55 | - }, | ||
| 56 | - pondRequestParamsBodyType: RequestBodyEnum.NONE, | ||
| 57 | - pondRequestParams: { | ||
| 58 | - "Body": { | ||
| 59 | - "form-data": {}, | ||
| 60 | - "x-www-form-urlencoded": {}, | ||
| 61 | - "json": "", | ||
| 62 | - "xml": "" | ||
| 63 | - }, | ||
| 64 | - "Header": {}, | ||
| 65 | - "Params": {} | ||
| 66 | - } | 44 | + } |
| 67 | } | 45 | } |
| 68 | 46 | ||
| 69 | // 单实例类 | 47 | // 单实例类 |
| @@ -196,10 +196,6 @@ export interface RequestGlobalConfigType extends RequestPublicConfigType { | @@ -196,10 +196,6 @@ export interface RequestGlobalConfigType extends RequestPublicConfigType { | ||
| 196 | requestTokenKey?: string | 196 | requestTokenKey?: string |
| 197 | // 请求头里的Token前缀 | 197 | // 请求头里的Token前缀 |
| 198 | requestTokenSuffix?: string, | 198 | requestTokenSuffix?: string, |
| 199 | - // 全局配置Token前缀 | ||
| 200 | - requestGlobalTokenSuffix?: string, | ||
| 201 | - // 全局配置Token键 | ||
| 202 | - requestGlobalTokenKey?: string, | ||
| 203 | } | 199 | } |
| 204 | 200 | ||
| 205 | // 单个图表请求配置 | 201 | // 单个图表请求配置 |
| @@ -222,34 +218,12 @@ export interface RequestConfigType extends RequestPublicConfigType { | @@ -222,34 +218,12 @@ export interface RequestConfigType extends RequestPublicConfigType { | ||
| 222 | requestSQLContent: { | 218 | requestSQLContent: { |
| 223 | sql: string | 219 | sql: string |
| 224 | } | 220 | } |
| 225 | - | ||
| 226 | // Token | 221 | // Token |
| 227 | requestVerificationToken?: string | 222 | requestVerificationToken?: string |
| 228 | // 请求头里的Token键 | 223 | // 请求头里的Token键 |
| 229 | requestTokenKey?: string | 224 | requestTokenKey?: string |
| 230 | // 请求头里的Token前缀 | 225 | // 请求头里的Token前缀 |
| 231 | requestTokenSuffix?: string | 226 | requestTokenSuffix?: string |
| 232 | - pondRequestOriginUrl?: string | ||
| 233 | - pondRequestInterval?: number | ||
| 234 | - pondRequestIntervalUnit?: string | ||
| 235 | - pondRequestGlobalTokenSuffix?: string | ||
| 236 | - pondRequestGlobalTokenKey?: string | ||
| 237 | - pondRequestGlobalCascaderOption?: Recordable | ||
| 238 | - pondRequestGlobalCascaderKey?: string | ||
| 239 | - pondRequestHttpType?: string | ||
| 240 | - pondRequestInterval?: number | ||
| 241 | - pondRequestIntervalUnit?: string | ||
| 242 | - pondRequestContentType?: number | ||
| 243 | - pondRequestHttpType?: string | ||
| 244 | - pondRequestParams?: RequestParams | ||
| 245 | - pondRequestParamsBodyType?: RequestBodyEnum | ||
| 246 | - pondRequestUrl?: string | ||
| 247 | - pondRequestSQLContent?: { | ||
| 248 | - sql: string | ||
| 249 | - } | ||
| 250 | - thirdTokenIsExp?: boolean | ||
| 251 | - thirdSelectCascaderLabel?: string | ||
| 252 | - publicInterfaceSelectId?: string | ||
| 253 | } | 227 | } |
| 254 | 228 | ||
| 255 | // Store 类型 | 229 | // Store 类型 |
| @@ -11,7 +11,6 @@ import { ContentTypeEnum, RequestEnum } from '@/enums/external/httpEnum'; | @@ -11,7 +11,6 @@ import { ContentTypeEnum, RequestEnum } from '@/enums/external/httpEnum'; | ||
| 11 | import omit from 'lodash/omit'; | 11 | import omit from 'lodash/omit'; |
| 12 | import cloneDeep from 'lodash/cloneDeep'; | 12 | import cloneDeep from 'lodash/cloneDeep'; |
| 13 | import { useUserStore } from '@/store/external/modules/user'; | 13 | import { useUserStore } from '@/store/external/modules/user'; |
| 14 | -import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'; | ||
| 15 | 14 | ||
| 16 | export * from './axiosTransform'; | 15 | export * from './axiosTransform'; |
| 17 | 16 | ||
| @@ -116,8 +115,6 @@ export class VAxios { | @@ -116,8 +115,6 @@ export class VAxios { | ||
| 116 | this.axiosInstance.interceptors.request.use(async (config: AxiosRequestConfig) => { | 115 | this.axiosInstance.interceptors.request.use(async (config: AxiosRequestConfig) => { |
| 117 | // If cancel repeat request is turned on, then cancel repeat request is prohibited | 116 | // If cancel repeat request is turned on, then cancel repeat request is prohibited |
| 118 | const userStore = useUserStore(); | 117 | const userStore = useUserStore(); |
| 119 | - const { targetData } = useTargetData() | ||
| 120 | - | ||
| 121 | // if (userStore && (userStore.jwtToken || userStore.shareJwtToken)) { | 118 | // if (userStore && (userStore.jwtToken || userStore.shareJwtToken)) { |
| 122 | if (userStore) { | 119 | if (userStore) { |
| 123 | try { | 120 | try { |
| @@ -128,7 +125,7 @@ export class VAxios { | @@ -128,7 +125,7 @@ export class VAxios { | ||
| 128 | const res = jwt_decode(withThirdTokenString) as Recordable; | 125 | const res = jwt_decode(withThirdTokenString) as Recordable; |
| 129 | const currentTime = (new Date().getTime() + (config.timeout || 0)) / 1000; | 126 | const currentTime = (new Date().getTime() + (config.timeout || 0)) / 1000; |
| 130 | if (currentTime >= res?.exp) { | 127 | if (currentTime >= res?.exp) { |
| 131 | - targetData.value.request.thirdTokenIsExp = true | 128 | + window['$message'].warning('第三方平台Token已经失效,请您重新返回设计页面点击执行请求获取最新Token') |
| 132 | } | 129 | } |
| 133 | } else { | 130 | } else { |
| 134 | //此平台逻辑 | 131 | //此平台逻辑 |
| @@ -65,19 +65,3 @@ export const convertToCascadingData = (obj: Recordable): cascadingData[] => { | @@ -65,19 +65,3 @@ export const convertToCascadingData = (obj: Recordable): cascadingData[] => { | ||
| 65 | } | 65 | } |
| 66 | return result | 66 | return result |
| 67 | } | 67 | } |
| 68 | - | ||
| 69 | -// 递归查找 | ||
| 70 | -export const findItemByLabel = (list:Recordable[], label:string) :Recordable | null => { | ||
| 71 | - let res = list.find((item) => item.label == label) as Recordable | null; | ||
| 72 | - if (res) { | ||
| 73 | - return res; | ||
| 74 | - } else { | ||
| 75 | - for (let i = 0; i < list.length; i++) { | ||
| 76 | - if (list[i].children instanceof Array && list[i].children.length > 0) { | ||
| 77 | - res = findItemByLabel(list[i].children, label); | ||
| 78 | - if (res) return res; | ||
| 79 | - } | ||
| 80 | - } | ||
| 81 | - return null; | ||
| 82 | - } | ||
| 83 | -}; |
| @@ -101,7 +101,7 @@ watch( | @@ -101,7 +101,7 @@ watch( | ||
| 101 | ) | 101 | ) |
| 102 | 102 | ||
| 103 | // 打开/编辑 | 103 | // 打开/编辑 |
| 104 | -const openPond = (isEditFlag = false) => { | 104 | +const openPond = (isEditFlag: boolean = false) => { |
| 105 | isEdit.value = !!isEditFlag | 105 | isEdit.value = !!isEditFlag |
| 106 | requestShow.value = true | 106 | requestShow.value = true |
| 107 | } | 107 | } |
| @@ -41,14 +41,6 @@ | @@ -41,14 +41,6 @@ | ||
| 41 | 编辑配置 | 41 | 编辑配置 |
| 42 | </n-button> | 42 | </n-button> |
| 43 | </setting-item-box> | 43 | </setting-item-box> |
| 44 | - <setting-item-box name="配置"> | ||
| 45 | - <setting-item name="Token前缀"> | ||
| 46 | - <n-input :disabled="editDisabled" v-model:value.trim="requestGlobalTokenSuffix" type="text" placeholder="例如:Bearer" /> | ||
| 47 | - </setting-item> | ||
| 48 | - <setting-item name="Token键值"> | ||
| 49 | - <n-input :disabled="editDisabled" v-model:value.trim="requestGlobalTokenKey" type="text" placeholder="例如:Token" /> | ||
| 50 | - </setting-item> | ||
| 51 | - </setting-item-box> | ||
| 52 | <!-- table 内容体 --> | 44 | <!-- table 内容体 --> |
| 53 | <n-collapse-transition :show="showTable"> | 45 | <n-collapse-transition :show="showTable"> |
| 54 | <request-global-header-table :editDisabled="editDisabled"></request-global-header-table> | 46 | <request-global-header-table :editDisabled="editDisabled"></request-global-header-table> |
| @@ -77,13 +69,13 @@ import { ref, toRefs, computed } from 'vue' | @@ -77,13 +69,13 @@ import { ref, toRefs, computed } from 'vue' | ||
| 77 | import { useDesignStore } from '@/store/modules/designStore/designStore' | 69 | import { useDesignStore } from '@/store/modules/designStore/designStore' |
| 78 | import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' | 70 | import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' |
| 79 | import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook' | 71 | import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook' |
| 80 | -import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d' | 72 | +import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d' |
| 81 | import { RequestGlobalHeaderTable } from '../RequestGlobalHeaderTable' | 73 | import { RequestGlobalHeaderTable } from '../RequestGlobalHeaderTable' |
| 82 | import { icon } from '@/plugins' | 74 | import { icon } from '@/plugins' |
| 83 | 75 | ||
| 84 | const { PencilIcon, ChevronDownOutlineIcon, ChevronUpOutlineIcon } = icon.ionicons5 | 76 | const { PencilIcon, ChevronDownOutlineIcon, ChevronUpOutlineIcon } = icon.ionicons5 |
| 85 | const { chartEditStore } = useTargetData() | 77 | const { chartEditStore } = useTargetData() |
| 86 | -const { requestOriginUrl, requestInterval, requestIntervalUnit, requestGlobalTokenSuffix, requestGlobalTokenKey } = toRefs(chartEditStore.getRequestGlobalConfig) | 78 | +const { requestOriginUrl, requestInterval, requestIntervalUnit } = toRefs(chartEditStore.getRequestGlobalConfig) |
| 87 | const editDisabled = ref(true) | 79 | const editDisabled = ref(true) |
| 88 | 80 | ||
| 89 | const designStore = useDesignStore() | 81 | const designStore = useDesignStore() |
src/views/chart/ContentConfigurations/components/ChartData/external/components/ChartDataPond/components/ChartDataDisplay/displayTable.vue
deleted
100644 → 0
| 1 | -<template> | ||
| 2 | - <n-table | ||
| 3 | - :bordered="false" | ||
| 4 | - :single-line="false" | ||
| 5 | - size="small" | ||
| 6 | - style="border-bottom-right-radius: 7px; border-bottom-left-radius: 7px" | ||
| 7 | - > | ||
| 8 | - <thead> | ||
| 9 | - <tr> | ||
| 10 | - <th>key</th> | ||
| 11 | - <th>value</th> | ||
| 12 | - </tr> | ||
| 13 | - </thead> | ||
| 14 | - <tbody> | ||
| 15 | - <tr v-for="(item, index) in tableArray.content" :key="index"> | ||
| 16 | - <td> | ||
| 17 | - {{ item.key || '暂无'}} | ||
| 18 | - </td> | ||
| 19 | - <td> | ||
| 20 | - {{ item.value || '暂无'}} | ||
| 21 | - </td> | ||
| 22 | - </tr> | ||
| 23 | - </tbody> | ||
| 24 | - </n-table> | ||
| 25 | -</template> | ||
| 26 | - | ||
| 27 | -<script setup lang="ts"> | ||
| 28 | -import { PropType, reactive, ref, toRefs, watch } from 'vue' | ||
| 29 | -import { RequestParamsObjType } from '@/enums/httpEnum' | ||
| 30 | -import noData from '@/assets/images/canvas/noData.png' | ||
| 31 | - | ||
| 32 | -const props = defineProps({ | ||
| 33 | - target: Object as PropType<RequestParamsObjType> | ||
| 34 | -}) | ||
| 35 | - | ||
| 36 | -// 默认表格 | ||
| 37 | -const defaultItem = { | ||
| 38 | - key: '', | ||
| 39 | - value: '' | ||
| 40 | -} | ||
| 41 | -const tableArray = reactive<{ | ||
| 42 | - content: typeof defaultItem[] | ||
| 43 | -}>({ content: [] }) | ||
| 44 | - | ||
| 45 | -// 监听选项 | ||
| 46 | -watch( | ||
| 47 | - () => props.target as RequestParamsObjType, | ||
| 48 | - (target: RequestParamsObjType) => { | ||
| 49 | - tableArray.content = [] | ||
| 50 | - for (const k in target) { | ||
| 51 | - tableArray.content.push({ | ||
| 52 | - key: k, | ||
| 53 | - value: target[k] | ||
| 54 | - }) | ||
| 55 | - } | ||
| 56 | - // 默认值 | ||
| 57 | - if (!tableArray.content.length) tableArray.content = [JSON.parse(JSON.stringify(defaultItem))] | ||
| 58 | - }, | ||
| 59 | - { | ||
| 60 | - immediate: true, | ||
| 61 | - deep: true | ||
| 62 | - } | ||
| 63 | -) | ||
| 64 | -</script> |
src/views/chart/ContentConfigurations/components/ChartData/external/components/ChartDataPond/components/ChartDataDisplay/index.vue
deleted
100644 → 0
| 1 | -<template> | ||
| 2 | - <div class="go-chart-data-display"> | ||
| 3 | - <n-scrollbar style="max-height: 570px"> | ||
| 4 | - <div class="go-mr-3"> | ||
| 5 | - <div> | ||
| 6 | - <setting-item-box name="主体信息"> | ||
| 7 | - <setting-item name="接口名称"> | ||
| 8 | - <n-input size="small" :placeholder="targetData?.dataPondName || '暂无'" :disabled="true"> </n-input> | ||
| 9 | - </setting-item> | ||
| 10 | - <setting-item name="接口类型"> | ||
| 11 | - <n-input size="small" :placeholder="pondRequestHttpType || '暂无'" :disabled="true"></n-input> | ||
| 12 | - </setting-item> | ||
| 13 | - </setting-item-box> | ||
| 14 | - | ||
| 15 | - <setting-item-box> | ||
| 16 | - <setting-item name="组件间隔"> | ||
| 17 | - <n-input size="small" :placeholder="`${requestInterval || '暂无'}`" :disabled="true"> | ||
| 18 | - <template #suffix> | ||
| 19 | - {{ targetData && SelectHttpTimeNameObj[requestIntervalUnit] }} | ||
| 20 | - </template> | ||
| 21 | - </n-input> | ||
| 22 | - </setting-item> | ||
| 23 | - <setting-item name="全局间隔(默认)"> | ||
| 24 | - <n-input size="small" :placeholder="`${globalData?.requestInterval || '暂无'}`" :disabled="true"> | ||
| 25 | - <template #suffix> {{ globalData && SelectHttpTimeNameObj[globalData.requestIntervalUnit] }} </template> | ||
| 26 | - </n-input> | ||
| 27 | - </setting-item> | ||
| 28 | - </setting-item-box> | ||
| 29 | - | ||
| 30 | - <setting-item-box name="源地址" :alone="true"> | ||
| 31 | - <n-input size="small" :placeholder="pondRequestOriginUrl || '暂无'" :disabled="true"> | ||
| 32 | - <template #prefix> | ||
| 33 | - <n-icon :component="PulseIcon" /> | ||
| 34 | - </template> | ||
| 35 | - </n-input> | ||
| 36 | - </setting-item-box> | ||
| 37 | - | ||
| 38 | - <setting-item-box name="接口地址" :alone="true"> | ||
| 39 | - <n-input | ||
| 40 | - size="small" | ||
| 41 | - :placeholder="pondRequestUrl || '暂无'" | ||
| 42 | - :disabled="true" | ||
| 43 | - > | ||
| 44 | - <template #prefix> | ||
| 45 | - <n-icon :component="FlashIcon" /> | ||
| 46 | - </template> | ||
| 47 | - </n-input> | ||
| 48 | - </setting-item-box> | ||
| 49 | - </div> | ||
| 50 | - <n-divider /> | ||
| 51 | - <setting-item-box name="类型"> | ||
| 52 | - <setting-item name="配置类型"> | ||
| 53 | - <n-input | ||
| 54 | - size="small" | ||
| 55 | - :placeholder="targetData && requestContentTypeObj[requestContentType]" | ||
| 56 | - :disabled="true" | ||
| 57 | - ></n-input> | ||
| 58 | - </setting-item> | ||
| 59 | - <setting-item name="body 类型" v-if="requestContentType === RequestContentTypeEnum.DEFAULT"> | ||
| 60 | - <n-input size="small" :placeholder="targetData && requestParamsBodyType" :disabled="true"></n-input> | ||
| 61 | - </setting-item> | ||
| 62 | - </setting-item-box> | ||
| 63 | - <div v-if="requestContentType === RequestContentTypeEnum.DEFAULT"> | ||
| 64 | - <n-tabs type="line" animated v-model:value="tabValue"> | ||
| 65 | - <n-tab v-for="item in RequestParamsTypeEnum" :key="item" :name="item" :tab="item"> {{ item }} </n-tab> | ||
| 66 | - </n-tabs> | ||
| 67 | - <!-- 各个页面 --> | ||
| 68 | - <div class="go-mt-3"> | ||
| 69 | - <div v-if="tabValue !== RequestParamsTypeEnum.BODY"> | ||
| 70 | - <display-table class="go-my-3" :target="requestParams[tabValue]"> </display-table> | ||
| 71 | - </div> | ||
| 72 | - | ||
| 73 | - <!-- 选择了 body --> | ||
| 74 | - <div v-else> | ||
| 75 | - <!-- 为 none 时 --> | ||
| 76 | - <n-card class="go-mt-3 go-pb-3" v-if="requestParamsBodyType === RequestBodyEnum['NONE']"> | ||
| 77 | - <n-text depth="3">该接口没有 Body 体</n-text> | ||
| 78 | - </n-card> | ||
| 79 | - | ||
| 80 | - <!-- 具有对象属性时 --> | ||
| 81 | - <template | ||
| 82 | - v-else-if=" | ||
| 83 | - requestParamsBodyType === RequestBodyEnum['FORM_DATA'] || | ||
| 84 | - requestParamsBodyType === RequestBodyEnum['X_WWW_FORM_URLENCODED'] | ||
| 85 | - " | ||
| 86 | - > | ||
| 87 | - <display-table | ||
| 88 | - class="go-my-3" | ||
| 89 | - :target="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType]" | ||
| 90 | - ></display-table> | ||
| 91 | - </template> | ||
| 92 | - | ||
| 93 | - <!-- json --> | ||
| 94 | - <template v-else-if="requestParamsBodyType === RequestBodyEnum['JSON']"> | ||
| 95 | - <n-card size="small" style="padding-bottom: 7px"> | ||
| 96 | - <n-code | ||
| 97 | - :code="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType] || '暂无内容'" | ||
| 98 | - language="json" | ||
| 99 | - ></n-code> | ||
| 100 | - </n-card> | ||
| 101 | - </template> | ||
| 102 | - | ||
| 103 | - <!-- xml --> | ||
| 104 | - <template v-else-if="requestParamsBodyType === RequestBodyEnum['XML']"> | ||
| 105 | - <n-code | ||
| 106 | - :code="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType] || ''" | ||
| 107 | - language="html" | ||
| 108 | - ></n-code> | ||
| 109 | - </template> | ||
| 110 | - </div> | ||
| 111 | - </div> | ||
| 112 | - </div> | ||
| 113 | - <!-- SQL 请求 --> | ||
| 114 | - <div v-else> | ||
| 115 | - <setting-item-box name="键名"> | ||
| 116 | - <n-text>sql</n-text> | ||
| 117 | - </setting-item-box> | ||
| 118 | - <setting-item-box name="键值"> | ||
| 119 | - <n-code :code="requestSQLContent.sql || ''" language="sql"></n-code> | ||
| 120 | - </setting-item-box> | ||
| 121 | - </div> | ||
| 122 | - </div> | ||
| 123 | - </n-scrollbar> | ||
| 124 | - </div> | ||
| 125 | -</template> | ||
| 126 | - | ||
| 127 | -<script setup lang="ts"> | ||
| 128 | -import { PropType, ref, toRefs } from 'vue' | ||
| 129 | -import { icon } from '@/plugins' | ||
| 130 | -import { MonacoEditor } from '@/components/Pages/MonacoEditor' | ||
| 131 | -import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' | ||
| 132 | -import { RequestDataPondItemType, RequestGlobalConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' | ||
| 133 | -import displayTable from './displayTable.vue' | ||
| 134 | -import { | ||
| 135 | - RequestBodyEnum, | ||
| 136 | - RequestParamsTypeEnum, | ||
| 137 | - SelectHttpTimeNameObj, | ||
| 138 | - RequestContentTypeEnum, | ||
| 139 | - RequestBodyEnumList, | ||
| 140 | - RequestParamsObjType | ||
| 141 | -} from '@/enums/httpEnum' | ||
| 142 | - | ||
| 143 | -const props = defineProps({ | ||
| 144 | - globalData: Object as PropType<RequestGlobalConfigType>, | ||
| 145 | - targetData: Object as PropType<RequestDataPondItemType> | ||
| 146 | -}) | ||
| 147 | - | ||
| 148 | -const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5 | ||
| 149 | -const { | ||
| 150 | - requestUrl, | ||
| 151 | - requestInterval, | ||
| 152 | - requestHttpType, | ||
| 153 | - requestContentType, | ||
| 154 | - requestSQLContent, | ||
| 155 | - requestParams, | ||
| 156 | - requestParamsBodyType, | ||
| 157 | - requestIntervalUnit, | ||
| 158 | - pondRequestOriginUrl, | ||
| 159 | - pondRequestUrl, | ||
| 160 | - pondRequestHttpType | ||
| 161 | -} = toRefs((props.targetData as RequestDataPondItemType).dataPondRequestConfig) | ||
| 162 | -const tabs = [RequestParamsTypeEnum.HEADER] | ||
| 163 | -const requestContentTypeObj = { | ||
| 164 | - [RequestContentTypeEnum.DEFAULT]: '普通请求', | ||
| 165 | - [RequestContentTypeEnum.SQL]: 'SQL 请求' | ||
| 166 | -} | ||
| 167 | -const tabValue = ref<RequestParamsTypeEnum>(RequestParamsTypeEnum.PARAMS) | ||
| 168 | - | ||
| 169 | -// 更新参数表格数据 | ||
| 170 | -const updateRequestParams = (paramsObj: RequestParamsObjType) => { | ||
| 171 | - if (tabValue.value !== RequestParamsTypeEnum.BODY) { | ||
| 172 | - requestParams.value[tabValue.value] = paramsObj | ||
| 173 | - } | ||
| 174 | -} | ||
| 175 | - | ||
| 176 | -// 更新参数表格数据 | ||
| 177 | -const updateRequestBodyTable = (paramsObj: RequestParamsObjType) => { | ||
| 178 | - if ( | ||
| 179 | - tabValue.value === RequestParamsTypeEnum.BODY && | ||
| 180 | - // 仅有两种类型有 body | ||
| 181 | - (requestParamsBodyType.value === RequestBodyEnum.FORM_DATA || | ||
| 182 | - requestParamsBodyType.value === RequestBodyEnum.X_WWW_FORM_URLENCODED) | ||
| 183 | - ) { | ||
| 184 | - requestParams.value[RequestParamsTypeEnum.BODY][requestParamsBodyType.value] = paramsObj | ||
| 185 | - } | ||
| 186 | -} | ||
| 187 | -</script> | ||
| 188 | - | ||
| 189 | -<style lang="scss" scoped> | ||
| 190 | -@include go('chart-data-display') { | ||
| 191 | - flex: 1; | ||
| 192 | -} | ||
| 193 | -</style> |
src/views/chart/ContentConfigurations/components/ChartData/external/components/ChartDataPond/components/ChartDataPondControl/index.vue
deleted
100644 → 0
| 1 | -<template> | ||
| 2 | - <n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false"> | ||
| 3 | - <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px"> | ||
| 4 | - <template #header></template> | ||
| 5 | - <template #header-extra> </template> | ||
| 6 | - <div class="pond-content"> | ||
| 7 | - <!-- 展示区域 --> | ||
| 8 | - <chart-data-display | ||
| 9 | - v-if="pondData && !loading" | ||
| 10 | - :targetData="pondData" | ||
| 11 | - :globalData="chartEditStore.getRequestGlobalConfig" | ||
| 12 | - ></chart-data-display> | ||
| 13 | - <!-- 无数据 --> | ||
| 14 | - <div v-else class="no-data go-flex-center"> | ||
| 15 | - <img :src="noData" alt="暂无数据" /> | ||
| 16 | - <n-text :depth="3">暂未选择公共接口</n-text> | ||
| 17 | - </div> | ||
| 18 | - <!-- 左侧列表 --> | ||
| 19 | - <chart-data-pond-list @createPond="createPond" @deletePond="deletePond"></chart-data-pond-list> | ||
| 20 | - </div> | ||
| 21 | - <!-- 底部 --> | ||
| 22 | - <template #action> | ||
| 23 | - <n-space justify="space-between"> | ||
| 24 | - <n-button type="info" secondary :disabled="!pondData" @click="openPond(true)"> | ||
| 25 | - 编辑内容 | ||
| 26 | - <template #icon> | ||
| 27 | - <n-icon> | ||
| 28 | - <pencil-icon /> | ||
| 29 | - </n-icon> | ||
| 30 | - </template> | ||
| 31 | - </n-button> | ||
| 32 | - <n-button type="primary" @click="closeHandle">保存 & 关闭</n-button> | ||
| 33 | - </n-space> | ||
| 34 | - </template> | ||
| 35 | - </n-card> | ||
| 36 | - </n-modal> | ||
| 37 | - <!-- 请求配置model --> | ||
| 38 | - <pond-data-request | ||
| 39 | - v-model:modelShow="requestShow" | ||
| 40 | - :targetDataRequest="editData" | ||
| 41 | - :isEdit="isEdit" | ||
| 42 | - @editSaveHandle="saveHandle" | ||
| 43 | - ></pond-data-request> | ||
| 44 | -</template> | ||
| 45 | - | ||
| 46 | -<script setup lang="ts"> | ||
| 47 | -import { ref, toRefs, computed, nextTick, watch, toRaw } from 'vue' | ||
| 48 | -import noData from '@/assets/images/canvas/noData.png' | ||
| 49 | -import { ChartDataPondList } from '../ChartDataPondList' | ||
| 50 | -import PondDataRequest from '../../../RequestModal/PondDataRequest.vue' | ||
| 51 | -import { ChartDataDisplay } from '../ChartDataDisplay' | ||
| 52 | -import { requestConfig } from '@/packages/public/publicConfig' | ||
| 53 | -import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook' | ||
| 54 | -import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d' | ||
| 55 | -import { RequestBodyEnum, RequestContentTypeEnum, RequestDataTypeEnum, RequestHttpEnum } from '@/enums/httpEnum' | ||
| 56 | -import { icon } from '@/plugins' | ||
| 57 | -import { getUUID, goDialog } from '@/utils' | ||
| 58 | -import { cloneDeep } from 'lodash' | ||
| 59 | - | ||
| 60 | -const props = defineProps({ | ||
| 61 | - modelShow: Boolean | ||
| 62 | -}) | ||
| 63 | - | ||
| 64 | -const emit = defineEmits(['update:modelShow', 'sendHandle']) | ||
| 65 | - | ||
| 66 | -const { PencilIcon } = icon.ionicons5 | ||
| 67 | - | ||
| 68 | -const { chartEditStore, targetData } = useTargetData() | ||
| 69 | - | ||
| 70 | -const { requestDataPond } = toRefs(chartEditStore.getRequestGlobalConfig) | ||
| 71 | - | ||
| 72 | -const requestShow = ref(false) | ||
| 73 | - | ||
| 74 | -const modelShowRef = ref(false) | ||
| 75 | - | ||
| 76 | -const loading = ref(false) | ||
| 77 | - | ||
| 78 | -const isEdit = ref(false) | ||
| 79 | - | ||
| 80 | -const editData = ref<RequestDataPondItemType>() | ||
| 81 | - | ||
| 82 | -// 所选数据池 | ||
| 83 | -const pondData = computed(() => { | ||
| 84 | - const selectId = targetData?.value?.request?.requestDataPondId | ||
| 85 | - if (!selectId) return undefined | ||
| 86 | - const data = requestDataPond.value.filter(item => { | ||
| 87 | - return selectId === item.dataPondId | ||
| 88 | - }) | ||
| 89 | - return data[0] | ||
| 90 | -}) | ||
| 91 | - | ||
| 92 | -watch(() => props.modelShow, (newValue) => { | ||
| 93 | - if (newValue) { | ||
| 94 | - modelShowRef.value = true | ||
| 95 | - } else { | ||
| 96 | - modelShowRef.value = false | ||
| 97 | - } | ||
| 98 | -}) | ||
| 99 | - | ||
| 100 | -const cacheEditData = ref<RequestDataPondItemType>() | ||
| 101 | - | ||
| 102 | -watch( | ||
| 103 | - () => pondData.value, | ||
| 104 | - newValue => { | ||
| 105 | - loading.value = true | ||
| 106 | - editData.value = newValue | ||
| 107 | - cacheEditData.value = editData.value | ||
| 108 | - nextTick(() => { | ||
| 109 | - loading.value = false | ||
| 110 | - }) | ||
| 111 | - }, | ||
| 112 | - { | ||
| 113 | - immediate: true | ||
| 114 | - } | ||
| 115 | -) | ||
| 116 | - | ||
| 117 | -// 打开/编辑 | ||
| 118 | -const openPond = (isEditFlag = false) => { | ||
| 119 | - isEdit.value = !!isEditFlag | ||
| 120 | - requestShow.value = true | ||
| 121 | - editData.value = cacheEditData.value || { | ||
| 122 | - dataPondId: getUUID(), | ||
| 123 | - dataPondName: getUUID(), | ||
| 124 | - dataPondRequestConfig: { | ||
| 125 | - requestDataPondId: '', | ||
| 126 | - requestInterval: 0, | ||
| 127 | - requestDataType: RequestDataTypeEnum.AJAX, | ||
| 128 | - requestHttpType: RequestHttpEnum.GET, | ||
| 129 | - requestUrl: '', | ||
| 130 | - requestContentType: RequestContentTypeEnum.DEFAULT, | ||
| 131 | - requestParamsBodyType: RequestBodyEnum.NONE, | ||
| 132 | - requestSQLContent: { | ||
| 133 | - sql: '' | ||
| 134 | - }, | ||
| 135 | - requestVerificationToken: '', | ||
| 136 | - requestTokenKey: '', | ||
| 137 | - requestTokenSuffix: '', | ||
| 138 | - requestParams: { | ||
| 139 | - "Body": { | ||
| 140 | - "form-data": {}, | ||
| 141 | - "x-www-form-urlencoded": {}, | ||
| 142 | - "json": "", | ||
| 143 | - "xml": "" | ||
| 144 | - }, | ||
| 145 | - "Header": {}, | ||
| 146 | - "Params": {} | ||
| 147 | - }, | ||
| 148 | - pondRequestOriginUrl: '', | ||
| 149 | - pondRequestInterval: 0, | ||
| 150 | - pondRequestIntervalUnit: '', | ||
| 151 | - pondRequestGlobalTokenSuffix: '', | ||
| 152 | - pondRequestGlobalTokenKey: '', | ||
| 153 | - pondRequestHttpType:'', | ||
| 154 | - pondRequestUrl:'', | ||
| 155 | - pondRequestContentType:RequestContentTypeEnum.DEFAULT, | ||
| 156 | - pondRequestSQLContent: { | ||
| 157 | - sql: '' | ||
| 158 | - }, | ||
| 159 | - pondRequestParamsBodyType: RequestBodyEnum.NONE, | ||
| 160 | - pondRequestParams: { | ||
| 161 | - "Body": { | ||
| 162 | - "form-data": {}, | ||
| 163 | - "x-www-form-urlencoded": {}, | ||
| 164 | - "json": "", | ||
| 165 | - "xml": "" | ||
| 166 | - }, | ||
| 167 | - "Header": {}, | ||
| 168 | - "Params": {} | ||
| 169 | - } | ||
| 170 | - } | ||
| 171 | - } as unknown as RequestDataPondItemType | ||
| 172 | -} | ||
| 173 | - | ||
| 174 | -// 创建 | ||
| 175 | -const createPond = () => { | ||
| 176 | - const id = getUUID() | ||
| 177 | - editData.value = { | ||
| 178 | - dataPondId: id, | ||
| 179 | - dataPondName: id, | ||
| 180 | - dataPondRequestConfig: cloneDeep({ ...requestConfig, requestDataType: RequestDataTypeEnum.Pond }) | ||
| 181 | - } | ||
| 182 | - cacheEditData.value = editData.value | ||
| 183 | - openPond() | ||
| 184 | -} | ||
| 185 | - | ||
| 186 | -// 完成创建/编辑 | ||
| 187 | -const saveHandle = (newData: RequestDataPondItemType) => { | ||
| 188 | - // 走创建 | ||
| 189 | - if (isEdit.value) { | ||
| 190 | - editSaveHandle(newData) | ||
| 191 | - } else { | ||
| 192 | - createSaveHandle(newData) | ||
| 193 | - } | ||
| 194 | - isEdit.value = false | ||
| 195 | - requestShow.value = false | ||
| 196 | -} | ||
| 197 | - | ||
| 198 | -// 编辑保存之后 | ||
| 199 | -const editSaveHandle = (newData: RequestDataPondItemType) => { | ||
| 200 | - try { | ||
| 201 | - const targetIndex = requestDataPond.value.findIndex(item => item.dataPondId === newData.dataPondId) | ||
| 202 | - if (targetIndex !== -1) { | ||
| 203 | - requestDataPond.value.splice(targetIndex, 1, newData) | ||
| 204 | - // 修改数据池后, 修改所有关联的组件 | ||
| 205 | - chartEditStore.getComponentList.forEach(item => { | ||
| 206 | - if ( | ||
| 207 | - item.request.requestDataType === RequestDataTypeEnum.Pond && | ||
| 208 | - item.request.requestDataPondId === newData.dataPondId | ||
| 209 | - ) { | ||
| 210 | - item.request = { | ||
| 211 | - ...toRaw(newData.dataPondRequestConfig), | ||
| 212 | - requestDataPondId: newData.dataPondId | ||
| 213 | - } | ||
| 214 | - } | ||
| 215 | - }) | ||
| 216 | - window.$message.success('保存成功!') | ||
| 217 | - } else { | ||
| 218 | - window.$message.error('编辑失败,请稍后重试!') | ||
| 219 | - } | ||
| 220 | - } catch (error) { | ||
| 221 | - window.$message.error('编辑失败,请稍后重试!') | ||
| 222 | - } | ||
| 223 | -} | ||
| 224 | - | ||
| 225 | -// 创建保存成功之后 | ||
| 226 | -const createSaveHandle = (newData: RequestDataPondItemType) => { | ||
| 227 | - try { | ||
| 228 | - if (editData.value) { | ||
| 229 | - requestDataPond.value.unshift(newData) | ||
| 230 | - window.$message.success('创建成功!') | ||
| 231 | - } else { | ||
| 232 | - window.$message.error('创建失败,请稍后重试!') | ||
| 233 | - } | ||
| 234 | - } catch (error) { | ||
| 235 | - window.$message.error('创建失败,请稍后重试!') | ||
| 236 | - } | ||
| 237 | -} | ||
| 238 | - | ||
| 239 | -// 删除数据池 | ||
| 240 | -const deletePond = (targetData: RequestDataPondItemType) => { | ||
| 241 | - goDialog({ | ||
| 242 | - message: '删除数据后,需手动处理使用改接口的组件,是否继续?', | ||
| 243 | - isMaskClosable: true, | ||
| 244 | - transformOrigin: 'center', | ||
| 245 | - onPositiveCallback: () => { | ||
| 246 | - const targetIndex = requestDataPond.value.findIndex(item => item.dataPondId === targetData.dataPondId) | ||
| 247 | - if (targetIndex !== -1) { | ||
| 248 | - requestDataPond.value.splice(targetIndex, 1) | ||
| 249 | - window.$message.success('删除成功!') | ||
| 250 | - } else { | ||
| 251 | - window.$message.error('删除失败,请稍后重试!') | ||
| 252 | - } | ||
| 253 | - } | ||
| 254 | - }) | ||
| 255 | -} | ||
| 256 | - | ||
| 257 | -// 关闭 | ||
| 258 | -const closeHandle = () => { | ||
| 259 | - // 将所选内容赋值给对象 | ||
| 260 | - if (pondData.value) { | ||
| 261 | - targetData.value.request = { | ||
| 262 | - ...toRaw(pondData.value.dataPondRequestConfig), | ||
| 263 | - requestDataPondId: pondData.value.dataPondId | ||
| 264 | - } | ||
| 265 | - } | ||
| 266 | - emit('update:modelShow', false) | ||
| 267 | -} | ||
| 268 | -</script> | ||
| 269 | - | ||
| 270 | -<style lang="scss" scoped> | ||
| 271 | -@include go('chart-data-pond-control') { | ||
| 272 | - /* 中间 */ | ||
| 273 | - .pond-content { | ||
| 274 | - display: flex; | ||
| 275 | - } | ||
| 276 | - .no-data { | ||
| 277 | - flex-direction: column; | ||
| 278 | - width: 100%; | ||
| 279 | - img { | ||
| 280 | - width: 200px; | ||
| 281 | - } | ||
| 282 | - } | ||
| 283 | - &.n-card.n-modal, | ||
| 284 | - .n-card { | ||
| 285 | - @extend .go-background-filter; | ||
| 286 | - } | ||
| 287 | - .n-card-shallow { | ||
| 288 | - background-color: rgba(0, 0, 0, 0) !important; | ||
| 289 | - } | ||
| 290 | - @include deep() { | ||
| 291 | - & > .n-card__content { | ||
| 292 | - padding-right: 0; | ||
| 293 | - } | ||
| 294 | - .n-card__content { | ||
| 295 | - padding-bottom: 5px; | ||
| 296 | - } | ||
| 297 | - } | ||
| 298 | -} | ||
| 299 | -</style> |
src/views/chart/ContentConfigurations/components/ChartData/external/components/ChartDataPond/components/ChartDataPondList/index.vue
deleted
100644 → 0
| 1 | -<template> | ||
| 2 | - <div class="go-chart-data-pond-list"> | ||
| 3 | - <n-timeline class="pond-item-timeline" style="width: 20px"> | ||
| 4 | - <n-timeline-item type="info"> </n-timeline-item> | ||
| 5 | - <n-timeline-item type="success"></n-timeline-item> | ||
| 6 | - </n-timeline> | ||
| 7 | - <div class="pond-item-box"> | ||
| 8 | - <!-- 新增 --> | ||
| 9 | - <n-button class="create-btn go-py-4" ghost @click="createPond"> | ||
| 10 | - <span> 创建 </span> | ||
| 11 | - <template #icon> | ||
| 12 | - <n-icon> | ||
| 13 | - <DuplicateOutlineIcon></DuplicateOutlineIcon> | ||
| 14 | - </n-icon> | ||
| 15 | - </template> | ||
| 16 | - </n-button> | ||
| 17 | - <n-divider style="margin: 10px 0"></n-divider> | ||
| 18 | - <n-space v-if="!requestDataPond.length" justify="center"> | ||
| 19 | - <n-text class="not-layer-text" :depth="3"> | ||
| 20 | - 暂无数据内容, | ||
| 21 | - <n-a @click="createPond">立即创建</n-a> | ||
| 22 | - </n-text> | ||
| 23 | - </n-space> | ||
| 24 | - <n-scrollbar style="max-height: 490px"> | ||
| 25 | - <div | ||
| 26 | - v-for="item in requestDataPond" | ||
| 27 | - :key="item.dataPondId" | ||
| 28 | - :class="{ select: item.dataPondId === selectPondId }" | ||
| 29 | - class="pond-item" | ||
| 30 | - @click="clickHandle(item)" | ||
| 31 | - > | ||
| 32 | - <div class="item-content"> | ||
| 33 | - <div class="item-content-body"> | ||
| 34 | - <div> | ||
| 35 | - <n-tag class="go-mr-1" :type="item.dataPondId === selectPondId ? 'warning' : ''" :bordered="false"> | ||
| 36 | - 名称 | ||
| 37 | - </n-tag> | ||
| 38 | - <n-ellipsis style="max-width: 180px"> | ||
| 39 | - {{ item.dataPondName || '暂无' }} | ||
| 40 | - </n-ellipsis> | ||
| 41 | - </div> | ||
| 42 | - <div> | ||
| 43 | - <n-tag class="go-mr-1" :type="item.dataPondId === selectPondId ? 'warning' : ''" :bordered="false"> | ||
| 44 | - 地址 | ||
| 45 | - </n-tag> | ||
| 46 | - <n-ellipsis style="max-width: 180px"> | ||
| 47 | - {{ item.dataPondRequestConfig.pondRequestUrl || '暂无' }} | ||
| 48 | - </n-ellipsis> | ||
| 49 | - </div> | ||
| 50 | - </div> | ||
| 51 | - <div class="item-content-icon go-transition-quick" @click="deletePond($event, item)"> | ||
| 52 | - <n-icon> | ||
| 53 | - <trash-icon></trash-icon> | ||
| 54 | - </n-icon> | ||
| 55 | - </div> | ||
| 56 | - </div> | ||
| 57 | - <div :class="{ 'select-modal': item.dataPondId === selectPondId }"></div> | ||
| 58 | - </div> | ||
| 59 | - </n-scrollbar> | ||
| 60 | - </div> | ||
| 61 | - </div> | ||
| 62 | -</template> | ||
| 63 | - | ||
| 64 | -<script setup lang="ts"> | ||
| 65 | -import { toRefs, computed } from 'vue' | ||
| 66 | -import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook' | ||
| 67 | -import { useDesignStore } from '@/store/modules/designStore/designStore' | ||
| 68 | -import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d' | ||
| 69 | -import { icon } from '@/plugins' | ||
| 70 | - | ||
| 71 | -const emit = defineEmits(['createPond', 'deletePond']) | ||
| 72 | - | ||
| 73 | -const { DuplicateOutlineIcon, TrashIcon } = icon.ionicons5 | ||
| 74 | -const designStore = useDesignStore() | ||
| 75 | -const { chartEditStore, targetData } = useTargetData() | ||
| 76 | -const { requestDataPond } = toRefs(chartEditStore.getRequestGlobalConfig) | ||
| 77 | - | ||
| 78 | -// 选中的全局数据 | ||
| 79 | -const selectPondId = computed(() => { | ||
| 80 | - return targetData.value.request.requestDataPondId | ||
| 81 | -}) | ||
| 82 | - | ||
| 83 | -// 颜色 | ||
| 84 | -const themeColor = computed(() => { | ||
| 85 | - return designStore.getAppTheme | ||
| 86 | -}) | ||
| 87 | - | ||
| 88 | -// 创建数据池 | ||
| 89 | -const createPond = () => { | ||
| 90 | - emit('createPond', true) | ||
| 91 | -} | ||
| 92 | - | ||
| 93 | -// 删除数据池 | ||
| 94 | -const deletePond = (target: Event, targetData: RequestDataPondItemType) => { | ||
| 95 | - target.stopPropagation() | ||
| 96 | - target.preventDefault() | ||
| 97 | - emit('deletePond', targetData) | ||
| 98 | -} | ||
| 99 | - | ||
| 100 | -// 选中 | ||
| 101 | -const clickHandle = (item: RequestDataPondItemType) => { | ||
| 102 | - targetData.value.request.requestDataPondId = item.dataPondId | ||
| 103 | -} | ||
| 104 | -</script> | ||
| 105 | - | ||
| 106 | -<style scoped lang="scss"> | ||
| 107 | -$height: 530px; | ||
| 108 | -$listWidth: 280px; | ||
| 109 | -$centerHeight: 60px; | ||
| 110 | -$centerMiniHeight: 28px; | ||
| 111 | -$textSize: 10px; | ||
| 112 | - | ||
| 113 | -@include go('chart-data-pond-list') { | ||
| 114 | - padding-top: 10px; | ||
| 115 | - padding-bottom: 5px; | ||
| 116 | - margin-right: 5px; | ||
| 117 | - display: flex; | ||
| 118 | - .pond-item-timeline > .n-timeline-item { | ||
| 119 | - &:first-child { | ||
| 120 | - height: $height; | ||
| 121 | - } | ||
| 122 | - } | ||
| 123 | - .pond-item-box { | ||
| 124 | - width: $listWidth; | ||
| 125 | - position: relative; | ||
| 126 | - .create-btn { | ||
| 127 | - width: calc(#{$listWidth - 15px}); | ||
| 128 | - margin-right: 15px; | ||
| 129 | - } | ||
| 130 | - .pond-item { | ||
| 131 | - position: relative; | ||
| 132 | - height: $centerHeight; | ||
| 133 | - padding: 5px; | ||
| 134 | - margin-bottom: 10px; | ||
| 135 | - margin-right: 15px; | ||
| 136 | - border-radius: 5px; | ||
| 137 | - cursor: pointer; | ||
| 138 | - border: 1px solid rgba(0, 0, 0, 0); | ||
| 139 | - @include fetch-bg-color('background-color3'); | ||
| 140 | - @extend .go-transition-quick; | ||
| 141 | - &.hover, | ||
| 142 | - &:hover { | ||
| 143 | - @include fetch-bg-color('background-color4'); | ||
| 144 | - } | ||
| 145 | - &:hover { | ||
| 146 | - @include deep() { | ||
| 147 | - .icon-item { | ||
| 148 | - opacity: 1; | ||
| 149 | - } | ||
| 150 | - } | ||
| 151 | - .item-content-icon { | ||
| 152 | - opacity: 1 !important; | ||
| 153 | - } | ||
| 154 | - } | ||
| 155 | - | ||
| 156 | - &.select { | ||
| 157 | - border: 1px solid v-bind('themeColor'); | ||
| 158 | - background-color: rgba(0, 0, 0, 0); | ||
| 159 | - .item-content-icon { | ||
| 160 | - display: none; | ||
| 161 | - } | ||
| 162 | - } | ||
| 163 | - | ||
| 164 | - .select-modal, | ||
| 165 | - .item-content { | ||
| 166 | - position: absolute; | ||
| 167 | - top: 0; | ||
| 168 | - left: 0; | ||
| 169 | - } | ||
| 170 | - | ||
| 171 | - .item-content { | ||
| 172 | - z-index: 1; | ||
| 173 | - display: flex; | ||
| 174 | - justify-content: space-between; | ||
| 175 | - align-items: center; | ||
| 176 | - padding: 5px; | ||
| 177 | - .item-content-body { | ||
| 178 | - width: 230px; | ||
| 179 | - display: flex; | ||
| 180 | - flex-direction: column; | ||
| 181 | - gap: 5px; | ||
| 182 | - } | ||
| 183 | - .item-content-icon { | ||
| 184 | - opacity: 0; | ||
| 185 | - height: $centerHeight; | ||
| 186 | - line-height: $centerHeight; | ||
| 187 | - padding-left: 5px; | ||
| 188 | - } | ||
| 189 | - } | ||
| 190 | - | ||
| 191 | - .select-modal { | ||
| 192 | - width: 100%; | ||
| 193 | - height: 100%; | ||
| 194 | - opacity: 0.3; | ||
| 195 | - background-color: v-bind('themeColor'); | ||
| 196 | - } | ||
| 197 | - } | ||
| 198 | - } | ||
| 199 | -} | ||
| 200 | -</style> |
src/views/chart/ContentConfigurations/components/ChartData/external/components/ChartDataPond/index.vue
deleted
100644 → 0
| 1 | -<template> | ||
| 2 | - <!-- 选中内容 --> | ||
| 3 | - <div class="go-chart-data-pond"> | ||
| 4 | - <n-card class="n-card-shallow"> | ||
| 5 | - <setting-item-box name="请求名称" :alone="true"> | ||
| 6 | - <n-input size="small" :placeholder="pondData?.dataPondName || '暂无'" :disabled="true"> | ||
| 7 | - <template #prefix> | ||
| 8 | - <n-icon :component="FishIcon" /> | ||
| 9 | - </template> | ||
| 10 | - </n-input> | ||
| 11 | - </setting-item-box> | ||
| 12 | - | ||
| 13 | - <setting-item-box name="接口地址" :alone="true"> | ||
| 14 | - <n-input size="small" :placeholder="pondData?.dataPondRequestConfig.requestUrl || '暂无'" :disabled="true"> | ||
| 15 | - <template #prefix> | ||
| 16 | - <n-icon :component="FlashIcon" /> | ||
| 17 | - </template> | ||
| 18 | - </n-input> | ||
| 19 | - </setting-item-box> | ||
| 20 | - | ||
| 21 | - <div class="edit-text" @click="controlModelHandle"> | ||
| 22 | - <div class="go-absolute-center"> | ||
| 23 | - <n-button type="primary" secondary>编辑配置</n-button> | ||
| 24 | - </div> | ||
| 25 | - </div> | ||
| 26 | - </n-card> | ||
| 27 | - </div> | ||
| 28 | - | ||
| 29 | - <setting-item-box :alone="true"> | ||
| 30 | - <template #name> | ||
| 31 | - 测试 | ||
| 32 | - <n-tooltip trigger="hover"> | ||
| 33 | - <template #trigger> | ||
| 34 | - <n-icon size="21" :depth="3"> | ||
| 35 | - <help-outline-icon></help-outline-icon> | ||
| 36 | - </n-icon> | ||
| 37 | - </template> | ||
| 38 | - 默认赋值给 dataset 字段 | ||
| 39 | - </n-tooltip> | ||
| 40 | - </template> | ||
| 41 | - <n-button type="primary" ghost @click="sendHandle"> | ||
| 42 | - <template #icon> | ||
| 43 | - <n-icon> | ||
| 44 | - <flash-icon /> | ||
| 45 | - </n-icon> | ||
| 46 | - </template> | ||
| 47 | - 发送请求 | ||
| 48 | - </n-button> | ||
| 49 | - </setting-item-box> | ||
| 50 | - | ||
| 51 | - <!-- 底部数据展示 --> | ||
| 52 | - <chart-data-matching-and-show :show="showMatching && !loading" :ajax="true"></chart-data-matching-and-show> | ||
| 53 | - | ||
| 54 | - <!-- 骨架图 --> | ||
| 55 | - <go-skeleton :load="loading" :repeat="3"></go-skeleton> | ||
| 56 | - | ||
| 57 | - <!-- 编辑 / 新增弹窗 --> | ||
| 58 | - <chart-data-pond-control v-model:modelShow="controlModel" @sendHandle="sendHandle"></chart-data-pond-control> | ||
| 59 | -</template> | ||
| 60 | - | ||
| 61 | -<script setup lang="ts"> | ||
| 62 | -import { ref, toRefs, toRaw, onBeforeUnmount, computed, watchEffect } from 'vue' | ||
| 63 | -import { icon } from '@/plugins' | ||
| 64 | -import { http, customizeHttp } from '@/api/http' | ||
| 65 | -import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' | ||
| 66 | -import { ChartDataPondControl } from './components/ChartDataPondControl' | ||
| 67 | -import { useDesignStore } from '@/store/modules/designStore/designStore' | ||
| 68 | -import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow' | ||
| 69 | -import { newFunctionHandle } from '@/utils' | ||
| 70 | -import { useTargetData } from '../../../../hooks/useTargetData.hook' | ||
| 71 | - | ||
| 72 | -const designStore = useDesignStore() | ||
| 73 | -const { HelpOutlineIcon, FlashIcon, PulseIcon, FishIcon } = icon.ionicons5 | ||
| 74 | -const { targetData, chartEditStore } = useTargetData() | ||
| 75 | - | ||
| 76 | -const { | ||
| 77 | - requestDataPond, | ||
| 78 | - requestInterval: GlobalRequestInterval, | ||
| 79 | - requestIntervalUnit: GlobalRequestIntervalUnit | ||
| 80 | -} = toRefs(chartEditStore.getRequestGlobalConfig) | ||
| 81 | - | ||
| 82 | -const loading = ref(false) | ||
| 83 | -const controlModel = ref(false) | ||
| 84 | -const showMatching = ref(false) | ||
| 85 | - | ||
| 86 | -let firstFocus = 0 | ||
| 87 | -let lastFilter: any = undefined | ||
| 88 | - | ||
| 89 | -// 所选数据池 | ||
| 90 | -const pondData = computed(() => { | ||
| 91 | - const selectId = targetData.value.request.requestDataPondId | ||
| 92 | - if (!selectId) return undefined | ||
| 93 | - const data = requestDataPond.value.filter((item: Recordable) => { | ||
| 94 | - return selectId === item.dataPondId | ||
| 95 | - }) | ||
| 96 | - return data[0] | ||
| 97 | -}) | ||
| 98 | - | ||
| 99 | -// 颜色 | ||
| 100 | -const themeColor = computed(() => { | ||
| 101 | - return designStore.getAppTheme | ||
| 102 | -}) | ||
| 103 | - | ||
| 104 | -// 请求配置 model | ||
| 105 | -const controlModelHandle = () => { | ||
| 106 | - controlModel.value = true | ||
| 107 | -} | ||
| 108 | - | ||
| 109 | -// 发送请求 | ||
| 110 | -const sendHandle = async () => { | ||
| 111 | - if (!targetData.value?.request) { | ||
| 112 | - window.$message.warning('请选择一个公共接口!') | ||
| 113 | - return | ||
| 114 | - } | ||
| 115 | - loading.value = true | ||
| 116 | - try { | ||
| 117 | - const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig)) | ||
| 118 | - loading.value = false | ||
| 119 | - if (res) { | ||
| 120 | - if (!res?.data && !targetData.value.filter) { | ||
| 121 | - window['$message'].warning('您的数据不符合默认格式,请配置过滤器!') | ||
| 122 | - showMatching.value = true | ||
| 123 | - return | ||
| 124 | - } | ||
| 125 | - targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter) | ||
| 126 | - showMatching.value = true | ||
| 127 | - return | ||
| 128 | - } | ||
| 129 | - window['$message'].warning('没有拿到返回值,请检查接口!') | ||
| 130 | - } catch (error) { | ||
| 131 | - console.error(error); | ||
| 132 | - loading.value = false | ||
| 133 | - window['$message'].warning('数据异常,请检查参数!') | ||
| 134 | - } | ||
| 135 | -} | ||
| 136 | - | ||
| 137 | -watchEffect(() => { | ||
| 138 | - const filter = targetData.value?.filter | ||
| 139 | - if (lastFilter !== filter && firstFocus) { | ||
| 140 | - lastFilter = filter | ||
| 141 | - sendHandle() | ||
| 142 | - } | ||
| 143 | - firstFocus++ | ||
| 144 | -}) | ||
| 145 | - | ||
| 146 | -onBeforeUnmount(() => { | ||
| 147 | - lastFilter = null | ||
| 148 | -}) | ||
| 149 | -</script> | ||
| 150 | - | ||
| 151 | -<style scoped lang="scss"> | ||
| 152 | -@include go('chart-data-pond') { | ||
| 153 | - position: relative; | ||
| 154 | - display: flex; | ||
| 155 | - flex-direction: column; | ||
| 156 | - align-items: center; | ||
| 157 | - .n-card-shallow { | ||
| 158 | - &.n-card { | ||
| 159 | - @extend .go-background-filter; | ||
| 160 | - @include deep() { | ||
| 161 | - .n-card__content { | ||
| 162 | - padding: 10px; | ||
| 163 | - } | ||
| 164 | - } | ||
| 165 | - } | ||
| 166 | - .edit-text { | ||
| 167 | - position: absolute; | ||
| 168 | - top: 0px; | ||
| 169 | - left: 0px; | ||
| 170 | - width: 325px; | ||
| 171 | - height: 136px; | ||
| 172 | - cursor: pointer; | ||
| 173 | - opacity: 0; | ||
| 174 | - transition: all 0.3s; | ||
| 175 | - @extend .go-background-filter; | ||
| 176 | - backdrop-filter: blur(2px) !important; | ||
| 177 | - } | ||
| 178 | - &:hover { | ||
| 179 | - border-color: v-bind('themeColor'); | ||
| 180 | - .edit-text { | ||
| 181 | - opacity: 1; | ||
| 182 | - } | ||
| 183 | - } | ||
| 184 | - } | ||
| 185 | -} | ||
| 186 | -</style> |
| @@ -4,7 +4,6 @@ import { icon } from '@/plugins' | @@ -4,7 +4,6 @@ import { icon } from '@/plugins' | ||
| 4 | import { useDesignStore } from '@/store/modules/designStore/designStore' | 4 | import { useDesignStore } from '@/store/modules/designStore/designStore' |
| 5 | import { SettingItemBox } from '@/components/Pages/ChartItemSetting' | 5 | import { SettingItemBox } from '@/components/Pages/ChartItemSetting' |
| 6 | import { ChartDataMatchingAndShow } from '../../../external/components/ChartDataMatchingAndShow' | 6 | import { ChartDataMatchingAndShow } from '../../../external/components/ChartDataMatchingAndShow' |
| 7 | -import { ChartDataPondControl } from '../ChartDataPond/components/ChartDataPondControl' | ||
| 8 | import { useTargetData } from '../../../../hooks/useTargetData.hook' | 7 | import { useTargetData } from '../../../../hooks/useTargetData.hook' |
| 9 | import { NButton, NSelect, NTooltip, NIcon, SelectOption } from 'naive-ui' | 8 | import { NButton, NSelect, NTooltip, NIcon, SelectOption } from 'naive-ui' |
| 10 | import { RequestInfoPanel } from '../RequestInfoPanel' | 9 | import { RequestInfoPanel } from '../RequestInfoPanel' |
| @@ -94,11 +93,6 @@ watchEffect(() => { | @@ -94,11 +93,6 @@ watchEffect(() => { | ||
| 94 | onBeforeUnmount(() => { | 93 | onBeforeUnmount(() => { |
| 95 | lastFilter = null | 94 | lastFilter = null |
| 96 | }) | 95 | }) |
| 97 | - | ||
| 98 | -const controlModel = ref(false) | ||
| 99 | - | ||
| 100 | -const handleOpenChartDataPondModal = () => controlModel.value = true | ||
| 101 | - | ||
| 102 | </script> | 96 | </script> |
| 103 | 97 | ||
| 104 | <template> | 98 | <template> |
| @@ -107,10 +101,6 @@ const handleOpenChartDataPondModal = () => controlModel.value = true | @@ -107,10 +101,6 @@ const handleOpenChartDataPondModal = () => controlModel.value = true | ||
| 107 | <NSelect v-model:value="selectedRequestType" :options="getApiRequestType" /> | 101 | <NSelect v-model:value="selectedRequestType" :options="getApiRequestType" /> |
| 108 | </SettingItemBox> | 102 | </SettingItemBox> |
| 109 | 103 | ||
| 110 | - <SettingItemBox v-if="selectedRequestType === RequestDataTypeEnum.AJAX" name="全局配置" :alone="true"> | ||
| 111 | - <NButton @click="handleOpenChartDataPondModal" type="success">配置</NButton> | ||
| 112 | - </SettingItemBox> | ||
| 113 | - | ||
| 114 | <RequestInfoPanel @clickPanel="handleClickPanel" /> | 104 | <RequestInfoPanel @clickPanel="handleClickPanel" /> |
| 115 | 105 | ||
| 116 | <SettingItemBox :alone="true"> | 106 | <SettingItemBox :alone="true"> |
| @@ -142,8 +132,6 @@ const handleOpenChartDataPondModal = () => controlModel.value = true | @@ -142,8 +132,6 @@ const handleOpenChartDataPondModal = () => controlModel.value = true | ||
| 142 | <go-skeleton :load="loading" :repeat="3"></go-skeleton> | 132 | <go-skeleton :load="loading" :repeat="3"></go-skeleton> |
| 143 | 133 | ||
| 144 | <RequestModal ref="requestModal" /> | 134 | <RequestModal ref="requestModal" /> |
| 145 | - | ||
| 146 | - <chart-data-pond-control v-model:modelShow="controlModel" @sendHandle="sendHandle"></chart-data-pond-control> | ||
| 147 | </div> | 135 | </div> |
| 148 | </template> | 136 | </template> |
| 149 | 137 |
| @@ -99,7 +99,6 @@ const handleSelectedInterfaceChange = async (_value: string, option: PublicInter | @@ -99,7 +99,6 @@ const handleSelectedInterfaceChange = async (_value: string, option: PublicInter | ||
| 99 | const { filter } = option | 99 | const { filter } = option |
| 100 | const { targetData } = useTargetData() | 100 | const { targetData } = useTargetData() |
| 101 | targetData.value.filter = filter ?? 'return res' | 101 | targetData.value.filter = filter ?? 'return res' |
| 102 | - targetData.value.request.publicInterfaceSelectId = option.id as string | ||
| 103 | //ft | 102 | //ft |
| 104 | setDynamicFormValue(option as unknown as ExtraRequestConfigType) | 103 | setDynamicFormValue(option as unknown as ExtraRequestConfigType) |
| 105 | } | 104 | } |
| @@ -155,7 +154,7 @@ const getConfigurationData = () => { | @@ -155,7 +154,7 @@ const getConfigurationData = () => { | ||
| 155 | 154 | ||
| 156 | const setConfigurationData = async (request: ExtraRequestConfigType) => { | 155 | const setConfigurationData = async (request: ExtraRequestConfigType) => { |
| 157 | await getPublicInterfaceList() | 156 | await getPublicInterfaceList() |
| 158 | - const { requestDataPondId, requestParams, requestParamsBodyType, requestContentType, requestHttpType, requestIntervalUnit, requestInterval, publicInterfaceSelectId } = request | 157 | + const { requestDataPondId, requestParams, requestParamsBodyType, requestContentType, requestHttpType, requestIntervalUnit, requestInterval } = request |
| 159 | const { Header } = requestParams | 158 | const { Header } = requestParams |
| 160 | /** | 159 | /** |
| 161 | * ft 修改 | 160 | * ft 修改 |
| @@ -163,8 +162,7 @@ const setConfigurationData = async (request: ExtraRequestConfigType) => { | @@ -163,8 +162,7 @@ const setConfigurationData = async (request: ExtraRequestConfigType) => { | ||
| 163 | * 源代码 selectedPublicInterface.value = requestDataPondId | 162 | * 源代码 selectedPublicInterface.value = requestDataPondId |
| 164 | * 修改后代码 selectedPublicInterface.value = publicInterfaceList.value.find(it=>it.id === requestDataPondId)?.id||'' | 163 | * 修改后代码 selectedPublicInterface.value = publicInterfaceList.value.find(it=>it.id === requestDataPondId)?.id||'' |
| 165 | */ | 164 | */ |
| 166 | - console.log(publicInterfaceList.value) | ||
| 167 | - selectedPublicInterface.value = publicInterfaceList.value.find(it => it.id === publicInterfaceSelectId)?.id || '' | 165 | + selectedPublicInterface.value = publicInterfaceList.value.find(it => it.id === requestDataPondId)?.id || '' |
| 168 | //ft | 166 | //ft |
| 169 | requestContentTypeRef.value = requestContentType | 167 | requestContentTypeRef.value = requestContentType |
| 170 | requestHttpTypeRef.value = requestHttpType | 168 | requestHttpTypeRef.value = requestHttpType |
| @@ -14,27 +14,23 @@ import { | @@ -14,27 +14,23 @@ import { | ||
| 14 | NTag, | 14 | NTag, |
| 15 | NTooltip, | 15 | NTooltip, |
| 16 | SelectOption, | 16 | SelectOption, |
| 17 | - NDivider, | ||
| 18 | - CascaderOption, | ||
| 19 | - NCascader, | 17 | + NCascader |
| 20 | } from 'naive-ui' | 18 | } from 'naive-ui' |
| 21 | -import { computed, onMounted, reactive, ref, unref } from 'vue' | 19 | +import { computed, ref, unref, onMounted, reactive } from 'vue' |
| 22 | import GlobalParamsConfiguration from './GlobalParamsConfiguration.vue' | 20 | import GlobalParamsConfiguration from './GlobalParamsConfiguration.vue' |
| 23 | import { ChevronDown, ChevronUp } from '@vicons/carbon' | 21 | import { ChevronDown, ChevronUp } from '@vicons/carbon' |
| 24 | import { useDesignStore } from '@/store/modules/designStore/designStore' | 22 | import { useDesignStore } from '@/store/modules/designStore/designStore' |
| 25 | import { selectTimeOptions } from '../../../index.d' | 23 | import { selectTimeOptions } from '../../../index.d' |
| 26 | import { useTargetData } from '../../../../hooks/useTargetData.hook' | 24 | import { useTargetData } from '../../../../hooks/useTargetData.hook' |
| 27 | import { RequestDataTypeEnum, RequestHttpIntervalEnum } from '@/enums/httpEnum' | 25 | import { RequestDataTypeEnum, RequestHttpIntervalEnum } from '@/enums/httpEnum' |
| 28 | -import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d' | ||
| 29 | -import { convertToCascadingData } from '@/utils/external/utils' | 26 | +import { TokenNameEnum, TokenEnum } from '@/enums/external/tokenEnum' |
| 30 | import { customThirdInterfaceRequest, thirdInterfaceRequest } from '@/api/external/customRequest' | 27 | import { customThirdInterfaceRequest, thirdInterfaceRequest } from '@/api/external/customRequest' |
| 28 | +import { CascaderOption } from 'naive-ui' | ||
| 29 | +import { convertToCascadingData } from '@/utils/external/utils' | ||
| 31 | 30 | ||
| 32 | const { PencilIcon } = icon.ionicons5 | 31 | const { PencilIcon } = icon.ionicons5 |
| 33 | - | ||
| 34 | const designStore = useDesignStore() | 32 | const designStore = useDesignStore() |
| 35 | - | ||
| 36 | const editDisabled = ref(false) | 33 | const editDisabled = ref(false) |
| 37 | - | ||
| 38 | const collapseHeaderTable = ref(false) | 34 | const collapseHeaderTable = ref(false) |
| 39 | 35 | ||
| 40 | const { targetData, chartEditStore } = useTargetData() | 36 | const { targetData, chartEditStore } = useTargetData() |
| @@ -43,41 +39,15 @@ const handleCollapse = () => { | @@ -43,41 +39,15 @@ const handleCollapse = () => { | ||
| 43 | collapseHeaderTable.value = !unref(collapseHeaderTable) | 39 | collapseHeaderTable.value = !unref(collapseHeaderTable) |
| 44 | } | 40 | } |
| 45 | 41 | ||
| 46 | -const requestDataPondLength = computed(()=>chartEditStore.getRequestGlobalConfig.requestDataPond.length) | ||
| 47 | - | ||
| 48 | // 颜色 | 42 | // 颜色 |
| 49 | const themeColor = computed(() => { | 43 | const themeColor = computed(() => { |
| 50 | return designStore.getAppTheme | 44 | return designStore.getAppTheme |
| 51 | }) | 45 | }) |
| 52 | 46 | ||
| 53 | -const selectGlobalPondValue = ref('') | ||
| 54 | - | ||
| 55 | -const cacheSelectOption = ref<Recordable>({ | ||
| 56 | - dataPondRequestConfig:{ | ||
| 57 | - pondRequestOriginUrl:'', | ||
| 58 | - pondRequestUrl:'', | ||
| 59 | - pondRequestHttpType:'', | ||
| 60 | - pondRequestParams: { | ||
| 61 | - "Body": { | ||
| 62 | - "form-data": {}, | ||
| 63 | - "x-www-form-urlencoded": {}, | ||
| 64 | - "json": "", | ||
| 65 | - "xml": "" | ||
| 66 | - }, | ||
| 67 | - "Header": {}, | ||
| 68 | - "Params": {} | ||
| 69 | - }, | ||
| 70 | - requestVerificationToken:'', | ||
| 71 | - } | ||
| 72 | -}) | 47 | +//第三方接口相关代码 |
| 48 | +const verifiationValue = ref(TokenEnum.DEFAULT_TOKEN) | ||
| 73 | 49 | ||
| 74 | -const selectGlobalPondOptions = computed(() => { | ||
| 75 | - return chartEditStore.getRequestGlobalConfig.requestDataPond.map(dataPond=>({ | ||
| 76 | - value:dataPond.dataPondId, | ||
| 77 | - label:dataPond.dataPondName, | ||
| 78 | - ...dataPond | ||
| 79 | - })) | ||
| 80 | -}) | 50 | +const tokenString = ref('') |
| 81 | 51 | ||
| 82 | const getTokenString = ref() | 52 | const getTokenString = ref() |
| 83 | 53 | ||
| @@ -92,53 +62,76 @@ const cascaderConfig = reactive({ | @@ -92,53 +62,76 @@ const cascaderConfig = reactive({ | ||
| 92 | showPath: true | 62 | showPath: true |
| 93 | }) | 63 | }) |
| 94 | 64 | ||
| 95 | -const handleResCascader = (value: string | number, options: Recordable) => { | ||
| 96 | - targetData.value.request.thirdSelectCascaderLabel = options.label | ||
| 97 | - getTokenString.value = value as string | number | ||
| 98 | - targetData.value.request.requestVerificationToken = value as string | ||
| 99 | - targetData.value.request.requestDataType = RequestDataTypeEnum.AJAX | ||
| 100 | -} | 65 | +const requestTokenSuffix = ref('Bearer') |
| 101 | 66 | ||
| 102 | -const findCurrentPond = () => { | ||
| 103 | - return selectGlobalPondOptions.value.find((pondItem: RequestDataPondItemType & {label: string, value: string}) => pondItem.dataPondId === targetData.value?.request?.requestDataPondId) | ||
| 104 | -} | 67 | +const requestTokenKey = ref('Token') |
| 105 | 68 | ||
| 106 | -const handleSelectGlobalPond = (_:string, options:RequestDataPondItemType & {label: string, value: string}) => { | ||
| 107 | - cacheSelectOption.value = options | ||
| 108 | - targetData.value.request = options.dataPondRequestConfig | ||
| 109 | - targetData.value.request.requestDataPondId = options.dataPondId | ||
| 110 | - getTokenString.value ='' | 69 | +//验证方式 |
| 70 | +const verificationMethods = [ | ||
| 71 | + { | ||
| 72 | + label: TokenNameEnum.DEFAULT_TOKEN, | ||
| 73 | + value: TokenEnum.DEFAULT_TOKEN | ||
| 74 | + }, | ||
| 75 | + { | ||
| 76 | + label: TokenNameEnum.TOKEN_STRING, | ||
| 77 | + value: TokenEnum.TOKEN_STRING | ||
| 78 | + }, | ||
| 79 | + { | ||
| 80 | + label: TokenNameEnum.NO_VERIFICATION, | ||
| 81 | + value: TokenEnum.NO_VERIFICATION | ||
| 82 | + } | ||
| 83 | +] | ||
| 84 | + | ||
| 85 | +const hasDefaultToken = (value: string[]) => value.includes(TokenEnum.DEFAULT_TOKEN) | ||
| 86 | + | ||
| 87 | +const hasTokenString = (value: string[]) => value.includes(TokenEnum.TOKEN_STRING) | ||
| 88 | + | ||
| 89 | +const handleVerificationUpdate = (value: string) => { | ||
| 90 | + chartEditStore.getRequestGlobalConfig.requestVerificationMethods = value | ||
| 91 | + hasTokenString([value]) | ||
| 92 | + hasDefaultToken([value]) | ||
| 93 | + resValue.value = null | ||
| 111 | resOptions.value = [] | 94 | resOptions.value = [] |
| 112 | - resValue.value=null | ||
| 113 | - handleExecuteRequest() | 95 | + getTokenString.value = '' |
| 96 | + requestTokenKey.value = '' | ||
| 97 | + requestTokenSuffix.value = '' | ||
| 98 | +} | ||
| 99 | + | ||
| 100 | +const handleResCascader = (value: string | number) => { | ||
| 101 | + getTokenString.value = value as string | number | ||
| 102 | + chartEditStore.getRequestGlobalConfig.requestVerificationToken = value as string | ||
| 103 | + targetData.value.request.requestVerificationToken = value as string | ||
| 104 | + targetData.value.request.requestDataType = RequestDataTypeEnum.AJAX | ||
| 114 | } | 105 | } |
| 115 | 106 | ||
| 116 | //执行请求获取三方Token | 107 | //执行请求获取三方Token |
| 117 | const handleExecuteRequest = async () => { | 108 | const handleExecuteRequest = async () => { |
| 118 | try { | 109 | try { |
| 119 | - const originUrlString = cacheSelectOption.value?.dataPondRequestConfig?.pondRequestOriginUrl | ||
| 120 | - const requestUrlString = cacheSelectOption.value?.dataPondRequestConfig?.pondRequestUrl | ||
| 121 | - const body = cacheSelectOption.value?.dataPondRequestConfig?.pondRequestParams['Body']['json'] | ||
| 122 | - if(originUrlString && requestUrlString){ | ||
| 123 | - const request = { | ||
| 124 | - requestOriginUrl: `${originUrlString}${requestUrlString}`, | ||
| 125 | - body | ||
| 126 | - } | ||
| 127 | - const res = await customThirdInterfaceRequest(request as unknown as thirdInterfaceRequest) | ||
| 128 | - resOptions.value = convertToCascadingData(res) as unknown as CascaderOption[] | 110 | + const request = { |
| 111 | + requestOriginUrl: chartEditStore.getRequestGlobalConfig.requestOriginUrl, | ||
| 112 | + body: chartEditStore.getRequestGlobalConfig.requestParams.Header | ||
| 129 | } | 113 | } |
| 114 | + const res = await customThirdInterfaceRequest(request as thirdInterfaceRequest) | ||
| 115 | + resOptions.value = convertToCascadingData(res) as unknown as CascaderOption[] | ||
| 116 | + chartEditStore.getRequestGlobalConfig.requestVerificationMethods = verifiationValue.value | ||
| 117 | + chartEditStore.getRequestGlobalConfig.requestVerificationToken = resValue.value as string | ||
| 118 | + chartEditStore.getRequestGlobalConfig.requestTokenKey = requestTokenKey.value | ||
| 119 | + chartEditStore.getRequestGlobalConfig.requestTokenSuffix = requestTokenSuffix.value | ||
| 120 | + //存储到当前组件的请求对象里 | ||
| 121 | + targetData.value.request.requestTokenSuffix = requestTokenSuffix.value | ||
| 122 | + targetData.value.request.requestTokenKey = requestTokenKey.value | ||
| 130 | } catch (e) { | 123 | } catch (e) { |
| 131 | getTokenString.value = JSON.stringify(e) as string | 124 | getTokenString.value = JSON.stringify(e) as string |
| 132 | } | 125 | } |
| 133 | } | 126 | } |
| 134 | 127 | ||
| 135 | -onMounted(()=>{ | ||
| 136 | - getTokenString.value = targetData.value?.request?.requestVerificationToken | ||
| 137 | - selectGlobalPondValue.value = findCurrentPond()?.dataPondId as string | ||
| 138 | - cacheSelectOption.value = findCurrentPond() as RequestDataPondItemType | ||
| 139 | - resValue.value = targetData.value?.request?.thirdSelectCascaderLabel | ||
| 140 | - handleExecuteRequest() | 128 | +onMounted(() => { |
| 129 | + getTokenString.value = chartEditStore.getRequestGlobalConfig.requestVerificationToken | ||
| 130 | + verifiationValue.value = chartEditStore.getRequestGlobalConfig.requestVerificationMethods || TokenEnum.DEFAULT_TOKEN | ||
| 131 | + requestTokenKey.value = chartEditStore.getRequestGlobalConfig.requestTokenKey! | ||
| 132 | + requestTokenSuffix.value = chartEditStore.getRequestGlobalConfig.requestTokenSuffix! | ||
| 141 | }) | 133 | }) |
| 134 | +// | ||
| 142 | </script> | 135 | </script> |
| 143 | 136 | ||
| 144 | <template> | 137 | <template> |
| @@ -146,7 +139,7 @@ onMounted(()=>{ | @@ -146,7 +139,7 @@ onMounted(()=>{ | ||
| 146 | <template #header> | 139 | <template #header> |
| 147 | <NTag type="info">全局公共配置</NTag> | 140 | <NTag type="info">全局公共配置</NTag> |
| 148 | </template> | 141 | </template> |
| 149 | - <NSpace v-if="requestDataPondLength<=0" vertical> | 142 | + <NSpace vertical> |
| 150 | <SettingItemBox | 143 | <SettingItemBox |
| 151 | name="服务" | 144 | name="服务" |
| 152 | :itemRightStyle="{ | 145 | :itemRightStyle="{ |
| @@ -195,56 +188,43 @@ onMounted(()=>{ | @@ -195,56 +188,43 @@ onMounted(()=>{ | ||
| 195 | 编辑配置 | 188 | 编辑配置 |
| 196 | </NButton> | 189 | </NButton> |
| 197 | </SettingItemBox> | 190 | </SettingItemBox> |
| 191 | + <!-- 针对第三方接口 --> | ||
| 192 | + <SettingItemBox | ||
| 193 | + name="验证方式" | ||
| 194 | + :itemRightStyle="{ | ||
| 195 | + gridTemplateColumns: '5fr 2fr 1fr' | ||
| 196 | + }" | ||
| 197 | + > | ||
| 198 | + <n-radio-group v-model:value="verifiationValue" name="radiogroup" @update:value="handleVerificationUpdate"> | ||
| 199 | + <n-space> | ||
| 200 | + <n-radio | ||
| 201 | + v-for="verificationItem in verificationMethods" | ||
| 202 | + :key="verificationItem.value" | ||
| 203 | + :value="verificationItem.value" | ||
| 204 | + > | ||
| 205 | + {{ verificationItem.label }} | ||
| 206 | + </n-radio> | ||
| 207 | + </n-space> | ||
| 208 | + </n-radio-group> | ||
| 209 | + </SettingItemBox> | ||
| 210 | + <SettingItemBox v-if="hasDefaultToken([verifiationValue])" name="配置"> | ||
| 211 | + <SettingItem name="Token前缀"> | ||
| 212 | + <n-input v-model:value.trim="requestTokenSuffix" type="text" placeholder="例如:Bearer" /> | ||
| 213 | + </SettingItem> | ||
| 214 | + <SettingItem name="Token键"> | ||
| 215 | + <n-input v-model:value.trim="requestTokenKey" type="text" placeholder="例如:X-Authorization" /> | ||
| 216 | + </SettingItem> | ||
| 217 | + </SettingItemBox> | ||
| 198 | <NCollapseTransition :show="collapseHeaderTable"> | 218 | <NCollapseTransition :show="collapseHeaderTable"> |
| 199 | - <GlobalParamsConfiguration /> | ||
| 200 | - </NCollapseTransition> | ||
| 201 | - <section class="arrow"> | ||
| 202 | - <NTooltip> | ||
| 203 | - <template #trigger> | ||
| 204 | - <NIcon @click="handleCollapse" size="30"> | ||
| 205 | - <ChevronDown v-show="!collapseHeaderTable" /> | ||
| 206 | - <ChevronUp v-show="collapseHeaderTable" /> | ||
| 207 | - </NIcon> | ||
| 208 | - </template> | ||
| 209 | - <span>{{ collapseHeaderTable ? '收起' : '展开' }}</span> | ||
| 210 | - </NTooltip> | ||
| 211 | - </section> | ||
| 212 | - </NSpace> | ||
| 213 | - <div v-else> | ||
| 214 | - <NSelect | ||
| 215 | - v-model:value="selectGlobalPondValue" | ||
| 216 | - placeholder="请选择全局公共配置" | ||
| 217 | - class="select-time-options" | ||
| 218 | - size="small" | ||
| 219 | - clearable | ||
| 220 | - :options="selectGlobalPondOptions" | ||
| 221 | - @update:value="handleSelectGlobalPond" | 219 | + <GlobalParamsConfiguration v-if="hasDefaultToken([verifiationValue])" /> |
| 220 | + <n-input | ||
| 221 | + v-else-if="hasTokenString([verifiationValue])" | ||
| 222 | + v-model:value="tokenString" | ||
| 223 | + type="text" | ||
| 224 | + placeholder="请输入令牌字符串" | ||
| 222 | /> | 225 | /> |
| 223 | - <NDivider /> | ||
| 224 | - <SettingItemBox name="配置信息" v-if="selectGlobalPondValue" :itemRightStyle="{ | ||
| 225 | - gridTemplateColumns: '5fr 2fr 1fr' | ||
| 226 | - }"> | ||
| 227 | - <SettingItem name="源地址"> | ||
| 228 | - <NInput | ||
| 229 | - v-model:value="cacheSelectOption.dataPondRequestConfig.pondRequestOriginUrl" | ||
| 230 | - disabled | ||
| 231 | - ></NInput> | ||
| 232 | - </SettingItem> | ||
| 233 | - <SettingItem name="url地址"> | ||
| 234 | - <NInput | ||
| 235 | - v-model:value="cacheSelectOption.dataPondRequestConfig.pondRequestUrl" | ||
| 236 | - disabled | ||
| 237 | - ></NInput> | ||
| 238 | - </SettingItem> | ||
| 239 | - <SettingItem name="请求方式"> | ||
| 240 | - <NInput | ||
| 241 | - v-model:value="cacheSelectOption.dataPondRequestConfig.pondRequestHttpType" | ||
| 242 | - disabled | ||
| 243 | - ></NInput> | ||
| 244 | - </SettingItem> | ||
| 245 | - </SettingItemBox> | ||
| 246 | - <NDivider /> | ||
| 247 | - <div style="margin:0 70px" v-if="selectGlobalPondValue"> | 226 | + <n-empty v-else description="无"> </n-empty> |
| 227 | + <div style="margin-top: 10px"> | ||
| 248 | <n-space vertical> | 228 | <n-space vertical> |
| 249 | <n-button type="primary" @click="handleExecuteRequest">执行请求</n-button> | 229 | <n-button type="primary" @click="handleExecuteRequest">执行请求</n-button> |
| 250 | <NCascader | 230 | <NCascader |
| @@ -268,7 +248,20 @@ onMounted(()=>{ | @@ -268,7 +248,20 @@ onMounted(()=>{ | ||
| 268 | /> | 248 | /> |
| 269 | </n-space> | 249 | </n-space> |
| 270 | </div> | 250 | </div> |
| 271 | - </div> | 251 | + <!-- 针对第三方接口 --> |
| 252 | + </NCollapseTransition> | ||
| 253 | + <section class="arrow"> | ||
| 254 | + <NTooltip> | ||
| 255 | + <template #trigger> | ||
| 256 | + <NIcon @click="handleCollapse" size="30"> | ||
| 257 | + <ChevronDown v-show="!collapseHeaderTable" /> | ||
| 258 | + <ChevronUp v-show="collapseHeaderTable" /> | ||
| 259 | + </NIcon> | ||
| 260 | + </template> | ||
| 261 | + <span>{{ collapseHeaderTable ? '收起' : '展开' }}</span> | ||
| 262 | + </NTooltip> | ||
| 263 | + </section> | ||
| 264 | + </NSpace> | ||
| 272 | </NCard> | 265 | </NCard> |
| 273 | </template> | 266 | </template> |
| 274 | 267 |
src/views/chart/ContentConfigurations/components/ChartData/external/components/RequestModal/PondDataRequest.vue
deleted
100644 → 0
| 1 | -<template> | ||
| 2 | - <n-modal | ||
| 3 | - class="go-chart-data-request" | ||
| 4 | - v-model:show="modelShowRef" | ||
| 5 | - :mask-closable="false" | ||
| 6 | - :closeOnEsc="true" | ||
| 7 | - :onEsc="onEsc" | ||
| 8 | - > | ||
| 9 | - <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px"> | ||
| 10 | - <template #header></template> | ||
| 11 | - <template #header-extra> </template> | ||
| 12 | - <n-scrollbar style="max-height: 718px"> | ||
| 13 | - <div class="go-pr-3"> | ||
| 14 | - <n-space vertical> | ||
| 15 | - <PondPublicConfiguration ref="pondPublicConfigurationRef" /> | ||
| 16 | - <NDivider /> | ||
| 17 | - <PondRequestConfiguration ref="pondRequestConfigurationRef" /> | ||
| 18 | - </n-space> | ||
| 19 | - </div> | ||
| 20 | - </n-scrollbar> | ||
| 21 | - <!-- 底部 --> | ||
| 22 | - <template #action> | ||
| 23 | - <n-space justify="space-between"> | ||
| 24 | - <n-space v-if="targetDataRequest"> | ||
| 25 | - <n-tag :bordered="false" type="primary">名称:</n-tag> | ||
| 26 | - <n-input | ||
| 27 | - v-model:value="targetDataRequest.dataPondName" | ||
| 28 | - ref="inputInstRef" | ||
| 29 | - type="text" | ||
| 30 | - size="small" | ||
| 31 | - :autofocus="true" | ||
| 32 | - :clearable="true" | ||
| 33 | - :minlength="1" | ||
| 34 | - :maxlength="16" | ||
| 35 | - placeholder="请输入名称" | ||
| 36 | - ></n-input> | ||
| 37 | - </n-space> | ||
| 38 | - <span v-else></span> | ||
| 39 | - <n-space> | ||
| 40 | - <n-button @click="closeHandle">取消</n-button> | ||
| 41 | - <n-button type="primary" @click="closeAndSendHandle">保存</n-button> | ||
| 42 | - </n-space> | ||
| 43 | - </n-space> | ||
| 44 | - </template> | ||
| 45 | - </n-card> | ||
| 46 | - </n-modal> | ||
| 47 | -</template> | ||
| 48 | - | ||
| 49 | -<script script lang="ts" setup> | ||
| 50 | -import { PropType, ref, watch, onMounted, nextTick } from 'vue' | ||
| 51 | -import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d' | ||
| 52 | -import { goDialog } from '@/utils' | ||
| 53 | -import PondPublicConfiguration from './PondPublicConfiguration.vue' | ||
| 54 | -import PondRequestConfiguration from './PondRequestConfiguration.vue' | ||
| 55 | -import { merge } from 'lodash' | ||
| 56 | -import { useTargetData } from '../../../../hooks/useTargetData.hook' | ||
| 57 | - | ||
| 58 | -const props = defineProps({ | ||
| 59 | - modelShow: Boolean, | ||
| 60 | - targetDataRequest: Object as PropType<RequestDataPondItemType>, | ||
| 61 | -}) | ||
| 62 | - | ||
| 63 | -const { targetData } = useTargetData() | ||
| 64 | - | ||
| 65 | -const pondPublicConfigurationRef = ref<InstanceType<typeof PondPublicConfiguration>>() | ||
| 66 | - | ||
| 67 | -const pondRequestConfigurationRef = ref<InstanceType<typeof PondRequestConfiguration>>() | ||
| 68 | - | ||
| 69 | -const emit = defineEmits(['update:modelShow', 'editSaveHandle']) | ||
| 70 | - | ||
| 71 | -const inputInstRef = ref() | ||
| 72 | - | ||
| 73 | -const modelShowRef = ref(false) | ||
| 74 | - | ||
| 75 | -watch( | ||
| 76 | - () => props.modelShow, | ||
| 77 | - newValue => { | ||
| 78 | - modelShowRef.value = newValue | ||
| 79 | - if(newValue) { | ||
| 80 | - nextTick(() => { | ||
| 81 | - pondPublicConfigurationRef?.value?.setConfigurationData(props.targetDataRequest?.dataPondRequestConfig as unknown as RequestDataPondItemType) | ||
| 82 | - pondRequestConfigurationRef?.value?.setConfigurationData(props.targetDataRequest?.dataPondRequestConfig as unknown as RequestDataPondItemType) | ||
| 83 | - }) | ||
| 84 | - } | ||
| 85 | - } | ||
| 86 | -) | ||
| 87 | - | ||
| 88 | -const closeHandle = () => { | ||
| 89 | - emit('update:modelShow', false) | ||
| 90 | -} | ||
| 91 | - | ||
| 92 | -const closeAndSendHandle = () => { | ||
| 93 | - if (!props.targetDataRequest?.dataPondName) { | ||
| 94 | - window.$message.warning('请在左下角输入名称!') | ||
| 95 | - inputInstRef.value?.focus() | ||
| 96 | - return | ||
| 97 | - } | ||
| 98 | - const pondPublicData = pondPublicConfigurationRef?.value?.getConfigurationData() | ||
| 99 | - const pondRequestData = pondRequestConfigurationRef?.value?.getConfigurationData() | ||
| 100 | - merge(props.targetDataRequest.dataPondRequestConfig, pondRequestData, pondPublicData) | ||
| 101 | - goDialog({ | ||
| 102 | - message: '保存内容将同步修改所有使用此接口的组件, 是否继续?', | ||
| 103 | - isMaskClosable: true, | ||
| 104 | - transformOrigin: 'center', | ||
| 105 | - onPositiveCallback: () => { | ||
| 106 | - emit('update:modelShow', false) | ||
| 107 | - emit('editSaveHandle', props.targetDataRequest) | ||
| 108 | - } | ||
| 109 | - }) | ||
| 110 | -} | ||
| 111 | - | ||
| 112 | -const onEsc = () => { | ||
| 113 | - closeHandle() | ||
| 114 | -} | ||
| 115 | - | ||
| 116 | -onMounted(()=>{ | ||
| 117 | - pondPublicConfigurationRef?.value?.setConfigurationData(targetData.value.request) | ||
| 118 | -}) | ||
| 119 | -</script> | ||
| 120 | - | ||
| 121 | -<style lang="scss" scoped> | ||
| 122 | -@include go('chart-data-request') { | ||
| 123 | - &.n-card.n-modal, | ||
| 124 | - .n-card { | ||
| 125 | - @extend .go-background-filter; | ||
| 126 | - } | ||
| 127 | - .n-card-shallow { | ||
| 128 | - background-color: rgba(0, 0, 0, 0) !important; | ||
| 129 | - } | ||
| 130 | - @include deep() { | ||
| 131 | - & > .n-card__content { | ||
| 132 | - padding-right: 0; | ||
| 133 | - } | ||
| 134 | - .n-card__content { | ||
| 135 | - padding-bottom: 5px; | ||
| 136 | - } | ||
| 137 | - } | ||
| 138 | -} | ||
| 139 | -</style> |
src/views/chart/ContentConfigurations/components/ChartData/external/components/RequestModal/PondPublicConfiguration.vue
deleted
100644 → 0
| 1 | -<script lang="ts" setup name="PondPublicConfiguration"> | ||
| 2 | -import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting' | ||
| 3 | -import { icon } from '@/plugins' | ||
| 4 | -import { | ||
| 5 | - NButton, | ||
| 6 | - NCard, | ||
| 7 | - NCollapseTransition, | ||
| 8 | - NIcon, | ||
| 9 | - NInput, | ||
| 10 | - NInputGroup, | ||
| 11 | - NInputNumber, | ||
| 12 | - NSelect, | ||
| 13 | - NSpace, | ||
| 14 | - NTag, | ||
| 15 | - NTooltip, | ||
| 16 | - SelectOption, | ||
| 17 | -} from 'naive-ui' | ||
| 18 | -import { computed, ref, unref } from 'vue' | ||
| 19 | -import GlobalParamsConfiguration from './GlobalParamsConfiguration.vue' | ||
| 20 | -import { ChevronDown, ChevronUp } from '@vicons/carbon' | ||
| 21 | -import { useDesignStore } from '@/store/modules/designStore/designStore' | ||
| 22 | -import { selectTimeOptions } from '../../../index.d' | ||
| 23 | -import { RequestHttpIntervalEnum } from '@/enums/httpEnum' | ||
| 24 | - | ||
| 25 | -const { PencilIcon } = icon.ionicons5 | ||
| 26 | - | ||
| 27 | -const designStore = useDesignStore() | ||
| 28 | - | ||
| 29 | -const editDisabled = ref(false) | ||
| 30 | - | ||
| 31 | -const collapseHeaderTable = ref(false) | ||
| 32 | - | ||
| 33 | -const pondRequestOriginUrlRef= ref('') | ||
| 34 | - | ||
| 35 | -const pondRequestIntervalRef = ref() | ||
| 36 | - | ||
| 37 | -const pondRequestIntervalUnitRef = ref('') | ||
| 38 | - | ||
| 39 | -const pondRequestGlobalTokenSuffixRef = ref('') | ||
| 40 | - | ||
| 41 | -const pondRequestGlobalTokenKeyRef = ref('') | ||
| 42 | - | ||
| 43 | -const handleCollapse = () => { | ||
| 44 | - collapseHeaderTable.value = !unref(collapseHeaderTable) | ||
| 45 | -} | ||
| 46 | - | ||
| 47 | -// 颜色 | ||
| 48 | -const themeColor = computed(() => { | ||
| 49 | - return designStore.getAppTheme | ||
| 50 | -}) | ||
| 51 | - | ||
| 52 | -const getConfigurationData = (): Recordable => { | ||
| 53 | - return { | ||
| 54 | - pondRequestOriginUrl: unref(pondRequestOriginUrlRef), | ||
| 55 | - pondRequestInterval: unref(pondRequestIntervalRef), | ||
| 56 | - pondRequestIntervalUnit: unref(pondRequestIntervalUnitRef), | ||
| 57 | - pondRequestGlobalTokenSuffix: unref(pondRequestGlobalTokenSuffixRef), | ||
| 58 | - pondRequestGlobalTokenKey: unref(pondRequestGlobalTokenKeyRef), | ||
| 59 | - } | ||
| 60 | -} | ||
| 61 | - | ||
| 62 | -const setConfigurationData = (request: Recordable) => { | ||
| 63 | - const { pondRequestOriginUrl, pondRequestInterval, pondRequestIntervalUnit, pondRequestGlobalTokenSuffix, pondRequestGlobalTokenKey } = request | ||
| 64 | - pondRequestOriginUrlRef.value = pondRequestOriginUrl | ||
| 65 | - pondRequestIntervalRef.value = pondRequestInterval | ||
| 66 | - pondRequestIntervalUnitRef.value = pondRequestIntervalUnit | ||
| 67 | - pondRequestGlobalTokenSuffixRef.value = pondRequestGlobalTokenSuffix | ||
| 68 | - pondRequestGlobalTokenKeyRef.value = pondRequestGlobalTokenKey | ||
| 69 | -} | ||
| 70 | - | ||
| 71 | -defineExpose({ | ||
| 72 | - getConfigurationData, | ||
| 73 | - setConfigurationData | ||
| 74 | -}) | ||
| 75 | -</script> | ||
| 76 | - | ||
| 77 | -<template> | ||
| 78 | - <NCard> | ||
| 79 | - <template #header> | ||
| 80 | - <NTag type="info">全局公共配置</NTag> | ||
| 81 | - </template> | ||
| 82 | - <NSpace vertical> | ||
| 83 | - <SettingItemBox | ||
| 84 | - name="服务" | ||
| 85 | - :itemRightStyle="{ | ||
| 86 | - gridTemplateColumns: '5fr 2fr 1fr' | ||
| 87 | - }" | ||
| 88 | - > | ||
| 89 | - <!-- 源地址 --> | ||
| 90 | - <SettingItem name="前置 URL"> | ||
| 91 | - <NInput | ||
| 92 | - v-model:value="pondRequestOriginUrlRef" | ||
| 93 | - default-value="http://127.0.0.1" | ||
| 94 | - :disabled="editDisabled" | ||
| 95 | - size="small" | ||
| 96 | - placeholder="例:http://127.0.0.1" | ||
| 97 | - ></NInput> | ||
| 98 | - </SettingItem> | ||
| 99 | - <SettingItem name="更新间隔,为 0 只会初始化"> | ||
| 100 | - <NInputGroup> | ||
| 101 | - <NInputNumber | ||
| 102 | - v-model:value="pondRequestIntervalRef" | ||
| 103 | - class="select-time-number" | ||
| 104 | - size="small" | ||
| 105 | - min="0" | ||
| 106 | - :show-button="false" | ||
| 107 | - :disabled="editDisabled" | ||
| 108 | - placeholder="请输入数字" | ||
| 109 | - > | ||
| 110 | - </NInputNumber> | ||
| 111 | - <!-- 单位 --> | ||
| 112 | - <NSelect | ||
| 113 | - v-model:value="pondRequestIntervalUnitRef" | ||
| 114 | - class="select-time-options" | ||
| 115 | - size="small" | ||
| 116 | - :default-value="RequestHttpIntervalEnum.SECOND" | ||
| 117 | - :options="selectTimeOptions as SelectOption[]" | ||
| 118 | - :disabled="editDisabled" | ||
| 119 | - /> | ||
| 120 | - </NInputGroup> | ||
| 121 | - </SettingItem> | ||
| 122 | - <NButton v-show="editDisabled" type="primary" ghost @click="editDisabled = false"> | ||
| 123 | - <template #icon> | ||
| 124 | - <NIcon> | ||
| 125 | - <PencilIcon /> | ||
| 126 | - </NIcon> | ||
| 127 | - </template> | ||
| 128 | - 编辑配置 | ||
| 129 | - </NButton> | ||
| 130 | - </SettingItemBox> | ||
| 131 | - <!-- 针对第三方接口 --> | ||
| 132 | - <SettingItemBox name="配置"> | ||
| 133 | - <SettingItem name="Token前缀"> | ||
| 134 | - <n-input v-model:value.trim="pondRequestGlobalTokenSuffixRef" type="text" placeholder="例如:Bearer" /> | ||
| 135 | - </SettingItem> | ||
| 136 | - <SettingItem name="Token键值"> | ||
| 137 | - <n-input v-model:value.trim="pondRequestGlobalTokenKeyRef" type="text" placeholder="例如:Token" /> | ||
| 138 | - </SettingItem> | ||
| 139 | - </SettingItemBox> | ||
| 140 | - <NCollapseTransition :show="collapseHeaderTable"> | ||
| 141 | - <GlobalParamsConfiguration /> | ||
| 142 | - <!-- 针对第三方接口 --> | ||
| 143 | - </NCollapseTransition> | ||
| 144 | - <section class="arrow"> | ||
| 145 | - <NTooltip> | ||
| 146 | - <template #trigger> | ||
| 147 | - <NIcon @click="handleCollapse" size="30"> | ||
| 148 | - <ChevronDown v-show="!collapseHeaderTable" /> | ||
| 149 | - <ChevronUp v-show="collapseHeaderTable" /> | ||
| 150 | - </NIcon> | ||
| 151 | - </template> | ||
| 152 | - <span>{{ collapseHeaderTable ? '收起' : '展开' }}</span> | ||
| 153 | - </NTooltip> | ||
| 154 | - </section> | ||
| 155 | - </NSpace> | ||
| 156 | - </NCard> | ||
| 157 | -</template> | ||
| 158 | - | ||
| 159 | -<style lang="scss" scoped> | ||
| 160 | -.arrow { | ||
| 161 | - display: flex; | ||
| 162 | - justify-content: center; | ||
| 163 | - align-items: center; | ||
| 164 | - cursor: pointer; | ||
| 165 | - | ||
| 166 | - &:hover { | ||
| 167 | - color: v-bind('themeColor'); | ||
| 168 | - } | ||
| 169 | -} | ||
| 170 | -</style> |
src/views/chart/ContentConfigurations/components/ChartData/external/components/RequestModal/PondRequestConfiguration.vue
deleted
100644 → 0
| 1 | -<script setup lang="ts"> | ||
| 2 | -import { NInput, NInputNumber, NInputGroup, NSelect, SelectOption, NTabs, NTabPane } from 'naive-ui' | ||
| 3 | -import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting' | ||
| 4 | -import { selectTimeOptions, selectTypeOptions } from '../../../index.d' | ||
| 5 | -import { | ||
| 6 | - RequestBodyEnum, | ||
| 7 | - RequestContentTypeEnum, | ||
| 8 | - RequestHttpEnum, | ||
| 9 | - RequestHttpIntervalEnum, | ||
| 10 | - RequestParams | ||
| 11 | -} from '@/enums/httpEnum' | ||
| 12 | -import { ref, unref } from 'vue' | ||
| 13 | -import DefaultRequestContent from './DefaultRequestContent.vue' | ||
| 14 | -import SqlConfiguration from './SqlConfiguration.vue' | ||
| 15 | - | ||
| 16 | -const pondRequestContentTypeRef = ref(RequestContentTypeEnum.DEFAULT) | ||
| 17 | - | ||
| 18 | -const pondRequestHttpTypeRef = ref(RequestHttpEnum.GET) | ||
| 19 | - | ||
| 20 | -const pondRequestIntervalRef = ref<number | undefined>(20) | ||
| 21 | - | ||
| 22 | -const pondRequestIntervalUnitRef = ref(RequestHttpIntervalEnum.SECOND) | ||
| 23 | - | ||
| 24 | -const pondRequestSQLContentRef = ref('select * from where') | ||
| 25 | - | ||
| 26 | -const pondRequestParamsRef = ref({ | ||
| 27 | - Header: {}, | ||
| 28 | - Params: {}, | ||
| 29 | - Body: { 'form-data': {}, json: '', 'x-www-form-urlencoded': {}, xml: '' } | ||
| 30 | -} as RequestParams) | ||
| 31 | - | ||
| 32 | -const pondRequestParamsBodyTypeRef = ref(RequestBodyEnum.NONE) | ||
| 33 | - | ||
| 34 | -const pondRequestUrlRef = ref<string>() | ||
| 35 | - | ||
| 36 | -const getConfigurationData = (): Recordable => { | ||
| 37 | - return { | ||
| 38 | - pondRequestInterval: unref(pondRequestIntervalRef), | ||
| 39 | - pondRequestIntervalUnit: unref(pondRequestIntervalUnitRef), | ||
| 40 | - pondRequestHttpType: unref(pondRequestHttpTypeRef), | ||
| 41 | - pondRequestUrl: unref(pondRequestUrlRef), | ||
| 42 | - pondRequestContentType: unref(pondRequestContentTypeRef), | ||
| 43 | - pondRequestSQLContent: unref(pondRequestSQLContentRef), | ||
| 44 | - pondRequestParamsBodyType: unref(pondRequestParamsBodyTypeRef), | ||
| 45 | - pondRequestParams: unref(pondRequestParamsRef) | ||
| 46 | - } | ||
| 47 | -} | ||
| 48 | - | ||
| 49 | -const setConfigurationData = (request: Recordable) => { | ||
| 50 | - const { | ||
| 51 | - pondRequestInterval, | ||
| 52 | - pondRequestIntervalUnit, | ||
| 53 | - pondRequestHttpType, | ||
| 54 | - pondRequestUrl, | ||
| 55 | - pondRequestContentType, | ||
| 56 | - pondRequestSQLContent, | ||
| 57 | - pondRequestParamsBodyType, | ||
| 58 | - pondRequestParams | ||
| 59 | - } = request | ||
| 60 | - pondRequestIntervalRef.value = pondRequestInterval | ||
| 61 | - pondRequestIntervalUnitRef.value = pondRequestIntervalUnit | ||
| 62 | - pondRequestHttpTypeRef.value = pondRequestHttpType | ||
| 63 | - pondRequestUrlRef.value = pondRequestUrl | ||
| 64 | - pondRequestContentTypeRef.value = pondRequestContentType | ||
| 65 | - pondRequestSQLContentRef.value = pondRequestSQLContent | ||
| 66 | - pondRequestParamsBodyTypeRef.value = pondRequestParamsBodyType | ||
| 67 | - pondRequestParamsRef.value = pondRequestParams | ||
| 68 | -} | ||
| 69 | - | ||
| 70 | -defineExpose({ | ||
| 71 | - getConfigurationData, | ||
| 72 | - setConfigurationData | ||
| 73 | -}) | ||
| 74 | -</script> | ||
| 75 | - | ||
| 76 | -<template> | ||
| 77 | - <SettingItemBox | ||
| 78 | - name="地址" | ||
| 79 | - :itemRightStyle="{ | ||
| 80 | - gridTemplateColumns: '5fr 2fr 1fr' | ||
| 81 | - }" | ||
| 82 | - > | ||
| 83 | - <SettingItem name="请求方式 & URL地址"> | ||
| 84 | - <NInputGroup> | ||
| 85 | - <NSelect | ||
| 86 | - v-model:value="pondRequestHttpTypeRef" | ||
| 87 | - style="width: 150px" | ||
| 88 | - size="small" | ||
| 89 | - :options="(selectTypeOptions as SelectOption[])" | ||
| 90 | - /> | ||
| 91 | - <NInput | ||
| 92 | - v-model:value="pondRequestUrlRef" | ||
| 93 | - class="select-time-number" | ||
| 94 | - size="small" | ||
| 95 | - min="0" | ||
| 96 | - :show-button="false" | ||
| 97 | - placeholder="请输入URL地址" | ||
| 98 | - /> | ||
| 99 | - </NInputGroup> | ||
| 100 | - </SettingItem> | ||
| 101 | - <SettingItem name="更新间隔,为 0 只会初始化"> | ||
| 102 | - <NInputGroup> | ||
| 103 | - <NInputNumber | ||
| 104 | - v-model:value="pondRequestIntervalRef" | ||
| 105 | - class="select-time-number" | ||
| 106 | - size="small" | ||
| 107 | - min="0" | ||
| 108 | - :show-button="false" | ||
| 109 | - placeholder="请输入数字" | ||
| 110 | - /> | ||
| 111 | - <!-- 单位 --> | ||
| 112 | - <NSelect | ||
| 113 | - v-model:value="pondRequestIntervalUnitRef" | ||
| 114 | - class="select-time-options" | ||
| 115 | - size="small" | ||
| 116 | - :options="(selectTimeOptions as SelectOption[])" | ||
| 117 | - /> | ||
| 118 | - </NInputGroup> | ||
| 119 | - </SettingItem> | ||
| 120 | - </SettingItemBox> | ||
| 121 | - <SettingItemBox name="选择方式"> | ||
| 122 | - <NTabs v-model:value="pondRequestContentTypeRef" type="segment" size="small"> | ||
| 123 | - <NTabPane :name="RequestContentTypeEnum.DEFAULT" tab="普通请求" /> | ||
| 124 | - <NTabPane :name="RequestContentTypeEnum.SQL" tab="SQL请求" /> | ||
| 125 | - </NTabs> | ||
| 126 | - </SettingItemBox> | ||
| 127 | - <SettingItemBox> | ||
| 128 | - <DefaultRequestContent | ||
| 129 | - v-if="pondRequestContentTypeRef === RequestContentTypeEnum.DEFAULT" | ||
| 130 | - v-model:value="pondRequestParamsRef" | ||
| 131 | - v-model:request-params-body-type="pondRequestParamsBodyTypeRef" | ||
| 132 | - /> | ||
| 133 | - <SqlConfiguration | ||
| 134 | - v-model:value="pondRequestSQLContentRef" | ||
| 135 | - v-if="pondRequestContentTypeRef === RequestContentTypeEnum.SQL" | ||
| 136 | - /> | ||
| 137 | - </SettingItemBox> | ||
| 138 | -</template> |
| @@ -35,7 +35,7 @@ const openModal = async (flag = true, type: RequestDataTypeEnum) => { | @@ -35,7 +35,7 @@ const openModal = async (flag = true, type: RequestDataTypeEnum) => { | ||
| 35 | requestDataType.value = type | 35 | requestDataType.value = type |
| 36 | showModal.value = flag | 36 | showModal.value = flag |
| 37 | await nextTick() | 37 | await nextTick() |
| 38 | - console.log(unref(selectTarget)!.request) | 38 | + |
| 39 | unref(componentConfigurationEl as any)?.setConfigurationData(unref(selectTarget)!.request || {}) | 39 | unref(componentConfigurationEl as any)?.setConfigurationData(unref(selectTarget)!.request || {}) |
| 40 | unref(publicInterfaceFormEl as any)?.setConfigurationData(unref(selectTarget)!.request || {}) | 40 | unref(publicInterfaceFormEl as any)?.setConfigurationData(unref(selectTarget)!.request || {}) |
| 41 | } | 41 | } |
| @@ -85,19 +85,20 @@ const sendHandle = async () => { | @@ -85,19 +85,20 @@ const sendHandle = async () => { | ||
| 85 | } | 85 | } |
| 86 | } | 86 | } |
| 87 | 87 | ||
| 88 | +const setRequestKey = (value: Recordable, key: string) => { | ||
| 89 | + value[key] = | ||
| 90 | + targetData.value.request.requestDataType === RequestDataTypeEnum.AJAX | ||
| 91 | + ? (targetData.value.request as unknown as Recordable)[key] || | ||
| 92 | + (chartEditStore.getRequestGlobalConfig as unknown as Recordable)[key] | ||
| 93 | + : null | ||
| 94 | +} | ||
| 95 | + | ||
| 88 | const handleSaveAction = async () => { | 96 | const handleSaveAction = async () => { |
| 89 | if (!(await validate())) return | 97 | if (!(await validate())) return |
| 90 | - let value = getResult() | ||
| 91 | - value.pondRequestGlobalTokenKey = targetData.value.request.pondRequestGlobalTokenKey | ||
| 92 | - value.pondRequestGlobalTokenSuffix = targetData.value.request.pondRequestGlobalTokenSuffix | ||
| 93 | - value.pondRequestInterval = targetData.value.request.pondRequestInterval | ||
| 94 | - value.pondRequestIntervalUnit= targetData.value.request.pondRequestIntervalUnit | ||
| 95 | - value.pondRequestOriginUrl= targetData.value.request.pondRequestOriginUrl | ||
| 96 | - value.requestVerificationToken = targetData.value.request.requestVerificationToken | ||
| 97 | - value.requestDataPondId = targetData.value.request.requestDataPondId | ||
| 98 | - value.thirdSelectCascaderLabel = targetData.value.request.thirdSelectCascaderLabel | ||
| 99 | - value.requestDataType = targetData.value.request.requestDataType | ||
| 100 | - value.publicInterfaceSelectId = targetData.value.request.publicInterfaceSelectId | 98 | + const value = getResult() |
| 99 | + setRequestKey(value, 'requestTokenSuffix') | ||
| 100 | + setRequestKey(value, 'requestTokenKey') | ||
| 101 | + setRequestKey(value, 'requestVerificationToken') | ||
| 101 | if (unref(selectTarget)) { | 102 | if (unref(selectTarget)) { |
| 102 | chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), { | 103 | chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), { |
| 103 | ...unref(selectTarget)!, | 104 | ...unref(selectTarget)!, |