update: api配置组件替换、逻辑优化

src/global.d.ts

@@ -12,3 +12,4 @@ declare module '*.js';
 declare module '*.ts';
 declare module 'js-cookie';
 declare module 'jetlinks-ui-components';
+declare module 'vue3-json-viewer';

src/router/menu.ts

@@ -67,10 +67,10 @@ export default [
         path: '/form',
         component: () => import('@/views/demo/Form.vue')
     },
-    {
+    // {
-        path: '/system/Api',
+    //     path: '/system/Api',
-        component: () => import('@/views/system/Platforms/index.vue')
+    //     component: () => import('@/views/system/Platforms/index.vue')
-    },
+    // },
     // end: 测试用, 可删除
 
     // 初始化

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

@@ -4,7 +4,7 @@
             <h5>{{ selectApi.summary }}</h5>
             <div class="input">
                 <InputCard :value="selectApi.method" />
-                <a-input :value="selectApi?.url" disabled />
+                <j-input :value="selectApi?.url" disabled />
             </div>
         </div>
 
@@ -18,6 +18,14 @@
             <span>{{ `["/"]` }}</span>
         </p>
 
+        <div class="api-card" v-if="props.selectApi.description">
+            <h5>接口描述</h5>
+            <div>{{ props.selectApi.description }}</div>
+        </div>
+        <div class="api-card" v-if="requestCard.codeText">
+            <h5>请求示例</h5>
+            <JsonViewer :value="requestCard.codeText" copyable />
+        </div>
         <div class="api-card">
             <h5>请求参数</h5>
             <div class="content">
@@ -26,12 +34,13 @@
                     :dataSource="requestCard.tableData"
                     noPagination
                     model="TABLE"
+                    size="small"
                 >
                     <template #required="slotProps">
                         <span>{{ Boolean(slotProps.required) + '' }}</span>
                     </template>
                     <template #type="slotProps">
-                        <span>{{ slotProps.schema.type }}</span>
+                        <span>{{ slotProps?.schema.type }}</span>
                     </template>
                 </j-pro-table>
             </div>
@@ -44,16 +53,17 @@
                     :dataSource="responseStatusCard.tableData"
                     noPagination
                     model="TABLE"
+                    size="small"
                 >
                 </j-pro-table>
 
-                <a-tabs v-model:activeKey="responseStatusCard.activeKey">
+                <j-tabs v-model:activeKey="responseStatusCard.activeKey">
-                    <a-tab-pane
+                    <j-tab-pane
                         :key="key"
                         :tab="key"
                         v-for="key in tabs"
-                    ></a-tab-pane>
+                    ></j-tab-pane>
-                </a-tabs>
+                </j-tabs>
             </div>
         </div>
 
@@ -65,21 +75,19 @@
                     :dataSource="respParamsCard.tableData"
                     noPagination
                     model="TABLE"
+                    size="small"
                 >
                 </j-pro-table>
             </div>
 
-            <MonacoEditor
+            <JsonViewer :value="respParamsCard.codeText" copyable />
-                v-model:modelValue="codeText"
-                style="height: 300px; width: 100%"
-                theme="vs"
-            />
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import MonacoEditor from '@/components/MonacoEditor/index.vue';
+import { JsonViewer } from 'vue3-json-viewer';
+import 'vue3-json-viewer/dist/index.css';
 import type { apiDetailsType } from '../typing';
 import InputCard from './InputCard.vue';
 import { PropType } from 'vue';
