Merge branch 'ft' into 'main_dev'

pref:重构公共接口，待完善测试接口

See merge request yunteng/thingskit-front!523

(cherry picked from commit d405e83c)

599b692b pref:重构公共接口，待完善测试接口
36b7d783 Merge branch 'main_dev' into ft

@@ -6,6 +6,7 @@ export interface BigScreenCenterItemsModel {
   createTime: string;
   creator: string;
   remark: string;
+  state: number;
 }
 export type queryPageParams = BasicPageParams & {
   name?: Nullable<string>;

@@ -118,6 +118,7 @@
   };
 
   const handleDesign = (record: BigScreenCenterItemsModel) => {
+    if (record.state === 1) return;
     window.open(`${largeDesignerPrefix}/#/chart/home/${record.id}`);
   };
 
@@ -241,8 +242,9 @@
                 </Tooltip>
                 <Tooltip title="设计">
                   <AuthIcon
-                    v-if="item.state === 0"
-                    class="!text-lg"
+                    :class="`!text-lg ${
+                      item.state === 1 ? '!cursor-not-allowed !text-gray-200' : ''
+                    }`"
                     icon="ant-design:edit-outlined"
                     @click="handleDesign(item)"
                   />

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

@@ -13,18 +13,17 @@
         placeholder="该接口没有 Body 体"
         :rows="2"
       />
-      <EditCellTable
-        ref="editCellTableRef"
-        v-show="
-          getRequestBody.content.requestParamsBodyType === 'form-data' ||
-          getRequestBody.content.requestParamsBodyType === 'x-www-form-urlencoded'
-        "
+      <BodyTable
+        ref="bodyCellFormDataTableRef"
+        v-show="getRequestBody.content.requestParamsBodyType === 'form-data'"
       />
-      <a-textarea
-        v-model:value="getRequestBody.content.json"
+      <BodyTable
+        ref="bodyCellXwwwTableRef"
+        v-show="getRequestBody.content.requestParamsBodyType === 'x-www-form-urlencoded'"
+      />
+      <JsonEditor
         v-show="getRequestBody.content.requestParamsBodyType === 'json'"
-        placeholder="请输入json"
-        :rows="6"
+        ref="jsonEditorRef"
       />
       <a-textarea
         v-model:value="getRequestBody.content.xml"
@@ -37,20 +36,11 @@
 </template>
 <script lang="ts" setup name="body">
   import { reactive, ref, nextTick } from 'vue';
-  import { RequestBodyTypeEnum } from '../../enum/index';
-  import { EditCellTable } from '../EditCellTable/index';
-
-  defineProps({
-    method: {
-      type: String,
-    },
-    paramsType: {
-      type: String,
-    },
-    data: {
-      type: Array || Object,
-    },
-  });
+  import { RequestBodyTypeEnum } from '../../../enum/index';
+  import BodyTable from './bodyTable.vue';
+  import { isEmpty } from '/@/utils/is';
+  import { useUtils } from '../../../hooks/useUtils';
+  import JsonEditor from './jsonEditor.vue';
 
   const getRequestBody = reactive({
     content: {
@@ -62,7 +52,13 @@
     },
   });
 
-  const editCellTableRef = ref<InstanceType<typeof EditCellTable>>();
+  const { pushObj } = useUtils();
+
+  const bodyCellFormDataTableRef = ref<InstanceType<typeof BodyTable>>();
+
+  const jsonEditorRef = ref<InstanceType<typeof JsonEditor>>();
+
+  const bodyCellXwwwTableRef = ref<InstanceType<typeof BodyTable>>();
 
   const handleChange = ({ target }) => {
     const { value } = target;
@@ -72,42 +68,39 @@
   //获取数据
   const getValue = () => {
     const type = Reflect.get(getRequestBody.content, 'requestParamsBodyType');
+    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;
     if (type === 'none') getRequestBody.content = {} as any;
-    const values = editCellTableRef.value?.getValue();
-    if (type === 'form-data') getRequestBody.content['form-data'] = values as any;
-    if (type === 'x-www-form-urlencoded')
-      getRequestBody.content['x-www-form-urlencoded'] = values as any;
     return getRequestBody.content;
   };
 
   //设置数据
-  const setValue = (data) => {
-    nextTick(() => {
-      try {
-        if (!data) return;
-        const type = data?.requestParamsBodyType;
-        getRequestBody.content.requestParamsBodyType = type;
-        type === 'none'
-          ? null
-          : type === 'form-data'
-          ? editCellTableRef.value?.setValue(data['form-data'])
-          : type === 'x-www-form-urlencoded'
-          ? editCellTableRef.value?.setValue(data['x-www-form-urlencoded'])
-          : type === 'json'
-          ? (getRequestBody.content.json = data['json'])
-          : type === 'xml'
-          ? (getRequestBody.content.xml = data['xml'])
-          : '';
-      } finally {
-      }
-    });
+  const setValue = async (data) => {
+    if (!data) return;
+    const type = data?.requestParamsBodyType;
+    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']);
+    jsonEditorRef.value?.setJsonValue(data['json']);
+    getRequestBody.content.xml = 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';
-    nextTick(() => editCellTableRef?.value?.resetValue());
+    nextTick(() => {
+      bodyCellFormDataTableRef?.value?.resetValue();
+      bodyCellXwwwTableRef?.value?.resetValue();
+    });
   };
   defineExpose({
     getValue,

@@ -58,8 +58,8 @@
   import { Select, Button } from 'ant-design-vue';
   import { findDictItemByCode } from '/@/api/system/dict';
   import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
-  import { editCellTableTHeadConfig } from '../../config';
-  import { selectType, tableItems } from '../../types';
+  import { editCellTableTHeadConfig } from '../../../config';
+  import { selectType, tableItems } from '../../../types';
 
   defineProps({
     method: {
@@ -144,7 +144,7 @@
     const assemblyData = tableArray.content.map((it) => {
       return {
         key: it.key,
-        value: it?.key === 'date_range' ? `${it.date1},${it.date2}` : it.value,
+        value: it.key === 'date_range' ? `${it.date1},${it.date2}` : it.value,
         editDisabled: it.editDisabled,
         required: it.required,
       };

@@ -19,6 +19,9 @@
             <a-input style="width: 12vw" placeholder="请输入" v-model:value="item.value" />
           </td>
           <td style="width: 4vw">
+            <a-switch v-model:checked="item.required" />
+          </td>
+          <td style="width: 4vw">
             <div>
               <Button type="dashed" @click="add(item, index)">
                 <template #icon><PlusOutlined /></template
@@ -37,8 +40,8 @@
   import { reactive, nextTick } from 'vue';
   import { Button } from 'ant-design-vue';
   import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
-  import { editTestCellTableTHeaderConfig } from '../../config';
-  import { tableItems } from '../../types';
+  import { editTestCellTableTHeaderConfig } from '../../../config';
+  import { tableItems } from '../../../types';
 
   defineProps({
     method: {
@@ -53,6 +56,7 @@
       {
         key: '',
         value: '',
+        required: false,
       },
     ],
   });
@@ -62,6 +66,7 @@
     tableArray.content.splice(index + 1, 0, {
       key: '',
       value: '',
+      required: false,
     });
   };
 
@@ -89,8 +94,8 @@
     tableArray.content.push({
       key: '',
       value: '',
+      required: false,
     });
-    nextTick(() => {});
   };
   defineExpose({
     getValue,

+<template>
+  <div ref="jsoneditorRef" style="height: 100%; width: 100%"></div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, nextTick, unref } from 'vue';
+  import jsoneditor from 'jsoneditor';
+  import 'jsoneditor/dist/jsoneditor.min.css';
+
+  // json 以及初始化JSON
+  const jsoneditorRef = ref();
+
+  const jsonValue = ref({});
+
+  const jsonInstance = ref();
+
+  onMounted(() => {
+    nextTick(() => {
+      let options = {
+        mode: 'code',
+        mainMenuBar: false,
+        statusBar: false,
+      };
+      let editor = new jsoneditor(jsoneditorRef.value, options);
+      editor.set(jsonValue.value);
+      jsonInstance.value = editor;
+    });
+  });
+
+  const getJsonValue = () => unref(jsonInstance).get();
+
+  const setJsonValue = (Json) => {
+    nextTick(() => {
+      unref(jsonInstance).set(Json);
+    });
+  };
+
+  defineExpose({
+    getJsonValue,
+    setJsonValue,
+    jsonInstance,
+  });
+</script>
+
+<style>
+  .jsoneditor {
+    border: none;
+  }
+</style>

+<template>
+  <div class="table-content">
+    <!-- 采用的原生表格 -->
+    <table align="center">
+      <thead>
+        <tr>
+          <th v-for="item in editCellTableTHeadConfig" :key="item">{{ item }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in tableArray.content" :key="index">
+          <td>
+            {{ index + 1 }}
+          </td>
+          <td style="width: 12vw">
+            <Select
+              v-model:value="item.key"
+              placeholder="请选择"
+              :options="selectOptions"
+              @change="handleChange"
+              allowClear
+            />
+          </td>
+          <td style="width: 12vw">
+            <div v-if="item.key === 'date_range'">
+              <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date1" />
+              <span>~</span>
+              <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" />
+            </div>
+            <div v-else>
+              <a-input
+                :disabled="item.editDisabled"
+                placeholder="请输入"
+                v-model:value="item.value"
+              />
+            </div>
+          </td>
+          <td style="width: 4vw">
+            <a-switch v-model:checked="item.required" />
+          </td>
+          <td style="width: 4vw">
+            <div>
+              <Button type="dashed" @click="add(item, index)">
+                <template #icon><PlusOutlined /></template
+              ></Button>
+              <Button type="dashed" style="margin-left: 5px" @click="remove(item, index)">
+                <template #icon> <MinusOutlined /></template>
+              </Button>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script lang="ts" setup name="editCellTable">
+  import { reactive, ref, onMounted, nextTick } from 'vue';
+  import { Select, Button } from 'ant-design-vue';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
+  import { editCellTableTHeadConfig } from '../../../config';
+  import { selectType, tableItems } from '../../../types';
+
+  defineProps({
+    method: {
+      type: String,
+    },
+  });
+
+  const selectOptions = ref<selectType[]>([]);
+
+  onMounted(() => {
+    getSelectOptions();
+  });
+
+  const getSelectOptions = 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',
+    });
+  };
+
+  const tableArray = reactive<{
+    content: tableItems[];
+  }>({
+    content: [
+      {
+        key: undefined,
+        value: '',
+        editDisabled: false,
+        required: false,
+        date1: '',
+        date2: '',
+      },
+    ],
+  });
+
+  // 新增
+  const add = (_, index: number) => {
+    tableArray.content.splice(index + 1, 0, {
+      key: undefined,
+      value: '',
+      editDisabled: false,
+      required: false,
+      date1: '',
+      date2: '',
+    });
+  };
+
+  // 减少
+  const remove = (item, index: number) => {
+    if (tableArray.content.length !== 1) {
+      selectOptions.value.forEach((ele) => {
+        if (ele.value == item.key) {
+          ele.disabled = false;
+        }
+      });
+      tableArray.content.splice(index, 1);
+    }
+  };
+
+  //Select互斥
+  const handleChange = () => {
+    selectOptions.value.forEach((ele) => {
+      ele.disabled = false;
+      tableArray.content.forEach((element) => {
+        if (element.key === 'scope' || element.key === 'fixed_date') {
+          element.editDisabled = false;
+        } else {
+          element.value = '';
+          element.editDisabled = true;
+        }
+        if (element.key === ele.value && element.key !== 'scope' && element.key !== 'fixed_date') {
+          ele.disabled = true;
+        }
+      });
+    });
+  };
+
+  //获取数据
+  const getValue = () => {
+    const assemblyData = tableArray.content.map((it) => {
+      return {
+        key: it.key,
+        value: it.key === 'date_range' ? `${it.date1},${it.date2}` : it.value,
+        editDisabled: it.editDisabled,
+        required: it.required,
+      };
+    });
+    return assemblyData;
+  };
+
+  //设置数据
+  const setValue = async (data) => {
+    await nextTick();
+    const assemblyData = data.map((it) => {
+      return {
+        key: it.key,
+        value: it.value,
+        editDisabled: it.editDisabled,
+        required: it.required,
+        date1: it.key === 'date_range' ? it.value?.split(',')?.at(-2) : '',
+        date2: it.key === 'date_range' ? it.value?.split(',')?.at(-1) : '',
+      };
+    });
+    tableArray.content = assemblyData;
+    tableArray.content.forEach(() => {
+      handleChange();
+    });
+  };
+
+  //重置数据
+  const resetValue = () => {
+    tableArray.content = [];
+    tableArray.content.push({
+      key: undefined,
+      value: '',
+      editDisabled: false,
+      required: false,
+      date1: '',
+      date2: '',
+    });
+    nextTick(() => {
+      tableArray.content.forEach(() => {
+        handleChange();
+      });
+    });
+  };
+  defineExpose({
+    getValue,
+    setValue,
+    resetValue,
+  });
+</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);
+    }
+  }
+</style>

 <template>
   <div>
+    <!--TODO: 待优化三者共存下的测试和是否能复用表格 -->
     <Tabs @change="handleTabsChange" v-model:activeKey="activeKey">
       <TabPane class="tab-pane" forceRender key="Params" tab="Params">
-        <EditCellTable ref="editParamsCellTableRef" :method="method" />
+        <ParamsTable ref="paramsCellTableRef" :method="method" />
+        <ParamsTest
+          @testParamsInterface="handleTestParamsInterface"
+          ref="testParamsRequestRef"
+          :data="dataMap.mapParamsObj"
+        />
       </TabPane>
       <TabPane
         v-if="method !== '2' && requestTypeAndUrl?.requestHttpType !== 'GET'"
@@ -11,36 +17,35 @@
         key="Body"
         tab="Body"
       >
-        <Body
-          ref="bodyRef"
-          :method="method"
-          :paramsType="requestTypeAndUrl?.requestHttpType"
-          :data="dataMap.mapObj"
+        <Body ref="bodyRef" />
+        <ParamsTest
+          @testInterface="handleTestBodyInterface"
+          ref="testBodyRequestRef"
+          :data="dataMap.mapBodyObj"
         />
       </TabPane>
       <TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Header" tab="Header">
-        <Header ref="editHeaderCellTableRef" :method="method" />
+        <HeaderTable ref="editHeaderCellTableRef" :method="method" />
+        <HeaderTest
+          @testHeaderInterface="handleTestHeaderInterface"
+          ref="testHeaderRequestRef"
+          :data="dataMap.mapHeaderObj"
+        />
       </TabPane>
     </Tabs>
-    <div class="tab-pane">
-      <TestRequest
-        @testInterface="handleTestInterface"
-        ref="testRequestRef"
-        :method="method"
-        :requestOriginUrl="requestOriginUrl"
-        :requestUrl="requestTypeAndUrl?.requestUrl"
-        :data="dataMap.mapObj"
-      />
-    </div>
+    <ExcuteTest ref="excuteTestRef" @emitExcute="handleEmitExcute" :data="excuteData" />
   </div>
 </template>
 <script lang="ts" setup name="simpleRequest">
   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';
-  import Header from './header.vue';
+  import Body from './components/body.vue';
+  import { ParamsTest, HeaderTest } from '../TestInterface/index';
+  import HeaderTable from './components/headerTable.vue';
+  import ParamsTable from './components/paramsTable.vue';
+  import { isEmpty } from '/@/utils/is';
+  import { useUtils } from '../../hooks/useUtils';
+  import ExcuteTest from '../TestInterface/components/excuteTest.vue';
 
   const props = defineProps({
     method: {
@@ -56,45 +61,84 @@
 
   const emits = defineEmits(['activeKey']);
 
+  const { pushObj } = useUtils();
+
   const activeKey = ref('Params');
 
-  const editParamsCellTableRef = ref<InstanceType<typeof EditCellTable>>();
+  const excuteData = ref({});
+
+  const paramsCellTableRef = ref<InstanceType<typeof ParamsTable>>();
+
+  const editHeaderCellTableRef = ref<InstanceType<typeof ParamsTable>>();
 
-  const editHeaderCellTableRef = ref<InstanceType<typeof EditCellTable>>();
+  const excuteTestRef = ref<InstanceType<typeof ExcuteTest>>();
 
   const bodyRef = ref<InstanceType<typeof Body>>();
 
-  const testRequestRef = ref<InstanceType<typeof TestRequest>>();
+  const testParamsRequestRef = ref<InstanceType<typeof ParamsTest>>();
+
+  const testBodyRequestRef = ref<InstanceType<typeof ParamsTest>>();
+
+  const testHeaderRequestRef = ref<InstanceType<typeof HeaderTest>>();
 
   const dataMap: any = reactive({
-    mapObj: {},
+    mapParamsObj: {},
+    mapBodyObj: {},
+    mapHeaderObj: {},
   });
 
-  const handleTabsChange = () => testRequestRef.value?.setValue();
+  const handleTabsChange = () => {
+    // testParamsRequestRef.value?.setValue();
+    // testBodyRequestRef.value?.setValue();
+    // testHeaderRequestRef.value?.setValue();
+  };
 
   //if-else-if-else分支优化
   const dataForTypeMap = [
-    [(type) => type === 'Params', (data) => editParamsCellTableRef.value?.setValue(data)],
+    [(type) => type === 'Params', (data) => paramsCellTableRef.value?.setValue(data)],
     [(type) => type === 'Body', (data) => bodyRef.value?.setValue(data)],
     [(type) => type === 'Header', (data) => editHeaderCellTableRef.value?.setValue(data)],
   ];
 
-  //测试接口
-  const handleTestInterface = () => {
+  const handleEmitExcute = () => {
+    excuteData.value = {
+      Params: testParamsRequestRef.value?.getTestValue(),
+      Header: testHeaderRequestRef.value?.getTestValue(),
+    };
+  };
+
+  //TODO: 待优化这里测试接口
+  const handleTestParamsInterface = () => {
+    let value = getValue(false) as any;
+    dataMap.mapParamsObj = {
+      list: value?.Params,
+      requestOriginUrl: props.requestOriginUrl,
+      requestTypeAndUrl: props.requestTypeAndUrl,
+      method: props.method,
+      activeKey: activeKey.value,
+    };
+  };
+
+  const handleTestBodyInterface = () => {
     let value = getValue(false) as any;
-    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?.Params || value?.Header,
-          requestOriginUrl: props.requestOriginUrl,
-          requestParamsBodyType: type,
-          requestTypeAndUrl: props.requestTypeAndUrl,
-        })
-    );
+    dataMap.mapBodyObj = {
+      list: value?.Body,
+      requestOriginUrl: props.requestOriginUrl,
+      requestTypeAndUrl: props.requestTypeAndUrl,
+      method: props.method,
+      activeKey: activeKey.value,
+    };
+  };
+
+  const handleTestHeaderInterface = () => {
+    let value = getValue(false) as any;
+    dataMap.mapHeaderObj = {
+      list: value?.Header,
+      requestOriginUrl: props.requestOriginUrl,
+      requestTypeAndUrl: props.requestTypeAndUrl,
+      method: props.method,
+      activeKey: activeKey.value,
+    };
   };
 
   //获取数据
@@ -102,7 +146,7 @@
     const type = activeKey.value;
     status ? emits('activeKey', type) : null;
     const Body = bodyRef.value?.getValue();
-    const Params = editParamsCellTableRef.value?.getValue();
+    const Params = paramsCellTableRef.value?.getValue();
     const Header = editHeaderCellTableRef.value?.getValue();
     return {
       Params,
@@ -116,9 +160,9 @@
     nextTick(() => {
       const Objects = JSON.parse(data?.requestParams);
       if (!Objects) return;
-      dataForTypeMap[0][1](Objects?.Params);
-      dataForTypeMap[1][1](Objects?.Body);
-      dataForTypeMap[2][1](Objects?.Header);
+      dataForTypeMap[0][1](isEmpty(Objects?.Params) ? [pushObj] : Objects?.Params);
+      dataForTypeMap[1][1](isEmpty(Objects?.Body) ? {} : Objects?.Body);
+      dataForTypeMap[2][1](isEmpty(Objects?.Header) ? [pushObj] : Objects?.Header);
     });
   };
 
@@ -126,7 +170,7 @@
   const resetValue = () => {
     activeKey.value = 'Params';
     nextTick(() => {
-      editParamsCellTableRef.value?.resetValue();
+      paramsCellTableRef.value?.resetValue();
       editHeaderCellTableRef.value?.resetValue();
       bodyRef.value?.resetValue();
       handleTabsChange();

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

+<template>
+  <div class="mt-8">
+    <div>
+      <Button disabled @click="handleExcute" type="primary"> 执行测试请求 </Button>
+    </div>
+    <!-- <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 { nextTick } from 'vue';
+  import { Button } from 'ant-design-vue';
+  // import { otherHttp } from '/@/utils/http/axios';
+
+  const emits = defineEmits(['emitExcute']);
+
+  const props = defineProps({
+    data: {
+      type: Object,
+    },
+  });
+
+  //格式化替换像"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);
+  };
+
+  // const testResult = ref('');
+
+  //执行测试接口
+  const handleExcute = () => {
+    emits('emitExcute');
+    getValue();
+  };
+
+  const getValue = async () => {
+    await nextTick();
+    console.log(props.data);
+  };
+
+  // //TODO: 待优化 项目自带第三方请求
+  // const otherHttpRequest = async (apiType, params = {}, api, joinPrefix = false) => {
+  //   switch (apiType) {
+  //     case 'GET':
+  //       return await otherHttp.get(
+  //         { url: api, params },
+  //         {
+  //           apiUrl: '',
+  //           joinPrefix,
+  //         }
+  //       );
+  //   }
+  // };
+</script>
+
+<style scoped lang="less"></style>

+<template>
+  <div>
+    <div class="mt-8">
+      <div>
+        <Button disabled @click="handleTest" type="primary"> 测试接口 </Button>
+      </div>
+      <div v-if="showTestEditCell" class="mt-8">
+        <a-row type="flex" justify="center">
+          <a-col :span="3"> 参数设置 </a-col>
+          <a-col :span="21">
+            <TestHeaderEditCellTable ref="testEditCellTableRef" />
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+    <div class="mt-8"> </div>
+  </div>
+</template>
+<script lang="ts" setup name="testRequest">
+  import { ref, nextTick } from 'vue';
+  import { Button } from 'ant-design-vue';
+  import TestHeaderEditCellTable from './testEditHeaderCellTable.vue';
+
+  const emits = defineEmits(['testHeaderInterface']);
+
+  const props = defineProps({
+    data: {
+      type: Object,
+    },
+  });
+
+  const showTestEditCell = ref(false);
+
+  const excuteData = ref({});
+
+  const testEditCellTableRef = ref<InstanceType<typeof TestHeaderEditCellTable>>();
+
+  const testResult = ref('');
+
+  const handleTest = () => {
+    showTestEditCell.value = true;
+    emits('testHeaderInterface');
+    getValue();
+  };
+
+  const getValue = async () => {
+    await nextTick();
+    await nextTick(() => {
+      const getValue = props.data?.list;
+      testEditCellTableRef.value?.setTableArray(getValue);
+    });
+  };
+
+  //测试表格里的数据转化为 key value 数组对象形式
+  const getTestTableKeyValue = () => {
+    return testEditCellTableRef.value?.getValue();
+  };
+
+  //获取数据
+  const getTestValue = () => {
+    const getTable = getTestTableKeyValue();
+    //源地址
+    const apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestTypeAndUrl?.requestUrl}`;
+    //请求类型
+    const apiType = props.data?.requestTypeAndUrl?.requestHttpType;
+    //替换key value
+    const params: any = {};
+    getTable?.map((it: any) => (params[it.key!] = it.value!));
+    excuteData.value = {
+      apiGetUrl,
+      apiType,
+      params,
+      activeKey: props.data?.activeKey,
+    };
+    return excuteData.value;
+  };
+
+  //设置数据
+  const setValue = () => {
+    showTestEditCell.value = false;
+    testResult.value = '';
+  };
+
+  defineExpose({
+    setValue,
+    handleTest,
+    getTestValue,
+  });
+</script>
+
+<style scoped lang="less"></style>

