web/src/pages/dev/editor/index.vue

124 lines
3.7 KiB
Vue

<template>
<bread-page>
<div class="h-full grid grid-cols-[auto_auto_1fr]">
<div class="w-[300px]">
<a-tabs type="capsule" @change="onChange">
<a-tab-pane v-for="tag in tags" :key="tag.name" :title="tag.description">
<a-form :model="{}" layout="vertical">
<a-form-item label="新增接口">
<a-radio-group type="button" v-model="type.create">
<a-radio
v-for="route in routes.filter((i) => i.tag === tag.name)"
:value="route.operationId"
:key="route.path"
>
{{ route.description }}
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="修改接口">
<a-radio-group type="button" v-model="type.modify">
<a-radio
v-for="route in routes.filter((i) => i.tag === tag.name)"
:value="route.operationId"
:key="route.path"
>
{{ route.description }}
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="查询接口">
<a-radio-group type="button" v-model="type.select">
<a-radio
v-for="route in routes.filter((i) => i.tag === tag.name)"
:value="route.operationId"
:key="route.path"
>
{{ route.description }}
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="删除接口">
<a-radio-group type="button" v-model="type.delete">
<a-radio
v-for="route in routes.filter((i) => i.tag === tag.name)"
:value="route.operationId"
:key="route.path"
>
{{ route.description }}
</a-radio>
</a-radio-group>
</a-form-item>
</a-form>
</a-tab-pane>
</a-tabs>
</div>
<a-divider direction="vertical"></a-divider>
<div class="h-full grid grid-rows-[auto_1fr] gap-2">
<div>
<a-button type="primary" @click="onOpen">确定</a-button>
</div>
<editor-modal class="bg-gray-100" :content="content"></editor-modal>
</div>
</div>
</bread-page>
</template>
<script setup lang="ts">
import ejs from "ejs";
import doc from "./components/data.json";
import editorModal from "./components/editor.vue";
import template from "./components/page.ejs?raw";
const content = ref("");
const { tags, routes } = doc;
const type = ref({
create: undefined,
select: undefined,
modify: undefined,
delete: undefined,
});
const onChange = (value: string | number) => {
console.log(value);
};
const onOpen = () => {
const data = {
tag: "",
operationId: "",
create: {},
select: {},
modify: {},
delete: {},
};
for (const route of doc.routes) {
if (route.operationId === type.value.create) {
data.create = route;
}
if (route.operationId === type.value.select) {
data.select = route;
}
if (route.operationId === type.value.modify) {
data.modify = route;
}
if (route.operationId === type.value.delete) {
data.delete = route;
}
}
content.value = ejs.render(template, data);
};
</script>
<style lang="less" scoped></style>
<route lang="json">
{
"meta": {
"sort": 20010,
"title": "接口生成",
"icon": "icon-park-outline-code"
}
}
</route>