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'; |
import axios from 'axios'; |
||||
|
|
||||
let base = ''; |
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 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 batchRemoveUser = params => { return axios.get(`${base}/user/batchremove`, { params: params }); }; |
||||
|
|
||||
export const editUser = params => { return axios.get(`${base}/user/edit`, { 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