+<!-- eslint-disable vue/valid-v-model -->
+<template>
+  <div class="table-content">
+    <!-- TODO: 待优化测试表格 -->
+    <table align="center">
+      <thead>
+        <tr>
+          <th v-for="item in editTestCellTableTHeadConfig.slice(1)" :key="item">{{ item }}</th>
+        </tr>
+      </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>
+          <td style="width: 6.5vw">
+            <a-input placeholder="请输入" v-model:value="item.value" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script lang="ts" setup name="editCellTable">
+  import { reactive } from 'vue';
+  import { cloneDeep } from 'lodash-es';
+  import { tableItems } from '../../../types';
+  import { editTestCellTableTHeadConfig } from '../../../config';
+
+  defineProps({
+    method: {
+      type: String,
+    },
+  });
+
+  const tableTestArray = reactive<{
+    content: tableItems[];
+  }>({
+    content: [
+      {
+        key: undefined,
+        value: undefined,
+        keyValue: null,
+        editDisabled: false,
+        dateValue: null,
+      },
+    ],
+  });
+
+  //设置数据
+  const setTableArray = (data) => {
+    const list = cloneDeep(data);
+    if (Array.isArray(list)) tableTestArray.content = list;
+  };
+
+  //获取数据
+  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>

+import ParamsTest from './paramsTest/index.vue';
+import HeaderTest from './headerTest/index.vue';
+
+export { ParamsTest, HeaderTest };

