From 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期二, 04 三月 2025 08:39:55 +0800 Subject: [PATCH] 修改作业等级名称 --- src/views/system/user/index.vue | 242 +++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 227 insertions(+), 15 deletions(-) diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue index 2072e9e..2c935bc 100644 --- a/src/views/system/user/index.vue +++ b/src/views/system/user/index.vue @@ -2,8 +2,17 @@ <div class="system-user-container"> <el-card shadow="hover"> <div class="system-user-search mb15"> - <el-input size="default" v-model="userTableData.listQuery.searchParams.username" placeholder="请输入用户名称" style="max-width: 180px"> </el-input> - <el-input size="default" v-model="userTableData.listQuery.searchParams.realName" placeholder="请输入真实姓名" style="max-width: 180px; margin-left: 10px"> </el-input> + <el-cascader + v-model="userTableData.listQuery.searchParams.depId" + :props="props" + :options="departmentList" + :show-all-levels="false" + placeholder="请选择部门" + clearable + size="default" + ></el-cascader> + <el-input size="default" v-model.trim="userTableData.listQuery.searchParams.username" placeholder="请输入用户名" style="max-width: 180px;margin-left: 10px;margin-right: 10px"> </el-input> +<!-- <el-input size="default" v-model.trim="userTableData.listQuery.searchParams.realName" placeholder="请输入真实姓名" style="max-width: 180px"> </el-input>--> <el-button size="default" type="primary" class="ml10" @click="initUserTableData"> <el-icon> <ele-Search /> @@ -19,11 +28,25 @@ </div> <el-table :data="userTableData.data" style="width: 100%"> <el-table-column type="index" label="序号" width="60" /> - <el-table-column prop="username" label="账户名称" show-overflow-tooltip></el-table-column> - <el-table-column prop="realName" label="用户昵称" show-overflow-tooltip></el-table-column> - <el-table-column prop="sex" label="性别" show-overflow-tooltip></el-table-column> - <el-table-column prop="role.name" label="关联角色" show-overflow-tooltip></el-table-column> - <el-table-column prop="department.name" label="部门" show-overflow-tooltip></el-table-column> + <el-table-column prop="username" label="用户名" show-overflow-tooltip></el-table-column> + <el-table-column prop="realName" label="真实姓名" show-overflow-tooltip></el-table-column> + <el-table-column prop="gender" label="性别" show-overflow-tooltip> + <template #default="scope"> + <el-tag type="success" v-if="scope.row.gender == 1">男</el-tag> + <el-tag type="success" v-else-if="scope.row.gender == 0">女</el-tag> + </template> + </el-table-column> + <el-table-column prop="positionId" label="职务" show-overflow-tooltip> + <template #default="scope"> + {{ scope.row.positions?.map(i=>i.positionName).join('、') }} + </template> + </el-table-column> +<!-- <el-table-column prop="type" label="职务" show-overflow-tooltip>--> +<!-- <template #default="scope">--> +<!-- {{ `${userTypeList.find(item => item.id === scope.row.type)?.name}` }}--> +<!-- </template>--> +<!-- </el-table-column>--> + <el-table-column prop="depName" label="部门" show-overflow-tooltip></el-table-column> <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column> <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column> <el-table-column prop="status" label="用户状态" show-overflow-tooltip> @@ -33,10 +56,13 @@ </template> </el-table-column> <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column> - <el-table-column label="操作" width="100"> + <el-table-column label="操作" width="200"> <template #default="scope"> + <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenUserDialog('查看', scope.row)">查看</el-button> <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenUserDialog('修改', scope.row)">修改</el-button> - <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button> + <el-button size="small" text type="primary" @click="onPwdDialog(scope.row.uid)">修改密码</el-button> + <el-button size="small" text type="primary" @click="onCertificate(scope.row)">证书管理</el-button> + <el-button style="color: red" :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button> </template> </el-table-column> </el-table> @@ -46,6 +72,27 @@ <br /> </el-card> <userDialog ref="userRef" @getUserList="initUserTableData" /> + <dialog-certificate ref="ctfRef" @getUserList="initUserTableData"></dialog-certificate> + <el-dialog title="修改密码" v-model="showPwdDialog" width="500px"> + <el-form :model="pwdForm" size="default" ref="pwdRef" :rules="pwdFormRules" label-width="110px"> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-form-item label="新密码" prop="newPassword"> + <el-input v-model.trim="pwdForm.newPassword" placeholder="请输入" type="password" show-password> + </el-input> + </el-form-item> + <el-form-item label="确认新密码" prop="rePassword"> + <el-input v-model.trim="pwdForm.rePassword" placeholder="请输入" type="password" show-password> + </el-input> + </el-form-item> + </el-col> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="showPwdDialog = !showPwdDialog" size="default">取 消</el-button> + <el-button type="primary" v-throttle @click="onPwdSubmit" size="default">确 定</el-button> + </span> + </template> + </el-dialog> </div> </template> @@ -53,9 +100,15 @@ import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue'; import { ElMessageBox, ElMessage } from 'element-plus'; import userDialog from '/@/views/system/user/component/userDialog.vue'; +import dialogCertificate from "/@/views/system/user/component/dialogCertificate.vue"; import { userApi } from '/@/api/systemManage/user'; +import { dutyApi } from '/@/api/systemManage/duty'; import { departmentApi } from '/@/api/systemManage/department'; import { useRoleApi } from '/@/api/systemManage/role'; +import {verifyPwd} from "/@/utils/toolsValidate"; +import {useLoginApi} from "/@/api/login"; +import {Session} from "/@/utils/storage"; +import Cookies from "js-cookie"; // 定义接口来定义对象的类型 interface TableDataRow { @@ -80,6 +133,7 @@ loading: boolean; listQuery: { searchParams: { + depId: string | null; username: string | null; realName: string | null; }; @@ -89,13 +143,45 @@ }; departmentList: []; roleList: []; + dutyList: []; + userTypeList: Array<{id:number,name:string}>; + props:{} + showPwdDialog: boolean + pwdForm: { + uid: number|string| null + newPassword: string + rePassword: string + } + pwdFormRules: {} } export default defineComponent({ name: 'systemUser', - components: { userDialog }, + components: { userDialog,dialogCertificate }, setup() { const userRef = ref(); + const pwdRef = ref(); + const ctfRef = ref() + let validatePwd = (rule: any, value: any, callback: any)=>{ + if(value === ''){ + callback(new Error('请输入密码')) + }else{ + if(!verifyPwd(value)){ + callback(new Error('密码须包含字母、数字、特殊字符,长度在6-16之间')) + }else{ + callback() + } + } + } + const equalToPassword = (rule: any, value: any, callback: any) => { + if(value == ''){ + callback(new Error("请再次确认密码")) + }else if (state.pwdForm.newPassword !== value) { + callback(new Error("两次输入的密码不一致")) + } else { + callback(); + } + }; const state = reactive<TableDataState>({ userTableData: { data: [], @@ -103,6 +189,7 @@ loading: false, listQuery: { searchParams: { + depId: null, username: null, realName: null }, @@ -111,7 +198,29 @@ } }, departmentList: [], - roleList: [] + roleList: [], + dutyList: [], + props: { + label: 'depName', + value: 'depId', + checkStrictly: true, + emitPath: false + }, + userTypeList: [ + { id: 1, name: '超级管理员' }, + { id: 2, name: '管理员' }, + { id: 3, name: '普通员工' } + ], + showPwdDialog: false, + pwdForm: { + uid: null, + newPassword: '', + rePassword: '' + }, + pwdFormRules: { + newPassword: [{ required: true, validator: validatePwd, trigger: 'blur' }], + rePassword: [{ required: true, validator: equalToPassword, trigger: "blur" }] + } }); // 初始化表格数据 const initUserTableData = async () => { @@ -127,6 +236,10 @@ } }; + // 回显职务信息 + const parseNumber = (value: number) => { + return state.dutyList.find((i) => i.positionId === value)?.positionName; + }; const getDepartmentData = async () => { let res = await departmentApi().getDepartmentList(); if (res.data.code === '200') { @@ -151,20 +264,100 @@ } }; + const getDutyData = async () => { + let res = await dutyApi().getAllList({positionName: '',positionCode: ''}); + if (res.data.code === '200') { + state.dutyList = res.data.data; + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + // 打开新增修改用户弹窗 const onOpenUserDialog = (type: string, value: any) => { - userRef.value.openDialog(type, value, state.departmentList, state.roleList); + userRef.value.openDialog(type, value, state.departmentList, state.roleList, state.dutyList); }; + + const onPwdDialog = (uid: string)=>{ + state.pwdForm = { + uid: uid, + newPassword: '', + rePassword: '' + } + state.showPwdDialog = true + } + + const onPwdSubmit = async () => { + pwdRef.value.validate(async (valid:Boolean) => { + if(valid){ + const {rePassword,...data} = state.pwdForm + let res = await userApi().pwdMod(data); + if (res.data.code === '200') { + state.showPwdDialog = false; + if(state.pwdForm.uid == Cookies.get('uid')){ + ElMessage({ + type: 'success', + message: '密码修改成功,请重新登录', + duration: 2000 + }) + setTimeout(()=>{ + useLoginApi() + .signOut() + .then(() => { + Session.clear() + window.location.href = '/' + }) + },2000) + }else{ + ElMessage({ + type: 'success', + message: '修改密码成功', + duration: 2000 + }) + } + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }else{ + ElMessage({ + type:'warning', + message:'请完善信息' + }) + } + }) + } + const onCertificate = (value: any)=>{ + ctfRef.value.openDialog(value); + } // 删除用户 const onRowDel = (row: TableDataRow) => { - ElMessageBox.confirm(`此操作将永久删除账户名称:“${row.userName}”,是否继续?`, '提示', { + ElMessageBox.confirm(`此操作将永久删除账户名称:“${row.realName}”,是否继续?`, '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }) - .then(() => { - ElMessage.success('删除成功'); + .then(async () => { + let res = await userApi().deleteUser({ uid: row.uid }); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + duration: 2000, + message: '删除成功' + }); + await initUserTableData(); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } }) .catch(() => {}); }; @@ -183,11 +376,18 @@ initUserTableData(); getDepartmentData(); getRoleData(); + getDutyData() }); return { userRef, + ctfRef, + pwdRef, + onPwdDialog, + onPwdSubmit, onOpenUserDialog, + onCertificate, onRowDel, + parseNumber, onHandleSizeChange, initUserTableData, onHandleCurrentChange, @@ -196,3 +396,15 @@ } }); </script> +<style scoped> +:deep(.el-textarea.is-disabled .el-textarea__inner) { + background-color: var(--el-card-bg-color); + color: var(--el-input-text-color, var(--el-text-color-regular)); +} +:deep(.el-input.is-disabled .el-input__inner) { + color: var(--el-input-text-color, var(--el-text-color-regular)); +} +:deep(.el-input.is-disabled .el-input__wrapper) { + background-color: var(--el-card-bg-color); +} +</style> -- Gitblit v1.9.2