mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-11-04 05:00:25 +08:00
实现数据库节点管理
This commit is contained in:
GoEdgeLab
@@ -1,4 +1,4 @@
|
||||
Vue.component("label-on", {
|
||||
props: ["v-is-on"],
|
||||
template: '<div><span v-if="vIsOn" class="ui label tiny green basic">已启用</span><span v-if="!vIsOn" class="ui label tiny red basic">已关闭</span></div>'
|
||||
template: '<div><span v-if="vIsOn" class="ui label tiny green basic">已启用</span><span v-if="!vIsOn" class="ui label tiny red basic">已停用</span></div>'
|
||||
})
|
||||
71
web/views/@default/db/createPopup.html
Normal file
71
web/views/@default/db/createPopup.html
Normal file
@@ -0,0 +1,71 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>添加节点</h3>
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">节点名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="100" ref="focus"/>
|
||||
<p class="comment">给节点起一个容易识别的名称。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>主机地址<em>（Host）</em> *</td>
|
||||
<td>
|
||||
<input type="text" name="host" placeholder="" maxlength="100"/>
|
||||
<p class="comment">连接数据库的主机地址，通常是域名或者IP。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数据库端口<em>（Port）</em> *</td>
|
||||
<td>
|
||||
<input type="text" name="port" value="3306" maxlength="5" style="width:6em"/>
|
||||
<p class="comment">连接数据库的端口。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数据库名称<em>（Database）</em> *</td>
|
||||
<td>
|
||||
<input type="text" name="database" value="" maxlength="100" placeholder="比如 edge_logs"/>
|
||||
<p class="comment">要写入日志的数据库名称，需要有创建新表和读写数据的权限。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>用户名<em>（Username）</em> *</td>
|
||||
<td>
|
||||
<input type="text" name="username" value=""/>
|
||||
<p class="comment">连接数据库的用户名。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>密码<em>（Password）</em></td>
|
||||
<td>
|
||||
<input type="password" name="password" value=""/>
|
||||
<p class="comment">连接数据库的密码。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>详细描述</td>
|
||||
<td>
|
||||
<textarea rows="3" name="description"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>是否启用</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isOn" value="1" checked="checked"/>
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
3
web/views/@default/db/createPopup.js
Normal file
3
web/views/@default/db/createPopup.js
Normal file
@@ -0,0 +1,3 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyPopup
|
||||
})
|
||||
@@ -1,3 +1,31 @@
|
||||
{$layout}
|
||||
|
||||
<p class="ui message">此功能暂未开放，敬请期待。</p>
|
||||
<first-menu>
|
||||
<a href="" class="item" @click.prevent="createNode()">[添加节点]</a>
|
||||
</first-menu>
|
||||
|
||||
<p class="comment" v-if="nodes.length == 0">暂时还没有数据库节点。</p>
|
||||
|
||||
<table class="ui table selectable" v-if="nodes.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>节点名称</th>
|
||||
<th>连接地址</th>
|
||||
<th>数据库名</th>
|
||||
<th class="two wide">状态</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="node in nodes">
|
||||
<td>{{node.name}}</td>
|
||||
<td>{{node.host}}:{{node.port}}</td>
|
||||
<td>{{node.database}}</td>
|
||||
<td><label-on :v-is-on="node.isOn"></label-on></td>
|
||||
<td>
|
||||
<a href="" @click.prevent="updateNode(node.id)">修改</a>
|
||||
<a href="" @click.prevent="deleteNode(node.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="page" v-html="page"></div>
|
||||
37
web/views/@default/db/index.js
Normal file
37
web/views/@default/db/index.js
Normal file
@@ -0,0 +1,37 @@
|
||||
Tea.context(function () {
|
||||
// 添加节点
|
||||
this.createNode = function () {
|
||||
teaweb.popup("/db/createPopup", {
|
||||
height: "30em",
|
||||
callback: function () {
|
||||
teaweb.success("保存成功", function () {
|
||||
window.location.reload()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 修改节点
|
||||
this.updateNode = function (nodeId) {
|
||||
teaweb.popup("/db/updatePopup?nodeId=" + nodeId, {
|
||||
height: "30em",
|
||||
callback: function () {
|
||||
teaweb.success("保存成功", function () {
|
||||
window.location.reload()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除节点
|
||||
this.deleteNode = function (nodeId) {
|
||||
let that = this
|
||||
teaweb.confirm("确定要删除此数据库节点吗？", function () {
|
||||
that.$post(".delete")
|
||||
.params({
|
||||
nodeId: nodeId
|
||||
})
|
||||
.refresh()
|
||||
})
|
||||
}
|
||||
})
|
||||
72
web/views/@default/db/updatePopup.html
Normal file
72
web/views/@default/db/updatePopup.html
Normal file
@@ -0,0 +1,72 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>修改节点</h3>
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="nodeId" :value="node.id"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">节点名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="100" ref="focus" v-model="node.name"/>
|
||||
<p class="comment">给节点起一个容易识别的名称。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>主机地址<em>（Host）</em> *</td>
|
||||
<td>
|
||||
<input type="text" name="host" placeholder="" maxlength="100" v-model="node.host"/>
|
||||
<p class="comment">连接数据库的主机地址，通常是域名或者IP。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数据库端口<em>（Port）</em> *</td>
|
||||
<td>
|
||||
<input type="text" name="port" value="" maxlength="5" style="width:6em" v-model="node.port"/>
|
||||
<p class="comment">连接数据库的端口。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数据库名称<em>（Database）</em> *</td>
|
||||
<td>
|
||||
<input type="text" name="database" value="" maxlength="100" placeholder="比如 edge_logs" v-model="node.database"/>
|
||||
<p class="comment">要写入日志的数据库名称，需要有创建新表和读写数据的权限。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>用户名<em>（Username）</em> *</td>
|
||||
<td>
|
||||
<input type="text" name="username" value="" v-model="node.username"/>
|
||||
<p class="comment">连接数据库的用户名。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>密码<em>（Password）</em></td>
|
||||
<td>
|
||||
<input type="password" name="password" value="" v-model="node.password"/>
|
||||
<p class="comment">连接数据库的密码。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>详细描述</td>
|
||||
<td>
|
||||
<textarea rows="3" name="description" v-model="node.description"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>是否启用</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="isOn" value="1" v-model="node.isOn"/>
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
3
web/views/@default/db/updatePopup.js
Normal file
3
web/views/@default/db/updatePopup.js
Normal file
@@ -0,0 +1,3 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyPopup
|
||||
})
|
||||
Reference in New Issue
Block a user