<template>
|
<div class="app-container">
|
<!-- 搜索区 ↓↓↓↓↓↓↓↓↓↓ -->
|
<el-form v-show="showSearch" ref="searchForm" :inline="true">
|
<el-form-item label="管理员搜索">
|
<el-input
|
v-model="keyWord"
|
placeholder="搜索管理员名称/账号"
|
clearable
|
size="small"
|
style="width: 240px"
|
maxlength="50"
|
@keyup.enter.native="reGetList"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="cyan" icon="el-icon-search" size="mini" @click="reGetList">搜索</el-button>
|
<el-button icon="el-icon-refresh" size="mini" @click="resetHandle">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<!-- 搜索区 ↑↑↑↑↑↑↑↑↑↑ -->
|
|
<!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ -->
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button
|
v-if="getAuthValueFN('sys_admin_add')"
|
type="primary"
|
icon="el-icon-plus"
|
size="mini"
|
@click="showAddAdminDialog"
|
>新增</el-button>
|
</el-col>
|
<right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
|
</el-row>
|
<!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ -->
|
|
<el-table :data="list">
|
<el-table-column type="index" label="序号" align="center" width="60" />
|
<el-table-column label="名称" prop="name" align="center" min-width="120" />
|
<el-table-column label="账号" prop="account" align="center" min-width="120" />
|
<el-table-column label="账号类型" prop="account" align="center" min-width="120">
|
<template slot-scope="scope">
|
{{ accountTypeOptions.find(item=>item.id == scope.row.type) ? accountTypeOptions.find(item=>item.id == scope.row.type).name : '' }}
|
</template>
|
</el-table-column>
|
<el-table-column label="角色" prop="roleName" align="center" min-width="120" />
|
<!-- <el-table-column label="最近登录时间" prop="loginTime" align="center" min-width="180" /> -->
|
<el-table-column label="状态" align="center" min-width="100">
|
<template slot-scope="scope">
|
<el-switch
|
v-if="scope.row.type!=0"
|
v-model="scope.row.isUse"
|
:active-value="1"
|
:inactive-value="0"
|
:disabled="!getAuthValueFN('sys_admin_edit')"
|
@change="handleStatusChange(scope.row)"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100">
|
<template slot-scope="scope">
|
<el-button
|
v-if="getAuthValueFN('sys_admin_edit')"
|
size="mini"
|
type="text"
|
icon="el-icon-edit"
|
@click="showEditAdminDialog(scope.row)"
|
>编辑</el-button>
|
<el-button
|
v-if="getAuthValueFN('sys_admin_del') && scope.row.type!=0"
|
size="mini"
|
type="text warn"
|
icon="el-icon-delete"
|
@click="handleDelete(scope.row)"
|
>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="total>0"
|
:total="total"
|
:page.sync="pageNum"
|
:limit.sync="pageSize"
|
@pagination="getList"
|
/>
|
|
<!-- 新增&编辑 -->
|
<el-dialog v-el-drag-dialog :title="adminDialogData.type==='add'?'新增管理员':'编辑管理员'" width="500px" :visible.sync="adminDialogVisible" append-to-body :close-on-click-modal="false">
|
<el-form ref="adminDialog" :model="adminDialogData" label-width="80px" :rules="rules" size="small">
|
<el-form-item label="名称" prop="name">
|
<el-input v-model="adminDialogData.name" placeholder="请输入名称" maxlength="50" />
|
</el-form-item>
|
<el-form-item label="账号" prop="account">
|
<el-input v-model="adminDialogData.account" placeholder="请输入帐号" maxlength="20" :disabled="adminDialogData.type!='add'" />
|
</el-form-item>
|
<el-form-item label="密码" :prop="adminDialogData.type==='add'||adminDialogData.password||adminDialogData.passwordSure?'password':'none'">
|
<el-input v-model="adminDialogData.password" type="password" placeholder="请输入密码" maxlength="20" />
|
</el-form-item>
|
<el-form-item label="确认密码" :prop="adminDialogData.type==='add'||adminDialogData.password||adminDialogData.passwordSure?'passwordSure':'none'">
|
<el-input v-model="adminDialogData.passwordSure" type="password" placeholder="请输入确认密码" maxlength="20" />
|
</el-form-item>
|
<!-- 账号类型 -->
|
<el-form-item label="账号类型" prop="accountType">
|
<el-select
|
v-model="adminDialogData.accountType"
|
clearable
|
placeholder="账号类型"
|
style="width: 100%"
|
>
|
<el-option v-for="item in accountTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<!-- 角色 -->
|
<el-form-item label="角色" prop="sysRoleId">
|
<el-select
|
v-model="adminDialogData.sysRoleId"
|
clearable
|
placeholder="角色"
|
style="width: 100%"
|
>
|
<el-option v-for="item in roleArr" :key="item.id" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="是否启用" prop="isUse">
|
<el-switch
|
v-model="adminDialogData.isUse"
|
:active-value="1"
|
:inactive-value="0"
|
/>
|
</el-form-item>
|
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="hideAdminDialog">取消</el-button>
|
<el-button type="primary" @click="submitAdmin(adminDialogData.type)">确定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'Admin',
|
data() {
|
const equalToPassword = (rule, value, callback) => {
|
if (this.adminDialogData.password !== value) {
|
callback(new Error('两次输入的密码不一致'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
showSearch: true, // 是否显示搜索区
|
keyWord: '',
|
|
list: [],
|
|
// 角色列表
|
roleArr: [],
|
// 账号类型
|
accountTypeOptions: [
|
{ name: '普通管理员', id: 1 },
|
{ name: '超级管理员', id: 0 }
|
],
|
|
adminDialogVisible: false,
|
adminDialogData: {},
|
|
// 分页 ↓↓↓↓↓↓↓↓↓↓
|
total: 0,
|
pageNum: 1,
|
pageSize: 20,
|
// 分页 ↑↑↑↑↑↑↑↑↑↑
|
|
// 表单校验
|
rules: {
|
name: [
|
{ required: true, message: '名称不能为空', trigger: 'change' }
|
],
|
account: [
|
{ required: true, message: '账号不能为空', trigger: 'change' }
|
],
|
password: [
|
{ required: true, message: '密码不能为空', trigger: 'change' },
|
{ min: 5, max: 20, message: '密码在5~20个字之间' }
|
],
|
passwordSure: [
|
{ required: true, message: '确认密码不能为空', trigger: 'change' },
|
{ required: true, validator: equalToPassword, trigger: 'change' }
|
],
|
sysRoleId: [
|
{ required: true, message: '角色不能为空', trigger: 'change' }
|
],
|
accountType: [
|
{ required: true, message: '账号类型不能为空', trigger: 'change' }
|
],
|
isUse: [
|
{ required: true, message: '是否启用不能为空', trigger: 'change' }
|
]
|
}
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
// 初始化
|
init() {
|
this.getList()
|
this.getRoleList()
|
},
|
|
// 获取角色列表
|
getRoleList() {
|
this.postFN({
|
url: 'admin/role/list',
|
params: {
|
pageNum: 1,
|
pageSize: 9999
|
},
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
list: [{
|
id: 'xxx',
|
name: '野马发'
|
}]
|
}
|
}
|
}, (inf) => {
|
this.roleArr = inf.list && inf.list.filter(item => item.isUse === 1) || []
|
})
|
},
|
|
// 获取列表
|
getList() {
|
var { pageNum, pageSize, keyWord } = this
|
this.postFN({
|
url: 'admin/list',
|
params: {
|
pageNum: pageNum,
|
pageSize: pageSize,
|
keyWord: keyWord
|
},
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
list: [{
|
id: 'xxx',
|
account: 'xasdasd2123123',
|
name: '野马发',
|
roleName: '超级管理员',
|
tel: '13760749294',
|
loginTime: '2020-08-08 12:10:10',
|
isUse: 1
|
}],
|
total: 100
|
}
|
}
|
}, (inf) => {
|
this.list = inf.list || []
|
this.total = inf.total
|
})
|
},
|
// 重新获取列表
|
reGetList() {
|
this.pageNum = 1
|
this.getList()
|
},
|
// 重置
|
resetHandle() {
|
this.keyWord = ''
|
this.reGetList()
|
},
|
// 修改状态
|
handleStatusChange(item) {
|
const text = item.isUse === 1 ? '启用' : '停用'
|
this.$confirm('确认要' + text + '"' + item.roleName + '"角色吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.postFN({
|
url: 'admin/editUse',
|
params: {
|
id: item.id
|
},
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {}
|
}
|
}, () => {
|
this.$messageSuc(text + '成功')
|
})
|
}).catch(() => {
|
item.isUse = item.isUse === 1 ? 0 : 1
|
})
|
},
|
// 删除
|
handleDelete(item) {
|
// 打开二次确认弹窗
|
this.$confirm('是否确认删除该帐号?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
// 确定回调
|
this.postFN({
|
url: 'admin/delete/one',
|
params: {
|
id: item.id
|
},
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {}
|
}
|
}, () => {
|
this.getList()
|
this.$messageSuc('删除成功')
|
})
|
}).catch(() => {})
|
},
|
|
// 打开新增分类弹窗
|
showAddAdminDialog() {
|
var adminDialogData = {
|
type: 'add',
|
name: '',
|
account: '',
|
password: '',
|
passwordSure: '',
|
sysRoleId: '',
|
isUse: 1,
|
accountType: 1
|
}
|
this.adminDialogVisible = true
|
this.$nextTick(() => {
|
this.adminDialogData = adminDialogData
|
this.$refs['adminDialog'].resetFields()
|
})
|
},
|
// 打开编辑分类弹框
|
showEditAdminDialog(item) {
|
var adminDialogData = {
|
type: 'edit',
|
name: item.name,
|
account: item.account,
|
password: '',
|
passwordSure: '',
|
sysRoleId: item.roId,
|
id: item.id,
|
isUse: item.isUse,
|
accountType: item.type
|
}
|
this.adminDialogVisible = true
|
this.$nextTick(() => {
|
this.adminDialogData = adminDialogData
|
this.$refs['adminDialog'].resetFields()
|
})
|
},
|
// 关闭编辑弹窗
|
hideAdminDialog() {
|
this.adminDialogData = {}
|
this.adminDialogVisible = false
|
},
|
// 提交新增&编辑
|
submitAdmin(type) {
|
this.$refs['adminDialog'].validate(valid => {
|
if (valid) {
|
var { adminDialogData } = this
|
var params = {
|
name: adminDialogData.name,
|
account: adminDialogData.account,
|
sysAdRoleId: adminDialogData.sysRoleId,
|
isUse: adminDialogData.isUse,
|
type: adminDialogData.accountType
|
}
|
if (adminDialogData.password) params.password = adminDialogData.password
|
var isAdd = adminDialogData.type === 'add'
|
var url = isAdd ? 'admin/add' : 'admin/update'
|
|
!isAdd && (params.id = adminDialogData.id)
|
|
this.postFN({
|
url: url,
|
params: params,
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {}
|
}
|
}, () => {
|
this.$messageSuc('保存成功')
|
this.hideAdminDialog()
|
isAdd ? this.reGetList() : this.getList()
|
})
|
}
|
})
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style>
|
