Merge branch 'local_dev_ft' into 'main_dev'

feat:大屏设计器新增restful风格测试 See merge request yunteng/thingskit-front!517

Merge branch 'local_dev_ft' into 'main_dev'
feat:大屏设计器新增restful风格测试 See merge request yunteng/thingskit-front!517
xp.Huang
2 parents cf3294a0 2af3fe42
Showing 7 changed files with 254 additions and 98 deletions
src/views/dataview/publicApi/components/EditCellTable/index.vue
src/views/dataview/publicApi/components/SimpleRequest/index.vue
src/views/dataview/publicApi/components/TestEditCellTable/index.vue
src/views/dataview/publicApi/components/TestRequest/index.vue
src/views/dataview/publicApi/config.ts
src/views/dataview/publicApi/form.vue
types/global.d.ts
--- a/src/views/dataview/publicApi/components/EditCellTable/index.vue
View file @ac33226
+++ b/src/views/dataview/publicApi/components/EditCellTable/index.vue
View file @ac33226
@@ -13,10 +13,10 @@
       </thead>
       <tbody>
         <tr v-for="(item, index) in tableArray.content" :key="index">
-          <td>
+          <td style="width: 1vw">
             {{ index + 1 }}
           </td>
-          <td>
+          <td style="width: 12vw">
             <Select
               v-model:value="item.key"
               placeholder="请选择"
@@ -25,17 +25,17 @@
               allowClear
             />
           </td>
-          <td>
+          <td style="width: 12vw">
             <a-input
               :disabled="item.editDisabled"
               placeholder="请输入"
               v-model:value="item.value"
             />
           </td>
-          <td>
+          <td style="width: 4vw">
             <a-switch v-model:checked="item.required" />
           </td>
-          <td>
+          <td style="width: 2vw">
             <div>
               <Button type="dashed" @click="add(item, index)">
                 <template #icon><PlusOutlined /></template
@@ -189,12 +189,11 @@
     table {
       border-collapse: collapse;
-      width: 100%;
+      width: 35vw;
       &:extend(.table-border-color);
     }
     table td {
-      width: 7vw;
       padding: 5px;
       white-space: nowrap;
       &:extend(.table-border-color);
--- a/src/views/dataview/publicApi/components/SimpleRequest/index.vue
View file @ac33226
+++ b/src/views/dataview/publicApi/components/SimpleRequest/index.vue
View file @ac33226
@@ -7,7 +7,9 @@
           @testInterface="handleTestInterface"
           ref="testParRequestRef"
           :method="method"
-          :data="dataList"
+          :requestOriginUrl="requestOriginUrl"
+          :requestUrl="requestUrl"
+          :data="dataMap.mapObj"
         />
       </TabPane>
       <TabPane
@@ -17,12 +19,14 @@
         key="Body"
         tab="Body"
       >
-        <Body ref="bodyRef" :method="method" :paramsType="paramsType" :data="dataList" />
+        <Body ref="bodyRef" :method="method" :paramsType="paramsType" :data="dataMap.mapObj" />
         <TestRequest
           @testInterface="handleTestInterface"
           ref="testBodyRequestRef"
           :method="method"
-          :data="dataList"
+          :requestOriginUrl="requestOriginUrl"
+          :requestUrl="requestUrl"
+          :data="dataMap.mapObj"
         />
       </TabPane>
       <TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Header" tab="Header">
@@ -31,26 +35,34 @@
           @testInterface="handleTestInterface"
           ref="testHeaderRequestRef"
           :method="method"
-          :data="dataList"
+          :requestOriginUrl="requestOriginUrl"
+          :requestUrl="requestUrl"
+          :data="dataMap.mapObj"
         />
       </TabPane>
     </Tabs>
   </div>
 </template>
 <script lang="ts" setup name="simpleRequest">
-  import { ref, nextTick } from 'vue';
+  import { ref, nextTick, reactive } from 'vue';
   import { Tabs, TabPane } from 'ant-design-vue';
   import { EditCellTable } from '../EditCellTable';
   import Body from './body.vue';
   import { TestRequest } from '../TestRequest/index';
-  defineProps({
+  const props = defineProps({
     method: {
       type: String,
     },
     paramsType: {
       type: String,
     },
+    requestOriginUrl: {
+      type: String,
+    },
+    requestUrl: {
+      type: String,
+    },
   });
   const emits = defineEmits(['activeKey']);
@@ -67,7 +79,9 @@
   const testHeaderRequestRef = ref<InstanceType<typeof TestRequest>>();
-  const dataList: any = ref(null);
+  const dataMap: any = reactive({
+    mapObj: {},
+  });
   const bodyRef = ref<InstanceType<typeof Body>>();
@@ -78,8 +92,20 @@
   };
   const handleTestInterface = () => {
-    const value = getValue(false);
-    nextTick(() => (dataList.value = value));
+    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 = {
+          list: value,
+          requestOriginUrl: props.requestOriginUrl,
+          requestUrl: props.requestUrl,
+          paramsType: props.paramsType,
+        })
+    );
   };
   //获取数据
