Showing
6 changed files
with
70 additions
and
26 deletions
| ... | ... | @@ -22,6 +22,7 @@ |
| 22 | 22 | v-show="getRequestBody.content.requestParamsBodyType === 'x-www-form-urlencoded'" |
| 23 | 23 | /> |
| 24 | 24 | <JsonEditor |
| 25 | + :showBtn="false" | |
| 25 | 26 | style="width: 35vw; height: 30vh" |
| 26 | 27 | v-show="getRequestBody.content.requestParamsBodyType === 'json'" |
| 27 | 28 | ref="jsonEditorRef" | ... | ... |
| 1 | 1 | <template> |
| 2 | - <div ref="jsoneditorRef" style="height: 100%; width: 100%"></div> | |
| 2 | + <div class="flex" style="justify-content: space-between; align-content: center"> | |
| 3 | + <div ref="jsoneditorRef" style="height: 100%; width: 100%"></div> | |
| 4 | + <div class="ml-2 -mt-1.5"> | |
| 5 | + <Button v-if="showBtn" @click="onHandleCopy" type="text"> 复制测试结果 </Button> | |
| 6 | + </div> | |
| 7 | + </div> | |
| 3 | 8 | </template> |
| 4 | 9 | |
| 5 | 10 | <script lang="ts" setup> |
| 6 | 11 | import { ref, onMounted, nextTick, unref } from 'vue'; |
| 7 | 12 | import jsoneditor from 'jsoneditor'; |
| 8 | 13 | import 'jsoneditor/dist/jsoneditor.min.css'; |
| 14 | + import { Button } from 'ant-design-vue'; | |
| 15 | + import { useMessage } from '/@/hooks/web/useMessage'; | |
| 16 | + | |
| 17 | + defineProps({ | |
| 18 | + showBtn: { | |
| 19 | + type: Boolean, | |
| 20 | + default: false, | |
| 21 | + }, | |
| 22 | + }); | |
| 23 | + | |
| 24 | + const { createMessage } = useMessage(); | |
| 9 | 25 | |
| 10 | 26 | // json 以及初始化JSON |
| 11 | 27 | const jsoneditorRef = ref(); |
| ... | ... | @@ -20,16 +36,12 @@ |
| 20 | 36 | mode: 'code', |
| 21 | 37 | mainMenuBar: false, |
| 22 | 38 | statusBar: false, |
| 23 | - onFocus: () => {}, | |
| 24 | - onBlur: () => { | |
| 25 | - setJsonValue('执行测试结果为:'); | |
| 39 | + onFocus: () => { | |
| 40 | + setJsonValue('测试结果为'); | |
| 26 | 41 | }, |
| 42 | + onBlur: () => {}, | |
| 27 | 43 | onChangeText: (e) => { |
| 28 | - if (e.length === 0) { | |
| 29 | - setJsonValue('执行测试结果为:'); | |
| 30 | - } else { | |
| 31 | - // setJsonValue(undefined); | |
| 32 | - } | |
| 44 | + if (e.length) return setJsonValue('测试结果为'); | |
| 33 | 45 | }, |
| 34 | 46 | } as object; |
| 35 | 47 | let editor = new jsoneditor(jsoneditorRef.value, options); |
| ... | ... | @@ -40,11 +52,11 @@ |
| 40 | 52 | |
| 41 | 53 | const getJsonValue = () => unref(jsonInstance).get(); |
| 42 | 54 | |
| 43 | - // const setJsonMode = (mode) => { | |
| 44 | - // nextTick(() => { | |
| 45 | - // unref(jsonInstance).setMode(mode); | |
| 46 | - // }); | |
| 47 | - // }; | |
| 55 | + const setJsonMode = (mode) => { | |
| 56 | + nextTick(() => { | |
| 57 | + unref(jsonInstance).setMode(mode); | |
| 58 | + }); | |
| 59 | + }; | |
| 48 | 60 | |
| 49 | 61 | const setJsonValue = (Json) => { |
| 50 | 62 | nextTick(() => { |
| ... | ... | @@ -52,10 +64,28 @@ |
| 52 | 64 | }); |
| 53 | 65 | }; |
| 54 | 66 | |
| 67 | + function copyToClip(content, message) { | |
| 68 | + var aux = document.createElement('input'); | |
| 69 | + aux.setAttribute('value', content); | |
| 70 | + document.body.appendChild(aux); | |
| 71 | + aux.select(); | |
| 72 | + document.execCommand('copy'); | |
| 73 | + document.body.removeChild(aux); | |
| 74 | + if (message == null) { | |
| 75 | + createMessage.success('复制成功!'); | |
| 76 | + } else { | |
| 77 | + } | |
| 78 | + } | |
| 79 | + | |
| 80 | + const onHandleCopy = () => { | |
| 81 | + copyToClip(JSON.stringify(getJsonValue()), null); | |
| 82 | + }; | |
| 83 | + | |
| 55 | 84 | defineExpose({ |
| 56 | 85 | getJsonValue, |
| 57 | 86 | setJsonValue, |
| 58 | 87 | jsonInstance, |
| 88 | + setJsonMode, | |
| 59 | 89 | }); |
| 60 | 90 | </script> |
| 61 | 91 | ... | ... |
| ... | ... | @@ -32,7 +32,7 @@ |
| 32 | 32 | /> |
| 33 | 33 | </div> |
| 34 | 34 | <Button |
| 35 | - :disabled="testDisabled" | |
| 35 | + :disabled="isAdmin(role) ? testDisabled : false" | |
| 36 | 36 | class="ml-2" |
| 37 | 37 | @click="handleTest(isSingleClickText)" |
| 38 | 38 | type="primary" |
| ... | ... | @@ -47,7 +47,7 @@ |
| 47 | 47 | <TestBodyCellTable :token="getToken" ref="testEditCellTableRef" /> |
| 48 | 48 | </div> |
| 49 | 49 | <div style="width: 30vw" v-else-if="data?.type === 'json'"> |
| 50 | - <JsonEditor style="width: 35vw; height: 30vh" ref="jsonEditorRef" /> | |
| 50 | + <JsonEditor :showBtn="false" style="width: 35vw; height: 30vh" ref="jsonEditorRef" /> | |
| 51 | 51 | </div> |
| 52 | 52 | <div style="width: 30vw" v-else-if="data?.type === 'xml'"> |
| 53 | 53 | <a-textarea v-model:value="xmlContent" placeholder="请输入xml" :rows="6" /> | ... | ... |
| ... | ... | @@ -16,14 +16,22 @@ |
| 16 | 16 | </div> |
| 17 | 17 | </div> |
| 18 | 18 | <div class="mt-8"> |
| 19 | - <a-row type="flex" justify="center"> | |
| 19 | + <a-row type="flex" justify="space-between" align="middle"> | |
| 20 | 20 | <a-col :span="24"> |
| 21 | - <JsonEditor | |
| 22 | - v-if="isWebSocketType === '2'" | |
| 23 | - style="width: 35vw; height: 40vh" | |
| 24 | - ref="jsonWebsocketEditorRef" | |
| 25 | - /> | |
| 26 | - <JsonEditor v-else style="width: 35vw; height: 40vh" ref="jsonEditorRef" /> | |
| 21 | + <div> | |
| 22 | + <JsonEditor | |
| 23 | + :showBtn="true" | |
| 24 | + v-if="isWebSocketType === '2'" | |
| 25 | + style="width: 40vw; height: 40vh" | |
| 26 | + ref="jsonWebsocketEditorRef" | |
| 27 | + /> | |
| 28 | + <JsonEditor | |
| 29 | + :showBtn="true" | |
| 30 | + v-else | |
| 31 | + style="width: 40vw; height: 40vh" | |
| 32 | + ref="jsonEditorRef" | |
| 33 | + /> | |
| 34 | + </div> | |
| 27 | 35 | </a-col> |
| 28 | 36 | </a-row> |
| 29 | 37 | </div> |
| ... | ... | @@ -260,8 +268,8 @@ |
| 260 | 268 | showTestFlag.value = false; |
| 261 | 269 | } |
| 262 | 270 | nextTick(() => { |
| 263 | - jsonEditorRef.value?.setJsonValue('执行测试结果为:'); | |
| 264 | - jsonWebsocketEditorRef.value?.setJsonValue('执行测试结果为:'); | |
| 271 | + jsonEditorRef.value?.setJsonValue('测试结果为'); | |
| 272 | + jsonWebsocketEditorRef.value?.setJsonValue('测试结果为'); | |
| 265 | 273 | }); |
| 266 | 274 | isWebSocketType.value = '0'; |
| 267 | 275 | }; | ... | ... |
| ... | ... | @@ -189,6 +189,11 @@ export const schemas: FormSchema[] = [ |
| 189 | 189 | component: 'Input', |
| 190 | 190 | slot: 'slotFillAddress', |
| 191 | 191 | colProps: { span: 24 }, |
| 192 | + ifShow: ({ values }) => { | |
| 193 | + if (values['requestOriginUrl']) { | |
| 194 | + return true; | |
| 195 | + } else return false; | |
| 196 | + }, | |
| 192 | 197 | }, |
| 193 | 198 | { |
| 194 | 199 | field: 'requestSQLKey', | ... | ... |