293 lines
7.7 KiB
Vue
293 lines
7.7 KiB
Vue
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
|
|
import Table from '@/components/table/table.vue'
|
|
|
|
import { getUsers, queryUser, delUser, addUser, getUserInfo, putUser } from '@/service/user'
|
|
import { getRoles } from '@/service/role'
|
|
import { columns, addUserRules, putUserRules } from './conf'
|
|
import { message } from 'ant-design-vue'
|
|
import { userStore } from '@/stores/user'
|
|
import router from '@/router'
|
|
|
|
/**查询表单响应式数据 */
|
|
const queryFormRef = ref()
|
|
|
|
const queryForm = reactive({
|
|
username: '',
|
|
nickname: ''
|
|
})
|
|
|
|
// 是否查询
|
|
const isQuery = ref(false)
|
|
|
|
// 列表数据
|
|
const dataSource = ref([])
|
|
|
|
//分页响应式配置
|
|
const pagination = reactive({
|
|
current: 1, //当前页
|
|
pageSize: 5, // 每页数量
|
|
// showSizeChanger: true,
|
|
total: 0,
|
|
pageSizeOptions: ['5', '10', '50'],
|
|
showTotal: (total) => `共 ${total} 条数据`,
|
|
onChange: (page, pageSize) => {
|
|
pagination.current = page
|
|
pagination.pageSize = pageSize
|
|
getPageData()
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
getPageData()
|
|
})
|
|
|
|
// 获取页面数据
|
|
const getPageData = () => {
|
|
let offset = pagination.current
|
|
let limit = pagination.pageSize
|
|
if (!isQuery.value) {
|
|
getUsers({ offset, limit }).then((res) => {
|
|
dataSource.value = res.data.items
|
|
pagination.total = res.data.total
|
|
})
|
|
} else {
|
|
queryUser({ offset, limit, username: queryForm.username, nickname: queryForm.nickname }).then(
|
|
(res) => {
|
|
dataSource.value = res.data.items
|
|
pagination.total = res.data.total
|
|
}
|
|
)
|
|
}
|
|
}
|
|
|
|
// 点击查询事件
|
|
const clickQuery = () => {
|
|
isQuery.value = true
|
|
getPageData()
|
|
}
|
|
|
|
// 重置搜索框
|
|
const resetQueryForm = () => {
|
|
queryFormRef.value.resetFields()
|
|
isQuery.value = false
|
|
getPageData()
|
|
}
|
|
|
|
// 删除
|
|
const delClick = (record) => {
|
|
delUser(record.id)
|
|
getPageData()
|
|
}
|
|
|
|
/**新增用户 */
|
|
const addVisible = ref(false)
|
|
const formRef = ref(null)
|
|
const newUserForm = reactive({
|
|
username: '',
|
|
nickname: '',
|
|
password: '',
|
|
roles: []
|
|
})
|
|
// 选择角色
|
|
const roleOptions = ref([])
|
|
|
|
const addClick = () => {
|
|
addVisible.value = !addVisible.value
|
|
// 请求角色信息
|
|
getRoles({ limit: 100 }).then((res) => {
|
|
roleOptions.value = res.data.items.map((e) => ({ label: e.name, value: e.id }))
|
|
})
|
|
}
|
|
|
|
// 新增modal 确定的回调
|
|
const onOk = () => {
|
|
formRef.value.validateFields().then(() => {
|
|
// 表单验证通过
|
|
newUserForm.roles = newUserForm.roles.map((e, i) => ({ rid: e, status: i === 0 ? 5 : 1 }))
|
|
addUser(newUserForm).then((res) => {
|
|
if (res.msg === '请求成功') {
|
|
message.success('新增成功')
|
|
// 1. 关闭 modal
|
|
addVisible.value = !addVisible.value
|
|
// 2. 重置响应式数据
|
|
formRef.value.resetFields()
|
|
// 3. 刷新页面数据
|
|
getPageData()
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
// 新增modal 取消回调
|
|
const onCancel = () => {
|
|
// 2. 重置响应式数据
|
|
formRef.value.resetFields()
|
|
}
|
|
|
|
/**更新用户 */
|
|
|
|
const putClick = (record) => {
|
|
// 打开编辑的modal
|
|
putVisible.value = !putVisible.value
|
|
// 请求所有角色信息
|
|
getRoles({ limit: 100 }).then((res) => {
|
|
roleOptions.value = res.data.items.map((e) => ({ label: e.name, value: e.id }))
|
|
})
|
|
putId.value = record.id
|
|
// 加载当前用户id 具备的用户角色
|
|
getUserInfo(record.id).then((res) => {
|
|
// 角色信息
|
|
putUserForm.roles = res.data.roles.map((e) => e.id)
|
|
// 昵称信息
|
|
putUserForm.nickname = res.data.nickname
|
|
putUserForm.password = '加密之后的密码'
|
|
})
|
|
}
|
|
|
|
const putVisible = ref(false)
|
|
|
|
const putUserFormRef = ref()
|
|
const putUserForm = reactive({
|
|
nickname: '',
|
|
password: '',
|
|
roles: []
|
|
})
|
|
const putId = ref()
|
|
|
|
//modal 事件
|
|
const onOkPut = () => {
|
|
//校验数据
|
|
putUserFormRef.value.validateFields().then(() => {
|
|
//验证通过
|
|
const { nickname, password, roles } = putUserForm
|
|
let rids = roles.map((e, i) => ({ rid: e, status: i === 0 ? 5 : 1 }))
|
|
putUser(putId.value, { nickname, password, roles: rids }).then((res) => {
|
|
if (res.msg === '请求成功') {
|
|
message.success('修改成功')
|
|
// 1. 关闭 modal
|
|
putVisible.value = !putVisible.value
|
|
// 2. 重置响应式数据
|
|
putUserFormRef.value.resetFields()
|
|
if (putId.value === userStore().userInfo.id) {
|
|
// 改了自己
|
|
message.warning('修改了自己，请重新登录')
|
|
userStore().$reset()
|
|
router.push('/login')
|
|
} else {
|
|
// 3. 刷新页面数据
|
|
getPageData()
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
const onCancelPut = () => {
|
|
putUserFormRef.value.resetFields()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="user">
|
|
<!-- 查询 -->
|
|
<div class="search">
|
|
<a-form ref="queryFormRef" layout="inline" :model="queryForm">
|
|
<a-form-item label="用户名" name="username">
|
|
<a-input placeholder="用户名" v-model:value="queryForm.username"> </a-input>
|
|
</a-form-item>
|
|
<a-form-item label="昵称" name="nickname">
|
|
<a-input placeholder="昵称" v-model:value="queryForm.nickname"> </a-input>
|
|
</a-form-item>
|
|
<a-form-item v-per="'user:query'">
|
|
<a-button type="primary" @click="clickQuery">查询</a-button>
|
|
<a-button style="margin-left: 10px" @click="resetQueryForm">重置</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</div>
|
|
|
|
<Table
|
|
:columns="columns"
|
|
:data-source="dataSource"
|
|
:pagination="pagination"
|
|
page-name="user"
|
|
list-title="用户列表"
|
|
@create-click="addClick"
|
|
@update-click="putClick"
|
|
@delete-click="delClick"
|
|
>
|
|
</Table>
|
|
|
|
<!-- 新增 用户-->
|
|
<a-modal
|
|
v-model:visible="addVisible"
|
|
title="新建用户"
|
|
ok-text="创建"
|
|
cancel-text="取消"
|
|
@ok="onOk"
|
|
@cancel="onCancel"
|
|
>
|
|
<a-form ref="formRef" :model="newUserForm" :rules="addUserRules">
|
|
<a-form-item name="username" label="账号">
|
|
<a-input v-model:value="newUserForm.username" placeholder="用于登录" />
|
|
</a-form-item>
|
|
<a-form-item name="nickname" label="昵称">
|
|
<a-input v-model:value="newUserForm.nickname" />
|
|
</a-form-item>
|
|
<a-form-item name="password" label="密码">
|
|
<a-input-password v-model:value="newUserForm.password" autocomplete="on" />
|
|
</a-form-item>
|
|
<a-form-item name="roles" label="角色">
|
|
<a-select
|
|
v-model:value="newUserForm.roles"
|
|
mode="multiple"
|
|
style="width: 100%"
|
|
placeholder="默认激活第一个角色"
|
|
:options="roleOptions"
|
|
></a-select>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
|
|
<!-- 修改用户 -->
|
|
<a-modal
|
|
v-model:visible="putVisible"
|
|
title="编辑用户"
|
|
ok-text="确认"
|
|
cancel-text="取消"
|
|
@ok="onOkPut"
|
|
@cancel="onCancelPut"
|
|
>
|
|
<a-form ref="putUserFormRef" :model="putUserForm" :rules="putUserRules">
|
|
<a-form-item name="nickname" label="昵称">
|
|
<a-input v-model:value="putUserForm.nickname" />
|
|
</a-form-item>
|
|
<a-form-item name="password" label="密码">
|
|
<a-input-password v-model:value="putUserForm.password" autocomplete="on" />
|
|
</a-form-item>
|
|
<a-form-item name="roles" label="角色">
|
|
<a-select
|
|
v-model:value="putUserForm.roles"
|
|
mode="multiple"
|
|
style="width: 100%"
|
|
placeholder="默认激活第一个角色"
|
|
:options="roleOptions"
|
|
></a-select>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.search {
|
|
display: flex;
|
|
/* justify-content: center; */
|
|
align-content: center;
|
|
margin-bottom: 16px;
|
|
padding: 24px;
|
|
background: #fff;
|
|
}
|
|
</style>
|