--- a/src/views/dataview/publicApi/components/TestEditCellTable/index.vue
View file @ac33226
+++ b/src/views/dataview/publicApi/components/TestEditCellTable/index.vue
View file @ac33226
 <template>
   <div class="table-content">
-    <table align="center" style="width: 100%" cellspacing="0">
+    <table align="center">
       <thead>
         <tr>
           <th></th>
           <th>内置参数</th>
           <th>参数名</th>
+          <th>参数值</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(item, index) in tableTestArray.content" :key="index">
-          <td>
+          <td style="width: 1vw">
             {{ index + 1 }}
           </td>
-          <td>
+          <td style="width: 12vw">
             <Select
               :disabled="true"
               v-model:value="item.key"
               placeholder="请选择"
               notFoundContent="请选择"
-              style="width: 14rem"
               :options="selectOptions"
-              @change="handleChange(item)"
               allowClear
             />
           </td>
-          <td>
-            <a-input
-              v-if="item.key === 'scope'"
-              placeholder="请输入"
-              v-model:value="item.value"
-              style="width: 14rem"
-            />
+          <td style="width: 12vw">
+            <a-input v-if="item.key === 'scope'" placeholder="请输入" v-model:value="item.value" />
             <a-tree-select
               v-else-if="item.key === 'organizationId'"
               v-model:value="item.value"
               show-search
-              style="width: 14rem"
               :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
               placeholder="请选择组织"
               allow-clear
@@ -49,30 +42,44 @@
               v-model:value="item.value"
               placeholder="请选择"
               notFoundContent="请选择"
-              style="width: 14rem"
               :options="entityOptions"
               allowClear
+              @change="handleDeviceChange(item)"
             />
             <Select
               v-else-if="item.key === 'keys'"
               v-model:value="item.value"
               placeholder="请选择"
               notFoundContent="请选择"
-              style="width: 14rem"
               :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"
               placeholder="请选择"
               notFoundContent="请选择"
-              style="width: 14rem"
               :options="valueOptions"
               allowClear
               @change="handleValueChange(item)"
             />
           </td>
+          <td style="width: 12vw">
+            <a-input
+              :disabled="item.key !== 'scope'"
+              placeholder="请输入"
+              v-model:value="item.keyValue"
+            />
+          </td>
         </tr>
       </tbody>
     </table>
@@ -117,6 +124,7 @@
   type defaultItem = {
     key: null | string;
     value: null | string;
+    keyValue: null | string;
     editDisabled: boolean;
   };
@@ -127,6 +135,7 @@
       {
         key: null,
         value: null,
+        keyValue: null,
         editDisabled: false,
       },
     ],
@@ -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,58 +171,15 @@
     });
   };
