增加角色的管理。
This commit is contained in:
aaron
parent
c0d6371c35
commit
c4e997954c
@ -5,6 +5,40 @@
|
||||
<h1>用户列表</h1>
|
||||
</div>
|
||||
|
||||
<!-- 添加筛选区域 -->
|
||||
<div class="table-filter">
|
||||
<a-form layout="inline">
|
||||
<a-form-item label="用户角色">
|
||||
<a-select
|
||||
v-model:value="filterForm.role"
|
||||
style="width: 200px"
|
||||
placeholder="请选择角色"
|
||||
allowClear
|
||||
@change="handleFilterChange"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="role in availableRoles"
|
||||
:key="role.value"
|
||||
:value="role.value"
|
||||
>
|
||||
{{ role.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
查询
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
@ -31,22 +65,56 @@
|
||||
<template v-if="column.key === 'points'">
|
||||
{{ record.points || 0 }}
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-button type="link" @click="handleEditRoles(record)">
|
||||
修改角色
|
||||
</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 添加角色编辑模态框 -->
|
||||
<a-modal
|
||||
v-model:visible="roleModalVisible"
|
||||
title="修改用户角色"
|
||||
@ok="handleRolesSave"
|
||||
@cancel="handleRolesCancel"
|
||||
:confirmLoading="rolesSaving"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="用户角色">
|
||||
<a-checkbox-group v-model:value="selectedRoles">
|
||||
<a-checkbox
|
||||
v-for="role in availableRoles"
|
||||
:key="role.value"
|
||||
:value="role.value"
|
||||
:disabled="role.value === 'user'"
|
||||
>
|
||||
{{ role.label }}
|
||||
</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from 'vue'
|
||||
import { message, Tag } from 'ant-design-vue'
|
||||
import { message, Tag, Modal, Checkbox, Select } from 'ant-design-vue'
|
||||
import { getUserList } from '@/api/user'
|
||||
import request from '@/utils/request'
|
||||
import PageContainer from '@/components/PageContainer.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
PageContainer,
|
||||
ATag: Tag
|
||||
ATag: Tag,
|
||||
ACheckbox: Checkbox,
|
||||
ACheckboxGroup: Checkbox.Group,
|
||||
ASelect: Select,
|
||||
ASelectOption: Select.Option
|
||||
},
|
||||
setup() {
|
||||
const loading = ref(false)
|
||||
@ -102,6 +170,12 @@ export default defineComponent({
|
||||
dataIndex: 'create_time',
|
||||
key: 'create_time',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
fixed: 'right'
|
||||
}
|
||||
]
|
||||
|
||||
@ -111,13 +185,19 @@ export default defineComponent({
|
||||
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
}
|
||||
|
||||
// 添加筛选表单
|
||||
const filterForm = ref({
|
||||
role: undefined
|
||||
})
|
||||
|
||||
// 获取用户列表数据
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const params = {
|
||||
skip: (pagination.value.current - 1) * pagination.value.pageSize,
|
||||
limit: pagination.value.pageSize
|
||||
limit: pagination.value.pageSize,
|
||||
role: filterForm.value.role // 添加角色筛选参数
|
||||
}
|
||||
|
||||
const res = await getUserList(params)
|
||||
@ -159,12 +239,90 @@ export default defineComponent({
|
||||
'admin': 'red',
|
||||
'user': 'blue',
|
||||
'merchant': 'orange',
|
||||
'operator': 'green',
|
||||
'delivery': 'purple'
|
||||
'deliveryman': 'purple'
|
||||
}
|
||||
return colorMap[role] || 'default'
|
||||
}
|
||||
|
||||
// 角色编辑相关状态
|
||||
const roleModalVisible = ref(false)
|
||||
const rolesSaving = ref(false)
|
||||
const selectedRoles = ref([])
|
||||
const currentUserId = ref(null)
|
||||
|
||||
// 可选角色列表
|
||||
const availableRoles = [
|
||||
{ label: '普通用户', value: 'user' },
|
||||
{ label: '商家', value: 'merchant' },
|
||||
{ label: '配送员', value: 'deliveryman' }
|
||||
]
|
||||
|
||||
// 打开角色编辑模态框
|
||||
const handleEditRoles = (record) => {
|
||||
currentUserId.value = record.userid
|
||||
selectedRoles.value = record.roles || ['user']
|
||||
roleModalVisible.value = true
|
||||
}
|
||||
|
||||
// 保存角色修改
|
||||
const handleRolesSave = async () => {
|
||||
try {
|
||||
rolesSaving.value = true
|
||||
|
||||
// 获取原有角色列表
|
||||
const originalRoles = tableData.value.find(
|
||||
user => user.userid === currentUserId.value
|
||||
)?.roles || []
|
||||
|
||||
// 如果原来有 admin 角色，确保保留
|
||||
const newRoles = selectedRoles.value
|
||||
if (originalRoles.includes('admin')) {
|
||||
newRoles.push('admin')
|
||||
}
|
||||
|
||||
// 确保用户角色始终存在
|
||||
if (!newRoles.includes('user')) {
|
||||
newRoles.push('user')
|
||||
}
|
||||
|
||||
await request.put(`/api/user/roles?user_id=${currentUserId.value}`, newRoles)
|
||||
|
||||
message.success('角色修改成功')
|
||||
roleModalVisible.value = false
|
||||
fetchData() // 刷新列表
|
||||
} catch (error) {
|
||||
console.error('修改角色失败:', error)
|
||||
message.error('修改角色失败')
|
||||
} finally {
|
||||
rolesSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 取消角色修改
|
||||
const handleRolesCancel = () => {
|
||||
roleModalVisible.value = false
|
||||
selectedRoles.value = []
|
||||
currentUserId.value = null
|
||||
}
|
||||
|
||||
// 处理筛选变化
|
||||
const handleFilterChange = () => {
|
||||
pagination.value.current = 1 // 重置页码
|
||||
}
|
||||
|
||||
// 查询按钮点击
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 重置按钮点击
|
||||
const handleReset = () => {
|
||||
filterForm.value.role = undefined
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
@ -177,7 +335,18 @@ export default defineComponent({
|
||||
handleTableChange,
|
||||
formatPhone,
|
||||
getRoleName,
|
||||
getRoleColor
|
||||
getRoleColor,
|
||||
roleModalVisible,
|
||||
rolesSaving,
|
||||
selectedRoles,
|
||||
availableRoles,
|
||||
handleEditRoles,
|
||||
handleRolesSave,
|
||||
handleRolesCancel,
|
||||
filterForm,
|
||||
handleFilterChange,
|
||||
handleSearch,
|
||||
handleReset
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -206,4 +375,34 @@ export default defineComponent({
|
||||
:deep(.ant-tag) {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
:deep(.ant-checkbox-group) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
:deep(.ant-checkbox-wrapper) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.ant-checkbox-wrapper + .ant-checkbox-wrapper) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.table-filter {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user