wip:公共接口管理开发中

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

+<template>
+  <div class="table-content">
+    <table align="center" style="width: 100%" cellspacing="0">
+      <thead>
+        <tr>
+          <th></th>
+          <th>Key</th>
+          <th>Value</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in tableArray.content" :key="index">
+          <td>
+            {{ index + 1 }}
+          </td>
+          <td>
+            <Select
+              v-model:value="item.key"
+              placeholder="请选择"
+              notFoundContent="请选择"
+              style="width: 14rem"
+              :options="selectOptions"
+              @change="handleChange"
+              allowClear
+            />
+          </td>
+          <td>
+            <a-input
+              :disabled="item.editDisabled"
+              placeholder="请输入"
+              v-model:value="item.value"
+              style="width: 14rem"
+            />
+          </td>
+          <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)">
+                <template #icon> <MinusOutlined /></template>
+              </Button>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script lang="ts" setup name="editCellTable">
+  import { reactive, ref, onMounted } from 'vue';
+  import { Select, Button } from 'ant-design-vue';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
+  import { buildUUID } from '/@/utils/uuid';
+
+  const props = defineProps({
+    method: {
+      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 selectOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
+
+  type defaultItem = {
+    id: string;
+    key: null | string;
+    value: string;
+    editDisabled: boolean;
+  };
+
+  const tableArray = reactive<{
+    content: defaultItem[];
+  }>({
+    content: [
+      {
+        id: buildUUID(),
+        key: null,
+        value: '',
+        editDisabled: false,
+      },
+    ],
+  });
+
+  // 新增
+  const add = (_, index: number) => {
+    tableArray.content.splice(index + 1, 0, {
+      id: buildUUID(),
+      key: null,
+      value: '',
+      editDisabled: false,
+    });
+  };
+
+  // 减少
+  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.editDisabled = false;
+        } else {
+          element.editDisabled = true;
+        }
+        if (element.key === ele.value && element.key !== 'scope') {
+          ele.disabled = true;
+        }
+      });
+    });
+  };
+
+  //获取数据
+  const getValue = () => {
+    const params = {};
+    tableArray.content?.map((item: any) => {
+      if (item?.key !== 'scope') params[item?.key] = item.value;
+      params[`${(item?.key + item?.id).slice(0, 10)}`] = item.value;
+    });
+    return params;
+  };
+
+  //设置数据
+  const setValue = (data) => (tableArray.content = data);
+
+  defineExpose({
+    getValue,
+    setValue,
+  });
+</script>
+
+<style scoped lang="less">
+  @table-color: #e5e7eb;
+
+  .table-border-color {
+    border: 1px solid #e5e7eb;
+    text-align: center;
+  }
+
+  .table-content {
+    margin-top: 20px;
+    margin-right: 20px;
+
+    table {
+      &:extend(.table-border-color);
+    }
+
+    table td {
+      padding: 5px;
+      white-space: nowrap;
+      &:extend(.table-border-color);
+    }
+
+    table th {
+      padding: 5px;
+      &:extend(.table-border-color);
+    }
+  }
+</style>

