update: api配置优化

src/views/system/Basis/index.vue

@@ -290,7 +290,7 @@ import { message } from 'ant-design-vue';
 import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
 import { LocalStore } from '@/utils/comm';
 
-import { save_api, getDetails_api } from '@/api/system/basis';
+import { save_api } from '@/api/system/basis';
 import { usePermissionStore } from '@/store/permission';
 import { useSystem } from '@/store/system';
 

src/views/system/Platforms/Api/components/ApiDoes.vue

@@ -91,6 +91,16 @@ import 'vue3-json-viewer/dist/index.css';
 import type { apiDetailsType } from '../typing';
 import InputCard from './InputCard.vue';
 import { PropType } from 'vue';
+import { findData, getCodeText } from '../utils';
+
+type cardType = {
+    columns: object[];
+    tableData: any[];
+    codeText?: any;
+    activeKey?: string;
+    getData: Function;
+};
+
 
 const props = defineProps({
     selectApi: {
@@ -104,14 +114,8 @@ const props = defineProps({
 });
 const { selectApi } = toRefs(props);
 
-type tableCardType = {
+
-    columns: object[];
+const requestCard = reactive<cardType>({
-    tableData: any[];
-    codeText?: any;
-    activeKey?: any;
-    getData?: any;
-};
-const requestCard = reactive<tableCardType>({
     columns: [
         {
             title: '参数名',
@@ -149,16 +153,16 @@ const requestCard = reactive<tableCardType>({
         const schema =
             props.selectApi.requestBody.content['application/json'].schema;
         const _ref = schema.$ref || schema?.items?.$ref;
-        if(!_ref) return; // schema不是Java中的类的话则不进行解析，直接结束
+        if (!_ref) return; // schema不是Java中的类的话则不进行解析，直接结束
+
         const schemaName = _ref?.split('/').pop();
         const type = schema.type || '';
-        const tableData = findData(schemaName);
+        const tableData = findData(props.schemas, schemaName);
-        if (type === 'array') {
-            requestCard.codeText = [getCodeText(tableData, 3)];
-        } else requestCard.codeText = getCodeText(tableData, 3);
-        // console.clear();
-        // console.log(schemaName, tableData);
 
+        requestCard.codeText =
+            type === 'array'
+                ? [getCodeText(props.schemas, tableData, 3)]
+                : getCodeText(props.schemas, tableData, 3);
         requestCard.tableData = [
             {
                 name: schemaName[0].toLowerCase() + schemaName.substring(1),
@@ -176,7 +180,7 @@ const requestCard = reactive<tableCardType>({
         ];
     },
 });
-const responseStatusCard = reactive<tableCardType>({
+const responseStatusCard = reactive<cardType>({
     activeKey: '',
     columns: [
         {
@@ -220,7 +224,7 @@ const tabs = computed(() =>
         .map((item: any) => item.code + '')
         .filter((code: string) => code !== '400'),
 );
-const respParamsCard = reactive<tableCardType>({
+const respParamsCard = reactive<cardType>({
     columns: [
         {
             title: '参数名称',
@@ -242,9 +246,8 @@ const respParamsCard = reactive<tableCardType>({
             (item: any) => item.code === code,
         )?.schema;
 
-        const tableData = findData(schemaName);
+        const tableData = findData(props.schemas, schemaName);
-        respParamsCard.codeText = getCodeText(tableData, 3);
+        respParamsCard.codeText = getCodeText(props.schemas, tableData, 3);
-
         respParamsCard.tableData = tableData;
     },
 });
@@ -258,95 +261,18 @@ const getContent = (data: any) => {
 onMounted(() => {
     requestCard.getData();
     responseStatusCard.getData();
-});
+    watch(
-watch(
+        () => props.selectApi,
-    () => props.selectApi,
+        () => {
-    () => {
+            requestCard.getData();
-        requestCard.getData();
+            responseStatusCard.getData();
-        responseStatusCard.getData();
+        },
-    },
+    );
-);
 
-watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
+    watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
-    n[0] && respParamsCard.getData(n[0]);
+        n[0] && respParamsCard.getData(n[0]);
-});
-
-function findData(schemaName: string) {
-    const schemas = toRaw(props.schemas);
-    const basicType = ['string', 'integer', 'boolean'];
-
-    if (!schemaName || !schemas[schemaName]) {
-        return [];
-    }
-    const result: schemaObjType[] = [];
-    const schema = schemas[schemaName];
-    Object.entries(schema.properties).forEach((item: [string, any]) => {
-        const paramsType =
-            item[1].type ||
-            (item[1].$ref && item[1].$ref.split('/').pop()) ||
-            (item[1].items && item[1].items.$ref.split('/').pop()) ||
-            '';
-        const schemaObj: schemaObjType = {
-            paramsName: item[0],
-            paramsType,
-            desc: item[1].description || '',
-        };
-        if (!basicType.includes(paramsType))
-            schemaObj.children = findData(paramsType);
-        result.push(schemaObj);
     });
-
+});
-    return result;
-}
-function getCodeText(arr: schemaObjType[], level: number): object {
-    const result = {};
-    const schemas = toRaw(props.schemas);
-    arr.forEach((item) => {
-        switch (item.paramsType) {
-            case 'string':
-                result[item.paramsName] = '';
-                break;
-            case 'integer':
-                result[item.paramsName] = 0;
-                break;
-            case 'boolean':
-                result[item.paramsName] = true;
-                break;
-            case 'array':
-                result[item.paramsName] = [];
-                break;
-            case 'object':
-                result[item.paramsName] = '';
-                break;
-            default: {
-                const properties = schemas[item.paramsType]
-                    .properties as object;
-                const newArr = Object.entries(properties).map(
-                    (item: [string, any]) => ({
-                        paramsName: item[0],
-                        paramsType: level
-                            ? (item[1].$ref && item[1].$ref.split('/').pop()) ||
-                              (item[1].items &&
-                                  item[1].items.$ref.split('/').pop()) ||
-                              item[1].type ||
-                              ''
-                            : item[1].type,
-                    }),
-                );
-                result[item.paramsName] = getCodeText(newArr, level - 1);
-            }
-        }
-    });
-
-    return result;
-}
-
-type schemaObjType = {
-    paramsName: string;
-    paramsType: string;
-    desc?: string;
-    children?: schemaObjType[];
-};
 </script>
 
 <style lang="less" scoped>

src/views/system/Platforms/Api/components/ApiTest.vue

@@ -121,6 +121,7 @@ import InputCard from './InputCard.vue';
 import { cloneDeep, toLower } from 'lodash';
 import { FormInstance } from 'ant-design-vue';
 import server from '@/utils/request';
+import { findData, getCodeText } from '../utils';
 
 const props = defineProps<{
     selectApi: apiDetailsType;
@@ -238,92 +239,17 @@ function getDefaultParams() {
     if (!refStr.value) return ''; // schema不是Java中的类的话则不进行解析，直接结束
     const schemaName = refStr.value?.split('/').pop() as string;
     const type = schema.type || '';
-    const tableData = findData(schemaName);
+    const tableData = findData(props.schemas, schemaName);
-    if (type === 'array') {
-        return [getCodeText(tableData, 3)];
-    } else return getCodeText(tableData, 3);
-}
 
-function findData(schemaName: string) {
+    return type === 'array'
-    const schemas = toRaw(props.schemas);
+        ? [getCodeText(props.schemas, tableData, 3)]
-    const basicType = ['string', 'integer', 'boolean'];
+        : getCodeText(props.schemas, tableData, 3);
-
-    if (!schemaName || !schemas[schemaName]) {
-        return [];
-    }
-    const result: schemaObjType[] = [];
-    const schema = schemas[schemaName];
-    Object.entries(schema.properties).forEach((item: [string, any]) => {
-        const paramsType =
-            item[1].type ||
-            (item[1].$ref && item[1].$ref.split('/').pop()) ||
-            (item[1].items && item[1].items.$ref.split('/').pop()) ||
-            '';
-        const schemaObj: schemaObjType = {
-            paramsName: item[0],
-            paramsType,
-            desc: item[1].description || '',
-        };
-        if (!basicType.includes(paramsType))
-            schemaObj.children = findData(paramsType);
-        result.push(schemaObj);
-    });
-
-    return result;
-}
-function getCodeText(arr: schemaObjType[], level: number): object {
-    const result = {};
-    const schemas = toRaw(props.schemas);
-    arr.forEach((item) => {
-        switch (item.paramsType) {
-            case 'string':
-                result[item.paramsName] = '';
-                break;
-            case 'integer':
-                result[item.paramsName] = 0;
-                break;
-            case 'boolean':
-                result[item.paramsName] = true;
-                break;
-            case 'array':
-                result[item.paramsName] = [];
-                break;
-            case 'object':
-                result[item.paramsName] = '';
-                break;
-            default: {
-                const properties = schemas[item.paramsType]
-                    .properties as object;
-                const newArr = Object.entries(properties).map(
-                    (item: [string, any]) => ({
-                        paramsName: item[0],
-                        paramsType: level
-                            ? (item[1].$ref && item[1].$ref.split('/').pop()) ||
-                              (item[1].items &&
-                                  item[1].items.$ref.split('/').pop()) ||
-                              item[1].type ||
-                              ''
-                            : item[1].type,
-                    }),
-                );
-                result[item.paramsName] = getCodeText(newArr, level - 1);
-            }
-        }
-    });
-
-    return result;
 }
 
 type requestObj = {
     name: string;
     value: string;
 };
-type schemaObjType = {
-    paramsName: string;
-    paramsType: string;
-    desc?: string;
-    children?: schemaObjType[];
-};
 </script>
 
 <style lang="less" scoped>

src/views/system/Platforms/Api/typing.d.ts

@@ -29,4 +29,11 @@ export type apiDetailsType = {
  * appManger： 应用管理-赋权
  * home：应用管理-查看菜单，第三方首页
  */
-export type modeType = 'api'| 'appManger' | 'home'
+export type modeType = 'api'| 'appManger' | 'home'
+
+export type schemaObjType = {
+    paramsName: string;
+    paramsType: string;
+    desc?: string;
+    children?: schemaObjType[];
+};

src/views/system/Platforms/Api/utils.ts

@@ -0,0 +1,90 @@
+import { schemaObjType } from "./typing";
+
+
+/**
+ * 将对应实体转换为表格数据返回
+ * @param schemas 实体类map
+ * @param schemaName 实体类名称
+ */
+export function findData(schemas: object, schemaName: string) {
+    const basicType = ['string', 'integer', 'boolean'];
+
+    if (!schemaName || !schemas[schemaName]) {
+        return [];
+    }
+    const result: schemaObjType[] = [];
+    const schema = schemas[schemaName];
+    Object.entries(schema.properties).forEach((item: [string, any]) => {
+        const paramsType =
+            item[1].type ||
+            (item[1].$ref && item[1].$ref.split('/').pop()) ||
+            (item[1].items && item[1].items.$ref.split('/').pop()) ||
+            '';
+        const schemaObj: schemaObjType = {
+            paramsName: item[0],
+            paramsType,
+            desc: item[1].description || '',
+        };
+        if (!basicType.includes(paramsType))
+            schemaObj.children = findData(schemas, paramsType);
+        result.push(schemaObj);
+    });
+
+    return result;
+
+}
+/**
+ * 将字段信息数组转换为JSON代码
+ * @param schemas 对应的所有实体类
+ * @param arr 字段信息数组
+ * @param level 转换深度
+ */
+export function getCodeText(
+    schemas: object,
+    arr: schemaObjType[],
+    level: number,
+): object {
+    const result = {};
+    arr.forEach((item) => {
+        switch (item.paramsType) {
+            case 'string':
+                result[item.paramsName] = '';
+                break;
+            case 'integer':
+                result[item.paramsName] = 0;
+                break;
+            case 'boolean':
+                result[item.paramsName] = true;
+                break;
+            case 'array':
+                result[item.paramsName] = [];
+                break;
+            case 'object':
+                result[item.paramsName] = '';
+                break;
+            default: {
+                const properties = schemas[item.paramsType]
+                    .properties as object;
+                const newArr = Object.entries(properties).map(
+                    (item: [string, any]) => ({
+                        paramsName: item[0],
+                        paramsType: level
+                            ? (item[1].$ref && item[1].$ref.split('/').pop()) ||
+                            (item[1].items &&
+                                item[1].items.$ref.split('/').pop()) ||
+                            item[1].type ||
+                            ''
+                            : item[1].type,
+                    }),
+                );
+                result[item.paramsName] = getCodeText(
+                    schemas,
+                    newArr,
+                    level - 1,
+                );
+            }
+        }
+    });
+
+    return result;
+}