pref: 优化公共接口管理部分代码

+@table-color: #e5e7eb;
+
+.table-border-color {
+  border: 1px solid #e5e7eb;
+  text-align: center;
+}
+
+.table-content {
+  overflow-x: auto;
+
+  table {
+    border-collapse: collapse;
+    width: 35vw;
+    &:extend(.table-border-color);
+  }
+
+  table thead {
+    white-space: nowrap;
+  }
+
+  table td {
+    padding: 5px;
+    white-space: nowrap;
+    &:extend(.table-border-color);
+  }
+
+  table th {
+    padding: 5px;
+    &:extend(.table-border-color);
+  }
+}

+@table-color: #e5e7eb;
+
+.table-border-color {
+  border: 1px solid #e5e7eb;
+  text-align: center;
+}
+
+.table-content {
+  table {
+    width: 31vw;
+    &:extend(.table-border-color);
+  }
+
+  table td {
+    padding: 5px;
+    white-space: nowrap;
+    &:extend(.table-border-color);
+  }
+
+  table th {
+    padding: 5px;
+    &:extend(.table-border-color);
+  }
+}

+<template>
+  <div class="flex flex-col justify-between">
+    <Tag v-if="scriptType === OnlineEditorTypeEnum.JAVASCRIPT" color="blue" class="tag-text-top">
+      <span>function</span>&nbsp;&nbsp;filter(res)&nbsp;&nbsp;{
+    </Tag>
+    <div class="mt-2 mb-2" ref="aceRef"></div>
+    <Tag
+      v-if="scriptType === OnlineEditorTypeEnum.JAVASCRIPT"
+      color="blue"
+      class="mt-2 tag-text-bottom"
+      >}</Tag
+    >
+    <div v-if="scriptType === OnlineEditorTypeEnum.JAVASCRIPT" class="ml-2 -mt-1.5">
+      <Button @click="onHandleFormatter" class="mt-8 -ml-2">
+        <template #icon>
+          <CopyOutlined />
+        </template>
+        格式化
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="aceEditor">
+  import { ref, computed, onMounted, nextTick, watch } from 'vue';
+  import ace from 'ace-builds';
+  import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
+  import 'ace-builds/src-noconflict/theme-terminal'; // 默认设置的主题
+  import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式javascript
+  import 'ace-builds/src-noconflict/snippets/xml'; // 设置xmL
+  import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
+  import { useAppStore } from '/@/store/modules/app';
+  import { CopyOutlined } from '@ant-design/icons-vue';
+  import { Button, Tag } from 'ant-design-vue';
+  import { OnlineEditorTypeEnum } from '../../../config/enum';
+
+  const emits = defineEmits(['changeAceContent']);
+
+  const props = defineProps({
+    restData: {
+      type: Object,
+    },
+    scriptType: {
+      type: String,
+      default: 'javascript',
+    },
+  });
+
+  const aceEditor = ref();
+
+  const aceRef = ref();
+
+  const userStore = useAppStore();
+
+  const getAceClass = computed((): string => userStore.getDarkMode);
+
+  const getRestData: any = ref(null);
+
+  watch(
+    () => props.restData,
+    (newVal) => {
+      getRestData.value = newVal;
+      onHandleFormatter();
+    },
+    { deep: true }
+  );
+
+  // 初始化编辑器
+  const initEditor = () => {
+    aceEditor.value = ace.edit(aceRef.value, {
+      maxLines: 50, // 最大行数，超过会自动出现滚动条
+      minLines: props.scriptType === OnlineEditorTypeEnum.JAVASCRIPT ? 36 : 14, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
+      fontSize: 14, // 编辑器内字体大小
+      theme: 'ace/theme/chrome', // 默认设置的主题
+      mode:
+        props.scriptType === OnlineEditorTypeEnum.JAVASCRIPT
+          ? 'ace/mode/javascript'
+          : 'ace/mode/xml', // 默认设置的语言模式
+      tabSize: 2, // 制表符设置为 4 个空格大小
+    });
+
+    aceEditor.value.setOptions({
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
+      enableSnippets: true,
+      enableEmmet: true,
+      theme: getAceClass.value === 'dark' ? 'ace/theme/terminal' : 'ace/theme/chrome',
+    });
+    doFilter();
+    beautify(aceEditor.value.session);
+  };
+
+  const doFilter = () => {
+    aceEditor.value.getSession().on('change', async () => {
+      try {
+        await nextTick();
+        const jsCode = aceEditor.value.getValue();
+        const res = getRestData.value ?? props.restData;
+        const fn = new Function('data', 'res', jsCode)(res?.data, res);
+        emits('changeAceContent', fn);
+      } catch (error) {
+        return `过滤函数错误，日志：${error}`;
+      }
+    });
+  };
+
+  const onHandleFormatter = () => {
+    let oldValue = aceEditor.value?.getValue() || '';
+    oldValue = oldValue.replaceAll(/;(\n+)?/g, ';\n');
+    aceEditor.value?.setValue(oldValue);
+    beautify(aceEditor.value.session);
+  };
+
+  const getValue = () => {
+    return aceEditor?.value?.getValue();
+  };
+
+  const setValue = (data) => {
+    return aceEditor?.value?.setValue(data);
+  };
+
+  onMounted(() => {
+    initEditor();
+  });
+
+  defineExpose({
+    getValue,
+    setValue,
+  });
+</script>
+
+<style lang="less" scoped>
+  .jsoneditor {
+    border: none;
+  }
+
+  .tag-text {
+    white-space: normal;
+    height: auto;
+  }
+
+  .tag-text-top {
+    width: 8vw;
+    &:extend(.tag-text);
+  }
+
+  .tag-text-bottom {
+    width: 1vw;
+    &:extend(.tag-text);
+  }
+</style>

@@ -8,30 +8,28 @@
     </a-radio-group>
     <div class="mt-3">
       <a-textarea
-        v-show="getRequestBody.content.requestParamsBodyType === 'none'"
+        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.NONE"
         disabled
         placeholder="该接口没有 Body 体"
-        :rows="2"
       />
       <BodyTable
         ref="bodyCellFormDataTableRef"
-        v-show="getRequestBody.content.requestParamsBodyType === 'form-data'"
+        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.FORMDATA"
       />
       <BodyTable
         ref="bodyCellXwwwTableRef"
-        v-show="getRequestBody.content.requestParamsBodyType === 'x-www-form-urlencoded'"
+        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.XWWW"
       />
       <JsonEditor
         :showBtn="false"
-        style="width: 35vw; height: 30vh"
-        v-show="getRequestBody.content.requestParamsBodyType === 'json'"
+        style="width: 35vw; height: 25vh"
+        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.JSON"
         ref="jsonEditorRef"
       />
-      <a-textarea
-        v-model:value="getRequestBody.content.xml"
-        v-show="getRequestBody.content.requestParamsBodyType === 'xml'"
-        placeholder="请输入xml"
-        :rows="6"
+      <AceTypeXmlEditor
+        ref="aceEditorRef"
+        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.XML"
+        :scriptType="OnlineEditorTypeEnum.XML"
       />
     </div>
   </div>
@@ -39,10 +37,12 @@
 <script lang="ts" setup name="body">
   import { reactive, ref, nextTick } from 'vue';
   import { RequestBodyTypeEnum } from '../../../config/enum';
-  import BodyTable from './bodyTable.vue';
+  import BodyTable from './paramsTable.vue';
   import { isEmpty } from '/@/utils/is';
   import { useUtils } from '../../../hooks/useUtils';
   import JsonEditor from './jsonEditor.vue';
