<template>
|
<div class="app-container">
|
<!-- 查询和其他操作 -->
|
<div class="filter-container">
|
<el-input
|
v-model="listQuery.username"
|
clearable
|
class="filter-item"
|
style="width: 200px;"
|
placeholder="请输入管理员名称"
|
/>
|
<el-button v-permission="['sys:admin:list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
|
<el-button v-permission="['sys:admin:create']" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
|
|
</div>
|
|
<!-- 查询结果 -->
|
<el-table
|
v-loading="listLoading"
|
:data="list"
|
size="small"
|
element-loading-text="正在查询中。。。"
|
border
|
fit
|
highlight-current-row
|
>
|
<el-table-column align="center" label="管理员ID" prop="id" />
|
|
<el-table-column align="center" label="管理员名称" prop="username" />
|
|
<el-table-column align="center" label="管理员头像" prop="avatar">
|
<template slot-scope="scope">
|
<img v-if="scope.row.avatar" :src="scope.row.avatar" width="40" >
|
</template>
|
</el-table-column>
|
|
<el-table-column align="center" label="管理员角色" prop="roleIds">
|
<template slot-scope="scope">
|
<el-tag
|
v-for="roleId in scope.row.roleIds"
|
:key="roleId"
|
type="primary"
|
style="margin-right: 20px;"
|
>{{ formatRole(roleId) }}</el-tag>
|
</template>
|
</el-table-column>
|
|
<el-table-column align="center" label="操作" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button v-permission="['sys:admin:edit']" type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
|
<el-button v-permission="['sys:admin:delete']" type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="total>0"
|
:total="total"
|
:page.sync="listQuery.page"
|
:limit.sync="listQuery.limit"
|
@pagination="getList"
|
/>
|
|
<!-- 添加或修改对话框 -->
|
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
|
<el-form
|
ref="dataForm"
|
:rules="rules"
|
:model="dataForm"
|
status-icon
|
label-position="left"
|
label-width="100px"
|
style="width: 400px; margin-left:50px;"
|
>
|
<el-form-item label="登录名" prop="username">
|
<el-input :disabled="dialogStatus === 'update'" v-model="dataForm.username" />
|
</el-form-item>
|
<el-form-item label="密码" prop="password">
|
<el-input v-model="dataForm.password" type="password" auto-complete="off" />
|
</el-form-item>
|
<el-form-item label="手机号" prop="phone">
|
<el-input v-model="dataForm.phone" />
|
</el-form-item>
|
<el-form-item label="真实姓名" prop="realname">
|
<el-input v-model="dataForm.realname" />
|
</el-form-item>
|
<el-form-item label="授权角色" prop="roleIds">
|
<el-select v-model="dataForm.roleIds" multiple placeholder="请选择">
|
<el-option
|
v-for="item in roleOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
<el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确定</el-button>
|
<el-button v-else type="primary" @click="updateData">确定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
listAdmin,
|
createAdmin,
|
updateAdmin,
|
deleteAdmin
|
} from '@/api/admin'
|
import { roleOptions } from '@/api/role'
|
import { uploadPath } from '@/api/storage'
|
import { getToken } from '@/utils/auth'
|
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
|
export default {
|
name: 'Admin',
|
components: { Pagination },
|
data() {
|
return {
|
uploadPath,
|
list: null,
|
total: 0,
|
roleOptions: null,
|
listLoading: true,
|
listQuery: {
|
page: 1,
|
limit: 20,
|
username: undefined
|
},
|
dataForm: {
|
id: undefined,
|
username: undefined,
|
password: undefined,
|
avatar: undefined,
|
roleIds: []
|
},
|
dialogFormVisible: false,
|
dialogStatus: '',
|
textMap: {
|
update: '编辑',
|
create: '创建'
|
},
|
rules: {
|
username: [
|
{ required: true, message: '管理员名称不能为空', trigger: 'blur' }
|
],
|
password: [
|
{ required: true, message: '密码不能为空', trigger: 'blur' }
|
],
|
phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
|
realname: [
|
{ required: true, message: '真实姓名不能为空', trigger: 'blur' }
|
]
|
}
|
}
|
},
|
computed: {
|
headers() {
|
return {
|
ADMINTOKEN: getToken()
|
}
|
}
|
},
|
created() {
|
this.getList()
|
|
roleOptions().then(response => {
|
this.roleOptions = response.data.data
|
})
|
},
|
methods: {
|
formatRole(roleId) {
|
for (let i = 0; i < this.roleOptions.length; i++) {
|
if (roleId === this.roleOptions[i].value) {
|
return this.roleOptions[i].label
|
}
|
}
|
return ''
|
},
|
getList() {
|
this.listLoading = true
|
listAdmin(this.listQuery)
|
.then(response => {
|
this.list = response.data.data.items
|
this.total = response.data.data.total
|
this.listLoading = false
|
})
|
.catch(() => {
|
this.list = []
|
this.total = 0
|
this.listLoading = false
|
})
|
},
|
handleFilter() {
|
this.listQuery.page = 1
|
this.getList()
|
},
|
resetForm() {
|
this.dataForm = {
|
id: undefined,
|
username: undefined,
|
password: undefined,
|
avatar: undefined,
|
roleIds: []
|
}
|
},
|
uploadAvatar: function(response) {
|
this.dataForm.avatar = response.url
|
},
|
handleCreate() {
|
this.resetForm()
|
this.dialogStatus = 'create'
|
this.dialogFormVisible = true
|
this.$nextTick(() => {
|
this.$refs['dataForm'].clearValidate()
|
})
|
},
|
createData() {
|
this.$refs['dataForm'].validate(valid => {
|
if (valid) {
|
createAdmin(this.dataForm)
|
.then(response => {
|
this.list.unshift(response.data.data)
|
this.dialogFormVisible = false
|
this.$notify.success({
|
title: '成功',
|
message: '添加管理员成功'
|
})
|
})
|
.catch(response => {
|
this.$notify.error({
|
title: '失败',
|
message: response.data.errmsg
|
})
|
})
|
}
|
})
|
},
|
handleUpdate(row) {
|
this.dataForm = Object.assign({}, row)
|
this.dialogStatus = 'update'
|
this.dialogFormVisible = true
|
this.$nextTick(() => {
|
this.$refs['dataForm'].clearValidate()
|
})
|
},
|
updateData() {
|
this.$refs['dataForm'].validate(valid => {
|
if (valid) {
|
updateAdmin(this.dataForm)
|
.then(() => {
|
for (const v of this.list) {
|
if (v.id === this.dataForm.id) {
|
const index = this.list.indexOf(v)
|
this.list.splice(index, 1, this.dataForm)
|
break
|
}
|
}
|
this.dialogFormVisible = false
|
this.$notify.success({
|
title: '成功',
|
message: '更新管理员成功'
|
})
|
})
|
.catch(response => {
|
this.$notify.error({
|
title: '失败',
|
message: response.data.errmsg
|
})
|
})
|
}
|
})
|
},
|
handleDelete(row) {
|
this.$confirm('此操作将永久删除该管理员---' + row.username + '---, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteAdmin(row.id)
|
.then(response => {
|
this.$notify.success({
|
title: '成功',
|
message: '删除管理员成功'
|
})
|
const index = this.list.indexOf(row)
|
this.list.splice(index, 1)
|
})
|
.catch(response => {
|
this.$notify.error({
|
title: '失败',
|
message: response.data.errmsg
|
})
|
})
|
}).catch(() => {
|
return false
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.avatar-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: #20a0ff;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 120px;
|
height: 120px;
|
line-height: 120px;
|
text-align: center;
|
}
|
.avatar {
|
width: 145px;
|
height: 145px;
|
display: block;
|
}
|
</style>
|