@@ -98,7 +106,7 @@ const { selectApi } = toRefs(props);
 
 type tableCardType = {
     columns: object[];
-    tableData: object[];
+    tableData: any[];
     codeText?: any;
     activeKey?: any;
     getData?: any;
@@ -134,8 +142,36 @@ const requestCard = reactive<tableCardType>({
         },
     ],
     tableData: [],
+    codeText: undefined,
     getData: () => {
-        requestCard.tableData = props.selectApi.parameters;
+        if (!props.selectApi.requestBody)
+            return (requestCard.tableData = props.selectApi.parameters);
+        const schema =
+            props.selectApi.requestBody.content['application/json'].schema;
+        const schemaName = (schema.$ref || schema.items.$ref)?.split('/').pop();
+        const type = schema.type || '';
+        const tableData = findData(schemaName);
+        if (type === 'array') {
+            requestCard.codeText = [getCodeText(tableData, 3)];
+        } else requestCard.codeText = getCodeText(tableData, 3);
+        // console.clear();
+        // console.log(schemaName, tableData);
+
+        requestCard.tableData = [
+            {
+                name: schemaName[0].toLowerCase() + schemaName.substring(1),
+                description: schemaName,
+                in: 'body',
+                required: true,
+                schema: { type: type || schemaName },
+                children: tableData.map((item) => ({
+                    name: item.paramsName,
+                    description: item.desc,
+                    required: false,
+                    schema: { type: item.paramsType },
+                })),
+            },
+        ];
     },
 });
 const responseStatusCard = reactive<tableCardType>({
@@ -200,26 +236,43 @@ const respParamsCard = reactive<tableCardType>({
     tableData: [],
     codeText: '',
     getData: (code: string) => {
-        type schemaObjType = {
-            paramsName: string;
-            paramsType: string;
-            desc?: string;
-            children?: schemaObjType[];
-        };
-
         const schemaName = responseStatusCard.tableData.find(
             (item: any) => item.code === code,
         )?.schema;
+
+        const tableData = findData(schemaName);
+        respParamsCard.codeText = getCodeText(tableData, 3);
+
+        respParamsCard.tableData = tableData;
+    },
+});
+
+const getContent = (data: any) => {
+    if (data && data.content) {
+        return Object.keys(data.content || {})[0];
+    }
+    return '';
+};
+onMounted(() => {
+    requestCard.getData();
+    responseStatusCard.getData();
+});
+watch(
+    () => props.selectApi,
+    () => {
+        requestCard.getData();
+        responseStatusCard.getData();
+    },
+);
+
+watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
+    n[0] && respParamsCard.getData(n[0]);
+});
+
+function findData(schemaName: string) {
     const schemas = toRaw(props.schemas);
     const basicType = ['string', 'integer', 'boolean'];
 
-        const tableData = findData(schemaName);
-        const codeText = getCodeText(tableData, 3);
-
-        respParamsCard.tableData = tableData;
-        respParamsCard.codeText = JSON.stringify(codeText);
-
-        function findData(schemaName: string) {
     if (!schemaName || !schemas[schemaName]) {
         return [];
     }
@@ -245,7 +298,7 @@ const respParamsCard = reactive<tableCardType>({
 }
 function getCodeText(arr: schemaObjType[], level: number): object {
     const result = {};
-
+    const schemas = toRaw(props.schemas);
     arr.forEach((item) => {
         switch (item.paramsType) {
             case 'string':
@@ -261,7 +314,7 @@ const respParamsCard = reactive<tableCardType>({
                 result[item.paramsName] = [];
                 break;
             case 'object':
-                        result[item.paramsName] = {};
+                result[item.paramsName] = '';
                 break;
             default: {
                 const properties = schemas[item.paramsType]
@@ -270,53 +323,28 @@ const respParamsCard = reactive<tableCardType>({
                     (item: [string, any]) => ({
                         paramsName: item[0],
                         paramsType: level
-                                    ? (item[1].$ref &&
+                            ? (item[1].$ref && item[1].$ref.split('/').pop()) ||
-                                          item[1].$ref.split('/').pop()) ||
                               (item[1].items &&
-                                          item[1].items.$ref
+                                  item[1].items.$ref.split('/').pop()) ||
-                                              .split('/')
-                                              .pop()) ||
                               item[1].type ||
                               ''
                             : item[1].type,
                     }),
                 );
-                        result[item.paramsName] = getCodeText(
+                result[item.paramsName] = getCodeText(newArr, level - 1);
-                            newArr,
-                            level - 1,
-                        );
             }
         }
     });
 
     return result;
 }
-    },
-});
 
-const { codeText } = toRefs(requestCard);
+type schemaObjType = {
-
+    paramsName: string;
-const getContent = (data: any) => {
+    paramsType: string;
-    if (data && data.content) {
+    desc?: string;
-        return Object.keys(data.content || {})[0];
+    children?: schemaObjType[];
-    }
-    return '';
 };
-onMounted(() => {
-    requestCard.getData();
-    responseStatusCard.getData();
-});
-watch(
-    () => props.selectApi,
-    () => {
-        requestCard.getData();
-        responseStatusCard.getData();
-    },
-);
-
-watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
-    n[0] && respParamsCard.getData(n[0]);
-});
 </script>
 
 <style lang="less" scoped>

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

@@ -4,7 +4,7 @@
             <h5>{{ props.selectApi.summary }}</h5>
             <div class="input">
                 <InputCard :value="props.selectApi.method" />
-                <a-input :value="props.selectApi?.url" disabled />
+                <j-input :value="props.selectApi?.url" disabled />
                 <span class="send" @click="send">发送</span>
             </div>
         </div>
@@ -12,14 +12,9 @@
         <div class="api-card">
             <h5>请求参数</h5>
             <div class="content">
-                <!-- <VueJsoneditor
-                    height="400"
-                    mode="tree"
-                    v-model:text="requestBody.paramsText"
-                /> -->
                 <div class="table" v-if="paramsTable.length">
-                    <a-form :model="requestBody.params" ref="formRef" >
+                    <j-form :model="requestBody.params" ref="formRef">
-                        <a-table
+                        <j-table
                             :columns="requestBody.tableColumns"
                             :dataSource="paramsTable"
                             :pagination="false"
@@ -27,7 +22,7 @@
                         >
                             <template #bodyCell="{ column, record, index }">
                                 <template v-if="column.key === 'name'">
-                                    <a-form-item
+                                    <j-form-item
                                         :name="[
                                             'paramsTable',
                                             index +
@@ -42,13 +37,13 @@
                                             },
                                         ]"
                                     >
