swagger查看页面路由交互开发

zyplayer-doc-ui/swagger-ui/src/views/doc/DocInfo.vue

@@ -1,6 +1,6 @@
 <template>
-	<a-card style="width: 600px">
-		<a-form :label-col="{span: 4}" :wrapper-col="{span: 20}">
+	<a-card>
+		<a-form :label-col="{span: 4}" :wrapper-col="{span: 20}" v-if="swaggerDocInfo">
 			<a-form-item label="标题">{{swaggerDocInfo.title}}</a-form-item>
 			<a-form-item label="版本">{{swaggerDocInfo.version}}</a-form-item>
 			<a-form-item label="作者" v-if="swaggerDocInfo.contact">
@@ -15,6 +15,7 @@
 				<span v-html="swaggerDocInfo.description"></span>
 			</a-form-item>
 		</a-form>
+		<div v-else style="text-align: center;">暂无文档信息，请先选择文档</div>
 	</a-card>
 </template>
 
@@ -30,7 +31,7 @@
 				return this.$store.state.swaggerDoc || {};
 			},
 			swaggerDocInfo () {
-				return this.$store.state.swaggerDoc.info || {};
+				return this.$store.state.swaggerDoc.info;
 			}
 		},
 		mounted() {

zyplayer-doc-ui/swagger-ui/src/views/doc/DocManage.vue

@@ -88,9 +88,11 @@
 <script>
     import { toRefs, ref, reactive, onMounted } from 'vue';
     import {zyplayerApi} from '../../api';
+    import {useStore} from 'vuex';
 
     export default {
         setup() {
+            const store = useStore()
             let docList = ref([]);
             let docListLoading = ref(false);
             let searchParam = ref({docType: '', openVisit: '', docStatus: ''});
@@ -109,6 +111,7 @@
                     zyplayerApi.swaggerDocAdd(docEdit.value).then(res => {
                         searchDocList();
                         newDocVisible.value = false;
+                        store.commit('addDocChangedNum');
                     });
                 }).catch(error => {
                     console.log('error', error);
@@ -127,6 +130,7 @@
             const updateDoc = async (id, docStatus, yn) => {
                 zyplayerApi.swaggerDocUpdate({id, docStatus, yn}).then(res => {
                     searchDocList();
+                    store.commit('addDocChangedNum');
                 });
             };
             const deleteDoc = async (row) => updateDoc(row.id, null, 0);

zyplayer-doc-ui/swagger-ui/src/views/doc/DocView.vue

@@ -1,30 +1,35 @@
 <template>
     <a-tabs v-model:activeKey="activePage" closable @tab-click="changePage" style="padding: 5px 10px 0;">
-        <a-tab-pane tab="接口说明" key="doc"/>
-        <a-tab-pane tab="在线调试" key="debug"/>
+        <a-tab-pane tab="接口说明" key="doc">
+            {{activePage}}
+        </a-tab-pane>
+        <a-tab-pane tab="在线调试" key="debug">
+            {{activePage}}
+        </a-tab-pane>
     </a-tabs>
 </template>
 
 <script>
-    import {toRefs, ref, reactive, onMounted} from 'vue';
-    import { useRouter } from "vue-router";
+    import {toRefs, ref, reactive, onMounted, onActivated} from 'vue';
+    import { useRouter, useRoute } from "vue-router";
     import {useStore} from 'vuex';
     import { message } from 'ant-design-vue';
     import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
 
     export default {
         setup() {
-            const router = useRouter();
-            const store = useStore()
+            const route = useRoute();
+            const store = useStore();
             let activePage = ref('doc');
-            onBeforeRouteUpdate(async (to, from) => {
-                let path = to.query.path;
+            onMounted(() => {
+                console.log('DocView onMounted', route.query);
+                let path = route.query.path + '.' + route.query.method;
                 let docInfo = store.state.swaggerTreePathMap[path];
                 if (!docInfo) {
                     message.error('没有找到对应的文档');
                     return;
                 }
-                store.commit('addTableName', {key: to.fullPath, val: docInfo.summary});
+                store.commit('addTableName', {key: route.fullPath, val: docInfo.summary});
             });
             const changePage = () => {