swagger文档树展示开发
This commit is contained in:
暮光：城中城
40
zyplayer-doc-ui/swagger-ui/src/views/doc/DocInfo.vue
Normal file
40
zyplayer-doc-ui/swagger-ui/src/views/doc/DocInfo.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<a-card style="width: 600px">
|
||||
<a-form :label-col="{span: 4}" :wrapper-col="{span: 20}">
|
||||
<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">
|
||||
{{swaggerDocInfo.contact.name}} {{swaggerDocInfo.contact.email}}
|
||||
<a :href="swaggerDocInfo.contact.url" target="_blank" v-if="swaggerDocInfo.contact.url">{{swaggerDocInfo.contact.url}}</a>
|
||||
</a-form-item>
|
||||
<a-form-item label="host">{{swaggerDoc.host}}</a-form-item>
|
||||
<a-form-item label="许可证" v-if="swaggerDocInfo.license">
|
||||
<a :href="swaggerDocInfo.license.url" target="_blank">{{swaggerDocInfo.license.name}}</a>
|
||||
</a-form-item>
|
||||
<a-form-item label="文档说明">
|
||||
<span v-html="swaggerDocInfo.description"></span>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'docInfo',
|
||||
components: {},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
swaggerDoc () {
|
||||
return this.$store.state.swaggerDoc || {};
|
||||
},
|
||||
swaggerDocInfo () {
|
||||
return this.$store.state.swaggerDoc.info || {};
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
@@ -29,11 +29,13 @@
|
||||
</a-form>
|
||||
<a-table :dataSource="docList" :columns="docListColumns" size="middle"
|
||||
:loading="docListLoading"
|
||||
:scroll="{ x: 1200, y: 'calc(100vh - 340px)' }">
|
||||
:scroll="{ x: 1400, y: 'calc(100vh - 340px)' }">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column.dataIndex === 'operation'">
|
||||
<a-button type="link">编辑</a-button>
|
||||
<a-button type="link" danger @click="deleteDoc(record)">删除</a-button>
|
||||
<a-button type="link" @click="editDoc(record)">编辑</a-button>
|
||||
<a-popconfirm title="确定要删除吗？" @confirm="deleteDoc(record)">
|
||||
<a-button type="link" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'docType'">
|
||||
<a-tag color="red" v-if="text === 1">URL添加</a-tag>
|
||||
@@ -84,7 +86,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toRefs, ref, onMounted } from 'vue';
|
||||
import { toRefs, ref, reactive, onMounted } from 'vue';
|
||||
import {zyplayerApi} from '../../api';
|
||||
|
||||
export default {
|
||||
@@ -118,6 +120,10 @@
|
||||
docType: 1, openVisit: 0, docStatus: 1,
|
||||
};
|
||||
};
|
||||
const editDoc = (record) => {
|
||||
docEdit.value = {...record};
|
||||
newDocVisible.value = true;
|
||||
};
|
||||
const updateDoc = async (id, docStatus, yn) => {
|
||||
zyplayerApi.swaggerDocUpdate({id, docStatus, yn}).then(res => {
|
||||
searchDocList();
|
||||
@@ -138,6 +144,7 @@
|
||||
openNewDoc,
|
||||
handleNewDocOk,
|
||||
deleteDoc,
|
||||
editDoc,
|
||||
newDocRules: {
|
||||
name: [{required: true, message: '请输入文档名称', trigger: 'change'}],
|
||||
docUrl: [{required: true, message: '请输入文档地址', trigger: 'change'}],
|
||||
@@ -154,16 +161,11 @@
|
||||
}, {
|
||||
title: '文档名称',
|
||||
dataIndex: 'name',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '文档类型',
|
||||
dataIndex: 'docType',
|
||||
width: 90,
|
||||
}, {
|
||||
title: '文档地址',
|
||||
dataIndex: 'docUrl',
|
||||
}, {
|
||||
title: '目标域名',
|
||||
dataIndex: 'rewriteDomain',
|
||||
}, {
|
||||
title: '开放访问',
|
||||
dataIndex: 'openVisit',
|
||||
@@ -172,6 +174,13 @@
|
||||
title: '状态',
|
||||
dataIndex: 'docStatus',
|
||||
width: 90,
|
||||
}, {
|
||||
title: '文档地址',
|
||||
dataIndex: 'docUrl',
|
||||
}, {
|
||||
title: '目标域名',
|
||||
dataIndex: 'rewriteDomain',
|
||||
width: 250,
|
||||
}, {
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
|
||||
@@ -1,33 +1,39 @@
|
||||
<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-tabs>
|
||||
<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-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'About',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
activePage: 'doc'
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
let path = this.$route.query.path;
|
||||
let docInfo = this.$store.state.docMap[path];
|
||||
if(!docInfo) {
|
||||
this.$message.error('没有找到对应的文档');
|
||||
return;
|
||||
}
|
||||
this.$store.commit('addTableName', {key: this.$route.fullPath, val: docInfo.name});
|
||||
},
|
||||
methods: {
|
||||
changePage(){
|
||||
import {toRefs, ref, reactive, onMounted} from 'vue';
|
||||
import { useRouter } 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()
|
||||
let activePage = ref('doc');
|
||||
onBeforeRouteUpdate(async (to, from) => {
|
||||
let path = to.query.path;
|
||||
let docInfo = store.state.swaggerTreePathMap[path];
|
||||
if (!docInfo) {
|
||||
message.error('没有找到对应的文档');
|
||||
return;
|
||||
}
|
||||
store.commit('addTableName', {key: to.fullPath, val: docInfo.summary});
|
||||
});
|
||||
const changePage = () => {
|
||||
|
||||
}
|
||||
return {
|
||||
activePage,
|
||||
changePage,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user