Skip to content

Commit 696d359

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!67 Vue3重构: 用户管理
Merge pull request !67 from fessor/dev
2 parents 80b690b + 1ef6563 commit 696d359

File tree

8 files changed

+964
-634
lines changed

8 files changed

+964
-634
lines changed

‎src/api/system/permission/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,6 @@ export const listUserRolesApi = async (userId: number) => {
3737
}
3838

3939
// 赋予用户角色
40-
export const aassignUserRoleApi = async (data: PermissionAssignUserRoleReqVO) => {
40+
export const assignUserRoleApi = async (data: PermissionAssignUserRoleReqVO) => {
4141
return await request.post({ url: '/system/permission/assign-user-role', data })
4242
}

‎src/api/system/user/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,12 @@ export const getUserApi = (id: number) => {
4343
}
4444

4545
// 新增用户
46-
export const createUserApi = (data: UserVO) => {
46+
export const createUserApi = (data: UserVO | Recordable) => {
4747
return request.post({ url: '/system/user/create', data })
4848
}
4949

5050
// 修改用户
51-
export const updateUserApi = (data: UserVO) => {
51+
export const updateUserApi = (data: UserVO | Recordable) => {
5252
return request.put({ url: '/system/user/update', data })
5353
}
5454

‎src/views/system/user/AddForm.vue

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
<template>
2+
<!-- 添加或修改参数配置对话框 -->
3+
<el-dialog
4+
:title="title"
5+
:modelValue="modelValue"
6+
width="600px"
7+
append-to-body
8+
@close="closeDialog"
9+
>
10+
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
11+
<el-row>
12+
<el-col :span="12">
13+
<el-form-item label="用户昵称" prop="nickname">
14+
<el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
15+
</el-form-item>
16+
</el-col>
17+
<el-col :span="12">
18+
<el-form-item label="归属部门" prop="deptId">
19+
<el-tree-select
20+
node-key="id"
21+
v-model="formData.deptId"
22+
:data="deptOptions"
23+
:props="defaultProps"
24+
check-strictly
25+
placeholder="请选择归属部门"
26+
/>
27+
</el-form-item>
28+
</el-col>
29+
</el-row>
30+
<el-row>
31+
<el-col :span="12">
32+
<el-form-item label="手机号码" prop="mobile">
33+
<el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
34+
</el-form-item>
35+
</el-col>
36+
<el-col :span="12">
37+
<el-form-item label="邮箱" prop="email">
38+
<el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
39+
</el-form-item>
40+
</el-col>
41+
</el-row>
42+
<el-row>
43+
<el-col :span="12">
44+
<el-form-item v-if="formData.id === undefined" label="用户名称" prop="username">
45+
<el-input v-model="formData.username" placeholder="请输入用户名称" />
46+
</el-form-item>
47+
</el-col>
48+
<el-col :span="12">
49+
<el-form-item v-if="formData.id === undefined" label="用户密码" prop="password">
50+
<el-input
51+
v-model="formData.password"
52+
placeholder="请输入用户密码"
53+
type="password"
54+
show-password
55+
/>
56+
</el-form-item>
57+
</el-col>
58+
</el-row>
59+
<el-row>
60+
<el-col :span="12">
61+
<el-form-item label="用户性别">
62+
<el-select v-model="formData.sex" placeholder="请选择">
63+
<el-option
64+
v-for="dict in sexDictDatas"
65+
:key="parseInt(dict.value)"
66+
:label="dict.label"
67+
:value="parseInt(dict.value)"
68+
/>
69+
</el-select>
70+
</el-form-item>
71+
</el-col>
72+
<el-col :span="12">
73+
<el-form-item label="岗位">
74+
<el-select v-model="formData.postIds" multiple placeholder="请选择">
75+
<el-option
76+
v-for="item in postOptions"
77+
:key="item.id"
78+
:label="item.name"
79+
:value="item.id"
80+
/>
81+
</el-select>
82+
</el-form-item>
83+
</el-col>
84+
</el-row>
85+
<el-row>
86+
<el-col :span="24">
87+
<el-form-item label="备注">
88+
<el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
89+
</el-form-item>
90+
</el-col>
91+
</el-row>
92+
</el-form>
93+
<template #footer>
94+
<div class="dialog-footer">
95+
<el-button type="primary" @click="submitForm">确 定</el-button>
96+
<el-button @click="cancel">取 消</el-button>
97+
</div>
98+
</template>
99+
</el-dialog>
100+
</template>
101+
<script lang="ts" setup>
102+
import { PostVO } from '@/api/system/post'
103+
import { createUserApi, updateUserApi } from '@/api/system/user'
104+
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
105+
import { defaultProps } from '@/utils/tree'
106+
import { ElForm, FormItemRule } from 'element-plus'
107+
import { Arrayable } from 'element-plus/es/utils'
108+
109+
type Form = InstanceType<typeof ElForm>
110+
interface Props {
111+
deptOptions?: Tree[]
112+
postOptions?: PostVO[] //岗位列表
113+
modelValue: boolean
114+
formInitValue?: Recordable & Partial<typeof initParams>
115+
}
116+
117+
const props = withDefaults(defineProps<Props>(), {
118+
deptOptions: () => [],
119+
postOptions: () => [],
120+
modelValue: false,
121+
formInitValue: () => ({})
122+
})
123+
const emits = defineEmits(['update:modelValue', 'success'])
124+
125+
const { t } = useI18n() // 国际化
126+
const message = useMessage() // 消息弹窗
127+
// 弹出层标题
128+
const title = computed(() => {
129+
return formData.value?.id ? '修改用户' : '添加用户'
130+
})
131+
132+
// 性别字典
133+
const sexDictDatas = getDictOptions(DICT_TYPE.SYSTEM_USER_SEX)
134+
135+
// 表单初始化参数
136+
const initParams = {
137+
nickname: '',
138+
deptId: '',
139+
mobile: '',
140+
email: '',
141+
id: undefined,
142+
username: '',
143+
password: '',
144+
sex: 1,
145+
postIds: [],
146+
remark: '',
147+
status: '0',
148+
roleIds: []
149+
}
150+
151+
// 校验规则
152+
const rules = {
153+
username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
154+
nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
155+
password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
156+
email: [
157+
{
158+
type: 'email',
159+
message: "'请输入正确的邮箱地址",
160+
trigger: ['blur', 'change']
161+
}
162+
],
163+
mobile: [
164+
{
165+
pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
166+
message: '请输入正确的手机号码',
167+
trigger: 'blur'
168+
}
169+
]
170+
} as Partial<Record<string, Arrayable<FormItemRule>>>
171+
const formRef = ref<Form | null>()
172+
const formData = ref<Recordable>({ ...initParams })
173+
watch(
174+
() => props.formInitValue,
175+
(val) => {
176+
formData.value = { ...val }
177+
},
178+
{ deep: true }
179+
)
180+
181+
const resetForm = () => {
182+
let form = formRef?.value
183+
if (!form) return
184+
formData.value = { ...initParams }
185+
form && (form as Form).resetFields()
186+
}
187+
const closeDialog = () => {
188+
emits('update:modelValue', false)
189+
}
190+
// 操作成功
191+
const operateOk = () => {
192+
emits('success', true)
193+
closeDialog()
194+
}
195+
const submitForm = () => {
196+
let form = formRef.value as Form
197+
form.validate(async (valid) => {
198+
let data = formData.value
199+
if (valid) {
200+
try {
201+
if (data?.id !== undefined) {
202+
await updateUserApi(data)
203+
message.success(t('common.updateSuccess'))
204+
operateOk()
205+
} else {
206+
await createUserApi(data)
207+
message.success(t('common.createSuccess'))
208+
operateOk()
209+
}
210+
} catch (err) {
211+
console.error(err)
212+
}
213+
}
214+
})
215+
}
216+
const cancel = () => {
217+
closeDialog()
218+
}
219+
220+
defineExpose({
221+
resetForm
222+
})
223+
</script>

0 commit comments

Comments
 (0)