+  import AceTypeXmlEditor from './aceEditor.vue';
+  import { OnlineEditorTypeEnum } from '../../../config/enum';
 
   const getRequestBody = reactive({
     content: {
@@ -62,6 +62,8 @@
 
   const jsonEditorRef = ref<InstanceType<typeof JsonEditor>>();
 
+  const aceEditorRef = ref<InstanceType<typeof AceTypeXmlEditor>>();
+
   const bodyCellXwwwTableRef = ref<InstanceType<typeof BodyTable>>();
 
   const handleChange = ({ target }) => {
@@ -76,9 +78,11 @@
     const valuesFormData = bodyCellFormDataTableRef.value?.getValue();
     const valuesXWww = bodyCellXwwwTableRef.value?.getValue();
     const jsonEditorValue = jsonEditorRef.value?.getJsonValue();
-    getRequestBody.content['form-data'] = valuesFormData as any;
-    getRequestBody.content['x-www-form-urlencoded'] = valuesXWww as any;
-    getRequestBody.content['json'] = jsonEditorValue as any;
+    const xmlEditorValue = aceEditorRef.value?.getValue();
+    getRequestBody.content[RequestBodyTypeEnum.FORMDATA] = valuesFormData as any;
+    getRequestBody.content[RequestBodyTypeEnum.XWWW] = valuesXWww as any;
+    getRequestBody.content[RequestBodyTypeEnum.JSON] = jsonEditorValue as any;
+    getRequestBody.content[RequestBodyTypeEnum.XML] = xmlEditorValue as any;
     if (type === 'none') getRequestBody.content = {} as any;
     return getRequestBody.content;
   };
@@ -90,18 +94,22 @@
     getRequestBody.content.requestParamsBodyType = type;
     await nextTick();
     await nextTick();
-    bodyCellFormDataTableRef.value?.setValue(isEmpty(data) ? [pushObj] : data['form-data']);
-    bodyCellXwwwTableRef.value?.setValue(isEmpty(data) ? [pushObj] : data['x-www-form-urlencoded']);
+    bodyCellFormDataTableRef.value?.setValue(
+      isEmpty(data) ? [pushObj] : data[RequestBodyTypeEnum.FORMDATA]
+    );
+    bodyCellXwwwTableRef.value?.setValue(
+      isEmpty(data) ? [pushObj] : data[RequestBodyTypeEnum.XWWW]
+    );
     jsonEditorRef.value?.setJsonValue(data['json'] || '{}');
-    getRequestBody.content.xml = data['xml'];
+    aceEditorRef.value?.setValue(data['xml'] || '');
   };
 
   //重置数据
   const resetValue = () => {
     for (let i in getRequestBody.content) Reflect.set(getRequestBody.content, i, '');
-    getRequestBody.content['form-data'] = {};
-    getRequestBody.content['x-www-form-urlencoded'] = {};
-    getRequestBody.content.requestParamsBodyType = 'none';
+    getRequestBody.content[RequestBodyTypeEnum.FORMDATA] = {};
+    getRequestBody.content[RequestBodyTypeEnum.XWWW] = {};
+    getRequestBody.content.requestParamsBodyType = RequestBodyTypeEnum.NONE;
     nextTick(() => {
       bodyCellFormDataTableRef?.value?.resetValue();
       bodyCellXwwwTableRef?.value?.resetValue();

@@ -42,43 +42,42 @@
   import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
   import { editTestCellTableTHeaderConfig } from '../../../config/config';
   import { tableItems } from '../../../config/types';
-  defineProps({
-    method: {
-      type: String,
-    },
-  });
+  import { useUtils } from '../../../hooks/useUtils';
+
+  const { CommonFuncValue } = useUtils();
 
   const tableArray = reactive<{
     content: tableItems[];
   }>({
     content: [
       {
-        key: 'ContentType',
-        value: 'none',
+        key: '',
+        value: '',
         required: false,
       },
     ],
   });
 
-  // 新增
   const add = (_, index: number) => {
     tableArray.content.splice(index + 1, 0, {
-      key: 'ContentType',
-      value: 'none',
+      key: '',
+      value: '',
       required: false,
     });
   };
 
-  // 减少
   const remove = (index: number) => {
-    if (tableArray.content.length !== 1) {
+    if (tableArray.content.length > 1) {
       tableArray.content.splice(index, 1);
+    } else {
+      resetValue();
     }
   };
 
   //获取数据
   const getValue = () => {
-    return tableArray.content;
+    const newFuncValue = new CommonFuncValue(tableArray.content as tableItems[]);
+    return newFuncValue.get();
   };
 
   //设置数据
@@ -104,35 +103,5 @@
 </script>
 
 <style scoped lang="less">
-  @table-color: #e5e7eb;
-
-  .table-border-color {
-    border: 1px solid #e5e7eb;
-    text-align: center;
-  }
-
-  .table-content {
-    overflow-x: auto;
-
-    table {
-      border-collapse: collapse;
-      width: 35vw;
-      &:extend(.table-border-color);
-    }
-
-    table thead {
-      white-space: nowrap;
-    }
-
-    table td {
-      padding: 5px;
-      white-space: nowrap;
-      &:extend(.table-border-color);
-    }
-
-    table th {
-      padding: 5px;
-      &:extend(.table-border-color);
-    }
-  }
+  @import '../common/commonTable.less';
 </style>

 <template>
   <div class="flex flex-col justify-between">
-    <div ref="jsoneditorRef" style="height: 100%; width: 100%"></div>
+    <div ref="jsoneditorRef" style="height: 100%"></div>
     <div class="ml-2 -mt-1.5">
       <Button v-if="showBtn" @click="onHandleCopy" class="mt-8 -ml-2">
         <template #icon>

@@ -22,12 +22,12 @@
               allowClear
             />
           </td>
-          <td style="width: 12vw">
+          <td>
             <div v-if="item.key === 'date_range'">
-              <div>
-                <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date1" />
+              <div class="flex">
+                <a-input placeholder="请输入" v-model:value="item.date1" />
                 <span>~</span>
-                <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" />
+                <a-input placeholder="请输入" v-model:value="item.date2" />
               </div>
               <div class="flex mt-2">
                 <a-checkbox @change="onHandleCheck" v-model:checked="mores">更多选项</a-checkbox>
@@ -42,15 +42,15 @@
               />
             </div>
           </td>
-          <td style="width: 4vw">
+          <td>
             <a-switch v-model:checked="item.required" />
           </td>
-          <td style="width: 4vw">
+          <td>
             <div>
               <Button type="dashed" @click="add(item, index)">
                 <template #icon><PlusOutlined /></template
               ></Button>
-              <Button type="dashed" style="margin-left: 5px" @click="remove(item, index)">
+              <Button type="dashed" class="ml-1" @click="remove(item, index)">
                 <template #icon> <MinusOutlined /></template>
               </Button>
             </div>
@@ -67,12 +67,9 @@
   import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
   import { editCellTableTHeadConfig } from '../../../config/config';
   import { selectType, tableItems } from '../../../config/types';
+  import { useUtils } from '../../../hooks/useUtils';
 
-  defineProps({
-    method: {
-      type: String,
-    },
-  });
+  const { ParamsFuncValue } = useUtils();
 
   const selectOptions = ref<selectType[]>([]);
 
@@ -110,7 +107,6 @@
     ],
   });
 
-  // 新增
   const add = (_, index: number) => {
     tableArray.content.splice(index + 1, 0, {
       key: undefined,
@@ -122,7 +118,6 @@
     });
   };
 
-  // 减少
   const remove = (item, index: number) => {
     if (tableArray.content.length > 1) {
       selectOptions.value.forEach((ele) => {
@@ -154,20 +149,21 @@
     });
   };
 
+  //fix 解决编辑回显下拉框已选择应禁用问题
   const hanldeDropdownVisibleChange = () => handleChange();
 
+  const commonHandleChange = (tableArray) => {
+    nextTick(() => {
+      tableArray.forEach(() => {
+        handleChange();
+      });
+    });
+  };
+
   //获取数据
   const getValue = () => {
-    let assemblyData: any = tableArray.content.map((it) => {
-      return {
-        key: it.key,
-        value: it.key === 'date_range' ? `${it.date1},${it.date2}` : it.value,
-        mores: it.key === 'date_range' ? mores.value : null,
-        editDisabled: it.editDisabled,
-        required: it.required,
-      };
-    });
-    return assemblyData;
+    const paramsFuncValue = new ParamsFuncValue(tableArray.content as any, mores.value);
+    return paramsFuncValue.get();
   };
 
   //设置数据
@@ -190,9 +186,7 @@
       assemblyData = assemblyData.filter((item) => item?.mores == false || !item?.mores);
     }
     tableArray.content = assemblyData;
-    tableArray.content.forEach(() => {
-      handleChange();
-    });
+    commonHandleChange(tableArray.content);
   };
 
   //重置数据
@@ -207,11 +201,7 @@
       date1: '',
       date2: '',
     });