-  //Select互斥
-  const handleChange = async (e) => {
-    selectOptions.value.forEach((ele) => {
-      ele.disabled = false;
-      tableTestArray.content.forEach((element) => {
-        if (element.key === e.key && element.key !== 'scope') {
-          element.value = null;
-        }
-        if (element.key === ele.value && element.key !== 'scope') {
-          ele.disabled = true;
-        }
-      });
-    });
-    //获取对应项
-    if (e.key === 'deviceProfileId') {
-      const { options } = await useApi(e.key);
-      valueOptions.value = options;
-    } else if (e.key === 'organizationId') {
-      const { options } = await useApi(e.key);
-      treeData.value = options as any;
-    } else if (e.key === 'entityId') {
-      const getOrganizationIds = tableTestArray.content
-        .map((f) => {
-          if (f.key === 'organizationId') {
-            return f.value;
-          }
-        })
-        .filter(Boolean);
-      if (getOrganizationIds.length === 0) return;
-      getEntityOptions(getOrganizationIds?.at(-1));
-    } else if (e.key === 'keys') {
-      const getIds = tableTestArray.content
-        .map((f) => {
-          if (f.key === 'deviceProfileId') {
-            return f.value;
-          }
-        })
-        .filter(Boolean);
-      if (getIds.length === 0) return;
-      getAttributeOptions({ deviceProfileId: getIds?.at(-1) });
-    } else if (e.key === 'date') {
-      valueOptions.value = [];
-    }
-  };
-
   const handleOrgnationChange = async (e) => {
+    let deviceProfileId = '';
     tableTestArray.content.forEach((f) => {
       if (f.key === 'entityId') {
         f.value = null;
       }
+      if (f.key === 'deviceProfileId') deviceProfileId = f.value;
     });
-    getEntityOptions(e.value);
+    getEntityOptions(e.value, deviceProfileId);
   };
   const getEntityOptions = async (organizationId: string, deviceProfileId?: string) => {
@@ -227,16 +197,26 @@
   };
   const handleValueChange = (e) => {
+    let organizationId = '';
     if (e.key === 'deviceProfileId') {
       tableTestArray.content.forEach((f) => {
         if (f.key === 'keys') {
           f.value = null;
         }
+        if (f.key === 'organizationId') organizationId = f.value;
+        if (f.key === 'entityId') f.value = null;
       });
       getAttributeOptions({ deviceProfileId: e.value });
+      if (organizationId !== '') {
+        getEntityOptions(organizationId, e.value);
+      }
     }
   };
+  const handleDeviceChange = (e) => {
+    console.log(e);
+  };
+
   //获取数据
   const getValue = () => {
     return tableTestArray.content;
@@ -248,6 +228,9 @@
 </script>
 <style scoped lang="less">
+  :deep(.ant-select-selector) {
+    width: 12vw !important;
+  }
   @table-color: #e5e7eb;
   .table-border-color {
@@ -257,11 +240,11 @@
   .table-content {
     table {
+      width: 31vw;
       &:extend(.table-border-color);
     }
     table td {
-      width: 7vw;
       padding: 5px;
       white-space: nowrap;
       &:extend(.table-border-color);
--- a/src/views/dataview/publicApi/components/TestRequest/index.vue
View file @ac33226
+++ b/src/views/dataview/publicApi/components/TestRequest/index.vue
View file @ac33226
@@ -35,11 +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 { getAllDeviceByOrg } from '/@/api/dataBoard';
-  import { getDeviceAttributes } from '/@/api/dataBoard';
+  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']);
@@ -48,7 +53,20 @@
       type: String,
     },
     data: {
-      type: Array,
+      type: Object,
+    },
+  });
+
+  const { createMessage } = useMessage();
+
+  const token = getAuthCache(JWT_TOKEN_KEY);
+
+  const { socketUrl } = useGlobSetting();
+
+  const socketMessage = reactive({
+    server: `${socketUrl}${token}`,
+    sendValue: {
+      tsSubCmds: [],
     },
   });
@@ -66,26 +84,147 @@
     getValue();
   };