+<template>
+  <div>
+    <div class="mt-8">
+      <div>
+        <Button disabled @click="handleTest" type="primary"> 测试接口 </Button>
+      </div>
+      <div v-if="showTestEditCell" class="mt-8">
+        <a-row type="flex" justify="center">
+          <a-col :span="3"> 参数设置 </a-col>
+          <a-col :span="21">
+            <TestParamsCellTable ref="testEditCellTableRef" />
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+    <div class="mt-8"> </div>
+  </div>
+</template>
+<script lang="ts" setup name="testRequest">
+  import { ref, nextTick } from 'vue';
+  import { Button } from 'ant-design-vue';
+  import TestParamsCellTable from './testEditParamsCellTable.vue';
+  import moment from 'moment';
+  import { useUtils } from '../../../hooks/useUtils';
+
+  const emits = defineEmits(['testParamsInterface']);
+
+  const props = defineProps({
+    data: {
+      type: Object,
+    },
+  });
+
+  const showTestEditCell = ref(false);
+
+  const excuteData = ref({});
+
+  const testEditCellTableRef = ref<InstanceType<typeof TestParamsCellTable>>();
+
+  const testResult = ref('');
+
+  const { getMultipleKeys } = useUtils();
+
+  const handleTest = () => {
+    showTestEditCell.value = true;
+    emits('testParamsInterface');
+    getValue();
+  };
+
+  const getValue = async () => {
+    await nextTick();
+    await nextTick(() => {
+      //拆分"xx,xx,xx"多个
+      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);
+    });
+  };
+
+  //测试表格里的数据转化为 key value 数组对象形式
+  //TODO:待优化这里的TS类型
+  const getTestTableKeyValue = () => {
+    //把日期拆分成多个
+    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 : [];
+      for (let i in splitDateKey) {
+        const obj = {
+          key: splitDateKey[i],
+          value: moment(splitDateValue[i]).valueOf(),
+        };
+        keyValueList.push(obj);
+      }
+    });
+    return testEditCellTableRef.value
+      ?.getValue()
+      .concat(keyValueList)
+      .filter((it) => it.key !== 'date_range')
+      .map((it: any) => {
+        const value = it?.key === 'scope' || it?.key === 'fixed_date' ? it?.keyValue : it?.value;
+        const key = it?.key === 'scope' || it?.key === 'fixed_date' ? it?.value : it?.key;
+        return {
+          key,
+          value,
+        };
+      });
+  };
+
+  //获取数据
+  const getTestValue = () => {
+    const getTable = getTestTableKeyValue();
+    //源地址
+    const apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestTypeAndUrl?.requestUrl}`;
+    //请求类型
+    const apiType = props.data?.requestTypeAndUrl?.requestHttpType;
+    //替换key value
+    const params: any = {};
+    getTable?.map((it) => (params[it.key!] = it.value!));
+    excuteData.value = {
+      apiGetUrl,
+      apiType,
+      params,
+      activeKey: props.data?.activeKey,
+    };
+    return excuteData.value;
+  };
+
+  //设置数据
+  const setValue = () => {
+    showTestEditCell.value = false;
+    testResult.value = '';
+  };
+
+  defineExpose({
+    setValue,
+    handleTest,
+    getTestValue,
+  });
+</script>
+
+<style scoped lang="less"></style>

 <!-- eslint-disable vue/valid-v-model -->
 <template>
   <div class="table-content">
-    <!-- TODO 待优化测试表格 -->
+    <!-- TODO: 待优化测试表格 -->
     <table align="center">
       <thead>
         <tr>
@@ -67,10 +67,18 @@
           </td>
           <td style="width: 6.5vw">
             <a-input
-              v-if="item.key === 'scope' || item.key === 'fixed_date'"
+              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"
@@ -79,7 +87,7 @@
               format="YYYY-MM-DD HH:mm"
               :placeholder="['开始', '结束']"
             />
-            <a-input v-else disabled="true" placeholder="请输入" v-model:value="item.keyValue" />
+            <a-input v-else disabled placeholder="请输入" v-model:value="item.keyValue" />
           </td>
         </tr>
       </tbody>
@@ -92,10 +100,10 @@
   import { findDictItemByCode } from '/@/api/system/dict';
   import { getAllDeviceByOrg } from '/@/api/dataBoard';
   import { getDeviceAttributes } from '/@/api/dataBoard';
-  import { useApi } from '../../hooks/useApi';
+  import { useApi } from '../../../hooks/useApi';
   import { cloneDeep } from 'lodash-es';
-  import { tableItems, selectType } from '../../types';
-  import { editTestCellTableTHeadConfig } from '../../config';
+  import { tableItems, selectType } from '../../../types';
+  import { editTestCellTableTHeadConfig } from '../../../config';
 
   const props = defineProps({
     method: {
@@ -166,7 +174,7 @@
 
   const handleOrgnationChange = async (e) => {
     let deviceProfileId = '';
-    tableTestArray.content.forEach((f) => {
+    tableTestArray.content.forEach((f: any) => {
       if (f.key === 'entityId') {
         f.value = null;
       }
@@ -192,7 +200,7 @@
   const handleValueChange = (e) => {
     let organizationId = '';
     if (e.key === 'deviceProfileId') {
-      tableTestArray.content.forEach((f) => {
+      tableTestArray.content.forEach((f: any) => {
         if (f.key === 'keys') {
           f.value = null;
         }

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

-<template>
-  <div>
-    <div class="mt-8">
-      <div>
-        <Button @click="handleTest" type="primary"> 测试接口 </Button>
-      </div>
-      <div v-if="showTestEditCell" class="mt-8">
-        <a-row type="flex" justify="center">
-          <a-col :span="3"> 参数设置 </a-col>
-          <a-col :span="21">
-            <TestEditCellTable ref="testEditCellTableRef" :method="method" />
-          </a-col>
-        </a-row>
-      </div>
-    </div>
-    <div v-if="showTestEditCell" class="mt-8">
-      <div>
-        <Button @click="handleExcute" type="primary"> 执行 </Button>
-      </div>
-      <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>
-  </div>
-</template>
-<script lang="ts" setup name="testRequest">
-  import { ref, nextTick, reactive } from 'vue';
-  import { Button } from 'ant-design-vue';
-  import { TestEditCellTable } from '../TestEditCellTable/index';
-  import { otherHttp } from '/@/utils/http/axios';
-  import moment from 'moment';
-  import { useWebSocket } from '@vueuse/core';
-  import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
-  import { getAuthCache } from '/@/utils/auth';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { useGlobSetting } from '/@/hooks/setting';
-
-  const emits = defineEmits(['testInterface']);
-
-  const props = defineProps({
-    method: {
-      type: String,
-    },
-    data: {
-      type: Object,
-    },
-  });
-
-  const { createMessage } = useMessage();
-
-  const token = getAuthCache(JWT_TOKEN_KEY);
-
-  const { socketUrl } = useGlobSetting();
-
-  const socketMessage = reactive({
-    server: `${socketUrl}${token}`,
-    sendValue: {
-      tsSubCmds: [],
-    },
-  });
-
-  const showTestEditCell = ref(false);
-
-  const testEditCellTableRef = ref<InstanceType<typeof TestEditCellTable>>();
-
-  const testResult = ref('');
-
-  // const testNeedKeys = ['organizationId', 'deviceProfileId', 'entityId', 'keys', 'date'];
-
-  const handleTest = () => {
-    showTestEditCell.value = true;
-    emits('testInterface');
-    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 = () => {
-    //把日期拆分成多个
-    const keyValueList = [];
-    testEditCellTableRef.value?.getValue()?.forEach((item) => {
-      const splitDateKey = item.key === 'date_range' ? item.value?.split(',') : [];
-      const splitDateValue = item.key === 'date_range' ? item.dateValue : [];
-      for (let i in splitDateKey) {
-        const obj = {
-          key: splitDateKey[i],
-          value: moment(splitDateValue[i]).valueOf(),
-        };
-        keyValueList.push(obj);
-      }
-    });
-    return testEditCellTableRef.value
-      ?.getValue()
-      .concat(keyValueList)
-      .filter((it) => it.key !== 'date_range')
-      .map((it) => {
-        const value = it.key === 'scope' || it.key === 'fixed_date' ? it.keyValue : it.value;
-        const key = it.key === 'scope' || it.key === 'fixed_date' ? 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');
-        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(() => {
-      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 () => {
-    await nextTick();
-    await nextTick(async () => {
-      const getTable = getTestTableKeyValue();
-      const apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestTypeAndUrl?.requestUrl}`;
-      const apiType = props.data?.requestTypeAndUrl?.requestHttpType;
-      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连接超时,请联系管理员');
-          },
-        });
-      }
-    });
-  };
-
-  //设置数据
-  const setValue = () => {
-    showTestEditCell.value = false;
-    testResult.value = '';
-  };
-
-  defineExpose({
-    setValue,
-    handleTest,
-  });
-</script>
-
-<style scoped lang="less"></style>

