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

1、界面样式调整

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

@@ -1,4 +1,4 @@
-import { DeptVO } from './../dept/types';
+import { DeptVO } from '@/api/system/dept/types';
 import { RoleVO } from '@/api/system/role/types';
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';

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

@@ -4,12 +4,12 @@
       <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-form-item v-if="formData.userId == undefined" 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-form-item v-if="formData.userId == undefined" label="登录密码" prop="loginPwd">
               <el-input v-model="formData.loginPwd" placeholder="请输入登录密码" type="password" maxlength="20" show-password />
             </el-form-item>
           </el-col>
@@ -36,6 +36,7 @@
                 value-key="id"
                 placeholder="请选择归属部门"
                 check-strictly
+                filterable
               />
             </el-form-item>
           </el-col>
@@ -48,6 +49,7 @@
                   :label="item.postName"
                   :value="item.postId"
                   :disabled="item.status == '1'"
+                  filterable
                 ></el-option>
               </el-select>
             </el-form-item>
@@ -136,6 +138,7 @@ import { PostVO } from '@/api/system/params/post/types';
 import { RoleVO } from '@/api/system/role/types';
 import { treeselect } from '@/api/system/dept';
 import { listUsePtCardType } from '@/api/basics/basicParameter/ptCardtype';
+import { PtCardTypeVO } from '@/api/basics/basicParameter/ptCardtype/types';
 
 /** 当前组件属性 */
 defineOptions({ name: 'RecompenseForm' });
