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

1、界面样式调整

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

@@ -29,6 +29,7 @@ export interface UserVO extends BaseEntity {
   userId: string | number;
   tenantId: string;
   deptId: number;
+  postId: string | number;
   userName: string;
   nickName: string;
   realName: string;

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

@@ -1,23 +1,23 @@
 <template>
   <div class="e-dialog">
-    <el-dialog v-model="dialog.visible" :title="dialog.title" :draggable="dialog.draggable" width="35%" align-center>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" :draggable="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 label="用户名" prop="userName">
+              <el-input v-model="formData.userName" placeholder="请输入用户名/登录账号" />
             </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-input v-model="formData.loginPwd" placeholder="请输入登录密码" type="password" maxlength="20" show-password />
             </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-input v-model="formData.userNumb" placeholder="请输入学/工号" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -36,12 +36,11 @@
                 value-key="id"
                 placeholder="请选择归属部门"
                 check-strictly
-                @change="handleDeptChange"
               />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="工作岗位" prop="postId">
+            <el-form-item label="所在岗位" prop="postId">
               <el-select v-model="formData.postId" placeholder="请选择">
                 <el-option
                   v-for="item in postOptions"
@@ -56,7 +55,7 @@
         </el-row>
         <el-row>
           <el-col :span="12">
-            <el-form-item label="用户身份" prop="category">
+            <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>
@@ -121,6 +120,7 @@ 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';
+import { XfConsumeDetailForm } from '@/api/consumption/XfConsumeDetail/types';
 
 /** 当前组件属性 */
 defineOptions({ name: 'RecompenseForm' });
@@ -132,9 +132,10 @@ const { sys_yes_no, sys_user_sex, CATEGORY } = toRefs<any>(proxy?.useDict('sys_y
 // 对话框
 const dialog = reactive<DialogOption>({
   visible: false,
-  title: '',
-  draggable: true
+  title: ''
 });
+// 窗体是否可以拖动
+const draggable = ref(true);
 // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formLoading = ref(false);
 // 表单的类型：create - 新增；update - 修改
@@ -142,7 +143,7 @@ const formType = ref('');
 // 操作类型
 const command = ref('');
 // 输入项是否禁用
-const disabled = ref(false);
+const disabled = ref(true);
 // 部门下拉数据
 const deptOptions = ref<DeptVO[]>([]);
 // 默认初始密码
@@ -196,13 +197,14 @@ const open = async (cmd: string, id?: string | number) => {
   try {
     let res;
     if (id) {
-      disabled.value = true;
+      disabled.value = false;
       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 {
+      disabled.value = true;
       res = await api.getUser();
       formData.value.loginPwd = initPassword.value.toString();
     }
@@ -211,15 +213,6 @@ const open = async (cmd: string, id?: string | number) => {
   } 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 () => {
@@ -260,8 +253,26 @@ const resetForm = () => {
 defineExpose({ open });
 
 // 触发父组件的事件
-const emits = defineEmits([]);
-
+const emit = defineEmits(['success']);
+// 提交按钮
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef.value) return;
+  const valid = await formRef.value?.validate();
+  if (!valid) return;
+  // 提交请求
+  formLoading.value = true;
+  try {
+    const data = formData.value as unknown as UserForm;
+    data.userId ? await api.updateUser(data) : await api.addUser(data);
+    proxy?.$modal.msgSuccess('操作成功');
+  } finally {
+    formLoading.value = false;
+  }
+  dialog.visible = false;
+  // 发送操作成功的事件
+  emit('success');
+};
 // 初始化
 onMounted(() => {
   // 初始化部门数据

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

@@ -20,19 +20,15 @@
         </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>
@@ -46,19 +42,15 @@
           <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="handleOpenDetail('add')">新增
-                </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="handleOpenDetail('edit')">
+                <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>
@@ -68,8 +60,7 @@
                     更多
                     <el-icon class="el-icon--right">
                       <arrow-down />
-                    </el-icon
-                    >
+                    </el-icon>
                   </el-button>
                   <template #dropdown>
                     <el-dropdown-menu>
@@ -80,54 +71,88 @@
                   </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" highlight-current-row>
             <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[5].visible" key="status" label="状态" align="center">
+            <el-table-column
+              v-if="columns[0].visible"
+              key="userId"
+              label="学/工号"
+              align="center"
+              prop="userNumb"
+              width="180"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              v-if="columns[1].visible"
+              key="userName"
+              label="用户名"
+              align="center"
+              prop="userName"
+              width="160"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              v-if="columns[2].visible"
+              key="nickName"
+              label="用户姓名"
+              align="center"
+              prop="realName"
+              width="160"
+              :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="phone"
+              label="手机号码"
+              align="center"
+              prop="phone"
+              width="180"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              v-if="columns[5].visible"
+              key="category"
+              label="用户类型"
+              align="center"
+              prop="category"
+              width="180"
+              :show-overflow-tooltip="true"
+            >
               <template #default="scope">
-                <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
-                           @change="handleStatusChange(scope.row)"></el-switch>
+                <dict-tag :options="CATEGORY" :value="scope.row.category" />
               </template>
             </el-table-column>
-
-            <el-table-column v-if="columns[6].visible" label="创建时间" align="center" prop="createTime" width="160">
+            <el-table-column v-if="columns[5].visible" key="status" label="状态" align="center" width="100">
               <template #default="scope">
-                <span>{{ scope.row.createTime }}</span>
+                <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
               </template>
             </el-table-column>
-
-            <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
+            <el-table-column label="操作" fixed="right"  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>
@@ -169,9 +194,7 @@
               是否更新已经存在的用户数据
             </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>
@@ -189,7 +212,6 @@
 import api from '@/api/system/right/user';
 import { UserForm, UserQuery, UserVO } from '@/api/system/right/user/types';
 import { DeptVO } from '@/api/system/dept/types';
-import { RoleVO } from '@/api/system/role/types';
 import { PostVO } from '@/api/system/params/post/types';
 import { treeselect } from '@/api/system/dept';
 import { globalHeaders } from '@/utils/request';
@@ -198,7 +220,7 @@ import UserDetailForm from '@/views/system/right/user/UserDetailForm.vue';
 
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { sys_normal_disable, sys_user_sex } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
+const { sys_normal_disable, sys_user_sex,CATEGORY } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex','CATEGORY'));
 const userList = ref<UserVO[]>();
 const loading = ref(true);
 const showSearch = ref(true);
@@ -211,7 +233,7 @@ const deptName = ref('');
 const deptOptions = ref<DeptVO[]>([]);
 const initPassword = ref<string>('');
 const postOptions = ref<PostVO[]>([]);
-const roleOptions = ref<RoleVO[]>([]);
+
 /*** 用户导入参数 */
 const upload = reactive<ImportOption>({
   // 是否显示弹出层（用户导入）
@@ -229,7 +251,7 @@ const upload = reactive<ImportOption>({
 });
 // 列显隐信息
 const columns = ref<FieldOption[]>([
-  { key: 0, label: `用户编号`, visible: false, children: [] },
+  { key: 0, label: `学/工号`, visible: true, children: [] },
   { key: 1, label: `用户名称`, visible: true, children: [] },
   { key: 2, label: `用户昵称`, visible: true, children: [] },
   { key: 3, label: `部门`, visible: true, children: [] },
@@ -455,7 +477,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();