+<template>
+  <div>
+    <a-radio-group v-model:value="getRequestBody.content.radioValue" @change="handleChange">
+      <a-radio v-for="item in RequestBodyTypeEnum" :key="item" :value="item">{{ item }}</a-radio>
+    </a-radio-group>
+    <div class="mt-3">
+      <a-textarea
+        v-if="getRequestBody.content.radioValue === 'none'"
+        disabled
+        placeholder="该接口没有 Body 体"
+        :rows="2"
+      />
+      <EditCellTable
+        v-if="
+          getRequestBody.content.radioValue === 'form-data' ||
+          getRequestBody.content.radioValue === 'x-www-form-urlencoded'
+        "
+      />
+      <a-textarea
+        v-model:value="getRequestBody.content.json"
+        v-if="getRequestBody.content.radioValue === 'json'"
+        placeholder="请输入json"
+        :rows="6"
+      />
+      <a-textarea
+        v-model:value="getRequestBody.content.xml"
+        v-if="getRequestBody.content.radioValue === 'xml'"
+        placeholder="请输入xml"
+        :rows="6"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup name="body">
+  import { reactive } from 'vue';
+  import { RequestBodyTypeEnum } from '../../enum/index';
+  import { EditCellTable } from '../EditCellTable/index';
+
+  defineProps({
+    method: {
+      type: String,
+    },
+  });
+
+  const getRequestBody = reactive({
+    content: { json: '', xml: '', radioValue: 'none' },
+  });
+
+  const handleChange = ({ target }) => {
+    const { value } = target;
+    getRequestBody.content.radioValue = value;
+  };
+
+  //获取数据
+  const getValue = () => {
+    return getRequestBody.content;
+  };
+
+  //设置数据
+  const setValue = (data) => {
+    getRequestBody.content = data;
+  };
+  defineExpose({
+    getValue,
+    setValue,
+  });
+</script>

+import SimpleRequest from './index.vue';
+
+export { SimpleRequest };

+<template>
+  <div>
+    <div>
+      <Tabs type="card" v-model:activeKey="activeKey">
+        <TabPane forceRender v-for="item in RequestParamsTypeEnum" :key="item" :tab="item" />
+      </Tabs>
+    </div>
+    <div>
+      <div v-if="activeKey === RequestParamsTypeEnum.PARAMS">
+        <EditCellTable ref="editCellTableRef" :method="method" />
+        <TestRequest :method="method" />
+      </div>
+      <div v-if="activeKey === RequestParamsTypeEnum.BODY">
+        <Body :method="method" />
+        <TestRequest :method="method" />
+      </div>
+      <div v-if="activeKey === RequestParamsTypeEnum.HEADER">
+        <EditCellTable ref="editCellTableRef" :method="method" />
+        <TestRequest :method="method" />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup name="simpleRequest">
+  import { ref } from 'vue';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import { RequestParamsTypeEnum } from '../../enum';
+  import { EditCellTable } from '../EditCellTable';
+  import Body from './body.vue';
+  import { TestRequest } from '../TestRequest/index';
+
+  const props = defineProps({
+    method: {
+      type: String,
+    },
+  });
+
+  if (props.method === '2') {
+    Reflect.deleteProperty(RequestParamsTypeEnum, 'BODY');
+    Reflect.deleteProperty(RequestParamsTypeEnum, 'HEADER');
+  } else {
+    Reflect.set(RequestParamsTypeEnum, 'BODY', 'Body');
+    Reflect.set(RequestParamsTypeEnum, 'HEADER', 'Header');
+  }
+
+  const activeKey = ref('Params');
+
+  const editCellTableRef = ref<InstanceType<typeof EditCellTable>>();
+
+  //获取数据
+  const getValue = () => {
+    return editCellTableRef?.value?.getValue();
+  };
+
+  //设置数据
+  const setValue = (data) => {
+    editCellTableRef?.value?.setValue(data);
+  };
+
+  defineExpose({
+    getValue,
+    setValue,
+  });
+</script>

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