-    nextTick(() => {
-      tableArray.content.forEach(() => {
-        handleChange();
-      });
-    });
+    commonHandleChange(tableArray.content);
   };
   defineExpose({
     getValue,
@@ -221,35 +211,5 @@
 </script>
 
 <style scoped lang="less">
-  @table-color: #e5e7eb;
-
-  .table-border-color {
-    border: 1px solid #e5e7eb;
-    text-align: center;
-  }
-
-  .table-content {
-    overflow-x: auto;
-
-    table {
-      border-collapse: collapse;
-      width: 35vw;
-      &:extend(.table-border-color);
-    }
-
-    table thead {
-      white-space: nowrap;
-    }
-
-    table td {
-      padding: 5px;
-      white-space: nowrap;
-      &:extend(.table-border-color);
-    }
-
-    table th {
-      padding: 5px;
-      &:extend(.table-border-color);
-    }
-  }
+  @import '../common/commonTable.less';
 </style>

 <template>
   <div>
-    <!--TODO: 待优化三者共存下的测试和是否能复用表格 -->
-    <Tabs @change="handleChange" v-model:activeKey="activeKey">
-      <TabPane class="tab-pane" forceRender key="Params" tab="Params">
-        <ParamsTable ref="paramsCellTableRef" :method="method" />
-        <ParamsTest
-          @testParamsInterface="handleTestParamsInterface"
-          @closeTest="onCloseTest"
-          ref="testParamsRequestRef"
-          :data="dataMap.mapParamsObj"
-          :interfaceType="interfaceType"
-        />
-      </TabPane>
-      <TabPane
-        v-if="
-          method !== RequestMethodTypeEnum.WEBSOCKET &&
-          requestTypeAndUrl?.requestHttpType !== RequestHttpTypeEnum.GET
-        "
-        class="tab-pane"
-        forceRender
-        key="Body"
-        tab="Body"
-      >
-        <Body ref="bodyRef" @resetValue="handleResetValue" />
-        <BodyTest
-          v-if="bodyType !== RequestBodyTypeEnum.NONE"
-          @testBodyInterface="handleTestBodyInterface"
-          @closeTest="onCloseTest"
-          ref="testBodyRequestRef"
-          :interfaceType="interfaceType"
-          :data="dataMap.mapBodyObj"
-        />
-      </TabPane>
-      <TabPane
-        v-if="method !== RequestMethodTypeEnum.WEBSOCKET"
-        class="tab-pane"
-        forceRender
-        key="Header"
-        tab="Header"
-      >
-        <HeaderTable ref="editHeaderCellTableRef" :method="method" />
-        <HeaderTest
-          @testHeaderInterface="handleTestHeaderInterface"
-          @closeTest="onCloseTest"
-          ref="testHeaderRequestRef"
-          :interfaceType="interfaceType"
-          :data="dataMap.mapHeaderObj"
-        />
-      </TabPane>
-    </Tabs>
-    <ExcuteTest ref="excuteTestRef" @emitExcute="handleEmitExcute" :data="excuteData" />
+    <div>
+      <Tabs @change="handleChange" v-model:activeKey="activeKey">
+        <TabPane class="tab-pane" forceRender key="Params" tab="Params">
+          <ParamsTable ref="paramsCellTableRef" />
+          <ParamsTest
+            @testParamsInterface="handleTestParamsInterface"
+            @closeTest="onCloseTest"
+            ref="testParamsRequestRef"
+            :data="dataMap.mapParamsObj"
+            :interfaceType="interfaceType"
+          />
+        </TabPane>
+        <TabPane
+          v-if="
+            method !== RequestMethodTypeEnum.WEBSOCKET &&
+            requestTypeAndUrl?.requestHttpType !== RequestHttpTypeEnum.GET
+          "
+          class="tab-pane"
+          forceRender
+          key="Body"
+          tab="Body"
+        >
+          <Body ref="bodyRef" @resetValue="handleResetValue" />
+          <BodyTest
+            v-if="bodyType !== RequestBodyTypeEnum.NONE"
+            @testBodyInterface="handleTestBodyInterface"
+            @closeTest="onCloseTest"
+            ref="testBodyRequestRef"
+            :interfaceType="interfaceType"
+            :data="dataMap.mapBodyObj"
+          />
+        </TabPane>
+        <TabPane
+          v-if="method !== RequestMethodTypeEnum.WEBSOCKET"
+          class="tab-pane"
+          forceRender
+          key="Header"
+          tab="Header"
+        >
+          <HeaderTable ref="editHeaderCellTableRef" />
+          <HeaderTest
+            @testHeaderInterface="handleTestHeaderInterface"
+            @closeTest="onCloseTest"
+            ref="testHeaderRequestRef"
+            :interfaceType="interfaceType"
+            :data="dataMap.mapHeaderObj"
+          />
+        </TabPane>
+      </Tabs>
+    </div>
+    <div>
+      <ExcuteTest
+        ref="excuteTestRef"
+        @emitExcute="handleEmitExcute"
+        :data="excuteData"
+        :method="method"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts" setup name="simpleRequest">
@@ -230,6 +238,11 @@
     };
   };
 
+  //获取编写过滤器里的数
+  const getFilterValue = () => {
+    return excuteTestRef?.value?.getFilterValue();
+  };
+
   //设置数据
   const setValue = (data, flag, defaultValue) => {
     if (!flag) {
@@ -262,6 +275,7 @@
     getValue,
     setValue,
     resetValue,
+    getFilterValue,
   });
 </script>
 

@@ -27,7 +27,6 @@
         </div>
         <Button
           :disabled="interfaceType === 'SYSTEM' && isAdmin(role) ? testDisabled : false"
-          class="ml-2"
           @click="handleTest(isSingleClickText)"
           type="primary"
           >{{ `${isSingleClickText === 'open' ? '打开' : '关闭'}测试接口` }}
@@ -37,26 +36,30 @@
         <a-row type="flex" justify="center">
           <a-col :span="3"> 参数设置 </a-col>
           <a-col :span="21">
-            <div v-if="data?.type === 'x-www-form-urlencoded' || data?.type === 'form-data'">
+            <div
+              v-if="
+                data?.type === RequestBodyTypeEnum.XWWW ||
+                data?.type === RequestBodyTypeEnum.FORMDATA
+              "
+            >
               <TestBodyCellTable :token="getToken" ref="testEditCellTableRef" />
             </div>
-            <div style="width: 30vw" v-else-if="data?.type === 'json'">
+            <div style="width: 30vw" v-else-if="data?.type === RequestBodyTypeEnum.JSON">
               <JsonEditor :showBtn="false" style="width: 35vw; height: 30vh" ref="jsonEditorRef" />
             </div>
-            <div style="width: 30vw" v-else-if="data?.type === 'xml'">
-              <a-textarea v-model:value="xmlContent" placeholder="请输入xml" :rows="6" />
+            <div style="width: 30vw" v-else-if="data?.type === RequestBodyTypeEnum.XML">
+              <AceTypeXmlEditor ref="aceEditorRef" :scriptType="OnlineEditorTypeEnum.XML" />
             </div>
           </a-col>
         </a-row>
       </div>
     </div>
-    <div class="mt-8"> </div>
   </div>
 </template>
 <script lang="ts" setup name="testRequest">
   import { ref, nextTick, onMounted } from 'vue';
   import { Button } from 'ant-design-vue';
-  import TestBodyCellTable from './testEditBodyCellTable.vue';
+  import TestBodyCellTable from '../paramsTest/testEditParamsCellTable.vue';
   import moment from 'moment';
   import { useUtils } from '../../../hooks/useUtils';
   import JsonEditor from '../../SimpleRequest/components/jsonEditor.vue';
@@ -68,6 +71,12 @@
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
   import { isAdmin } from '/@/enums/roleEnum';
+  import AceTypeXmlEditor from '../../SimpleRequest/components/aceEditor.vue';
+  import {
+    OnlineEditorTypeEnum,
+    RequestBodyTypeEnum,
+    TableDefaultTypeEnum,
+  } from '../../../config/enum';
 
   const userInfo: any = getAuthCache(USER_INFO_KEY);
 
@@ -111,12 +120,12 @@
 
   const selectSysTenant = ref(undefined);
 
-  const xmlContent = ref('');
-
   const testEditCellTableRef = ref<InstanceType<typeof TestBodyCellTable>>();
 
   const jsonEditorRef = ref<InstanceType<typeof JsonEditor>>();
 
+  const aceEditorRef = ref<InstanceType<typeof AceTypeXmlEditor>>();
+
   const testResult = ref('');
 
   const { getMultipleKeys } = useUtils();
@@ -175,8 +184,10 @@
   const getValue = async () => {
     await nextTick();
     await nextTick(() => {
-      console.log(props.data?.list);
-      if (props.data?.type === 'x-www-form-urlencoded' || props.data?.type === 'form-data') {
+      if (
+        props.data?.type === RequestBodyTypeEnum.XWWW ||
+        props.data?.type === RequestBodyTypeEnum.FORMDATA
+      ) {
         const getSingleKey = props.data?.list;
         const getMuteKey = props.data?.list?.filter((it: any) => it.key.split(',').length > 1);
         const getMuteKeys = getMultipleKeys(getMuteKey);
@@ -184,10 +195,10 @@
           (it: any) => it.key.split(',').length === 1
         );
         testEditCellTableRef.value?.setTableArray(mergeKeys);
-      } else if (props.data?.type === 'json') {
+      } else if (props.data?.type === RequestBodyTypeEnum.JSON) {
         jsonEditorRef.value?.setJsonValue(props.data?.list);
-      } else if (props.data?.type === 'xml') {
-        xmlContent.value = props.data?.list;
+      } else if (props.data?.type === RequestBodyTypeEnum.XML) {
+        aceEditorRef?.value?.setValue(props.data?.list);
       }
     });
   };
