update: api配置界面

components.d.ts

@@ -7,29 +7,39 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
+    ACard: typeof import('ant-design-vue/es')['Card']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
-    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
     ACol: typeof import('ant-design-vue/es')['Col']
-    ACollapse: typeof import('ant-design-vue/es')['Collapse']
+    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
-    ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
+    ADivider: typeof import('ant-design-vue/es')['Divider']
+    AEmpty: typeof import('ant-design-vue/es')['Empty']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APagination: typeof import('ant-design-vue/es')['Pagination']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
-    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASpin: typeof import('ant-design-vue/es')['Spin']
+    ATable: typeof import('ant-design-vue/es')['Table']
     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']
+    FormFormBuilder: typeof import('./src/components/Form/FormBuilder.vue')['default']
     GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']
     MonacoEditor: typeof import('./src/components/MonacoEditor/index.vue')['default']
+    PermissionButton: typeof import('./src/components/PermissionButton/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Table: typeof import('./src/components/Table/index.vue')['default']
+    TitleComponent: typeof import('./src/components/TitleComponent/index.vue')['default']
     ValueItem: typeof import('./src/components/ValueItem/index.vue')['default']
   }
 }

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

@@ -15,51 +15,62 @@
 import { TreeProps } from 'ant-design-vue';
 
 import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
+import { treeNodeTpye } from '../index';
 
-type treeNodeTpye = {
-    name: string;
-    url: string;
-    children?: treeNodeTpye[];
-};
 const emits = defineEmits(['select']);
 
-const treeData: TreeProps['treeData'] = ref([]);
+const treeData = ref<TreeProps['treeData']>([]);
 
 const getTreeData = () => {
     let tree: treeNodeTpye[] = [];
-    getTreeOne_api().then((resp) => {
+    getTreeOne_api().then((resp: any) => {
-        tree = resp.urls.map((item) => ({
+        tree = resp.urls.map((item: any) => ({
             ...item,
             key: item.url,
         }));
         const allPromise = tree.map((item) => getTreeTwo_api(item.name));
         Promise.all(allPromise).then((values) => {
-            values.forEach((item, i) => {
+            values.forEach((item: any, i) => {
-                tree[i].children = combData(item.paths);
+                tree[i].children = combData(item?.paths);
             });
-            console.log(tree);
+            treeData.value = tree;
-            treeData.value = tree
         });
     });
 };
-const clickSelectItem = (key, { node }) => {
+const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
-    emits('select', node);
+    emits('select', node.node.dataRef);
 };
 
 onMounted(() => {
     getTreeData();
 });
 
-const combData = (dataSource: object): object[] => {
+const combData = (dataSource: object) => {
-    const apiList: object[] = [];
+    const apiList: treeNodeTpye[] = [];
     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);
+        let apiObj: treeNodeTpye | undefined = apiList.find(
-        if (!apiObj) {
+            (item) => item.name === name,
-            apiObj = { name, link: key, methods: dataSource[key], key };
+        );
+        if (apiObj) {
+            apiObj.apiList?.push({
+                url: key,
+                method: dataSource[key],
+            });
+        } else {
+            apiObj = {
+                name,
+                key: name,
+                apiList: [
+                    {
+                        url: key,
+                        method: dataSource[key],
+                    },
+                ],
+            };
             apiList.push(apiObj);
         }
     });
@@ -68,4 +79,14 @@ const combData = (dataSource: object): object[] => {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less">
+.left-tree-container {
+    .ant-tree-list {
+        .ant-tree-list-holder-inner {
+            .ant-tree-switcher-noop {
+                display: none !important;
+            }
+        }
+    }
+}
+</style>

src/views/system/apiPage/index.d.ts

@@ -0,0 +1,14 @@
+export type treeNodeTpye = {
+    name: string;
+    key: string;
+    link?: string;
+    apiList?: object[];
+    children?: treeNodeTpye[];
+};
+export type methodType = {
+    [key:string]: object
+}
+export type apiObjType = {
+    url: string,
+    method: methodType
+}

src/views/system/apiPage/index.vue

@@ -1,15 +1,37 @@
 <template>
-    <a-card class="api-page-container" >
+    <a-card class="api-page-container">
-        <LeftTree />
+        <LeftTree @select="treeSelect" />
+
+        
     </a-card>
 </template>
 
 <script setup lang="ts">
 import LeftTree from './components/LeftTree.vue';
+import { treeNodeTpye, apiObjType } from './index';
+
+const tableData = ref([]);
+const treeSelect = (node: treeNodeTpye) => {
+    const apiList: apiObjType[] = node.apiList as apiObjType[];
+    const table: any = [];
+    // 将对象形式的数据转换为表格需要的形式
+    apiList?.forEach((apiItem) => {
+        const { method, url } = apiItem;
+        for (const key in method) {
+            if (Object.prototype.hasOwnProperty.call(method, key)) {
+                table.push({
+                    ...method[key],
+                    url,
+                });
+            }
+        }
+    });
+    tableData.value = table;
+};
 </script>
 
 <style scoped>
 .api-page-container {
     height: 100%;
 }
-</style>
+</style>