feat: 开放接口

src/pages/Iot/dataServer/openApi.vue

@@ -1,9 +1,124 @@
 <template>
 <a-card>
-  openAPi
+  <a-row>
+    <a-col>
+      <a-space>
+        <a-input v-model:value="queryParams.apiLabel" placeholder="请输入api名称" ></a-input>
+        <a-button type="primary" @click="getOpenApiPage" >搜索</a-button>
+      </a-space>
+    </a-col>
+  </a-row>
+  <a-table
+    :columns="columns"
+    :loading="state.loading"
+    :data-source="state.dataSource"
+    style="margin-top: 20px;"
+  >
+  <template #bodyCell="{column, record}" >
+    <template v-if="column.key === 'apiDescription'" >
+      <a-tooltip>
+        <template #title>  {{record.apiDescription}}</template>
+        <div> {{record.apiDescription}}</div>
+      </a-tooltip>
+    </template>
+    <template v-if="column.key === 'apiParameters'" >
+      <a-tooltip>
+        <template #title>  {{record.apiParameters}}</template>
+        <div>{{record.apiParameters}}</div>
+      </a-tooltip>
+    </template>
+    <template v-if="column.key === 'apiParametersDescription'" >
+      <a-tooltip>
+        <template #title>  {{record.apiParametersDescription}}</template>
+        <div>{{record.apiParametersDescription}}</div>
+      </a-tooltip>
+    </template>
+    <template v-if="column.key === 'apiResponse'" >
+      <a-tooltip>
+        <template #title>  {{record.apiResponse}}</template>
+        <div>{{record.apiResponse}}</div>
+      </a-tooltip>
+    </template>
+    <template v-if="column.key === 'apiResponseDescription'" >
+      <a-tooltip>
+        <template #title>  {{record.apiResponseDescription}}</template>
+        <div>{{record.apiResponseDescription}}</div>
+      </a-tooltip>
+    </template>
+  </template>
+  </a-table>
 </a-card>
 </template>
 <script lang='ts' setup >
+import { DataController } from '@/controller/iot/data'
+import { onMounted, reactive } from 'vue'
+
+const columns = [
+  {
+    title: 'api名称',
+    dataIndex: 'apiLabel',
+    width: '200px'
+  },
+  {
+    title: 'api地址',
+    dataIndex: 'apiUrl'
+  },
+  {
+    title: 'api描述',
+    dataIndex: 'apiDescription',
+    key: 'apiDescription',
+    ellipsis: true
+  },
+  {
+    title: '请求参数',
+    dataIndex: 'apiParameters',
+    key: 'apiParameters',
+    ellipsis: true
+  },
+  {
+    title: '请求参数描述',
+    dataIndex: 'apiParametersDescription',
+    key: 'apiParametersDescription',
+    ellipsis: true
+  },
+  {
+    title: '响应',
+    dataIndex: 'apiResponse',
+    key: 'apiResponse',
+    ellipsis: true
+  },
+  {
+    title: '响应描述',
+    dataIndex: 'apiResponseDescription',
+    key: 'apiResponseDescription',
+    ellipsis: true
+  }
+]
+
+const queryParams = reactive({
+  page: 1,
+  pageSize: 10,
+  total: 0,
+  apiLabel: ''
+})
+
+const state = reactive({
+  loading: false,
+  dataSource: []
+})
+
+const getOpenApiPage = async () => {
+  state.loading = true
+  const { data, sum } = await DataController.pageOpenAPiList(queryParams)
+  state.loading = false
+  state.dataSource = data
+  queryParams.total = sum
+}
+
+onMounted(() => {
+  getOpenApiPage()
+})
+
 </script>
 <style lang='less' scoped >
 </style>