dshclm
7 months ago
parent
82a4f9e2f7
commit
99be19adde
@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
||||
<head>
|
||||
<th:block th:include="include :: header('缓存监控')" />
|
||||
<th:block th:include="include :: element-css" />
|
||||
</head>
|
||||
<style>
|
||||
/* Override some defaults */
|
||||
html, body {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
/* The white background content wrapper */
|
||||
.container > .content {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
margin: 0 -20px;
|
||||
-webkit-border-radius: 10px 10px 10px 10px;
|
||||
-moz-border-radius: 10px 10px 10px 10px;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
|
||||
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
|
||||
}
|
||||
.login-form{
|
||||
margin: 0 auto;
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="container" id="app">
|
||||
<div class="content">
|
||||
<div class="row" style="height: 100%;">
|
||||
<div class="login-form">
|
||||
<h2 style="font-weight: bold">数据库备份</h2>
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item label="数据库账号" prop="username">
|
||||
<el-input v-model="ruleForm.username"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据库密码" prop="password">
|
||||
<el-input v-model="ruleForm.password"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据库IP" prop="hostname">
|
||||
<el-input v-model="ruleForm.hostname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据库端口" prop="port">
|
||||
<el-input v-model="ruleForm.port"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据库名称" prop="databaseName">
|
||||
<el-input v-model="ruleForm.databaseName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /container -->
|
||||
</body>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: element-js" />
|
||||
<script th:inline="javascript">
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data(){
|
||||
return {
|
||||
ruleForm: {
|
||||
username : '',
|
||||
password : '',
|
||||
hostname : '',
|
||||
port : '',
|
||||
databaseName: '',
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
{required: true, message: '请输入数据库账号', trigger: 'blur'},
|
||||
// {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入数据库密码', trigger: 'blur'},
|
||||
// {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
|
||||
],
|
||||
hostname: [
|
||||
{required: true, message: '请输入数据库Ip', trigger: 'blur'},
|
||||
// {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
|
||||
],
|
||||
port: [
|
||||
{required: true, message: '请输入数据库端口', trigger: 'blur'},
|
||||
// {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
|
||||
],
|
||||
databaseName: [
|
||||
{required: true, message: '请输入数据库名称', trigger: 'blur'},
|
||||
// {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: ctx + "monitor/backup/backups",
|
||||
data: this.ruleForm,
|
||||
success: function(data) {
|
||||
if (data.code == web_status.SUCCESS){
|
||||
$.modal.msgSuccess(data.msg);
|
||||
}else{
|
||||
$.modal.msgError(data.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in new issue