-                                        <a-input
+                                        <j-input
                                             v-model:value="record.name"
-                                        ></a-input>
+                                        ></j-input>
-                                    </a-form-item>
+                                    </j-form-item>
                                 </template>
                                 <template v-else-if="column.key === 'value'">
-                                    <a-form-item
+                                    <j-form-item
                                         :name="[
                                             'paramsTable',
                                             index +
@@ -63,10 +58,10 @@
                                             },
                                         ]"
                                     >
-                                        <a-input
+                                        <j-input
                                             v-model:value="record.value"
-                                        ></a-input>
+                                        ></j-input>
-                                    </a-form-item>
+                                    </j-form-item>
                                 </template>
                                 <template v-else-if="column.key === 'action'">
                                     <PermissionButton
@@ -82,60 +77,53 @@
                                     </PermissionButton>
                                 </template>
                             </template>
-                        </a-table>
+                        </j-table>
-                    </a-form>
+                    </j-form>
 
-                    <a-pagination
+                    <j-pagination
                         :pageSize="requestBody.pageSize"
                         v-model:current="requestBody.pageNum"
                         :total="requestBody.params.paramsTable.length"
                         hideOnSinglePage
                         style="text-align: center"
                     />
-                    <a-button
+                    <j-button
                         @click="requestBody.addRow"
                         style="width: 100%; text-align: center"
                     >
                         <AIcon type="PlusOutlined" />新增
-                    </a-button>
+                    </j-button>
                 </div>
                 <MonacoEditor
-                    v-model:modelValue="requestBody.paramsText"
+                    v-model:modelValue="requestBody.code"
                     style="height: 300px; width: 100%"
                     theme="vs"
+                    ref="editorRef"
                 />
             </div>
         </div>
         <div class="api-card">
             <h5>响应参数</h5>
             <div class="content">
-                <VueJsoneditor
+                <JsonViewer :value="responsesContent" copyable />
-                    height="400"
-                    mode="tree"
-                    v-model:text="responsesContent"
-                    :disabled="true"
-                />
-                <!-- <MonacoEditor
-                    v-model:modelValue="responsesContent"
-                    style="height: 300px; width: 100%"
-                    theme="vs"
-                /> -->
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import VueJsoneditor from 'vue3-ts-jsoneditor';
+import { JsonViewer } from 'vue3-json-viewer';
+import 'vue3-json-viewer/dist/index.css';
 import MonacoEditor from '@/components/MonacoEditor/index.vue';
 import type { apiDetailsType } from '../typing';
 import InputCard from './InputCard.vue';
 import { cloneDeep, toLower } from 'lodash';
 import { FormInstance } from 'ant-design-vue';
