TRKJ/EdgeAdmin
2
0
Fork 0
mirror of https://github.com/TeaOSLab/EdgeAdmin.git synced 2025-11-04 13:10:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

实现数据库节点管理

Browse Source
This commit is contained in:
GoEdgeLab
2020-10-08 17:54:57 +08:00
parent ab4452b37f
commit 1b47a0173c
14 changed files with 440 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
web/views/@default/db/createPopup.html Normal file
View 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
View File

@@ -0,0 +1,3 @@
Tea.context(function () {
this.success = NotifyPopup
})

30
web/views/@default/db/index.html
View File

@@ -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> &nbsp;
<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
View 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
View 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
View File

@@ -0,0 +1,3 @@
Tea.context(function () {
this.success = NotifyPopup
})