Merge branch 'ft' into 'main_dev'

pref:优化部分代码，新增表格header（key,value）形式，修改三者共存（params,body,header）

See merge request yunteng/thingskit-front!522

@@ -38,6 +38,7 @@ import ApiSearchSelect from './components/ApiSearchSelect.vue';
 import CustomMinMaxInput from './externalCompns/components/CustomMinMaxInput.vue';
 import StructForm from './externalCompns/components/StructForm/StructForm.vue';
 import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue';
+import InputGroup from './components/InputGroup.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -83,6 +84,7 @@ componentMap.set('ApiSearchSelect', ApiSearchSelect);
 componentMap.set('CustomMinMaxInput', CustomMinMaxInput);
 componentMap.set('StructForm', StructForm);
 componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
+componentMap.set('InputGroup', InputGroup);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

+<template>
+  <div>
+    <!-- 简易封装InputGroup -->
+    <!-- 待完善封装InputGroup -->
+    <InputGroup compact>
+      <Select
+        v-if="type !== '2'"
+        placeholder="请求类型"
+        :style="{ width: type !== '2' ? 15 + '%' : 0 + '%' }"
+        v-model:value="valueObj.requestHttpType"
+        :options="selectOptions"
+        allowClear
+        @change="emitChange"
+      />
+      <Input
+        @change="emitChange"
+        placeholder="请输入接口地址"
+        v-model:value="valueObj.requestUrl"
+        :style="{ width: type !== '2' ? 85 + '%' : 100 + '%' }"
+      />
+    </InputGroup>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, watchEffect } from 'vue';
+  import { InputGroup, Select, Input } from 'ant-design-vue';
+  import type { SelectValue } from 'ant-design-vue/lib/select';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { propTypes } from '/@/utils/propTypes';
+
+  type TypeInputGroup = {
+    requestHttpType: SelectValue | undefined;
+    requestUrl?: string;
+    disabled?: boolean;
+  };
+
+  type selectType = { label: string; value: string; disabled?: boolean };
+
+  const props = defineProps({
+    type: {
+      type: String,
+    },
+    value: propTypes.object.def({}),
+  });
+
+  const emits = defineEmits(['change', 'update:value']);
+
+  const selectOptions = ref<selectType[]>([]);
+
+  const getOptions = async (e) => {
+    const res = await findDictItemByCode({
+      dictCode: e === '1' ? 'dataview_select_sql_request' : 'dataview_select_request',
+    });
+    if (e === '1' || e === '0') {
+      selectOptions.value = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
+    } else {
+      selectOptions.value = [];
+    }
+  };
+
+  const valueObj = reactive<TypeInputGroup>({
+    requestHttpType: undefined,
+    requestUrl: '',
+  });
+
+  watchEffect(() => {
+    initVal();
+  });
+
+  function initVal() {
+    if (props?.type) getOptions(props?.type);
+    if (props?.value) for (let i in props.value) Reflect.set(valueObj, i, props.value[i]);
+  }
+
+  function emitChange() {
+    emits('change', valueObj);
+    emits('update:value', valueObj);
+  }
+</script>
+<style scoped></style>

@@ -241,6 +241,7 @@
                 </Tooltip>
                 <Tooltip title="设计">
                   <AuthIcon
+                    v-if="item.state === 0"
                     class="!text-lg"
                     icon="ant-design:edit-outlined"
                     @click="handleDesign(item)"

@@ -4,16 +4,12 @@
     <table align="center">
       <thead>
         <tr>
-          <th></th>
-          <th>内置参数</th>
-          <th>参数名</th>
-          <th>是否必须</th>
-          <th>操作</th>
+          <th v-for="item in editCellTableTHeadConfig" :key="item">{{ item }}</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(item, index) in tableArray.content" :key="index">
-          <td style="width: 1vw">
+          <td>
             {{ index + 1 }}
           </td>
           <td style="width: 12vw">
@@ -26,7 +22,7 @@
             />
           </td>
           <td style="width: 12vw">
-            <div v-if="item.key === 'fixed_date' || item.key === 'date_range'">
+            <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" />
@@ -42,7 +38,7 @@
           <td style="width: 4vw">
             <a-switch v-model:checked="item.required" />
           </td>
