feat(m6): add JSON template CRUD with versioning

This commit is contained in:
2026-05-25 01:36:40 +08:00
parent ae880c47b2
commit 46f28d2d97
8 changed files with 412 additions and 1 deletions
@@ -401,3 +401,20 @@ export function updateIdMapping(id, body) {
export function deleteIdMapping(id) {
return axios.delete(`/api/v1/integration/id-mappings/${id}`);
}
// —— I12-2 M6 JSON 模板 ——————————————————————
export function listJsonTemplates() {
return axios.get('/api/v1/integration/json-templates');
}
export function getJsonTemplate(id) {
return axios.get(`/api/v1/integration/json-templates/${id}`);
}
export function createJsonTemplate(body) {
return axios.post('/api/v1/integration/json-templates', body);
}
export function updateJsonTemplate(id, body) {
return axios.put(`/api/v1/integration/json-templates/${id}`, body);
}
export function deleteJsonTemplate(id) {
return axios.delete(`/api/v1/integration/json-templates/${id}`);
}
@@ -86,6 +86,12 @@ const routes = [
component: () => import("../views/IntegrationIdMappingView.vue"),
meta: { roles: ["SYS_ADMIN", "DEVELOPER"], title: "ID 映射" },
},
{
path: "integration/json-templates",
name: "integration-json-templates",
component: () => import("../views/IntegrationJsonTemplateView.vue"),
meta: { roles: ["SYS_ADMIN"], title: "JSON 模板" },
},
{
path: "callbacks/:id",
name: "callback-inbox-detail",
@@ -0,0 +1,189 @@
<template>
<el-card shadow="never">
<template #header>
<div class="toolbar">
<span class="title">JSON 模板</span>
<div class="actions">
<el-button type="primary" :loading="loading" @click="load">刷新</el-button>
<el-button type="success" @click="openCreate">新建模板</el-button>
</div>
</div>
</template>
<el-table v-loading="loading" :data="rows" stripe style="width: 100%">
<el-table-column prop="name" label="名称" min-width="160" show-overflow-tooltip />
<el-table-column prop="version" label="版本" width="80" />
<el-table-column label="Schema 版本" width="120">
<template #default="{ row }">{{ row.schemaVersion ?? row.schema_version ?? 1 }}</template>
</el-table-column>
<el-table-column prop="changeNotes" label="变更说明" min-width="200" show-overflow-tooltip>
<template #default="{ row }">{{ row.changeNotes ?? row.change_notes ?? "—" }}</template>
</el-table-column>
<el-table-column label="创建时间" width="180" show-overflow-tooltip>
<template #default="{ row }">{{ row.createdAt ?? row.created_at ?? "—" }}</template>
</el-table-column>
<el-table-column label="操作" width="160" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="openEdit(row)">编辑</el-button>
<el-button type="danger" link @click="onDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="680px" destroy-on-close @closed="resetForm">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" maxlength="128" show-word-limit placeholder="请输入模板名称" />
</el-form-item>
<el-form-item label="模板内容" prop="templateContent">
<el-input v-model="form.templateContent" type="textarea" :rows="10" placeholder="请输入 JSON 模板内容" />
</el-form-item>
<el-form-item label="变更说明" prop="changeNotes">
<el-input v-model="form.changeNotes" type="textarea" :rows="3" maxlength="512" show-word-limit placeholder="选填" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" :loading="saving" @click="submit">保存</el-button>
</template>
</el-dialog>
</el-card>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useAuthStore } from "../stores/auth";
import { listJsonTemplates, createJsonTemplate, updateJsonTemplate, deleteJsonTemplate } from "../api/platform";
import { apiErrorMessage } from "../utils/apiErrorMessage";
const auth = useAuthStore();
const loading = ref(false);
const saving = ref(false);
const rows = ref([]);
const dialogVisible = ref(false);
const editingId = ref(null);
const formRef = ref(null);
const form = reactive({
name: "",
templateContent: "",
changeNotes: "",
});
const rules = {
name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
templateContent: [{ required: true, message: "请输入模板内容", trigger: "blur" }],
};
const dialogTitle = computed(() => (editingId.value ? "编辑模板" : "新建模板"));
onMounted(async () => {
auth.restoreAxiosAuth();
await load();
});
async function load() {
loading.value = true;
try {
const { data } = await listJsonTemplates();
rows.value = Array.isArray(data) ? data : [];
} catch (e) {
ElMessage.error(apiErrorMessage(e, "加载 JSON 模板失败"));
rows.value = [];
} finally {
loading.value = false;
}
}
function openCreate() {
editingId.value = null;
resetForm();
dialogVisible.value = true;
}
function openEdit(row) {
editingId.value = row.id;
form.name = row.name ?? "";
form.templateContent = row.templateContent ?? row.template_content ?? "";
form.changeNotes = row.changeNotes ?? row.change_notes ?? "";
dialogVisible.value = true;
}
function resetForm() {
form.name = "";
form.templateContent = "";
form.changeNotes = "";
formRef.value?.resetFields?.();
}
async function submit() {
const f = formRef.value;
if (!f) return;
try {
await f.validate();
} catch {
return;
}
saving.value = true;
const payload = {
name: form.name.trim(),
templateContent: form.templateContent,
changeNotes: form.changeNotes?.trim() || undefined,
};
try {
if (editingId.value != null) {
await updateJsonTemplate(editingId.value, payload);
ElMessage.success("已保存");
} else {
await createJsonTemplate(payload);
ElMessage.success("已创建");
}
dialogVisible.value = false;
await load();
} catch (e) {
ElMessage.error(apiErrorMessage(e, "保存失败"));
} finally {
saving.value = false;
}
}
function onDelete(row) {
ElMessageBox.confirm(`确定删除模板「${row.name || row.id}」吗?`, "提示", {
type: "warning",
confirmButtonText: "删除",
cancelButtonText: "取消",
})
.then(async () => {
try {
await deleteJsonTemplate(row.id);
ElMessage.success("已删除");
await load();
} catch (e) {
ElMessage.error(apiErrorMessage(e, "删除失败"));
}
})
.catch(() => {});
}
</script>
<style scoped>
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.title {
font-weight: 600;
font-size: 16px;
}
.actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
</style>