@@ -204,4 +204,4 @@ export const schemas: FormSchema[] = [
 //表格表头配置
 export const editCellTableTHeadConfig = ['序号', '内置参数', '参数名', '是否必须', '操作'];
 export const editTestCellTableTHeadConfig = ['内置参数', '参数名', '参数值'];
-export const editTestCellTableTHeaderConfig = ['序号', '参数名', '参数值'];
+export const editTestCellTableTHeaderConfig = ['序号', '参数名', '参数值', '是否必须', '操作'];

@@ -12,7 +12,6 @@
           <SimpleRequest
             ref="simpleRequestRef"
             v-if="model['requestContentType'] === '0' || model['requestContentType'] === '2'"
-            @activeKey="handleActiveKey"
             :requestTypeAndUrl="model['requestHttpTypeAndUrl']"
             :method="model['requestContentType']"
             :requestOriginUrl="model['requestOriginUrl']"
@@ -42,7 +41,11 @@
     saveDataViewInterface,
     updateDataViewInterface,
   } from '/@/api/bigscreen/center/bigscreenCenter';
+
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { useUtils } from './hooks/useUtils';
+
+  const { resetReqHttpType, resetUpdateSchema } = useUtils();
 
   const emits = defineEmits(['success', 'register']);
 
@@ -52,8 +55,6 @@
 
   const putId = ref('');
 
