首页目录调整+api配置页面

components.d.ts

@@ -17,14 +17,15 @@ declare module '@vue/runtime-core' {
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
-    AInputGroup: typeof import('ant-design-vue/es')['InputGroup']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AModal: typeof import('ant-design-vue/es')['Modal']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATree: typeof import('ant-design-vue/es')['Tree']
     AUpload: typeof import('ant-design-vue/es')['Upload']
     BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
     CardBox: typeof import('./src/components/CardBox/index.vue')['default']

src/api/home.js

@@ -4,3 +4,5 @@ import server from '@/utils/request';
 export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
 // 产品数量
 export const getProductCount_api = (data) => server.post(`/device-product/_count`, data);
+// 查询产品列表
+export const getProductList_api = (data) => server.get(`/device/product/_query/no-paging?paging=false`, data);

src/api/system/apiPage.ts

@@ -0,0 +1,6 @@
+import server from '@/utils/request';
+
+// 获取tree数据-第一层
+export const getTreeOne_api = () => server.get(`/v3/api-docs/swagger-config`);
+// 获取tree数据-第二层
+export const getTreeTwo_api = (name:string) => server.get(`/v3/api-docs/${name}`);

src/router/menu.ts

@@ -34,7 +34,7 @@ export default [
     },
     {
         path: '/iot/home',
-        component: () => import('@/views/iot/home/index.vue')
+        component: () => import('@/views/home/index.vue')
     },
     {
         path: '/table',

src/views/home/components/dialogs/AccessMethodDialog.vue

@@ -36,6 +36,8 @@
 
 <script setup lang="ts">
 import { ComponentInternalInstance } from 'vue';
+
+import { getProductList_api } from '@/api/home';
 import { productItem } from '../../index';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const props = defineProps({
@@ -51,7 +53,14 @@ const productList = ref<[productItem] | []>([]);
 
 const getContainer = () => proxy?.$refs.modal as HTMLElement;
 const getOptions = () => {
-    productList.value = [];
+    getProductList_api().then((resp) => {
+        productList.value = resp.result
+            .filter((i: any) => !i?.accessId)
+            .map((item: { name: any; id: any }) => ({
+                label: item.name,
+                value: item.id,
+            })) as [productItem];
+    });
 };
 const handleOk = () => {
     emits('confirm', form.value);

src/views/home/index.vue

@@ -6,7 +6,8 @@
             <!-- <InitHome /> -->
             <!-- <DeviceHome /> -->
             <!-- <DevOpsHome /> -->
-            <ComprehensiveHome />
+            <!-- <ComprehensiveHome /> -->
+            <ApiPage />
         </div>
     </div>
 </template>
@@ -16,6 +17,7 @@ import InitHome from './components/InitHome/index.vue';
 import DeviceHome from './components/DeviceHome/index.vue';
 import DevOpsHome from './components/DevOpsHome/index.vue';
 import ComprehensiveHome from './components/ComprehensiveHome/index.vue';
+import ApiPage from '@/views/system/apiPage/index.vue'
 
 </script>
 

src/views/system/apiPage/components/LeftTree.vue

@@ -0,0 +1,71 @@
+<template>
+    <a-tree
+        :tree-data="treeData"
+        @select="clickSelectItem"
+        showLine
+        class="left-tree-container"
+    >
+        <template #title="{ name }">
+            {{ name }}
+        </template>
+    </a-tree>
+</template>
+
+<script setup lang="ts">
+import { TreeProps } from 'ant-design-vue';
+
+import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
+
+type treeNodeTpye = {
+    name: string;
+    url: string;
+    children?: treeNodeTpye[];
+};
+const emits = defineEmits(['select']);
+
+const treeData: TreeProps['treeData'] = ref([]);
+
+const getTreeData = () => {
+    let tree: treeNodeTpye[] = [];
+    getTreeOne_api().then((resp) => {
+        tree = resp.urls.map((item) => ({
+            ...item,
+            key: item.url,
+        }));
+        const allPromise = tree.map((item) => getTreeTwo_api(item.name));
+        Promise.all(allPromise).then((values) => {
+            values.forEach((item, i) => {
+                tree[i].children = combData(item.paths);
+            });
+            console.log(tree);
+            treeData.value = tree
+        });
+    });
+};
+const clickSelectItem = (key, { node }) => {
+    emits('select', node);
+};
+
+onMounted(() => {
+    getTreeData();
+});
+
+const combData = (dataSource: object): object[] => {
+    const apiList: object[] = [];
+    const keys = Object.keys(dataSource);
+
+    keys.forEach((key) => {
+        const method = Object.keys(dataSource[key] || {})[0];
+        const name = dataSource[key][method].tags[0];
+        let apiObj = apiList.find((item) => item.name === name);
+        if (!apiObj) {
+            apiObj = { name, link: key, methods: dataSource[key], key };
+            apiList.push(apiObj);
+        }
+    });
+
+    return apiList;
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/system/apiPage/index.vue

@@ -0,0 +1,15 @@
+<template>
+    <a-card class="api-page-container" >
+        <LeftTree />
+    </a-card>
+</template>
+
+<script setup lang="ts">
+import LeftTree from './components/LeftTree.vue';
+</script>
+
+<style scoped>
+.api-page-container {
+    height: 100%;
+}
+</style>