Skip to content

A
admin-base
Commit a06c333d authored by wangwei's avatar wangwei
Browse files
Options

系统管理 账号管理

parent 296c0147
Hide whitespace changes
Inline Side-by-side
Showing with 441 additions and 0 deletions
src/components/system/admin.vue 0 → 100644
View file @ a06c333d
<template>
<div class="admin">
<div class="head">
<el-button @click="add" plain type="success">新增角色</el-button>
</div>
<el-table
:data="adminList"
style="width: 100%">
<el-table-column
prop="id"
label="账号ID">
</el-table-column>
<el-table-column
prop="user_name"
label="用户名">
</el-table-column>
<el-table-column
prop="role_id"
label="角色">
</el-table-column>
<el-table-column
label="状态">
<template slot-scope="scope">
{{scope.row.status | adminStatus}}
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button size="mini" plain type="primary" @click="edit(scope.row)">
编辑
</el-button>
<el-button size="mini" type="warning" plain @click="editPW(scope.row)">
修改密码
</el-button>
<el-button size="mini" type="danger" plain @click="del(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="page-div">
<el-pagination
:current-page="nowPage"
layout="total , prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<el-dialog
:title="dialog.title"
center
append-to-body
:visible.sync="dialog.show"
width="30%">
<el-form ref="form" :rules="dialog.rules" :model="dialog.form" label-width="80px">
<el-form-item label="账号" prop="username" v-if="dialog.dialogType === 0">
<el-input v-model="dialog.form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password" v-if="dialog.dialogType === 2 || dialog.dialogType === 0">
<el-input type="password" v-model="dialog.form.password"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="surePassword" v-if="dialog.dialogType === 2 || dialog.dialogType === 0 ">
<el-input type="password" v-model="dialog.form.surePassword"></el-input>
</el-form-item>
<el-form-item label="角色" prop="role_id" v-if="dialog.dialogType !== 2">
<el-input v-model="dialog.form.role_id"></el-input>
</el-form-item>
<el-form-item label="简述" prop="desc" v-if="dialog.dialogType !== 2">
<el-input v-model="dialog.form.desc"></el-input>
</el-form-item>
<el-form-item label="状态" prop="status" v-if="dialog.dialogType === 1">
<el-select v-model="dialog.form.status" placeholder="请选择">
<el-option
v-for="item in dialog.select"
:key="item.code"
:label="item.value"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialog.show = false">取 消</el-button>
<el-button type="primary" @click="sub">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {getAdminListApi,editAdminListApi,addAdminListApi,delAdminListApi,editPasswordApi} from "../../service/api";
import {ADMINSTATUS} from "../../util/wordbook";
export default {
name: "admin",
data(){
// 表单验证
let usernameCheck=(rule, value, callback)=>{
if (value === '' && this.dialog.dialogType === 0) {
callback(new Error('请输入账号'));
} else {
callback();
}
};
let passCheck= (rule, value, callback) => {
if (value === '' && (this.dialog.dialogType === 0 || this.dialog.dialogType === 2 )) {
callback(new Error('请输入密码'));
} else {
if(this.dialog.form.surePassword !== '' && (this.dialog.dialogType === 0 || this.dialog.dialogType === 2 )){
this.$refs['form'].validateField('surePassword');
}
callback();
}
};
let surePassCheck= (rule, value, callback) => {
if(this.dialog.dialogType === 0 || this.dialog.dialogType === 2 ){
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.dialog.form.password) {
callback(new Error('两次输入密码不一致!'));
}else{
callback();
}
} else {
callback();
}
};
let roleIdCheck= (rule, value, callback) => {
if(this.dialog.dialogType === 0 || this.dialog.dialogType === 1 ){
if (value === '') {
callback(new Error('请输入角色'));
}
}else{
callback()
}
};
let descCheck= (rule, value, callback) => {
if(this.dialog.dialogType === 0 || this.dialog.dialogType === 1 ){
if (value === '') {
callback(new Error('请输入简述'));
}
}else{
callback()
}
};
return {
nowPage:1,
total:0,
adminList:[],
dialog:{
dialogType:0,
title:'新增账号',
show:false,
select:[{
code:0,
value:ADMINSTATUS['0']
},{
code:1,
value:ADMINSTATUS['1']
}],
rules:{
username:[{ validator: usernameCheck, trigger: 'blur' }],
password:[{ validator: passCheck, trigger: 'blur' }],
surePassword:[{ validator: surePassCheck, trigger: 'blur' }],
role_id:[{ validator: roleIdCheck, trigger: 'blur' }],
desc:[{ validator: descCheck, trigger: 'blur' }],
},
form:{
id:'',
username:'',
password:'',
surePassword:'',
role_id:'',
status:0,
desc:''
}
},
}
},
filters:{
adminStatus:function (value) {
return ADMINSTATUS[value]
},
},
created(){
this.getList()
},
methods:{
getList(){
getAdminListApi().then(res=>{
this.adminList = res.list
this.total=Number(res.total)
})
},
editPW(data){
this.dialog.form.id = data.id;
this.dialog.dialogType = 2;
this.dialog.title = '修改密码';
this.dialog.form.password = '';
this.dialog.form.surePassword = '';
this.dialog.show = true;
},
edit(data){
this.dialog.show = true;
this.dialog.dialogType=1;
this.dialog.form.id = data.id;
this.dialog.title = '编辑';
this.dialog.form.username = data.user_name;
this.dialog.form.password = '';
this.dialog.form.status = data.status;
this.dialog.form.role_id = data.role_id;
this.dialog.form.desc = data.desc
},
add(){
this.dialog.show = true;
this.dialog.dialogType=0;
this.dialog.form.id = '';
this.dialog.title = '新增';
this.dialog.form.username = '';
this.dialog.form.status = 0;
this.dialog.form.password = '';
this.dialog.form.role_id = '';
this.dialog.form.desc = ''
},
del(data){
this.$confirm('此操作将删除该账号?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delAdminListApi(data.id).then(res=>{
this.$message({
type: 'success',
message: '删除成功!'
});
});
this.getList()
});
},
sub(){
this.$refs['form'].validate((valid) => {
if(valid){
let dia = this.dialog;
if(dia.dialogType === 1){
let json = {
role_id:dia.form.role_id,
desc:dia.form.desc,
status:dia.form.status
};
editAdminListApi(dia.form.id,json).then(()=>{
this.$message({
type: 'success',
message: '修改成功!'
});
dia.show = false;
this.getList()
})
}else if(dia.dialogType === 0){
let json = {
role_id:dia.form.role_id,
desc:dia.form.desc,
passwd:dia.form.password,
username:dia.form.username
};
addAdminListApi(json).then(()=>{
this.$message({
type: 'success',
message: '添加成功!'
});
dia.show = false;
this.getList()
})
}else if(dia.dialogType === 2){
console.log(1)
let json = {
passwd_new:dia.form.password
}
editPasswordApi(dia.form.id,json).then(()=>{
this.$message({
type: 'success',
message: '修改成功!'
});
dia.show = false;
this.getList()
})
}
}
})
}
}
}
</script>
<style scoped lang="less">
.admin{
.head{
padding: 5px;
}
width: 100%;
padding: 10px;
.page-div{
text-align: center;
padding-top: 20px
}
}
</style>
src/components/system/adminDialog.vue 0 → 100644
View file @ a06c333d
<template>
<el-dialog
:title="dialog.title"
center
append-to-body
:visible.sync="dialog.show"
width="30%">
<el-form ref="dialog.form" :model="dialog.form" label-width="80px">
<el-form-item label="用户名" v-if="dialog.dialogType === 0">
<el-input v-model="dialog.form.username"></el-input>
</el-form-item>
<el-form-item label="密码" v-if="dialog.dialogType === 0">
<el-input v-model="dialog.form.password"></el-input>
</el-form-item>
<el-form-item label="角色">
<el-input v-model="dialog.form.role_id"></el-input>
</el-form-item>
<el-form-item label="简述">
<el-input v-model="dialog.form.desc"></el-input>
</el-form-item>
<el-form-item label="状态" v-if="dialog.dialogType === 1">
<el-select v-model="dialog.form.status" placeholder="请选择">
<el-option
v-for="item in dialog.select"
:key="item.code"
:label="item.value"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialog.show = false">取 消</el-button>
<el-button type="primary" @click="sub">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: "adminDialog"
}
</script>
<style scoped>
</style>
src/components/system/index.vue 0 → 100644
View file @ a06c333d
<template>
<div>
<transition name="el-fade-in">
<el-menu
style="float: left;height: 100%"
:unique-opened="true"
:default-active="`admin`"
:collapse="menuType">
<div class="menu-btn" @click="menuType = !menuType">
<span v-if="!menuType">收起</span>
<span v-if="menuType">展开</span>
</div>
<div v-for="data in menuList" :key="data.id" @click="toPath(data)">
<el-menu-item :index="data.name" >
<i :class="'iconfont '+data.icon"></i>
<span slot="title">{{data.value}}</span>
</el-menu-item>
</div>
</el-menu>
</transition>
<div class="content">
<router-view class="child-view"/>
</div>
</div>
</template>
<script>
export default {
data(){
return {
menuList:this.$store.state.menuList.find((a)=>{return a.name === 'system'}).children,
menuType:false,
menuIndex:'',
}
},
methods:{
//菜单跳转
toPath(data){
let router = data.routerName;
this.menuIndex = data.name;
this.$router.push({name:router})
}
},
//缓存为role则跳到role
activated(){
if(this.menuIndex === 'role'){
this.$router.push({name:'role'})
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.menu-btn{
text-align: center;
height: 30px;
line-height: 30px;
font-size: 12px;
background: #3a8ee6;
color: @main-font-color;
}
.content{
height: 100%;
display: flex;
}
</style>
src/components/system/role.vue 0 → 100644
View file @ a06c333d
<template>
<div>
</div>
</template>
<script>
export default {
name: "role",
data(){
return {
}
}
}
</script>
<style scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment