完善管理员编辑功能
This commit is contained in:
zhl
parent
e4648ca4f7
commit
ab8019b40a
@ -174,5 +174,9 @@ export default {
|
||||
showSidebarLogo: '显示侧边栏 Logo',
|
||||
fixedHeader: '固定 Header',
|
||||
sidebarTextTheme: '侧边栏文字主题色'
|
||||
},
|
||||
admin: {
|
||||
addAdmin: '新增',
|
||||
editAdmin: '编辑'
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,30 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- filter -->
|
||||
<el-form ref="filterForm" :inline="true" :model="filterForm" class="filter">
|
||||
<el-form-item label="关键字" prop="key">
|
||||
<el-input v-model="filterForm.key" placeholder="关键字"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色">
|
||||
<el-select
|
||||
v-model="filterForm.role"
|
||||
placeholder="请选择角色"
|
||||
class="w100"
|
||||
>
|
||||
<el-option value="">所有</el-option>
|
||||
<el-option
|
||||
v-for="item in roleList"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.key"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="search">查询</el-button>
|
||||
<el-button @click="resetForm('filterForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleCreateAdmin"
|
||||
@ -8,7 +33,8 @@
|
||||
</el-button>
|
||||
|
||||
<el-table
|
||||
:data="adminList"
|
||||
v-loading="isLoad"
|
||||
:data="tableData"
|
||||
style="width: 100%;margin-top:30px;"
|
||||
border
|
||||
>
|
||||
@ -28,12 +54,24 @@
|
||||
{{row.showname}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sex"
|
||||
align="center"
|
||||
label="性别"
|
||||
:formatter="formSex"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="角色"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
{{ row.roles.join(',') }}
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
v-for="(item, index) in scope.row.roles"
|
||||
:key="index"
|
||||
size="small"
|
||||
style="margin-right: 10px;"
|
||||
>{{ formatRole(item) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
@ -66,20 +104,34 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- pagination -->
|
||||
<el-pagination
|
||||
:hide-on-single-page="false"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[5, 10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="dataCount"
|
||||
class="al-r"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
:title="dialogType==='edit'?'Edit Admin':'New Admin'"
|
||||
>
|
||||
<el-form
|
||||
:model="record"
|
||||
ref="modalForm"
|
||||
:rules="modalRules"
|
||||
label-width="80px"
|
||||
label-position="left"
|
||||
>
|
||||
<el-form-item label="用户名">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input
|
||||
v-model="record.username"
|
||||
placeholder="用户名"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" v-if="dialogType==='edit'">
|
||||
@ -96,7 +148,7 @@
|
||||
placeholder="密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示名">
|
||||
<el-form-item label="显示名" prop="showname">
|
||||
<el-input
|
||||
v-model="record.showname"
|
||||
placeholder="显示名"
|
||||
@ -104,22 +156,23 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="性别">
|
||||
<el-radio-group v-model="record.sex">
|
||||
<el-radio label="0" >未指定</el-radio>
|
||||
<el-radio label="1" >男</el-radio>
|
||||
<el-radio label="2" >女</el-radio>
|
||||
<el-radio label="0">未指定</el-radio>
|
||||
<el-radio label="1">男</el-radio>
|
||||
<el-radio label="2">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色">
|
||||
<el-checkbox-group v-model="record.roles">
|
||||
<el-checkbox v-for="role in roleList"
|
||||
:key="role.key"
|
||||
:label="role.key"
|
||||
name="type"
|
||||
>{{role.name}}</el-checkbox>
|
||||
:label="role.key"
|
||||
name="type"
|
||||
>{{role.name}}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="锁定">
|
||||
<el-switch v-model="record.locked" />
|
||||
<el-switch v-model="record.locked"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
@ -133,7 +186,7 @@
|
||||
<div style="text-align:right;">
|
||||
<el-button
|
||||
type="danger"
|
||||
@click="dialogVisible=false"
|
||||
@click="closeModal"
|
||||
>
|
||||
{{$t('permission.cancel')}}
|
||||
</el-button>
|
||||
@ -153,7 +206,7 @@ import { cloneDeep } from 'lodash'
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { getRoles } from '@/api/roles'
|
||||
import TagInput from '@/components/TagInput/index.vue'
|
||||
import { getUsers, deleteAdmin, saveAdmin } from '@/api/admins'
|
||||
import { deleteAdmin, getUsers, saveAdmin } from '@/api/admins'
|
||||
import { IRole } from '@/views/system/role.vue'
|
||||
|
||||
interface IAdmin {
|
||||
@ -189,23 +242,102 @@ const defaultAdmin: IAdmin = {
|
||||
export default class extends Vue {
|
||||
private record = Object.assign({}, defaultAdmin)
|
||||
private adminList: IAdmin[] = []
|
||||
private tableData: IAdmin[] = []
|
||||
private roleList: IRole[] = []
|
||||
private dialogVisible = false
|
||||
private dialogType = 'new'
|
||||
private checkStrictly = false
|
||||
private isLoad = false
|
||||
// pagination
|
||||
private currentPage = 1
|
||||
private pageSize = 5
|
||||
private dataCount = 0
|
||||
private defaultProps = {
|
||||
children: 'children',
|
||||
label: 'title'
|
||||
}
|
||||
private filterForm = {
|
||||
key: '',
|
||||
role: ''
|
||||
}
|
||||
private modalRules = {
|
||||
username: [{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
|
||||
message: '用户名不支持特殊字符',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
showname: [{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
|
||||
message: '显示名不支持特殊字符',
|
||||
trigger: 'blur'
|
||||
}]
|
||||
}
|
||||
|
||||
created() {
|
||||
this.getRecords()
|
||||
this.getAllRole()
|
||||
}
|
||||
|
||||
private search() {
|
||||
this.tableData = this.filterData()
|
||||
this.currentPage = 1
|
||||
}
|
||||
|
||||
private filterData() {
|
||||
let result = [...this.adminList]
|
||||
if (this.filterForm.key) {
|
||||
result = result.filter(user => {
|
||||
let reg = new RegExp(this.filterForm.key)
|
||||
return (reg.test(user.showname)) || (reg.test(user.username))
|
||||
})
|
||||
}
|
||||
if (this.filterForm.role) {
|
||||
result = result.filter(user => {
|
||||
return user.roles.indexOf(this.filterForm.role) >= 0
|
||||
})
|
||||
}
|
||||
this.dataCount = result.length
|
||||
return result
|
||||
}
|
||||
|
||||
private resetForm(formName: string) {
|
||||
const ref: any = this.$refs[formName]
|
||||
ref.resetFields()
|
||||
}
|
||||
|
||||
// pagination
|
||||
private sizeChange(val: number) {
|
||||
this.pageSize = val
|
||||
this.sliceData()
|
||||
}
|
||||
|
||||
private pageChange(val: number) {
|
||||
this.currentPage = val
|
||||
this.sliceData()
|
||||
}
|
||||
|
||||
private sliceData() {
|
||||
// 满足过滤条件 -> 分页
|
||||
const data = this.filterData()
|
||||
this.tableData = data.slice(
|
||||
(this.currentPage - 1) * this.pageSize,
|
||||
this.currentPage * this.pageSize
|
||||
)
|
||||
}
|
||||
|
||||
private async getRecords() {
|
||||
this.isLoad = true
|
||||
const { data } = await getUsers({ /* Your params here */ })
|
||||
this.adminList = data
|
||||
this.dataCount = data.length
|
||||
this.sliceData()
|
||||
this.isLoad = false
|
||||
}
|
||||
|
||||
private async getAllRole() {
|
||||
@ -213,6 +345,26 @@ export default class extends Vue {
|
||||
this.roleList = data
|
||||
}
|
||||
|
||||
private formSex(row: number, column: number, cellValue: string, index: number) {
|
||||
switch (cellValue) {
|
||||
case '0':
|
||||
return '未指定'
|
||||
case '1':
|
||||
return '男'
|
||||
case '2':
|
||||
return '女'
|
||||
default:
|
||||
return '未指定'
|
||||
|
||||
}
|
||||
}
|
||||
formatRole(val: string) {
|
||||
let data = this.roleList.find(o => {
|
||||
return o.key === val
|
||||
})
|
||||
return data?.name || ''
|
||||
}
|
||||
|
||||
private handleCreateAdmin() {
|
||||
this.record = Object.assign({}, defaultAdmin)
|
||||
|
||||
@ -230,49 +382,62 @@ export default class extends Vue {
|
||||
private handleDelete(scope: any) {
|
||||
const { $index, row } = scope
|
||||
this.$confirm('Confirm to remove the record?', 'Warning', {
|
||||
confirmButtonText: 'Confirm',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async() => {
|
||||
await deleteAdmin(row.id)
|
||||
this.adminList.splice($index, 1)
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'Deleted!'
|
||||
confirmButtonText: 'Confirm',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning'
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
.then(async () => {
|
||||
await deleteAdmin(row.id)
|
||||
this.adminList.splice($index, 1)
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'Deleted!'
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
private closeModal() {
|
||||
this.dialogVisible = false
|
||||
let modalForm: any = this.$refs['modalForm']
|
||||
modalForm.clearValidate()
|
||||
}
|
||||
// TODO: 验证数据完整性
|
||||
private async confirmRole() {
|
||||
const isEdit = this.dialogType === 'edit'
|
||||
const { data } = await saveAdmin(this.record)
|
||||
console.log(data)
|
||||
if (isEdit) {
|
||||
for (let index = 0; index < this.adminList.length; index++) {
|
||||
if (this.adminList[index].id === this.record.id) {
|
||||
this.adminList.splice(index, 1, Object.assign({}, this.record))
|
||||
break
|
||||
}
|
||||
const modalForm: any = this.$refs['modalForm']
|
||||
modalForm.validate(async (valid: boolean) => {
|
||||
if (!valid) {
|
||||
this.$message.error('请按要求填写表单')
|
||||
return false
|
||||
}
|
||||
} else {
|
||||
this.adminList.push(data)
|
||||
}
|
||||
|
||||
const { username, showname } = this.record
|
||||
this.dialogVisible = false
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: `
|
||||
<div>Admin Username: ${username}</div>
|
||||
<div>Admin Showname: ${showname}</div>
|
||||
const { data } = await saveAdmin(this.record)
|
||||
console.log(data)
|
||||
if (isEdit) {
|
||||
for (let index = 0; index < this.adminList.length; index++) {
|
||||
if (this.adminList[index].id === this.record.id) {
|
||||
this.adminList.splice(index, 1, Object.assign({}, this.record))
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.adminList.push(data)
|
||||
}
|
||||
this.sliceData()
|
||||
const { username, showname } = this.record
|
||||
this.dialogVisible = false
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: `
|
||||
<div>Admin Username: ${ username }</div>
|
||||
<div>Admin Showname: ${ showname }</div>
|
||||
`,
|
||||
type: 'success'
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user