-import server from '@/utils/request'
+import server from '@/utils/request';
 
 const props = defineProps<{
     selectApi: apiDetailsType;
+    schemas: any;
 }>();
 const formRef = ref<FormInstance>();
 const requestBody = reactive({
@@ -163,10 +151,12 @@ const requestBody = reactive({
     pageSize: 10,
     pageNum: 1,
     params: {
-        paramsTable: cloneDeep(props.selectApi.parameters || []) as requestObj[],
+        paramsTable: cloneDeep(
+            props.selectApi.parameters || [],
+        ) as requestObj[],
     },
 
-    paramsText: '',
+    code: '',
 
     addRow: () => {
         if (paramsTable.value.length === 10)
@@ -188,49 +178,142 @@ const paramsTable = computed(() => {
     return requestBody.params.paramsTable.slice(startIndex, endIndex);
 });
 
-const responsesContent = ref('{"a":123}');
+const responsesContent = ref({});
-
+const editorRef = ref()
 const send = () => {
+    if (paramsTable.value.length)
         formRef.value &&
             formRef.value.validate().then(() => {
-            const methodName = toLower(props.selectApi.method)
+                _send();
+            });
+    else _send();
+};
+const _send = () => {
+    const methodName = toLower(props.selectApi.method);
     const methodObj = {
         get: 'get',
         post: 'post',
         patch: 'patch',
         put: 'put',
-                delete: 'remove'
+        delete: 'remove',
-            }
+    };
 
     let url = props.selectApi?.url;
-            const urlParams = {}
+    const urlParams = {};
-            requestBody.params.paramsTable.forEach(item=>{
+    requestBody.params.paramsTable.forEach((item) => {
-                if(methodName === 'get')
+        if (methodName === 'get') urlParams[item.name] = item.value;
-                    urlParams[item.name] = item.value
         if (url.includes(`{${item.name}}`))
-                    url = url.replace(`{${item.name}}`, item.value)
+            url = url.replace(`{${item.name}}`, item.value);
-            })
+    });
     const params = {
-                ...JSON.parse(requestBody.paramsText || '{}'),
+        ...JSON.parse(requestBody.code || '{}'),
-                ...urlParams
+        ...urlParams,
-            }
+    };
-
-            
-
     server[methodObj[methodName]](url, params).then((resp: any) => {
-                responsesContent.value = JSON.stringify(resp)
+        if (Object.keys(params).length === 0){
-            })
-
-
-
 
+            requestBody.code = JSON.stringify(getDefaultParams());
+            editorRef.value?.editorFormat()
+        }
+        responsesContent.value = resp;
     });
 };
 
+/**
+ * 获取默认参数
+ */
+function getDefaultParams() {
+    if (!props.selectApi.requestBody) return {};
+    const schema =
+        props.selectApi.requestBody.content['application/json'].schema;
+    const schemaName = (schema.$ref || schema.items.$ref)?.split('/').pop();
+    const type = schema.type || '';
+    const tableData = findData(schemaName);
+    if (type === 'array') {
+        return [getCodeText(tableData, 3)];
+    } else return getCodeText(tableData, 3);
+}
+
+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 requestObj = {
     name: string;
     value: string;
 };
+type schemaObjType = {
+    paramsName: string;
+    paramsType: string;
+    desc?: string;
+    children?: schemaObjType[];
+};
 </script>
 
 <style lang="less" scoped>
@@ -284,8 +367,6 @@ type requestObj = {
                 .jtable-body-header {
                     display: none;
                 }
-
-                
             }
             .table {
                 :deep(.ant-table-cell) {

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

@@ -1,5 +1,6 @@
 <template>
     <div class="choose-api-container">
+        <div class="table">
             <j-pro-table
                 :columns="columns"
                 :dataSource="props.tableData"
@@ -15,9 +16,10 @@
                     >
                 </template>
             </j-pro-table>
+        </div>
 
-        <a-button type="primary" @click="save" v-if="props.mode !== 'home'"
+        <j-button type="primary" @click="save" v-if="props.mode !== 'home'"
-            >保存</a-button
+            >保存</j-button
         >
     </div>
 </template>
@@ -88,8 +90,10 @@ watch(
 
 <style lang="less" scoped>
 .choose-api-container {
-    height: 100%;
+    .table {
-
+        max-height: calc(100vh - 260px);
+        overflow-y: auto;
+    }
     :deep(.jtable-body-header) {
         display: none !important;
     }

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

@@ -1,5 +1,5 @@
 <template>
-    <a-tree
+    <j-tree
         :tree-data="treeData"
         @select="clickSelectItem"
         v-model:selected-keys="selectedKeys"
@@ -9,7 +9,7 @@
         <template #title="{ name }">
             {{ name }}
         </template>
-    </a-tree>
+    </j-tree>
 </template>
 
 <script setup lang="ts">
@@ -141,9 +141,6 @@ const filterPath = (path: object, filterArr: string[]) => {
 
 <style lang="less">
 .left-tree-container {
-    border-right: 1px solid #e9e9e9;
-    height: calc(100vh - 150px);
-    overflow-y: auto;
     .ant-tree-list {
         .ant-tree-list-holder-inner {
             .ant-tree-switcher-noop {

src/views/system/Platforms/Api/index.vue

@@ -3,14 +3,15 @@
         <div class="top">
             <slot name="top" />
         </div>
-        <a-row :gutter="24" style="background-color: #fff; padding: 20px;margin: 0;">
+        <j-row :gutter="24">
-            <a-col
+            <j-col
                 :span="24"
                 v-if="props.showTitle"
                 style="font-size: 16px; margin-bottom: 48px"
-                >API文档</a-col
             >
-            <a-col :span="5">
+                API文档
+            </j-col>
+            <j-col :span="5" class="tree-content">
                 <LeftTree
                     @select="treeSelect"
                     :mode="props.mode"
@@ -18,8 +19,8 @@
                     :filter-array="treeFilter"
                     :code="props.code"
                 />
-            </a-col>
+            </j-col>
-            <a-col :span="19">
+            <j-col :span="19">
                 <HomePage v-show="showHome" />
                 <div class="url-page" v-show="!showHome">
                     <ChooseApi
@@ -35,26 +36,29 @@
                         class="api-details"
                         v-if="selectedApi.url && tableData.length > 0"
                     >
-                        <a-button
+                        <j-button
                             @click="selectedApi = initSelectedApi"
                             style="margin-bottom: 24px"
-                            >返回</a-button
+                            >返回</j-button
                         >
-                        <a-tabs v-model:activeKey="activeKey" type="card">
+                        <j-tabs v-model:activeKey="activeKey" type="card">
-                            <a-tab-pane key="does" tab="文档">
+                            <j-tab-pane key="does" tab="文档">
                                 <ApiDoes
                                     :select-api="selectedApi"
                                     :schemas="schemas"
                                 />
-                            </a-tab-pane>
+                            </j-tab-pane>
-                            <a-tab-pane key="test" tab="调试">
+                            <j-tab-pane key="test" tab="调试">
-                                <ApiTest :select-api="selectedApi" />
+                                <ApiTest
-                            </a-tab-pane>
+                                    :select-api="selectedApi"
-                        </a-tabs>
+                                    :schemas="schemas"
+                                />
+                            </j-tab-pane>
+                        </j-tabs>
                     </div>
                 </div>
-            </a-col>
+            </j-col>
-        </a-row>
+        </j-row>
     </div>
 </template>
 
@@ -76,7 +80,7 @@ const props = defineProps<{
     mode: modeType;
     showTitle?: boolean;
     hasHome?: boolean;
-    code?: string
+    code?: string;
 }>();
 const showHome = ref<boolean>(Boolean(props.hasHome));
 const tableData = ref([]);
@@ -127,7 +131,7 @@ function init() {
         getApiGranted_api(props.code as string).then((resp) => {
             selectedKeys.value = resp.result as string[];
             selectSourceKeys.value = [...(resp.result as string[])];
-        })
+        });
     } else if (props.mode === 'api') {
         apiOperations_api().then((resp) => {
             selectedKeys.value = resp.result as string[];
@@ -138,12 +142,20 @@ function init() {
         activeKey.value = 'does';
         selectedApi.value = initSelectedApi;
     });
+    watch(
+        () => selectedApi.value.url,
+        () => (activeKey.value = 'does'),
+    );
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .api-page-container {
-    height: 100%;
+    .tree-content {
-    background-color: transparent;
+        padding-bottom: 30px;
+        height: calc(100vh - 230px);
+        overflow-y: auto;
+        border-right: 1px solid #e9e9e9;
+    }
 }
 </style>

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

@@ -22,6 +22,7 @@ export type apiDetailsType = {
     parameters: any[];
     requestBody?: any;
     responses:object;
+    description?:string;
 }
 
 export type modeType = 'api'| 'appManger' | 'home'

src/views/system/Platforms/Setting/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <page-container>
+        <div class="api-container">
+            <Api mode="api">
+            <template #top>
+                <p>
+                    <AIcon
+                        type="ExclamationCircleOutlined"
+                        style="margin-right: 12px; font-size: 14px"
+                    />配置系统支持API赋权的范围
+                </p>
+            </template>
+        </Api>
+        </div>
+    </page-container>
+</template>
+
+<script setup lang="ts" name="Api">
+import Api from '../Api/index.vue';
+</script>
+
+<style lang="less" scoped>
+.api-container {
+    background-color: #fff;
+    padding: 24px;
+}
+
+</style>

src/views/system/Platforms/index.vue

@@ -16,5 +16,3 @@
 <script setup lang="ts" name="Platforms">
 import Api from './Api/index.vue';
 </script>
-
-<style scoped></style>