Showing
7 changed files
with
160 additions
and
50 deletions
| ... | ... | @@ -67,8 +67,8 @@ |
| 67 | 67 | initVal(); |
| 68 | 68 | }); |
| 69 | 69 | |
| 70 | - function initVal() { | |
| 71 | - if (props?.type) getOptions(props?.type); | |
| 70 | + async function initVal() { | |
| 71 | + if (props?.type) await getOptions(props?.type); | |
| 72 | 72 | if (props?.value) for (let i in props.value) Reflect.set(valueObj, i, props.value[i]); |
| 73 | 73 | } |
| 74 | 74 | ... | ... |
| ... | ... | @@ -163,6 +163,7 @@ |
| 163 | 163 | |
| 164 | 164 | const handleTestParamsInterface = () => { |
| 165 | 165 | excuteTestRef.value?.showTest(); |
| 166 | + excuteTestRef.value?.resetValue(false); | |
| 166 | 167 | let value = getValue(false) as any; |
| 167 | 168 | dataMap.mapParamsObj = { |
| 168 | 169 | list: value?.Params, |
| ... | ... | @@ -174,6 +175,7 @@ |
| 174 | 175 | let value = getValue(false) as any; |
| 175 | 176 | const type = value?.Body?.requestParamsBodyType; |
| 176 | 177 | excuteTestRef.value?.showTest(); |
| 178 | + excuteTestRef.value?.resetValue(false); | |
| 177 | 179 | let values = []; |
| 178 | 180 | for (let i in value?.Body) if (i === type) values = value?.Body[i]; |
| 179 | 181 | dataMap.mapBodyObj = { |
| ... | ... | @@ -185,6 +187,7 @@ |
| 185 | 187 | |
| 186 | 188 | const handleTestHeaderInterface = () => { |
| 187 | 189 | excuteTestRef.value?.showTest(); |
| 190 | + excuteTestRef.value?.resetValue(false); | |
| 188 | 191 | let value = getValue(false) as any; |
| 189 | 192 | dataMap.mapHeaderObj = { |
| 190 | 193 | list: value?.Header, |
| ... | ... | @@ -207,14 +210,20 @@ |
| 207 | 210 | }; |
| 208 | 211 | |
| 209 | 212 | //设置数据 |
| 210 | - const setValue = (data) => { | |
| 211 | - nextTick(() => { | |
| 212 | - const Objects = JSON.parse(data?.requestParams); | |
| 213 | - if (!Objects) return; | |
| 214 | - dataForTypeMap[0][1](isEmpty(Objects?.Params) ? [pushObj] : Objects?.Params); | |
| 215 | - dataForTypeMap[1][1](isEmpty(Objects?.Body) ? {} : Objects?.Body); | |
| 216 | - dataForTypeMap[2][1](isEmpty(Objects?.Header) ? [pushObj] : Objects?.Header); | |
| 217 | - }); | |
| 213 | + const setValue = (data, flag, defaultValue) => { | |
| 214 | + if (!flag) { | |
| 215 | + nextTick(() => { | |
| 216 | + const Objects = JSON.parse(data?.requestParams); | |
| 217 | + if (!Objects) return; | |
| 218 | + dataForTypeMap[0][1](isEmpty(Objects?.Params) ? [pushObj] : Objects?.Params); | |
| 219 | + dataForTypeMap[1][1](isEmpty(Objects?.Body) ? {} : Objects?.Body); | |
| 220 | + dataForTypeMap[2][1](isEmpty(Objects?.Header) ? [pushObj] : Objects?.Header); | |
| 221 | + }); | |
| 222 | + } else { | |
| 223 | + nextTick(() => { | |
| 224 | + dataForTypeMap[0][1](defaultValue); | |
| 225 | + }); | |
| 226 | + } | |
| 218 | 227 | }; |
| 219 | 228 | |
| 220 | 229 | //重置数据 | ... | ... |
| ... | ... | @@ -31,7 +31,11 @@ |
| 31 | 31 | :options="selectTenantOptions" |
| 32 | 32 | /> |
| 33 | 33 | </div> |
| 34 | - <Button class="ml-2" @click="handleTest(isSingleClickText)" type="primary" | |
| 34 | + <Button | |
| 35 | + :disabled="testDisabled" | |
| 36 | + class="ml-2" | |
| 37 | + @click="handleTest(isSingleClickText)" | |
| 38 | + type="primary" | |
| 35 | 39 | >{{ `${isSingleClickText === 'open' ? '打开' : '关闭'}测试接口` }} |
| 36 | 40 | </Button> |
| 37 | 41 | </div> |
| ... | ... | @@ -43,7 +47,7 @@ |
| 43 | 47 | <TestBodyCellTable :token="getToken" ref="testEditCellTableRef" /> |
| 44 | 48 | </div> |
| 45 | 49 | <div style="width: 30vw" v-else-if="data?.type === 'json'"> |
| 46 | - <JsonEditor ref="jsonEditorRef" /> | |
| 50 | + <JsonEditor style="width: 35vw; height: 30vh" ref="jsonEditorRef" /> | |
| 47 | 51 | </div> |
| 48 | 52 | <div style="width: 30vw" v-else-if="data?.type === 'xml'"> |
| 49 | 53 | <a-textarea v-model:value="xmlContent" placeholder="请输入xml" :rows="6" /> |
| ... | ... | @@ -102,6 +106,8 @@ |
| 102 | 106 | |
| 103 | 107 | const showTestEditCell = ref(false); |
| 104 | 108 | |
| 109 | + const testDisabled = ref(true); | |
| 110 | + | |
| 105 | 111 | const excuteData = ref({}); |
| 106 | 112 | |
| 107 | 113 | const selectTenant = ref(undefined); |
| ... | ... | @@ -121,12 +127,22 @@ |
| 121 | 127 | const getToken = ref(''); |
| 122 | 128 | |
| 123 | 129 | const onSelect = async (e) => { |
| 130 | + if (e) { | |
| 131 | + testDisabled.value = false; | |
| 132 | + } else { | |
| 133 | + testDisabled.value = true; | |
| 134 | + } | |
| 124 | 135 | selectSysTenant.value = undefined; |
| 125 | 136 | const rest = (await getTenantAllPageLists(e)) as any; |
| 126 | 137 | selectTenantOptions.value = rest?.map((m) => ({ label: m.realName, value: m.id })); |
| 127 | 138 | }; |
| 128 | 139 | |
| 129 | 140 | const onSelctTenant = async (e) => { |
| 141 | + if (e) { | |
| 142 | + testDisabled.value = false; | |
| 143 | + } else { | |
| 144 | + testDisabled.value = true; | |
| 145 | + } | |
| 130 | 146 | const { token } = await getUserToken(e); |
| 131 | 147 | getToken.value = token; |
| 132 | 148 | }; | ... | ... |
| 1 | 1 | <template> |
| 2 | 2 | <div v-if="showTestFlag" class="mt-8"> |
| 3 | 3 | <div> |
| 4 | - <Button @click="handleExcute" type="primary"> 执行测试请求 </Button> | |
| 4 | + <a-row> | |
| 5 | + <Button @click="handleExcute" type="primary"> 执行测试请求 </Button> | |
| 6 | + </a-row> | |
| 7 | + <a-row class="mt-8" type="flex" justify="center" align="middle"> | |
| 8 | + <a-col :span="2"> 测试地址 </a-col> | |
| 9 | + <a-col :span="22"> | |
| 10 | + <Tag color="blue" style="width: 31.6vw; white-space: normal; height: auto"> | |
| 11 | + {{ apiUrl?.split('{?')[0] }} | |
| 12 | + </Tag> | |
| 13 | + </a-col> | |
| 14 | + </a-row> | |
| 5 | 15 | </div> |
| 6 | 16 | <div class="mt-8"> |
| 7 | 17 | <a-row type="flex" justify="center"> |
| 8 | - <a-col :span="2"> 测试结果 </a-col> | |
| 9 | - <a-col :span="22"> | |
| 18 | + <a-col :span="24"> | |
| 10 | 19 | <JsonEditor |
| 11 | 20 | v-if="isWebSocketType === '2'" |
| 12 | 21 | style="width: 35vw; height: 40vh" |
| ... | ... | @@ -25,6 +34,7 @@ |
| 25 | 34 | import { useWebSocket } from '@vueuse/core'; |
| 26 | 35 | import { useUtils } from '../../../hooks/useUtils'; |
| 27 | 36 | import JsonEditor from '../../SimpleRequest/components/jsonEditor.vue'; |
| 37 | + import { Tag } from 'ant-design-vue'; | |
| 28 | 38 | |
| 29 | 39 | const emits = defineEmits(['emitExcute']); |
| 30 | 40 | |
| ... | ... | @@ -73,6 +83,8 @@ |
| 73 | 83 | |
| 74 | 84 | const isToken = ref(''); |
| 75 | 85 | |
| 86 | + const apiUrl = ref(''); | |
| 87 | + | |
| 76 | 88 | const isPostToken = ref(''); |
| 77 | 89 | |
| 78 | 90 | //执行测试接口 |
| ... | ... | @@ -93,7 +105,7 @@ |
| 93 | 105 | isToken.value = Objects?.Params?.token; |
| 94 | 106 | const body = Objects?.Body?.params; |
| 95 | 107 | isPostToken.value = Objects?.Body?.token; |
| 96 | - const apiUrl = url?.restfulFormat(params); | |
| 108 | + apiUrl.value = url?.restfulFormat(params); | |
| 97 | 109 | if (isWebSocketType.value === '2') { |
| 98 | 110 | socketUrls.value = url; |
| 99 | 111 | socketMessage.server = `${socketUrls.value}?token=${isToken.value}`; |
| ... | ... | @@ -105,24 +117,32 @@ |
| 105 | 117 | resetValue(false); |
| 106 | 118 | } |
| 107 | 119 | } else { |
| 108 | - const resp = await otherHttpRequest( | |
| 109 | - apiType, | |
| 110 | - apiUrl?.split('{?')[0], | |
| 111 | - headers, | |
| 112 | - params, | |
| 113 | - body, | |
| 114 | - isToken.value, | |
| 115 | - isPostToken.value | |
| 116 | - ); | |
| 117 | - if (!resp) return; | |
| 118 | - if (Object.prototype.toString.call(resp) === '[object Object]') { | |
| 119 | - jsonEditorRef.value?.setJsonValue(resp); | |
| 120 | - } else if (typeof resp === 'string') { | |
| 121 | - jsonEditorRef.value?.setJsonValue(resp); | |
| 122 | - } else if (Array.isArray(resp)) { | |
| 123 | - jsonEditorRef.value?.setJsonValue(JSON.stringify(resp)); | |
| 124 | - } else { | |
| 125 | - jsonEditorRef.value?.setJsonValue(JSON.stringify(resp)); | |
| 120 | + try { | |
| 121 | + const resp = await otherHttpRequest( | |
| 122 | + apiType, | |
| 123 | + apiUrl.value?.split('{?')[0], | |
| 124 | + headers, | |
| 125 | + params, | |
| 126 | + body, | |
| 127 | + isToken.value, | |
| 128 | + isPostToken.value | |
| 129 | + ); | |
| 130 | + if (!resp) return; | |
| 131 | + if (Object.prototype.toString.call(resp) === '[object Object]') { | |
| 132 | + jsonEditorRef.value?.setJsonValue(resp); | |
| 133 | + } else if (typeof resp === 'string') { | |
| 134 | + jsonEditorRef.value?.setJsonValue(resp); | |
| 135 | + } else if (Array.isArray(resp)) { | |
| 136 | + jsonEditorRef.value?.setJsonValue(JSON.stringify(resp)); | |
| 137 | + } else { | |
| 138 | + jsonEditorRef.value?.setJsonValue(JSON.stringify(resp)); | |
| 139 | + } | |
| 140 | + } catch (e) { | |
| 141 | + if (Object.prototype.toString.call(e) === '[object Object]') { | |
| 142 | + jsonEditorRef.value?.setJsonValue(e); | |
| 143 | + } else { | |
| 144 | + jsonEditorRef.value?.setJsonValue(JSON.stringify(e)); | |
| 145 | + } | |
| 126 | 146 | } |
| 127 | 147 | } |
| 128 | 148 | }; |
| ... | ... | @@ -184,33 +204,42 @@ |
| 184 | 204 | const { convertObj } = useUtils(); |
| 185 | 205 | switch (apiType) { |
| 186 | 206 | case 'GET': |
| 187 | - const objGet = Object.assign({}, headers, { 'X-Authorization': `Bearer ${token}` }); | |
| 207 | + const objGet = Object.assign({}, headers, { | |
| 208 | + 'X-Authorization': `Bearer ${!token ? postToken : token}`, | |
| 209 | + }); | |
| 188 | 210 | return await otherHttp.get( |
| 189 | 211 | { url: apiUrl, params, headers: objGet }, |
| 190 | 212 | { |
| 191 | 213 | apiUrl: '', |
| 192 | 214 | joinPrefix, |
| 193 | 215 | withToken: false, |
| 216 | + errorMessageMode: 'none', | |
| 194 | 217 | } |
| 195 | 218 | ); |
| 196 | 219 | case 'POST': |
| 197 | - const objPost = Object.assign({}, headers, { 'X-Authorization': `Bearer ${postToken}` }); | |
| 220 | + const objPost = Object.assign({}, headers, { | |
| 221 | + 'X-Authorization': `Bearer ${!postToken ? token : postToken}`, | |
| 222 | + }); | |
| 198 | 223 | return await otherHttp.post( |
| 199 | 224 | { url: `${apiUrl}?${convertObj(params)}`, data: body, headers: objPost }, |
| 200 | 225 | { |
| 201 | 226 | apiUrl: '', |
| 202 | 227 | joinPrefix, |
| 203 | 228 | withToken: false, |
| 229 | + errorMessageMode: 'none', | |
| 204 | 230 | } |
| 205 | 231 | ); |
| 206 | 232 | case 'PUT': |
| 207 | - const objPut = Object.assign({}, headers, { 'X-Authorization': `Bearer ${postToken}` }); | |
| 233 | + const objPut = Object.assign({}, headers, { | |
| 234 | + 'X-Authorization': `Bearer ${!postToken ? token : postToken}`, | |
| 235 | + }); | |
| 208 | 236 | return await otherHttp.put( |
| 209 | 237 | { url: `${apiUrl}?${convertObj(params)}`, data: body, headers: objPut, params }, |
| 210 | 238 | { |
| 211 | 239 | apiUrl: '', |
| 212 | 240 | joinPrefix, |
| 213 | 241 | withToken: false, |
| 242 | + errorMessageMode: 'none', | |
| 214 | 243 | } |
| 215 | 244 | ); |
| 216 | 245 | } |
| ... | ... | @@ -220,8 +249,10 @@ |
| 220 | 249 | if (flag) { |
| 221 | 250 | showTestFlag.value = false; |
| 222 | 251 | } |
| 223 | - jsonEditorRef.value?.setJsonValue({}); | |
| 224 | - jsonWebsocketEditorRef.value?.setJsonValue({}); | |
| 252 | + nextTick(() => { | |
| 253 | + jsonEditorRef.value?.setJsonValue('执行测试结果为:'); | |
| 254 | + jsonWebsocketEditorRef.value?.setJsonValue('执行测试结果为:'); | |
| 255 | + }); | |
| 225 | 256 | isWebSocketType.value = '0'; |
| 226 | 257 | }; |
| 227 | 258 | ... | ... |
| ... | ... | @@ -31,7 +31,11 @@ |
| 31 | 31 | :options="selectTenantOptions" |
| 32 | 32 | /> |
| 33 | 33 | </div> |
| 34 | - <Button class="ml-2" @click="handleTest(isSingleClickText)" type="primary" | |
| 34 | + <Button | |
| 35 | + :disabled="testDisabled" | |
| 36 | + class="ml-2" | |
| 37 | + @click="handleTest(isSingleClickText)" | |
| 38 | + type="primary" | |
| 35 | 39 | >{{ `${isSingleClickText === 'open' ? '打开' : '关闭'}测试接口` }} |
| 36 | 40 | </Button> |
| 37 | 41 | </div> |
| ... | ... | @@ -87,6 +91,8 @@ |
| 87 | 91 | |
| 88 | 92 | const selectTenantOptions = ref<selectType[]>([]); |
| 89 | 93 | |
| 94 | + const testDisabled = ref(true); | |
| 95 | + | |
| 90 | 96 | const { createMessage } = useMessage(); |
| 91 | 97 | |
| 92 | 98 | const showTestEditCell = ref(false); |
| ... | ... | @@ -104,12 +110,22 @@ |
| 104 | 110 | const getToken = ref(''); |
| 105 | 111 | |
| 106 | 112 | const onSelect = async (e) => { |
| 113 | + if (e) { | |
| 114 | + testDisabled.value = false; | |
| 115 | + } else { | |
| 116 | + testDisabled.value = true; | |
| 117 | + } | |
| 107 | 118 | selectSysTenant.value = undefined; |
| 108 | 119 | const rest = (await getTenantAllPageLists(e)) as any; |
| 109 | 120 | selectTenantOptions.value = rest?.map((m) => ({ label: m.realName, value: m.id })); |
| 110 | 121 | }; |
| 111 | 122 | |
| 112 | 123 | const onSelctTenant = async (e) => { |
| 124 | + if (e) { | |
| 125 | + testDisabled.value = false; | |
| 126 | + } else { | |
| 127 | + testDisabled.value = true; | |
| 128 | + } | |
| 113 | 129 | const { token } = await getUserToken(e); |
| 114 | 130 | getToken.value = token; |
| 115 | 131 | }; | ... | ... |
| ... | ... | @@ -21,7 +21,11 @@ |
| 21 | 21 | :options="selectTenantOptions" |
| 22 | 22 | /> |
| 23 | 23 | </div> |
| 24 | - <Button class="ml-2" @click="handleTest(isSingleClickText)" type="primary" | |
| 24 | + <Button | |
| 25 | + :disabled="isAdmin(role) ? testDisabled : false" | |
| 26 | + class="ml-2" | |
| 27 | + @click="handleTest(isSingleClickText)" | |
| 28 | + type="primary" | |
| 25 | 29 | >{{ `${isSingleClickText === 'open' ? '打开' : '关闭'}测试接口` }} |
| 26 | 30 | </Button> |
| 27 | 31 | </div> |
| ... | ... | @@ -77,6 +81,8 @@ |
| 77 | 81 | |
| 78 | 82 | const selectOptions = ref<selectType[]>([]); |
| 79 | 83 | |
| 84 | + const testDisabled = ref(true); | |
| 85 | + | |
| 80 | 86 | const selectTenantOptions = ref<selectType[]>([]); |
| 81 | 87 | |
| 82 | 88 | const { createMessage } = useMessage(); |
| ... | ... | @@ -98,24 +104,28 @@ |
| 98 | 104 | const getToken = ref(''); |
| 99 | 105 | |
| 100 | 106 | const onSelect = async (e) => { |
| 107 | + if (e) { | |
| 108 | + testDisabled.value = false; | |
| 109 | + } else { | |
| 110 | + testDisabled.value = true; | |
| 111 | + } | |
| 101 | 112 | selectSysTenant.value = undefined; |
| 102 | 113 | const rest = (await getTenantAllPageLists(e)) as any; |
| 103 | 114 | selectTenantOptions.value = rest?.map((m) => ({ label: m.realName, value: m.id })); |
| 104 | 115 | }; |
| 105 | 116 | |
| 106 | 117 | const onSelctTenant = async (e) => { |
| 118 | + if (e) { | |
| 119 | + testDisabled.value = false; | |
| 120 | + } else { | |
| 121 | + testDisabled.value = true; | |
| 122 | + } | |
| 107 | 123 | const { token } = await getUserToken(e); |
| 108 | 124 | getToken.value = token; |
| 109 | 125 | }; |
| 110 | 126 | const isSingleClickText = ref('open'); |
| 111 | 127 | |
| 112 | 128 | const handleTest = (o) => { |
| 113 | - if (isAdmin(role)) { | |
| 114 | - if (!selectTenant.value || !selectSysTenant.value) { | |
| 115 | - createMessage.error('请选择租户或者租户管理员'); | |
| 116 | - throw Error('请选择租户或者租户管理员'); | |
| 117 | - } | |
| 118 | - } | |
| 119 | 129 | if (o === 'open') { |
| 120 | 130 | showTestEditCell.value = true; |
| 121 | 131 | emits('testParamsInterface'); | ... | ... |
| ... | ... | @@ -10,6 +10,9 @@ |
| 10 | 10 | > |
| 11 | 11 | <BasicForm @register="registerForm"> |
| 12 | 12 | <template #selectMethods="{ model }"> |
| 13 | + <p style="display: none">{{ | |
| 14 | + watchRequestHttpTypeAndUrl(model['requestHttpTypeAndUrl']) | |
| 15 | + }}</p> | |
| 13 | 16 | <SimpleRequest |
| 14 | 17 | ref="simpleRequestRef" |
| 15 | 18 | v-if="model['requestContentType'] === '0' || model['requestContentType'] === '2'" |
| ... | ... | @@ -30,7 +33,7 @@ |
| 30 | 33 | </template> |
| 31 | 34 | <template #slotFillAddress="{ model }"> |
| 32 | 35 | <div> |
| 33 | - <Tag style="height: 3.3vh; line-height: 3.3vh"> | |
| 36 | + <Tag color="blue" style="width: 35vw; white-space: normal; height: auto"> | |
| 34 | 37 | {{ |
| 35 | 38 | ` ${ |
| 36 | 39 | model['originUrlType'] !== 'server_url' |
| ... | ... | @@ -51,7 +54,7 @@ |
| 51 | 54 | </div> |
| 52 | 55 | </template> |
| 53 | 56 | <script lang="ts" setup name="publicApi"> |
| 54 | - import { ref, nextTick } from 'vue'; | |
| 57 | + import { ref, nextTick, watch } from 'vue'; | |
| 55 | 58 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
| 56 | 59 | import { BasicForm, useForm } from '/@/components/Form'; |
| 57 | 60 | import { schemas } from './config'; |
| ... | ... | @@ -84,6 +87,31 @@ |
| 84 | 87 | return isServerUrl(method, type); |
| 85 | 88 | }; |
| 86 | 89 | |
| 90 | + const watchRequestHttpTypeAndUrlStr = ref(''); | |
| 91 | + | |
| 92 | + const watchRequestHttpTypeAndUrl = (o) => { | |
| 93 | + watchRequestHttpTypeAndUrlStr.value = o; | |
| 94 | + }; | |
| 95 | + | |
| 96 | + watch( | |
| 97 | + () => watchRequestHttpTypeAndUrlStr.value, | |
| 98 | + (newValue: any) => { | |
| 99 | + if (!newValue?.requestUrl) return; | |
| 100 | + if (newValue?.requestUrl.includes('{entityType}')) { | |
| 101 | + simpleRequestRef.value?.setValue(null, true, [ | |
| 102 | + { | |
| 103 | + key: 'scope', | |
| 104 | + value: 'entityType', | |
| 105 | + required: true, | |
| 106 | + }, | |
| 107 | + ]); | |
| 108 | + } | |
| 109 | + }, | |
| 110 | + { | |
| 111 | + deep: true, | |
| 112 | + } | |
| 113 | + ); | |
| 114 | + | |
| 87 | 115 | const [registerForm, { resetFields, validate, setFieldsValue, updateSchema }] = useForm({ |
| 88 | 116 | labelWidth: 120, |
| 89 | 117 | schemas, |
| ... | ... | @@ -118,7 +146,7 @@ |
| 118 | 146 | requestUrl: data.record?.requestUrl, |
| 119 | 147 | }, |
| 120 | 148 | }); |
| 121 | - await nextTick(() => simpleRequestRef.value?.setValue(data.record)); | |
| 149 | + await nextTick(() => simpleRequestRef.value?.setValue(data.record, false, [])); | |
| 122 | 150 | updateSchema({ |
| 123 | 151 | field: 'requestHttpTypeAndUrl', |
| 124 | 152 | componentProps: { | ... | ... |