RequestBody.vue
1.89 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<script lang="ts" setup>
import { MonacoEditor } from '@/components/Pages/MonacoEditor';
import { RequestBodyEnum, RequestBodyEnumList, RequestParams } from '@/enums/httpEnum';
import { NCard } from 'naive-ui';
import ParamsTable from './ParamsTable.vue';
defineProps<{
requestParamsBodyType: RequestBodyEnum
value: RequestParams
}>()
const emit = defineEmits(['update:requestParamsBodyType'])
const handleSyncRequestParamsBodyType = (value: RequestBodyEnum) => {
emit('update:requestParamsBodyType', value || RequestBodyEnum.X_WWW_FORM_URLENCODED)
}
</script>
<template>
<section>
<NRadioGroup :value="requestParamsBodyType || RequestBodyEnum.X_WWW_FORM_URLENCODED"
@update:value="handleSyncRequestParamsBodyType">
<NSpace>
<NRadio v-for="item in RequestBodyEnumList" :key="item" :value="item">
{{ item }}
</NRadio>
</NSpace>
</NRadioGroup>
<section class="body-container">
<!-- 为 none 时 -->
<NCard v-if="requestParamsBodyType === RequestBodyEnum.NONE">
<NText depth="3">该接口没有 Body 体</NText>
</NCard>
<ParamsTable v-if="requestParamsBodyType === RequestBodyEnum.FORM_DATA"
v-model:value="value.Body[RequestBodyEnum.FORM_DATA]" />
<ParamsTable v-if="requestParamsBodyType === RequestBodyEnum.X_WWW_FORM_URLENCODED || !requestParamsBodyType"
v-model:value="value.Body[RequestBodyEnum.X_WWW_FORM_URLENCODED]" />
<MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.JSON"
v-model:modelValue="value.Body[RequestBodyEnum.JSON]" width="600px" height="200px" language="json" />
<MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.XML"
v-model:modelValue="value.Body[RequestBodyEnum.XML]" width="600px" height="200px" language="xml" />
</section>
</section>
</template>
<style lang="scss" scoped>
.body-container {
margin-top: 20px;
}
</style>