139 lines
4.2 KiB
Vue
139 lines
4.2 KiB
Vue
<template>
|
|
<page-header-wrapper>
|
|
<a-card class="my-card">
|
|
<AntQueryTable
|
|
ref="user-table"
|
|
height="100%"
|
|
:queryConfig="queryConfig"
|
|
:tableConfig="tableConfig"
|
|
:pageConfig="pageConfig"
|
|
:showTool="showTool"
|
|
>
|
|
<template #toolbar-left>
|
|
<a-button icon="plus" type="primary" style="margin-right: 10px" @click="handleOpenAddModal">新增</a-button>
|
|
</template>
|
|
<template #tablecell-action="{ record }">
|
|
<a-button size="small" type="primary" @click="handleOpenEditModal(record)">编辑</a-button>
|
|
<a-button size="small" type="danger" @click="handleDelete(record)" style="margin-left: 15px">删除</a-button>
|
|
</template>
|
|
</AntQueryTable>
|
|
</a-card>
|
|
<AntFormModal
|
|
:visible.sync="AEModal.visible"
|
|
:title="AEModal.title"
|
|
:formItems="AEModal.formItems"
|
|
:formRules="AEModal.formRules"
|
|
:formData="AEModal.formData"
|
|
:onSubmit="handleSubmitAE"
|
|
@success="handleSubmitAESuccess"
|
|
>
|
|
</AntFormModal>
|
|
</page-header-wrapper>
|
|
</template>
|
|
|
|
<script>
|
|
import { deleteAction, getAction, postAction, putAction } from '@/api/manage'
|
|
export default {
|
|
name: 'User',
|
|
data() {
|
|
return {
|
|
queryConfig: {
|
|
items: [{ label: '关键字', prop: 'filter' }],
|
|
},
|
|
tableConfig: {
|
|
table: { rowKey: 'id' },
|
|
query: (params) => getAction('/system/user/list', params),
|
|
columns: [
|
|
{ dataIndex: 'serial' },
|
|
{ title: '账号', dataIndex: 'userName' },
|
|
{ title: '姓名', dataIndex: 'nickName' },
|
|
{ title: '角色', dataIndex: 'roleName', width: 'auto', minWidth: 160 },
|
|
{ title: '邮箱', dataIndex: 'email' },
|
|
{ title: '手机号', dataIndex: 'phoneNumber' },
|
|
{ title: '性别', dataIndex: 'sex', customRender: (text) => ['男', '女'][text] },
|
|
{ dataIndex: 'action' },
|
|
],
|
|
},
|
|
pageConfig: true,
|
|
showTool: true,
|
|
|
|
AEModal: {
|
|
visible: false,
|
|
title: '',
|
|
mode: '',
|
|
formItems: [
|
|
{ label: '账号', prop: 'userName' },
|
|
{ label: '姓名', prop: 'nickName' },
|
|
{
|
|
label: '角色',
|
|
prop: 'roles',
|
|
component: 'AntOriginSelect',
|
|
options: {
|
|
dataSource: () =>
|
|
getAction('system/role/getList', { pageSize: 999 }).then((res) => ({ data: res.data.data })),
|
|
labelKey: 'roleName',
|
|
multiple: true,
|
|
},
|
|
},
|
|
{ label: '邮箱', prop: 'email' },
|
|
{ label: '手机号', prop: 'phoneNumber' },
|
|
{
|
|
label: '性别',
|
|
prop: 'sex',
|
|
component: 'AntOriginSelect',
|
|
options: {
|
|
dataSource: () => ({
|
|
data: [
|
|
{ title: '男', id: 0 },
|
|
{ title: '女', id: 1 },
|
|
],
|
|
}),
|
|
},
|
|
},
|
|
],
|
|
formRules: {},
|
|
formData: {},
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
handleOpenAddModal() {
|
|
this.AEModal.title = '新增用户'
|
|
this.AEModal.mode = 'add'
|
|
this.AEModal.formData = {}
|
|
this.AEModal.visible = true
|
|
},
|
|
handleOpenEditModal(record) {
|
|
this.AEModal.title = '编辑用户'
|
|
this.AEModal.mode = 'edit'
|
|
this.AEModal.formData = { ...record }
|
|
this.AEModal.visible = true
|
|
},
|
|
handleSubmitAE(formData) {
|
|
if (this.AEModal.mode === 'add') {
|
|
return postAction('/system/user/create', formData)
|
|
}
|
|
if (this.AEModal.mode === 'edit') {
|
|
return putAction('/system/user/update', formData)
|
|
}
|
|
},
|
|
handleSubmitAESuccess() {
|
|
this.$refs['user-table'].commitAction('query')
|
|
},
|
|
async handleDelete(record) {
|
|
try {
|
|
await this.$confirm({ title: '温馨提示', content: '确定要删除该用户吗？' })
|
|
const res = await deleteAction('/system/user/delete?userId=' + record.id)
|
|
this.$message.success(res.message)
|
|
this.$refs['user-table'].commitAction('query')
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
</style>
|