feat: 编写请求配置页

This commit is contained in:
奔跑的面条 2022-07-11 09:01:19 +08:00
parent 88bb915161
commit 46f80ea907
20 changed files with 497 additions and 31 deletions

View File

@ -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});
}
}

View File

@ -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'
}

View File

@ -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 {

View File

@ -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,

View File

@ -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

View File

@ -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 类型

View File

@ -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: []

View File

@ -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

View File

@ -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>

View File

@ -0,0 +1,3 @@
import RequestGlobalConfig from './index.vue'
export { RequestGlobalConfig }

View File

@ -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>

View File

@ -0,0 +1,3 @@
import RequestHeader from './index.vue'
export { RequestHeader }

View File

@ -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>

View File

@ -0,0 +1,3 @@
import RequestHeaderTable from './index.vue'
export { RequestHeaderTable }

View File

@ -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>

View File

@ -0,0 +1,3 @@
import RequestTargetConfig from './index.vue'
export { RequestTargetConfig }

View File

@ -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>

View File

@ -0,0 +1,3 @@
import ChartDataRequest from './index.vue'
export { ChartDataRequest }

View File

@ -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>

View File

@ -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
},
]