11 changed files with 6783 additions and 9634 deletions
-
2config/index.js
-
0dist/.gitkeep
-
9608package-lock.json
-
136src/api/api.js
-
11src/main.js
-
2src/routes.js
-
326src/views/host/HostUser.vue
-
47src/views/host/Hosts.vue
-
67src/views/user/Users.vue
-
6216yarn.lock
9608
package-lock.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,326 @@ |
|||||
|
<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="getHostUserAll">查询</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="hostuserall" 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="hostname" label="主机名" width="120" sortable> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="username" label="用户名" width="120" sortable> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="sudo" label="Sudo权限" width="120" sortable> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="ctime" label="创建时间" min-width="180" sortable> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" min-width="150"> |
||||
|
<template slot-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> |
||||
|
<el-button size="small" @click="handleHostUsers(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="hostUsersFormVisible" :close-on-click-modal="false"> |
||||
|
<el-table :data="hostusers" 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="username" label="用户名" width="120" sortable> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="sudo" label="Sudo权限" min-width="120" sortable> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="ctime" label="创建时间" min-width="120" sortable> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</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, getHostUserList, getHostUserAll } from '../../api/api'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
filters: { |
||||
|
name: '' |
||||
|
}, |
||||
|
hostuserall: [], |
||||
|
hostusers: [], |
||||
|
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: '' |
||||
|
}, |
||||
|
|
||||
|
hostUsersFormVisible: false,//编辑界面是否显示 |
||||
|
hostUsersLoading: false, |
||||
|
//编辑界面数据 |
||||
|
hostUsersForm: { |
||||
|
}, |
||||
|
|
||||
|
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.getHostUserAll(); |
||||
|
}, |
||||
|
//获取用户列表 |
||||
|
getHostUserAll() { |
||||
|
let para = { |
||||
|
//page: this.page, |
||||
|
//name: this.filters.name |
||||
|
}; |
||||
|
this.listLoading = true; |
||||
|
//NProgress.start(); |
||||
|
getHostUserAll(para).then((res) => { |
||||
|
this.total = res.data.total; |
||||
|
this.hostuserall = 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.getHostUserAll(); |
||||
|
}); |
||||
|
}).catch(() => { |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
//显示编辑界面 |
||||
|
handleEdit: function (index, row) { |
||||
|
this.editFormVisible = true; |
||||
|
this.editForm = Object.assign({}, row); |
||||
|
}, |
||||
|
//显示主机用户界面 |
||||
|
handleHostUsers: function (index, row) { |
||||
|
this.hostUsersFormVisible = true; |
||||
|
this.hostUsersForm = Object.assign({}, row); |
||||
|
|
||||
|
let para = { |
||||
|
hostname: this.hostUsersForm.name |
||||
|
} |
||||
|
console.log(para) |
||||
|
getHostUserList(para).then((res) => { |
||||
|
this.hostusers = res.data; |
||||
|
console.log(res.data) |
||||
|
//NProgress.done(); |
||||
|
}); |
||||
|
}, |
||||
|
//显示新增界面 |
||||
|
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.getHostUserAll(); |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//新增 |
||||
|
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.getHostUserAll(); |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
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.getHostUserAll(); |
||||
|
}); |
||||
|
}).catch(() => { |
||||
|
|
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getHostUserAll(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
6216
yarn.lock
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue