REVIEW 用户管理（修改用户）

0a690416 · YunaiV · 7d84f860 · 0a690416 · 0a690416 · 0a690416
Commit 0a690416 authored Mar 31, 2023 by YunaiV
Show whitespace changes
Inline Side-by-side

Showing with 90 additions and 113 deletions

src/api/system/user/index.ts
+3 -3

src/views/system/user/UserForm.vue
+86 -108

src/views/system/user/index.vue
+1 -2

No files found.
--- a/src/api/system/user/index.ts
+++ b/src/api/system/user/index.ts
@@ -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 })
 }
 // 新增用户
-export const createUserApi = (data: UserVO | Recordable) => {
+export const createUser = (data: UserVO) => {
  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 })
 }

--- a/src/views/system/user/components/UserForm.vue
+++ b/src/views/system/user/components/UserForm.vue
 <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-col :span="12">
          <el-form-item label="用户昵称" prop="nickname">
@@ -13,7 +18,7 @@
            <el-tree-select
              node-key="id"
              v-model="formData.deptId"
-              :data="deptOptions"
+              :data="deptList"
              :props="defaultProps"
              check-strictly
              placeholder="请选择归属部门"
@@ -67,7 +72,7 @@
          <el-form-item label="岗位">
            <el-select v-model="formData.postIds" multiple placeholder="请选择">
              <el-option
-                v-for="item in postOptions"
+                v-for="item in postList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
@@ -85,52 +90,26 @@
      </el-row>
    </el-form>
    <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>
  </Dialog>
 </template>
 <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 { CommonStatusEnum } from '@/utils/constants'
 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 message = useMessage() // 消息弹窗
-const showDialog = ref(false)
+const modelVisible = ref(false) // 弹窗的是否展示
-// 弹出层标题
+const modelTitle = ref('') // 弹窗的标题
-const title = computed(() => {
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-  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: '',
  deptId: '',
  mobile: '',
@@ -138,15 +117,13 @@ const initParams = {
  id: undefined,
  username: '',
  password: '',
-  sex: 1,
+  sex: undefined,
  postIds: [],
  remark: '',
-  status: '0',
+  status: CommonStatusEnum.ENABLE,
  roleIds: []
-}
+})
+const formRules = reactive({
-// 校验规则
-const rules = {
  username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
  nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
@@ -164,74 +141,75 @@ const rules = {
      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
-}
+  resetForm()
-const closeDialog = () => {
+  // 修改时，设置数据
-  showDialog.value = false
+  if (id) {
-}
+    formLoading.value = true
-// 操作成功
-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) {
+      formData.value = await UserApi.getUser(id)
-          await updateUserApi(data)
+    } finally {
-          message.success(t('common.updateSuccess'))
+      formLoading.value = false
-          operateOk()
-        } else {
-          await createUserApi(data)
-          message.success(t('common.createSuccess'))
-          operateOk()
    }
-      } catch (err) {
-        console.error(err)
  }
-    }
+  // 加载部门树
-  })
+  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
-}
+  // 加载岗位列表
-/* 取消 */
+  postList.value = await PostApi.getSimplePostList()
-const cancel = () => {
-  closeDialog()
 }
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-/* 打开弹框 */
+/** 提交表单 */
-const open = (type: string, id?: number) => {
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-  console.log(type, id)
+const submitForm = async () => {
-  resetForm()
+  // 校验表单
-  getTree() // 部门树
+  if (!formRef) return
-  if (row && row.id) {
+  const valid = await formRef.value.validate()
-    const id = row.id
+  if (!valid) return
-    getUserApi(id).then((response) => {
+  // 提交请求
-      formData.value = response
+  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 {
-    formData.value = { ...initParams }
+      await UserApi.updateUser(data)
+      message.success(t('common.updateSuccess'))
+    }
+    modelVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
  }
-  showDialog.value = true
 }
-// ========== 初始化 ==========
+/** 重置表单 */
-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>
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -187,14 +187,13 @@
  <!-- 分配角色 -->
  <UserAssignRoleForm ref="assignRoleFormRef" @success="getList" />
 </template>
 <script setup lang="ts" name="User">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { CommonStatusEnum } from '@/utils/constants'
 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 UserAssignRoleForm from './UserAssignRoleForm.vue'
 import DeptTree from './DeptTree.vue'