@@ -203,7 +206,9 @@ const formRules = reactive({
   postId: [{ required: true, message: '工作岗位不能为空', trigger: 'blur' }],
   category: [{ required: true, message: '用户身份不能为空', trigger: 'blur' }],
   phone: [{ required: true, message: '电话号码不能为空', trigger: 'blur' }],
-  roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }]
+  roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }],
+  cardType: [{ required: true, message: '账户卡类不能为空', trigger: 'blur' }],
+  lifespan: [{ required: true, message: '账户有效期不能为空', trigger: 'blur' }]
 });
 /** 当前组件方法 */
 const open = async (cmd: string, id?: string | number) => {

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

@@ -54,27 +54,27 @@
                   删除
                 </el-button>
               </el-col>
-              <el-col :span="1.5">
-                <el-dropdown class="mt-[1px]">
-                  <el-button plain type="info">
-                    更多
-                    <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>
-                      <el-dropdown-item icon="Top" @click="handleImport"> 导入数据</el-dropdown-item>
-                      <el-dropdown-item icon="Download" @click="handleExport"> 导出数据</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </el-col>
+<!--              <el-col :span="1.5">-->
+<!--                <el-dropdown class="mt-[1px]">-->
+<!--                  <el-button plain type="info">-->
+<!--                    更多-->
+<!--                    <el-icon class="el-icon&#45;&#45;right">-->
+<!--                      <arrow-down />-->
+<!--                    </el-icon>-->
+<!--                  </el-button>-->
+<!--                  <template #dropdown>-->
+<!--                    <el-dropdown-menu>-->
+<!--                      <el-dropdown-item icon="Download" @click="importTemplate">下载模板</el-dropdown-item>-->
+<!--                      <el-dropdown-item icon="Top" @click="handleImport"> 导入数据</el-dropdown-item>-->
+<!--                      <el-dropdown-item icon="Download" @click="handleExport"> 导出数据</el-dropdown-item>-->
+<!--                    </el-dropdown-menu>-->
+<!--                  </template>-->
+<!--                </el-dropdown>-->
+<!--              </el-col>-->
               <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" highlight-current-row>
+          <el-table v-loading="loading" :data="userList" height="calc(100vh - 22rem)" highlight-current-row @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="50" align="center" />
             <el-table-column
               v-if="columns[0].visible"
@@ -103,14 +103,7 @@
               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[3].visible" key="deptName" label="部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
             <el-table-column
               v-if="columns[4].visible"
               key="phone"
@@ -138,10 +131,16 @@
                 <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"  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="handleOpenDetail('edit', 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>
@@ -210,17 +209,16 @@
 
 <script setup name="User" lang="ts">
 import api from '@/api/system/right/user';
-import { UserForm, UserQuery, UserVO } from '@/api/system/right/user/types';
+import { UserQuery, UserVO } from '@/api/system/right/user/types';
 import { DeptVO } from '@/api/system/dept/types';
-import { PostVO } from '@/api/system/params/post/types';
-import { treeselect } from '@/api/system/dept';
 import { globalHeaders } from '@/utils/request';
 import { to } from 'await-to-js';
 import UserDetailForm from '@/views/system/right/user/UserDetailForm.vue';
+import { ArrowDown } from '@element-plus/icons-vue';
 
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { sys_normal_disable, sys_user_sex,CATEGORY } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex','CATEGORY'));
+const { CATEGORY } = toRefs<any>(proxy?.useDict('CATEGORY'));
 const userList = ref<UserVO[]>();
 const loading = ref(true);
 const showSearch = ref(true);
@@ -232,7 +230,6 @@ const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
 const deptName = ref('');
 const deptOptions = ref<DeptVO[]>([]);
 const initPassword = ref<string>('');
-const postOptions = ref<PostVO[]>([]);
 
 /*** 用户导入参数 */
 const upload = reactive<ImportOption>({
@@ -259,87 +256,19 @@ const columns = ref<FieldOption[]>([
   { key: 5, label: `状态`, visible: true, children: [] },
   { key: 6, label: `创建时间`, visible: true, children: [] }
 ]);
+const queryParams = reactive<UserQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  userName: '',
+  phone: '',
+  status: '',
+  deptId: '',
+  roleId: ''
+});
 const deptTreeRef = ref<ElTreeInstance>();
 // 查询客体ref
 const queryFormRef = ref<ElFormInstance>();
-const userFormRef = ref<ElFormInstance>();
 const uploadRef = ref<ElUploadInstance>();
-const formDialogRef = ref<ElDialogInstance>();
-
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
-const initFormData: UserForm = {
-  userId: undefined,
-  deptId: undefined,
-  userName: '',
-  nickName: undefined,
-  password: '',
-  phonenumber: undefined,
-  email: undefined,
-  sex: undefined,
-  status: '0',
-  remark: '',
-  postIds: [],
-  roleIds: []
-};
-
-const initData: PageData<UserForm, UserQuery> = {
-  form: { ...initFormData },
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    userName: '',
-    realName: '',
-    phone: '',
-    status: '',
-    deptId: '',
-    roleId: ''
-  },
-  rules: {
-    userName: [
-      { required: true, message: '用户名称不能为空', trigger: 'blur' },
-      {
-        min: 2,
-        max: 20,
-        message: '用户名称长度必须介于 2 和 20 之间',
-        trigger: 'blur'
-      }
-    ],
-    nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
-    password: [
-      { required: true, message: '用户密码不能为空', trigger: 'blur' },
-      {
-        min: 5,
-        max: 20,
-        message: '用户密码长度必须介于 5 和 20 之间',
-        trigger: 'blur'
-      },
-      { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\\ |', trigger: 'blur' }
-    ],
-    email: [
-      {
-        type: 'email',
-        message: '请输入正确的邮箱地址',
-        trigger: ['blur', 'change']
-      }
-    ],
-    phonenumber: [
-      {
-        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-        message: '请输入正确的手机号码',
-        trigger: 'blur'
-      }
-    ],
-    roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }]
-  }
-};
-const data = reactive<PageData<UserForm, UserQuery>>(initData);
-
-const { queryParams, form, rules } = toRefs<PageData<UserForm, UserQuery>>(data);
-
 /** 通过条件过滤节点  */
 const filterNode = (value: string, data: any) => {
   if (!value) return true;
@@ -364,7 +293,7 @@ const getTreeSelect = async () => {
 /** 查询用户列表 */
 const getList = async () => {
   loading.value = true;
-  const res = await api.listUser(proxy?.addDateRange(queryParams.value, dateRange.value));
+  const res = await api.listUser(proxy?.addDateRange(queryParams, dateRange.value));
   loading.value = false;
   userList.value = res.rows;
   total.value = res.total;
@@ -372,21 +301,21 @@ const getList = async () => {
 
 /** 节点单击事件 */
 const handleNodeClick = (data: DeptVO) => {
-  queryParams.value.deptId = data.id;
+  queryParams.deptId = data.id;
   handleQuery();
 };
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
-  queryParams.value.pageNum = 1;
+  queryParams.pageNum = 1;
   getList();
 };
 /** 重置按钮操作 */
 const resetQuery = () => {
   dateRange.value = ['', ''];
   queryFormRef.value?.resetFields();
-  queryParams.value.pageNum = 1;
-  queryParams.value.deptId = undefined;
+  queryParams.pageNum = 1;
+  queryParams.deptId = undefined;
   deptTreeRef.value?.setCurrentKey(undefined);
   handleQuery();
 };
@@ -394,14 +323,11 @@ const resetQuery = () => {
 /** 删除按钮操作 */
 const handleDelete = async (row?: UserVO) => {
   const userIds = row?.userId || ids.value;
-  const [err] = await to(proxy?.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？') as any);
-  if (!err) {
-    await api.delUser(userIds);
-    await getList();
-    proxy?.$modal.msgSuccess('删除成功');
-  }
+  await proxy?.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？');
+  await api.delUser(userIds);
+  await getList();
+  proxy?.$modal.msgSuccess('删除成功');
 };
-
 /** 用户状态修改  */
 const handleStatusChange = async (row: UserVO) => {
   let text = row.status === '0' ? '启用' : '停用';
@@ -429,7 +355,7 @@ const handleResetPwd = async (row: UserVO) => {
       inputPattern: /^.{5,20}$/,
       inputErrorMessage: '用户密码长度必须介于 5 和 20 之间',
       inputValidator: (value) => {
-        if (/<|>|"|'|\||\\/.test(value)) {
+        if (/[<>"'|\\]/.test(value)) {
           return '不能包含非法字符：< > " \' \\\ |';
         }
       }
@@ -458,7 +384,7 @@ const handleExport = () => {
   proxy?.download(
     'system/user/export',
     {
-      ...queryParams.value
+      ...queryParams
     },
     `user_${new Date().getTime()}.xlsx`
   );
@@ -488,26 +414,6 @@ function submitFileForm() {
   uploadRef.value?.submit();
 }
 
-/** 初始化部门数据 */
-const initTreeData = async () => {
-  // 判断部门的数据是否存在，存在不获取，不存在则获取
-  if (deptOptions.value === undefined) {
-    const { data } = await treeselect();
-    deptOptions.value = data;
-  }
-};
-
-/** 重置操作表单 */
-const reset = () => {
-  form.value = { ...initFormData };
-  userFormRef.value?.resetFields();
-};
-/** 取消按钮 */
-const cancel = () => {
-  dialog.visible = false;
-  reset();
-};
-
 /** 增加/修改按钮操作 */
 const userDetailFormRef = ref();
 const handleOpenDetail = async (cmd: string, row?: UserVO) => {
@@ -517,37 +423,6 @@ const handleOpenDetail = async (cmd: string, row?: UserVO) => {
   }
   userDetailFormRef?.value.open(cmd, userId);
 };
-
-/** 提交按钮 */
-const submitForm = () => {
-  userFormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      form.value.userId ? await api.updateUser(form.value) : await api.addUser(form.value);
-      proxy?.$modal.msgSuccess('操作成功');
-      dialog.visible = false;
-      await getList();
-    }
-  });
-};
-
-/**
- * 关闭用户弹窗
- */
-const closeDialog = () => {
-  dialog.visible = false;
-  resetForm();
-};
-
-/**
- * 重置表单
- */
-const resetForm = () => {
-  userFormRef.value?.resetFields();
-  userFormRef.value?.clearValidate();
-
-  form.value.id = undefined;
-  form.value.status = '1';
-};
 onMounted(() => {
   getTreeSelect(); // 初始化部门数据
   getList(); // 初始化列表数据
@@ -555,12 +430,6 @@ onMounted(() => {
     initPassword.value = response.data;
   });
 });
-
-async function handleDeptChange(value: number | string) {
-  const response = await optionselect(value);
-  postOptions.value = response.data;
-  form.value.postIds = [];
-}
 </script>
 
 <style lang="scss" scoped>