Merge branch 'local_dev_ft' into 'main_dev'

feat:新增公共接口管理（先测试）

See merge request yunteng/thingskit-front!513

@@ -3,17 +3,20 @@ import type {
   queryPageParams,
   BigScreenCenterParams,
   ConfigurationCenterInfo,
-  BigScreenCenterItemsModal,
+  BigScreenCenterItemsModel,
+  BigScreenInterfaceParams,
 } from './model/bigscreenCenterModel';
 import { getPageData } from '../../base';
 import { FileUploadResponse } from '../../oem/model';
 enum API {
   basicUrl = '/data_view',
   UPLOAD = '/oss/upload',
+  //大屏公共接口
+  DATA_VIEW_INTERFACE = '/data_view_interface',
 }
 
 export const getPage = (params: queryPageParams) => {
-  return getPageData<BigScreenCenterItemsModal>(params, API.basicUrl);
+  return getPageData<BigScreenCenterItemsModel>(params, API.basicUrl);
 };
 
 export const saveConfigurationCenter = (params: BigScreenCenterParams) => {
@@ -46,3 +49,58 @@ export const saveOrUpdateBigScreenCenter = (params: ConfigurationCenterInfo, isU
 export const uploadThumbnail = (file: FormData) => {
   return defHttp.post<FileUploadResponse>({ url: API.UPLOAD, params: file });
 };
+
+export const bigScreenPublish = (id) => {
+  return defHttp.get({
+    url: API.basicUrl + '/publish/' + id,
+  });
+};
+
+export const bigScreenCancelPublish = (id) => {
+  return defHttp.get({
+    url: API.basicUrl + '/cancel_publish/' + id,
+  });
+};
+
+/**
+ * 大屏公共接口
+ */
+
+export const getDataViewInterfacePage = (params: queryPageParams) => {
+  return getPageData<BigScreenCenterItemsModel>(params, API.DATA_VIEW_INTERFACE);
+};
+
+export const saveDataViewInterface = (params: BigScreenInterfaceParams) => {
+  return defHttp.post({
+    url: API.DATA_VIEW_INTERFACE,
+    data: params,
+  });
+};
+
+export const updateDataViewInterface = (params: BigScreenInterfaceParams) => {
+  return defHttp.put({
+    url: API.DATA_VIEW_INTERFACE,
+    data: params,
+  });
+};
+
+export const deleteBigViewInterface = (ids: string[]) => {
+  return defHttp.delete({
+    url: API.DATA_VIEW_INTERFACE,
+    data: {
+      ids: ids,
+    },
+  });
+};
+
+export const getPublish = (id) => {
+  return defHttp.get({
+    url: API.DATA_VIEW_INTERFACE + '/publish/' + id,
+  });
+};
+
+export const getCancelPublish = (id) => {
+  return defHttp.get({
+    url: API.DATA_VIEW_INTERFACE + '/cancel_publish/' + id,
+  });
+};

@@ -25,3 +25,32 @@ export interface BigScreenCenterParams {
   defaultContent?: string;
 }
 export type ConfigurationCenterInfo = BigScreenCenterParams;
+
+/**
+ * 大屏公共接口
+ */
+export interface BigScreenInterfaceParams {
+  createTime: string;
+  creator: string;
+  defaultConfig: string;
+  description: string;
+  enabled: boolean;
+  icon: string;
+  id: string;
+  interfaceName: string;
+  name: string;
+  remark: string;
+  requestContentType: 0;
+  requestHttpType: string;
+  requestOriginUrl: string;
+  requestParams: string;
+  requestUrl: string;
+  roleIds: [string];
+  state: number;
+  tenantExpireTime: string;
+  tenantId: string;
+  tenantProfileId: string;
+  tenantStatus: string;
+  updateTime: string;
+  updater: string;
+}

-<script lang="ts" setup>
-  import { Dropdown, Menu, Popconfirm } from 'ant-design-vue';
-  import { computed, useSlots } from 'vue';
-  import Icon from '../Icon';
-  import { usePermission } from '/@/hooks/web/usePermission';
-
-  export interface AuthDropDownProps {
-    dropMenuList: AuthDropMenuList[];
-    trigger?: ('contextmenu' | 'click' | 'hover')[];
-  }
-
-  export interface AuthDropMenuList {
-    icon?: string;
-    event: string | number;
-    text: string;
-    disabled?: boolean;
-    divider?: boolean;
-    auth?: string;
-    onClick?: Fn;
-    popconfirm?: {
-      cancelText?: string;
-      okText?: string;
-      okType?: string;
-      title?: string;
-      icon?: string;
-      disabled?: boolean;
-      onCancel?: Fn;
-      onConfirm?: Fn;
-      onVisibleChange?: Fn;
-    };
-  }
-
-  const props = defineProps<AuthDropDownProps>();
-
-  const slot = useSlots();
-
-  const { hasPermission } = usePermission();
-
-  const getMenuList = computed(() => {
-    const { dropMenuList } = props;
-    return dropMenuList.filter((menu) => (menu.auth ? hasPermission(menu.auth) : true));
-  });
-
-  const hasDefaultSlot = computed(() => {
-    return !!slot.default;
-  });
-</script>
-
-<template>
-  <Dropdown :trigger="$props.trigger">
-    <template #overlay>
-      <Menu v-if="getMenuList.length">
-        <template v-for="item in getMenuList" :key="item.event">
-          <Menu.Divider v-if="item.divider" />
-          <Menu.Item v-if="!item.popconfirm" @click="item.onClick">
-            <span class="flex justify-center items-center">
-              <Icon :icon="item.icon" />
-              <span class="ml-2">{{ item.text }}</span>
-            </span>
-          </Menu.Item>
-          <Menu.Item v-if="item.popconfirm">
-            <Popconfirm v-bind="item.popconfirm">
-              <template v-if="item.popconfirm.icon" #icon>
-                <Icon :icon="item.popconfirm.icon" />
-              </template>
-              <span class="flex justify-center items-center">
-                <Icon :icon="item.icon" />
-                <span class="ml-2">{{ item.text }}</span>
-              </span>
-            </Popconfirm>
-          </Menu.Item>
-        </template>
-      </Menu>
-    </template>
-    <Icon
-      v-if="!hasDefaultSlot"
-      class="items-center justify-center"
-      icon="ant-design:ellipsis-outlined"
-      :class="!getMenuList.length ? '!text-gray-200 !cursor-not-allowed' : ''"
-    />
-    <slot name="default"></slot>
-  </Dropdown>
-</template>
+<script lang="ts" setup>
+  import { Dropdown, Menu, Popconfirm } from 'ant-design-vue';
+  import { computed, useSlots } from 'vue';
+  import Icon from '../Icon';
+  import { usePermission } from '/@/hooks/web/usePermission';
+
+  export interface AuthDropDownProps {
+    dropMenuList: AuthDropMenuList[];
+    trigger?: ('contextmenu' | 'click' | 'hover')[];
+  }
+
+  export interface AuthDropMenuList {
+    icon?: string;
+    event: string | number;
+    text: string;
+    disabled?: boolean;
+    divider?: boolean;
+    auth?: string;
+    onClick?: Fn;
+    popconfirm?: {
+      cancelText?: string;
+      okText?: string;
+      okType?: string;
+      title?: string;
+      icon?: string;
+      disabled?: boolean;
+      onCancel?: Fn;
+      onConfirm?: Fn;
+      onVisibleChange?: Fn;
+    };
+  }
+
+  const props = defineProps<AuthDropDownProps>();
+
+  const slot = useSlots();
+
+  const { hasPermission } = usePermission();
+
+  const getMenuList = computed(() => {
+    const { dropMenuList } = props;
+    return dropMenuList.filter((menu) => (menu.auth ? hasPermission(menu.auth) : true));
+  });
+
+  const hasDefaultSlot = computed(() => {
+    return !!slot.default;
+  });
+</script>
+
+<template>
+  <Dropdown :trigger="$props.trigger">
+    <template #overlay>
+      <Menu v-if="getMenuList.length">
+        <template v-for="item in getMenuList" :key="item.event">
+          <Menu.Divider v-if="item.divider" />
+          <Menu.Item :disabled="item.disabled" v-if="!item.popconfirm" @click="item.onClick">
+            <span class="flex justify-center items-center">
+              <Icon :icon="item.icon" />
+              <span class="ml-2">{{ item.text }}</span>
+            </span>
+          </Menu.Item>
+          <Menu.Item :disabled="item.disabled" v-if="item.popconfirm">
+            <Popconfirm v-bind="item.popconfirm">
+              <template v-if="item.popconfirm.icon" #icon>
+                <Icon :icon="item.popconfirm.icon" />
+              </template>
+              <span class="flex justify-center items-center">
+                <Icon :icon="item.icon" />
+                <span class="ml-2">{{ item.text }}</span>
+              </span>
+            </Popconfirm>
+          </Menu.Item>
+        </template>
+      </Menu>
+    </template>
+    <Icon
+      v-if="!hasDefaultSlot"
+      class="items-center justify-center"
+      icon="ant-design:ellipsis-outlined"
+      :class="!getMenuList.length ? '!text-gray-200 !cursor-not-allowed' : ''"
+    />
+    <slot name="default"></slot>
+  </Dropdown>
+</template>

@@ -3,7 +3,12 @@
   import { ReloadOutlined } from '@ant-design/icons-vue';
   import { onMounted, reactive, ref, unref } from 'vue';
   import { OrganizationIdTree, useResetOrganizationTree } from '../common/organizationIdTree';
-  import { deleteBigScreenenter, getPage } from '/@/api/bigscreen/center/bigscreenCenter';
+  import {
+    bigScreenCancelPublish,
+    bigScreenPublish,
+    deleteBigScreenenter,
+    getPage,
+  } from '/@/api/bigscreen/center/bigscreenCenter';
   import { BigScreenCenterItemsModel } from '/@/api/bigscreen/center/model/bigscreenCenterModel';
   import { PageWrapper } from '/@/components/Page';
   import { BasicForm, useForm } from '/@/components/Form';
@@ -18,6 +23,7 @@
   import { useGlobSetting } from '/@/hooks/setting';
   import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
   import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
+  import { PublicApiDrawer } from './publicApi/index';
 
   const listColumn = ref(5);
 
@@ -88,6 +94,8 @@
 
   const [registerDrawer, { openDrawer }] = useDrawer();
 
+  const [registerPublicDrawer, { openDrawer: openPublicApiDrawer }] = useDrawer();
+
   const handleCreateOrUpdate = (record?: BigScreenCenterItemsModel) => {
     if (record) {
       openDrawer(true, {
@@ -101,6 +109,8 @@
     }
   };
 
+  const handleCreateOrUpdatePublicApi = () => openPublicApiDrawer(true);
+
   const { largeDesignerPrefix } = useGlobSetting();
 
   const handlePreview = (record: BigScreenCenterItemsModel) => {
@@ -143,6 +153,19 @@
       (listContainerEl.style.overflowY = 'auto') &&
       (listContainerEl.style.overflowX = 'hidden');
   });
+
+  const getPublicApiListData = () => {};
+
+  const handlePublish = async ({ id }) => {
+    await bigScreenPublish(id);
+    createMessage.success('发布成功');
+    getListData();
+  };
+  const handleCancelPublish = async ({ id }) => {
+    await bigScreenCancelPublish(id);
+    createMessage.success('取消发布成功');
+    getListData();
+  };
 </script>
 
 <template>
@@ -166,6 +189,9 @@
             <Authority :value="ConfigurationPermission.CREATE">
               <Button type="primary" @click="handleCreateOrUpdate()">新增大屏</Button>
             </Authority>
+            <Authority :value="ConfigurationPermission.CREATE">
+              <Button type="primary" @click="handleCreateOrUpdatePublicApi()">公共接口管理</Button>
+            </Authority>
             <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
             <Tooltip title="刷新">
               <Button type="primary" @click="getListData">
@@ -196,6 +222,11 @@
                           >所属组织：{{ item.organizationDTO.name }}</span
                         >
                       </div>
+                      <div>
+                        <span class="masker-text-state"
+                          >发布状态：{{ item.state === 1 ? '已发布' : '未发布' }}</span
+                        >
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -218,16 +249,33 @@
                 <AuthDropDown
                   :dropMenuList="[
                     {
+                      text: '发布',
+                      auth: ConfigurationPermission.UPDATE,
+                      icon: 'ant-design:node-expand-outlined',
+                      event: '',
+                      onClick: handlePublish.bind(null, item),
+                      disabled: item.state === 0 ? false : true,
+                    },
+                    {
+                      text: '取消发布',
+                      icon: 'ant-design:node-collapse-outlined',
+                      event: '',
+                      onClick: handleCancelPublish.bind(null, item),
+                      disabled: item.state === 1 ? false : true,
+                    },
+                    {
                       text: '编辑',
                       auth: ConfigurationPermission.UPDATE,
                       icon: 'clarity:note-edit-line',
                       event: '',
                       onClick: handleCreateOrUpdate.bind(null, item),
+                      disabled: item.state === 0 ? false : true,
                     },
                     {
                       text: '删除',
                       auth: ConfigurationPermission.DELETE,
                       icon: 'ant-design:delete-outlined',
+                      disabled: item.state === 0 ? false : true,
                       event: '',
                       popconfirm: {
                         title: '是否确认删除操作?',
@@ -244,6 +292,7 @@
       </List>
     </section>
     <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
+    <PublicApiDrawer @register="registerPublicDrawer" @success="getPublicApiListData" />
   </PageWrapper>
 </template>
 
@@ -298,6 +347,13 @@
         bottom: 0;
         left: 0.8rem;
       }
+
+      .masker-text-state {
+        font-size: 12px;
+        position: absolute;
+        bottom: 0;
+        right: 0.8rem;
+      }
     }
   }
 

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

+<template>
+  <div class="table-content">
+    <!-- 采用的原生表格 -->
+    <table align="center">
+      <thead>
+        <tr>
+          <th></th>
+          <th>内置参数</th>
+          <th>参数名</th>
+          <th>是否必须</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="请选择"
+              :options="selectOptions"
+              @change="handleChange"
+              allowClear
+            />
+          </td>
+          <td>
+            <a-input
+              :disabled="item.editDisabled"
+              placeholder="请输入"
+              v-model:value="item.value"
+            />
+          </td>
+          <td>
+            <a-switch v-model:checked="item.required" />
+          </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, nextTick } from 'vue';
+  import { Select, Button } from 'ant-design-vue';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
+
+  defineProps({
+    method: {
+      type: String,
+    },
+  });
+
+  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 selectOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
+
+  type defaultItem = {
+    key: null | string;
+    value: string;
+    editDisabled: boolean;
+    required: boolean;
+  };
+
+  const tableArray = reactive<{
+    content: defaultItem[];
+  }>({
+    content: [
+      {
+        key: null,
+        value: '',
+        editDisabled: false,
+        required: false,
+      },
+    ],
+  });
+
+  // 新增
+  const add = (_, index: number) => {
+    tableArray.content.splice(index + 1, 0, {
+      key: null,
+      value: '',
+      editDisabled: false,
+      required: 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.value = '';
+          element.editDisabled = true;
+        }
+        if (element.key === ele.value && element.key !== 'scope') {
+          ele.disabled = true;
+        }
+      });
+    });
+  };
+
+  //获取数据
+  const getValue = () => {
+    return tableArray.content;
+  };
+
+  //设置数据
+  const setValue = (data) => {
+    nextTick(() => (tableArray.content = data));
+    nextTick(() =>
+      setTimeout(() => {
+        tableArray.content.forEach(() => {
+          handleChange();
+        });
+      }, 20)
+    );
+  };
+
+  //重置数据
+  const resetValue = () => {
+    tableArray.content = [];
+    tableArray.content.push({
+      key: null,
+      value: '',
+      editDisabled: false,
+      required: false,
+    });
+    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: 100%;
+      &:extend(.table-border-color);
+    }
+
+    table td {
+      width: 7vw;
+      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.requestParamsBodyType"
+      @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-show="getRequestBody.content.requestParamsBodyType === 'none'"
+        disabled
+        placeholder="该接口没有 Body 体"
+        :rows="2"
+      />
+      <EditCellTable
+        ref="editCellTableRef"
+        v-show="
+          getRequestBody.content.requestParamsBodyType === 'form-data' ||
+          getRequestBody.content.requestParamsBodyType === 'x-www-form-urlencoded'
+        "
+      />
+      <a-textarea
+        v-model:value="getRequestBody.content.json"
+        v-show="getRequestBody.content.requestParamsBodyType === 'json'"
+        placeholder="请输入json"
+        :rows="6"
+      />
+      <a-textarea
+        v-model:value="getRequestBody.content.xml"
+        v-show="getRequestBody.content.requestParamsBodyType === 'xml'"
+        placeholder="请输入xml"
+        :rows="6"
+      />
+    </div>
+  </div>
+</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,
+    },
+  });
+
+  const getRequestBody = reactive({
+    content: {
+      requestParamsBodyType: 'none',
+      json: '',
+      xml: '',
+      'form-data': {},
+      'x-www-form-urlencoded': {},
+    },
+  });
+
+  const editCellTableRef = ref<InstanceType<typeof EditCellTable>>();
+
+  const handleChange = ({ target }) => {
+    const { value } = target;
+    getRequestBody.content.requestParamsBodyType = value;
+  };
+
+  //获取数据
+  const getValue = () => {
+    const type = Reflect.get(getRequestBody.content, 'requestParamsBodyType');
+    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 resetValue = () => {
+    for (let i in getRequestBody.content) Reflect.set(getRequestBody.content, i, '');
+    getRequestBody.content.requestParamsBodyType = 'none';
+    nextTick(() => editCellTableRef?.value?.resetValue());
+  };
+  defineExpose({
+    getValue,
+    setValue,
+    resetValue,
+  });
+</script>

+<template>
+  <div>
+    <Tabs @change="handleChange" 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"
+          :data="dataList"
+        />
+      </TabPane>
+      <TabPane
+        v-if="method !== '2' && paramsType !== 'GET'"
+        class="tab-pane"
+        forceRender
+        key="Body"
+        tab="Body"
+      >
+        <Body ref="bodyRef" :method="method" :paramsType="paramsType" :data="dataList" />
+        <TestRequest
+          @testInterface="handleTestInterface"
+          ref="testBodyRequestRef"
+          :method="method"
+          :data="dataList"
+        />
+      </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"
+          :data="dataList"
+        />
+      </TabPane>
+    </Tabs>
+  </div>
+</template>
+<script lang="ts" setup name="simpleRequest">
+  import { ref, nextTick } from 'vue';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import { EditCellTable } from '../EditCellTable';
+  import Body from './body.vue';
+  import { TestRequest } from '../TestRequest/index';
+
+  defineProps({
+    method: {
+      type: String,
+    },
+    paramsType: {
+      type: String,
+    },
+  });
+
+  const emits = defineEmits(['activeKey']);
+
+  const activeKey = ref('Params');
+
+  const editCellTableRef = ref<InstanceType<typeof EditCellTable>>();
+
+  const editHeaderCellTableRef = ref<InstanceType<typeof EditCellTable>>();
+
+  const testParRequestRef = ref<InstanceType<typeof TestRequest>>();
+
+  const testBodyRequestRef = ref<InstanceType<typeof TestRequest>>();
+
+  const testHeaderRequestRef = ref<InstanceType<typeof TestRequest>>();
+
+  const dataList: any = ref(null);
+
+  const bodyRef = ref<InstanceType<typeof Body>>();
+
+  const handleChange = () => {
+    testParRequestRef.value?.setValue();
+    testHeaderRequestRef.value?.setValue();
+    testBodyRequestRef.value?.setValue();
+  };
+
+  const handleTestInterface = () => {
+    const value = getValue(false);
+    nextTick(() => (dataList.value = value));
+  };
+
+  //获取数据
+  const getValue = (status) => {
+    const type = activeKey.value;
+    const Body = bodyRef.value?.getValue();
+    const Params = editCellTableRef.value?.getValue();
+    const Header = editHeaderCellTableRef.value?.getValue();
+    status ? emits('activeKey', type) : null;
+    return type === 'Params' ? Params : type === 'Body' ? Body : Header;
+  };
+
+  //设置数据
+  const setValue = (data) => {
+    const Objects = JSON.parse(data?.requestParams);
+    nextTick(() => {
+      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 {
+      }
+    });
+  };
+
+  //重置数据
+  const resetValue = () => {
+    activeKey.value = 'Params';
+    nextTick(() => {
+      editCellTableRef.value?.resetValue();
+      editHeaderCellTableRef.value?.resetValue();
+      bodyRef.value?.resetValue();
+      handleChange();
+    });
+  };
+
+  defineExpose({
+    getValue,
+    setValue,
+    resetValue,
+  });
+</script>
+
+<style lang="less" scoped>
+  .tab-pane {
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+</style>

+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>内置参数</th>
+          <th>参数名</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in tableTestArray.content" :key="index">
+          <td>
+            {{ index + 1 }}
+          </td>
+          <td>
+            <Select
+              :disabled="true"
+              v-model:value="item.key"
+              placeholder="请选择"
+              notFoundContent="请选择"
+              style="width: 14rem"
+              :options="selectOptions"
+              @change="handleChange(item)"
+              allowClear
+            />
+          </td>
+          <td>
+            <a-input
+              v-if="item.key === 'scope'"
+              placeholder="请输入"
+              v-model:value="item.value"
+              style="width: 14rem"
+            />
+            <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>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script lang="ts" setup name="editCellTable">
+  import { reactive, ref, onMounted } from 'vue';
+  import { Select } from 'ant-design-vue';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { getAllDeviceByOrg } from '/@/api/dataBoard';
+  import { getDeviceAttributes } from '/@/api/dataBoard';
+  import { useApi } from '../../hooks/useApi';
+  import { cloneDeep } from 'lodash-es';
+
+  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 = {
+    key: null | string;
+    value: null | string;
+    editDisabled: boolean;
+  };
+
+  const tableTestArray = reactive<{
+    content: defaultItem[];
+  }>({
+    content: [
+      {
+        key: null,
+        value: null,
+        editDisabled: false,
+      },
+    ],
+  });
+
+  //设置数据
+  const setTableArray = (data) => {
+    const list = cloneDeep(data);
+    if (Array.isArray(list)) (tableTestArray.content = list) && getApi(list);
+    if (list.hasOwnProperty('form-data') && Array.isArray(list['form-data']))
+      (tableTestArray.content = list['form-data']) && getApi(list['form-data']);
+    if (
+      list.hasOwnProperty('x-www-form-urlencoded') &&
+      Array.isArray(list['x-www-form-urlencoded'])
+    )
+      (tableTestArray.content = list['x-www-form-urlencoded']) &&
+        getApi(list['x-www-form-urlencoded']);
+  };
+
+  const getApi = (list) => {
+    list?.forEach(async (it) => {
+      if (it.key === 'deviceProfileId') {
+        const { options } = await useApi(it.key);
+        valueOptions.value = options;
+      } else if (it.key === 'organizationId') {
+        const { options } = await useApi(it.key);
+        treeData.value = options as any;
+      }
+    });
+  };
+
+  //Select互斥
+  const handleChange = async (e) => {
+    selectOptions.value.forEach((ele) => {
+      ele.disabled = false;
+      tableTestArray.content.forEach((element) => {
+        if (element.key === e.key && element.key !== 'scope') {
+          element.value = null;
+        }
+        if (element.key === ele.value && element.key !== 'scope') {
+          ele.disabled = true;
+        }
+      });
+    });
+    //获取对应项
+    if (e.key === 'deviceProfileId') {
+      const { options } = await useApi(e.key);
+      valueOptions.value = options;
+    } else if (e.key === 'organizationId') {
+      const { options } = await useApi(e.key);
+      treeData.value = options as any;
+    } else if (e.key === 'entityId') {
+      const getOrganizationIds = tableTestArray.content
+        .map((f) => {
+          if (f.key === 'organizationId') {
+            return f.value;
+          }
+        })
+        .filter(Boolean);
+      if (getOrganizationIds.length === 0) return;
+      getEntityOptions(getOrganizationIds?.at(-1));
+    } else if (e.key === 'keys') {
+      const getIds = tableTestArray.content
+        .map((f) => {
+          if (f.key === 'deviceProfileId') {
+            return f.value;
+          }
+        })
+        .filter(Boolean);
+      if (getIds.length === 0) return;
+      getAttributeOptions({ deviceProfileId: getIds?.at(-1) });
+    } else if (e.key === 'date') {
+      valueOptions.value = [];
+    }
+  };
+
+  const handleOrgnationChange = async (e) => {
+    tableTestArray.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') {
+      tableTestArray.content.forEach((f) => {
+        if (f.key === 'keys') {
+          f.value = null;
+        }
+      });
+      getAttributeOptions({ deviceProfileId: e.value });
+    }
+  };
+
+  //获取数据
+  const getValue = () => {
+    return tableTestArray.content;
+  };
+  defineExpose({
+    getValue,
+    setTableArray,
+  });
+</script>
+
+<style scoped lang="less">
+  @table-color: #e5e7eb;
+
+  .table-border-color {
+    border: 1px solid #e5e7eb;
+    text-align: center;
+  }
+
+  .table-content {
+    table {
+      &:extend(.table-border-color);
+    }
+
+    table td {
+      width: 7vw;
+      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>
+    <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 } from 'vue';
+  import { Button } from 'ant-design-vue';
+  import { TestEditCellTable } from '../TestEditCellTable/index';
+  import { getAllDeviceByOrg } from '/@/api/dataBoard';
+  import { getDeviceAttributes } from '/@/api/dataBoard';
+
+  const emits = defineEmits(['testInterface']);
+
+  const props = defineProps({
+    method: {
+      type: String,
+    },
+    data: {
+      type: Array,
+    },
+  });
+
+  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();
+  };
+
+  const getValue = async () => {
+    await nextTick();
+    await nextTick(() => {
+      testEditCellTableRef.value?.setTableArray(props.data);
+    });
+  };
+
+  const handleExcute = async () => {
+    const params = testEditCellTableRef.value?.getValue();
+    const keys = params?.map((m) => ({ key: m.key, value: m.value }));
+    keys?.forEach(async (it: any) => {
+      if (it.key === 'organizationId') {
+        //获取设备
+        const data = await getAllDeviceByOrg(it.value!);
+        testResult.value = JSON.stringify(data);
+      }
+      if (it.key === 'deviceProfileId') {
+        //获取属性
+        const data = await getDeviceAttributes({ deviceProfileId: it.value! });
+        testResult.value = JSON.stringify(data);
+      }
+    });
+  };
+
+  //设置数据
+  const setValue = () => {
+    showTestEditCell.value = false;
+    testResult.value = '';
+  };
+  defineExpose({
+    setValue,
+    handleTest,
+  });
+</script>
+
+<style scoped lang="less"></style>

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

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

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import { findDictItemByCode } from '/@/api/system/dict';
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '接口名称',
+    dataIndex: 'interfaceName',
+    width: 150,
+  },
+  {
+    title: '请求方式',
+    dataIndex: 'requestContentType',
+    width: 90,
+    format(text) {
+      return Number(text) === 0 ? '普通请求' : Number(text) === 1 ? 'SQL请求' : 'websocket请求';
+    },
+  },
+  {
+    title: '接口内容',
+    dataIndex: 'content',
+    width: 80,
+    slots: { customRender: 'content' },
+  },
+  {
+    title: '状态',
+    dataIndex: 'state',
+    width: 80,
+    customRender: ({ record }) => {
+      const status = record.state;
+      const color = status == 1 ? 'green' : 'red';
+      const text = status == 1 ? '发布' : '未发布';
+      return h(Tag, { color: color }, () => text);
+    },
+  },
+];
+
+// 查询配置
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '接口名称',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入接口名称',
+    },
+  },
+  {
+    field: 'state',
+    label: '发布状态',
+    component: 'Select',
+    colProps: { span: 8 },
+    componentProps: {
+      options: [
+        {
+          label: '发布',
+          value: 1,
+        },
+        {
+          label: '未发布',
+          value: 0,
+        },
+      ],
+      placeholder: '请选择发布状态',
+    },
+  },
+];
+
+//表单配置
+export const schemas: FormSchema[] = [
+  {
+    field: 'interfaceName',
+    label: '接口名称',
+    colProps: { span: 24 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 64,
+      placeholder: '请输入接口名称',
+    },
+  },
+  {
+    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: '请输入源地址',
+    },
+  },
+  {
+    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',
+    required: true,
+    colProps: { span: 18 },
+    componentProps: {
+      maxLength: 64,
+      placeholder: '请输入接口地址',
+    },
+    ifShow: ({ values }) =>
+      values['requestContentType'] === '0' || values['requestContentType'] === '1',
+  },
+  {
+    field: 'requestSQLKey',
+    label: '键名',
+    colProps: { span: 12 },
+    component: 'Input',
+    defaultValue: 'sql',
+    componentProps: {
+      disabled: true,
+    },
+    ifShow: ({ values }) => values['requestContentType'] === '1',
+  },
+  {
+    field: 'requestSQLContent',
+    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',
+}

