Skip to content

Commit 6646053

Browse files
fessorfengfessorfeng
committed
feat: 优化重构用户管理代码
1 parent a1609e3 commit 6646053

File tree

8 files changed

+596
-1295
lines changed

8 files changed

+596
-1295
lines changed

‎src/types/auto-components.d.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,7 @@ declare module '@vue/runtime-core' {
6767
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
6868
ElTabPane: typeof import('element-plus/es')['ElTabPane']
6969
ElTabs: typeof import('element-plus/es')['ElTabs']
70-
ElTag: typeof import('element-plus/es')['ElTag']
71-
ElTimeline: typeof import('element-plus/es')['ElTimeline']
72-
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
7370
ElTooltip: typeof import('element-plus/es')['ElTooltip']
74-
ElTransfer: typeof import('element-plus/es')['ElTransfer']
7571
ElTree: typeof import('element-plus/es')['ElTree']
7672
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
7773
ElUpload: typeof import('element-plus/es')['ElUpload']

‎src/views/system/user/RoleForm.vue renamed to ‎src/views/system/user/components/UserAssignRoleForm.vue

Lines changed: 108 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,108 @@
1-
<template>
2-
<el-dialog title="分配角色" :modelValue="show" width="500px" append-to-body @close="closeDialog">
3-
<el-form :model="formData" label-width="80px" ref="formRef">
4-
<el-form-item label="用户名称">
5-
<el-input v-model="formData.username" :disabled="true" />
6-
</el-form-item>
7-
<el-form-item label="用户昵称">
8-
<el-input v-model="formData.nickname" :disabled="true" />
9-
</el-form-item>
10-
<el-form-item label="角色">
11-
<el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
12-
<el-option
13-
v-for="item in roleOptions"
14-
:key="item.id"
15-
:label="item.name"
16-
:value="item.id"
17-
/>
18-
</el-select>
19-
</el-form-item>
20-
</el-form>
21-
<template #footer>
22-
<div class="dialog-footer">
23-
<el-button type="primary" @click="submit">确 定</el-button>
24-
<el-button @click="cancel">取 消</el-button>
25-
</div>
26-
</template>
27-
</el-dialog>
28-
</template>
29-
30-
<script setup lang="ts">
31-
// TODO el-dialog 用 Dialog 组件
32-
import { assignUserRoleApi, PermissionAssignUserRoleReqVO } from '@/api/system/permission'
33-
34-
interface Props {
35-
show: boolean
36-
roleOptions: any[]
37-
formInitValue?: Recordable & Partial<typeof initParams>
38-
}
39-
40-
const props = withDefaults(defineProps<Props>(), {
41-
show: false,
42-
roleOptions: () => [],
43-
formInitValue: () => ({})
44-
})
45-
const emits = defineEmits(['update:show', 'success'])
46-
47-
const { t } = useI18n() // 国际化
48-
const message = useMessage() // 消息弹窗
49-
50-
// 表单初始化参数
51-
const initParams = {
52-
nickname: '',
53-
id: 0,
54-
username: '',
55-
roleIds: [] as number[]
56-
}
57-
const formData = ref<Recordable>({ ...initParams })
58-
watch(
59-
() => props.formInitValue,
60-
(val) => {
61-
formData.value = { ...val }
62-
},
63-
{ deep: true }
64-
)
65-
/* 弹框按钮操作 */
66-
// 点击取消
67-
const cancel = () => {
68-
closeDialog()
69-
}
70-
// 关闭弹窗
71-
const closeDialog = () => {
72-
emits('update:show', false)
73-
}
74-
// 提交
75-
const submit = async () => {
76-
const data = ref<PermissionAssignUserRoleReqVO>({
77-
userId: formData.value.id,
78-
roleIds: formData.value.roleIds
79-
})
80-
try {
81-
await assignUserRoleApi(data.value)
82-
message.success(t('common.updateSuccess'))
83-
emits('success', true)
84-
closeDialog()
85-
} catch (error) {
86-
console.error(error)
87-
}
88-
}
89-
</script>
1+
<template>
2+
<Dialog
3+
title="分配角色"
4+
:modelValue="showDialog"
5+
width="500px"
6+
append-to-body
7+
@close="closeDialog"
8+
>
9+
<el-form :model="formData" label-width="80px" ref="formRef">
10+
<el-form-item label="用户名称">
11+
<el-input v-model="formData.username" :disabled="true" />
12+
</el-form-item>
13+
<el-form-item label="用户昵称">
14+
<el-input v-model="formData.nickname" :disabled="true" />
15+
</el-form-item>
16+
<el-form-item label="角色">
17+
<el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
18+
<el-option
19+
v-for="item in roleOptions"
20+
:key="item.id"
21+
:label="item.name"
22+
:value="item.id"
23+
/>
24+
</el-select>
25+
</el-form-item>
26+
</el-form>
27+
<template #footer>
28+
<div class="dialog-footer">
29+
<el-button type="primary" @click="submit">确 定</el-button>
30+
<el-button @click="cancel">取 消</el-button>
31+
</div>
32+
</template>
33+
</Dialog>
34+
</template>
35+
36+
<script setup lang="ts">
37+
import {
38+
assignUserRoleApi,
39+
listUserRolesApi,
40+
PermissionAssignUserRoleReqVO
41+
} from '@/api/system/permission'
42+
import { UserVO } from '@/api/system/user'
43+
import * as RoleApi from '@/api/system/role'
44+
45+
const emits = defineEmits(['success'])
46+
47+
const { t } = useI18n() // 国际化
48+
const message = useMessage() // 消息弹窗
49+
50+
// 表单初始化参数
51+
const initParams = {
52+
nickname: '',
53+
id: 0,
54+
username: '',
55+
roleIds: [] as number[]
56+
}
57+
const formData = ref<Recordable>({ ...initParams })
58+
59+
/* 弹框按钮操作 */
60+
// 点击取消
61+
const cancel = () => {
62+
closeDialog()
63+
}
64+
// 关闭弹窗
65+
const closeDialog = () => {
66+
showDialog.value = false
67+
}
68+
// 提交
69+
const submit = async () => {
70+
const data = ref<PermissionAssignUserRoleReqVO>({
71+
userId: formData.value.id,
72+
roleIds: formData.value.roleIds
73+
})
74+
try {
75+
await assignUserRoleApi(data.value)
76+
message.success(t('common.updateSuccess'))
77+
emits('success', true)
78+
closeDialog()
79+
} catch (error) {
80+
console.error(error)
81+
}
82+
}
83+
84+
const roleOptions = ref()
85+
const userRole = reactive(initParams)
86+
const showDialog = ref(false)
87+
const formRef = ref()
88+
const openForm = async (row: UserVO) => {
89+
formRef.value?.resetFields()
90+
userRole.id = row.id
91+
userRole.username = row.username
92+
userRole.nickname = row.nickname
93+
94+
// 获得角色列表
95+
const roleOpt = await RoleApi.getSimpleRoleList()
96+
roleOptions.value = [...roleOpt]
97+
98+
// 获得角色拥有的菜单集合
99+
const roles = await listUserRolesApi(row.id)
100+
userRole.roleIds = roles
101+
formData.value = { ...userRole }
102+
103+
showDialog.value = true
104+
}
105+
defineExpose({
106+
openForm
107+
})
108+
</script>

‎src/views/system/user/components/UserDeptTree.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<div class="head-container">
3+
<el-input v-model="deptName" placeholder="请输入部门名称" clearable style="margin-bottom: 20px">
4+
<template #prefix>
5+
<Icon icon="ep:search" />
6+
</template>
7+
</el-input>
8+
</div>
9+
<div class="head-container">
10+
<el-tree
11+
:data="deptOptions"
12+
:props="defaultProps"
13+
:expand-on-click-node="false"
14+
:filter-node-method="filterNode"
15+
ref="treeRef"
16+
node-key="id"
17+
default-expand-all
18+
highlight-current
19+
@node-click="handleDeptNodeClick"
20+
/>
21+
</div>
22+
</template>
23+
24+
<script setup lang="ts" name="UserDeptTree">
25+
import { ElTree } from 'element-plus'
26+
import * as DeptApi from '@/api/system/dept'
27+
import { defaultProps, handleTree } from '@/utils/tree'
28+
29+
const emits = defineEmits(['node-click'])
30+
const deptName = ref('')
31+
const deptOptions = ref<Tree[]>([]) // 树形结构
32+
const treeRef = ref<InstanceType<typeof ElTree>>()
33+
const getTree = async () => {
34+
const res = await DeptApi.getSimpleDeptList()
35+
deptOptions.value = []
36+
deptOptions.value.push(...handleTree(res))
37+
}
38+
39+
const filterNode = (value: string, data: Tree) => {
40+
if (!value) return true
41+
return data.name.includes(value)
42+
}
43+
44+
const handleDeptNodeClick = async (row: { [key: string]: any }) => {
45+
emits('node-click', row)
46+
}
47+
48+
onMounted(async () => {
49+
await getTree()
50+
})
51+
</script>

0 commit comments

Comments
 (0)