feature: 系统管理->用户管理

src/api/system/right/user/types.ts

@@ -68,7 +68,7 @@ export interface UserForm {
   category?: string;
   status: string;
   remark?: string;
-  postIds: string[];
+  postIds?: string[];
   roleIds: string[];
 }
 

src/views/system/right/user/UserDetailForm.vue

@@ -1,12 +1,126 @@
 <template>
   <div class="e-dialog">
+    <el-dialog v-model="dialog.visible" :title="dialog.title" :draggable="dialog.draggable" width="35%" align-center>
+      <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="auto" class="mt-3">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="用户名" prop="userName" >
+              <el-input v-model="formData.userName" placeholder="请输入用户名/登录账号" disabled="disabled"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="登录密码" prop="loginPwd">
+              <el-input v-model="formData.loginPwd" placeholder="请输入登录密码" type="password" maxlength="20" show-password disabled="disabled"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="学/工号" prop="userNumb">
+              <el-input v-model="formData.userNumb" placeholder="请输入学/工号" disabled="disabled" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="用户姓名" prop="realName">
+              <el-input v-model="formData.realName" placeholder="请输入用户姓名" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="归属部门" prop="deptId">
+              <el-tree-select
+                v-model="formData.deptId"
+                :data="deptOptions"
+                :props="{ value: 'id', label: 'label', children: 'children' }"
+                value-key="id"
+                placeholder="请选择归属部门"
+                check-strictly
+                @change="handleDeptChange"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工作岗位" prop="postId">
+              <el-select v-model="formData.postId" placeholder="请选择">
+                <el-option
+                  v-for="item in postOptions"
+                  :key="item.postId"
+                  :label="item.postName"
+                  :value="item.postId"
+                  :disabled="item.status == '1'"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="用户身份" prop="category">
+              <el-select v-model="formData.category" placeholder="请选择用户身份">
+                <el-option v-for="dict in CATEGORY" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="手机号码" prop="phone">
+              <el-input v-model="formData.phone" placeholder="请输入手机号码" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="用户性别" prop="sex">
+              <el-select v-model="formData.sex" placeholder="请选择性别">
+                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="用户邮箱" prop="email">
+              <el-input v-model="formData.email" placeholder="请输入用户邮箱" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="角色" prop="roleIds">
+              <el-select v-model="formData.roleIds" filterable multiple placeholder="请选择">
+                <el-option
+                  v-for="item in roleOptions"
+                  :key="item.roleId"
+                  :label="item.roleName"
+                  :value="item.roleId"
+                  :disabled="item.status == '1'"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="dialog.visible = false">取 消</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
-
 <script setup name="UserDetailForm" lang="ts">
 /**  模块导入 */
 import { UserForm } from '@/api/system/right/user/types';
 import api from '@/api/system/right/user';
+import { useI18n } from 'vue-i18n';
+import { DeptVO } from '@/api/system/dept/types';
+import { PostVO } from '@/api/system/params/post/types';
+import { RoleVO } from '@/api/system/role/types';
+import { treeselect } from '@/api/system/dept';
 
 /** 当前组件属性 */
 defineOptions({ name: 'RecompenseForm' });
@@ -14,6 +128,7 @@ defineOptions({ name: 'RecompenseForm' });
 const { t } = useI18n();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 // 当前页面引用的数据字典
+const { sys_yes_no, sys_user_sex, CATEGORY } = toRefs<any>(proxy?.useDict('sys_yes_no', 'sys_user_sex', 'CATEGORY'));
 // 对话框
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -26,6 +141,16 @@ const formLoading = ref(false);
 const formType = ref('');
 // 操作类型
 const command = ref('');
+// 输入项是否禁用
+const disabled = ref(false);
+// 部门下拉数据
+const deptOptions = ref<DeptVO[]>([]);
+// 默认初始密码
+const initPassword = ref<string>('');
+// 岗位下拉数据
+const postOptions = ref<PostVO[]>([]);
+// 角色下拉数据
+const roleOptions = ref<RoleVO[]>([]);
 // 表单引用
 const formRef = ref<ElFormInstance>();
 // 表单数据
