From 6728105539e3dd44e4f24e18851b5c076151462c Mon Sep 17 00:00:00 2001 From: easy <1358086367@qq.com> Date: Thu, 12 Jan 2023 17:39:02 +0800 Subject: [PATCH] =?UTF-8?q?update:=20api=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 7 +- src/components/Table/index.vue | 2 +- .../system/apiPage/components/ApiDoes.vue | 203 ++++++++++++++++-- .../system/apiPage/components/ApiTest.vue | 11 +- .../system/apiPage/components/ChooseApi.vue | 6 +- .../system/apiPage/components/LeftTree.vue | 3 +- src/views/system/apiPage/index.d.ts | 5 +- src/views/system/apiPage/index.vue | 13 +- 8 files changed, 224 insertions(+), 26 deletions(-) diff --git a/components.d.ts b/components.d.ts index f0d011ba..3e729ed1 100644 --- a/components.d.ts +++ b/components.d.ts @@ -10,11 +10,10 @@ declare module '@vue/runtime-core' { AAlert: typeof import('ant-design-vue/es')['Alert'] 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'] - ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel'] ADatePicker: typeof import('ant-design-vue/es')['DatePicker'] ADivider: typeof import('ant-design-vue/es')['Divider'] AEmpty: typeof import('ant-design-vue/es')['Empty'] @@ -29,12 +28,14 @@ declare module '@vue/runtime-core' { ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup'] 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'] ASwitch: typeof import('ant-design-vue/es')['Switch'] ATable: typeof import('ant-design-vue/es')['Table'] + ATabPane: typeof import('ant-design-vue/es')['TabPane'] + ATabs: typeof import('ant-design-vue/es')['Tabs'] ATimePicker: typeof import('ant-design-vue/es')['TimePicker'] ATooltip: typeof import('ant-design-vue/es')['Tooltip'] + ATree: typeof import('ant-design-vue/es')['Tree'] ATreeSelect: typeof import('ant-design-vue/es')['TreeSelect'] AUpload: typeof import('ant-design-vue/es')['Upload'] BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default'] diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue index d352dcc4..6ac325ad 100644 --- a/src/components/Table/index.vue +++ b/src/components/Table/index.vue @@ -15,7 +15,7 @@
-
+
@@ -49,11 +82,21 @@ const props = defineProps({ type: Object as PropType, required: true, }, + schemas: { + type: Object, + required: true, + }, }); const { selectApi } = toRefs(props); -const columns = { - request: [ +type tableCardType = { + columns: object[]; + tableData: object[]; + activeKey?: any; + getData?: any; +}; +const requestCard = reactive({ + columns: [ { title: '参数名', dataIndex: 'name', @@ -82,13 +125,138 @@ const columns = { scopedSlots: true, }, ], -}; + tableData: [], + getData: () => { + requestCard.tableData = props.selectApi.parameters; + }, +}); +const responseStatusCard = reactive({ + activeKey: '', + columns: [ + { + title: '状态码', + dataIndex: 'code', + key: 'code', + }, + { + title: '说明', + dataIndex: 'desc', + key: 'desc', + }, + { + title: 'schema', + dataIndex: 'schema', + key: 'schema', + }, + ], + tableData: [], + getData: () => { + if (!Object.keys(props.selectApi.responses).length) + return (responseStatusCard.tableData = []); + + const tableData = []; + Object.entries(props.selectApi.responses || {}).forEach((item: any) => { + const desc = item[1].description; + const schema = item[1].content['*/*'].schema.$ref?.split('/') || ''; + + tableData.push({ + code: item[0], + desc, + schema: schema && schema.pop(), + }); + }); + responseStatusCard.activeKey = tableData[0]?.code; + responseStatusCard.tableData = tableData; + }, +}); +const tabs = computed(() => + responseStatusCard.tableData + .map((item: any) => item.code + '') + .filter((code: string) => code !== '400'), +); +const respParamsCard = reactive({ + columns: [ + { + title: '参数名称', + dataIndex: 'name', + }, + { + title: '参数说明', + dataIndex: 'desc', + }, + { + title: '类型', + dataIndex: 'type', + }, + ], + tableData: [], + getData: (code: string) => { + type schemaObjType = { + paramsName: string; + paramsType: string; + desc: string; + children?: schemaObjType[]; + }; + + const schemaName = responseStatusCard.tableData.find( + (item: any) => item.code === code, + ).schema; + console.log(1212, schemaName); + const schemas = toRaw(props.schemas); + function findData(schemaName: string) { + if (!schemaName || schemas[schemaName]) { + console.log(schemaName, schemas); + return []; + } + const result: schemaObjType[] = []; + const schema = schemas[schemaName]; + const basicType = ['string', 'integer', 'boolean']; + 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); + }); + console.log(result); + + return result; + } + + respParamsCard.tableData = findData(schemaName); + // console.log(respParamsCard.tableData); + }, +}); -console.log(selectApi.value); const getContent = (data: any) => { - if (!data) return ''; - return Object.keys(data.content)[0]; + 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]); +}); \ No newline at end of file + diff --git a/src/views/system/apiPage/components/ChooseApi.vue b/src/views/system/apiPage/components/ChooseApi.vue index 24362336..bb6e5548 100644 --- a/src/views/system/apiPage/components/ChooseApi.vue +++ b/src/views/system/apiPage/components/ChooseApi.vue @@ -43,9 +43,9 @@ const columns = [ }, ]; const rowSelection: TableProps['rowSelection'] = { - // onChange: (selectedRowKeys, selectedRows) => { - // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); - // }, + onChange: (selectedRowKeys, selectedRows) => { + console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); + }, }; const jump = (row:object) => { diff --git a/src/views/system/apiPage/components/LeftTree.vue b/src/views/system/apiPage/components/LeftTree.vue index cbae4bea..e933c925 100644 --- a/src/views/system/apiPage/components/LeftTree.vue +++ b/src/views/system/apiPage/components/LeftTree.vue @@ -32,13 +32,14 @@ const getTreeData = () => { Promise.all(allPromise).then((values) => { values.forEach((item: any, i) => { tree[i].children = combData(item?.paths); + tree[i].schemas = item.components.schemas }); treeData.value = tree; }); }); }; const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => { - emits('select', node.node.dataRef); + emits('select', node.node.dataRef, node.node?.parent.node.schemas); }; onMounted(() => { diff --git a/src/views/system/apiPage/index.d.ts b/src/views/system/apiPage/index.d.ts index e206edd0..7937398b 100644 --- a/src/views/system/apiPage/index.d.ts +++ b/src/views/system/apiPage/index.d.ts @@ -1,9 +1,11 @@ export type treeNodeTpye = { name: string; key: string; + schemas?:object; link?: string; apiList?: object[]; children?: treeNodeTpye[]; + }; export type methodType = { [key: string]: object @@ -17,6 +19,7 @@ export type apiDetailsType = { url: string; method: string; summary: string; - parameters: []; + parameters: any[]; requestBody?: any; + responses:object; } \ No newline at end of file diff --git a/src/views/system/apiPage/index.vue b/src/views/system/apiPage/index.vue index cb82abca..397806a5 100644 --- a/src/views/system/apiPage/index.vue +++ b/src/views/system/apiPage/index.vue @@ -15,12 +15,12 @@ class="api-details" v-show="selectedApi.url && tableData.length > 0" > - 返回 - + @@ -40,7 +40,8 @@ import ApiDoes from './components/ApiDoes.vue'; import ApiTest from './components/ApiTest.vue'; const tableData = ref([]); -const treeSelect = (node: treeNodeTpye) => { +const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => { + schemas.value = nodeSchemas if (!node.apiList) return; const apiList: apiObjType[] = node.apiList as apiObjType[]; const table: any = []; @@ -61,10 +62,14 @@ const treeSelect = (node: treeNodeTpye) => { }; const activeKey = ref('does'); -const initSelectedApi = { +const schemas = ref({}); +const initSelectedApi:apiDetailsType = { url: '', method: '', summary: '', + parameters: [], + responses: {}, + requestBody: {} }; const selectedApi = ref(initSelectedApi);