+<template>
+  <div>
+    <BasicDrawer
+      showFooter
+      v-bind="$attrs"
+      @register="registerDrawer"
+      width="45%"
+      @ok="handleOnSubmit"
+    >
+      <BasicForm @register="registerForm">
+        <template #selectMethods="{ model }">
+          <SimpleRequest
+            ref="simpleRequestRef"
+            v-if="model['requestContentType'] === '0'"
+            @activeKey="handleActiveKey"
+            :paramsType="model['requestHttpType']"
+            :method="model['requestContentType']"
+          />
+          <SimpleRequest
+            ref="simpleRequestRef"
+            @activeKey="handleActiveKey"
+            v-else-if="model['requestContentType'] === '2'"
+            :paramsType="model['requestHttpType']"
+            :method="model['requestContentType']"
+          />
+        </template>
+        <template #testSql="{ model }">
+          <div style="margin: auto 7.5rem">
+            <TestSql
+              ref="testSqlRef"
+              v-if="model['requestContentType'] === '1'"
+              :method="model['requestContentType']"
+            />
+          </div>
+        </template>
+      </BasicForm>
+    </BasicDrawer>
+  </div>
+</template>
+<script lang="ts" setup name="publicApi">
+  import { ref, nextTick } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { schemas } from './config';
+  import SimpleRequest from './components/SimpleRequest/index.vue';
+  import { TestSql } from './components/TestSql/index';
+  import {
+    saveDataViewInterface,
+    updateDataViewInterface,
+  } from '/@/api/bigscreen/center/bigscreenCenter';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { findDictItemByCode } from '/@/api/system/dict';
+
+  const emits = defineEmits(['success', 'register']);
+
+  const { createMessage } = useMessage();
+
+  const isUpdate = ref(false);
+
+  const putId = ref('');
+
+  const activeKey = ref('');
+
+  const simpleRequestRef = ref<InstanceType<typeof SimpleRequest>>();
+
+  const testSqlRef = ref<InstanceType<typeof TestSql>>();
+
+  const [registerForm, { resetFields, validate, setFieldsValue, updateSchema }] = useForm({
+    labelWidth: 120,
+    schemas,
+    showActionButtonGroup: false,
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    setDrawerProps({ loading: true });
+    await nextTick();
+    await resetFields();
+    await nextTick(() => simpleRequestRef.value?.resetValue());
+    await nextTick(() => testSqlRef.value?.resetValue());
+    const title = `${!data.isUpdate ? '新增' : '修改'}公共接口`;
+    setDrawerProps({ title });
+    isUpdate.value = data.isUpdate;
+    !isUpdate.value ? (putId.value = '') : (putId.value = data.record.id);
+    if (isUpdate.value) {
+      await setFieldsValue({
+        ...data.record,
+        requestContentType: String(data.record?.requestContentType),
+        requestSQLContent: JSON.parse(data.record?.requestParams)?.requestSQLContent?.sql,
+      });
+      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 }));
+      updateSchema({
+        field: 'requestHttpType',
+        componentProps: {
+          options,
+        },
+      });
+    }
+    setDrawerProps({ loading: false });
+  });
+
+  const handleActiveKey = (v) => (activeKey.value = v);
+
+  const handleOnSubmit = async () => {
+    setDrawerProps({ loading: true });
+    try {
+      const values = await validate();
+      if (!values) return;
+      const Objects = simpleRequestRef.value?.getValue(true);
+      const data = {
+        ...values,
+        id: !putId.value ? null : putId.value,
+        requestParams: JSON.stringify({
+          requestSQLContent: {
+            sql: values?.requestSQLContent,
+          },
+          type: activeKey.value,
+          Params: activeKey.value === 'Params' ? Objects : {},
+          Body: activeKey.value === 'Body' ? Objects : {},
+          Header: activeKey.value === 'Header' ? Objects : {},
+        }),
+      };
+      !putId.value ? await saveDataViewInterface(data) : await updateDataViewInterface(data);
+      emits('success');
+      closeDrawer();
+      createMessage.success(`${!isUpdate.value ? '新增' : '修改'}成功`);
+    } finally {
+      setDrawerProps({ loading: false });
+    }
+  };
+</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 };
+};