-          <td style="width: 2vw">
+          <td style="width: 4vw">
             <div>
               <Button type="dashed" @click="add(item, index)">
                 <template #icon><PlusOutlined /></template
@@ -62,6 +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';
 
   defineProps({
     method: {
@@ -69,6 +67,8 @@
     },
   });
 
+  const selectOptions = ref<selectType[]>([]);
+
   onMounted(() => {
     getSelectOptions();
   });
@@ -82,23 +82,12 @@
     });
   };
 
-  const selectOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
-
-  type defaultItem = {
-    key: null | string;
-    value: string;
-    editDisabled: boolean;
-    required: boolean;
-    date1: string;
-    date2: string;
-  };
-
   const tableArray = reactive<{
-    content: defaultItem[];
+    content: tableItems[];
   }>({
     content: [
       {
-        key: null,
+        key: undefined,
         value: '',
         editDisabled: false,
         required: false,
@@ -111,7 +100,7 @@
   // 新增
   const add = (_, index: number) => {
     tableArray.content.splice(index + 1, 0, {
-      key: null,
+      key: undefined,
       value: '',
       editDisabled: false,
       required: false,
@@ -137,13 +126,13 @@
     selectOptions.value.forEach((ele) => {
       ele.disabled = false;
       tableArray.content.forEach((element) => {
-        if (element.key === 'scope') {
+        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') {
+        if (element.key === ele.value && element.key !== 'scope' && element.key !== 'fixed_date') {
           ele.disabled = true;
         }
       });
@@ -155,12 +144,7 @@
     const assemblyData = tableArray.content.map((it) => {
       return {
         key: it.key,
-        value:
-          it.key === 'fixed_date'
-            ? `${it.date1},${it.date2}`
-            : 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,
       };
@@ -177,8 +161,8 @@
         value: it.value,
         editDisabled: it.editDisabled,
         required: it.required,
-        date1: it.key === 'date_range' || it.key === 'fixed_date' ? it.value.split(',').at(-2) : '',
-        date2: it.key === 'date_range' || it.key === 'fixed_date' ? it.value.split(',').at(-1) : '',
+        date1: it.key === 'date_range' ? it.value?.split(',')?.at(-2) : '',
+        date2: it.key === 'date_range' ? it.value?.split(',')?.at(-1) : '',
       };
     });
     tableArray.content = assemblyData;
@@ -191,7 +175,7 @@
   const resetValue = () => {
     tableArray.content = [];
     tableArray.content.push({
-      key: null,
+      key: undefined,
       value: '',
       editDisabled: false,
       required: false,
@@ -228,6 +212,10 @@
       &:extend(.table-border-color);
     }
 
+    table thead {
+      white-space: nowrap;
+    }
+
     table td {
       padding: 5px;
       white-space: nowrap;

@@ -48,7 +48,7 @@
       type: String,
     },
     data: {
-      type: Array,
+      type: Array || Object,
     },
   });
 

+<template>
+  <div class="table-content">
+    <!-- 采用的原生表格 -->
+    <table align="center">
+      <thead>
+        <tr>
+          <th v-for="item in editTestCellTableTHeaderConfig" :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">
+            <a-input style="width: 12vw" placeholder="请输入" v-model:value="item.key" />
+          </td>
+          <td style="width: 12vw">
+            <a-input style="width: 12vw" placeholder="请输入" v-model:value="item.value" />
+          </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(index)">
+                <template #icon> <MinusOutlined /></template>
+              </Button>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script lang="ts" setup name="editCellTable">
+  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';
+
+  defineProps({
+    method: {
+      type: String,
+    },
+  });
+
+  const tableArray = reactive<{
+    content: tableItems[];
+  }>({
+    content: [
+      {
+        key: '',
+        value: '',
+      },
+    ],
+  });
+
+  // 新增
+  const add = (_, index: number) => {
+    tableArray.content.splice(index + 1, 0, {
+      key: '',
+      value: '',
+    });
+  };
+
+  // 减少
+  const remove = (index: number) => {
+    if (tableArray.content.length !== 1) {
+      tableArray.content.splice(index, 1);
+    }
+  };
+
+  //获取数据
+  const getValue = () => {
+    return tableArray.content;
+  };
+
+  //设置数据
+  const setValue = async (data) => {
+    await nextTick();
+    tableArray.content = data;
+  };
+
+  //重置数据
+  const resetValue = () => {
+    tableArray.content = [];
+    tableArray.content.push({
+      key: '',
+      value: '',
+    });
+    nextTick(() => {});
+  };
+  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>
-    <Tabs @change="handleChange" v-model:activeKey="activeKey">
+    <Tabs @change="handleTabsChange" v-model:activeKey="activeKey">
       <TabPane class="tab-pane" forceRender key="Params" tab="Params">
-        <EditCellTable ref="editCellTableRef" :method="method" />
-        <TestRequest
-          @testInterface="handleTestInterface"
-          ref="testParRequestRef"
-          :method="method"
-          :requestOriginUrl="requestOriginUrl"
-          :requestUrl="requestUrl"
-          :data="dataMap.mapObj"
-        />
+        <EditCellTable ref="editParamsCellTableRef" :method="method" />
       </TabPane>
       <TabPane
-        v-if="method !== '2' && paramsType !== 'GET'"
+        v-if="method !== '2' && requestTypeAndUrl?.requestHttpType !== 'GET'"
         class="tab-pane"
         forceRender
         key="Body"
         tab="Body"
       >
-        <Body ref="bodyRef" :method="method" :paramsType="paramsType" :data="dataMap.mapObj" />
-        <TestRequest
-          @testInterface="handleTestInterface"
-          ref="testBodyRequestRef"
+        <Body
+          ref="bodyRef"
           :method="method"
-          :requestOriginUrl="requestOriginUrl"
-          :requestUrl="requestUrl"
+          :paramsType="requestTypeAndUrl?.requestHttpType"
           :data="dataMap.mapObj"
         />
       </TabPane>
       <TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Header" tab="Header">
-        <EditCellTable ref="editHeaderCellTableRef" :method="method" />
-        <TestRequest
-          @testInterface="handleTestInterface"
-          ref="testHeaderRequestRef"
-          :method="method"
-          :requestOriginUrl="requestOriginUrl"
-          :requestUrl="requestUrl"
-          :data="dataMap.mapObj"
-        />
+        <Header ref="editHeaderCellTableRef" :method="method" />
       </TabPane>
     </Tabs>
+    <div class="tab-pane">
+      <TestRequest
+        @testInterface="handleTestInterface"
+        ref="testRequestRef"
+        :method="method"
+        :requestOriginUrl="requestOriginUrl"
+        :requestUrl="requestTypeAndUrl?.requestUrl"
+        :data="dataMap.mapObj"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts" setup name="simpleRequest">
@@ -49,61 +40,59 @@
   import { EditCellTable } from '../EditCellTable';
   import Body from './body.vue';
   import { TestRequest } from '../TestRequest/index';
+  import Header from './header.vue';
 
   const props = defineProps({
     method: {
       type: String,
     },
-    paramsType: {
-      type: String,
+    requestTypeAndUrl: {
+      type: Object,
     },
     requestOriginUrl: {
       type: String,
     },
-    requestUrl: {
-      type: String,
-    },
   });
 
   const emits = defineEmits(['activeKey']);
 
   const activeKey = ref('Params');
 
-  const editCellTableRef = ref<InstanceType<typeof EditCellTable>>();
+  const editParamsCellTableRef = ref<InstanceType<typeof EditCellTable>>();
 
   const editHeaderCellTableRef = ref<InstanceType<typeof EditCellTable>>();
 
-  const testParRequestRef = ref<InstanceType<typeof TestRequest>>();
-
-  const testBodyRequestRef = ref<InstanceType<typeof TestRequest>>();
+  const bodyRef = ref<InstanceType<typeof Body>>();
 
-  const testHeaderRequestRef = ref<InstanceType<typeof TestRequest>>();
+  const testRequestRef = ref<InstanceType<typeof TestRequest>>();
 
   const dataMap: any = reactive({
     mapObj: {},
   });
 
-  const bodyRef = ref<InstanceType<typeof Body>>();
+  const handleTabsChange = () => testRequestRef.value?.setValue();
 
-  const handleChange = () => {
-    testParRequestRef.value?.setValue();
-    testHeaderRequestRef.value?.setValue();
-    testBodyRequestRef.value?.setValue();
-  };
+  //if-else-if-else分支优化
+  const dataForTypeMap = [
+    [(type) => type === 'Params', (data) => editParamsCellTableRef.value?.setValue(data)],
+    [(type) => type === 'Body', (data) => bodyRef.value?.setValue(data)],
+    [(type) => type === 'Header', (data) => editHeaderCellTableRef.value?.setValue(data)],
+  ];
 
+  //测试接口
   const handleTestInterface = () => {
-    let value = getValue(false);
+    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'];
+    // 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,
+          list: value?.Params || value?.Header,
           requestOriginUrl: props.requestOriginUrl,
-          requestUrl: props.requestUrl,
-          paramsType: props.paramsType,
+          requestParamsBodyType: type,
+          requestTypeAndUrl: props.requestTypeAndUrl,
         })
     );
   };
@@ -111,30 +100,25 @@
   //获取数据
   const getValue = (status) => {
     const type = activeKey.value;
+    status ? emits('activeKey', type) : null;
     const Body = bodyRef.value?.getValue();
-    const Params = editCellTableRef.value?.getValue();
+    const Params = editParamsCellTableRef.value?.getValue();
     const Header = editHeaderCellTableRef.value?.getValue();
-    status ? emits('activeKey', type) : null;
-    return type === 'Params' ? Params : type === 'Body' ? Body : Header;
+    return {
+      Params,
+      Header,
+      Body,
+    };
   };
 
   //设置数据
   const setValue = (data) => {
-    const Objects = JSON.parse(data?.requestParams);
     nextTick(() => {
+      const Objects = JSON.parse(data?.requestParams);
       if (!Objects) return;
-      activeKey.value = Objects?.type;
-      if (activeKey.value === 'Params') {
-        editCellTableRef.value?.setValue(Objects?.Params);
-        testParRequestRef.value?.setValue();
-      } else if (activeKey.value === 'Body') {
-        bodyRef.value?.setValue(Objects?.Body);
-        testBodyRequestRef.value?.setValue();
-      } else if (activeKey.value === 'Header') {
-        editHeaderCellTableRef.value?.setValue(Objects?.Header);
-        testHeaderRequestRef.value?.setValue();
-      } else {
-      }
+      dataForTypeMap[0][1](Objects?.Params);
+      dataForTypeMap[1][1](Objects?.Body);
+      dataForTypeMap[2][1](Objects?.Header);
     });
   };
 
@@ -142,10 +126,10 @@
   const resetValue = () => {
     activeKey.value = 'Params';
     nextTick(() => {
-      editCellTableRef.value?.resetValue();
+      editParamsCellTableRef.value?.resetValue();
       editHeaderCellTableRef.value?.resetValue();
       bodyRef.value?.resetValue();
-      handleChange();
+      handleTabsChange();
     });
   };
 

 <!-- eslint-disable vue/valid-v-model -->
 <template>
   <div class="table-content">
-    <!-- TODO 待优化 -->
+    <!-- TODO 待优化测试表格 -->
     <table align="center">
       <thead>
         <tr>
-          <th></th>
-          <th>内置参数</th>
-          <th>参数名</th>
-          <th>参数值</th>
+          <th v-for="item in editTestCellTableTHeadConfig" :key="item">{{ item }}</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(item, index) in tableTestArray.content" :key="index">
-          <td>
-            {{ index + 1 }}
-          </td>
           <td style="width: 7.5vw">
             <Select
               :disabled="true"
               v-model:value="item.key"
               placeholder="请选择"
-              notFoundContent="请选择"
               :options="selectOptions"
-              allowClear
             />
           </td>
           <td style="width: 6.5vw">
@@ -55,11 +47,14 @@
               :options="attributeOptions"
               allowClear
             />
-            <div v-else-if="item.key === 'fixed_date' || item.key === 'date_range'">
+            <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
               v-else
               v-model:value="item.value"
@@ -72,20 +67,19 @@
           </td>
           <td style="width: 6.5vw">
             <a-input
-              :disabled="item.key !== 'scope'"
+              v-if="item.key === 'scope' || item.key === 'fixed_date'"
               placeholder="请输入"
               v-model:value="item.keyValue"
             />
-          </td>
-          <td style="width: 6vw">
             <a-range-picker
-              v-if="item.key === 'fixed_date' || item.key === 'date_range'"
-              style="width: 6vw"
+              v-else-if="item.key == 'date_range'"
+              style="width: 6.5vw"
               v-model:value="item.dateValue"
               :show-time="{ format: 'HH:mm' }"
               format="YYYY-MM-DD HH:mm"
               :placeholder="['开始', '结束']"
             />
+            <a-input v-else disabled="true" placeholder="请输入" v-model:value="item.keyValue" />
           </td>
         </tr>
       </tbody>
@@ -100,6 +94,8 @@
   import { getDeviceAttributes } from '/@/api/dataBoard';
   import { useApi } from '../../hooks/useApi';
   import { cloneDeep } from 'lodash-es';
+  import { tableItems, selectType } from '../../types';
+  import { editTestCellTableTHeadConfig } from '../../config';
 
   const props = defineProps({
     method: {
@@ -118,31 +114,23 @@
       selectOptions.value = selectOptions.value.filter((f) => f.value !== 'scope');
   });
 
-  const selectOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
+  const selectOptions = ref<selectType[]>([]);
 
-  const valueOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
+  const valueOptions = ref<selectType[]>([]);
 
-  const entityOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
+  const entityOptions = ref<selectType[]>([]);
 
-  const attributeOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
+  const attributeOptions = ref<selectType[]>([]);
 
   const treeData = ref([]);
 
-  type defaultItem = {
-    key: null | string;
-    value: null | string;
-    keyValue: null | string;
-    dateValue: null | string;
-    editDisabled: boolean;
-  };
-
   const tableTestArray = reactive<{
-    content: defaultItem[];
+    content: tableItems[];
   }>({
     content: [
       {
-        key: null,
-        value: null,
+        key: undefined,
+        value: undefined,
         keyValue: null,
         editDisabled: false,
         dateValue: null,
@@ -229,9 +217,6 @@
 </script>
 
 <style scoped lang="less">
-  :deep(.ant-select-selector) {
-    // width: 8vw !important;
-  }
   @table-color: #e5e7eb;
 
   .table-border-color {

@@ -118,10 +118,10 @@
     return testEditCellTableRef.value
       ?.getValue()
       .concat(keyValueList)
-      .filter((it) => it.key !== 'date_range' && it.key !== 'fixed_date')
+      .filter((it) => it.key !== 'date_range')
       .map((it) => {
-        const value = it.key === 'scope' ? it.keyValue : it.value;
-        const key = it.key === 'scope' ? it.value : it.key;
+        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,
@@ -152,7 +152,7 @@
   //TODO 待优化 项目自带第三方请求
   const otherHttpRequest = async (apiType, params = {}, api, joinPrefix = false) => {
     switch (apiType) {
-      case 'get':
+      case 'GET':
         Reflect.deleteProperty(params, 'deviceProfileId');
         Reflect.deleteProperty(params, 'organizationId');
         Reflect.deleteProperty(params, 'entityId');
@@ -167,7 +167,7 @@
             joinPrefix,
           }
         );
-      case 'post':
+      case 'POST':
         return await otherHttp.post(
           { url: api, data: params },
           {
@@ -175,7 +175,7 @@
             joinPrefix,
           }
         );
-      case 'put':
+      case 'PUT':
         return await otherHttp.put(
           { url: api, data: params },
           {
@@ -204,8 +204,8 @@
     await nextTick();
     await nextTick(async () => {
       const getTable = getTestTableKeyValue();
-      const apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestUrl}`;
-      const apiType = props.data?.paramsType.toLowerCase();
+      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') {

@@ -29,9 +29,8 @@ export const columns: BasicColumn[] = [
     dataIndex: 'state',
     width: 80,
     customRender: ({ record }) => {
-      const status = record.state;
-      const color = status == 1 ? 'green' : 'red';
-      const text = status == 1 ? '发布' : '未发布';
+      const color = record.state == 1 ? 'green' : 'red';
+      const text = record.state == 1 ? '发布' : '未发布';
       return h(Tag, { color: color }, () => text);
     },
   },
@@ -43,7 +42,7 @@ export const searchFormSchema: FormSchema[] = [
     field: 'name',
     label: '接口名称',
     component: 'Input',
-    colProps: { span: 8 },
+    colProps: { span: 9 },
     componentProps: {
       maxLength: 36,
       placeholder: '请输入接口名称',
@@ -53,7 +52,7 @@ export const searchFormSchema: FormSchema[] = [
     field: 'state',
     label: '发布状态',
     component: 'Select',
-    colProps: { span: 8 },
+    colProps: { span: 9 },
     componentProps: {
       options: [
         {
@@ -79,7 +78,7 @@ export const schemas: FormSchema[] = [
     required: true,
     component: 'Input',
     componentProps: {
-      maxLength: 64,
+      maxLength: 255,
       placeholder: '请输入接口名称',
     },
   },
@@ -91,7 +90,7 @@ export const schemas: FormSchema[] = [
     colProps: { span: 24 },
     defaultValue: '0',
     componentProps: ({ formActionType }) => {
-      const { setFieldsValue, updateSchema } = formActionType;
+      const { updateSchema, setFieldsValue } = formActionType;
       return {
         api: findDictItemByCode,
         params: {
@@ -102,15 +101,16 @@ export const schemas: FormSchema[] = [
         valueField: 'itemValue',
         getPopupContainer: () => document.body,
         async onChange(e) {
-          setFieldsValue({ requestHttpType: e === '1' ? 'POST' : 'GET' });
-          const res = await findDictItemByCode({
-            dictCode: e === '1' ? 'dataview_select_sql_request' : 'dataview_select_request',
+          setFieldsValue({
+            requestHttpTypeAndUrl: {
+              requestHttpType: undefined,
+              requestUrl: '',
+            },
           });
-          const options = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
           updateSchema({
-            field: 'requestHttpType',
+            field: 'requestHttpTypeAndUrl',
             componentProps: {
-              options,
+              type: e,
             },
           });
         },
@@ -119,13 +119,13 @@ export const schemas: FormSchema[] = [
   },
   {
     field: 'originUrlType',
-    label: '源地址',
+    label: '地址类型',
     component: 'ApiSelect',
     required: true,
     colProps: { span: 24 },
     defaultValue: 'server_url',
     componentProps: {
-      placeholder: '请选择源地址',
+      placeholder: '请选择地址类型',
       api: findDictItemByCode,
       params: {
         dictCode: 'dataview_select_origin_type',
@@ -136,7 +136,7 @@ export const schemas: FormSchema[] = [
   },
   {
     field: 'requestOriginUrl',
-    label: '地址',
+    label: '源地址',
     colProps: { span: 24 },
     required: true,
     component: 'Input',
@@ -147,41 +147,22 @@ export const schemas: FormSchema[] = [
     ifShow: ({ values }) => values['originUrlType'] === 'custom_url',
   },
   {
-    field: 'requestHttpType',
-    label: '请求类型',
-    component: 'ApiSelect',
-    required: true,
-    colProps: { span: 6 },
-    defaultValue: 'GET',
-    componentProps: {
-      placeholder: '请选择请求类型',
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'dataview_select_request',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-    },
-    ifShow: ({ values }) =>
-      values['requestContentType'] === '0' || values['requestContentType'] === '1',
-  },
-  {
-    field: 'requestUrl',
-    label: '',
-    component: 'Input',
+    field: 'requestHttpTypeAndUrl',
+    label: '请求类型&地址',
+    component: 'InputGroup',
     required: true,
-    colProps: { span: 18 },
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入接口地址',
+    colProps: { span: 24 },
+    componentProps: ({ formActionType }) => {
+      const { getFieldsValue } = formActionType;
+      return {
+        type: getFieldsValue().requestContentType,
+      };
     },
-    ifShow: ({ values }) =>
-      values['requestContentType'] === '0' || values['requestContentType'] === '1',
   },
   {
     field: 'requestSQLKey',
     label: '键名',
-    colProps: { span: 12 },
+    colProps: { span: 6 },
     component: 'Input',
     defaultValue: 'sql',
     componentProps: {
@@ -219,3 +200,8 @@ export const schemas: FormSchema[] = [
     ifShow: ({ values }) => values['requestContentType'] === '1',
   },
 ];
+
+//表格表头配置
+export const editCellTableTHeadConfig = ['序号', '内置参数', '参数名', '是否必须', '操作'];
+export const editTestCellTableTHeadConfig = ['内置参数', '参数名', '参数值'];
+export const editTestCellTableTHeaderConfig = ['序号', '参数名', '参数值'];

@@ -4,28 +4,18 @@
       showFooter
       v-bind="$attrs"
       @register="registerDrawer"
-      width="45%"
-      @ok="handleOnSubmit"
+      width="50%"
+      @ok="handleSubmit"
     >
       <BasicForm @register="registerForm">
         <template #selectMethods="{ model }">
           <SimpleRequest
             ref="simpleRequestRef"
-            v-if="model['requestContentType'] === '0'"
+            v-if="model['requestContentType'] === '0' || model['requestContentType'] === '2'"
             @activeKey="handleActiveKey"
-            :paramsType="model['requestHttpType']"
+            :requestTypeAndUrl="model['requestHttpTypeAndUrl']"
             :method="model['requestContentType']"
             :requestOriginUrl="model['requestOriginUrl']"
-            :requestUrl="model['requestUrl']"
-          />
-          <SimpleRequest
-            ref="simpleRequestRef"
-            @activeKey="handleActiveKey"
-            v-else-if="model['requestContentType'] === '2'"
-            :paramsType="model['requestHttpType']"
-            :method="model['requestContentType']"
-            :requestOriginUrl="model['requestOriginUrl']"
-            :requestUrl="model['requestUrl']"
           />
         </template>
         <template #testSql="{ model }">
@@ -53,7 +43,6 @@
     updateDataViewInterface,
   } from '/@/api/bigscreen/center/bigscreenCenter';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { findDictItemByCode } from '/@/api/system/dict';
 
   const emits = defineEmits(['success', 'register']);
 
@@ -76,49 +65,52 @@
   });
 
   const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
-    setDrawerProps({ loading: true });
-    await nextTick();
     await resetFields();
-    await nextTick(() => simpleRequestRef.value?.resetValue());
-    await nextTick(() => testSqlRef.value?.resetValue());
+    await nextTick();
+    updateSchema({
+      field: 'requestHttpTypeAndUrl',
+      componentProps: {
+        type: '0',
+      },
+    });
+    setFieldsValue({
+      requestHttpTypeAndUrl: {
+        requestHttpType: undefined,
+        requestUrl: '',
+      },
+    });
     const title = `${!data.isUpdate ? '新增' : '修改'}公共接口`;
     setDrawerProps({ title });
     isUpdate.value = data.isUpdate;
     !isUpdate.value ? (putId.value = '') : (putId.value = data.record.id);
+    simpleRequestRef.value?.resetValue() && testSqlRef.value?.resetValue();
     if (isUpdate.value) {
       await setFieldsValue({
         ...data.record,
         requestContentType: String(data.record?.requestContentType),
         requestSQLContent: JSON.parse(data.record?.requestParams)?.requestSQLContent?.sql,
-        originUrlType: data.record?.requestOriginUrl.startsWith('localhost')
+        originUrlType: data.record?.requestOriginUrl?.startsWith('localhost')
           ? 'server_url'
           : 'custom_url',
+        requestHttpTypeAndUrl: {
+          requestHttpType: data.record?.requestHttpType,
+          requestUrl: data.record?.requestUrl,
+        },
       });
-      await nextTick(() =>
-        setTimeout(() => {
-          simpleRequestRef.value?.setValue(data.record);
-        }, 200)
-      );
-      const res = await findDictItemByCode({
-        dictCode:
-          data.record?.requestContentType === 1
-            ? 'dataview_select_sql_request'
-            : 'dataview_select_request',
-      });
-      const options = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
+      await nextTick(() => simpleRequestRef.value?.setValue(data.record));
       updateSchema({
-        field: 'requestHttpType',
+        field: 'requestHttpTypeAndUrl',
         componentProps: {
-          options,
+          type: String(data.record?.requestContentType),
         },
       });
+    } else {
     }
-    setDrawerProps({ loading: false });
   });
 
   const handleActiveKey = (v) => (activeKey.value = v);
 
-  const handleOnSubmit = async () => {
+  const handleSubmit = async () => {
     setDrawerProps({ loading: true });
     try {
       const values = await validate();
@@ -133,17 +125,18 @@
           requestSQLContent: {
             sql: values?.requestSQLContent,
           },
-          type: activeKey.value,
-          Params: activeKey.value === 'Params' ? Objects : {},
-          Body: activeKey.value === 'Body' ? Objects : {},
-          Header: activeKey.value === 'Header' ? Objects : {},
+          ...Objects,
         }),
         requestOriginUrl,
+        requestHttpType: values['requestHttpTypeAndUrl']?.requestHttpType,
+        requestUrl: values['requestHttpTypeAndUrl']?.requestUrl,
       };
+      Reflect.deleteProperty(data, 'requestHttpTypeAndUrl');
+      if (values['requestContentType'] === '2') Reflect.deleteProperty(data, 'requestHttpType');
       !putId.value ? await saveDataViewInterface(data) : await updateDataViewInterface(data);
       emits('success');
       closeDrawer();
-      createMessage.success(`${!isUpdate.value ? '新增' : '修改'}成功`);
+      createMessage.success(`${!isUpdate.value ? '新增' : '修改'}公共接口成功`);
     } finally {
       setDrawerProps({ loading: false });
     }

@@ -93,9 +93,8 @@
   import { Popconfirm, Modal } from 'ant-design-vue';
   import { JsonPreview } from '/@/components/CodeEditor';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { cloneDeep } from 'lodash-es';
 
-  const [registerTable, { reload }] = useTable({
+  const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
     api: getDataViewInterfacePage,
     columns,
     showIndexColumn: false,
@@ -129,27 +128,22 @@
   const handleSuccess = () => {
     reload();
     setStatusIsTrue();
+    clearSelectedRowKeys();
   };
 
   const setStatusIsFalse = () => {
-    hasBatchDelete.value = false;
-    hasBatchPublish.value = false;
+    (hasBatchDelete.value = false), (hasBatchPublish.value = false);
   };
 
   const setStatusIsTrue = () => {
-    hasBatchDelete.value = true;
-    hasBatchPublish.value = true;
+    (hasBatchDelete.value = true), (hasBatchPublish.value = true);
   };
 
   const rowSelection = {
     onChange: (_, selectedRows: any[]) => {
-      const list = cloneDeep(selectedRows);
-      batchDeleteIds.value = list.filter((it) => it.state === 0).map((it) => it.id) as never as any;
-      if (batchDeleteIds.value.length > 0) {
-        setStatusIsFalse();
-      } else {
-        setStatusIsTrue();
-      }
+      batchDeleteIds.value = selectedRows.map((it) => it.id) as never as any;
+      if (batchDeleteIds.value.length > 0) setStatusIsFalse();
+      else setStatusIsTrue();
     },
     getCheckboxProps: (record) => ({
       disabled: record.state === 1,

+import type { SelectValue } from 'ant-design-vue/lib/select';
+
+/**
+ * select选择框TS类型
+ */
+export type selectType = { label: string; value: string; disabled?: boolean };
+
+/**
+ * 表格数据TS类型
+ */
+export type tableItems = {
+  key: SelectValue | undefined;
+  value: string | SelectValue | undefined;
+  editDisabled?: boolean;
+  required?: boolean;
+  date1?: string;
+  date2?: string;
+  keyValue?: null | string;
+  dateValue?: null | string;
+};