-  const activeKey = ref('');
-
   const simpleRequestRef = ref<InstanceType<typeof SimpleRequest>>();
 
   const testSqlRef = ref<InstanceType<typeof TestSql>>();
@@ -67,18 +68,8 @@
   const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
     await resetFields();
     await nextTick();
-    updateSchema({
-      field: 'requestHttpTypeAndUrl',
-      componentProps: {
-        type: '0',
-      },
-    });
-    setFieldsValue({
-      requestHttpTypeAndUrl: {
-        requestHttpType: undefined,
-        requestUrl: '',
-      },
-    });
+    updateSchema(resetUpdateSchema);
+    setFieldsValue(resetReqHttpType);
     const title = `${!data.isUpdate ? '新增' : '修改'}公共接口`;
     setDrawerProps({ title });
     isUpdate.value = data.isUpdate;
@@ -104,12 +95,9 @@
           type: String(data.record?.requestContentType),
         },
       });
-    } else {
     }
   });
 
-  const handleActiveKey = (v) => (activeKey.value = v);
-
   const handleSubmit = async () => {
     setDrawerProps({ loading: true });
     try {

+export const useUtils = () => {
+  //获取多个key
+  const getMultipleKeys = (list) => {
+    let temps = [];
+    list?.forEach((it) => {
+      const keys = it.key.split(',');
+      const temp = keys.map((item) => {
+        const obj: { key: string; value: string } = { key: '', value: '' };
+        obj.key = item;
+        obj.value = item === 'scope' ? it.value : '';
+        return obj;
+      });
+      temps = temp;
+    });
+    return temps;
+  };
+  //默认push一个
+  const pushObj = {
+    key: undefined,
+    value: '',
+    editDisabled: false,
+    required: false,
+    date1: '',
+    date2: '',
+  };
+  //新增时置空特定数据
+  const resetReqHttpType = {
+    requestHttpTypeAndUrl: {
+      requestHttpType: undefined,
+      requestUrl: '',
+    },
+  };
+  const resetUpdateSchema = {
+    field: 'requestHttpTypeAndUrl',
+    componentProps: {
+      type: '0',
+    },
+  };
+  return { getMultipleKeys, pushObj, resetReqHttpType, resetUpdateSchema };
+};