+<template>
+  <div class="table-content">
+    <table align="center" style="width: 100%" cellspacing="0">
+      <thead>
+        <tr>
+          <th></th>
+          <th>Key</th>
+          <th>Value</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in tableArray.content" :key="index">
+          <td>
+            {{ index + 1 }}
+          </td>
+          <td>
+            <Select
+              v-model:value="item.key"
+              placeholder="请选择"
+              notFoundContent="请选择"
+              style="width: 14rem"
+              :options="selectOptions"
+              @change="handleChange(item)"
+              allowClear
+            />
+          </td>
+          <td>
+            <a-input
+              v-if="item.key === 'scope'"
+              placeholder="请输入"
+              v-model:value="item.value"
+              style="width: 14rem"
+            />
+            <a-tree-select
+              v-else-if="item.key === 'organizationId'"
+              v-model:value="item.value"
+              show-search
+              style="width: 14rem"
+              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+              placeholder="请选择组织"
+              allow-clear
+              tree-default-expand-all
+              :tree-data="treeData"
+              @change="handleOrgnationChange(item)"
+            />
+            <Select
+              v-else-if="item.key === 'entityId'"
+              v-model:value="item.value"
+              placeholder="请选择"
+              notFoundContent="请选择"
+              style="width: 14rem"
+              :options="entityOptions"
+              allowClear
+            />
+            <Select
+              v-else-if="item.key === 'keys'"
+              v-model:value="item.value"
+              placeholder="请选择"
+              notFoundContent="请选择"
+              style="width: 14rem"
+              :options="attributeOptions"
+              allowClear
+            />
+            <Select
+              v-else
+              v-model:value="item.value"
+              placeholder="请选择"
+              notFoundContent="请选择"
+              style="width: 14rem"
+              :options="valueOptions"
+              allowClear
+              @change="handleValueChange(item)"
+            />
+          </td>
+          <td>
+            <div>
+              <Button type="dashed" @click="add(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 } from 'vue';
+  import { Select, Button } from 'ant-design-vue';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
+  import { getAllDeviceByOrg } from '/@/api/dataBoard';
+  import { getDeviceAttributes } from '/@/api/dataBoard';
+  import { useApi } from '../../hooks/useApi';
+  import { buildUUID } from '/@/utils/uuid';
+
+  const props = defineProps({
+    method: {
+      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 selectOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
+
+  const valueOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
+
+  const entityOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
+
+  const attributeOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
+
+  const treeData = ref([]);
+
+  type defaultItem = {
+    id: string;
+    key: null | string;
+    value: null | string;
+    editDisabled: boolean;
+  };
+
+  const tableArray = reactive<{
+    content: defaultItem[];
+  }>({
+    content: [
+      {
+        id: buildUUID(),
+        key: null,
+        value: null,
+        editDisabled: false,
+      },
+    ],
+  });
+
+  // 新增
+  const add = (index: number) => {
+    tableArray.content.splice(index + 1, 0, {
+      id: buildUUID(),
+      key: null,
+      value: null,
+      editDisabled: false,
+    });
+  };
+
+  // 减少
+  const remove = (item, index: number) => {
+    if (item.key === 'organizationId') {
+      entityOptions.value.length = 0;
+      tableArray.content.forEach((f) => {
+        if (f.key === 'entityId') {
+          f.value = null;
+        }
+      });
+    }
+    if (item.key === 'deviceProfileId') {
+      attributeOptions.value.length = 0;
+      tableArray.content.forEach((f) => {
+        if (f.key === 'keys') {
+          f.value = null;
+        }
+      });
+    }
+    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 = async (e) => {
+    selectOptions.value.forEach((ele) => {
+      ele.disabled = false;
+      tableArray.content.forEach((element) => {
+        if (element.key === e.key && element.key !== 'scope') {
+          element.value = null;
+        }
+        if (element.key === ele.value && element.key !== 'scope') {
+          ele.disabled = true;
+        }
+      });
+    });
+    //获取对应项
+    if (e.key === 'deviceProfileId') {
+      const { options } = await useApi(e.key);
+      valueOptions.value = options;
+    } else if (e.key === 'organizationId') {
+      const { options } = await useApi(e.key);
+      treeData.value = options as any;
+    } else if (e.key === 'entityId') {
+      const getOrganizationIds = tableArray.content
+        .map((f) => {
+          if (f.key === 'organizationId') {
+            return f.value;
+          }
+        })
+        .filter(Boolean);
+      if (getOrganizationIds.length === 0) return;
+      getEntityOptions(getOrganizationIds?.at(-1));
+    } else if (e.key === 'keys') {
+      const getIds = tableArray.content
+        .map((f) => {
+          if (f.key === 'deviceProfileId') {
+            return f.value;
+          }
+        })
+        .filter(Boolean);
+      if (getIds.length === 0) return;
+      getAttributeOptions({ deviceProfileId: getIds?.at(-1) });
+    } else if (e.key === 'date') {
+      valueOptions.value = [];
+    }
+  };
+
+  const handleOrgnationChange = async (e) => {
+    tableArray.content.forEach((f) => {
+      if (f.key === 'entityId') {
+        f.value = null;
+      }
+    });
+    getEntityOptions(e.value);
+  };
+
+  const getEntityOptions = async (organizationId: string, deviceProfileId?: string) => {
+    const res = await getAllDeviceByOrg(organizationId, deviceProfileId);
+    entityOptions.value = res.map((item) => ({
+      label: item.name,
+      value: item.tbDeviceId,
+    }));
+  };
+
+  const getAttributeOptions = async (params) => {
+    const res = await getDeviceAttributes(params);
+    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) => {
+    if (e.key === 'deviceProfileId') {
+      tableArray.content.forEach((f) => {
+        if (f.key === 'keys') {
+          f.value = null;
+        }
+      });
+      getAttributeOptions({ deviceProfileId: e.value });
+    }
+  };
+
+  //获取数据
+  const getValue = () => {
+    const params = {};
+    tableArray.content?.map((item: any) => {
+      if (item?.key !== 'scope') params[item?.key] = item.value;
+      params[`${(item?.key + item?.id).slice(0, 10)}`] = item.value;
+    });
+    return params;
+  };
+  defineExpose({
+    getValue,
+  });
+</script>
+
+<style scoped lang="less">
+  @table-color: #e5e7eb;
+
+  .table-border-color {
+    border: 1px solid #e5e7eb;
+    text-align: center;
+  }
+
+  .table-content {
+    table {
+      &: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 TestRequest from './index.vue';
+
+export { TestRequest };

+<template>
+  <div class="mt-8">
+    <div>
+      <Button @click="showTestEditCell = true" 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 v-model:value="testResult" placeholder="测试结果为：" :rows="6" />
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup name="testSql">
+  import { ref } from 'vue';
+  import { Button } from 'ant-design-vue';
+  import { TestEditCellTable } from '../TestEditCellTable/index';
+
+  defineProps({
+    method: {
+      type: String,
+    },
+  });
+
+  const showTestEditCell = ref(false);
+
+  const testEditCellTableRef = ref<InstanceType<typeof TestEditCellTable>>();
+
+  const testResult = ref('');
+
+  const handleExcute = async () => {
+    const params = testEditCellTableRef.value?.getValue();
+    testResult.value = JSON.stringify(params);
+  };
+</script>
+
+<style scoped lang="less"></style>

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

+<template>
+  <div class="mt-8">
+    <div>
+      <Button @click="handleExcute" type="primary"> 测试一下 </Button>
+    </div>
+  </div>
+  <div 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 v-model:value="testResult" placeholder="测试结果为：" :rows="6" />
+        </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 handleExcute = () => {
+    testResult.value = '测试结果为：1234';
+  };
+</script>
+
+<style scoped lang="less"></style>

@@ -7,13 +7,16 @@ import { findDictItemByCode } from '/@/api/system/dict';
 export const columns: BasicColumn[] = [
   {
     title: '接口名称',
-    dataIndex: 'name',
+    dataIndex: 'interfaceName',
     width: 80,
   },
   {
     title: '请求方式',
-    dataIndex: 'method',
+    dataIndex: 'requestContentType',
     width: 120,
+    format(text) {
+      return text === '0' ? '普通请求' : text === '1' ? 'SQL请求' : 'websocket请求';
+    },
   },
   {
     title: '接口内容',
@@ -36,24 +39,29 @@ export const columns: BasicColumn[] = [
 //模拟数据
 export const list = [
   {
-    name: '传感器趋势图',
-    method: 'get',
+    interfaceName: '传感器趋势图',
+    requestContentType: '0',
     content: '/api/sensor',
     status: 0,
   },
   {
-    name: '报警器趋势图',
-    method: 'get',
-    content: '/api/alarm',
+    interfaceName: '2co趋势图',
+    requestContentType: '2',
+    content: '/api/2co',
+    status: 1,
+  },
+  {
+    interfaceName: 'temp趋势图',
+    requestContentType: '1',
+    content: '/api/temp',
     status: 1,
   },
 ];
 
 //表单配置
-// 新增编辑配置
 export const schemas: FormSchema[] = [
   {
-    field: 'name',
+    field: 'interfaceName',
     label: '接口名称',
     colProps: { span: 24 },
     required: true,
@@ -64,30 +72,120 @@ export const schemas: FormSchema[] = [
     },
   },
   {
-    field: 'address',
-    label: '接口地址',
+    field: 'requestContentType',
+    label: '请求方式',
+    component: 'ApiSelect',
+    required: true,
+    colProps: { span: 24 },
+    defaultValue: '0',
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue, updateSchema } = formActionType;
+      return {
+        api: findDictItemByCode,
+        params: {
+          dictCode: 'dataview_select_methods',
+        },
+        placeholder: '请选择请求方式',
+        labelField: 'itemText',
+        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',
+          });
+          const options = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
+          updateSchema({
+            field: 'requestHttpType',
+            componentProps: {
+              options,
+            },
+          });
+        },
+      };
+    },
+  },
+  {
+    field: 'requestOriginUrl',
+    label: '源地址',
     colProps: { span: 24 },
     required: true,
     component: 'Input',
     componentProps: {
       maxLength: 64,
-      placeholder: '请输入接口地址',
+      placeholder: '请输入源地址',
     },
   },
   {
-    field: 'method',
-    label: '选择方式',
+    field: 'requestHttpType',
+    label: '请求类型',
     component: 'ApiSelect',
     required: true,
-    colProps: { span: 24 },
+    colProps: { span: 6 },
+    defaultValue: 'GET',
     componentProps: {
-      placeholder: '请选择选择方式',
+      placeholder: '请选择请求类型',
       api: findDictItemByCode,
       params: {
-        dictCode: 'dataview_select_methods',
+        dictCode: 'dataview_select_request',
       },
       labelField: 'itemText',
       valueField: 'itemValue',
     },
+    ifShow: ({ values }) =>
+      values['requestContentType'] === '0' || values['requestContentType'] === '1',
+  },
+  {
+    field: 'requestUrl',
+    label: '',
+    component: 'Input',
+    required: true,
+    colProps: { span: 18 },
+    componentProps: {
+      maxLength: 64,
+      placeholder: '请输入接口地址',
+    },
+    ifShow: ({ values }) =>
+      values['requestContentType'] === '0' || values['requestContentType'] === '1',
+  },
+  {
+    field: 'sqlKey',
+    label: '键名',
+    colProps: { span: 12 },
+    component: 'Input',
+    defaultValue: 'sql',
+    componentProps: {
+      disabled: true,
+    },
+    ifShow: ({ values }) => values['requestContentType'] === '1',
+  },
+  {
+    field: 'sqlValue',
+    label: '键值',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    defaultValue: 'select * from  where',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入键值',
+      rows: 6,
+    },
+    ifShow: ({ values }) => values['requestContentType'] === '1',
+  },
+  {
+    field: 'slot',
+    label: '参数设置',
+    component: 'Input',
+    slot: 'selectMethods',
+    colProps: { span: 24 },
+    ifShow: ({ values }) => values['requestContentType'] !== '1',
+  },
+  {
+    field: 'testSlot',
+    label: '测试',
+    component: 'Input',
+    slot: 'testSql',
+    colProps: { span: 24 },
+    ifShow: ({ values }) => values['requestContentType'] === '1',
   },
 ];

+/**
+ * @description: 请求参数类型
+ */
+export enum RequestParamsTypeEnum {
+  PARAMS = 'Params',
+  BODY = 'Body',
+  HEADER = 'Header',
+}
+
+/**
+ * @description: 请求体类型
+ */
+export enum RequestBodyTypeEnum {
+  NONE = 'none',
+  FORMDATA = 'form-data',
+  XWWW = 'x-www-form-urlencoded',
+  JSON = 'json',
+  XML = 'xml',
+}

@@ -4,17 +4,41 @@
       showFooter
       v-bind="$attrs"
       @register="registerDrawer"
-      width="50%"
+      width="45%"
       @ok="handleOnSubmit"
     >
-      <BasicForm @register="registerForm" />
+      <BasicForm @register="registerForm">
+        <template #selectMethods="{ model }">
+          <SimpleRequest
+            ref="simpleRequestRef"
+            v-if="model['requestContentType'] === '0'"
+            :method="model['requestContentType']"
+          />
+          <SimpleRequest
+            ref="simpleRequestRef"
+            v-if="model['requestContentType'] === '2'"
+            :method="model['requestContentType']"
+          />
+        </template>
+        <template #testSql="{ model }">
+          <TestSql
+            v-if="model['requestContentType'] === '1'"
+            :method="model['requestContentType']"
+          />
+        </template>
+      </BasicForm>
     </BasicDrawer>
   </div>
 </template>
 <script lang="ts" setup name="publicApi">
+  import { ref } from 'vue';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { BasicForm, useForm } from '/@/components/Form';
   import { schemas } from './config';
+  import { SimpleRequest } from './components/SimpleRequest';
+  import { TestSql } from './components/TestSql/index';
+
+  const simpleRequestRef = ref<InstanceType<typeof SimpleRequest>>();
 
   const [registerForm, { resetFields, validate, setFieldsValue }] = useForm({
     labelWidth: 120,
@@ -32,6 +56,13 @@
   const handleOnSubmit = async () => {
     const values = await validate();
     if (!values) return;
-    console.log('Get values', values);
+    const params = simpleRequestRef?.value?.getValue();
+    const data = {
+      ...values,
+      requestParams: {
+        params,
+      },
+    };
+    console.log('Get form values', data);
   };
 </script>

+import { ref } from 'vue';
+import { deviceProfile } from '/@/api/device/deviceManager';
+import { getOrganizationList } from '/@/api/system/system';
+// import { copyTransFun } from '/@/utils/fnUtils';
+// import { getAllDeviceByOrg } from '/@/api/dataBoard';
+// import { getDeviceAttributes } from '/@/api/dataBoard';
+import { copyTransFun } from '/@/utils/fnUtils';
+
+export const useApi = async (key) => {
+  const options = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
+  switch (key) {
+    case 'deviceProfileId':
+      const res = await deviceProfile();
+      options.value = res?.map((m) => ({ label: m.name, value: m.id }));
+      break;
+    case 'organizationId':
+      const data = await getOrganizationList();
+      copyTransFun(data as never as any);
+      options.value = data as any;
+  }
+
+  return { options: options.value };
+};

@@ -8,6 +8,16 @@
         <TableAction
           :actions="[
             {
+              label: '发布',
+              icon: 'clarity:note-edit-line',
+              onClick: handleCreateOrEdit.bind(null, record),
+            },
+            {
+              label: '取消发布',
+              icon: 'clarity:note-edit-line',
+              onClick: handleCreateOrEdit.bind(null, record),
+            },
+            {
               label: '修改',
               icon: 'clarity:note-edit-line',
               onClick: handleCreateOrEdit.bind(null, record),