@@ -198,8 +209,9 @@
     //把日期拆分成多个
     const keyValueList: any = [];
     testEditCellTableRef.value?.getValue()?.forEach((item: any) => {
-      const splitDateKey = item?.key === 'date_range' ? item?.value?.split(',') : [];
-      const splitDateValue = item?.key === 'date_range' ? item?.dateValue : [];
+      const splitDateKey =
+        item?.key === TableDefaultTypeEnum.DATERANGE ? item?.value?.split(',') : [];
+      const splitDateValue = item?.key === TableDefaultTypeEnum.DATERANGE ? item?.dateValue : [];
       for (let i in splitDateKey) {
         const obj = {
           key: splitDateKey[i],
@@ -211,15 +223,10 @@
     return testEditCellTableRef.value
       ?.getValue()
       .concat(keyValueList)
-      .filter((it) => it.key !== 'date_range')
+      .filter((it) => it.key !== TableDefaultTypeEnum.DATERANGE)
       .map((it: any) => {
-        const value =
-          it?.key === 'scope'
-            ? it?.keyValue
-            : it?.key === 'fixed_date'
-            ? moment(it?.fixed_date_value).valueOf()
-            : it?.value;
-        const key = it?.key === 'scope' || it?.key === 'fixed_date' ? it?.value : it?.key;
+        const value = it?.key === TableDefaultTypeEnum.SCOPE ? it?.keyValue : it?.value;
+        const key = it?.key === TableDefaultTypeEnum.SCOPE ? it?.value : it?.key;
         return {
           key,
           value,
@@ -231,7 +238,10 @@
   //获取数据
   const getTestValue = () => {
     let params: any = {};
-    if (props.data?.type === 'x-www-form-urlencoded' || props.data?.type === 'form-data') {
+    if (
+      props.data?.type === RequestBodyTypeEnum.XWWW ||
+      props.data?.type === RequestBodyTypeEnum.FORMDATA
+    ) {
       const getTable = getTestTableKeyValue();
       const hasRequired = getTable?.some((it) => it.required === true && !it.value);
       if (hasRequired) {
@@ -239,10 +249,10 @@
         throw new Error('参数不能为空');
       }
       getTable?.map((it) => (params[it.key!] = it.value!));
-    } else if (props.data?.type === 'json') {
+    } else if (props.data?.type === RequestBodyTypeEnum.JSON) {
       params = jsonEditorRef.value?.getJsonValue();
-    } else if (props.data?.type === 'xml') {
-      params = xmlContent.value;
+    } else if (props.data?.type === RequestBodyTypeEnum.XML) {
+      params = aceEditorRef?.value?.getValue();
     }
     if (params['keys']) {
       Reflect.set(params, 'keys', params['keys'].join(','));
@@ -257,6 +267,7 @@
 
   //设置数据
   const setValue = () => {
+    isSingleClickText.value = 'open';
     showTestEditCell.value = false;
     testResult.value = '';
     selectTenant.value = undefined;

-<!-- eslint-disable vue/valid-v-model -->
-<template>
-  <div class="table-content">
-    <!-- TODO: 待优化测试表格 -->
-    <table align="center">
-      <thead>
-        <tr>
-          <th v-for="item in editTestCellTableTHeadConfig" :key="item">
-            <a-tooltip v-if="item === '参数值'">
-              <template #title>当自定义为entityType,应输入DEVICE</template>
-              <QuestionCircleOutlined :style="{ fontSize: '14px', marginLeft: '5px' }" />
-            </a-tooltip>
-            {{ item }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(item, index) in tableTestArray.content" :key="index">
-          <td style="width: 7.5vw">
-            <Select
-              :getPopupContainer="
-                (triggerNode) => {
-                  return triggerNode.parentNode;
-                }
-              "
-              :disabled="true"
-              v-model:value="item.key"
-              placeholder="请选择"
-              :options="selectOptions"
-            />
-          </td>
-          <td style="width: 6.5vw">
-            <a-input v-if="item.key === 'scope'" placeholder="请输入" v-model:value="item.value" />
-            <a-tree-select
-              :getPopupContainer="
-                (triggerNode) => {
-                  return triggerNode.parentNode;
-                }
-              "
-              v-else-if="item.key === 'organizationId'"
-              v-model:value="item.value"
-              show-search
-              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
-              placeholder="请选择组织"
-              allow-clear
-              tree-default-expand-all
-              :tree-data="treeData"
-              @change="handleOrgnationChange(item)"
-            />
-            <Select
-              :getPopupContainer="
-                (triggerNode) => {
-                  return triggerNode.parentNode;
-                }
-              "
-              v-else-if="item.key === 'entityId'"
-              v-model:value="item.value"
-              placeholder="请选择"
-              notFoundContent="请选择"
-              :options="entityOptions"
-              allowClear
-            />
-            <Select
-              :getPopupContainer="
-                (triggerNode) => {
-                  return triggerNode.parentNode;
-                }
-              "
-              v-else-if="item.key === 'keys'"
-              v-model:value="item.value"
-              placeholder="请选择"
-              notFoundContent="请选择"
-              :options="attributeOptions"
-              mode="multiple"
-              allowClear
-            />
-            <div v-else-if="item.key === 'date_range'">
-              <a-button disabled type="primary">{{ item.value?.split(',').at(-2) }}</a-button>
-              <span>~</span>
-              <a-button disabled type="primary">{{ item.value?.split(',').at(-1) }}</a-button>
-            </div>
-            <div v-else-if="item.key === 'fixed_date'">
-              <a-button disabled type="primary">{{ item.value }}</a-button>
-            </div>
-            <Select
-              :getPopupContainer="
-                (triggerNode) => {
-                  return triggerNode.parentNode;
-                }
-              "
-              v-else
-              v-model:value="item.value"
-              placeholder="请选择"
-              notFoundContent="请选择"
-              :options="valueOptions"
-              allowClear
-              @change="handleValueChange(item)"
-            />
-          </td>
-          <td style="width: 6.5vw">
-            <a-input
-              v-if="item.key === 'scope'"
-              placeholder="请输入"
-              v-model:value="item.keyValue"
-            />
-            <a-date-picker
-              v-else-if="item.key === 'fixed_date'"
-              style="width: 6.5vw"
-              v-model:value="item.keyValue"
-              :show-time="{ format: 'HH:mm' }"
-              format="YYYY-MM-DD HH:mm:ss"
-              placeholder="日期时间"
-            />
-            <a-range-picker
-              v-else-if="item.key == 'date_range'"
-              style="width: 6.5vw"
-              v-model:value="item.dateValue"
-              :show-time="{
-                format: 'HH:mm:ss',
-                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
-              }"
-              format="YYYY-MM-DD HH:mm:ss"
-              :placeholder="['开始', '结束']"
-            />
-            <a-input v-else disabled placeholder="请输入" v-model:value="item.keyValue" />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-<script lang="ts" setup name="editCellTable">
-  import { reactive, ref, onMounted } from 'vue';
-  import { Select } from 'ant-design-vue';
-  import { findDictItemByCode } from '/@/api/system/dict';
-  import { useApi } from '../../../hooks/useApi';
-  import { useUtils } from '../../../hooks/useUtils';
-  import { cloneDeep } from 'lodash-es';
-  import { tableItems, selectType } from '../../../config/types';
-  import { editTestCellTableTHeadConfig } from '../../../config/config';
-  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
-  import moment from 'moment';
-
-  const props = defineProps({
-    method: {
-      type: String,
-    },
-    token: {
-      type: String,
-    },
-  });
-
-  onMounted(async () => {
-    const res = await findDictItemByCode({ dictCode: 'dataview_builtin_params' });
-    selectOptions.value = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
-    selectOptions.value.push({
-      label: '自定义',
-      value: 'scope',
-    });
-    if (props.method === '2')
-      selectOptions.value = selectOptions.value.filter((f) => f.value !== 'scope');
-  });
-
-  const { isOtherHttp } = useUtils();
-
-  const selectOptions = ref<selectType[]>([]);
-
-  const valueOptions = ref<selectType[]>([]);
-
-  const entityOptions = ref<selectType[]>([]);
-
-  const attributeOptions = ref<selectType[]>([]);
-
-  const treeData = ref([]);
-
-  const tableTestArray = reactive<{
-    content: tableItems[];
-  }>({
-    content: [
-      {
-        key: undefined,
-        value: undefined,
-        keyValue: null,
-        editDisabled: false,
-        dateValue: null,
-      },
-    ],
-  });
-
-  //设置数据
-  const setTableArray = (data) => {
-    const list = cloneDeep(data);
-    list?.forEach((it) => {
-      if (it.key === 'keys') it.value = [];
-    });
-    if (Array.isArray(list)) (tableTestArray.content = list) && getApi(list);
-    if (list.hasOwnProperty('form-data') && Array.isArray(list['form-data']))
-      (tableTestArray.content = list['form-data']) && getApi(list['form-data']);
-    if (
-      list.hasOwnProperty('x-www-form-urlencoded') &&
-      Array.isArray(list['x-www-form-urlencoded'])
-    )
-      (tableTestArray.content = list['x-www-form-urlencoded']) &&
-        getApi(list['x-www-form-urlencoded']);
-  };
-
-  const getApi = (list) => {
-    list?.forEach(async (it) => {
-      if (it.key === 'deviceProfileId') {
-        const { options } = await useApi(it.key, props.token);
-        valueOptions.value = options;
-      } else if (it.key === 'organizationId') {
-        const { options } = await useApi(it.key, props.token);
-        treeData.value = options as any;
-      }
-    });
-  };
-
-  const handleOrgnationChange = async (e) => {
-    let deviceProfileId = '';
-    tableTestArray.content.forEach((f: any) => {
-      if (f.key === 'entityId') {
-        f.value = null;
-      }
-      if (f.key === 'deviceProfileId') deviceProfileId = f.value;
-    });
-    getEntityOptions(e.value, deviceProfileId);
-  };
-
-  const getEntityOptions = async (organizationId: string, deviceProfileId?: string) => {
-    const res = await isOtherHttp('api/yt/device/list', props.token, {
-      organizationId,
-      deviceProfileId,
-    });
-    entityOptions.value = res.map((item) => ({
-      label: item.alias || item.name,
-      value: item.tbDeviceId,
-    }));
-  };
-
-  const getAttributeOptions = async (params) => {
-    const { deviceProfileId, dataType } = params;
-    const res = await isOtherHttp(`api/yt/device/attributes/${deviceProfileId}`, props.token, {
-      dataType,
-    });
-    if (Object.keys(res).length === 0) return (attributeOptions.value.length = 0);
-    attributeOptions.value = res?.map((item) => ({ label: item.name, value: item.identifier }));
-  };
-
-  const handleValueChange = (e) => {
-    let organizationId = '';
-    if (e.key === 'deviceProfileId') {
-      tableTestArray.content.forEach((f: any) => {
-        if (f.key === 'keys') {
-          f.value = [];
-        }
-        if (f.key === 'organizationId') organizationId = f.value;
-        if (f.key === 'entityId') f.value = null;
-      });
-      if (e.value) {
-        getAttributeOptions({ deviceProfileId: e.value });
-      }
-      if (organizationId !== '') {
-        getEntityOptions(organizationId, e.value);
-      }
-    }
-  };
-
-  //获取数据
-  const getValue = () => {
-    return tableTestArray.content;
-  };
-  defineExpose({
-    getValue,
-    setTableArray,
-  });
-</script>
-
-<style scoped lang="less">
-  @table-color: #e5e7eb;
-
-  .table-border-color {
-    border: 1px solid #e5e7eb;
-    text-align: center;
-  }
-
-  .table-content {
-    table {
-      width: 31vw;
-      &:extend(.table-border-color);
-    }
-
-    table td {
-      padding: 5px;
-      white-space: nowrap;
-      &:extend(.table-border-color);
-    }
-
-    table th {
-      padding: 5px;
-      &:extend(.table-border-color);
-    }
-  }
-</style>

@@ -16,22 +16,32 @@
       </div>
     </div>
     <div class="mt-8">
-      <a-row type="flex" justify="space-between" align="middle">
-        <a-col :span="24">
-          <div>
-            <JsonEditor
-              :showBtn="true"
-              v-if="isWebSocketType === '2'"
-              style="width: 40vw; height: 40vh"
-              ref="jsonWebsocketEditorRef"
-            />
-            <JsonEditor
-              :showBtn="true"
-              v-else
-              style="width: 40vw; height: 40vh"
-              ref="jsonEditorRef"
-            />
-          </div>
+      <a-row type="flex" align="top">
+        <a-col :span="method === '2' ? 11 : 6">
+          <p>过滤器函数编写：</p>
+          <AceTypeIsJsEditor
+            style=""
+            :restData="getRestData"
+            @changeAceContent="onHandleAceContent"
+            ref="aceTypeIsJsEditorRef"
+          />
+        </a-col>
+        <a-col :span="1">
+          <a-divider type="vertical" class="divider-color" />
+        </a-col>
+        <a-col
+          :span="method === '2' ? 12 : 17"
+          style="position: relative"
+          :style="{ left: (method === '2' ? 1.5 : 0) + 'vw' }"
+        >
+          <a-col>
+            <p>接口返回数据(res)：</p>
+            <JsonEditor style="height: 35vh" :showBtn="true" ref="jsonEditorRef" />
+          </a-col>
+          <a-col class="mt-3">
+            <p>过滤器结果：</p>
+            <JsonFilterEditor style="height: 35vh" :showBtn="true" ref="jsonEditorFilterRef" />
+          </a-col>
         </a-col>
       </a-row>
     </div>
@@ -44,8 +54,11 @@
   import { useWebSocket } from '@vueuse/core';
   import { useUtils } from '../../../hooks/useUtils';
   import JsonEditor from '../../SimpleRequest/components/jsonEditor.vue';
+  import JsonFilterEditor from '../../SimpleRequest/components/jsonEditor.vue';
+  import AceTypeIsJsEditor from '../../SimpleRequest/components/aceEditor.vue';
   import { Tag } from 'ant-design-vue';
   import { useThrottleFn } from '@vueuse/shared';
+  import { RequestMethodTypeEnum } from '../../../config/enum';
 
   const emits = defineEmits(['emitExcute']);
 
@@ -53,13 +66,22 @@
     data: {
       type: Object,
     },
+    method: {
+      type: String,
+    },
   });
 
   const showTestFlag = ref(false);
 
+  const openFilterFlag = ref(false);
+
   const jsonEditorRef = ref<InstanceType<typeof JsonEditor>>();
 
-  const jsonWebsocketEditorRef = ref<InstanceType<typeof JsonEditor>>();
+  const jsonEditorFilterRef = ref<InstanceType<typeof JsonFilterEditor>>();
+
+  const aceTypeIsJsEditorRef = ref<InstanceType<typeof AceTypeIsJsEditor>>();
+
+  const getRestData: any = ref(null);
 
   const socketUrls = ref('');
 
@@ -70,6 +92,12 @@
     },
   });
 
+  const { staticWebSocketParams, commonRest } = useUtils();
+
+  const onHandleAceContent = (resp) => {
+    commonRest(resp, jsonEditorFilterRef.value?.setJsonValue);
+  };
+
   //格式化替换像"http:xxxx/api/xx/{xx}/{xx}/{xx}这种格式"
   String.prototype.restfulFormat = function (replacements) {
     var formatString = function (str, replacements) {
@@ -109,7 +137,7 @@
     isShowTestResult.value = true;
     nextTick(() => {
       jsonEditorRef.value?.setJsonValue('测试结果为');
-      jsonWebsocketEditorRef.value?.setJsonValue('测试结果为');
+      jsonEditorFilterRef.value?.setJsonValue('过滤结果为');
     });
   };
 
@@ -121,17 +149,17 @@
     await nextTick();
     //获取Params和Header和Body
     const Objects = props.data;
-    isWebSocketType.value = Objects?.method;
     const apiType = Objects?.apiType;
     const url = Objects?.apiGetUrl;
     const headers = Objects?.Header?.params;
     const params = Objects?.Params?.params;
-    isToken.value = Objects?.Params?.token;
     const body = Objects?.Body?.params;
+    isWebSocketType.value = Objects?.method;
+    isToken.value = Objects?.Params?.token;
     isPostToken.value = Objects?.Body?.token;
     postBodyType.value = Objects?.Body?.type;
     apiUrl.value = url?.restfulFormat(params);
-    if (isWebSocketType.value === '2') {
+    if (isWebSocketType.value === RequestMethodTypeEnum.WEBSOCKET) {
       socketUrls.value = url;
       socketMessage.server = `${socketUrls.value}?token=${isToken.value}`;
       const list = Object.values(params);
@@ -154,19 +182,10 @@
           postBodyType.value
         );
         if (!resp) return;
-        if (Object.prototype.toString.call(resp) === '[object Object]') {
-          jsonEditorRef.value?.setJsonValue(resp);
-        } else if (typeof resp === 'string') {
-          jsonEditorRef.value?.setJsonValue(resp);
-        } else if (Array.isArray(resp)) {
-          const temp = {
-            data: resp,
-          };
-          jsonEditorRef.value?.setJsonValue(temp);
-        } else {
-          jsonEditorRef.value?.setJsonValue(JSON.stringify(resp));
-        }
+        getRestData.value = resp;
+        commonRest(resp, jsonEditorRef.value?.setJsonValue);
       } catch (e) {
+        console.log(e);
         if (Object.prototype.toString.call(e) === '[object Object]') {
           jsonEditorRef.value?.setJsonValue(e);
         } else {
@@ -176,50 +195,45 @@
     }
   };
 
-  //websocket请求
+  //ws请求
   const websocketRequest = (params, destroy = false) => {
-    //websocket请求
-    if (Object.prototype.toString.call(params) === '[object Object]') {
-      Reflect.deleteProperty(params, 'deviceProfileId');
-      Reflect.deleteProperty(params, 'organizationId');
-      Reflect.set(params, 'cmdId', 1);
-      Reflect.set(params, 'scope', 'LATEST_TELEMETRY');
-      Reflect.set(params, 'entityType', 'DEVICE');
+    try {
+      let webSocketParams: any = null;
+      if (Object.prototype.toString.call(params) === '[object Object]') {
+        const { entityId, keys } = params;
+        webSocketParams = {
+          entityId,
+          keys,
+          ...staticWebSocketParams,
+        };
+      }
+      socketMessage.sendValue.tsSubCmds = [webSocketParams];
+      const { send, close } = useWebSocket(socketMessage.server, {
+        onConnected() {
+          send(JSON.stringify(socketMessage.sendValue));
+        },
+        onMessage(_, e) {
+          const { data } = JSON.parse(e.data);
+          getRestData.value = data;
+          commonRest(data, jsonEditorRef.value?.setJsonValue);
+        },
+        onDisconnected() {
+          close();
+        },
+        onError() {},
+      });
+      if (destroy) close();
+    } finally {
     }
-    socketMessage.sendValue.tsSubCmds = [params];
-    const { send, close } = useWebSocket(socketMessage.server, {
-      onConnected() {
-        send(JSON.stringify(socketMessage.sendValue));
-        console.log('建立连接了');
-      },
-      onMessage(_, e) {
-        const { data } = JSON.parse(e.data);
-        if (Object.prototype.toString.call(data) === '[object Object]') {
-          jsonWebsocketEditorRef.value?.setJsonValue(data);
-        } else if (typeof data === 'string') {
-          jsonWebsocketEditorRef.value?.setJsonValue(data);
-        } else if (Array.isArray(data)) {
-          jsonWebsocketEditorRef.value?.setJsonValue(JSON.stringify(data));
-        } else {
-          jsonEditorRef.value?.setJsonValue(JSON.stringify(data));
-        }
-      },
-      onDisconnected() {
-        console.log('断开连接了');
-        close();
-      },
-      onError() {},
-    });
-    if (destroy) close();
   };
 
   onUnmounted(() => {
-    if (isWebSocketType.value === '2') {
+    if (isWebSocketType.value === RequestMethodTypeEnum.WEBSOCKET) {
       websocketRequest(null, true);
     }
   });
 
-  //TODO: 待优化 项目自带第三方请求
+  //http请求
   const otherHttpRequest = async (
     apiType,
     apiUrl,
@@ -228,69 +242,27 @@
     body,
     token,
     postToken,
-    postBodyType,
-    joinPrefix = false
+    postBodyType
   ) => {
-    const { convertObj } = useUtils();
+    const { convertObj, commonHttpParams, commonParams } = useUtils();
     switch (apiType) {
       case 'GET':
-        const objGet = Object.assign(
-          {},
-          {
-            'X-Authorization': `Bearer ${!token ? postToken : token}`,
-          },
-          headers
-        );
         return await otherHttp.get(
-          { url: apiUrl, params, headers: objGet },
           {
-            apiUrl: '',
-            joinPrefix,
-            withToken: false,
-            errorMessageMode: 'none',
-          }
-        );
-      case 'POST':
-        const objPost = Object.assign(
-          {},
-          {
-            'X-Authorization': `Bearer ${!postToken ? token : postToken}`,
+            url: apiUrl,
+            params,
+            headers: commonHttpParams(postToken, token, postBodyType, headers),
           },
-          {
-            'Content-Type':
-              postBodyType === 'xml'
-                ? 'text/xml'
-                : postBodyType === 'form-data'
-                ? 'multipart/form-data'
-                : postBodyType === 'x-www-form-urlencoded'
-                ? 'application/x-www-form-urlencoded'
-                : postBodyType === 'json'
-                ? 'application/json'
-                : 'application/json',
-          },
-          headers
+          commonParams
         );
+      case 'POST':
         return await otherHttp.post(
-          { url: `${apiUrl}?${convertObj(params)}`, data: body, headers: objPost },
           {
-            apiUrl: '',
-            joinPrefix,
-            withToken: false,
-            errorMessageMode: 'none',
-          }
-        );
-      case 'PUT':
-        const objPut = Object.assign({}, headers, {
-          'X-Authorization': `Bearer ${!postToken ? token : postToken}`,
-        });
-        return await otherHttp.put(
-          { url: `${apiUrl}?${convertObj(params)}`, data: body, headers: objPut, params },
-          {
-            apiUrl: '',
-            joinPrefix,
-            withToken: false,
-            errorMessageMode: 'none',
-          }
+            url: `${apiUrl}${`?${convertObj(params)}`}`,
+            data: body,
+            headers: commonHttpParams(postToken, token, postBodyType, headers),
+          },
+          commonParams
         );
     }
   };
@@ -298,19 +270,25 @@
   const resetValue = (flag) => {
     if (flag) {
       showTestFlag.value = false;
+      openFilterFlag.value = false;
     }
     nextTick(() => {
       jsonEditorRef.value?.setJsonValue('测试结果为');
-      jsonWebsocketEditorRef.value?.setJsonValue('测试结果为');
+      jsonEditorFilterRef.value?.setJsonValue('过滤结果为');
     });
-    isWebSocketType.value = '0';
+    isWebSocketType.value = RequestMethodTypeEnum.COMMOM;
   };
 
   const showTest = () => (showTestFlag.value = true);
 
+  const getFilterValue = () => {
+    return aceTypeIsJsEditorRef?.value?.getValue();
+  };
+
   defineExpose({
     resetValue,
     showTest,
+    getFilterValue,
   });
 </script>
 
@@ -318,4 +296,11 @@
   :deep(.ant-input-textarea-show-count) {
     width: 30vw;
   }
+
+  .divider-color {
+    height: 78.5vh;
+    background-color: #e5e7eb;
+    position: relative;
+    left: 1.16vw;
+  }
 </style>

@@ -27,7 +27,6 @@
         </div>
         <Button
           :disabled="interfaceType === 'SYSTEM' && isAdmin(role) ? testDisabled : false"
-          class="ml-2"
           @click="handleTest(isSingleClickText)"
           type="primary"
           >{{ `${isSingleClickText === 'open' ? '打开' : '关闭'}测试接口` }}
@@ -42,7 +41,6 @@
         </a-row>
       </div>
     </div>
-    <div class="mt-8"> </div>
   </div>
 </template>
 <script lang="ts" setup name="testRequest">

-<!-- eslint-disable vue/valid-v-model -->
 <template>
   <div class="table-content">
-    <!-- TODO: 待优化测试表格 -->
     <table align="center">
       <thead>
         <tr>
@@ -10,10 +8,10 @@
       </thead>
       <tbody>
         <tr v-for="(item, index) in tableTestArray.content" :key="index">
-          <td style="width: 7.5vw">
-            <a-input disabled placeholder="请输入" v-model:value="item.key" />
+          <td>
+            <a-input disabled v-model:value="item.key" />
           </td>
-          <td style="width: 6.5vw">
+          <td>
             <a-input placeholder="请输入" v-model:value="item.value" />
           </td>
         </tr>
@@ -27,12 +25,6 @@
   import { tableItems } from '../../../config/types';
   import { editTestCellTableTHeadConfig } from '../../../config/config';
 
-  defineProps({
-    method: {
-      type: String,
-    },
-  });
-
   const tableTestArray = reactive<{
     content: tableItems[];
   }>({
@@ -57,6 +49,7 @@
   const getValue = () => {
     return tableTestArray.content;
   };
+
   defineExpose({
     getValue,
     setTableArray,
@@ -64,28 +57,5 @@
 </script>
 
 <style scoped lang="less">
-  @table-color: #e5e7eb;
-
-  .table-border-color {
-    border: 1px solid #e5e7eb;
-    text-align: center;
-  }
-
-  .table-content {
-    table {
-      width: 31vw;
-      &:extend(.table-border-color);
-    }
-
-    table td {
-      padding: 5px;
-      white-space: nowrap;
-      &:extend(.table-border-color);
-    }
-
-    table th {
-      padding: 5px;
-      &:extend(.table-border-color);
-    }
-  }
+  @import '../../SimpleRequest/common/commonTestTable.less';
 </style>

@@ -27,7 +27,6 @@
         </div>
         <Button
           :disabled="interfaceType === 'SYSTEM' && isAdmin(role) ? testDisabled : false"
-          class="ml-2"
           @click="handleTest(isSingleClickText)"
           type="primary"
           >{{ `${isSingleClickText === 'open' ? '打开' : '关闭'}测试接口` }}
@@ -42,7 +41,6 @@
         </a-row>
       </div>
     </div>
-    <div class="mt-8"> </div>
   </div>
 </template>
 <script lang="ts" setup name="testRequest">
@@ -59,6 +57,8 @@
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
   import { isAdmin } from '/@/enums/roleEnum';
+  import { TableDefaultTypeEnum } from '../../../config/enum';
+  import { AggregateDataEnum } from '/@/views/report/config/timeConfig';
 
   const userInfo: any = getAuthCache(USER_INFO_KEY);
 
@@ -159,7 +159,7 @@
       const getSingleKey = props.data?.list;
       let getMuteDateRangeKeys: any = null;
       const findDateRange = getSingleKey.find(
-        (item) => item?.key == 'date_range' && item?.mores === true
+        (item) => item?.key == TableDefaultTypeEnum.DATERANGE && item?.mores === true
       );
       if (findDateRange) {
         getMuteDateRangeKeys = getMultipleKeys([{ key: 'agg', value: '' }]);
@@ -176,14 +176,13 @@
   };
 
   //测试表格里的数据转化为 key value 数组对象形式
-  //TODO:待优化这里的TS类型
   const getTestTableKeyValue = () => {
     //把日期拆分成多个
     const keyValueList: any = [];
-    console.log(testEditCellTableRef.value?.getValue());
     testEditCellTableRef.value?.getValue()?.forEach((item: any) => {
-      const splitDateKey = item?.key === 'date_range' ? item?.value?.split(',') : [];
-      const splitDateValue = item?.key === 'date_range' ? item?.dateValue : [];
+      const splitDateKey =
+        item?.key === TableDefaultTypeEnum.DATERANGE ? item?.value?.split(',') : [];
+      const splitDateValue = item?.key === TableDefaultTypeEnum.DATERANGE ? item?.dateValue : [];
       for (let i in splitDateKey) {
         const obj = {
           key: splitDateKey[i],
@@ -195,17 +194,11 @@
     return testEditCellTableRef.value
       ?.getValue()
       .concat(keyValueList)
-      .filter((it) => it.key !== 'date_range')
+      .filter((it) => it.key !== TableDefaultTypeEnum.DATERANGE)
       .map((it: any) => {
-        const value =
-          it?.key === 'scope'
-            ? it?.keyValue
-            : it?.key === 'fixed_date'
-            ? moment(it?.fixed_date_value).valueOf()
-            : it?.value;
-        const key = it?.key === 'scope' || it?.key === 'fixed_date' ? it?.value : it?.key;
+        const value = it?.key === TableDefaultTypeEnum.SCOPE ? it?.keyValue : it?.value;
+        const key = it?.key === TableDefaultTypeEnum.SCOPE ? it?.value : it?.key;
         const limit = it?.limit;
-        console.log(limit);
         return {
           key,
           value,
@@ -225,16 +218,15 @@
     }
     const params: any = {};
     getTable?.map((it) => {
-      console.log(it);
       params[it.key!] = it.value!;
-      if (it.key === 'agg') {
+      if (it.key === TableDefaultTypeEnum.AGG) {
         params.limit = it.limit;
       }
     });
     if (params['keys']) {
       Reflect.set(params, 'keys', params['keys'].join(','));
     }
-    if (params['agg'] !== 'NONE') {
+    if (params['agg'] !== AggregateDataEnum.NONE) {
       Reflect.set(params, 'limit', null);
     }
     excuteData.value = {
@@ -246,6 +238,7 @@
 
   //设置数据
   const setValue = () => {
+    isSingleClickText.value = 'open';
     showTestEditCell.value = false;
     testResult.value = '';
     selectTenant.value = undefined;

-<!-- eslint-disable vue/valid-v-model -->
 <template>
-  <!-- {{ tableTestArray.content }} -->
   <div class="table-content">
-    <!-- TODO: 待优化测试表格 -->
     <table align="center">
       <thead>
         <tr>
@@ -17,30 +14,18 @@
       </thead>
       <tbody>
         <tr v-for="(item, index) in tableTestArray.content" :key="index">
-          <td style="width: 7.5vw">
-            <Select
-              :getPopupContainer="
-                (triggerNode) => {
-                  return triggerNode.parentNode;
-                }
-              "
-              :disabled="true"
-              v-model:value="item.key"
-              placeholder="请选择"
-              :options="selectOptions"
-            />
+          <td>
+            <Select :disabled="true" v-model:value="item.key" :options="selectOptions" />
           </td>
-          <td style="width: 6.5vw">
-            <a-input v-if="item.key === 'scope'" placeholder="请输入" v-model:value="item.value" />
+          <td style="width: 10.5vw">
+            <a-input
+              v-if="item.key === TableDefaultTypeEnum.SCOPE"
+              placeholder="请输入"
+              v-model:value="item.value"
+            />
             <a-tree-select
-              :getPopupContainer="
-                (triggerNode) => {
-                  return triggerNode.parentNode;
-                }
-              "
-              v-else-if="item.key === 'organizationId'"
+              v-else-if="item.key === TableDefaultTypeEnum.ORGANIZATIONID"
               v-model:value="item.value"
-              show-search
               :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
               placeholder="请选择组织"
               allow-clear
@@ -54,10 +39,9 @@
                   return triggerNode.parentNode;
                 }
               "
-              v-else-if="item.key === 'entityId'"
+              v-else-if="item.key === TableDefaultTypeEnum.ENTITYID"
               v-model:value="item.value"
               placeholder="请选择"
-              notFoundContent="请选择"
               :options="entityOptions"
               allowClear
             />
@@ -67,24 +51,21 @@
                   return triggerNode.parentNode;
                 }
               "
-              v-else-if="item.key === 'keys'"
+              v-else-if="item.key === TableDefaultTypeEnum.KEYS"
               v-model:value="item.value"
               placeholder="请选择"
-              notFoundContent="请选择"
               :options="attributeOptions"
               mode="multiple"
               allowClear
             />
-            <!-- <div v-else-if="item.value === 'NONE'">
-              <a-input-number id="inputNumber" v-model:value="item.value" :min="7" :max="5000000" />
-            </div> -->
-            <div v-else-if="item.key === 'date_range'">
-              <a-button disabled type="primary">{{ item.value?.split(',').at(-2) }}</a-button>
+            <div v-else-if="item.key === TableDefaultTypeEnum.DATERANGE">
+              <a-button disabled type="primary">{{
+                (item.value as any)?.split(',').at(-2)
+              }}</a-button>
               <span>~</span>
-              <a-button disabled type="primary">{{ item.value?.split(',').at(-1) }}</a-button>
-            </div>
-            <div v-else-if="item.key === 'fixed_date'">
-              <a-button disabled type="primary">{{ item.value }}</a-button>
+              <a-button disabled type="primary">{{
+                (item.value as any)?.split(',').at(-1)
+              }}</a-button>
             </div>
             <Select
               :getPopupContainer="
@@ -92,11 +73,10 @@
                   return triggerNode.parentNode;
                 }
               "
-              v-else-if="item.key === 'agg'"
+              v-else-if="item.key === TableDefaultTypeEnum.AGG"
               v-model:value="item.value"
               @change="onHandleAgg"
               placeholder="请选择"
-              notFoundContent="请选择"
               :options="aggOptions"
               allowClear
             />
@@ -106,10 +86,11 @@
                   return triggerNode.parentNode;
                 }
               "
-              v-else-if="item.key === 'interval' && item.value !== 'NONE'"
+              v-else-if="
+                item.key === TableDefaultTypeEnum.INTERVAL && item.value !== AggregateDataEnum.NONE
+              "
               v-model:value="item.value"
               placeholder="请选择"
-              notFoundContent="请选择"
               :options="intervalOptions"
               allowClear
             />
@@ -122,28 +103,19 @@
               v-else
               v-model:value="item.value"
               placeholder="请选择"
-              notFoundContent="请选择"
               :options="valueOptions"
               allowClear
               @change="handleValueChange(item)"
             />
           </td>
-          <td style="width: 6.5vw">
+          <td>
             <a-input
-              v-if="item.key === 'scope'"
+              v-if="item.key === TableDefaultTypeEnum.SCOPE"
               placeholder="请输入"
               v-model:value="item.keyValue"
             />
-            <a-date-picker
-              v-else-if="item.key === 'fixed_date'"
-              style="width: 6.5vw"
-              v-model:value="item.fixed_date_value"
-              :show-time="{ format: 'HH:mm' }"
-              format="YYYY-MM-DD HH:mm:ss"
-              placeholder="日期时间"
-            />
             <a-range-picker
-              v-else-if="item.key == 'date_range'"
+              v-else-if="item.key == TableDefaultTypeEnum.DATERANGE"
               style="width: 10vw"
               v-model:value="item.dateValue"
               :disabled-date="disabledDate"
@@ -154,11 +126,11 @@
               @calendarChange="calendarPriceRangeChange"
               @change="changePriceRangeDate"
               format="YYYY-MM-DD HH:mm:ss"
-              :placeholder="['开始', '结束']"
+              :placeholder="['开始日期', '结束日期']"
               clearable
             />
             <a-input-number
-              v-else-if="item.value == 'NONE'"
+              v-else-if="item.value == AggregateDataEnum.NONE"
               v-model:value="item.limit"
               :min="7"
               :max="50000"
@@ -168,7 +140,6 @@
         </tr>
       </tbody>
     </table>
-    <!-- {{ tableTestArray.content }} -->
   </div>
 </template>
 <script lang="ts" setup name="editCellTable">
@@ -185,6 +156,7 @@
   import { AggregateDataEnum } from '/@/views/report/config/timeConfig';
   import { getPacketIntervalByRange } from '/@/views/device/localtion/cpns/TimePeriodForm/helper';
   import { uniqBy } from 'lodash';
+  import { TableDefaultTypeEnum } from '../../../config/enum';
 
   const props = defineProps({
     method: {
@@ -211,7 +183,9 @@
       value: 'scope',
     });
     if (props.method === '2')
-      selectOptions.value = selectOptions.value.filter((f) => f.value !== 'scope');
+      selectOptions.value = selectOptions.value.filter(
+        (f) => f.value !== TableDefaultTypeEnum.SCOPE
+      );
   });
 
   const { isOtherHttp } = useUtils();
@@ -246,8 +220,15 @@
   });
 
   const onHandleAgg = (e) => {
-    if (e === 'NONE') {
-      tableTestArray.content = tableTestArray.content.filter((item) => item.key !== 'interval');
+    if (e === AggregateDataEnum.NONE) {
+      tableTestArray.content = tableTestArray.content.filter(
+        (item) => item.key !== TableDefaultTypeEnum.INTERVAL
+      );
+      tableTestArray.content.forEach((it) => {
+        if (it.key === TableDefaultTypeEnum.AGG && it.value === AggregateDataEnum.NONE) {
+          it.limit = 7;
+        }
+      });
     } else {
       tableTestArray.content.push({
         key: 'interval',
@@ -259,8 +240,6 @@
 
   const selectPriceDate = ref('');
 
-  const offsetDays = 86400000 * 365;
-
   const calendarPriceRangeChange = (date) => {
     selectPriceDate.value = date[0];
     intervalOptions.value = getPacketIntervalByRange(date) as any;
@@ -270,6 +249,8 @@
     selectPriceDate.value = '';
   };
 
+  //时间跨度小于一年
+  const offsetDays = 86400000 * 365;
   const disabledDate = (current) => {
     if (selectPriceDate.value) {
       let selectV = moment(selectPriceDate.value, 'YYYY-MM-DD').valueOf();
@@ -286,34 +267,38 @@
   const setTableArray = (data) => {
     const list = cloneDeep(data);
     list?.forEach((it) => {
-      if (it.key === 'keys') it.value = [];
+      if (it?.value === TableDefaultTypeEnum.ENTITYTYPE) it.keyValue = TableDefaultTypeEnum.DEVICE;
+      if (it.key === TableDefaultTypeEnum.KEYS) it.value = [];
     });
     if (Array.isArray(list)) (tableTestArray.content = list) && getApi(list);
   };
 
+  //获取组织和产品
   const getApi = (list) => {
     list?.forEach(async (it) => {
-      if (it.key === 'deviceProfileId') {
+      if (it.key === TableDefaultTypeEnum.DEVICEPROFILEID) {
         const { options } = await useApi(it.key, props.token);
         valueOptions.value = options;
-      } else if (it.key === 'organizationId') {
+      } else if (it.key === TableDefaultTypeEnum.ORGANIZATIONID) {
         const { options } = await useApi(it.key, props.token);
         treeData.value = options as any;
       }
     });
   };
 
+  //组织Select改变
   const handleOrgnationChange = async (e) => {
     let deviceProfileId = '';
     tableTestArray.content.forEach((f: any) => {
-      if (f.key === 'entityId') {
+      if (f.key === TableDefaultTypeEnum.ENTITYID) {
         f.value = null;
       }
-      if (f.key === 'deviceProfileId') deviceProfileId = f.value;
+      if (f.key === TableDefaultTypeEnum.DEVICEPROFILEID) deviceProfileId = f.value;
     });
     getEntityOptions(e.value, deviceProfileId);
   };
 
+  //设备Select改变
   const getEntityOptions = async (organizationId: string, deviceProfileId?: string) => {
     const res = await isOtherHttp('api/yt/device/list', props.token, {
       organizationId,
@@ -325,6 +310,7 @@
     }));
   };
 
+  //属性Select改变
   const getAttributeOptions = async (params) => {
     const { deviceProfileId, dataType } = params;
     const res = await isOtherHttp(`api/yt/device/attributes/${deviceProfileId}`, props.token, {
@@ -334,15 +320,16 @@
     attributeOptions.value = res?.map((item) => ({ label: item.name, value: item.identifier }));
   };
 
+  //产品Select改变
   const handleValueChange = (e) => {
     let organizationId = '';
-    if (e.key === 'deviceProfileId') {
+    if (e.key === TableDefaultTypeEnum.DEVICEPROFILEID) {
       tableTestArray.content.forEach((f: any) => {
-        if (f.key === 'keys') {
+        if (f.key === TableDefaultTypeEnum.KEYS) {
           f.value = [];
         }
-        if (f.key === 'organizationId') organizationId = f.value;
-        if (f.key === 'entityId') f.value = null;
+        if (f.key === TableDefaultTypeEnum.ORGANIZATIONID) organizationId = f.value;
+        if (f.key === TableDefaultTypeEnum.ENTITYID) f.value = null;
       });
       if (e.value) {
         getAttributeOptions({ deviceProfileId: e.value });
@@ -357,6 +344,7 @@
   const getValue = () => {
     return tableTestArray.content;
   };
+
   defineExpose({
     getValue,
     setTableArray,
@@ -364,28 +352,5 @@
 </script>
 
 <style scoped lang="less">
-  @table-color: #e5e7eb;
-
-  .table-border-color {
-    border: 1px solid #e5e7eb;
-    text-align: center;
-  }
-
-  .table-content {
-    table {
-      width: 31vw;
-      &:extend(.table-border-color);
-    }
-
-    table td {
-      padding: 5px;
-      white-space: nowrap;
-      &:extend(.table-border-color);
-    }
-
-    table th {
-      padding: 5px;
-      &:extend(.table-border-color);
-    }
-  }
+  @import '../../SimpleRequest/common/commonTestTable.less';
 </style>

-import TestSql from './index.vue';
-
-export { TestSql };

-<template>
-  <div class="mt-8">
-    <div>
-      <Button @click="handleExcute" type="primary"> 测试SQL </Button>
-    </div>
-  </div>
-  <div v-if="testResultStatus" class="mt-8">
-    <div class="mt-8">
-      <a-row type="flex" justify="center">
-        <a-col :span="3"> 测试结果 </a-col>
-        <a-col :span="21">
-          <a-textarea
-            allow-clear
-            show-count
-            v-model:value="testResult"
-            placeholder="测试结果为："
-            :rows="8"
-          />
-        </a-col>
-      </a-row>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup name="testRequest">
-  import { ref } from 'vue';
-  import { Button } from 'ant-design-vue';
-
-  defineProps({
-    method: {
-      type: String,
-    },
-  });
-
-  const testResult = ref('');
-
-  const testResultStatus = ref(false);
-
-  const handleExcute = async () => {
-    testResultStatus.value = true;
-    testResult.value = '测试结果为：1234';
-  };
-
-  const resetValue = () => (testResult.value = '');
-
-  defineExpose({
-    resetValue,
-  });
-</script>
-
-<style scoped lang="less"></style>

@@ -288,14 +288,6 @@ export const schemas: FormSchema[] = [
     colProps: { span: 24 },
     ifShow: ({ values }) => values['requestContentType'] !== '1',
   },
-  {
-    field: 'testSlot',
-    label: '',
-    component: 'Input',
-    slot: 'testSql',
-    colProps: { span: 24 },
-    ifShow: ({ values }) => values['requestContentType'] === '1',
-  },
 ];
 
 //表格表头配置

@@ -35,3 +35,27 @@ export enum RequestHttpTypeEnum {
   GET = 'GET',
   POST = 'POST',
 }
+
+/**
+ * @description: 在线编辑器枚举
+ */
+export enum OnlineEditorTypeEnum {
+  JAVASCRIPT = 'javascript',
+  XML = 'xml',
+}
+
+/**
+ * @description:表格内置默认属性枚举
+ */
+export enum TableDefaultTypeEnum {
+  ORGANIZATIONID = 'organizationId',
+  SCOPE = 'scope',
+  ENTITYID = 'entityId',
+  KEYS = 'keys',
+  DATERANGE = 'date_range',
+  AGG = 'agg',
+  INTERVAL = 'interval',
+  DEVICEPROFILEID = 'deviceProfileId',
+  ENTITYTYPE = 'entityType',
+  DEVICE = 'DEVICE',
+}

 import { commonHttpPlaceHolder, websocketPlaceHolder } from '../config/constants';
 import { RequestMethodTypeEnum } from '../config/enum';
 import { otherHttp } from '/@/utils/http/axios';
+import { tableItems } from '../config/types';
 
 export const useUtils = () => {
   //获取多个key
@@ -46,15 +47,19 @@ export const useUtils = () => {
   //对象转get params参数
   const convertObj = (data: object) => {
     const _result: any = [];
-    for (const key in data) {
-      const value = data[key];
-      if (value.constructor == Array) {
-        value.forEach(function (_value) {
-          _result.push(key + '=' + _value);
-        });
-      } else {
-        _result.push(key + '=' + value);
+    try {
+      for (const key in data) {
+        const value = data[key];
+        if (value.constructor == Array) {
+          value.forEach(function (_value) {
+            _result.push(key + '=' + _value);
+          });
+        } else {
+          _result.push(key + '=' + value);
+        }
       }
+    } catch (e) {
+      console.log(`Post没有传递params${e}`);
     }
     return _result.join('&');
   };
@@ -104,6 +109,128 @@ export const useUtils = () => {
         : ''
     }`;
 
+  //动态获取post请求ContentType类型
+  const contentTypeStatic = [
+    {
+      key: 'xml',
+      value: 'text/xml',
+    },
+    {
+      key: 'form-data',
+      value: 'multipart/form-data',
+    },
+    {
+      key: 'x-www-form-urlencoded',
+      value: 'application/x-www-form-urlencoded',
+    },
+    {
+      key: 'json',
+      value: 'application/json',
+    },
+  ];
+
+  const getContentType = (contentType) => {
+    const findValue = contentTypeStatic.find((it) => it.key === contentType)?.value;
+    if (findValue) return findValue;
+    return contentTypeStatic.at(-1)?.value;
+  };
+
+  const commonHttpParams = (postToken, token, postBodyType, headers) => {
+    const mergeHeaders = Object.assign(
+      {},
+      {
+        'X-Authorization': `Bearer ${!postToken ? token : postToken}`,
+      },
+      !postBodyType
+        ? null
+        : {
+            'Content-Type': getContentType(postBodyType),
+          },
+      headers
+    );
+    return mergeHeaders;
+  };
+
+  //websocket请求静态参数
+  const staticWebSocketParams = {
+    cmdId: 1,
+    scope: 'LATEST_TELEMETRY',
+    entityType: 'DEVICE',
+  };
+
+  const commonRest = (data, fn) => {
+    if (Object.prototype.toString.call(data) === '[object Object]') {
+      fn(data);
+    } else if (typeof data === 'string') {
+      fn(data);
+    } else if (Array.isArray(data)) {
+      const temp = {
+        data,
+      };
+      fn(temp);
+    } else {
+      fn(JSON.stringify(data));
+    }
+  };
+
+  const commonParams = {
+    apiUrl: '',
+    joinPrefix: false,
+    withToken: false,
+    errorMessageMode: 'none',
+  } as any;
+
+  //表格基类
+  class CommonFuncValue {
+    constructor(public data: tableItems[]) {
+      this.data = data;
+    }
+    get(): tableItems[] {
+      return this.data;
+    }
+    set(outderData: tableItems[]) {
+      this.data = outderData;
+    }
+    reset(): void {
+      this.data = [];
+      this.data.push({
+        key: '',
+        value: '',
+        required: false,
+      });
+    }
+  }
+
+  //paramsTable覆盖父类
+  class ParamsFuncValue extends CommonFuncValue {
+    constructor(public data: tableItems[], public mores: boolean) {
+      super(data);
+      this.mores = mores;
+    }
+    get(): tableItems[] {
+      return this.data.map((it) => {
+        return {
+          key: it.key,
+          value: it.key === 'date_range' ? `${it.date1},${it.date2}` : it.value,
+          mores: it.key === 'date_range' ? this.mores : null,
+          editDisabled: it.editDisabled,
+          required: it.required,
+        };
+      });
+    }
+    reset(): void {
+      this.data = [];
+      this.data.push({
+        key: undefined,
+        value: '',
+        editDisabled: false,
+        required: false,
+        date1: '',
+        date2: '',
+      });
+    }
+  }
+
   return {
     getMultipleKeys,
     pushObj,
@@ -113,5 +240,11 @@ export const useUtils = () => {
     convertObj,
     isOtherHttp,
     usePlaceholder,
+    commonHttpParams,
+    staticWebSocketParams,
+    commonRest,
+    commonParams,
+    CommonFuncValue,
+    ParamsFuncValue,
   };
 };