+  //获取多个key
+  const getMultipleKeys = (list) => {
+    let temps = [];
+    list?.forEach((it) => {
+      const keys = it.key.split(',');
+      const temp = keys.map((item) => {
+        let obj: { key: string; value: string } = { key: '', value: '' };
+        obj.key = item;
+        obj.value = item === 'scope' ? it.value : '';
+        return obj;
+      });
+      temps = temp;
+    });
+    return temps;
+  };
+
+  //获取测试表格的key value 数组对象形式
+  const getTestTableKeyValue = () => {
+    return testEditCellTableRef.value?.getValue().map((it) => {
+      const value = it.key === 'scope' ? it.keyValue : it.value;
+      const key = it.key === 'scope' ? it.value : it.key;
+      return {
+        key,
+        value,
+      };
+    });
+  };
+
+  //格式化"http:xxxx/api/xx/{xx}/{xx}/{xx}这种格式"
+  String.prototype.restfulFormat = function (replacements) {
+    var formatString = function (str, replacements) {
+      replacements =
+        typeof replacements === 'object' ? replacements : Array.prototype.slice.call(arguments, 1);
+      return str.replace(/\{\{|\}\}|\{(\w+)\}/g, function (m, n) {
+        if (m == '{{') {
+          return '{';
+        }
+        if (m == '}}') {
+          return '}';
+        }
+        return replacements[n];
+      });
+    };
+    replacements =
+      typeof replacements === 'object' ? replacements : Array.prototype.slice.call(arguments, 0);
+    return formatString(this, replacements);
+  };
+
+  //TODO 待优化 项目自带第三方请求
+  const otherHttpRequest = async (apiType, params = {}, api, joinPrefix = false) => {
+    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, 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,
+          }
+        );
+    }
+  };
+
   const getValue = async () => {
     await nextTick();
     await nextTick(() => {
-      testEditCellTableRef.value?.setTableArray(props.data);
+      const getSingleKey = props.data?.list;
+      const getMuteKey = props.data?.list?.filter((it: any) => it.key.split(',').length > 1);
+      const getMuteKeys = getMultipleKeys(getMuteKey);
+      const mergeKeys = [...getSingleKey, ...getMuteKeys]?.filter(
+        (it: any) => it.key.split(',').length === 1
+      );
+      testEditCellTableRef.value?.setTableArray(mergeKeys);
     });
   };
+  //执行测试接口
   const handleExcute = async () => {
-    const params = testEditCellTableRef.value?.getValue();
-    const keys = params?.map((m) => ({ key: m.key, value: m.value }));
-    keys?.forEach(async (it: any) => {
-      if (it.key === 'organizationId') {
-        //获取设备
-        const data = await getAllDeviceByOrg(it.value!);
-        testResult.value = JSON.stringify(data);
-      }
-      if (it.key === 'deviceProfileId') {
-        //获取属性
-        const data = await getDeviceAttributes({ deviceProfileId: it.value! });
-        testResult.value = JSON.stringify(data);
+    await nextTick();
+    await nextTick(async () => {
+      const getTable = getTestTableKeyValue();
+      const apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestUrl}`;
+      const apiType = props.data?.paramsType.toLowerCase();
+      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连接超时,请联系管理员');
+          },
+        });
       }
     });
   };
@@ -95,6 +234,7 @@
     showTestEditCell.value = false;
     testResult.value = '';
   };
+
   defineExpose({
     setValue,
     handleTest,
--- a/src/views/dataview/publicApi/config.ts
View file @ac33226
+++ b/src/views/dataview/publicApi/config.ts
View file @ac33226
@@ -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 }) =>
--- a/src/views/dataview/publicApi/form.vue
View file @ac33226
+++ b/src/views/dataview/publicApi/form.vue
View file @ac33226
@@ -15,6 +15,8 @@
             @activeKey="handleActiveKey"
             :paramsType="model['requestHttpType']"
             :method="model['requestContentType']"
+            :requestOriginUrl="model['requestOriginUrl']"
+            :requestUrl="model['requestUrl']"
           />
           <SimpleRequest
             ref="simpleRequestRef"
@@ -22,6 +24,8 @@
             v-else-if="model['requestContentType'] === '2'"
             :paramsType="model['requestHttpType']"
             :method="model['requestContentType']"
+            :requestOriginUrl="model['requestOriginUrl']"
+            :requestUrl="model['requestUrl']"
           />
         </template>
         <template #testSql="{ model }">
--- a/types/global.d.ts
View file @ac33226
+++ b/types/global.d.ts
View file @ac33226
@@ -52,6 +52,10 @@ declare global {
   declare interface WheelEvent {
     path?: EventTarget[];
   }
+
+  declare interface String {
+    restfulFormat: any;
+  }
   interface ImportMetaEnv extends ViteEnv {
     __: unknown;
   }