REVIEW 用户管理(修改用户)

This commit is contained in:
YunaiV 2023-03-31 23:34:19 +08:00
parent 7d84f86081
commit 0a69041602
3 changed files with 94 additions and 117 deletions

View File

@ -23,17 +23,17 @@ export const getUserPage = (params: PageParam) => {
} }
// 查询用户详情 // 查询用户详情
export const getUserApi = (id: number) => { export const getUser = (id: number) => {
return request.get({ url: '/system/user/get?id=' + id }) return request.get({ url: '/system/user/get?id=' + id })
} }
// 新增用户 // 新增用户
export const createUserApi = (data: UserVO | Recordable) => { export const createUser = (data: UserVO) => {
return request.post({ url: '/system/user/create', data }) return request.post({ url: '/system/user/create', data })
} }
// 修改用户 // 修改用户
export const updateUserApi = (data: UserVO | Recordable) => { export const updateUser = (data: UserVO) => {
return request.put({ url: '/system/user/update', data }) return request.put({ url: '/system/user/update', data })
} }

View File

@ -1,7 +1,12 @@
<template> <template>
<!-- 添加或修改参数配置对话框 --> <Dialog :title="modelTitle" v-model="modelVisible">
<Dialog :title="title" :modelValue="showDialog" width="600px" append-to-body @close="closeDialog"> <el-form
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80px"> ref="formRef"
:model="formData"
:rules="formRules"
label-width="80px"
v-loading="formLoading"
>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="用户昵称" prop="nickname"> <el-form-item label="用户昵称" prop="nickname">
@ -13,7 +18,7 @@
<el-tree-select <el-tree-select
node-key="id" node-key="id"
v-model="formData.deptId" v-model="formData.deptId"
:data="deptOptions" :data="deptList"
:props="defaultProps" :props="defaultProps"
check-strictly check-strictly
placeholder="请选择归属部门" placeholder="请选择归属部门"
@ -67,7 +72,7 @@
<el-form-item label="岗位"> <el-form-item label="岗位">
<el-select v-model="formData.postIds" multiple placeholder="请选择"> <el-select v-model="formData.postIds" multiple placeholder="请选择">
<el-option <el-option
v-for="item in postOptions" v-for="item in postList"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id" :value="item.id"
@ -85,52 +90,26 @@
</el-row> </el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<div class="dialog-footer"> <el-button @click="submitForm" type="primary" :disabled="formLoading"> </el-button>
<el-button type="primary" @click="submitForm"> </el-button> <el-button @click="modelVisible = false"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template> </template>
</Dialog> </Dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { PostVO } from '@/api/system/post'
import * as PostApi from '@/api/system/post'
import { createUserApi, getUserApi, updateUserApi } from '@/api/system/user'
import * as DeptApi from '@/api/system/dept'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
import { defaultProps, handleTree } from '@/utils/tree' import { defaultProps, handleTree } from '@/utils/tree'
import { ElForm, FormItemRule } from 'element-plus' import * as PostApi from '@/api/system/post'
import { Arrayable } from 'element-plus/es/utils' import * as DeptApi from '@/api/system/dept'
import * as UserApi from '@/api/system/user'
type Form = InstanceType<typeof ElForm>
const emits = defineEmits(['success'])
const { t } = useI18n() // const { t } = useI18n() //
const message = useMessage() // const message = useMessage() //
const showDialog = ref(false) const modelVisible = ref(false) //
// const modelTitle = ref('') //
const title = computed(() => { const formLoading = ref(false) // 12
return formData.value?.id ? '修改用户' : '添加用户' const formType = ref('') // create - update -
}) const formData = ref({
const deptOptions = ref<Tree[]>([]) //
const getTree = async () => {
const res = await DeptApi.getSimpleDeptList()
deptOptions.value = []
deptOptions.value.push(...handleTree(res))
}
//
const postOptions = ref<PostVO[]>([]) //
const getPostOptions = async () => {
const res = (await PostApi.getSimplePostList()) as PostVO[]
postOptions.value.push(...res)
}
//
const initParams = {
nickname: '', nickname: '',
deptId: '', deptId: '',
mobile: '', mobile: '',
@ -138,15 +117,13 @@ const initParams = {
id: undefined, id: undefined,
username: '', username: '',
password: '', password: '',
sex: 1, sex: undefined,
postIds: [], postIds: [],
remark: '', remark: '',
status: '0', status: CommonStatusEnum.ENABLE,
roleIds: [] roleIds: []
} })
const formRules = reactive({
//
const rules = {
username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }], username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }], nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }], password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
@ -164,74 +141,75 @@ const rules = {
trigger: 'blur' trigger: 'blur'
} }
] ]
} as Partial<Record<string, Arrayable<FormItemRule>>> })
const formRef = ref<Form | null>() const formRef = ref() // Ref
const formData = ref<Recordable>({ ...initParams }) const deptList = ref<Tree[]>([]) //
const postList = ref([]) //
const resetForm = () => { /** 打开弹窗 */
let form = formRef?.value const open = async (type: string, id?: number) => {
if (!form) return modelVisible.value = true
formData.value = { ...initParams } modelTitle.value = t('action.' + type)
form && (form as Form).resetFields() formType.value = type
}
const closeDialog = () => {
showDialog.value = false
}
//
const operateOk = () => {
emits('success', true)
closeDialog()
}
const submitForm = () => {
let form = formRef.value as Form
form.validate(async (valid) => {
let data = formData.value
if (valid) {
try {
if (data?.id !== undefined) {
await updateUserApi(data)
message.success(t('common.updateSuccess'))
operateOk()
} else {
await createUserApi(data)
message.success(t('common.createSuccess'))
operateOk()
}
} catch (err) {
console.error(err)
}
}
})
}
/* 取消 */
const cancel = () => {
closeDialog()
}
/* 打开弹框 */
const open = (type: string, id?: number) => {
console.log(type, id)
resetForm() resetForm()
getTree() // //
if (row && row.id) { if (id) {
const id = row.id formLoading.value = true
getUserApi(id).then((response) => { try {
formData.value = response formData.value = await UserApi.getUser(id)
}) } finally {
} else { formLoading.value = false
formData.value = { ...initParams } }
} }
//
deptList.value = handleTree(await DeptApi.getSimpleDeptList())
//
postList.value = await PostApi.getSimplePostList()
}
defineExpose({ open }) // open
showDialog.value = true /** 提交表单 */
const emit = defineEmits(['success']) // success
const submitForm = async () => {
//
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
//
formLoading.value = true
try {
const data = formData.value as unknown as UserApi.UserVO
if (formType.value === 'create') {
await UserApi.createUser(data)
message.success(t('common.createSuccess'))
} else {
await UserApi.updateUser(data)
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
//
emit('success')
} finally {
formLoading.value = false
}
} }
// ========== ========== /** 重置表单 */
onMounted(async () => { const resetForm = () => {
await getPostOptions() formData.value = {
}) nickname: '',
deptId: '',
defineExpose({ mobile: '',
resetForm, email: '',
open id: undefined,
}) username: '',
password: '',
sex: undefined,
postIds: [],
remark: '',
status: CommonStatusEnum.ENABLE,
roleIds: []
}
formRef.value?.resetFields()
}
</script> </script>

View File

@ -187,14 +187,13 @@
<!-- 分配角色 --> <!-- 分配角色 -->
<UserAssignRoleForm ref="assignRoleFormRef" @success="getList" /> <UserAssignRoleForm ref="assignRoleFormRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="User"> <script setup lang="ts" name="User">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
import { CommonStatusEnum } from '@/utils/constants' import { CommonStatusEnum } from '@/utils/constants'
import * as UserApi from '@/api/system/user' import * as UserApi from '@/api/system/user'
import UserForm from './components/UserForm.vue' import UserForm from './UserForm.vue'
import UserImportForm from './components/UserImportForm.vue' import UserImportForm from './components/UserImportForm.vue'
import UserAssignRoleForm from './UserAssignRoleForm.vue' import UserAssignRoleForm from './UserAssignRoleForm.vue'
import DeptTree from './DeptTree.vue' import DeptTree from './DeptTree.vue'