17 changed files with 9964 additions and 113 deletions
-
2config/index.js
-
2index.html
-
9608package-lock.json
-
21src/api/api.js
-
4src/main.js
-
2src/mock/data/user.js
-
33src/routes.js
-
8src/views/Home.vue
-
9src/views/Login.vue
-
287src/views/host/Hosts.vue
-
4src/views/log/Log.vue
-
33src/views/nav2/Page4.vue
-
4src/views/nav2/Page5.vue
-
4src/views/nav3/Page6.vue
-
0src/views/user/Form.vue
-
56src/views/user/Users.vue
-
0src/views/user/user.vue
9608
package-lock.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,17 +1,30 @@ |
|||
import axios from 'axios'; |
|||
|
|||
let base = ''; |
|||
let url = 'http://192.168.1.44:8080'; |
|||
|
|||
export const requestLogin = params => { return axios.post(`${base}/login`, params).then(res => res.data); }; |
|||
let postFormType = { |
|||
headers: { |
|||
'Content-Type': 'application/x-www-form-urlencoded', |
|||
} |
|||
} |
|||
|
|||
// axios.defaults.crossDomain = true;
|
|||
// axios.defaults.withCredentials = true;
|
|||
|
|||
export const requestLogin = params => { return axios.post(`${url}/login`, params, postFormType).then(res => res.data); }; |
|||
|
|||
export const getUserList = params => { return axios.get(`${base}/user/list`, { params: params }); }; |
|||
|
|||
export const getUserListPage = params => { return axios.get(`${base}/user/listpage`, { params: params }); }; |
|||
export const getUserListPage = params => { return axios.get(`${url}/jump/users`, { params: params }, ); }; |
|||
|
|||
export const removeUser = params => { return axios.get(`${base}/user/remove`, { params: params }); }; |
|||
export const removeUser = params => { return axios.get(`${url}/jump/user/del`, { params: params }); }; |
|||
|
|||
export const batchRemoveUser = params => { return axios.get(`${base}/user/batchremove`, { params: params }); }; |
|||
|
|||
export const editUser = params => { return axios.get(`${base}/user/edit`, { params: params }); }; |
|||
|
|||
export const addUser = params => { return axios.get(`${base}/user/add`, { params: params }); }; |
|||
export const addUser = params => { return axios.get(`${url}/jump/user/add`, { params: params }); }; |
|||
|
|||
// 获取主机列表
|
|||
export const getHostList = params => { return axios.get(`${url}/jump/hosts`, { params: params }); }; |
|||
@ -0,0 +1,287 @@ |
|||
<template> |
|||
<section> |
|||
<!--工具条--> |
|||
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;"> |
|||
<el-form :inline="true" :model="filters"> |
|||
<el-form-item> |
|||
<el-input v-model="filters.name" placeholder="姓名"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" v-on:click="getHosts">查询</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="handleAdd">新增</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-col> |
|||
|
|||
<!--列表--> |
|||
<el-table :data="hosts" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"> |
|||
<el-table-column type="selection" width="55"> |
|||
</el-table-column> |
|||
<el-table-column type="index" width="60"> |
|||
</el-table-column> |
|||
<el-table-column prop="id" label="ID" width="120" sortable> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="主机名" width="120" sortable> |
|||
</el-table-column> |
|||
<el-table-column prop="ip" label="IP" width="120" sortable> |
|||
</el-table-column> |
|||
<el-table-column prop="port" label="端口" width="120" sortable> |
|||
</el-table-column> |
|||
<el-table-column prop="desc" label="描述" min-width="180" sortable> |
|||
</el-table-column> |
|||
<el-table-column prop="ctime" label="创建时间" min-width="180" sortable> |
|||
</el-table-column> |
|||
<el-table-column label="操作" width="150"> |
|||
<template scope="scope"> |
|||
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> |
|||
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!--工具条--> |
|||
<el-col :span="24" class="toolbar"> |
|||
<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button> |
|||
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;"> |
|||
</el-pagination> |
|||
</el-col> |
|||
|
|||
<!--编辑界面--> |
|||
<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false"> |
|||
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm"> |
|||
<el-form-item label="用户名(不可更改)" prop="name"> |
|||
<el-input v-model="editForm.name" :readonly=true></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="Sudo权限"> |
|||
<el-radio-group v-model="editForm.sudo"> |
|||
<el-radio class="radio" :label="0">unsudo</el-radio> |
|||
<el-radio class="radio" :label="1">sudo</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="描述"> |
|||
<el-input v-model="editForm.desc" auto-complete="I'm foolish"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click.native="editFormVisible = false">取消</el-button> |
|||
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<!--新增界面--> |
|||
<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false"> |
|||
<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm"> |
|||
<el-form-item label="用户名" prop="name"> |
|||
<el-input v-model="addForm.name" auto-complete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="desc"> |
|||
<el-input v-model="addForm.desc" auto-complete="I'm foolish"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click.native="addFormVisible = false">取消</el-button> |
|||
<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</section> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '../../common/js/util' |
|||
//import NProgress from 'nprogress' |
|||
import { getHostList, getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
filters: { |
|||
name: '' |
|||
}, |
|||
hosts: [], |
|||
total: 0, |
|||
page: 1, |
|||
listLoading: false, |
|||
sels: [],//列表选中列 |
|||
|
|||
editFormVisible: false,//编辑界面是否显示 |
|||
editLoading: false, |
|||
editFormRules: { |
|||
name: [ |
|||
{ required: true, message: '请输入姓名', trigger: 'blur' } |
|||
] |
|||
}, |
|||
//编辑界面数据 |
|||
editForm: { |
|||
id: 0, |
|||
name: '', |
|||
sex: -1, |
|||
age: 0, |
|||
birth: '', |
|||
addr: '' |
|||
}, |
|||
|
|||
addFormVisible: false,//新增界面是否显示 |
|||
addLoading: false, |
|||
addFormRules: { |
|||
name: [ |
|||
{ required: true, message: '请输入姓名', trigger: 'blur' } |
|||
] |
|||
}, |
|||
//新增界面数据 |
|||
addForm: { |
|||
name: '', |
|||
sex: -1, |
|||
age: 0, |
|||
birth: '', |
|||
addr: '' |
|||
} |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
//性别显示转换 |
|||
formatSex: function (row, column) { |
|||
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知'; |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.page = val; |
|||
this.getHosts(); |
|||
}, |
|||
//获取用户列表 |
|||
getHosts() { |
|||
let para = { |
|||
page: this.page, |
|||
name: this.filters.name |
|||
}; |
|||
this.listLoading = true; |
|||
//NProgress.start(); |
|||
getHostList(para).then((res) => { |
|||
this.total = res.data.total; |
|||
this.hosts = res.data; |
|||
this.listLoading = false; |
|||
console.log(res.data) |
|||
//NProgress.done(); |
|||
}); |
|||
}, |
|||
//TODO删除 |
|||
handleDel: function (index, row) { |
|||
this.$confirm('确认删除该记录吗?', '提示', { |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.listLoading = true; |
|||
//NProgress.start(); |
|||
let para = { name: row.name }; |
|||
removeUser(para).then((res) => { |
|||
this.listLoading = false; |
|||
//NProgress.done(); |
|||
this.$message({ |
|||
message: '删除成功', |
|||
type: 'success' |
|||
}); |
|||
this.getHosts(); |
|||
}); |
|||
}).catch(() => { |
|||
|
|||
}); |
|||
}, |
|||
//显示编辑界面 |
|||
handleEdit: function (index, row) { |
|||
this.editFormVisible = true; |
|||
this.editForm = Object.assign({}, row); |
|||
}, |
|||
//显示新增界面 |
|||
handleAdd: function () { |
|||
this.addFormVisible = true; |
|||
this.addForm = { |
|||
name: '', |
|||
sex: -1, |
|||
age: 0, |
|||
birth: '', |
|||
addr: '' |
|||
}; |
|||
}, |
|||
//编辑 |
|||
editSubmit: function () { |
|||
this.$refs.editForm.validate((valid) => { |
|||
if (valid) { |
|||
this.$confirm('确认提交吗？', '提示', {}).then(() => { |
|||
this.editLoading = true; |
|||
//NProgress.start(); |
|||
let para = Object.assign({}, this.editForm); |
|||
para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd'); |
|||
editUser(para).then((res) => { |
|||
this.editLoading = false; |
|||
//NProgress.done(); |
|||
this.$message({ |
|||
message: '提交成功', |
|||
type: 'success' |
|||
}); |
|||
this.$refs['editForm'].resetFields(); |
|||
this.editFormVisible = false; |
|||
this.getHosts(); |
|||
}); |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
//新增 |
|||
addSubmit: function () { |
|||
this.$refs.addForm.validate((valid) => { |
|||
if (valid) { |
|||
this.$confirm('确认提交吗？', '提示', {}).then(() => { |
|||
this.addLoading = true; |
|||
//NProgress.start(); |
|||
let para = Object.assign({}, this.addForm); |
|||
addUser(para).then((res) => { |
|||
this.addLoading = false; |
|||
//NProgress.done(); |
|||
this.$message({ |
|||
message: '提交成功', |
|||
type: 'success' |
|||
}); |
|||
this.$refs['addForm'].resetFields(); |
|||
this.addFormVisible = false; |
|||
this.getHosts(); |
|||
}); |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
selsChange: function (sels) { |
|||
this.sels = sels; |
|||
}, |
|||
//批量删除 |
|||
batchRemove: function () { |
|||
var ids = this.sels.map(item => item.id).toString(); |
|||
this.$confirm('确认删除选中记录吗？', '提示', { |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.listLoading = true; |
|||
//NProgress.start(); |
|||
let para = { ids: ids }; |
|||
batchRemoveUser(para).then((res) => { |
|||
this.listLoading = false; |
|||
//NProgress.done(); |
|||
this.$message({ |
|||
message: '删除成功', |
|||
type: 'success' |
|||
}); |
|||
this.getHosts(); |
|||
}); |
|||
}).catch(() => { |
|||
|
|||
}); |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getHosts(); |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,4 @@ |
|||
<template> |
|||
<section> |
|||
</section> |
|||
</template> |
|||
@ -1,33 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<h1>vuex 测试</h1> |
|||
Clicked: {{ getCount }} times |
|||
<button @click="increment">+</button> |
|||
<button @click="decrement">-</button> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { mapActions } from 'vuex' |
|||
|
|||
export default { |
|||
computed: { |
|||
// 使用对象展开运算符将 getters 混入 computed 对象中 |
|||
...mapGetters([ |
|||
'getCount' |
|||
// ... |
|||
]) |
|||
}, |
|||
methods: { |
|||
...mapActions([ |
|||
'increment', // 映射 this.increment() 为 this.$store.dispatch('increment') |
|||
'decrement' |
|||
]) |
|||
//...mapActions({ |
|||
// add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment') |
|||
//}) |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
@ -1,4 +0,0 @@ |
|||
<template> |
|||
<section>page5... |
|||
</section> |
|||
</template> |
|||
@ -1,4 +0,0 @@ |
|||
<template> |
|||
<section>page6... |
|||
</section> |
|||
</template> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue