feat:大屏公共接口管理测试新增支持restful风格的接口测试

@@ -189,7 +189,7 @@
 
     table {
       border-collapse: collapse;
-      width: 100%;
+      width: 35vw;
       &:extend(.table-border-color);
     }
 

@@ -92,7 +92,11 @@
   };
 
   const handleTestInterface = () => {
-    const value = getValue(false);
+    let value = getValue(false);
+    const type = value?.requestParamsBodyType;
+    if (type === 'none') value = [];
+    if (type === 'form-data') value = value['form-data'];
+    if (type === 'x-www-form-urlencoded') value = value['x-www-form-urlencoded'];
     nextTick(
       () =>
         (dataMap.mapObj = {

 <template>
   <div class="table-content">
-    <table align="center" style="width: 100%" cellspacing="0">
+    <table align="center">
       <thead>
         <tr>
           <th></th>
@@ -54,6 +54,15 @@
               :options="attributeOptions"
               allowClear
             />
+            <a-range-picker
+              v-else-if="item.key === 'date'"
+              v-model:value="item.value"
+              style="width: 12vw"
+              :show-time="{ format: 'HH:mm' }"
+              format="YYYY-MM-DD HH:mm"
+              :placeholder="['开始', '结束']"
+              @ok="onRangeOk"
+            />
             <Select
               v-else
               v-model:value="item.value"
@@ -146,6 +155,10 @@
         getApi(list['x-www-form-urlencoded']);
   };
 
+  const onRangeOk = (value) => {
+    console.log('onOk: ', value);
+  };
+
   const getApi = (list) => {
     list?.forEach(async (it) => {
       if (it.key === 'deviceProfileId') {
@@ -158,7 +171,7 @@
     });
   };
 
-  //Select互斥
+  //TODO 待优化 Select互斥
   const handleChange = async (e) => {
     selectOptions.value.forEach((ele) => {
       ele.disabled = false;
@@ -257,6 +270,7 @@
 
   .table-content {
     table {
+      width: 31vw;
       &:extend(.table-border-color);
     }
 

@@ -35,10 +35,16 @@
   </div>
 </template>
 <script lang="ts" setup name="testRequest">
-  import { ref, nextTick } from 'vue';
+  import { ref, nextTick, reactive } from 'vue';
   import { Button } from 'ant-design-vue';
   import { TestEditCellTable } from '../TestEditCellTable/index';
   import { otherHttp } from '/@/utils/http/axios';
+  import moment from 'moment';
+  import { useWebSocket } from '@vueuse/core';
+  import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
+  import { getAuthCache } from '/@/utils/auth';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useGlobSetting } from '/@/hooks/setting';
 
   const emits = defineEmits(['testInterface']);
 
@@ -51,6 +57,19 @@
     },
   });
 
+  const { createMessage } = useMessage();
+
+  const token = getAuthCache(JWT_TOKEN_KEY);
+
+  const { socketUrl } = useGlobSetting();
+
+  const socketMessage = reactive({
+    server: `${socketUrl}${token}`,
+    sendValue: {
+      tsSubCmds: [],
+    },
+  });
+
   const showTestEditCell = ref(false);
 
   const testEditCellTableRef = ref<InstanceType<typeof TestEditCellTable>>();
@@ -113,13 +132,41 @@
     return formatString(this, replacements);
   };
 
-  //项目自带第三方请求
+  //TODO 待优化 项目自带第三方请求
   const otherHttpRequest = async (apiType, params = {}, api, joinPrefix = false) => {
-    console.log(params);
     switch (apiType) {
       case 'get':
+        Reflect.deleteProperty(params, 'deviceProfileId');
+        Reflect.deleteProperty(params, 'organizationId');
+        Reflect.deleteProperty(params, 'entityId');
+        Reflect.deleteProperty(params, 'entityType');
+        Reflect.deleteProperty(params, 'scope');
+        Reflect.deleteProperty(params, 'id');
+        Reflect.deleteProperty(params, 'type');
+        if (params['date']) {
+          Reflect.set(params, 'startTs', moment(params['date'][0]).valueOf());
+          Reflect.set(params, 'endTs', moment(params['date'][1]).valueOf());
+          Reflect.deleteProperty(params, 'date');
+        } else {
+        }
         return await otherHttp.get(
-          { url: api },
+          { url: api, params },
+          {
+            apiUrl: '',
+            joinPrefix,
+          }
+        );
+      case 'post':
+        return await otherHttp.post(
+          { url: api, data: params },
+          {
+            apiUrl: '',
+            joinPrefix,
+          }
+        );
+      case 'put':
+        return await otherHttp.put(
+          { url: api, data: params },
           {
             apiUrl: '',
             joinPrefix,
@@ -131,11 +178,12 @@
   const getValue = async () => {
     await nextTick();
     await nextTick(() => {
-      const getSingleKey = props.data?.list?.filter((it: any) => it.key.split(',').length === 1);
+      const getSingleKey = props.data?.list;
       const getMuteKey = props.data?.list?.filter((it: any) => it.key.split(',').length > 1);
       const getMuteKeys = getMultipleKeys(getMuteKey);
-      const getSingleKeys = getMultipleKeys(getSingleKey);
-      const mergeKeys = [...getSingleKeys, ...getMuteKeys];
+      const mergeKeys = [...getSingleKey, ...getMuteKeys]?.filter(
+        (it: any) => it.key.split(',').length === 1
+      );
       testEditCellTableRef.value?.setTableArray(mergeKeys);
     });
   };
@@ -147,12 +195,37 @@
       const getTable = getTestTableKeyValue();
       const apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestUrl}`;
       const apiType = props.data?.paramsType.toLowerCase();
-      const getKeyValues = {};
-      getTable?.map((it) => (getKeyValues[it.key!] = it.value!));
-      const formatApi = apiGetUrl.restfulFormat(getKeyValues);
-      const rest = await otherHttpRequest(apiType, {}, formatApi, false);
-      if (!rest) return;
-      testResult.value = rest;
+      const params: any = {};
+      getTable?.map((it) => (params[it.key!] = it.value!));
+      if (props.method === '0') {
+        //普通请求
+        const formatApi = apiGetUrl.restfulFormat(params);
+        const rest = await otherHttpRequest(apiType, params, formatApi.split('{?')[0], false);
+        testResult.value = JSON.stringify(rest);
+      } else if (props.method === '2') {
+        //websocket请求
+        Reflect.deleteProperty(params, 'deviceProfileId');
+        Reflect.deleteProperty(params, 'organizationId');
+        Reflect.set(params, 'cmdId', Number(params?.cmdId));
+        socketMessage.sendValue.tsSubCmds.push(params);
+        const { send, close } = useWebSocket(socketMessage.server, {
+          onConnected() {
+            send(JSON.stringify(socketMessage.sendValue));
+            console.log('建立连接了');
+          },
+          onMessage(_, e) {
+            const { data } = JSON.parse(e.data);
+            testResult.value = JSON.stringify(data);
+          },
+          onDisconnected() {
+            console.log('断开连接了');
+            close();
+          },
+          onError() {
+            createMessage.error('webSocket连接超时,请联系管理员');
+          },
+        });
+      }
     });
   };
 

@@ -124,7 +124,7 @@ export const schemas: FormSchema[] = [
     required: true,
     component: 'Input',
     componentProps: {
-      maxLength: 64,
+      maxLength: 255,
       placeholder: '请输入源地址',
     },
   },
@@ -154,7 +154,7 @@ export const schemas: FormSchema[] = [
     required: true,
     colProps: { span: 18 },
     componentProps: {
-      maxLength: 64,
+      maxLength: 255,
       placeholder: '请输入接口地址',
     },
     ifShow: ({ values }) =>