<template> <NuxtLayout> <div class='content'> <div class='container'> <form class='form' @submit.prevent> <div class='form-group'> <div class='form-group__label'> <label for="none"> <span>租户</span> <button class='primary' @click='handleSaveConfig("tenants")'>保存</button> </label> <p>租户 的配置信息</p> </div> <div class='form-group__body'> <div class='form-group__item'><span>租户ID</span><span><input v-model='form.tenants.id' /></span></div> <div class='form-group__item'><span>租户HOST</span><span><input v-model='form.tenants.host' /></span></div> <div class='form-group__item'><span>租户数据库Schema</span><span><input v-model='form.tenants["database-schema"]' /></span></div> <div class='form-group__item'><span>租户主要Schema</span><span><input v-model='form.tenants["primary-schema"]' /></span></div> </div> </div> <div class='form-group'> <div class='form-group__label'> <label for="none"> <span>调试</span> <button class='primary' @click='handleSaveConfig("debug")'>保存</button> </label> <p>调试 的配置信息</p> </div> <div class='form-group__body'> <div class='form-group__item'><span>远程调试机 HOST</span><span><input v-model='form.debug.host' /></span></div> </div> </div> <div class="form-group"> <div class="form-group__label"> <label for="none"> <span>其他配置</span> <div> <button type="button" style="margin-right: 10px;" @click.stop="handleAddCustomConfig">新增</button> <button type="button" class="primary" @click="handleSaveConfig('serverProperties')">保存</button> </div> </label> </div> <div class="form-group__body"> <table class="table"> <thead> <tr> <td>配置名称</td> <td>配置值</td> <td>操作列</td> </tr> </thead> <tbody> <tr v-for="item in form.serverProperties" :key="item.id"> <td><input type="text" v-model="item.key"></td> <td><input type="text" v-model="item.value"></td> <td><button @click="handleDeleteServerProperty(item)">删除</button></td> </tr> </tbody> </table> </div> </div> </form> </div> </div> </NuxtLayout> </template> <script lang="ts" setup> const form = ref<Record<string, any>>({ postgres: { visible: false, username: '', password: '', ip: '', port: '', database: '', schema: '' }, redis: { visible: false, ip: '', port: '' }, zookeeper: { visible: false, ip: '', port: '' }, rocketmq: { visible: false, ip: '', port: '' }, tenants: { visible: false, id: '', host: '', 'database-schema': '', 'primary-namespace': '' }, debug: { host: '' }, serverProperties: [] }) onMounted(() => { getData() }) function getData () { $fetch('/api/devops/v2/getProjectInfo').then((res: any) => { Object.keys(form.value).forEach(key => { if (res[key]) { form.value[key] = res[key] } }) }) } function handleSaveConfig (key: string) { const value = JSON.stringify(form.value[key]) $fetch('/api/user/setUserSetting', { method: 'post', body: { table: 'v2', key, value } }).then(() => { alert('保存成功') }).catch(() => { alert('保存失败!!!') }) } function handleEditConfig (key: string) { form.value[key].visible = true } function handleAddCustomConfig () { form.value.serverProperties.push({ id: Math.random(), key: '', value: '' }) } function handleDeleteServerProperty (item: any) { const index = form.value.serverProperties.indexOf(item) form.value.serverProperties.splice(index, 1) } </script> <style scoped> .content{ background-color: #EFEFEF; overflow: auto; height: 100%; padding: 24px; box-sizing: border-box; } .table{ width: 100%; } .table thead tr td:nth-of-type(3) { width: 100px; } .table input { width: 100%; box-sizing: border-box; } </style>