+import PublicApiDrawer from './index.vue';
+import PublicApiList from './list.vue';
+import PublicApiForm from './form.vue';
+
+export { PublicApiDrawer, PublicApiList, PublicApiForm };

+<template>
+  <div>
+    <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="公共接口管理页" width="50%">
+      <PublicApiList />
+    </BasicDrawer>
+  </div>
+</template>
+<script lang="ts" setup name="publicApi">
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { PublicApiList } from './index';
+
+  const [registerDrawer] = useDrawerInner();
+</script>

+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #content="{ record }">
+        <a-button type="link" class="ml-2" @click="handleRecordContent(record)"> 查看 </a-button>
+      </template>
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增公共接口 </a-button>
+        <Popconfirm
+          title="您确定要批量删除数据"
+          ok-text="确定"
+          cancel-text="取消"
+          @confirm="handleDeleteOrBatchDelete(null)"
+        >
+          <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+        </Popconfirm>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '发布',
+              icon: 'ant-design:node-expand-outlined',
+              onClick: handlePublish.bind(null, record),
+              ifShow: () => {
+                return record.state === 0;
+              },
+            },
+            {
+              label: '取消发布',
+              icon: 'ant-design:node-collapse-outlined',
+              onClick: handleCancelPublish.bind(null, record),
+              ifShow: () => {
+                return record.state === 1;
+              },
+            },
+            {
+              label: '修改',
+              icon: 'clarity:note-edit-line',
+              onClick: handleCreateOrEdit.bind(null, record),
+              ifShow: () => {
+                return record.state === 0;
+              },
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              ifShow: () => {
+                return record.state === 0;
+              },
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+  </div>
+  <PublicApiForm @register="registerDrawer" @success="handleSuccess" />
+</template>
+<script lang="ts" setup name="list">
+  import { nextTick, h } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import { columns, searchFormSchema } from './config';
+  import { PublicApiForm } from './index';
+  import {
+    getDataViewInterfacePage,
+    deleteBigViewInterface,
+    getPublish,
+    getCancelPublish,
+  } from '/@/api/bigscreen/center/bigscreenCenter';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Popconfirm, Modal } from 'ant-design-vue';
+  import { JsonPreview } from '/@/components/CodeEditor';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const [registerTable, { reload, setProps }] = useTable({
+    api: getDataViewInterfacePage,
+    columns,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    showTableSetting: true,
+    bordered: true,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  const { createMessage } = useMessage();
+
+  const handleSuccess = () => reload();
+
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+    deleteBigViewInterface,
+    handleSuccess,
+    setProps
+  );
+
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+
+  const handleCreateOrEdit = (record) => {
+    const isUpdate = record === null ? false : true;
+    const recordContent = record === null ? null : record;
+    openDrawer(true, {
+      isUpdate,
+      record: recordContent,
+    });
+  };
+
+  const handleRecordContent = (record) => {
+    Modal.info({
+      title: '接口内容',
+      width: 600,
+      content: h(JsonPreview, { data: JSON.parse(record.requestParams) }),
+    });
+  };
+
+  const handlePublish = async (record) => {
+    await getPublish(record.id);
+    createMessage.success(`发布成功`);
+    handleSuccess();
+  };
+
+  const handleCancelPublish = async (record) => {
+    await getCancelPublish(record.id);
+    createMessage.success(`取消发布成功`);
+    handleSuccess();
+  };
+</script>