feat: 新增组件更新单独设置功能

This commit is contained in:
奔跑的面条 2022-07-08 17:53:52 +08:00
parent 594c8f215f
commit 88bb915161
5 changed files with 29 additions and 13 deletions

View File

@ -9,7 +9,6 @@ import { isPreview, newFunctionHandle } from '@/utils'
// 获取类型
type ChartEditStoreType = typeof useChartEditStore
/**
* setdata
* @param targetComponent
@ -30,7 +29,12 @@ export const useChartDataFetch = (
// 组件类型
const { chartFrame } = targetComponent.chartConfig
// 请求配置
const { requestDataType, requestHttpType, requestUrl } = toRefs(targetComponent.request)
const {
requestDataType,
requestHttpType,
requestUrl,
requestInterval: targetInterval
} = toRefs(targetComponent.request)
// 非请求类型
if (requestDataType.value !== RequestDataTypeEnum.AJAX) return
// 处理地址
@ -65,12 +69,13 @@ export const useChartDataFetch = (
// 立即调用
fetchFn()
// 开启定时
fetchInterval = setInterval(fetchFn, requestInterval.value * 1000)
const time = targetInterval && targetInterval.value ? targetInterval.value : requestInterval.value
fetchInterval = setInterval(fetchFn, time * 1000)
}
}
isPreview() && requestIntervalFn()
return { vChartRef }
}

View File

@ -8,7 +8,7 @@ const requestConfig: RequestConfigType = {
requestDataType: RequestDataTypeEnum.STATIC,
requestHttpType: RequestHttpEnum.GET,
requestUrl: '',
requestInterval: 0
requestInterval: undefined
}
export class publicConfig implements PublicConfigType {

View File

@ -147,7 +147,7 @@ export type RequestConfigType = {
// 源后续的 url
requestUrl?: string
// 组件定制轮询时间
requestInterval: number
requestInterval?: number
}
// Store 类型

View File

@ -6,12 +6,12 @@
placeholder="源地址如: http://127.0.0.1"
></n-input>
</setting-item-box>
<setting-item-box name="更新间隔">
<setting-item-box name="更新间隔" :alone="true">
<n-input-number
v-model:value.trim="chartEditStore.getRequestGlobalConfig.requestInterval"
min="5"
:show-button="false"
placeholder="为 0 不更新"
placeholder="将应用全局组件"
>
<template #suffix>

View File

@ -1,7 +1,19 @@
<template>
<div class="go-chart-configurations-data-ajax">
<setting-item-box name="类型" :alone="true">
<n-select v-model:value="targetData.request.requestHttpType" :options="selectOptions" />
<setting-item-box name="配置">
<setting-item name="类型">
<n-select v-model:value="targetData.request.requestHttpType" :options="selectOptions" />
</setting-item>
<setting-item name="默认使用全局间隔">
<n-input-number
v-model:value.trim="targetData.request.requestInterval"
min="5"
:show-button="false"
placeholder="可以为空"
>
<template #suffix> </template>
</n-input-number>
</setting-item>
</setting-item-box>
<setting-item-box name="源地址:" :alone="true">
@ -27,7 +39,6 @@
</template>
<n-input v-model:value.trim="targetData.request.requestUrl" :min="1" placeholder="请输入地址(去除源)" />
</setting-item-box>
<setting-item-box :alone="true">
<template #name>
测试
@ -60,7 +71,7 @@
<script setup lang="ts">
import { ref, toRefs, onBeforeUnmount, watchEffect } from 'vue'
import { icon } from '@/plugins'
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { RequestHttpEnum, ResultEnum } from '@/enums/httpEnum'
import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
import { http } from '@/api/http'
@ -116,7 +127,7 @@ const selectOptions: SelectHttpType[] = [
//
const sendHandle = async () => {
loading.value = true
if(!targetData.value) return
if (!targetData.value) return
const { requestUrl, requestHttpType } = targetData.value.request
if (!requestUrl) {
window['$message'].warning('请求参数不正确,请检查!')