mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-24 16:22:57 +08:00
feat: 编写请求配置页
This commit is contained in:
parent
88bb915161
commit
46f80ea907
@ -8,9 +8,9 @@
|
||||
</n-text>
|
||||
<div
|
||||
class="item-right"
|
||||
justify="space-between"
|
||||
:style="{
|
||||
gridTemplateColumns: alone ? '1fr' : '1fr 1fr'
|
||||
gridTemplateColumns: alone ? '1fr' : '1fr 1fr',
|
||||
...itemRightStyle
|
||||
}"
|
||||
>
|
||||
<slot></slot>
|
||||
@ -28,6 +28,11 @@ defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
},
|
||||
itemRightStyle: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
required: false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -48,7 +53,6 @@ $leftWidth: 60px;
|
||||
.item-right {
|
||||
display: grid;
|
||||
grid-column-gap: 10px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
width: calc(100% - #{$leftWidth});
|
||||
}
|
||||
}
|
||||
|
@ -7,7 +7,7 @@ export enum ResultEnum {
|
||||
SERVER_ERROR = 500,
|
||||
SERVER_FORBIDDEN = 403,
|
||||
NOT_FOUND = 404,
|
||||
TIMEOUT = 10042,
|
||||
TIMEOUT = 10042
|
||||
}
|
||||
|
||||
// 数据相关
|
||||
@ -15,7 +15,15 @@ export enum RequestDataTypeEnum {
|
||||
// 静态数据
|
||||
STATIC = 0,
|
||||
// 请求数据
|
||||
AJAX = 1,
|
||||
AJAX = 1
|
||||
}
|
||||
|
||||
// 请求主体类型
|
||||
export enum RequestContentTypeEnum {
|
||||
// 普通请求
|
||||
DEFAULT = 0,
|
||||
// SQL请求
|
||||
SQL = 1
|
||||
}
|
||||
|
||||
/**
|
||||
@ -26,7 +34,66 @@ export enum RequestHttpEnum {
|
||||
POST = 'post',
|
||||
PATCH = 'patch',
|
||||
PUT = 'put',
|
||||
DELETE = 'delete',
|
||||
DELETE = 'delete'
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 请求间隔
|
||||
*/
|
||||
export enum RequestHttpIntervalEnum {
|
||||
// 秒
|
||||
SECOND = 'second',
|
||||
// 分
|
||||
MINUTE = 'minute',
|
||||
// 时
|
||||
HOUR = 'hour',
|
||||
// 天
|
||||
DAY = 'day'
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 请求间隔名称
|
||||
*/
|
||||
export const SelectHttpTimeNameObj = {
|
||||
[RequestHttpIntervalEnum.SECOND]: '秒',
|
||||
[RequestHttpIntervalEnum.MINUTE]: '分',
|
||||
[RequestHttpIntervalEnum.HOUR]: '时',
|
||||
[RequestHttpIntervalEnum.DAY]: '天'
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 请求头部类型
|
||||
*/
|
||||
export enum RequestBodyEnum {
|
||||
FORM_DATA = 'form-data',
|
||||
X_WWW_FORM_URLENCODED = 'x-www-form-urlencoded',
|
||||
JSON = 'json',
|
||||
XML = 'xml'
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 请求参数类型
|
||||
*/
|
||||
export enum RequestParamsTypeEnum {
|
||||
PARAMS = 'Params',
|
||||
BODY = 'Body',
|
||||
HEADER = 'Header',
|
||||
COOKIE = 'Cookie'
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 请求参数主体
|
||||
*/
|
||||
export type RequestParams = {
|
||||
[RequestParamsTypeEnum.PARAMS]: object,
|
||||
[RequestParamsTypeEnum.COOKIE]: object,
|
||||
[RequestParamsTypeEnum.HEADER]: object,
|
||||
[RequestParamsTypeEnum.BODY]: {
|
||||
[RequestBodyEnum.FORM_DATA]: object,
|
||||
[RequestBodyEnum.X_WWW_FORM_URLENCODED]: object,
|
||||
[RequestBodyEnum.JSON]: object,
|
||||
[RequestBodyEnum.XML]: string,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -40,5 +107,5 @@ export enum ContentTypeEnum {
|
||||
// form-data 一般配合qs
|
||||
FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
|
||||
// form-data 上传
|
||||
FORM_DATA = 'multipart/form-data;charset=UTF-8',
|
||||
FORM_DATA = 'multipart/form-data;charset=UTF-8'
|
||||
}
|
||||
|
@ -1,14 +1,16 @@
|
||||
import { getUUID } from '@/utils'
|
||||
import { PublicConfigType } from '@/packages/index.d'
|
||||
import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
|
||||
import { RequestHttpEnum, RequestDataTypeEnum, RequestHttpIntervalEnum, RequestContentTypeEnum } from '@/enums/httpEnum'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
|
||||
const requestConfig: RequestConfigType = {
|
||||
requestDataType: RequestDataTypeEnum.STATIC,
|
||||
requestHttpType: RequestHttpEnum.GET,
|
||||
requestUrl: '',
|
||||
requestInterval: undefined
|
||||
requestInterval: undefined,
|
||||
requestIntervalUnit: RequestHttpIntervalEnum.SECOND,
|
||||
requestContentType: RequestContentTypeEnum.DEFAULT
|
||||
}
|
||||
|
||||
export class publicConfig implements PublicConfigType {
|
||||
|
@ -37,6 +37,7 @@ import {
|
||||
NTooltip,
|
||||
NAvatar,
|
||||
NTabs,
|
||||
NTab,
|
||||
NTabPane,
|
||||
NCard,
|
||||
NRow,
|
||||
@ -68,6 +69,7 @@ import {
|
||||
NSteps,
|
||||
NStep,
|
||||
NInputGroup,
|
||||
NInputGroupLabel,
|
||||
NResult,
|
||||
NDescriptions,
|
||||
NDescriptionsItem,
|
||||
@ -136,6 +138,7 @@ const naive = create({
|
||||
NTooltip,
|
||||
NAvatar,
|
||||
NTabs,
|
||||
NTab,
|
||||
NTabPane,
|
||||
NCard,
|
||||
NRow,
|
||||
@ -167,6 +170,7 @@ const naive = create({
|
||||
NSteps,
|
||||
NStep,
|
||||
NInputGroup,
|
||||
NInputGroupLabel,
|
||||
NResult,
|
||||
NDescriptions,
|
||||
NDescriptionsItem,
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { LangEnum, PreviewScaleEnum } from '@/enums/styleEnum'
|
||||
import { RequestHttpIntervalEnum } from '@/enums/httpEnum'
|
||||
import designColor from './designColor.json'
|
||||
|
||||
// 默认语言
|
||||
@ -51,5 +52,8 @@ export const previewScaleType = PreviewScaleEnum.FIT
|
||||
// 数据请求间隔
|
||||
export const requestInterval = 30
|
||||
|
||||
// 数据请求间隔单位
|
||||
export const requestIntervalUnit = RequestHttpIntervalEnum.SECOND
|
||||
|
||||
// 工作区域历史记录存储最大数量
|
||||
export const editHistoryMax = 100
|
@ -1,11 +1,14 @@
|
||||
import { CreateComponentType, FilterEnum} from '@/packages/index.d'
|
||||
import { CreateComponentType, FilterEnum } from '@/packages/index.d'
|
||||
import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
|
||||
import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
|
||||
import { PreviewScaleEnum } from '@/enums/styleEnum'
|
||||
import type {
|
||||
ChartColorsNameType,
|
||||
GlobalThemeJsonType,
|
||||
} from '@/settings/chartThemes/index'
|
||||
import {
|
||||
RequestHttpEnum,
|
||||
RequestContentTypeEnum,
|
||||
RequestDataTypeEnum,
|
||||
RequestHttpIntervalEnum,
|
||||
RequestParams
|
||||
} from '@/enums/httpEnum'
|
||||
import { PreviewScaleEnum, RequestBodyEnum } from '@/enums/styleEnum'
|
||||
import type { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
|
||||
// 编辑画布属性
|
||||
export enum EditCanvasTypeEnum {
|
||||
@ -16,7 +19,7 @@ export enum EditCanvasTypeEnum {
|
||||
USER_SCALE = 'userScale',
|
||||
LOCK_SCALE = 'lockScale',
|
||||
IS_CREATE = 'isCreate',
|
||||
IS_DRAG = 'isDrag',
|
||||
IS_DRAG = 'isDrag'
|
||||
}
|
||||
|
||||
// 编辑区域
|
||||
@ -47,7 +50,7 @@ export enum EditCanvasConfigEnum {
|
||||
BACKGROUND = 'background',
|
||||
BACKGROUND_IMAGE = 'backgroundImage',
|
||||
SELECT_COLOR = 'selectColor',
|
||||
PREVIEW_SCALE_TYPE = 'previewScaleType',
|
||||
PREVIEW_SCALE_TYPE = 'previewScaleType'
|
||||
}
|
||||
|
||||
export interface EditCanvasConfigType {
|
||||
@ -89,7 +92,7 @@ export enum EditCanvasTypeEnum {
|
||||
START_X = 'startX',
|
||||
START_Y = 'startY',
|
||||
X = 'x',
|
||||
Y = 'y',
|
||||
Y = 'y'
|
||||
}
|
||||
|
||||
// 鼠标位置
|
||||
@ -127,27 +130,35 @@ export enum ChartEditStoreEnum {
|
||||
// 以下需要存储
|
||||
EDIT_CANVAS_CONFIG = 'editCanvasConfig',
|
||||
REQUEST_GLOBAL_CONFIG = 'requestGlobalConfig',
|
||||
COMPONENT_LIST = 'componentList',
|
||||
COMPONENT_LIST = 'componentList'
|
||||
}
|
||||
|
||||
// 请求公共类型
|
||||
type RequestPublicConfigType = {
|
||||
// 组件定制轮询时间
|
||||
requestInterval?: number
|
||||
// 时间单位(时分秒)
|
||||
requestIntervalUnit: RequestHttpIntervalEnum
|
||||
// 请求内容
|
||||
requestParams: RequestParams
|
||||
}
|
||||
|
||||
// 全局的图表请求配置
|
||||
export type RequestGlobalConfigType = {
|
||||
export interface RequestGlobalConfigType extends RequestPublicConfigType {
|
||||
// 请求源地址
|
||||
requestOriginUrl?: string
|
||||
// 全局默认轮询时间
|
||||
requestInterval: number
|
||||
}
|
||||
|
||||
// 单个图表请求配置
|
||||
export type RequestConfigType = {
|
||||
export interface RequestConfigType extends RequestPublicConfigType {
|
||||
// 获取数据的方式
|
||||
requestDataType: RequestDataTypeEnum
|
||||
// 请求方式 get/post/del/put/patch
|
||||
requestHttpType: RequestHttpEnum
|
||||
// 源后续的 url
|
||||
requestUrl?: string
|
||||
// 组件定制轮询时间
|
||||
requestInterval?: number
|
||||
// 请求内容主体方式 普通/sql
|
||||
requestContentType: RequestContentTypeEnum
|
||||
}
|
||||
|
||||
// Store 类型
|
||||
|
@ -3,7 +3,7 @@ import { CreateComponentType } from '@/packages/index.d'
|
||||
import debounce from 'lodash/debounce'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index'
|
||||
import { requestInterval, previewScaleType } from '@/settings/designSetting'
|
||||
import { requestInterval, previewScaleType, requestIntervalUnit } from '@/settings/designSetting'
|
||||
// 记录记录
|
||||
import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
|
||||
// 全局设置
|
||||
@ -109,7 +109,19 @@ export const useChartEditStore = defineStore({
|
||||
// 数据请求处理(需存储给后端)
|
||||
requestGlobalConfig: {
|
||||
requestOriginUrl: '',
|
||||
requestInterval: requestInterval
|
||||
requestInterval: requestInterval,
|
||||
requestIntervalUnit: requestIntervalUnit,
|
||||
requestParams: {
|
||||
Body: {
|
||||
"form-data": {},
|
||||
"x-www-form-urlencoded": {},
|
||||
json: {},
|
||||
xml: ''
|
||||
},
|
||||
Cookie: {},
|
||||
Header: {},
|
||||
Params: {}
|
||||
}
|
||||
},
|
||||
// 图表数组(需存储给后端)
|
||||
componentList: []
|
||||
|
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="go-chart-configurations-data-ajax">
|
||||
<n-button type="primary" @click="requestModelHandle">配置请求</n-button>
|
||||
<setting-item-box name="配置">
|
||||
<setting-item name="类型">
|
||||
<n-select v-model:value="targetData.request.requestHttpType" :options="selectOptions" />
|
||||
@ -39,6 +40,7 @@
|
||||
</template>
|
||||
<n-input v-model:value.trim="targetData.request.requestUrl" :min="1" placeholder="请输入地址(去除源)" />
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box :alone="true">
|
||||
<template #name>
|
||||
测试
|
||||
@ -63,8 +65,12 @@
|
||||
</n-space>
|
||||
</setting-item-box>
|
||||
|
||||
<!-- 底部数据展示 -->
|
||||
<chart-data-matching-and-show :show="showMatching && !loading" :ajax="true"></chart-data-matching-and-show>
|
||||
<!-- 骨架图 -->
|
||||
<go-skeleton :load="loading" :repeat="3"></go-skeleton>
|
||||
<!-- 请求配置model -->
|
||||
<chart-data-request v-model:modelShow="requestShow"></chart-data-request>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -72,6 +78,7 @@
|
||||
import { ref, toRefs, onBeforeUnmount, watchEffect } from 'vue'
|
||||
import { icon } from '@/plugins'
|
||||
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { ChartDataRequest } from '../ChartDataRequest/index'
|
||||
import { RequestHttpEnum, ResultEnum } from '@/enums/httpEnum'
|
||||
import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
|
||||
import { http } from '@/api/http'
|
||||
@ -85,6 +92,7 @@ const { targetData, chartEditStore } = useTargetData()
|
||||
const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
|
||||
// 是否展示数据分析
|
||||
const loading = ref(false)
|
||||
const requestShow = ref(false)
|
||||
const showMatching = ref(false)
|
||||
let lastFilter: any = undefined
|
||||
|
||||
@ -124,6 +132,11 @@ const selectOptions: SelectHttpType[] = [
|
||||
}
|
||||
]
|
||||
|
||||
// 请求配置 model
|
||||
const requestModelHandle = () => {
|
||||
requestShow.value = true
|
||||
}
|
||||
|
||||
// 发送请求
|
||||
const sendHandle = async () => {
|
||||
loading.value = true
|
||||
|
@ -88,7 +88,7 @@
|
||||
|
||||
<n-space>
|
||||
<n-button size="medium" @click="closeFilter">取消</n-button>
|
||||
<n-button size="medium" type="primary" @click="saveFilter">保存</n-button>
|
||||
<n-button size="medium" type="primary" ghost @click="saveFilter">保存</n-button>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</template>
|
||||
|
@ -0,0 +1,3 @@
|
||||
import RequestGlobalConfig from './index.vue'
|
||||
|
||||
export { RequestGlobalConfig }
|
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<!-- 全局配置 -->
|
||||
<n-card class="n-card-shallow">
|
||||
<n-tag type="info" :bordered="false"> 全局配置 </n-tag>
|
||||
<setting-item-box
|
||||
name="服务"
|
||||
:itemRightStyle="{
|
||||
gridTemplateColumns: '5fr 2fr 1fr'
|
||||
}"
|
||||
>
|
||||
<!-- 源地址 -->
|
||||
<setting-item name="前置 URL">
|
||||
<n-input v-model:value.trim="requestOriginUrl" :disabled="disabled" placeholder="http://127.0.0.1/"></n-input>
|
||||
</setting-item>
|
||||
<setting-item name="更新间隔(为 0 表示不更新)">
|
||||
<n-input-group>
|
||||
<n-input-number
|
||||
class="select-time-number"
|
||||
v-model:value.trim="requestInterval"
|
||||
min="0"
|
||||
:show-button="false"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入数字"
|
||||
>
|
||||
</n-input-number>
|
||||
<!-- 单位 -->
|
||||
<n-select
|
||||
class="select-time-options"
|
||||
v-model:value="requestIntervalUnit"
|
||||
:options="selectTimeOptions"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</n-input-group>
|
||||
</setting-item>
|
||||
<n-button v-show="disabled" type="primary" secondary @click="disabled = false">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<pencil-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
编辑配置
|
||||
</n-button>
|
||||
</setting-item-box>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, toRefs } from 'vue'
|
||||
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
|
||||
import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
|
||||
import { icon } from '@/plugins'
|
||||
|
||||
const { PencilIcon } = icon.ionicons5
|
||||
const { targetData, chartEditStore } = useTargetData()
|
||||
const { requestOriginUrl, requestInterval, requestIntervalUnit } = toRefs(chartEditStore.getRequestGlobalConfig)
|
||||
const disabled = ref(true)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.select-time-number {
|
||||
width: 100%;
|
||||
}
|
||||
.select-time-options {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,3 @@
|
||||
import RequestHeader from './index.vue'
|
||||
|
||||
export { RequestHeader }
|
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<n-space vertical>
|
||||
<div style="width: 600px">
|
||||
<n-tabs v-model:value="requestContentType" type="segment" size="small">
|
||||
<n-tab :name="RequestContentTypeEnum.DEFAULT" tab="普通请求"> </n-tab>
|
||||
<n-tab :name="RequestContentTypeEnum.SQL" tab="SQL 请求"> </n-tab>
|
||||
</n-tabs>
|
||||
</div>
|
||||
<div v-show="requestContentType === RequestContentTypeEnum.DEFAULT">
|
||||
<n-tabs type="line" animated>
|
||||
<n-tab v-for="item in RequestParamsTypeEnum" :key="item" :name="item" :tab="item"> {{ item }} </n-tab>
|
||||
</n-tabs>
|
||||
</div>
|
||||
<div v-show="requestContentType === RequestContentTypeEnum.SQL">
|
||||
<setting-item-box name="键名">
|
||||
<n-input v-model:value.trim="sqlObject.key" :min="1" placeholder="请输入内容" />
|
||||
</setting-item-box>
|
||||
<setting-item-box name="键值">
|
||||
<monaco-editor v-model:modelValue="sqlObject.value" width="600px" height="200px" language="sql" />
|
||||
</setting-item-box>
|
||||
</div>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, toRefs } from 'vue'
|
||||
import { RequestParamsTypeEnum, RequestContentTypeEnum ,RequestBodyEnum } from '@/enums/httpEnum'
|
||||
import { MonacoEditor } from '@/components/Pages/MonacoEditor'
|
||||
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
|
||||
|
||||
const { targetData, chartEditStore } = useTargetData()
|
||||
|
||||
const { requestContentType } = toRefs(targetData.value.request)
|
||||
|
||||
const tabValue = ref(RequestParamsTypeEnum.NONE)
|
||||
const sqlObject = reactive({
|
||||
key: 'sql',
|
||||
value: 'select * from where'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.select-type {
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,3 @@
|
||||
import RequestHeaderTable from './index.vue'
|
||||
|
||||
export { RequestHeaderTable }
|
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<n-scrollbar style="max-height: 250px">
|
||||
<n-h1>2321</n-h1>
|
||||
</n-scrollbar>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RequestBodyEnum, RequestParamsTypeEnum } from '@/enums/httpEnum'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
@ -0,0 +1,3 @@
|
||||
import RequestTargetConfig from './index.vue'
|
||||
|
||||
export { RequestTargetConfig }
|
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<!-- 组件配置 -->
|
||||
<n-divider class="go-my-3" title-placement="left"></n-divider>
|
||||
<setting-item-box
|
||||
name="组件"
|
||||
:itemRightStyle="{
|
||||
gridTemplateColumns: '5fr 2fr 1fr'
|
||||
}"
|
||||
>
|
||||
<setting-item name="请求 URL">
|
||||
<n-input-group>
|
||||
<n-select class="select-type-options" v-model:value="requestHttpType" :options="selectTypeOptions" />
|
||||
<n-input v-model:value.trim="requestUrl" :min="1" placeholder="请输入地址(去除源)">
|
||||
<template #prefix>
|
||||
<n-text>{{ requestOriginUrl }}</n-text>
|
||||
<n-divider vertical />
|
||||
</template>
|
||||
</n-input>
|
||||
</n-input-group>
|
||||
<!-- 组件url -->
|
||||
</setting-item>
|
||||
<setting-item name="默认使用全局间隔">
|
||||
<n-input-group>
|
||||
<n-input-number
|
||||
v-model:value.trim="requestInterval"
|
||||
class="select-time-number"
|
||||
min="5"
|
||||
:show-button="false"
|
||||
placeholder="可以为空"
|
||||
>
|
||||
</n-input-number>
|
||||
<!-- 单位 -->
|
||||
<n-select class="select-time-options" v-model:value="requestIntervalUnit" :options="selectTimeOptions" />
|
||||
</n-input-group>
|
||||
</setting-item>
|
||||
<n-button secondary type="primary">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<flash-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
发送请求
|
||||
</n-button>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="选择方式" class="go-mt-0">
|
||||
<request-header></request-header>
|
||||
</setting-item-box>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, toRefs } from 'vue'
|
||||
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
|
||||
import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
|
||||
import { RequestHeader } from '../RequestHeader'
|
||||
import { icon } from '@/plugins'
|
||||
|
||||
const { PencilIcon, FlashIcon } = icon.ionicons5
|
||||
const { targetData, chartEditStore } = useTargetData()
|
||||
const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
|
||||
const { requestInterval, requestIntervalUnit, requestHttpType, requestUrl } = toRefs(targetData.value.request)
|
||||
const disabled = ref(true)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.select-time-number {
|
||||
width: 100%;
|
||||
}
|
||||
.select-time-options {
|
||||
width: 100px;
|
||||
}
|
||||
.select-type-options {
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,3 @@
|
||||
import ChartDataRequest from './index.vue'
|
||||
|
||||
export { ChartDataRequest }
|
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<n-modal class="go-chart-data-request" v-model:show="modelShow" :mask-closable="false" @afterLeave="closeHandle">
|
||||
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
|
||||
<template #header></template>
|
||||
<template #header-extra> </template>
|
||||
<n-space vertical>
|
||||
<request-global-config></request-global-config>
|
||||
<request-target-config></request-target-config>
|
||||
</n-space>
|
||||
<!-- 底部 -->
|
||||
<template #action>
|
||||
<n-space justify="space-between">
|
||||
<div>
|
||||
<n-text>「 柱状图 」</n-text>
|
||||
<n-text>—— </n-text>
|
||||
<n-tag type="primary" :bordered="false"> {{requestContentTypeObj[requestContentType]}} </n-tag>
|
||||
</div>
|
||||
<n-button type="primary" ghost @click="closeHandle">关闭</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script script lang="ts" setup>
|
||||
import { toRefs } from 'vue'
|
||||
import { RequestContentTypeEnum } from '@/enums/httpEnum'
|
||||
import { useTargetData } from '../../../hooks/useTargetData.hook'
|
||||
import { RequestGlobalConfig } from './components/RequestGlobalConfig'
|
||||
import { RequestTargetConfig } from './components/RequestTargetConfig'
|
||||
|
||||
const emit = defineEmits(['update:modelShow'])
|
||||
|
||||
const { targetData, chartEditStore } = useTargetData()
|
||||
// 解构基础配置
|
||||
const { requestContentType } = toRefs(targetData.value.request)
|
||||
|
||||
const requestContentTypeObj = {
|
||||
[RequestContentTypeEnum.DEFAULT]: '普通请求',
|
||||
[RequestContentTypeEnum.SQL]: 'SQL 请求',
|
||||
}
|
||||
|
||||
defineProps({
|
||||
modelShow: Boolean
|
||||
})
|
||||
|
||||
const closeHandle = () => {
|
||||
emit('update:modelShow', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('chart-data-request') {
|
||||
&.n-card.n-modal,
|
||||
.n-card {
|
||||
@extend .go-background-filter;
|
||||
}
|
||||
.n-card-shallow {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1,4 +1,4 @@
|
||||
import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
|
||||
import { RequestHttpEnum, RequestHttpIntervalEnum, RequestDataTypeEnum, SelectHttpTimeNameObj } from '@/enums/httpEnum'
|
||||
|
||||
// 匹配结果
|
||||
export enum DataResultEnum {
|
||||
@ -24,9 +24,81 @@ export interface SelectCreateDataType {
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
// ajax 请求
|
||||
// ajax 请求类型
|
||||
export interface SelectHttpType {
|
||||
label: RequestHttpEnum
|
||||
value: RequestHttpEnum
|
||||
disabled?: boolean
|
||||
style?: object
|
||||
}
|
||||
|
||||
// 类型选项
|
||||
export const selectTypeOptions: SelectHttpType[] = [
|
||||
{
|
||||
label: RequestHttpEnum.GET,
|
||||
value: RequestHttpEnum.GET,
|
||||
style: {
|
||||
color: 'greenyellow',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: RequestHttpEnum.POST,
|
||||
value: RequestHttpEnum.POST,
|
||||
style: {
|
||||
color: 'skyblue',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: RequestHttpEnum.PUT,
|
||||
value: RequestHttpEnum.PUT,
|
||||
style: {
|
||||
color: 'goldenrod',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: RequestHttpEnum.PATCH,
|
||||
value: RequestHttpEnum.PATCH,
|
||||
style: {
|
||||
color: 'violet',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: RequestHttpEnum.DELETE,
|
||||
value: RequestHttpEnum.DELETE,
|
||||
disabled: true,
|
||||
style: {
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
// ajax 请求间隔
|
||||
export interface SelectHttpTimeType {
|
||||
label: string
|
||||
value: RequestHttpIntervalEnum
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
// 时间选项
|
||||
export const selectTimeOptions: SelectHttpTimeType[] = [
|
||||
{
|
||||
label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.SECOND],
|
||||
value: RequestHttpIntervalEnum.SECOND
|
||||
},
|
||||
{
|
||||
label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.MINUTE],
|
||||
value: RequestHttpIntervalEnum.MINUTE
|
||||
},
|
||||
{
|
||||
label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.HOUR],
|
||||
value: RequestHttpIntervalEnum.HOUR
|
||||
},
|
||||
{
|
||||
label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.DAY],
|
||||
value: RequestHttpIntervalEnum.DAY
|
||||
},
|
||||
]
|
Loading…
Reference in New Issue
Block a user