@@ -44,21 +169,19 @@ const formData = ref<UserForm>({
   sex: undefined,
   status: '0',
   remark: '',
-  postIds: [],
   roleIds: []
 });
+// 表单提交校验规则
 const formRules = reactive({
-  deptId: [{ required: true, message: '部门名称间不能为空', trigger: 'blur' }],
-  postId: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
   userName: [{ required: true, message: '登录账号不能为空', trigger: 'blur' }],
-  realName: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' }],
-  userNumb: [{ required: true, message: '学/工号不能为空', trigger: 'blur' }],
   loginPwd: [{ required: true, message: '登录密码不能为空', trigger: 'blur' }],
-  category: [{ required: true, message: '用户身份不能为空', trigger: 'blur' }]
-  // operatorMoney: [
-  //   { required: true, message: '补款金额不能为空', trigger: 'blur' },
-  //   { pattern: /^\d+(\.\d{1,2})?$/, message: '补款金额只能为两位小数的数字', trigger: 'blur' }
-  // ]
+  userNumb: [{ required: true, message: '学/工号不能为空', trigger: 'blur' }],
+  realName: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' }],
+  deptId: [{ required: true, message: '归属部门不能为空', trigger: 'blur' }],
+  postId: [{ required: true, message: '工作岗位不能为空', trigger: 'blur' }],
+  category: [{ required: true, message: '用户身份不能为空', trigger: 'blur' }],
+  phone: [{ required: true, message: '电话号码不能为空', trigger: 'blur' }],
+  roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }]
 });
 /** 当前组件方法 */
 const open = async (cmd: string, id?: string | number) => {
@@ -67,15 +190,48 @@ const open = async (cmd: string, id?: string | number) => {
   formType.value = cmd;
   command.value = cmd;
   resetForm();
+  await initTreeData();
   // 修改时，设置数据
-  if (id) {
-    formLoading.value = true;
-    try {
-      const res = await api.getUser(id);
-      Object.assign(formData.value, res.data);
-    } finally {
-      formLoading.value = false;
+  formLoading.value = true;
+  try {
+    let res;
+    if (id) {
+      disabled.value = true;
+      res = await api.getUser(id);
+      Object.assign(formData.value, res.data.user);
+      formData.value.postIds = res.data.postIds;
+      formData.value.roleIds = res.data.roleIds;
+      formData.value.loginPwd = '';
+    } else {
+      res = await api.getUser();
+      formData.value.loginPwd = initPassword.value.toString();
     }
+    postOptions.value = res.data.posts;
+    roleOptions.value = res.data.roles;
+  } finally {
+    formLoading.value = false;
+  }
+  // if (id) {
+  //   formLoading.value = true;
+  //   try {
+  //     const res = await api.getUser(id);
+  //     Object.assign(formData.value, res.data);
+  //   } finally {
+  //     formLoading.value = false;
+  //   }
+  // }
+};
+// 查询部门下拉树结构
+const getTreeSelect = async () => {
+  const res = await api.deptTreeSelect();
+  deptOptions.value = res.data;
+};
+// 初始化部门数据
+const initTreeData = async () => {
+  // 判断部门的数据是否存在，存在不获取，不存在则获取
+  if (deptOptions.value === undefined) {
+    const { data } = await treeselect();
+    deptOptions.value = data;
   }
 };
 // 重置表单
@@ -101,12 +257,20 @@ const resetForm = () => {
   formRef.value?.resetFields();
 };
 // 传回给父组件的属性与方法
-defineExpose({});
+defineExpose({ open });
 
 // 触发父组件的事件
 const emits = defineEmits([]);
 
 // 初始化
+onMounted(() => {
+  // 初始化部门数据
+  getTreeSelect();
+  // 初始化默认密码
+  proxy?.getConfigKey('sys.user.initPassword').then((response) => {
+    initPassword.value = response.data;
+  });
+});
 </script>
 
 <style scoped lang="scss">

src/views/system/right/user/index.vue

@@ -20,15 +20,19 @@
         </el-card>
       </el-col>
       <el-col :lg="20" :xs="24">
-        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+                    :leave-active-class="proxy?.animate.searchAnimate.leave">
           <div v-show="showSearch" class="mb-[5px]">
             <el-card shadow="hover">
-              <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto" class="-mb-25px -mt-5px">
+              <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto"
+                       class="-mb-25px -mt-5px">
                 <el-form-item label="用户姓名" prop="realName">
-                  <el-input v-model="queryParams.realName" placeholder="请输入用户姓名" clearable @keyup.enter="handleQuery" />
+                  <el-input v-model="queryParams.realName" placeholder="请输入用户姓名" clearable
+                            @keyup.enter="handleQuery" />
                 </el-form-item>
                 <el-form-item label="手机号码" prop="phone">
-                  <el-input v-model="queryParams.phone" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
+                  <el-input v-model="queryParams.phone" placeholder="请输入手机号码" clearable
+                            @keyup.enter="handleQuery" />
                 </el-form-item>
                 <el-form-item>
                   <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -42,15 +46,19 @@
           <template #header>
             <el-row :gutter="10">
               <el-col :span="1.5">
-                <el-button v-has-permi="['system:user:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
+                <el-button v-has-permi="['system:user:add']" type="primary" plain icon="Plus"
+                           @click="handleOpenDetail('add')">新增
+                </el-button>
               </el-col>
               <el-col :span="1.5">
-                <el-button v-has-permi="['system:user:add']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
+                <el-button v-has-permi="['system:user:add']" type="success" plain :disabled="single" icon="Edit"
+                           @click="handleOpenDetail('edit')">
                   修改
                 </el-button>
               </el-col>
               <el-col :span="1.5">
-                <el-button v-has-permi="['system:user:delete']" type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()">
+                <el-button v-has-permi="['system:user:delete']" type="danger" plain :disabled="multiple" icon="Delete"
+                           @click="handleDelete()">
                   删除
                 </el-button>
               </el-col>
@@ -58,8 +66,11 @@
                 <el-dropdown class="mt-[1px]">
                   <el-button plain type="info">
                     更多
-                    <el-icon class="el-icon--right"><arrow-down /></el-icon
-                  ></el-button>
+                    <el-icon class="el-icon--right">
+                      <arrow-down />
+                    </el-icon
+                    >
+                  </el-button>
                   <template #dropdown>
                     <el-dropdown-menu>
                       <el-dropdown-item icon="Download" @click="importTemplate">下载模板</el-dropdown-item>
@@ -69,19 +80,26 @@
                   </template>
                 </el-dropdown>
               </el-col>
-              <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar>
+              <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true"
+                             @query-table="getList"></right-toolbar>
             </el-row>
           </template>
-          <el-table v-loading="loading" :data="userList" height="calc(100vh - 22rem)" @selection-change="handleSelectionChange">
+          <el-table v-loading="loading" :data="userList" height="calc(100vh - 22rem)"
+                    @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="50" align="center" />
             <el-table-column v-if="columns[0].visible" key="userId" label="用户编号" align="center" prop="userId" />
-            <el-table-column v-if="columns[1].visible" key="userName" label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
-            <el-table-column v-if="columns[2].visible" key="nickName" label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
-            <el-table-column v-if="columns[3].visible" key="deptName" label="部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
-            <el-table-column v-if="columns[4].visible" key="phonenumber" label="手机号码" align="center" prop="phonenumber" width="120" />
+            <el-table-column v-if="columns[1].visible" key="userName" label="用户名称" align="center" prop="userName"
+                             :show-overflow-tooltip="true" />
+            <el-table-column v-if="columns[2].visible" key="nickName" label="用户昵称" align="center" prop="nickName"
+                             :show-overflow-tooltip="true" />
+            <el-table-column v-if="columns[3].visible" key="deptName" label="部门" align="center" prop="deptName"
+                             :show-overflow-tooltip="true" />
+            <el-table-column v-if="columns[4].visible" key="phonenumber" label="手机号码" align="center"
+                             prop="phonenumber" width="120" />
             <el-table-column v-if="columns[5].visible" key="status" label="状态" align="center">
               <template #default="scope">
-                <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+                <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
+                           @change="handleStatusChange(scope.row)"></el-switch>
               </template>
             </el-table-column>
 
@@ -94,18 +112,22 @@
             <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
               <template #default="scope">
                 <el-tooltip v-if="scope.row.userId !== 1" content="修改" placement="top">
-                  <el-button v-hasPermi="['system:user:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
+                  <el-button v-hasPermi="['system:user:edit']" link type="primary" icon="Edit"
+                             @click="handleUpdate(scope.row)"></el-button>
                 </el-tooltip>
                 <el-tooltip v-if="scope.row.userId !== 1" content="删除" placement="top">
-                  <el-button v-hasPermi="['system:user:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
+                  <el-button v-hasPermi="['system:user:remove']" link type="primary" icon="Delete"
+                             @click="handleDelete(scope.row)"></el-button>
                 </el-tooltip>
 
                 <el-tooltip v-if="scope.row.userId !== 1" content="重置密码" placement="top">
-                  <el-button v-hasPermi="['system:user:resetPwd']" link type="primary" icon="Key" @click="handleResetPwd(scope.row)"></el-button>
+                  <el-button v-hasPermi="['system:user:resetPwd']" link type="primary" icon="Key"
+                             @click="handleResetPwd(scope.row)"></el-button>
                 </el-tooltip>
 
                 <el-tooltip v-if="scope.row.userId !== 1" content="分配角色" placement="top">
-                  <el-button v-hasPermi="['system:user:edit']" link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)"></el-button>
+                  <el-button v-hasPermi="['system:user:edit']" link type="primary" icon="CircleCheck"
+                             @click="handleAuthRole(scope.row)"></el-button>
                 </el-tooltip>
               </template>
             </el-table-column>
@@ -120,7 +142,7 @@
         </el-card>
       </el-col>
     </el-row>
-    <!-- 添加或修改用户配置对话框 -->
+    <!-- 添加或修改用户对话框 -->
     <user-detail-form ref="userDetailFormRef" apped-to-body @success="getList" />
     <!-- 用户导入对话框 -->
     <el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
@@ -142,9 +164,14 @@
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <template #tip>
           <div class="text-center el-upload__tip">
-            <div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据</div>
+            <div class="el-upload__tip">
+              <el-checkbox v-model="upload.updateSupport" />
+              是否更新已经存在的用户数据
+            </div>
             <span>仅允许导入xls、xlsx格式文件。</span>
-            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
+                     @click="importTemplate">下载模板
+            </el-link>
           </div>
         </template>
       </el-upload>
@@ -428,7 +455,7 @@ const handleFileSuccess = (response: any, file: UploadFile) => {
   upload.open = false;
   upload.isUploading = false;
   uploadRef.value?.handleRemove(file);
-  ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
+  ElMessageBox.alert('<div style=\'overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;\'>' + response.msg + '</div>', '导入结果', {
     dangerouslyUseHTMLString: true
   });
   getList();
@@ -462,37 +489,12 @@ const cancel = () => {
 /** 增加/修改按钮操作 */
 const userDetailFormRef = ref();
 const handleOpenDetail = async (cmd: string, row?: UserVO) => {
-  const userId = row?.userId || ids.value[0];
-  const realNames = row?.realName || names.value;
+  let userId = undefined;
+  if (cmd === 'edit') {
+    userId = row?.userId || ids.value[0];
+  }
   userDetailFormRef?.value.open(cmd, userId);
 };
-/** 新增按钮操作 */
-// const handleAdd = async () => {
-//   reset();
-//   const { data } = await api.getUser();
-//   dialog.visible = true;
-//   dialog.title = '新增用户';
-//   await initTreeData();
-//   postOptions.value = data.posts;
-//   roleOptions.value = data.roles;
-//   form.value.password = initPassword.value.toString();
-// };
-
-/** 修改按钮操作 */
-// const handleUpdate = async (row?: UserForm) => {
-//   reset();
-//   const userId = row?.userId || ids.value[0];
-//   const { data } = await api.getUser(userId);
-//   dialog.visible = true;
-//   dialog.title = '修改用户';
-//   await initTreeData();
-//   Object.assign(form.value, data.user);
-//   postOptions.value = data.posts;
-//   roleOptions.value = data.roles;
-//   form.value.postIds = data.postIds;
-//   form.value.roleIds = data.roleIds;
-//   form.value.password = '';
-// };
 
 /** 提交按钮 */
 const submitForm = () => {